diff --git a/index.html b/index.html index 846cf93..513042b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,35 @@ - +
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..da3e83f 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,57 @@ -/* - Изменить элементу цвет и ширину можно вот так: - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const overlay = document.getElementById('overlay'); +const btnOpen = document.getElementById('btnOpen'); +const btnClose = document.getElementById('btnClose'); + +function openModal() { + overlay.classList.add('is-open'); + document.body.style.overflow = 'hidden'; +} + +function closeModal() { + overlay.classList.remove('is-open'); + document.body.style.overflow = ''; +} + +btnOpen.addEventListener('click', openModal); +btnClose.addEventListener('click', closeModal); + +overlay.addEventListener('click', (e) => { + if (e.target === overlay) closeModal(); +}); + +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && overlay.classList.contains('is-open')) { + closeModal(); + } +}); + + +const progressFill = document.querySelector('.progress-fill'); +let progress = 0; + +function fillProgressBar() { + progressFill.style.width = '0%'; + progress = 0; + + const totalDuration = 3000; + const interval = 16; + const step = 100 / (totalDuration / interval); + + const timer = setInterval(() => { + progress += step; + if (progress >= 100) { + progress = 100; + clearInterval(timer); + } + progressFill.style.width = progress + '%'; + + + const barWidth = progressFill.parentElement.offsetWidth; + document.querySelector('.progress-text-white').style.width = barWidth + 'px'; + }, interval); +} + +btnOpen.addEventListener('click', () => { + fillProgressBar(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..b6859f8 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,168 @@ +.logos { + display: flex; + gap: 20px; + padding: 20px; +} + +.logo-box { + width: 100px; + height: 100px; + border: 1px solid #ccc; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.logo-circle { + width: 80px; + height: 80px; + background-color: #e74c3c; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.logo-circle-inner { + width: 30px; + height: 30px; + border: 10px solid white; + border-radius: 50%; +} + +.logo-small-circle { + width: 50px; + height: 50px; + background-color: #e74c3c; + border-radius: 50%; +} + +.btn-open { + margin: 0 20px; + padding: 0.75rem 2rem; + font-size: 1rem; + background: #1a1a1a; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.btn-open:hover { + background: #333; +} + +.overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + pointer-events: none; + z-index: 1000; +} + +.overlay.is-open { + opacity: 1; + pointer-events: all; +} + +.modal { + position: relative; + width: 640px; + max-width: calc(100vw - 2rem); + background: #fff; + border-radius: 8px; + padding: 2.5rem; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); +} + +.modal__title { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #111; +} + +.modal__body { + font-size: 0.95rem; + line-height: 1.7; + color: #444; +} + +.modal__body p + p { + margin-top: 0.75rem; +} + +.btn-close { + position: absolute; + top: 1rem; + right: 1rem; + width: 32px; + height: 32px; + border: none; + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + color: #999; + font-size: 1.25rem; +} + +.btn-close:hover { + background: #f0f0f0; + color: #111; +} + +/* Прогресс-бар */ +.progress-bar { + width: 100%; + height: 40px; + background-color: #d3d3d3; + position: relative; + border-radius: 5px; + overflow: hidden; + font-family: sans-serif; + font-weight: bold; + font-size: 18px; + margin-top: 20px; +} + +.progress-text-black { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: black; + z-index: 1; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + background-color: #e74c3c; + overflow: hidden; + z-index: 2; +} + +.progress-text-white { + width: 640; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: white; + position: absolute; + top: 0; + left: 0; +} \ No newline at end of file