From a2f225d472910ce9d35ccc19db892de7b0453e22 Mon Sep 17 00:00:00 2001 From: ENTHREALM Date: Tue, 7 Apr 2026 17:38:45 +0500 Subject: [PATCH 1/6] logo 1 done --- .idea/.gitignore | 10 ++++++++++ .idea/encodings.xml | 4 ++++ index.html | 10 ++++++++-- styles.css | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/encodings.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..69ab804 --- /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/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..213e57b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,13 @@ - - +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..79d9f61 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,34 @@ +.logo4 { + display: flex; + justify-content: center; + box-sizing: border-box; +} + +.logo4 .outer-circle { + display: flex; + justify-content: center; + height: 100px; + width: 100px; + background-color: crimson; + border-radius: 50%; + align-items: center; +} + +.logo4 .inner-white-part { + display: flex; + justify-content: center; + height: 70px; + width: 70px; + background-color: whitesmoke; + border-radius: 50%; + align-items: center; +} + +.logo4 .center-circle { + height: 40px; + width: 40px; + background-color: crimson; + border-radius: 50%; + align-items: center; +} + From a43b4c66dbc2a997034006bc4604935d3ac5aae8 Mon Sep 17 00:00:00 2001 From: ENTHREALM Date: Tue, 7 Apr 2026 18:11:01 +0500 Subject: [PATCH 2/6] logos done --- index.html | 7 +++++++ index.js | 7 ++++++- styles.css | 19 +++++++++++++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 213e57b..ea7c96a 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,13 @@ +
+
+
+
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..3ad85a3 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,9 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +const blocks = document.querySelectorAll('.logo5 .block'); +document.querySelector('.logo5 .block1').style.backgroundColor = 'red'; +document.querySelector('.logo5 .block2').style.backgroundColor = 'greenyellow'; +document.querySelector('.logo5 .block3').style.backgroundColor = 'deepskyblue'; +document.querySelector('.logo5 .block4').style.backgroundColor = 'yellow'; \ No newline at end of file diff --git a/styles.css b/styles.css index 79d9f61..5efabb1 100644 --- a/styles.css +++ b/styles.css @@ -2,6 +2,9 @@ display: flex; justify-content: center; box-sizing: border-box; + position: absolute; + top: 50px; + right: 150px; } .logo4 .outer-circle { @@ -32,3 +35,19 @@ align-items: center; } +.logo5 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2px; + width: 100px; + position: absolute; + top: 50px; + left: 150px; +} + +.logo5 .block1, +.logo5 .block2, +.logo5 .block3, +.logo5 .block4 { + height: 48px; +} From 17b87bfbd9546423125a3868d3e27efe5e05cb12 Mon Sep 17 00:00:00 2001 From: Range18 Date: Tue, 7 Apr 2026 18:23:04 +0500 Subject: [PATCH 3/6] create progress bar --- index.html | 10 ++++++++++ styles.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+) diff --git a/index.html b/index.html index 213e57b..db313d4 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,16 @@ + +
+
+
+
+
Loading...
+
Loading...
+
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index 79d9f61..03aa695 100644 --- a/styles.css +++ b/styles.css @@ -32,3 +32,58 @@ align-items: center; } + +.progress-container { + width: 100%; + max-width: 400px; + position: relative; +} + +.progress-bar { + background: #f0f0f0; + height: 24px; + overflow: hidden; + position: relative; +} + +.progress-fill { + background: red; + width: 40%; + height: 100%; +} + +.progress-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} + +.progress-label { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 18px; + font-family: Arial, sans-serif; + white-space: nowrap; + margin: 0; + padding: 0; + display: inline-block; +} + +.progress-label-black { + color: black; + z-index: 1; +} + +.progress-label-white { + color: white; + z-index: 2; + overflow: hidden; + white-space: nowrap; + width: 40%; + text-align: center; +} \ No newline at end of file From 7ba2f24ccb1d6ecf1040d3db0283920be540132e Mon Sep 17 00:00:00 2001 From: PAI-Peganov Date: Tue, 7 Apr 2026 18:48:50 +0500 Subject: [PATCH 4/6] pai3 --- .idea/indexLayout.xml | 8 +++++++ .idea/projectSettingsUpdater.xml | 8 +++++++ .idea/vcs.xml | 6 +++++ index.html | 9 ++++++++ index.js | 13 ++++++++++- styles.css | 38 ++++++++++++++++++++++++++++++++ 6 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 .idea/indexLayout.xml create mode 100644 .idea/projectSettingsUpdater.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/indexLayout.xml b/.idea/indexLayout.xml new file mode 100644 index 0000000..7b08163 --- /dev/null +++ b/.idea/indexLayout.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/projectSettingsUpdater.xml b/.idea/projectSettingsUpdater.xml new file mode 100644 index 0000000..ef20cb0 --- /dev/null +++ b/.idea/projectSettingsUpdater.xml @@ -0,0 +1,8 @@ + + + + + \ 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 213e57b..f85bdd0 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,15 @@ + + +
+ +
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..406d04f 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,15 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +const btnClk = document.getElementById("ModalOpenBtn"); +btnClk.addEventListener("click", () => { + const bluer = document.getElementById("blur"); + bluer.style.display = "block"; +}) + +const btnCross = document.getElementById("modal1_cross"); +btnCross.addEventListener("click", () => { + const bluer = document.getElementById("blur"); + bluer.style.display = "none"; +}) \ No newline at end of file diff --git a/styles.css b/styles.css index 79d9f61..2577325 100644 --- a/styles.css +++ b/styles.css @@ -32,3 +32,41 @@ align-items: center; } +.modal_window { + display: flex; + position: fixed; + z-index: 100000; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: 2px solid black; + background-color: white; + width: 640px; + height: min-content; + padding: 20px; +} +.modal_window p { + font-size: 25px; +} +.cross{ + position: absolute; + border: none; + padding: 0; + background-color: transparent; + top: 1px; + right: 1px; + width: 1em; + font-size: 15px; +} +.blur { + display: none; + position: fixed; + top: 0; + left: 0; + z-index: 99999; + box-sizing: border-box; + width: 100vw; + min-height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(10px); +} From 023089ebbdce06990aeb724c3cb6a8ef00562174 Mon Sep 17 00:00:00 2001 From: ENTHREALM Date: Tue, 7 Apr 2026 18:55:13 +0500 Subject: [PATCH 5/6] =?UTF-8?q?=D0=B0=D0=BB=D0=BE=D1=8B=D0=B2=D0=B0=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 45 +++++++++++++++++---- index.js | 36 +++++++++++++---- styles.css | 113 +++++++++++++++++++++++++++++++++++++---------------- 3 files changed, 146 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index f7c46cf..c03914a 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@ + +
@@ -20,16 +22,45 @@
+ +
+
+ +
+
+
+
Loading...
+
Loading...
+
+
-
-
-
-
-
Loading...
-
Loading...
+ +
+
+ + +
+

