diff --git a/index.html b/index.html index 846cf93..b254ce6 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,30 @@ - - + + + +
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..24ca732 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,91 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const modal = document.getElementById('modal'); +const overlay = document.getElementById('overlay'); +const closeBtn = document.getElementById('close-btn'); +const openModalBtn = document.querySelector('.open-modal-btn'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function openModal() { + modal.style.display = 'block'; + overlay.style.display = 'block'; + document.body.style.overflow = 'hidden'; +} + +function closeModal() { + modal.style.display = 'none'; + overlay.style.display = 'none'; + document.body.style.overflow = ''; +} + +openModalBtn.addEventListener('click', openModal); +closeBtn.addEventListener('click', closeModal); +overlay.addEventListener('click', closeModal); + +const progressFill = document.querySelector('.progress-fill'); +const progressBar = document.querySelector('.progress-bar'); + +function animateProgressBar() { + const duration = 3000; + const startTime = performance.now(); + const framesPerSecond = 60; + const totalFrames = duration / (1000 / framesPerSecond); + let currentFrame = 0; + const text = "Loading..."; + const textContainer = document.createElement('div'); + textContainer.className = 'text-container'; + textContainer.style.position = 'absolute'; + textContainer.style.width = '100%'; + textContainer.style.height = '100%'; + textContainer.style.display = 'flex'; + textContainer.style.justifyContent = 'center'; + textContainer.style.alignItems = 'center'; + + const oldText = progressBar.querySelector('.text-container'); + if (oldText) progressBar.removeChild(oldText); + + for (let i = 0; i < text.length; i++) { + const charSpan = document.createElement('span'); + charSpan.textContent = text[i]; + charSpan.style.transition = 'color 0.1s'; + charSpan.className = 'char'; + textContainer.appendChild(charSpan); + } + + progressBar.appendChild(textContainer); + const charSpans = progressBar.querySelectorAll('.char'); + + function updateProgress() { + currentFrame++; + const progress = Math.min(currentFrame / totalFrames, 1); + const percent = progress * 100; + progressFill.style.width = `${percent}%`; + + const barRect = progressBar.getBoundingClientRect(); + const fillWidth = barRect.width * progress; + + + charSpans.forEach((span, index) => { + const spanRect = span.getBoundingClientRect(); + const spanPosition = spanRect.left + spanRect.width/2 - barRect.left; + + if (spanPosition < fillWidth) { + span.style.color = 'white'; + } else { + span.style.color = 'black'; + } + }); + + if (progress < 1) { + requestAnimationFrame(updateProgress); + } else { + charSpans.forEach(span => { + span.style.color = 'white'; + }); + } + } + + requestAnimationFrame(updateProgress); +} + +document.querySelector('.open-modal-btn').addEventListener('click', function() { + progressFill.style.width = '0%'; + setTimeout(animateProgressBar, 100); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..b157a39 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,104 @@ +#logo1, #logo2 { + width: 100px; + height: 100px; + object-fit: contain; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + line-height: 1.6; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + display: none; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + max-width: 90%; + max-height: 90vh; + overflow-y: auto; + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + z-index: 1001; + display: none; +} + +.modal-header { + padding: 20px; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; + align-items: center; +} + +.close-btn { + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #777; + padding: 0; + line-height: 1; +} + +.modal-content { + padding: 20px; +} + +.open-modal-btn { + padding: 10px 20px; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +.progress-bar { + position: relative; + width: 300px; + height: 30px; + background-color: #ccc; + border-radius: 5px; + overflow: hidden; + margin: 20px auto; + font-family: Arial, sans-serif; +} + +.progress-bar .progress-fill { + background-color: red; + height: 100%; + width: 0%; + position: absolute; + top: 0; + left: 0; + transition: width 0.1s; +} + +.progress-bar .text-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} \ No newline at end of file