From 70a174c098aead0791e8f350ace76bf7e5af6282 Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 8 Apr 2025 17:57:44 +0500 Subject: [PATCH 1/6] add 1 --- index.html | 3 ++- styles.css | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..85f30e9 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,8 @@ - + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..1bea40a 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,6 @@ +.logo { + overflow: hidden; + width: 100px; + height: 100px; + object-fit: contain; +} \ No newline at end of file From 9208ecb70f8cee4b00e0acbbe30f8057adee8c9c Mon Sep 17 00:00:00 2001 From: Bu16a Date: Tue, 8 Apr 2025 18:11:43 +0500 Subject: [PATCH 2/6] =?UTF-8?q?=D0=92=D1=82=D0=BE=D1=80=D0=BE=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 17 +++++++++++++++++ index.js | 19 ++++++++++++++++++- styles.css | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 85f30e9..aca8e38 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,23 @@ +
+
+
×
+ +

Первый

+

Митсубиши йоу

+ +

Это второй: Короче как то так

+ +
+ +

Гойда

+

Нажми чтобы выйти

+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..5e7c193 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,21 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +document.addEventListener('DOMContentLoaded', function() { + document.querySelector('.overlay').style.display = 'flex'; + + function closeModal() { + document.querySelector('.overlay').style.display = 'none'; + } + + document.querySelectorAll('.close-btn').forEach(btn => { + btn.addEventListener('click', closeModal); + }); + + document.querySelector('.overlay').addEventListener('click', function(e) { + if (e.target === this) { + closeModal(); + } + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 1bea40a..6f89b49 100644 --- a/styles.css +++ b/styles.css @@ -3,4 +3,38 @@ width: 100px; height: 100px; object-fit: contain; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + width: 640px; + background: white; + padding: 20px; + position: relative; + border-radius: 5px; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + border: none; + background: none; + font-size: 20px; +} + +.close-btn:hover { + color: #666; } \ No newline at end of file From 7996feda56fcc5260040c3a4640bdae278c50056 Mon Sep 17 00:00:00 2001 From: Bu16a Date: Tue, 8 Apr 2025 18:19:07 +0500 Subject: [PATCH 3/6] 2_dop --- index.html | 3 ++- index.js | 17 +++++++++-------- styles.css | 16 ++++++++++++++++ 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index aca8e38..3a0ea20 100644 --- a/index.html +++ b/index.html @@ -8,9 +8,10 @@ +
-
×
+

Первый

Митсубиши йоу

diff --git a/index.js b/index.js index 5e7c193..9857b67 100644 --- a/index.js +++ b/index.js @@ -6,19 +6,20 @@ element.style.width = '300px'; */ document.addEventListener('DOMContentLoaded', function() { - document.querySelector('.overlay').style.display = 'flex'; + const overlay = document.querySelector('.overlay'); + const openBtn = document.querySelector('.open-modal-btn'); + + function openModal() { + overlay.style.display = 'flex'; + } function closeModal() { - document.querySelector('.overlay').style.display = 'none'; + overlay.style.display = 'none'; } + openBtn.addEventListener('click', openModal); + document.querySelectorAll('.close-btn').forEach(btn => { btn.addEventListener('click', closeModal); }); - - document.querySelector('.overlay').addEventListener('click', function(e) { - if (e.target === this) { - closeModal(); - } - }); }); \ No newline at end of file diff --git a/styles.css b/styles.css index 6f89b49..0c0a893 100644 --- a/styles.css +++ b/styles.css @@ -17,6 +17,22 @@ align-items: center; } +.open-modal-btn { + padding: 10px 20px; + background: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + margin: 20px; +} + +.open-modal-btn:hover { + background: #45a049; +} + + .modal { width: 640px; background: white; From 7821e906e27059cf1d2d92500477d1f73fbf758f Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 8 Apr 2025 18:28:22 +0500 Subject: [PATCH 4/6] add 3 --- index.html | 14 ++++++++------ index.js | 12 +++++------- styles.css | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 46 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 3a0ea20..24b1aef 100644 --- a/index.html +++ b/index.html @@ -12,20 +12,22 @@
- +

Первый

Митсубиши йоу

- +

Это второй: Короче как то так

- +
- +

Гойда

-

Нажми чтобы выйти

+
+
+
Loading...
+
- \ No newline at end of file diff --git a/index.js b/index.js index 9857b67..73e4f1b 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,8 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ +const progressContainer = document.querySelector('.progress-container'); +const updateProgress = (progress) => { + progressContainer.style.setProperty('--progress', progress); + document.querySelector('.progress-bar').style.width = progress + '%'; +}; document.addEventListener('DOMContentLoaded', function() { const overlay = document.querySelector('.overlay'); const openBtn = document.querySelector('.open-modal-btn'); diff --git a/styles.css b/styles.css index 0c0a893..3fc2cd1 100644 --- a/styles.css +++ b/styles.css @@ -5,6 +5,39 @@ object-fit: contain; } +.progress-container { + position: relative; + width: 400px; + height: 40px; + background-color: #ccc; + font-family: sans-serif; +} + +.progress-bar { + position: absolute; + height: 100%; + width: calc(var(--progress) * 1%); + background-color: red; +} + +.progress-text { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; + font-weight: bold; + background: linear-gradient( + 90deg, + white calc(var(--progress) * 1%), + black calc(var(--progress) * 1%) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + .overlay { position: fixed; top: 0; From c6b827603027bb6e6d582866bf7ca68b282e1192 Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 8 Apr 2025 18:42:49 +0500 Subject: [PATCH 5/6] add 5 --- index.js | 28 +++++++++++++++++++++++----- styles.css | 2 +- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 73e4f1b..17f9f31 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,3 @@ -const progressContainer = document.querySelector('.progress-container'); -const updateProgress = (progress) => { - progressContainer.style.setProperty('--progress', progress); - document.querySelector('.progress-bar').style.width = progress + '%'; -}; document.addEventListener('DOMContentLoaded', function() { const overlay = document.querySelector('.overlay'); const openBtn = document.querySelector('.open-modal-btn'); @@ -20,4 +15,27 @@ document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.close-btn').forEach(btn => { btn.addEventListener('click', closeModal); }); +}); + +const openBtn = document.querySelector('.open-modal-btn'); + +openBtn.addEventListener("click", function(){ + const progressContainer = document.querySelector('.progress-container'); + const progressBar = document.querySelector('.progress-bar'); + let progress = 0; + + const totalTime = 3000; + const intervalTime = 10; + const steps = totalTime / intervalTime; + const stepIncrease = 100 / steps; + + const intervalId = setInterval(() => { + progress += stepIncrease; + if (progress >= 100) { + progress = 100; + clearInterval(intervalId); + } + progressBar.style.width = progress + '%'; + progressContainer.style.setProperty('--progress', progress); + }, intervalTime); }); \ No newline at end of file diff --git a/styles.css b/styles.css index 3fc2cd1..f7991fa 100644 --- a/styles.css +++ b/styles.css @@ -45,7 +45,7 @@ width: 100%; height: 100%; background: rgba(0,0,0,0.5); - display: flex; + display: none; justify-content: center; align-items: center; } From 427f3191a5a89c8ad32d2ff7ec73c765144207c9 Mon Sep 17 00:00:00 2001 From: dabbl Date: Tue, 8 Apr 2025 19:05:25 +0500 Subject: [PATCH 6/6] add 5 --- index.html | 29 ++++++++++++++++++----------- styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 24b1aef..2792707 100644 --- a/index.html +++ b/index.html @@ -11,20 +11,27 @@
- - -

Первый

-

Митсубиши йоу

- -

Это второй: Короче как то так

+ + +
+

Описание вкладки

+
-
+ + +
+
+
+
Loading...
+
+
-

Гойда

-
-
-
Loading...
+ + +
+

Гойда

+
diff --git a/styles.css b/styles.css index f7991fa..5c1717c 100644 --- a/styles.css +++ b/styles.css @@ -81,9 +81,53 @@ cursor: pointer; border: none; background: none; + p: 10px; font-size: 20px; } .close-btn:hover { color: #666; +} + +.modal .modal-body { + width: calc(100% - 40px); + margin: 0 auto; + height: 0; + color: rgba(0, 0, 0, 0); + background-color: #ffff; + line-height: 18px; + padding: 0 30px; + box-sizing: border-box; + transition: color 0.5s, padding 0.5s; + overflow: hidden; +} + +.modal label { + cursor: pointer; + background-color: #666666; + display: block; + padding: 15px 20px; + width: 100%; + font-weight: 300; + box-sizing: border-box; + z-index: 100; + font-family: Verdana, sans-serif; + font-size: 18px; + margin: 0 0 5px; + transition: color .35s; +} +.modal input{ + display: none; +} + +.modal label:before { + content: '\276F'; + float: right; +} + +.modal input:checked + label + .modal-body { + height: auto; + margin-top: -5px; + color: #000; + padding: 20px 30px 10px; } \ No newline at end of file