Содержимое первого раскрывающегося блока. Здесь может быть любой текст, который должен появляться при клике.

+
+
+
+ + +
+

Текст для второго раздела. CSS-свойство :checked позволяет отслеживать выбор этого элемента и применять стили к соседним элементам.

+
+
+
+ + +
+

Третий блок с контентом. Использование radio-кнопок с одинаковым именем позволяет открывать только один блок за раз.

+
+
+ - \ No newline at end of file + diff --git a/index.js b/index.js index 3ad85a3..35e5458 100644 --- a/index.js +++ b/index.js @@ -1,12 +1,32 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ const blocks = document.querySelectorAll('.logo5 .block'); document.querySelector('.logo5 .block1').style.backgroundColor = 'red'; document.querySelector('.logo5 .block2').style.backgroundColor = 'greenyellow'; document.querySelector('.logo5 .block3').style.backgroundColor = 'deepskyblue'; -document.querySelector('.logo5 .block4').style.backgroundColor = 'yellow'; \ No newline at end of file +document.querySelector('.logo5 .block4').style.backgroundColor = 'yellow'; + + +document.addEventListener("DOMContentLoaded", () => { + const fill = document.getElementById("fill"); + const whiteText = document.getElementById("whiteText"); + const duration = 3000; + const frames = 100; + const intervalTime = duration / frames; + + let progress = 0; + + function setProgress(value) { + fill.style.width = value + "%"; + const clipValue = 100 - value; + whiteText.style.clipPath = `inset(0 ${clipValue}% 0 0)`; + } + + const interval = setInterval(() => { + progress++; + if (progress <= 100) { + setProgress(progress); + } + if (progress >= 100) { + clearInterval(interval); + } + }, intervalTime); +}); diff --git a/styles.css b/styles.css index 0aef664..df7de09 100644 --- a/styles.css +++ b/styles.css @@ -4,7 +4,7 @@ box-sizing: border-box; position: absolute; top: 50px; - right: 150px; + left: 300px; } .logo4 .outer-circle { @@ -52,57 +52,104 @@ height: 48px; } -.progress-container { +.modal { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.modal-content-wrapper { + background-color: white; + padding: 30px; + border-radius: 10px; width: 100%; - max-width: 400px; - position: relative; + max-width: 500px; } .progress-bar { - background: #f0f0f0; - height: 24px; - overflow: hidden; position: relative; + width: 100%; + height: 40px; + background: #ccc; + border-radius: 20px; + overflow: hidden; + margin-bottom: 20px; } .progress-fill { - background: red; - width: 40%; + position: absolute; height: 100%; + width: 0; + background: #e31837; + transition: width 0.1s linear; } .progress-text { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.text-black { + color: black; + position: absolute; } -.progress-label { +.text-white { + color: white; position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 18px; + clip-path: inset(0 100% 0 0); + transition: clip-path 0.1s linear; +} + + +.accordion { + width: 100%; font-family: Arial, sans-serif; - white-space: nowrap; - margin: 0; - padding: 0; - display: inline-block; + border-top: 1px solid #ccc; } -.progress-label-black { - color: black; - z-index: 1; +.accordion-item { + border-bottom: 1px solid #ccc; } -.progress-label-white { - color: white; - z-index: 2; +.accordion-input { + display: none; +} + +.accordion-header { + display: block; + padding: 15px; + background-color: #f0f0f0; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s ease; +} + +.accordion-header:hover { + background-color: #e0e0e0; +} + +.accordion-content { + max-height: 0; overflow: hidden; - white-space: nowrap; - width: 40%; - text-align: center; -} \ No newline at end of file + background-color: #fafafa; + padding: 0 15px; + transition: max-height 0.4s ease-out, padding 0.4s ease-out; +} + +.accordion-input:checked + .accordion-header { + background-color: #ddd; +} + +.accordion-input:checked ~ .accordion-content { + max-height: 200px; + padding: 15px; +} From 496e7989bb650a33de307b54f3f04d740c9f5e87 Mon Sep 17 00:00:00 2001 From: Range18 Date: Tue, 7 Apr 2026 19:08:38 +0500 Subject: [PATCH 6/6] finish --- index.html | 21 ++++++--------------- index.js | 5 +++-- styles.css | 1 + 3 files changed, 10 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 19ee4ee..f3a646c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ -
@@ -21,20 +20,7 @@ -
-
-
-
-
-
-
- -
-
-
@@ -43,7 +29,6 @@
-
@@ -69,6 +54,12 @@
+
+
+
+
+
+
diff --git a/index.js b/index.js index a81ec93..bcdabe6 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,6 @@ const btnClk = document.getElementById("ModalOpenBtn"); btnClk.addEventListener("click", () => { + startLoading(); const bluer = document.getElementById("blur"); bluer.style.display = "block"; }) @@ -16,7 +17,7 @@ document.querySelector('.logo5 .block3').style.backgroundColor = 'deepskyblue'; document.querySelector('.logo5 .block4').style.backgroundColor = 'yellow'; -document.addEventListener("DOMContentLoaded", () => { +function startLoading() { const fill = document.getElementById("fill"); const whiteText = document.getElementById("whiteText"); const duration = 3000; @@ -40,4 +41,4 @@ document.addEventListener("DOMContentLoaded", () => { clearInterval(interval); } }, intervalTime); -}); +} diff --git a/styles.css b/styles.css index 537352a..6d898aa 100644 --- a/styles.css +++ b/styles.css @@ -37,6 +37,7 @@ .modal_window { display: flex; + flex-direction: column; position: fixed; z-index: 100000; top: 50%;