diff --git a/index.html b/index.html index 846cf93..b0269fb 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,54 @@ - + + +
+
+

HELLO

+ +
+
+
+
+ + +

+ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa +

+
+
+ + +

+ bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb +

+
+
+ + +

+ ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc +

+
+
+
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..695eb0f 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,28 @@ -/* - Изменить элементу цвет и ширину можно вот так: - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +document.addEventListener('DOMContentLoaded', () => { + const progressBar = document.querySelector('.progress'); + fillProgressBar(3000, progressBar); +}); + +function hide() { + document.querySelector('.lightbox').style.display = 'none'; + document.querySelector('.blur').style.display = 'none'; +} + +function fillProgressBar(duration, progressBar) { + let startTime = null; + + function animate(timestamp) { + if (!startTime) { + startTime = timestamp; + } + const progress = timestamp - startTime; + const percentage = Math.min(progress / duration * 100, 100); + progressBar.style.width = percentage + '%'; + + if (progress < duration) { + requestAnimationFrame(animate); + } + } + requestAnimationFrame(animate); +} diff --git a/styles.css b/styles.css index e69de29..67f08a6 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,87 @@ +img { + width: 100px; +} + +.logo { + border: 1px solid black; + overflow: hidden; + width: 100px; + height: 100px; + margin: 10px; +} + +.lightbox { + display: flex; + position: fixed; + justify-content: center; + align-items: center; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; +} + +.lightbox-content { + position: relative; + width: 640px; + max-height: 80%; + overflow: auto; + margin: 10% auto; + background: aliceblue; + padding: 10px; +} + +.blur { + position: fixed; + top: 0; + left: 0; + z-index: 9; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(5px); +} + +.exit { + position: absolute; + top: 10px; + right: 10px; +} + +.progress-bar { + background-color: gray; + width: 100%; + height: 40px; + position: relative; +} + +.progress-bar::before, .progress::before { + content: "Loading..."; + font-size: 24px; + color: white; + position: absolute; + left: 320px; + top: 20px; + transform: translate(-50%, -50%); +} + +.progress-bar::before { + color: black; +} + +.progress { + position: absolute; + font-size: 24px; + background-color: red; + height: 100%; + overflow: hidden; +} + +input[type='checkbox'] + p { + display: none; +} + +input[type='checkbox']:checked + p { + display: block; +} \ No newline at end of file