diff --git a/index.html b/index.html index 846cf93..7294bbf 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,37 @@ - +
+ + +
+
+

Modal window

+ +
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..3cc9c9e 100644 --- a/index.js +++ b/index.js @@ -1,7 +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; - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + function resetProgress() { + progressFill.style.width = '0'; + progressTextLight.style.width = '0'; + progressFill.style.backgroundColor = '#d62828'; + startTime = null; + } + + function animateProgress(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); + } + } + + function openModal() { + modalOverlay.classList.remove('hidden'); + resetProgress(); + + if (animationId) { + cancelAnimationFrame(animationId); + } + + animationId = requestAnimationFrame(animateProgress); + } + + function closeModal() { + modalOverlay.classList.add('hidden'); + + if (animationId) { + cancelAnimationFrame(animationId); + animationId = null; + } + } + + 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 e69de29..df023e9 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,195 @@ +body { + margin: 0; + padding: 20px; + font-family: Arial, sans-serif; + background: #f5f5f5; +} + +.logos { + display: flex; + gap: 20px; + margin-bottom: 30px; +} + +.logo { + width: 100px; + height: 100px; + border: 1px solid #ddd; + background: white; + position: relative; + overflow: hidden; + box-sizing: border-box; +} + +.logo-japan { + display: flex; + justify-content: center; + align-items: center; +} + +.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 { + 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; +} + +.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-overlay.hidden { + display: none; +} + +.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: #5aa85a; +} + +.progress { + position: relative; + width: 100%; + height: 42px; + background: #e0e0e0; + border-radius: 10px; + overflow: hidden; + margin-top: 20px; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background: #d62828; + z-index: 1; +} + +.progress-text { + position: absolute; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + pointer-events: none; +} + +.progress-text-dark { + color: black; + z-index: 2; +} + +.progress-text-light { + color: white; + z-index: 3; + width: 0; + overflow: hidden; + left: 0; + right: auto; + display: block; + position: absolute; + height: 100%; +} + +.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; +} + +.highlight { + color: green; +} \ No newline at end of file