From c1ade8aa972d9a5fb7f3159c115bae6c11bcc8ac Mon Sep 17 00:00:00 2001 From: anuri1 Date: Tue, 7 Apr 2026 19:25:15 +0500 Subject: [PATCH 1/4] task 1 --- index.html | 15 ++++++++++++++- index.js | 22 +++++++++++++++++++++- styles.css | 31 +++++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..8a05c9d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,20 @@ - + +
+
+ +

+ dasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdas + dasdasdasdasdasdasdsdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdas + +

+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..e493187 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,24 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const modal = document.getElementById('window'); +const overlay = document.getElementById('overlay'); +const btn = document.getElementById('open-modal'); +const close = document.querySelector('.close'); + +btn.onclick = function() { + modal.style.display = 'block'; + overlay.style.display = 'block'; +}; + +close.onclick = function() { + modal.style.display = 'none'; + overlay.style.display = 'none'; +}; + +overlay.onclick = function() { + modal.style.display = 'none'; + overlay.style.display = 'none'; +}; diff --git a/styles.css b/styles.css index e69de29..8f0b5fe 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,31 @@ +#window { + display: none; + z-index: 1; + width: 640px; + background-color: white; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px solid; +} + +.close { + display: block; + margin: 5px; +} + +.content { + margin: 10px; +} + +#overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 0; +} From 2e082dd5ade2366dde176adec695856fcc15c482 Mon Sep 17 00:00:00 2001 From: Aleksundraaa Date: Tue, 7 Apr 2026 19:41:52 +0500 Subject: [PATCH 2/4] =?UTF-8?q?=D0=BD=D0=BE=D0=BC=D0=B5=D1=80=D0=B0=203-4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/.gitignore | 10 ++++++++++ index.html | 18 +++++++++++++++-- index.js | 19 +++++++++++++++++- styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 94 insertions(+), 3 deletions(-) create mode 100644 .idea/.gitignore diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/index.html b/index.html index 846cf93..09322d0 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,21 @@ - - + + +
+
+
+ Loading... +
+
+
+ Loading... +
+
+
+
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..eeda6b2 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,21 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +const progressFill = document.querySelector('.progress-fill'); + +let currentProgress = 0; +const duration = 3000; +const updateTime = 20; +const steps = duration / updateTime; +const incProcent = 100 / steps; + +const timer = setInterval(() => { + currentProgress += incProcent; + progressFill.style.width = `${currentProgress}%`; + + if (currentProgress >= 100) { + progressFill.style.width = `100%`; + clearInterval(timer); + } +}, updateTime); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..fbb1fd1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,50 @@ +/*#3*/ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + background-color: #eee; +} + +.progress-wrapper { + position: relative; + width: 500px; + height: 50px; + font-family: Arial, sans-serif; + font-size: 24px; +} + +.progress-layer { + position: absolute; + top: 0; + left: 0; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.progress-bg { + width: 100%; + background-color: #434343; + color: #000000; +} + +.progress-fill { + width: 70%; + z-index: 2; + background-color: #df0000; + overflow: hidden; + justify-content: flex-start; +} + +.text-white-container { + color: white; + width: 500px; + text-align: center; + flex-shrink: 0; +} \ No newline at end of file From 5568b2ea7ca4d4ceab5288ccf054cdd251cc8a79 Mon Sep 17 00:00:00 2001 From: anuri1 Date: Tue, 7 Apr 2026 19:48:22 +0500 Subject: [PATCH 3/4] task 2 --- index.html | 9 +++++++++ styles.css | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) diff --git a/index.html b/index.html index 8a05c9d..f3c40a3 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,15 @@ +
+
+
+
+
+
+ diff --git a/styles.css b/styles.css index 8f0b5fe..3e094b2 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,42 @@ +.logo-microsoft { + width: 100px; + height: 100px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px; + padding: 4px; + box-sizing: border-box; +} + +.jp-flag { + width: 100px; + height: 100px; +} + +.red-circle { + position: relative; + background-color: red; + border-radius: 50%; + width: 30%; + height: 30%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.ms-red { + background-color: #F25022; +} +.ms-green { + background-color: #7FBA00; +} +.ms-blue { + background-color: #00A4EF; +} +.ms-yellow { + background-color: #FFB900; +} + #window { display: none; z-index: 1; From 700897677a8737a8326568a6274363d74a0d453a Mon Sep 17 00:00:00 2001 From: anuri1 Date: Tue, 7 Apr 2026 20:15:49 +0500 Subject: [PATCH 4/4] fix bugs --- index.html | 1 - styles.css | 7 +++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 8af5549..735326e 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,6 @@ -
diff --git a/styles.css b/styles.css index 6752276..aee97ab 100644 --- a/styles.css +++ b/styles.css @@ -1,13 +1,11 @@ /*#3*/ .modal-overlay { - position: fixed; + display: flex; top: 0; left: 0; width: 100%; height: 100%; - justify-content: center; - align-items: center; - background-color: #eee; + background-color: white; } .progress-wrapper { @@ -33,6 +31,7 @@ background-color: #434343; color: #000000; } + .logo-microsoft { width: 100px; height: 100px;