From 0c76b8802b5366a8984b038a7d5cd7f6df02e8cd Mon Sep 17 00:00:00 2001 From: srolket Date: Tue, 7 Apr 2026 17:43:48 +0500 Subject: [PATCH 1/6] done logo 7 --- .idea/.gitignore | 10 ++++++++++ .idea/encodings.xml | 4 ++++ index.html | 7 ++++++- styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/encodings.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..69ab804 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..ee5d9ad 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,12 @@ - + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..20db8ea 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,44 @@ +body { + background: white; + display: flex; + justify-content: center; + height: 100vh; +} + +.logo { + width: 100px; + height: 100px; + position: relative; +} + +.circle { + width: 15px; + height: 15px; + background: #61dafb; + border-radius: 50%; + position: absolute; + top: 42px; + left: 42px; +} + +.ellipse { + position: absolute; + width: 100px; + height: 40px; + border: 4px solid #61dafb; + border-radius: 50%; + top: 30px; + box-sizing: border-box; +} + +.e1 { + transform: rotate(0deg); +} + +.e2 { + transform: rotate(60deg); +} + +.e3 { + transform: rotate(-60deg); +} \ No newline at end of file From ec18e32dfcffc09348a7afe01fd6ae38dc62701b Mon Sep 17 00:00:00 2001 From: Yury Shevarkov Date: Tue, 7 Apr 2026 18:03:11 +0500 Subject: [PATCH 2/6] mikki --- index.html | 6 ++++++ styles.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/index.html b/index.html index ee5d9ad..d153e0a 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,12 @@
+ +
+
+
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index 20db8ea..77b9432 100644 --- a/styles.css +++ b/styles.css @@ -41,4 +41,39 @@ body { .e3 { transform: rotate(-60deg); +} + + +.logo-mickey { + width: 100px; + height: 100px; + position: relative; +} + +.logo-mickey .head { + width: 60px; + height: 60px; + background: black; + border-radius: 50%; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.logo-mickey .ear { + width: 40px; + height: 40px; + background: black; + border-radius: 50%; + position: absolute; + top: 10px; +} + +.logo-mickey .left { + left: 5px; +} + +.logo-mickey .right { + right: 5px; } \ No newline at end of file From 2d2c4f985c5d3d70e35e8b99f7d170bf6a3df9d7 Mon Sep 17 00:00:00 2001 From: srolket Date: Tue, 7 Apr 2026 18:07:33 +0500 Subject: [PATCH 3/6] done modal --- index.html | 14 +++++++++++ index.js | 32 ++++++++++++++++++++----- styles.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 108 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index ee5d9ad..129b569 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,20 @@
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..6cd17a7 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,27 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openBtn = document.getElementById('lightboxBtn'); +const overlay = document.getElementById('modalOverlay'); +const closeBtn = document.getElementById('modalCloseBtn'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function openModal() { + overlay.style.display = 'flex'; +} + +function closeModal() { + overlay.style.display = 'none'; +} + +openBtn.addEventListener('click', openModal); + +closeBtn.addEventListener('click', closeModal); + +overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + closeModal(); + } +}); + +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && overlay.style.display === 'flex') { + closeModal(); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 20db8ea..14f3f50 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,11 @@ body { background: white; display: flex; + flex-direction: column; justify-content: center; + align-items: center; height: 100vh; + margin: 0; } .logo { @@ -41,4 +44,68 @@ body { .e3 { transform: rotate(-60deg); -} \ No newline at end of file +} + +.lightbox-btn { + margin-top: 40px; + padding: 12px 28px; + font-size: 1.1rem; + font-weight: 600; + background: #61dafb; + border: none; + border-radius: 40px; + cursor: pointer; +} + +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal { + position: relative; + width: 640px; + max-width: 90vw; + background: white; + border-radius: 24px; + padding: 24px 28px 32px 28px; + box-sizing: border-box; +} + +.modal-close { + position: absolute; + top: 16px; + right: 20px; + background: none; + border: none; + font-size: 32px; + line-height: 1; + cursor: pointer; + color: black; + padding: 0 6px; +} + +.modal-content h1 { + margin-top: 0; + font-size: 1.9rem; +} + +.modal-content p { + line-height: 1.5; + color: #1e1e2a; +} + +kbd { + background: #f0f0f0; + border-radius: 6px; + padding: 2px 6px; + font-size: 0.9rem; +} From f6753189ed32886b37227c7917bf051402eae413 Mon Sep 17 00:00:00 2001 From: srolket Date: Tue, 7 Apr 2026 18:32:20 +0500 Subject: [PATCH 4/6] 5 done --- index.html | 58 ++++++++++++++++++++++++++++++++++++++---- styles.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 117 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 9220304..a114e7e 100644 --- a/index.html +++ b/index.html @@ -24,11 +24,59 @@ diff --git a/styles.css b/styles.css index 11b1a84..8b92136 100644 --- a/styles.css +++ b/styles.css @@ -128,19 +128,73 @@ body { padding: 0 6px; } -.modal-content h1 { - margin-top: 0; - font-size: 1.9rem; +.modal-content { + margin-top: 8px; } -.modal-content p { - line-height: 1.5; - color: #1e1e2a; +.accordion { + display: flex; + flex-direction: column; + gap: 12px; +} + +.accordion-item { + border: 1px solid #e0e0e0; + border-radius: 16px; + overflow: hidden; + background: #fefefe; + width: 95%; +} + +.accordion-input { + display: none; } -kbd { - background: #f0f0f0; - border-radius: 6px; - padding: 2px 6px; +.accordion-label { + display: block; + padding: 16px 20px; + font-weight: 700; + font-size: 1.2rem; + background: #f7f7f9; + cursor: pointer; + user-select: none; + position: relative; + border-bottom: 1px solid transparent; +} + +.accordion-label::after { + content: "▼"; + float: right; font-size: 0.9rem; + color: #61dafb; +} + +.accordion-input:checked + .accordion-label::after { + transform: rotate(180deg); +} + +.accordion-body { + display: none; + padding: 0 20px 16px 20px; + background: white; + border-top: 1px solid #eee; + line-height: 1.5; + color: #2c3e50; +} + +.accordion-input:checked ~ .accordion-body { + display: block; +} + +.accordion-body p { + margin: 12px 0; +} + +.accordion-body ul { + margin: 8px 0 12px 20px; + padding-left: 0; +} + +.accordion-body li { + margin: 6px 0; } From 3a9b6f18e34a3ea98455010fa81fcd3c84b5dbb6 Mon Sep 17 00:00:00 2001 From: Yury Shevarkov Date: Tue, 7 Apr 2026 18:32:54 +0500 Subject: [PATCH 5/6] 12 --- index.html | 7 +++++++ styles.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/index.html b/index.html index 9220304..3644efb 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,13 @@

That's all, folks

You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.

If you like this you would probably enjoy Meny, reveal.js and stroll.js.

+ +
+
+ +
Loading...
+
Loading...
+
diff --git a/styles.css b/styles.css index 11b1a84..4fdad74 100644 --- a/styles.css +++ b/styles.css @@ -144,3 +144,52 @@ kbd { padding: 2px 6px; font-size: 0.9rem; } + +/* ===== ПРОГРЕСС БАР ===== */ + +.progress { + position: relative; + margin-top: 20px; + height: 40px; + background: #aaa; + overflow: hidden; + border-radius: 6px; + + display: flex; + align-items: center; + justify-content: center; +} + +/* красная часть */ +.bar { + position: absolute; + left: 0; /* ВАЖНО */ + top: 0; /* на всякий */ + height: 100%; + width: 40%; + background: red; +} + +/* текст */ +.text { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + text-align: center; + line-height: 40px; + font-size: 18px; +} + +/* черный текст */ +.text-black { + color: black; + z-index: 1; +} + +.text-white { + color: white; + z-index: 2; + clip-path: inset(0 60% 0 0); /* 100 - 40 */ +} \ No newline at end of file From 3c64befee1c22e98d2b73008c2cc74cdf3a42fa2 Mon Sep 17 00:00:00 2001 From: Yury Shevarkov Date: Tue, 7 Apr 2026 18:51:30 +0500 Subject: [PATCH 6/6] final --- index.js | 33 ++++++++++++++++++++++++++++++++- styles.css | 12 ++++-------- 2 files changed, 36 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 6cd17a7..60a28f3 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,11 @@ const closeBtn = document.getElementById('modalCloseBtn'); function openModal() { overlay.style.display = 'flex'; + + bar.style.width = '0%'; + textWhite.style.clipPath = 'inset(0 100% 0 0)'; + + animateProgress(); } function closeModal() { @@ -24,4 +29,30 @@ document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && overlay.style.display === 'flex') { closeModal(); } -}); \ No newline at end of file +}); + +const bar = document.querySelector('.bar'); +const textWhite = document.querySelector('.text-white'); + +function animateProgress() { + let progress = 0; + + const duration = 3000; + const fps = 60; + const stepTime = 1000 / fps; + const step = 100 / (duration / stepTime); + + const interval = setInterval(() => { + progress += step; + + if (progress >= 100) { + progress = 100; + clearInterval(interval); + } + + bar.style.width = progress + '%'; + + textWhite.style.clipPath = `inset(0 ${100 - progress}% 0 0)`; + + }, stepTime); +} \ No newline at end of file diff --git a/styles.css b/styles.css index fcd7a21..e81c0eb 100644 --- a/styles.css +++ b/styles.css @@ -199,7 +199,6 @@ body { margin: 6px 0; } -/* ===== ПРОГРЕСС БАР ===== */ .progress { position: relative; @@ -214,17 +213,16 @@ body { justify-content: center; } -/* красная часть */ .bar { position: absolute; - left: 0; /* ВАЖНО */ - top: 0; /* на всякий */ + left: 0; + top: 0; height: 100%; width: 40%; - background: red; + background: crimson; } -/* текст */ + .text { position: absolute; left: 0; @@ -236,7 +234,6 @@ body { font-size: 18px; } -/* черный текст */ .text-black { color: black; z-index: 1; @@ -245,5 +242,4 @@ body { .text-white { color: white; z-index: 2; - clip-path: inset(0 60% 0 0); /* 100 - 40 */ } \ No newline at end of file