diff --git a/index.html b/index.html index 846cf93..264b00a 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,53 @@ - - +
+ + +
+ + + + + +
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..604e0fb 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,55 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openModalButton = document.getElementById('open-modal-button'); +const modal = document.getElementById('modal'); +const overlay = document.getElementById('overlay'); +const closeButton = document.querySelector('.close-button'); +const progressBar = document.querySelector('.progress'); +const progressText = document.querySelector('.progress-text'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +openModalButton.addEventListener('click', () => { + modal.classList.add('active'); + overlay.classList.add('active'); + animateProgressBar(); +}); + +closeButton.addEventListener('click', () => { + modal.classList.remove('active'); + overlay.classList.remove('active'); + resetProgressBar(); +}); + +overlay.addEventListener('click', () => { + modal.classList.remove('active'); + overlay.classList.remove('active'); + resetProgressBar(); +}); + +modal.addEventListener('click', (event) => { + event.stopPropagation(); +}); + + +function animateProgressBar() { + let width = 0; + const intervalTime = 3000; + const frameRate = 30; + const increment = 100 / (intervalTime * frameRate / 1000); + const interval = setInterval(frame, 1000 / frameRate); + + function frame() { + if (width >= 100) { + clearInterval(interval); + progressText.textContent = "Complete!"; + progressText.style.color = 'white'; + } else { + width += increment; + progressText.style.color = 'black'; + progressBar.style.width = width + '%'; + } + } +} + +function resetProgressBar() { + progressBar.style.width = '0%'; + progressText.textContent = "Loading..."; + progressText.style.color = 'black'; +} diff --git a/styles.css b/styles.css index e69de29..9bbb415 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,127 @@ +.logo-container { + display: flex; + gap: 20px; +} + +.logo { + width: 100px; + height: 100px; + overflow: hidden; + background-size: contain; + background-repeat: no-repeat; +} + +.logo1 { + background-image: url('designs/logo1.png'); +} + +.logo2 { + background-image: url('designs/logo2.png'); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: white; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + z-index: 2; + border-radius: 5px; + padding: 20px; + display: none; +} + +.modal-content { + position: relative; +} + +.close-button { + position: absolute; + top: 0; + right: 0; + font-size: 20px; + cursor: pointer; + color: #888; + padding: 5px; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + display: none; +} + +.modal.active, .overlay.active { + display: block; +} + +.progress-bar { + width: 100%; + height: 30px; + background-color: #eee; + border-radius: 5px; + overflow: hidden; + position: relative; +} + +.progress { + width: 0%; + height: 100%; + background-color: red; + transition: width 0.1s linear; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: black; + font-weight: bold; + z-index: 1; +} + + +.accordion { + margin-top: 20px; +} + +.accordion-item { + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 5px; + overflow: hidden; +} + +.accordion-item label { + display: block; + padding: 10px; + background-color: #f0f0f0; + cursor: pointer; + font-weight: bold; +} + +.accordion-content { + padding: 10px; + background-color: #fff; + display: none; +} + +.accordion-item input[type="checkbox"] { + display: none; +} + +.accordion-item input[type="checkbox"]:checked + label { + background-color: #ddd; +} + +.accordion-item input[type="checkbox"]:checked + label + .accordion-content { + display: block; +}