diff --git a/index.html b/index.html index 846cf93..a5b745d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,39 @@ - +
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..615fe37 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; + 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 e69de29..47d1180 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,226 @@ +/* Общие стили */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +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 { + display: flex; + gap: 20px; +} + +/* Логотип Микки Мауса */ +.logo-mickey { + width: 100px; + height: 100px; + position: relative; +} + +.logo-mickey .head { + width: 60px; + height: 60px; + background: black; + border-radius: 50%; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.logo-mickey .ear { + width: 40px; + height: 40px; + background: black; + border-radius: 50%; + position: absolute; + top: 10px; +} + +.logo-mickey .left { + left: 5px; +} + +.logo-mickey .right { + right: 5px; +} + +.logo-target { + width: 90px; + height: 90px; + background-color: red; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.target-white-ring { + width: 60px; + height: 60px; + background-color: white; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.target-center { + width: 30px; + height: 30px; + background-color: red; + border-radius: 50%; +} + +.head { + width: 80px; /* Уменьшаем голову для пропорциональности */ + height: 80px; + background-color: black; + border-radius: 50%; + position: absolute; + top: 20px; /* Смещаем вниз */ + left: 20px; /* Центрируем относительно родительского контейнера */ +} + +.ear { + width: 40px; /* Уменьшаем размер ушей */ + height: 40px; + background-color: black; + border-radius: 50%; + position: absolute; + top: 0; +} + +.left { + left: -20px; /* Смещаем влево */ +} + +.right { + right: -20px; /* Смещаем вправо */ +} + + +#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