From f9abe06d67332ee9de20ef370eef1bd7d0f91204 Mon Sep 17 00:00:00 2001 From: Kirill Date: Tue, 8 Apr 2025 17:57:54 +0500 Subject: [PATCH 1/5] First --- index.html | 2 ++ styles.css | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/index.html b/index.html index 846cf93..09883d1 100644 --- a/index.html +++ b/index.html @@ -8,5 +8,7 @@ + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a1dd801 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,6 @@ +.logo{ + overflow: hidden; + max-width: 100px; + max-height: 100px; + object-fit: contain; +} \ No newline at end of file From 61c24f89c3ca35ce14b10867b4478e155231da6c Mon Sep 17 00:00:00 2001 From: MrBONAN Date: Tue, 8 Apr 2025 18:15:00 +0500 Subject: [PATCH 2/5] =?UTF-8?q?2=20=D0=B7=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20(=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 11 +++++++++++ styles.css | 29 +++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/index.html b/index.html index 09883d1..f1e0795 100644 --- a/index.html +++ b/index.html @@ -10,5 +10,16 @@ +
+
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ +
+
\ No newline at end of file diff --git a/styles.css b/styles.css index a1dd801..05e073e 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,32 @@ +.background_modal{ + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 10; + background-color: rgba(100, 100, 100, 0.5); +} + +.modal_window{ + position: relative; + display:flex; + width: 640px; + background-color: #fff; + padding: 20px; +} + +.modal_close{ + position: absolute; + top: 5px; + right: 5px; + background-color: transparent; + border: none; +} + .logo{ overflow: hidden; max-width: 100px; From 173a626d872326145a617e1ee9bea54d6d8dc0f7 Mon Sep 17 00:00:00 2001 From: Kirill Date: Tue, 8 Apr 2025 18:54:29 +0500 Subject: [PATCH 3/5] Bar1 --- index.html | 11 ++++++++++- styles.css | 33 ++++++++++++++++++++++++++++++++- 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f1e0795..84721b3 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,16 @@ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
Это просто модальное окно. Его можно закрыть, ничего не произойдёт
Это просто модальное окно. Его можно закрыть, ничего не произойдёт
- Это просто модальное окно. Его можно закрыть, ничего не произойдёт
+ Это просто модальное окно. Его можно закрыть, ничего не произойдёт +
+
+ +
+ Loading... +
+ Loading... +
+
diff --git a/styles.css b/styles.css index 05e073e..6674b01 100644 --- a/styles.css +++ b/styles.css @@ -14,6 +14,7 @@ .modal_window{ position: relative; display:flex; + flex-direction: column; width: 640px; background-color: #fff; padding: 20px; @@ -32,4 +33,34 @@ max-width: 100px; max-height: 100px; object-fit: contain; -} \ No newline at end of file +} + +.bar_container { + width: 100%; + height: 30px; +} + +.gray_bar { + background-color: #ccc; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + text-align: center; +} + +.white_text{ + position: absolute; + left: 320px; + text-align: center; + color:white; +} +.red_bar { + background-color: red; + width: 75%; + height: 100%; + position: absolute; + overflow: hidden; + top: 0; + left: 0; +} From e53a0d4b195181615ed296fcde30642e4a6f0eb7 Mon Sep 17 00:00:00 2001 From: Kirill Date: Tue, 8 Apr 2025 19:20:33 +0500 Subject: [PATCH 4/5] Bar2 --- index.html | 7 +++---- styles.css | 19 +++++++++---------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 84721b3..9456175 100644 --- a/index.html +++ b/index.html @@ -20,12 +20,11 @@ Это просто модальное окно. Его можно закрыть, ничего не произойдёт
- -
- Loading... -
Loading...
+
+ Loading... +
diff --git a/styles.css b/styles.css index 6674b01..b15c2d2 100644 --- a/styles.css +++ b/styles.css @@ -49,18 +49,17 @@ text-align: center; } -.white_text{ - position: absolute; - left: 320px; - text-align: center; - color:white; -} .red_bar { background-color: red; - width: 75%; + clip-path: inset(0 90% 0 0); height: 100%; - position: absolute; - overflow: hidden; - top: 0; + position: relative; + overflow: clip; + bottom: 30px; left: 0; } +.white_text{ + color: white; + display: flex; + justify-content: center; +} \ No newline at end of file From 563eab45e591cc33661306bbe0114cb20a0eb53d Mon Sep 17 00:00:00 2001 From: MrBONAN Date: Tue, 8 Apr 2025 19:24:48 +0500 Subject: [PATCH 5/5] =?UTF-8?q?=D0=9F=D1=80=D0=BE=D0=B3=D1=80=D0=B5=D1=81?= =?UTF-8?q?=D1=81=20=D0=BF=D1=80=D0=BE=D0=B3=D1=80=D0=B5=D1=81=D1=81=20?= =?UTF-8?q?=D0=B1=D0=B0=D1=80=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index dd50919..17cce90 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,24 @@ -/* - Изменить элементу цвет и ширину можно вот так: +function setProgress(progress) { + const element = document.querySelector('.red_bar'); + element.style.clipPath = `inset(0 ${100 - progress}% 0 0)`; +} - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function animateProgress(milliseconds) { + const totalTime = 3000 + const progress = Math.min(100, Math.floor(milliseconds / totalTime * 100)); + setProgress(progress); + if (progress >= 100) { + return; + } + requestAnimationFrame(animateProgress); +} + +requestAnimationFrame(animateProgress); +// +// function animateProgress2(totalMilliseconds, time=0){ +// setProgress(Math.floor(time / totalMilliseconds * 100)); +// const deltaTime = 1; +// setTimeout(() => animateProgress2(totalMilliseconds, deltaTime + time), deltaTime); +// } +// +// animateProgress2(3000); \ No newline at end of file