diff --git a/.gitignore b/.gitignore index 6704566..01896fd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.idea + # Logs logs *.log diff --git a/index.html b/index.html index 846cf93..a6ba8d9 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,33 @@ +
+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..81eaca1 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,41 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + + +const lightbox = document.getElementById('lightbox'); +const openBtn = document.getElementById('openBtn'); +const closeBtn = document.getElementById('closeBtn'); + +openBtn.addEventListener('click', () => { + lightbox.classList.add('active'); +}); + +closeBtn.addEventListener('click', () => { + lightbox.classList.remove('active'); +}); + +lightbox.addEventListener('click', (e) => { + if (e.target === lightbox) { + lightbox.classList.remove('active'); + } +}); + +openBtn.addEventListener('click', () => { + const progressBar = document.querySelector('#progressBar'); + + let progress = 0; + const duration = 3000; + const interval = 20; + const step = 100 / (duration / interval); + + const timer = setInterval(() => { + progress += step; + if (progress >= 100) { + progress = 100; + clearInterval(timer); + } + progressBar.style.width = progress + "%"; + }, interval); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..b4a3516 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,107 @@ +.wrapper{ + position: relative; + width: 100px; + height: 100px; + border: 1px solid black; + margin: 5px; +} + +.circle { + width: 40px; + height: 40px; + border-radius: 50%; + background: black; + position: absolute; +} + + +#circle1{ + left: 0; + top: 0; + z-index: -1; +} + +#circle2{ + right: 0; + top: 0; + z-index: -2; +} + +#circle3{ + width: 70px; + height: 70px; + top: 20%; + left: 15%; +} + +#circle4{ + background: red; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.lightbox { + display: none; /* Скрыто по умолчанию */ + position: fixed; + top: 0; left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.lightbox.active { + display: flex; +} + +.lightbox-content { + width: 640px; + height: auto; + background: white; + padding: 20px; + position: relative; + border-radius: 5px; +} + + +.close-btn { + position: absolute; + top: 10px; right: 15px; + cursor: pointer; + font-size: 24px; +} + +.progress-container{ + position: relative; + overflow: hidden; + text-align: center; + width : 100%; + height : 20px; + border: 1px solid black; + background: gray; +} + +.progress-bar{ + position: absolute; + top : 0; + text-align: center; + width : 0; + height : 100%; + background: red; + overflow: hidden; +} + +.text{ + position: absolute; + color: black; +} + +.text-not-normal{ + color: white; + position: absolute; + z-index: 2; +} \ No newline at end of file