From 1f89d8122c34942b640f663959521f44b518d773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D1=81=D0=B8=D0=BB=D1=8C=D0=B5=D0=B2=5F=D0=AE?= =?UTF-8?q?=D1=80=D0=B8=D0=B9?= Date: Tue, 7 Apr 2026 18:11:05 +0500 Subject: [PATCH 1/5] 2 done --- index.html | 15 +++++++++++- index.js | 25 ++++++++++++++++++- styles.css | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..5400fdd 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,20 @@ - +
+ +
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..48da3d3 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,27 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +const modalWindowButton = document.querySelector('.modal-window-button'); +const modal = document.getElementById('Modal'); +const closeModalBtn = document.querySelector('.close-modal-btn'); +const closeIcon = document.querySelector('.modal-close'); + +modalWindowButton.addEventListener('click', () => { + modal.style.display = 'flex'; +}); + +closeModalBtn.addEventListener('click', () => { + modal.style.display = 'none'; +}); + +closeIcon.addEventListener('click', () => { + modal.style.display = 'none'; +}); + +window.addEventListener('click', (event) => { + if (event.target === modal) { + modal.style.display = 'none'; + } +}); + diff --git a/styles.css b/styles.css index e69de29..2ae6acf 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,71 @@ +.modal { + position: fixed; + inset: 0; + display: none; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.45); + z-index: 1000; +} + +.modal.active { + display: flex; +} + +.modal-content { + position: relative; + width: 320px; + max-width: 90%; + height: auto; + background: #fff; + border: 1px solid #bfbfbf; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); + padding: 14px 16px 16px; + box-sizing: border-box; +} + +.modal-content h2 { + margin: 0 0 10px; + font-size: 28px; + font-weight: 700; + color: #222; +} + +.modal-content p { + margin: 0 0 12px; + font-size: 14px; + line-height: 1.4; + color: #333; +} + +.modal-window-button, +.close-modal-btn { + padding: 4px 10px; + font-size: 13px; + color: #fff; + background: #7fbf6a; + border: 1px solid #6aa657; + cursor: pointer; +} + +.close-modal-btn:hover { + background: #6fad59; +} + +.modal-close { + position: absolute; + top: 6px; + right: 8px; + background: transparent; + border: none; + font-size: 22px; + line-height: 1; + color: #666; + cursor: pointer; + padding: 0; +} + +.modal-close:hover { + color: #000; +} + From c31087dcc01d2f62b1fe5641c1e41e5bb3a2b0d5 Mon Sep 17 00:00:00 2001 From: Mefody_Vaulin <181823089+mefodyvaulin@users.noreply.github.com> Date: Tue, 7 Apr 2026 18:13:41 +0500 Subject: [PATCH 2/5] task1 completed --- index.html | 9 ++++++++- styles.css | 22 ++++++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..efa9c29 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,14 @@ - +
+
+ +
+ +
+ + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..16d598a 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,22 @@ +.task1{ + display: flex; + flex-direction: row-reverse; +} + +.square{ + position: absolute; + border: solid red; + width: 100px; + height: 100px; +} + +.japan{ + display: inline-block; + border: 3px solid black; + transform: translate(-70px, -42px) scale(0.3); + +} + +.bunny{ + transform: translate(-947px, -780px) scale(0.05); +} \ No newline at end of file From 6614a953bc4100e5d9ef476c3abfaa36b8c4e4c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B0=D1=81=D0=B8=D0=BB=D1=8C=D0=B5=D0=B2=5F=D0=AE?= =?UTF-8?q?=D1=80=D0=B8=D0=B9?= Date: Tue, 7 Apr 2026 18:42:06 +0500 Subject: [PATCH 3/5] 3 done --- index.html | 6 ++++++ styles.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/index.html b/index.html index 8a9f4ba..b85d58b 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,12 @@

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 802e3f5..f0f588b 100644 --- a/styles.css +++ b/styles.css @@ -91,3 +91,45 @@ .bunny{ transform: translate(-947px, -780px) scale(0.05); } + +.progress-bar { + position: relative; + width: 100%; + height: 32px; + background: #bfbfbf; + border: 1px solid #999; + overflow: hidden; + margin: 16px 0; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 45%; + background: #d62828; + z-index: 1; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 14px; + font-weight: 600; + white-space: nowrap; + pointer-events: none; + z-index: 2; +} + +.progress-text-back { + color: #000; +} + +.progress-text-front { + color: #fff; + z-index: 3; + clip-path: inset(0 55% 0 0); +} \ No newline at end of file From 89952559015c8180c0079e8df8a70073a88a85ca Mon Sep 17 00:00:00 2001 From: Mefody_Vaulin <181823089+mefodyvaulin@users.noreply.github.com> Date: Tue, 7 Apr 2026 19:03:53 +0500 Subject: [PATCH 4/5] task4 completed --- index.html | 16 +++++++++------- index.js | 47 +++++++++++++++++++++++++++++++++++------------ styles.css | 6 ------ 3 files changed, 44 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index b85d58b..255bbd2 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,8 @@ -
-
- -
- -
+ +
@@ -22,7 +18,6 @@

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... @@ -31,7 +26,14 @@

That's all, folks

+ +
+
+ +
+
+ \ No newline at end of file diff --git a/index.js b/index.js index 48da3d3..c274774 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,3 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ const modalWindowButton = document.querySelector('.modal-window-button'); const modal = document.getElementById('Modal'); const closeModalBtn = document.querySelector('.close-modal-btn'); @@ -12,19 +5,49 @@ const closeIcon = document.querySelector('.modal-close'); modalWindowButton.addEventListener('click', () => { modal.style.display = 'flex'; + startProgressBar() }); closeModalBtn.addEventListener('click', () => { modal.style.display = 'none'; + dropProgressBar() }); closeIcon.addEventListener('click', () => { modal.style.display = 'none'; + dropProgressBar() }); -window.addEventListener('click', (event) => { - if (event.target === modal) { - modal.style.display = 'none'; - } -}); +let interval =0 +function startProgressBar() { + + const fill = document.querySelector(".progress-fill"); + const text1 = document.querySelector(".progress-text-back"); + const text2 = document.querySelector(".progress-text-front"); + + let width = 1; + + interval = setInterval(() => { + if (width >= 100) { + clearInterval(interval); + fill.style.backgroundColor = 'green'; + text1.textContent = `Loaded`; + text2.textContent = `Loaded`; + } else { + width++; + fill.style.width = `${width}%`; + } + }, 30); + +} +function dropProgressBar(){ + clearInterval(interval); + const fill = document.querySelector(".progress-fill"); + const text1 = document.querySelector(".progress-text-back"); + const text2 = document.querySelector(".progress-text-front"); + fill.style.width = `0%` + fill.style.backgroundColor = `#d62828`; + text1.textContent = `Loading...`; + text2.textContent = `Loading...`; +} diff --git a/styles.css b/styles.css index f0f588b..f38535d 100644 --- a/styles.css +++ b/styles.css @@ -69,11 +69,6 @@ color: #000; } -.task1{ - display: flex; - flex-direction: row-reverse; -} - .square{ position: absolute; border: solid red; @@ -85,7 +80,6 @@ display: inline-block; border: 3px solid black; transform: translate(-70px, -42px) scale(0.3); - } .bunny{ From 7170463e74f44351beec827b804b1082ebcd8dbe Mon Sep 17 00:00:00 2001 From: Mefody_Vaulin <181823089+mefodyvaulin@users.noreply.github.com> Date: Tue, 7 Apr 2026 19:36:02 +0500 Subject: [PATCH 5/5] task1 re --- index.html | 22 ++++++++++++++++++---- index.js | 2 +- styles.css | 47 ++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 61 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 255bbd2..34b3ab1 100644 --- a/index.html +++ b/index.html @@ -27,11 +27,25 @@

That's all, folks

+

-
- -
- + +
+
+
+

+ +
+
+
+
+
+
+
+ + + +
diff --git a/index.js b/index.js index c274774..879b484 100644 --- a/index.js +++ b/index.js @@ -3,7 +3,7 @@ const modal = document.getElementById('Modal'); const closeModalBtn = document.querySelector('.close-modal-btn'); const closeIcon = document.querySelector('.modal-close'); -modalWindowButton.addEventListener('click', () => { +modalWindowButton.addEventListener('click', () => { modal.style.display = 'flex'; startProgressBar() }); diff --git a/styles.css b/styles.css index f38535d..6ade042 100644 --- a/styles.css +++ b/styles.css @@ -76,16 +76,53 @@ height: 100px; } +.japan-back { + border: 1px solid black; + display: flex; + height: 70px; + width: 100px; + justify-content: center; + align-items: center; +} .japan{ - display: inline-block; - border: 3px solid black; - transform: translate(-70px, -42px) scale(0.3); + background-color: #d62828; + border-radius: 50%; + height: 40px; + width: 40px; } -.bunny{ - transform: translate(-947px, -780px) scale(0.05); + + .bunny-back { + display: flex; + flex-direction: column; + align-items: center; + width: 60px; + + padding: 10px; + } + +.ears { + display: flex; + gap: 20px; + margin-bottom: -10px; +} + +.bunny-u1, .bunny-u2 { + background-color: black; + height: 25px; + width: 25px; + border-radius: 50%; } +.bunny-head { + background-color: black; + height: 40px; + width: 40px; + border-radius: 50%; +} + + + .progress-bar { position: relative; width: 100%;