From dbe56217ddd92e1ea70e072b92ebee95c4822b77 Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 7 Apr 2026 18:26:17 +0500 Subject: [PATCH 1/5] s --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 6704566..01896fd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.idea + # Logs logs *.log From 207532840b4f6af56c5b52e689077301b4fafd39 Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 7 Apr 2026 19:07:49 +0500 Subject: [PATCH 2/5] 1 task --- index.html | 9 +++++++++ styles.css | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) diff --git a/index.html b/index.html index 846cf93..cbcb42f 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,15 @@ +
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..22c4ea7 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,43 @@ +.wrapper{ + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + margin: 5px; +} + +.circle { + width: 40px; + height: 40px; + border-radius: 50%; + background: black; + position: absolute; +} + + +#circle1{ + left: 0; + top: 0; + z-index: -1; +} + +#circle2{ + right: 0; + top: 0; + z-index: -2; +} + +#circle3{ + width: 70px; + height: 70px; + top: 20%; + left: 15%; +} + +#circle4{ + background: red; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} From 929b37f31804a9ae7d6d2431ad2ac22442690aeb Mon Sep 17 00:00:00 2001 From: Lychee <2006tka@gmail.com> Date: Tue, 7 Apr 2026 19:18:00 +0500 Subject: [PATCH 3/5] done 2 --- index.html | 12 ++++++++++++ index.js | 20 +++++++++++++++++++- styles.css | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index cbcb42f..c720bc4 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,18 @@
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..d5671e2 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,22 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const lightbox = document.getElementById('lightbox'); +const openBtn = document.getElementById('openBtn'); +const closeBtn = document.getElementById('closeBtn'); + +openBtn.addEventListener('click', () => { + lightbox.classList.add('active'); +}); + +closeBtn.addEventListener('click', () => { + lightbox.classList.remove('active'); +}); + +lightbox.addEventListener('click', (e) => { + if (e.target === lightbox) { + lightbox.classList.remove('active'); + } +}); diff --git a/styles.css b/styles.css index 22c4ea7..c9db13f 100644 --- a/styles.css +++ b/styles.css @@ -41,3 +41,36 @@ top: 50%; transform: translate(-50%, -50%); } + +.lightbox { + display: none; /* Скрыто по умолчанию */ + position: fixed; + top: 0; left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.lightbox.active { + display: flex; +} + +.lightbox-content { + width: 640px; + height: auto; + background: white; + padding: 20px; + position: relative; + border-radius: 5px; +} + + +.close-btn { + position: absolute; + top: 10px; right: 15px; + cursor: pointer; + font-size: 24px; +} From 6c68e5052611117b6ec89940150729eeb94faf36 Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 7 Apr 2026 20:03:37 +0500 Subject: [PATCH 4/5] 3 and 4 tasks --- index.html | 4 ++++ index.js | 14 ++++++++++++++ styles.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+) diff --git a/index.html b/index.html index c720bc4..70bd739 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,10 @@

КОНТЕНТИЩЕ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab animi consequatur dicta eaque eos eum expedita explicabo illum ipsa ipsam ipsum magni necessitatibus neque, obcaecati, quas sapiente veniam vero!

+
+ Loading... +
+
diff --git a/index.js b/index.js index d5671e2..8ca152c 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ element.style.width = '300px'; */ + const lightbox = document.getElementById('lightbox'); const openBtn = document.getElementById('openBtn'); const closeBtn = document.getElementById('closeBtn'); @@ -23,3 +24,16 @@ lightbox.addEventListener('click', (e) => { lightbox.classList.remove('active'); } }); + +openBtn.addEventListener('click', () => { + const element = document.getElementById('progressBar'); + const parentElement = document.getElementById('progressContainer'); + + let width = 0; + const maxWidth = parentElement.offsetWidth; + + setInterval(() => { + width += maxWidth / 3; + element.style.width = width + "px"; + }, 1000); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index c9db13f..49ed536 100644 --- a/styles.css +++ b/styles.css @@ -74,3 +74,32 @@ cursor: pointer; font-size: 24px; } + +.progress-container{ + position: relative; + overflow: hidden; + text-align: center; + width : 100%; + height : 20px; + border: 1px solid black; + background: gray; +} + +.progress-bar{ + position: absolute; + top : 0; + left: 0; + text-align: center; + width : 0; + height : 100%; + background: red; +} + +.text{ + position: absolute; + width: 100%; + line-height: 20px; + text-align: center; + color: white; + mix-blend-mode: difference; +} From 4b2e764668df4e5677f837f915fa92385583a057 Mon Sep 17 00:00:00 2001 From: Elizaveta Vinogradova Date: Tue, 7 Apr 2026 20:40:14 +0500 Subject: [PATCH 5/5] sadfnjsda --- index.html | 4 +++- index.js | 25 +++++++++++++++---------- styles.css | 14 ++++++++------ 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 70bd739..a6ba8d9 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,9 @@ explicabo illum ipsa ipsam ipsum magni necessitatibus neque, obcaecati, quas sapiente veniam vero!

Loading... -
+
+ Loading... +
diff --git a/index.js b/index.js index 8ca152c..81eaca1 100644 --- a/index.js +++ b/index.js @@ -26,14 +26,19 @@ lightbox.addEventListener('click', (e) => { }); openBtn.addEventListener('click', () => { - const element = document.getElementById('progressBar'); - const parentElement = document.getElementById('progressContainer'); - - let width = 0; - const maxWidth = parentElement.offsetWidth; - - setInterval(() => { - width += maxWidth / 3; - element.style.width = width + "px"; - }, 1000); + const progressBar = document.querySelector('#progressBar'); + + let progress = 0; + const duration = 3000; + const interval = 20; + const step = 100 / (duration / interval); + + const timer = setInterval(() => { + progress += step; + if (progress >= 100) { + progress = 100; + clearInterval(timer); + } + progressBar.style.width = progress + "%"; + }, interval); }); \ No newline at end of file diff --git a/styles.css b/styles.css index 49ed536..b4a3516 100644 --- a/styles.css +++ b/styles.css @@ -88,18 +88,20 @@ .progress-bar{ position: absolute; top : 0; - left: 0; text-align: center; width : 0; height : 100%; background: red; + overflow: hidden; } .text{ position: absolute; - width: 100%; - line-height: 20px; - text-align: center; - color: white; - mix-blend-mode: difference; + color: black; } + +.text-not-normal{ + color: white; + position: absolute; + z-index: 2; +} \ No newline at end of file