From dabc66d3add45514245f165685c64b79048e79ca Mon Sep 17 00:00:00 2001 From: Ovchinnikov Danila Date: Tue, 8 Apr 2025 15:56:14 +0200 Subject: [PATCH 1/5] 1 --- index.html | 30 ++++++++++++++++++++++--- index.js | 17 +++++++++----- styles.css | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 846cf93..de0ed92 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,31 @@ - - + +
+ + +
+ + + + + + + + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..2675e40 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,12 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openModal = document.getElementById('openModal'); +const modalOverlay = document.getElementById('modalOverlay'); +const closeModal = document.getElementById('closeModal'); +const progressFill = document.getElementById('progressFill'); +const progressText = document.getElementById('progressText'); + +openModal.addEventListener('click', () => { + modalOverlay.style.display = 'flex'; + startProgressBar(); +}); + - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..493ab05 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,66 @@ +/* Общие стили */ +body { + font-family: Arial, sans-serif; + margin: 20px; +} + +/* Логотипы */ +.logo-container { + display: flex; + gap: 20px; +} + +.logo { + width: 100px; + height: 100px; + object-fit: contain; + overflow: hidden; + border: 1px solid #ccc; +} + +/* Модальное окно */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.6); + display: none; + justify-content: center; + align-items: center; +} + +.modal { + background: white; + width: 640px; + padding: 20px; + position: relative; + border-radius: 10px; +} + +.close { + position: absolute; + top: 10px; + right: 15px; + font-size: 24px; + border: none; + background: none; + cursor: pointer; +} + +/* Прогресс бар */ +.progress-wrapper { + margin: 20px 0; +} + +.progress-bar { + position: relative; + width: 100%; + height: 30px; + background: #ccc; + border-radius: 5px; + overflow: hidden; +} + + From a661fa46a542852dd1ff5c9e119f730492469e66 Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 8 Apr 2025 16:01:51 +0500 Subject: [PATCH 2/5] 5 --- index.html | 13 +++++++++++++ index.js | 19 +++++++++++++++++++ styles.css | 45 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 77 insertions(+) diff --git a/index.html b/index.html index de0ed92..062788e 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,20 @@ + +
+ + +
privet.
+ + +
porebrik.
+ + + +
IDE project settings
+
diff --git a/index.js b/index.js index 2675e40..0e2803c 100644 --- a/index.js +++ b/index.js @@ -10,3 +10,22 @@ openModal.addEventListener('click', () => { }); +closeModal.addEventListener('click', () => { + modalOverlay.style.display = 'none'; + progressFill.style.width = '0%'; + progressText.textContent = 'Loading...'; +}); + +function startProgressBar() { + let width = 0; + const interval = setInterval(() => { + width++; + progressFill.style.width = `${width}%`; + progressText.textContent = 'Loading...'; + + if (width >= 100) { + clearInterval(interval); + progressText.textContent = 'Complete!'; + } + }, 30); +} diff --git a/styles.css b/styles.css index 493ab05..953aa8b 100644 --- a/styles.css +++ b/styles.css @@ -63,4 +63,49 @@ body { overflow: hidden; } +.progress-fill { + background: red; + height: 100%; + width: 0%; + transition: width 0.1s linear; +} + +.progress-text { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: #eeeeee; +} + +/* Аккордеон */ +.accordion input { + display: none; +} +.accordion label { + display: block; + background: #eee; + padding: 10px; + margin-top: 5px; + cursor: pointer; + font-weight: bold; +} + +.accordion .content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + background: #f9f9f9; + padding: 0 10px; +} + +.accordion input:checked + label + .content { + max-height: 100px; + padding: 10px; +} From 9ea21089ca603319cc0406bd4913f22186884b4b Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 8 Apr 2025 16:16:58 +0500 Subject: [PATCH 3/5] 5 pochinili --- index.html | 2 +- index.js | 3 +++ styles.css | 14 +++++++++++++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 062788e..6b425bd 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
- +
diff --git a/index.js b/index.js index 0e2803c..ba74169 100644 --- a/index.js +++ b/index.js @@ -21,6 +21,9 @@ function startProgressBar() { const interval = setInterval(() => { width++; progressFill.style.width = `${width}%`; + + progressText.style.setProperty('--progress', `${width}%`); + progressText.textContent = 'Loading...'; if (width >= 100) { diff --git a/styles.css b/styles.css index 953aa8b..48d98ea 100644 --- a/styles.css +++ b/styles.css @@ -80,7 +80,19 @@ body { align-items: center; justify-content: center; font-weight: bold; - color: #eeeeee; + font-size: 16px; + text-align: center; + + /* Используем градиент, где CSS-переменная --progress определяет границу */ + background: linear-gradient( + 90deg, + white 0%, + white var(--progress, 0%), + black var(--progress, 0%), + black 100% + ); + -webkit-background-clip: text; + color: transparent; } /* Аккордеон */ From 3112e0b271272cab3cec16f99c8735481856791e Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 8 Apr 2025 16:19:30 +0500 Subject: [PATCH 4/5] =?UTF-8?q?5=20=D0=B5=D1=89=D1=91=20pochinili?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 6b425bd..7236d43 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,7 @@ +
From 2bc126d06805b27b762b9eac216e85c1cb1fb005 Mon Sep 17 00:00:00 2001 From: Iesh <108469591+Iesht@users.noreply.github.com> Date: Tue, 8 Apr 2025 16:37:41 +0500 Subject: [PATCH 5/5] final --- styles.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/styles.css b/styles.css index 48d98ea..268632f 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,8 @@ -/* Общие стили */ body { font-family: Arial, sans-serif; margin: 20px; } -/* Логотипы */ .logo-container { display: flex; gap: 20px; @@ -66,8 +64,7 @@ body { .progress-fill { background: red; height: 100%; - width: 0%; - transition: width 0.1s linear; + width: 0; } .progress-text { @@ -83,7 +80,6 @@ body { font-size: 16px; text-align: center; - /* Используем градиент, где CSS-переменная --progress определяет границу */ background: linear-gradient( 90deg, white 0%,