diff --git a/index.html b/index.html index 846cf93..29d2c6d 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,73 @@ - - + + Практика позиционирования - - - - + + + + + + + + + + +
+ - - \ No newline at end of file + + diff --git a/index.js b/index.js index dd50919..ab54f9e 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,74 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.addEventListener('DOMContentLoaded', function () { + const modal = document.getElementById('modal'); + const overlay = document.getElementById('overlay'); + const openModalBtn = document.getElementById('openModalBtn'); + const closeModalBtn = document.getElementById('closeModalBtn'); + const progressFill = document.getElementById('progressFill'); + const progressText = document.getElementById('progressText'); + const progressBar = document.getElementById('progressBar'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + openModalBtn.addEventListener('click', function () { + modal.style.display = 'block'; + overlay.style.display = 'block'; + startProgressAnimation(); + }); + + closeModalBtn.addEventListener('click', function () { + modal.style.display = 'none'; + overlay.style.display = 'none'; + }); + + function startProgressAnimation() { + let progress = 0; + progressFill.style.width = '0'; + progressText.textContent = 'Loading...'; + progressText.style.color = '#000'; + + const text = progressText.textContent; + progressText.textContent = ''; + + const letters = []; + for (let i = 0; i < text.length; i++) { + const span = document.createElement('span'); + span.textContent = text[i]; + span.style.position = 'relative'; + span.style.zIndex = '2'; + progressText.appendChild(span); + letters.push(span); + } + + const duration = 3000; + const startTime = performance.now(); + + function updateProgress(currentTime) { + const elapsedTime = currentTime - startTime; + progress = Math.min((elapsedTime / duration) * 100, 100); + progressFill.style.width = `${progress}%`; + + const barRect = progressBar.getBoundingClientRect(); + const fillWidth = barRect.width * (progress / 100); + + letters.forEach((letter) => { + const letterRect = letter.getBoundingClientRect(); + const letterLeft = letterRect.left - barRect.left; + + if (letterLeft < fillWidth) { + letter.style.color = '#fff'; + } else { + letter.style.color = '#000'; + } + }); + + if (progress < 100) { + requestAnimationFrame(updateProgress); + } else { + setTimeout(() => { + modal.style.display = 'none'; + overlay.style.display = 'none'; + }, 500); + } + } + + requestAnimationFrame(updateProgress); + } +}); diff --git a/styles.css b/styles.css index e69de29..61add0b 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,172 @@ +.square-logo { + border: 1px solid #222; + overflow: hidden; + width: 100px; + height: 100px; + margin: 10px; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 1000; + display: none; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + max-width: 90%; + background: white; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + z-index: 1001; + display: none; +} + +.modal-content { + padding: 30px; +} + +.close-btn { + position: absolute; + top: 15px; + right: 15px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #777; + padding: 5px; + line-height: 1; +} + +.close-btn:hover { + color: #333; +} + +.btn { + background: #4caf50; + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 4px; + font-size: 16px; +} + +.btn:hover { + background: #45a049; +} + +.progress-container { + width: 100%; + margin: 20px 0; +} + +.progress-bar { + height: 40px; + background-color: #e0e0e0; + border-radius: 20px; + position: relative; + overflow: hidden; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 0; + background-color: #f44336; + border-radius: 20px; + transition: width 0.1s linear; + pointer-events: none; + will-change: color; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 16px; + color: #000; + z-index: 2; + width: 100%; + text-align: center; + will-change: width; +} + +.white-text { + color: #fff; +} + +.accordion { + width: 100%; + margin-bottom: 20px; +} + +.accordion-item { + margin-bottom: 8px; + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; +} + +.accordion-input { + display: none; +} + +.accordion-label { + display: block; + padding: 12px 20px; + background-color: #f5f5f5; + color: #333; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; + position: relative; +} + +.accordion-label:hover { + background-color: #e9e9e9; +} + +.accordion-label::after { + content: '+'; + position: absolute; + right: 20px; + font-size: 18px; + transition: transform 0.3s; +} + +.accordion-input:checked ~ .accordion-label::after { + content: '-'; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + padding: 0 20px; + background-color: #fff; +} + +.accordion-input:checked ~ .accordion-content { + max-height: 300px; + padding: 15px 20px; +} + +.accordion-content p { + margin: 0; + padding: 5px 0; +}