diff --git a/index.html b/index.html index 846cf93..34b3ab1 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,48 @@ - - + + +
+ +
+ +

+
+ +
+
+
+

+ +
+
+
+
+
+
+
+ + + + +
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..879b484 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,53 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const modalWindowButton = document.querySelector('.modal-window-button'); +const modal = document.getElementById('Modal'); +const closeModalBtn = document.querySelector('.close-modal-btn'); +const closeIcon = document.querySelector('.modal-close'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +modalWindowButton.addEventListener('click', () => { + modal.style.display = 'flex'; + startProgressBar() +}); + +closeModalBtn.addEventListener('click', () => { + modal.style.display = 'none'; + dropProgressBar() +}); + +closeIcon.addEventListener('click', () => { + modal.style.display = 'none'; + dropProgressBar() +}); + +let interval =0 +function startProgressBar() { + + const fill = document.querySelector(".progress-fill"); + const text1 = document.querySelector(".progress-text-back"); + const text2 = document.querySelector(".progress-text-front"); + + let width = 1; + + interval = setInterval(() => { + if (width >= 100) { + clearInterval(interval); + fill.style.backgroundColor = 'green'; + text1.textContent = `Loaded`; + text2.textContent = `Loaded`; + } else { + width++; + fill.style.width = `${width}%`; + } + }, 30); + +} + +function dropProgressBar(){ + clearInterval(interval); + const fill = document.querySelector(".progress-fill"); + const text1 = document.querySelector(".progress-text-back"); + const text2 = document.querySelector(".progress-text-front"); + fill.style.width = `0%` + fill.style.backgroundColor = `#d62828`; + text1.textContent = `Loading...`; + text2.textContent = `Loading...`; +} diff --git a/styles.css b/styles.css index e69de29..6ade042 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,166 @@ +.modal { + position: fixed; + inset: 0; + display: none; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.45); + z-index: 1000; +} + +.modal.active { + display: flex; +} + +.modal-content { + position: relative; + width: 320px; + max-width: 90%; + height: auto; + background: #fff; + border: 1px solid #bfbfbf; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); + padding: 14px 16px 16px; + box-sizing: border-box; +} + +.modal-content h2 { + margin: 0 0 10px; + font-size: 28px; + font-weight: 700; + color: #222; +} + +.modal-content p { + margin: 0 0 12px; + font-size: 14px; + line-height: 1.4; + color: #333; +} + +.modal-window-button, +.close-modal-btn { + padding: 4px 10px; + font-size: 13px; + color: #fff; + background: #7fbf6a; + border: 1px solid #6aa657; + cursor: pointer; +} + +.close-modal-btn:hover { + background: #6fad59; +} + +.modal-close { + position: absolute; + top: 6px; + right: 8px; + background: transparent; + border: none; + font-size: 22px; + line-height: 1; + color: #666; + cursor: pointer; + padding: 0; +} + +.modal-close:hover { + color: #000; +} + +.square{ + position: absolute; + border: solid red; + width: 100px; + height: 100px; +} + +.japan-back { + border: 1px solid black; + display: flex; + height: 70px; + width: 100px; + justify-content: center; + align-items: center; +} +.japan{ + background-color: #d62828; + border-radius: 50%; + height: 40px; + width: 40px; +} + + + .bunny-back { + display: flex; + flex-direction: column; + align-items: center; + width: 60px; + + padding: 10px; + } + +.ears { + display: flex; + gap: 20px; + margin-bottom: -10px; +} + +.bunny-u1, .bunny-u2 { + background-color: black; + height: 25px; + width: 25px; + border-radius: 50%; +} + +.bunny-head { + background-color: black; + height: 40px; + width: 40px; + border-radius: 50%; +} + + + +.progress-bar { + position: relative; + width: 100%; + height: 32px; + background: #bfbfbf; + border: 1px solid #999; + overflow: hidden; + margin: 16px 0; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 45%; + background: #d62828; + z-index: 1; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 14px; + font-weight: 600; + white-space: nowrap; + pointer-events: none; + z-index: 2; +} + +.progress-text-back { + color: #000; +} + +.progress-text-front { + color: #fff; + z-index: 3; + clip-path: inset(0 55% 0 0); +} \ No newline at end of file