From 838df1ceb267b3257f19672289833b15edd1506c Mon Sep 17 00:00:00 2001 From: Pirantel Date: Sat, 4 May 2024 00:22:42 +0500 Subject: [PATCH 1/6] 1 --- index.html | 3 ++- styles.css | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..c9fa1a4 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,8 @@ - + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..326721c 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,11 @@ +img { + width: 100px; +} + +.logo { + border: 1px solid black; + overflow: hidden; + width: 100px; + height: 100px; + margin: 10px; +} \ No newline at end of file From 1d575fc608b9699ec64c2da190bcca697fc8efb8 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Sat, 4 May 2024 00:38:22 +0500 Subject: [PATCH 2/6] 2 --- index.html | 8 ++++++++ index.js | 11 ++++------- styles.css | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 48 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c9fa1a4..1ce81a9 100644 --- a/index.html +++ b/index.html @@ -9,5 +9,13 @@ +
+
+

HELLO

+ +

hi

+
+
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..c7ba095 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,4 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function hide() { + document.querySelector('.lightbox');.style.display = 'none'; + document.querySelector('.blur').style.display = 'none'; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 326721c..69eac25 100644 --- a/styles.css +++ b/styles.css @@ -8,4 +8,40 @@ img { width: 100px; height: 100px; margin: 10px; +} + +.lightbox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.lightbox-content { + position: relative; + width: 640px; + max-height: 80%; + overflow: auto; + margin: 10% auto; + background: aliceblue; + padding: 10px; + z-index: 10; +} + +.blur { + position: fixed; + top: 0; + left: 0; + z-index: 9; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(5px); +} + +.exit { + position: absolute; + top: 10px; + right: 10px; } \ No newline at end of file From 988156a015dc5895875b2d14ab80f6f24484346d Mon Sep 17 00:00:00 2001 From: Pirantel Date: Sat, 4 May 2024 00:38:51 +0500 Subject: [PATCH 3/6] oops --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index c7ba095..f06e97e 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ function hide() { - document.querySelector('.lightbox');.style.display = 'none'; + document.querySelector('.lightbox').style.display = 'none'; document.querySelector('.blur').style.display = 'none'; } \ No newline at end of file From 615fb56e4775d134feff33b6430747bc044ce74a Mon Sep 17 00:00:00 2001 From: Pirantel Date: Sat, 4 May 2024 00:45:20 +0500 Subject: [PATCH 4/6] fixed modal --- index.html | 4 ++++ styles.css | 29 +++++++++++++++++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 1ce81a9..cc99cdf 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,10 @@

HELLO

+
+
+
Loading...
+

hi

diff --git a/styles.css b/styles.css index 69eac25..c482ed1 100644 --- a/styles.css +++ b/styles.css @@ -11,11 +11,15 @@ img { } .lightbox { - position: absolute; + display: flex; + position: fixed; + justify-content: center; + align-items: center; top: 0; left: 0; width: 100%; height: 100%; + z-index: 10; } .lightbox-content { @@ -26,7 +30,6 @@ img { margin: 10% auto; background: aliceblue; padding: 10px; - z-index: 10; } .blur { @@ -44,4 +47,26 @@ img { position: absolute; top: 10px; right: 10px; +} + +.progress-bar { + width: 300px; + height: 50px; + background-color: gray; + position: relative; + text-align: center; +} + +.progress { + width: 50%; + height: 100%; + background-color: red; +} + +.loader { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; } \ No newline at end of file From 251f9a0d71524f1b707af0a8ef28173b71f43c79 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Sat, 4 May 2024 19:05:33 +0500 Subject: [PATCH 5/6] 3-4 --- index.html | 1 - index.js | 26 +++++++++++++++++++++++++- styles.css | 31 +++++++++++++++++++------------ 3 files changed, 44 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index cc99cdf..0fc86eb 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,6 @@

HELLO

-
Loading...

hi

diff --git a/index.js b/index.js index f06e97e..695eb0f 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,28 @@ + +document.addEventListener('DOMContentLoaded', () => { + const progressBar = document.querySelector('.progress'); + fillProgressBar(3000, progressBar); +}); + function hide() { document.querySelector('.lightbox').style.display = 'none'; document.querySelector('.blur').style.display = 'none'; -} \ No newline at end of file +} + +function fillProgressBar(duration, progressBar) { + let startTime = null; + + function animate(timestamp) { + if (!startTime) { + startTime = timestamp; + } + const progress = timestamp - startTime; + const percentage = Math.min(progress / duration * 100, 100); + progressBar.style.width = percentage + '%'; + + if (progress < duration) { + requestAnimationFrame(animate); + } + } + requestAnimationFrame(animate); +} diff --git a/styles.css b/styles.css index c482ed1..bab04f3 100644 --- a/styles.css +++ b/styles.css @@ -50,23 +50,30 @@ img { } .progress-bar { - width: 300px; - height: 50px; background-color: gray; + width: 100%; + height: 40px; position: relative; - text-align: center; } -.progress { - width: 50%; - height: 100%; - background-color: red; +.progress-bar::before, .progress::before { + content: "Loading..."; + font-size: 24px; + color: white; + position: absolute; + left: 320px; + top: 20px; + transform: translate(-50%, -50%); } -.loader { +.progress-bar::before { + color: black; +} + +.progress { position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; + font-size: 24px; + background-color: red; + height: 100%; + overflow: hidden; } \ No newline at end of file From 59915f4abb7c6b70610543cb74c1b759ceb5adf7 Mon Sep 17 00:00:00 2001 From: Pirantel Date: Sat, 4 May 2024 19:12:40 +0500 Subject: [PATCH 6/6] 5 --- index.html | 37 ++++++++++++++++++++++++++++++++++++- styles.css | 8 ++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 0fc86eb..b0269fb 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,43 @@

HELLO

+
+
+ + +

+ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa + aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa +

+
+
+ + +

+ bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb + bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb +

+
+
+ + +

+ ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc + ccccccccccccccccccccccccccccccccc +

-

hi

diff --git a/styles.css b/styles.css index bab04f3..67f08a6 100644 --- a/styles.css +++ b/styles.css @@ -76,4 +76,12 @@ img { background-color: red; height: 100%; overflow: hidden; +} + +input[type='checkbox'] + p { + display: none; +} + +input[type='checkbox']:checked + p { + display: block; } \ No newline at end of file