From 27a0b10cc3d6fd3dc92232027797cd8af7daa10e Mon Sep 17 00:00:00 2001 From: Igor Ipatov Date: Tue, 7 Apr 2026 18:05:11 +0500 Subject: [PATCH 1/6] done3 --- index.html | 14 +++++++++-- index.js | 20 +++++++++++++++- styles.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 100 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 846cf93..48bd554 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,17 @@ - - + + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..a8c302a 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 +*/ +function buttonFunction(event) { + let target = event.target; + + if (target.classList.contains('lightbox__close')) { + let lightbox = document.querySelector('.lightbox'); + lightbox.style.display = 'none'; + } + else if (target.classList.contains('lightbox__open')) { + let lightbox = document.querySelector('.lightbox'); + lightbox.style.display = 'block'; + } +} + + +let openButton = document.querySelector('.lightbox__close'); +openButton.addEventListener('click', buttonFunction); +let closeButton = document.querySelector('.lightbox__open'); +closeButton.addEventListener('click', buttonFunction); diff --git a/styles.css b/styles.css index e69de29..c778b24 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,69 @@ +.lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: none; +} + +.lightbox-content { + background-color: lightblue; + width: 640px; + min-width: 200px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + border-radius: 8px; + padding: 20px 0 20px 0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +.lightbox h1 { + margin-left: 20px; + margin-right: 50px; +} + +.lightbox p { + margin-left: 20px; + margin-right: 20px; +} + +.lightbox__close { + position: absolute; + top: 15px; + right: 15px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + padding: 0; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; +} + +.lightbox__close:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.lightbox__open { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; +} + +.lightbox__open:hover { + background-color: #0056b3; +} \ No newline at end of file From 507aad15454cbda1367a9e3d9a7e7fc43b3b03af Mon Sep 17 00:00:00 2001 From: Kin Date: Tue, 7 Apr 2026 18:09:28 +0500 Subject: [PATCH 2/6] 1 + 3 --- index.html | 7 ++++++- styles.css | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..6f4142a 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,12 @@ - + logo1 + logo2 +
+
Loading...
+
Loading...
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..0e145de 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,43 @@ +img { + width: 100px; + height: 100px; +} + +.progress { + display: flex; + background-color: lightgray; + width: 400px; + height: 200px; + justify-content: center; + align-items: center; + position: relative; +} + +.prog, .prog-load { + position: absolute; + width: 100%; + height: 40px; + font-size: 25px; + line-height: 40px; + text-align: center; +} + +.prog { + background-color: grey; + color: black; + z-index: 1; +} + +.prog-load { + background-color: red; + color: white; + z-index: 2; + width: 40%; + overflow: hidden; + left: 0 +} + +.prog-load-text { + width: 400px; + height: 100%; +} \ No newline at end of file From aa7818f58ccbf84b2e8efc05ae08a9c196819958 Mon Sep 17 00:00:00 2001 From: Kin Date: Tue, 7 Apr 2026 18:13:41 +0500 Subject: [PATCH 3/6] =?UTF-8?q?=D0=B4=D0=BE=203?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/styles.css b/styles.css index 672e1cb..540cf9f 100644 --- a/styles.css +++ b/styles.css @@ -27,6 +27,21 @@ img { color: black; z-index: 1; } + +.prog-load { + background-color: red; + color: white; + z-index: 2; + width: 40%; + overflow: hidden; + left: 0 +} + +.prog-load-text { + width: 400px; + height: 100%; +} + .lightbox { position: fixed; top: 0; @@ -83,19 +98,6 @@ img { background-color: rgba(0, 0, 0, 0.1); } -.prog-load { - background-color: red; - color: white; - z-index: 2; - width: 40%; - overflow: hidden; - left: 0 -} - -.prog-load-text { - width: 400px; - height: 100%; -} .lightbox__open { padding: 10px 20px; font-size: 16px; From 09b96eabddd427dffc6a4b2df778bd411775f35e Mon Sep 17 00:00:00 2001 From: Kin Date: Tue, 7 Apr 2026 18:14:59 +0500 Subject: [PATCH 4/6] =?UTF-8?q?=D0=B4=D0=BE=203=20222?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 7f23f4a..b4b1e45 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ - logo1 logo2
@@ -23,5 +22,6 @@

That's all, folks

Добавьте ещё текста, чтобы проверить, что высота действительно подстраивается.

+ \ No newline at end of file From a9053bd983b7327957b276e74cfee8ca0650bb3e Mon Sep 17 00:00:00 2001 From: Kin Date: Tue, 7 Apr 2026 18:41:46 +0500 Subject: [PATCH 5/6] =?UTF-8?q?=D0=B4=D0=BE=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 8 ++++---- index.js | 20 ++++++++++++++++++++ styles.css | 4 ++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index b4b1e45..4ddb168 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,6 @@ logo1 logo2 -
-
Loading...
-
Loading...
-
diff --git a/index.js b/index.js index a8c302a..9b6b17b 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,21 @@ element.style.color = 'red'; element.style.width = '300px'; */ + +const load = document.querySelector('.prog-load'); + +function startAnimation() { + let width = 0; + const timer = setInterval(() => { + width++; // Прибавляем 1% + load.style.width = width + '%'; + + if (width >= 100) { + clearInterval(timer); + } + }, 30); +} + function buttonFunction(event) { let target = event.target; @@ -15,6 +30,8 @@ function buttonFunction(event) { else if (target.classList.contains('lightbox__open')) { let lightbox = document.querySelector('.lightbox'); lightbox.style.display = 'block'; + startAnimation(); + load.style.width = "0%" } } @@ -23,3 +40,6 @@ let openButton = document.querySelector('.lightbox__close'); openButton.addEventListener('click', buttonFunction); let closeButton = document.querySelector('.lightbox__open'); closeButton.addEventListener('click', buttonFunction); + + + diff --git a/styles.css b/styles.css index 540cf9f..bd423aa 100644 --- a/styles.css +++ b/styles.css @@ -65,6 +65,10 @@ img { border-radius: 8px; padding: 20px 0 20px 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + + display: flex; + flex-direction: column; + align-items: center; } .lightbox h1 { From a0fa51d306c7b1d6b89c0c08d5f310d037e339a5 Mon Sep 17 00:00:00 2001 From: Kin Date: Tue, 7 Apr 2026 19:01:55 +0500 Subject: [PATCH 6/6] =?UTF-8?q?=D0=B4=D0=BE=205?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 32 ++++++++++++++++++++++++++++++ styles.css | 57 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 88 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 4ddb168..1280a70 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,40 @@

That's all, folks

Loading...
Loading...
+ +
+ +
+ + +
+

amoma

+
    +
  • List item one
    • +
  • List item two
    • +
+
+
+ +
+ + +
+

dfdfsdd dfsdfds

+
+
+ +
+ + +
+

fdsfdsfkn jfkldnskf kldsflk

+
+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css index bd423aa..5931f6b 100644 --- a/styles.css +++ b/styles.css @@ -114,4 +114,59 @@ img { .lightbox__open:hover { background-color: #0056b3; -} \ No newline at end of file +} + + + + + +.accordion { + border: 1px solid #ccc; + border-radius: 4px; +} + +.accordion-item { + border-bottom: 1px solid #ccc; +} + + +.accordion-input { + display: none; +} + +.accordion-label { + display: block; + padding: 10px 15px; + background: lightgray; + cursor: pointer; + font-weight: bold; + color: #333; + position: relative; + border-bottom: 1px solid #ccc; +} + +.accordion-label::before { + content: '▶'; + display: inline-block; + margin-right: 10px; + font-size: 10px; + transition: transform 0.2s; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + background: white; + padding: 0 15px; +} + +.accordion-input:checked + .accordion-label::before { + transform: rotate(90deg); +} + +.accordion-input:checked ~ .accordion-content { + max-height: 500px; + padding: 15px; + border-top: 1px solid #eee; +}