From ff46e239f19b82e14185bc1f1e54b575cbc92e1a Mon Sep 17 00:00:00 2001 From: volodout Date: Tue, 8 Apr 2025 15:47:48 +0500 Subject: [PATCH 1/7] task 1 --- index.html | 16 ++++++++++++++-- styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..12b0d50 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,19 @@ - - + +
+
+
+
+
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..b3b5786 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,50 @@ +.windows { + display: flex; + flex-wrap: wrap; + width: 100px; + height: 100px; + border: 5px black solid; + margin: 5px; +} + +.windows .square { + width: calc(50% - 4px); + height: calc(50% - 4px); + margin: 2px; +} + +.windows .square1 { + background: rgb(241, 81, 27); +} + +.windows .square2 { + background: rgb(128, 204, 40); +} + +.windows .square3 { + background: rgb(0, 173, 239); +} + +.windows .square4 { + background: rgb(251, 188, 9); +} + +.flag { + margin: 5px; + width: 100px; + height: 100px; + background-color: white; + border: 5px solid black; + position: relative; +} + +.flag::after { + content: ''; + position: absolute; + top: 25%; + left: 25%; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #BF0C22FF; +} \ No newline at end of file From 56017b75a4237ad78b1afcce818e5d4712886992 Mon Sep 17 00:00:00 2001 From: mzukov Date: Tue, 8 Apr 2025 15:50:31 +0500 Subject: [PATCH 2/7] 2 --- .idea/.gitignore | 8 ++++++++ .idea/modules.xml | 8 ++++++++ .idea/positioning.iml | 12 ++++++++++++ .idea/vcs.xml | 6 ++++++ index.html | 12 +++++++++++- styles.css | 40 +++++++++++++++++++++++++++++++++++++++- 6 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/positioning.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67fa43d --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning.iml b/.idea/positioning.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/positioning.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 12b0d50..9225b43 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,20 @@
-
+
+
+
+ +

Привет!

+

+ Абоба! +

+
+
+ diff --git a/styles.css b/styles.css index b3b5786..648401e 100644 --- a/styles.css +++ b/styles.css @@ -47,4 +47,42 @@ height: 50px; border-radius: 50%; background-color: #BF0C22FF; -} \ No newline at end of file +} + +.overlay { + position: absolute; + left: 0; + top: 0; + background-color: rgba(150, 150, 150, 0.8); + width: 100%; + height: 100%; +} + +.lightbox { + box-sizing: border-box; + background-color: white; + border: 1px solid black; + position: fixed; + top: 35%; + left: calc(50% - 320px); + width: 640px; + padding: 20px; +} + +.lightbox .closeButton { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + position: absolute; + top: 0; + left: 92.1%; + z-index: 1; +} + +.lightbox .closeButton:hover { + background-color: red; + color: aliceblue; + cursor: pointer; +} From 0b77a326be8e338b3f64838778368e84b0f564aa Mon Sep 17 00:00:00 2001 From: volodout Date: Tue, 8 Apr 2025 15:52:25 +0500 Subject: [PATCH 3/7] 0 --- .idea/.gitignore | 8 ++++++++ .idea/modules.xml | 8 ++++++++ .idea/positioning.iml | 12 ++++++++++++ .idea/vcs.xml | 6 ++++++ 4 files changed, 34 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/positioning.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67fa43d --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning.iml b/.idea/positioning.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/positioning.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 From 3187e4357cf4a4555b30fd2c4f881b53fddeaf26 Mon Sep 17 00:00:00 2001 From: volodout Date: Tue, 8 Apr 2025 15:54:26 +0500 Subject: [PATCH 4/7] 3 --- index.html | 5 ++++- styles.css | 32 ++++++++++++++++++++++++++++++-- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9225b43..4ea9395 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-
+
@@ -25,6 +25,9 @@

Привет!

Абоба!

+
+
+
diff --git a/styles.css b/styles.css index 648401e..b35b034 100644 --- a/styles.css +++ b/styles.css @@ -53,7 +53,7 @@ position: absolute; left: 0; top: 0; - background-color: rgba(150, 150, 150, 0.8); + background-color: rgba(85, 84, 84, 0.8); width: 100%; height: 100%; } @@ -63,7 +63,7 @@ background-color: white; border: 1px solid black; position: fixed; - top: 35%; + top: 40%; left: calc(50% - 320px); width: 640px; padding: 20px; @@ -86,3 +86,31 @@ color: aliceblue; cursor: pointer; } + +.bar { + background-color: gray; + width: 600px; + height: 30px; + position: relative; + margin: 20px auto; +} + +.bar::before, .progress::before { + content: "Loading..."; + color: white; + position: absolute; + left: 300px; + top: 15px; + transform: translate(-50%, -50%); +} + +.progress { + position: absolute; + background-color: red; + height: 100%; + z-index: 1; +} + +.bar::before { + color: black; +} \ No newline at end of file From 55ccadaafb90f62c660dbcbc9942bba4524b1e9d Mon Sep 17 00:00:00 2001 From: mzukov Date: Tue, 8 Apr 2025 15:59:35 +0500 Subject: [PATCH 5/7] 4 --- index.js | 24 +++++++++++++++++++++++- styles.css | 1 + 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index dd50919..81b1867 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,26 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +function animateProgressBar() { + const progressBar = document.querySelector('.bar'); + + let progress = 0; + const interval = setInterval(() => { + if (progress < 100) { + progress++; + progressBar.firstElementChild.style.width = `${progress}%`; + } else { + clearInterval(interval); + } + }, 30); + + progressBar.firstElementChild.style.width = '100%'; + + setTimeout(() => { + clearInterval(interval); + }, 3000); +} + +animateProgressBar(); \ No newline at end of file diff --git a/styles.css b/styles.css index b35b034..0e942bb 100644 --- a/styles.css +++ b/styles.css @@ -109,6 +109,7 @@ background-color: red; height: 100%; z-index: 1; + overflow: hidden; } .bar::before { From 5f133a30b6fe3e0f1eb66985ff661d6a1b4ce45d Mon Sep 17 00:00:00 2001 From: volodout Date: Tue, 8 Apr 2025 16:08:32 +0500 Subject: [PATCH 6/7] 5 done --- index.html | 23 ++++++++++++++++++++++- index.js | 40 ++++++++++++++++++++++++++-------------- styles.css | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 4ea9395..026d480 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
-
+
@@ -31,6 +31,27 @@

Привет!

+
+ + +
+

Контент1

+
+ + + +
+

Контент2

+
+ + + +
+

Контент3

+
+
+ + diff --git a/index.js b/index.js index 81b1867..88504f9 100644 --- a/index.js +++ b/index.js @@ -1,29 +1,41 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ - +// Анимация прогресс-бара function animateProgressBar() { - const progressBar = document.querySelector('.bar'); - + const progressBar = document.querySelector('.progress'); let progress = 0; + const interval = setInterval(() => { if (progress < 100) { progress++; - progressBar.firstElementChild.style.width = `${progress}%`; + progressBar.style.width = `${progress}%`; } else { clearInterval(interval); } }, 30); - progressBar.firstElementChild.style.width = '100%'; - setTimeout(() => { clearInterval(interval); }, 3000); } -animateProgressBar(); \ No newline at end of file +// Закрытие lightbox +function setupLightboxClose() { + const closeButton = document.querySelector('.closeButton'); + const overlay = document.querySelector('.overlay'); + + closeButton.addEventListener('click', () => { + overlay.style.display = 'none'; + }); + + // Опционально: закрытие по клику вне окна + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.style.display = 'none'; + } + }); +} + +// Инициализация всех функций +document.addEventListener('DOMContentLoaded', () => { + animateProgressBar(); + setupLightboxClose(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 0e942bb..572bfbb 100644 --- a/styles.css +++ b/styles.css @@ -114,4 +114,38 @@ .bar::before { color: black; +} + + +.accordeon{ + display: flex; + flex-direction: column; +} + +label{ + background-color: gray; + margin-bottom: 10px; + padding: 20px 10px; + color: white; + font-size: 48px; +} + +.acc-hidden { + display: none; +} + +.acc-content { + display: none; +} + +.acc-content p { + margin: 10px 0; + background-color: rgba(66, 66, 66, 0.8); + padding: 20px 10px; + color: white; + font-size: 24px; +} + +.acc-hidden:checked + label + .acc-content { + display: block; } \ No newline at end of file From 83827d63114365252ced2eb74807d83623431ceb Mon Sep 17 00:00:00 2001 From: mzukov Date: Tue, 8 Apr 2025 16:10:03 +0500 Subject: [PATCH 7/7] Done --- index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/index.js b/index.js index 88504f9..79eccd6 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ -// Анимация прогресс-бара function animateProgressBar() { const progressBar = document.querySelector('.progress'); let progress = 0; @@ -17,7 +16,6 @@ function animateProgressBar() { }, 3000); } -// Закрытие lightbox function setupLightboxClose() { const closeButton = document.querySelector('.closeButton'); const overlay = document.querySelector('.overlay'); @@ -26,7 +24,6 @@ function setupLightboxClose() { overlay.style.display = 'none'; }); - // Опционально: закрытие по клику вне окна overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.style.display = 'none'; @@ -34,7 +31,6 @@ function setupLightboxClose() { }); } -// Инициализация всех функций document.addEventListener('DOMContentLoaded', () => { animateProgressBar(); setupLightboxClose();