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

Описание вкладки

+
+ + + +
+
+
+
Loading...
+
+
+ + + +
+

Гойда

+
+ +
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..17f9f31 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,41 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.addEventListener('DOMContentLoaded', function() { + const overlay = document.querySelector('.overlay'); + const openBtn = document.querySelector('.open-modal-btn'); + + function openModal() { + overlay.style.display = 'flex'; + } + + function closeModal() { + overlay.style.display = 'none'; + } + + openBtn.addEventListener('click', openModal); + + document.querySelectorAll('.close-btn').forEach(btn => { + btn.addEventListener('click', closeModal); + }); +}); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const openBtn = document.querySelector('.open-modal-btn'); + +openBtn.addEventListener("click", function(){ + const progressContainer = document.querySelector('.progress-container'); + const progressBar = document.querySelector('.progress-bar'); + let progress = 0; + + const totalTime = 3000; + const intervalTime = 10; + const steps = totalTime / intervalTime; + const stepIncrease = 100 / steps; + + const intervalId = setInterval(() => { + progress += stepIncrease; + if (progress >= 100) { + progress = 100; + clearInterval(intervalId); + } + progressBar.style.width = progress + '%'; + progressContainer.style.setProperty('--progress', progress); + }, intervalTime); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..5c1717c 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,133 @@ +.logo { + overflow: hidden; + width: 100px; + height: 100px; + object-fit: contain; +} + +.progress-container { + position: relative; + width: 400px; + height: 40px; + background-color: #ccc; + font-family: sans-serif; +} + +.progress-bar { + position: absolute; + height: 100%; + width: calc(var(--progress) * 1%); + background-color: red; +} + +.progress-text { + position: absolute; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 20px; + font-weight: bold; + background: linear-gradient( + 90deg, + white calc(var(--progress) * 1%), + black calc(var(--progress) * 1%) + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + display: none; + justify-content: center; + align-items: center; +} + +.open-modal-btn { + padding: 10px 20px; + background: #4CAF50; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + margin: 20px; +} + +.open-modal-btn:hover { + background: #45a049; +} + + +.modal { + width: 640px; + background: white; + padding: 20px; + position: relative; + border-radius: 5px; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; + border: none; + background: none; + p: 10px; + font-size: 20px; +} + +.close-btn:hover { + color: #666; +} + +.modal .modal-body { + width: calc(100% - 40px); + margin: 0 auto; + height: 0; + color: rgba(0, 0, 0, 0); + background-color: #ffff; + line-height: 18px; + padding: 0 30px; + box-sizing: border-box; + transition: color 0.5s, padding 0.5s; + overflow: hidden; +} + +.modal label { + cursor: pointer; + background-color: #666666; + display: block; + padding: 15px 20px; + width: 100%; + font-weight: 300; + box-sizing: border-box; + z-index: 100; + font-family: Verdana, sans-serif; + font-size: 18px; + margin: 0 0 5px; + transition: color .35s; +} +.modal input{ + display: none; +} + +.modal label:before { + content: '\276F'; + float: right; +} + +.modal input:checked + label + .modal-body { + height: auto; + margin-top: -5px; + color: #000; + padding: 20px 30px 10px; +} \ No newline at end of file