From bf30fd579ba29a7fb0836fe53e34e05cdfde7482 Mon Sep 17 00:00:00 2001 From: Tarakanoed Date: Tue, 2 Apr 2024 17:33:23 +0500 Subject: [PATCH 1/5] 1 --- .idea/.gitignore | 5 +++++ .idea/modules.xml | 8 ++++++++ .idea/positioning1.iml | 12 ++++++++++++ .idea/vcs.xml | 6 ++++++ index.html | 2 ++ styles.css | 12 ++++++++++++ 6 files changed, 45 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/positioning1.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..93e1d5e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning1.iml b/.idea/positioning1.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/positioning1.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..e7dfe92 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..d20eb67 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,12 @@ +.logo { + width: 100px; + height: 100px; + overflow: hidden; + margin: 10px; + border: blue 5px solid; +} + +.logo img { + width: 100%; + height: auto; +} \ No newline at end of file From 80e5880a4165cdc01c230d5cc9628f03c6d161df Mon Sep 17 00:00:00 2001 From: IlyaTucha Date: Tue, 2 Apr 2024 17:47:18 +0500 Subject: [PATCH 2/5] second ex --- index.html | 8 ++++++++ index.js | 10 +++++++++- styles.css | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..bb18116 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,14 @@ +
+ +
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..fe59e86 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,12 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + + +const modal = document.getElementById("myModal"); +const closeBtn = document.querySelector(".close"); + +closeBtn.onclick = function() { + modal.style.display = "none"; +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..3ec41e0 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,35 @@ +.modal { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 640px; + height: auto; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + cursor: pointer; +} \ No newline at end of file From 218284827f4e754628fb0be33528731def4e3642 Mon Sep 17 00:00:00 2001 From: Tarakanoed Date: Tue, 2 Apr 2024 17:54:54 +0500 Subject: [PATCH 3/5] 3 --- index.html | 7 +++++++ styles.css | 24 +++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 986641d..fdc1e68 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,18 @@
×

Модальное окно...

+
+
+
Loading...
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css index 80b8dd9..d9ac71e 100644 --- a/styles.css +++ b/styles.css @@ -43,4 +43,26 @@ .logo img { width: 100%; height: auto; -} \ No newline at end of file +} + +.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; +} + From 9f7055ed396fb9e2d83d416b903c58a395f7ce99 Mon Sep 17 00:00:00 2001 From: IlyaTucha Date: Tue, 2 Apr 2024 18:43:24 +0500 Subject: [PATCH 4/5] 4 dynamic progress bar --- index.js | 24 +++++++++++++++++++++++- styles.css | 2 +- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index fe59e86..f6fd57c 100644 --- a/index.js +++ b/index.js @@ -12,4 +12,26 @@ const closeBtn = document.querySelector(".close"); closeBtn.onclick = function() { modal.style.display = "none"; -} \ No newline at end of file +} + +const progressBar = document.querySelector('.progress'); + +function fillProgressBar(duration) { + 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); +} + +fillProgressBar(3000); diff --git a/styles.css b/styles.css index d9ac71e..fd7ac18 100644 --- a/styles.css +++ b/styles.css @@ -63,6 +63,6 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - color: white; + font-size: 24px; } From 83693f22c36e33c4e054f5dbf53942ee3945a9cb Mon Sep 17 00:00:00 2001 From: Tarakanoed Date: Tue, 2 Apr 2024 18:52:55 +0500 Subject: [PATCH 5/5] 1-4 --- index.html | 9 +++++---- styles.css | 35 ++++++++++++++++++++++------------- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index fdc1e68..608027a 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,11 @@
×

Модальное окно...

-
-
-
Loading...
-
+ +
+
+
+
diff --git a/styles.css b/styles.css index fd7ac18..35146af 100644 --- a/styles.css +++ b/styles.css @@ -45,24 +45,33 @@ height: auto; } -.progress-bar { - width: 300px; - height: 50px; + + +.bar { background-color: gray; + width: 100%; + height: 30px; position: relative; - text-align: center; } -.progress { - width: 50%; - height: 100%; - background-color: red; -} -.loader { +.bar::before, .progress::before { + content: "Loading..."; + font-size: 25px; + color: white; position: absolute; - top: 50%; - left: 50%; + left: 325px; + top: 15px; transform: translate(-50%, -50%); - font-size: 24px; } +.bar::before { + color: black; +} + +.progress { + position: absolute; + font-size: 24px; + background-color: red; + height: 100%; + overflow: hidden; +}