diff --git a/index.html b/index.html index 846cf93..1280a70 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,54 @@ - + logo1 + logo2 + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..9b6b17b 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,42 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const load = document.querySelector('.prog-load'); + +function startAnimation() { + let width = 0; + const timer = setInterval(() => { + width++; // Прибавляем 1% + load.style.width = width + '%'; + + if (width >= 100) { + clearInterval(timer); + } + }, 30); +} + +function buttonFunction(event) { + let target = event.target; + + if (target.classList.contains('lightbox__close')) { + let lightbox = document.querySelector('.lightbox'); + lightbox.style.display = 'none'; + } + else if (target.classList.contains('lightbox__open')) { + let lightbox = document.querySelector('.lightbox'); + lightbox.style.display = 'block'; + startAnimation(); + load.style.width = "0%" + } +} + + +let openButton = document.querySelector('.lightbox__close'); +openButton.addEventListener('click', buttonFunction); +let closeButton = document.querySelector('.lightbox__open'); +closeButton.addEventListener('click', buttonFunction); + + + diff --git a/styles.css b/styles.css index e69de29..5931f6b 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,172 @@ +img { + width: 100px; + height: 100px; +} + +.progress { + display: flex; + background-color: lightgray; + width: 400px; + height: 200px; + justify-content: center; + align-items: center; + position: relative; +} + +.prog, .prog-load { + position: absolute; + width: 100%; + height: 40px; + font-size: 25px; + line-height: 40px; + text-align: center; +} + +.prog { + background-color: grey; + color: black; + z-index: 1; +} + +.prog-load { + background-color: red; + color: white; + z-index: 2; + width: 40%; + overflow: hidden; + left: 0 +} + +.prog-load-text { + width: 400px; + height: 100%; +} + +.lightbox { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: none; +} + +.lightbox-content { + background-color: lightblue; + width: 640px; + min-width: 200px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + border-radius: 8px; + padding: 20px 0 20px 0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + + display: flex; + flex-direction: column; + align-items: center; +} + +.lightbox h1 { + margin-left: 20px; + margin-right: 50px; +} + +.lightbox p { + margin-left: 20px; + margin-right: 20px; +} + +.lightbox__close { + position: absolute; + top: 15px; + right: 15px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + padding: 0; + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; +} + +.lightbox__close:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.lightbox__open { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; +} + +.lightbox__open:hover { + background-color: #0056b3; +} + + + + + +.accordion { + border: 1px solid #ccc; + border-radius: 4px; +} + +.accordion-item { + border-bottom: 1px solid #ccc; +} + + +.accordion-input { + display: none; +} + +.accordion-label { + display: block; + padding: 10px 15px; + background: lightgray; + cursor: pointer; + font-weight: bold; + color: #333; + position: relative; + border-bottom: 1px solid #ccc; +} + +.accordion-label::before { + content: '▶'; + display: inline-block; + margin-right: 10px; + font-size: 10px; + transition: transform 0.2s; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + background: white; + padding: 0 15px; +} + +.accordion-input:checked + .accordion-label::before { + transform: rotate(90deg); +} + +.accordion-input:checked ~ .accordion-content { + max-height: 500px; + padding: 15px; + border-top: 1px solid #eee; +}