From 2cccddbe7a8818e336be0b9fc0d9923d90a778f0 Mon Sep 17 00:00:00 2001 From: VladimirLezhnin Date: Tue, 2 Apr 2024 18:09:40 +0500 Subject: [PATCH] Tasks 1, 2, 3, 4 done --- index.html | 23 ++++++++++++++- index.js | 49 ++++++++++++++++++++++++++++---- styles.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 148 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 846cf93..37a6f33 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,28 @@ - + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..dda70d4 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,44 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.addEventListener('DOMContentLoaded', function() { + document.getElementById('close-modal').addEventListener('click', function() { + document.getElementById('modal-overlay').classList.add('hidden'); + document.getElementById('modal-window').classList.add('hidden'); + }); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + document.getElementById('open-modal').addEventListener('click', function() { + document.getElementById('modal-overlay').classList.remove('hidden'); + document.getElementById('modal-window').classList.remove('hidden'); + + var progressBar = document.querySelector('.progress-bar'); + var width = 0; + var increment = 1; + var intervalTime = 30; + progressBar.style.width = '0%' + + var interval = setInterval(function() { + if (width >= 100) + clearInterval(interval); + else { + width += increment; + progressBar.style.width = width + '%'; + } + }, intervalTime); + }); +}); + + +document.addEventListener('DOMContentLoaded', function() { + var progressBar = document.querySelector('.progress-bar'); + var width = 0; + var increment = 1; + var intervalTime = 30; + progressBar.style.width = '0%' + + var interval = setInterval(function() { + if (width >= 100) + clearInterval(interval); + else { + width += increment; + progressBar.style.width = width + '%'; + } + }, intervalTime); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..024595a 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,83 @@ +.logo img { + max-width: 100%; + max-height: 100%; + transform: scale(1.5); + transform-origin: center; +} + +.logo { + width: 100px; + height: 100px; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + background-color: #FFF; + margin: 10px; + border: 1px solid #000; +} + +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + backdrop-filter: blur(2px); +} + +.modal-window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background: white; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + z-index: 1000; + display: block; +} + +.hidden { + display: none; +} + +.close-modal { + position: absolute; + top: 10px; + right: 10px; + border: none; + background: none; + font-size: 24px; + cursor: pointer; +} + +.progress-bar-container { + width: 100%; + background-color: #ccc; + padding: 10px 0; + position: relative; + color: black; + text-align: center; +} + +.progress-bar { + height: 20px; + background-color: red; + width: 0%; + position: relative; +} + +.progress-text { + position: absolute; + width: 100%; + top: 10px; + left: 0; + color: white; + mix-blend-mode: difference; +} \ No newline at end of file