From 0808e465ff88c6f2fd1e23a3d7d54ac38de95ad6 Mon Sep 17 00:00:00 2001 From: mld Date: Tue, 7 Apr 2026 19:03:59 +0500 Subject: [PATCH 1/4] 12 --- index.html | 7 ++++++- styles.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..980e5b4 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,12 @@ - + +
+ + +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..38451f1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,28 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +.logos { + display: flex; + gap: 20px; + padding: 20px; +} + +.logo { + width: 100px; + height: 100px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #ddd; +} + +.logo-1 { + background-image: url("designs/logo1.png"); +} + +.logo-2 { + background-image: url("designs/logo6.png"); +} \ No newline at end of file From 10f02095f2aea865dde9253401077f30f68ea08a Mon Sep 17 00:00:00 2001 From: Quatov Date: Tue, 7 Apr 2026 19:40:46 +0500 Subject: [PATCH 2/4] 2-3 tasks completed --- index.html | 19 +++++++++- styles.css | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 125 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 980e5b4..b73596f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,24 @@ - +
+

Modal window

+ +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index 38451f1..8599218 100644 --- a/styles.css +++ b/styles.css @@ -25,4 +25,110 @@ body { .logo-2 { background-image: url("designs/logo6.png"); -} \ No newline at end of file +} + +.modal_window { + margin-bottom: 30px; +} + +.open_button { + padding: 12px 20px; + font-size: 16px; + border: none; + background: #333; + color: white; + border-radius: 8px; + cursor: pointer; +} + +.open_button:hover { + background: #555; +} + +.hidden { + display: none; +} + +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 3; +} + +.modal { + width: 640px; + max-width: calc(100% - 40px); + background: white; + border-radius: 14px; + padding: 30px 25px 35px; + position: relative; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); +} + +.modal h3 { + margin-top: 0; + margin-bottom: 15px; +} + +.modal p { + margin-bottom: 25px; + line-height: 1.5; +} + +.close_button { + margin-top: 15px; + padding: 10px 18px; + background: #6abf69; + color: white; + border: none; + border-radius: 6px; + font-size: 14px; + cursor: pointer; +} + +.close_button:hover { + background: orange; +} + +.progress { + position: relative; + width: 100%; + height: 42px; + background: white; + border-radius: 10px; + overflow: hidden; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background: red; + z-index: 1; +} + +.progress-text { + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + z-index: 2; + pointer-events: none; +} + +.progress-text-dark { + color: black; +} + +.progress-text-light { + color: white; + width: 0; +} From 2d174b04ee42d97f60adf4e95bbceb823deeedba Mon Sep 17 00:00:00 2001 From: mld Date: Tue, 7 Apr 2026 19:57:35 +0500 Subject: [PATCH 3/4] 45 --- index.html | 73 ++++++++++++++++++++++++++ index.js | 32 +++++++++--- styles.css | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 248 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 980e5b4..1f5f4e4 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,84 @@ +
+ +
+

Modal window

+ +
+ + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..145a084 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,27 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.addEventListener('DOMContentLoaded', () => { - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + const progressFill = document.querySelector('.progress-fill'); + + const duration = 3000; + let startTime = null; + + function animateProgress(timestamp) { + if (!startTime) startTime = timestamp; + + const elapsed = timestamp - startTime; + const progress = Math.min(elapsed / duration, 1); + + progressFill.style.width = (progress * 100) + '%'; + + + const redIntensity = Math.floor(progress * 255); + progressFill.style.backgroundColor = `rgb(${redIntensity}, 0, 0)`; + + if (progress < 1) { + requestAnimationFrame(animateProgress); + } + } + + requestAnimationFrame(animateProgress); + +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 38451f1..4219c3e 100644 --- a/styles.css +++ b/styles.css @@ -4,6 +4,8 @@ body { font-family: Arial, sans-serif; } + + .logos { display: flex; gap: 20px; @@ -25,4 +27,151 @@ body { .logo-2 { background-image: url("designs/logo6.png"); +} + + + +.modal_window { + margin: 20px; +} + +.open_button { + padding: 12px 20px; + font-size: 16px; + border: none; + background: #333; + color: white; + border-radius: 8px; + cursor: pointer; +} + +.open_button:hover { + background: #555; +} + + + +.hidden { + display: none; +} + +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 10; +} + +.modal { + width: 640px; + max-width: calc(100% - 40px); + background: white; + border-radius: 14px; + padding: 30px 25px; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); +} + +.modal h3 { + margin-top: 0; +} + +.modal p { + line-height: 1.5; + margin-bottom: 20px; +} + +.close_button { + margin-top: 10px; + padding: 10px 18px; + background: #6abf69; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +.close_button:hover { + background: orange; +} + + + +.progress { + position: relative; + width: 100%; + height: 42px; + background: #eee; + border-radius: 10px; + overflow: hidden; + margin-top: 20px; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + width: 0%; + height: 100%; + background: red; + transition: width 0.05s linear; +} + +.progress-text { + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + z-index: 2; + pointer-events: none; +} + +.progress-text-dark { + color: black; +} + +.progress-text-light { + color: white; + mix-blend-mode: difference; +} + + + +.accordion { + margin-top: 25px; +} + +.accordion-item { + border: 1px solid #ddd; + border-radius: 8px; + margin-bottom: 10px; + overflow: hidden; +} + +.accordion-item input { + display: none; +} + +.accordion-item label { + display: block; + padding: 12px; + background: #f3f3f3; + cursor: pointer; + font-weight: bold; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + padding: 0 12px; + transition: max-height 0.3s ease, padding 0.3s ease; +} + +.accordion-item input:checked ~ .accordion-content { + max-height: 200px; + padding: 12px; } \ No newline at end of file From 6ac92ab4182c618982f548bc7e1d2574c3535726 Mon Sep 17 00:00:00 2001 From: Quatov Date: Tue, 7 Apr 2026 20:35:34 +0500 Subject: [PATCH 4/4] fixed the codes --- index.html | 33 +++++++------- index.js | 59 +++++++++++++++++++++---- styles.css | 127 +++++++++++++++++++++++++++++++---------------------- 3 files changed, 142 insertions(+), 77 deletions(-) diff --git a/index.html b/index.html index e530d33..7294bbf 100644 --- a/index.html +++ b/index.html @@ -6,36 +6,37 @@ -
- - + +
+
+

Modal window

+ +
- -
- - -
-

- But I must explain to you how all this mistaken idea of denouncing. - Third block content. -

-
-
\ No newline at end of file diff --git a/index.js b/index.js index 145a084..3cc9c9e 100644 --- a/index.js +++ b/index.js @@ -1,27 +1,68 @@ document.addEventListener('DOMContentLoaded', () => { - + const openButton = document.querySelector('.open_button'); + const closeButton = document.querySelector('.close_button'); + const modalOverlay = document.querySelector('.modal-overlay'); const progressFill = document.querySelector('.progress-fill'); - + const progressTextLight = document.querySelector('.progress-text-light'); const duration = 3000; let startTime = null; + let animationId = null; + + function resetProgress() { + progressFill.style.width = '0'; + progressTextLight.style.width = '0'; + progressFill.style.backgroundColor = '#d62828'; + startTime = null; + } function animateProgress(timestamp) { - if (!startTime) startTime = timestamp; + if (!startTime) { + startTime = timestamp; + } const elapsed = timestamp - startTime; const progress = Math.min(elapsed / duration, 1); + const percent = progress * 100; + + progressFill.style.width = percent + '%'; + progressTextLight.style.width = percent + '%'; + + if (progress < 1) { + animationId = requestAnimationFrame(animateProgress); + } + } - progressFill.style.width = (progress * 100) + '%'; + function openModal() { + modalOverlay.classList.remove('hidden'); + resetProgress(); + + if (animationId) { + cancelAnimationFrame(animationId); + } + animationId = requestAnimationFrame(animateProgress); + } - const redIntensity = Math.floor(progress * 255); - progressFill.style.backgroundColor = `rgb(${redIntensity}, 0, 0)`; + function closeModal() { + modalOverlay.classList.add('hidden'); - if (progress < 1) { - requestAnimationFrame(animateProgress); + if (animationId) { + cancelAnimationFrame(animationId); + animationId = null; } } - requestAnimationFrame(animateProgress); + openButton.addEventListener('click', openModal); + closeButton.addEventListener('click', closeModal); + modalOverlay.addEventListener('click', (event) => { + if (event.target === modalOverlay) { + closeModal(); + } + }); + document.addEventListener('keydown', (event) => { + if (event.key === 'Escape' && !modalOverlay.classList.contains('hidden')) { + closeModal(); + } + }); }); \ No newline at end of file diff --git a/styles.css b/styles.css index b4d3679..df023e9 100644 --- a/styles.css +++ b/styles.css @@ -1,32 +1,66 @@ body { margin: 0; - padding: 0; + padding: 20px; font-family: Arial, sans-serif; + background: #f5f5f5; } - - .logos { display: flex; gap: 20px; - padding: 20px; + margin-bottom: 30px; } .logo { width: 100px; height: 100px; - background-size: contain; - background-repeat: no-repeat; - background-position: center; border: 1px solid #ddd; + background: white; + position: relative; + overflow: hidden; + box-sizing: border-box; } -.logo-1 { - background-image: url("designs/logo1.png"); +.logo-japan { + display: flex; + justify-content: center; + align-items: center; } -.logo-2 { - background-image: url("designs/logo6.png"); +.japan-circle { + width: 45px; + height: 45px; + background: #d60000; + border-radius: 50%; +} + +.logo-windows { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 8px; + padding: 10px; +} + +.window-pane { + width: 100%; + height: 100%; +} + +.pane-1 { + background: #f25022; +} + +.pane-2 { + background: #7fba00; +} + +.pane-3 { + background: #00a4ef; +} + +.pane-4 { + background: #ffb900; } .modal_window { @@ -47,10 +81,6 @@ body { background: #555; } -.hidden { - display: none; -} - .modal-overlay { position: fixed; inset: 0; @@ -61,6 +91,10 @@ body { z-index: 3; } +.modal-overlay.hidden { + display: none; +} + .modal { width: 640px; max-width: calc(100% - 40px); @@ -93,14 +127,14 @@ body { } .close_button:hover { - background: orange; + background: #5aa85a; } .progress { position: relative; width: 100%; height: 42px; - background: #eee; + background: #e0e0e0; border-radius: 10px; overflow: hidden; margin-top: 20px; @@ -110,10 +144,10 @@ body { position: absolute; top: 0; left: 0; - width: 0%; + width: 0; height: 100%; - background: red; - transition: width 0.05s linear; + background: #d62828; + z-index: 1; } .progress-text { @@ -123,50 +157,39 @@ body { justify-content: center; align-items: center; font-weight: bold; - z-index: 2; pointer-events: none; } .progress-text-dark { color: black; + z-index: 2; } .progress-text-light { color: white; - mix-blend-mode: difference; -} - -.accordion { - margin-top: 25px; -} - -.accordion-item { - border: 1px solid #ddd; - border-radius: 8px; - margin-bottom: 10px; + z-index: 3; + width: 0; overflow: hidden; -} - -.accordion-item input { - display: none; -} - -.accordion-item label { + left: 0; + right: auto; display: block; - padding: 12px; - background: #f3f3f3; - cursor: pointer; - font-weight: bold; + position: absolute; + height: 100%; } -.accordion-content { - max-height: 0; - overflow: hidden; - padding: 0 12px; - transition: max-height 0.3s ease, padding 0.3s ease; +.progress-text-light::before { + content: "Loading..."; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + width: 590px; + height: 100%; + left: 24px; + top: 0; + white-space: nowrap; } -.accordion-item input:checked ~ .accordion-content { - max-height: 200px; - padding: 12px; -} +.highlight { + color: green; +} \ No newline at end of file