From d25ba49af50a8e4e7b67900a4e1b2b169532e29f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=BA=D0=B0=D1=82=D0=B5=D1=80=D0=B8=D0=BD=D0=B0?= Date: Tue, 7 Apr 2026 17:59:37 +0500 Subject: [PATCH 1/3] 1 --- index.html | 7 +++++-- styles.css | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..4d37765 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,10 @@ - - +
+ + +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..f190ca0 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,35 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f4f4f4; +} + +.logo-container { + display: flex; + gap: 20px; +} + +.logo { + width: 100px; + height: 100px; + background-size: cover; + background-position: center; + overflow: hidden; + position: relative; +} + +#logo1 { + background-image: url('designs/logo1.png'); +} + +#logo5 { + background-image: url('designs/logo5.png'); +} \ No newline at end of file From aa3dcced09272bb31f7b4a1112b7a245b789cb0e Mon Sep 17 00:00:00 2001 From: Govoruhina Date: Tue, 7 Apr 2026 18:15:29 +0500 Subject: [PATCH 2/3] task234 --- index.html | 31 +++++++++++--- index.js | 66 ++++++++++++++++++++++++++++- styles.css | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 211 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4d37765..934bc94 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,31 @@ -
- - -
- +
+ + +
+ + + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..af4f086 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,68 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +document.addEventListener('DOMContentLoaded', function() { + const overlay = document.querySelector('#modalOverlay'); + const openBtn = document.querySelector('#openModalBtn'); + const closeBtn = document.querySelector('#closeModalBtn'); + + const progressFill = document.querySelector('#progressFill'); + const whiteText = document.querySelector('#whiteText'); + + let animationId = null; + + function resetProgress() { + if (progressFill) progressFill.style.width = '0%'; + if (whiteText) whiteText.style.clipPath = 'inset(0 100% 0 0)'; + } + + function startProgress() { + if (animationId) { + cancelAnimationFrame(animationId); + } + resetProgress(); + + const duration = 3000; // 3 секунды + const startTime = performance.now(); + + function update(currentTime) { + const elapsed = currentTime - startTime; + let percent = Math.min(1, elapsed / duration); + const widthPercent = percent * 100; + + progressFill.style.width = widthPercent + '%'; + const clipRight = 100 - widthPercent; + whiteText.style.clipPath = `inset(0 ${clipRight}% 0 0)`; + + if (percent < 1) { + animationId = requestAnimationFrame(update); + } else { + animationId = null; + } + } + + animationId = requestAnimationFrame(update); + } + + function openModal() { + overlay.classList.add('active'); + startProgress(); + } + + function closeModal() { + overlay.classList.remove('active'); + if (animationId) { + cancelAnimationFrame(animationId); + animationId = null; + } + } + + openBtn.addEventListener('click', openModal); + closeBtn.addEventListener('click', closeModal); + + overlay.addEventListener('click', function(e) { + if (e.target === overlay) closeModal(); + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index f190ca0..cd6d286 100644 --- a/styles.css +++ b/styles.css @@ -5,11 +5,13 @@ } body { + font-family: 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f4; + gap: 40px; } .logo-container { @@ -32,4 +34,122 @@ body { #logo5 { background-image: url('designs/logo5.png'); +} + +#openModalBtn { + padding: 12px 24px; + font-size: 18px; + background: #a634db; + color: white; + border: none; + cursor: pointer; +} + +/* Оверлей */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); + display: flex; + justify-content: center; + align-items: center; + visibility: hidden; + opacity: 0; + transition: 0.2s; +} + +.modal-overlay.active { + visibility: visible; + opacity: 1; +} + +/* Модальное окно */ +.modal { + width: 640px; + max-width: 90%; + background: white; + border-radius: 16px; + box-shadow: 0 20px 40px rgba(0,0,0,0.3); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 24px; + border-bottom: 1px solid #eee; +} + +.modal-header h2 { + font-size: 24px; +} + +.close-btn { + background: none; + border: none; + font-size: 28px; + cursor: pointer; + color: #999; +} + +.close-btn:hover { + color: #e74c3c; +} + +.modal-body { + padding: 32px 24px; +} + +/* Прогресс-бар */ +.progress-container { + margin: 20px 0; +} + +.progress-bg { + position: relative; + background-color: #b0b0b0; + height: 48px; + border-radius: 24px; + overflow: hidden; +} + +.progress-fill { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 0%; + background-color: #e63946; + border-radius: 24px; + transition: width 0.05s linear; + z-index: 1; +} + +.progress-text { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 20px; + letter-spacing: 1px; + pointer-events: none; +} + +.progress-text-black { + color: black; + z-index: 2; +} + +.progress-text-white { + color: white; + z-index: 3; + clip-path: inset(0 100% 0 0); } \ No newline at end of file From 1e538db6387b69e79213bd9e086fd63d82f091e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=95=D0=BA=D0=B0=D1=82=D0=B5=D1=80=D0=B8=D0=BD=D0=B0?= Date: Tue, 7 Apr 2026 18:49:48 +0500 Subject: [PATCH 3/3] final --- index.html | 18 ++++++++--- index.js | 2 +- styles.css | 93 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 96 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 934bc94..a5b745d 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,22 @@ -
- - +
+
+
+
+
+
+
+
+
+
+
+ - + -