From 25f60ec0dd277fa504db73d287ca7a71207ac898 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 18:58:16 +0500 Subject: [PATCH 01/10] task1 --- index.html | 2 +- styles.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..540a36c 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..9cde119 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,4 @@ +#logo { + width: 100px; + height: 100px; +} \ No newline at end of file From bb1e786cb48c98f620eaf8b0eadebffa86adeec5 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 18:59:59 +0500 Subject: [PATCH 02/10] fix1 --- index.html | 3 ++- styles.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 540a36c..5426d80 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 9cde119..3d93ad8 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,4 @@ -#logo { +.logo { width: 100px; height: 100px; } \ No newline at end of file From 3d53cbe2c9de6a6570df5bb27685dc23ed496ccc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D0=BE=D1=84=D0=B5=D0=B9=20=D0=94=D0=BC?= =?UTF-8?q?=D0=B8=D1=82=D1=80=D0=B8=D0=B5=D0=B2=D0=B8=D1=87=20=D0=A8=D0=B8?= =?UTF-8?q?=D0=BD=D0=BA=D0=B0=D1=80=D0=B5=D0=BD=D0=BA=D0=BE?= Date: Tue, 7 Apr 2026 19:04:13 +0500 Subject: [PATCH 03/10] 2 --- .idea/.gitignore | 10 +++ .idea/goodsoul-shinkarenko-positioning.iml | 8 +++ .idea/modules.xml | 8 +++ .idea/vcs.xml | 6 ++ index.html | 22 ++++++- index.js | 13 +++- styles.css | 77 +++++++++++++++++++++- 7 files changed, 138 insertions(+), 6 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/goodsoul-shinkarenko-positioning.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /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/goodsoul-shinkarenko-positioning.iml b/.idea/goodsoul-shinkarenko-positioning.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/goodsoul-shinkarenko-positioning.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..a91f303 --- /dev/null +++ b/.idea/modules.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 540a36c..ee8250c 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,28 @@ - + Практика позиционирования - - + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..ea56f04 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 openModalBtn = document.getElementById('openModalBtn'); +const closeModalBtn = document.getElementById('closeModalBtn'); +const overlay = document.getElementById('overlay'); + +openModalBtn.addEventListener('click', () => { + overlay.classList.remove('hidden'); +}); + +closeModalBtn.addEventListener('click', () => { + overlay.classList.add('hidden'); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 9cde119..57bb3eb 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,77 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, sans-serif; + min-height: 100vh; + padding: 40px; +} + #logo { - width: 100px; - height: 100px; + display: block; + margin-bottom: 30px; +} + +.open-btn { + padding: 12px 20px; + font-size: 16px; + border: none; + border-radius: 8px; + background-color: #2f80ed; + color: #fff; + cursor: pointer; +} + +.open-btn:hover { + background-color: #1366d6; +} + +.overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.hidden { + display: none; +} + +.modal { + position: relative; + width: 640px; + max-width: calc(100% - 40px); + background-color: #fff; + border-radius: 12px; + padding: 32px 24px 24px; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); +} + +.close-btn { + position: absolute; + top: 12px; + right: 12px; + width: 32px; + height: 32px; + border: none; + background: transparent; + font-size: 28px; + line-height: 1; + cursor: pointer; +} + +.modal-title { + margin: 0 0 16px; + font-size: 28px; +} + +.modal-text { + margin: 0; + font-size: 16px; + line-height: 1.5; } \ No newline at end of file From b2ed651236e7aac72af7bd1f78c94f1654e282e0 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 19:08:17 +0500 Subject: [PATCH 04/10] fix2.1 --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5426d80..632d473 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + \ No newline at end of file From 1ef847189744a1e2061c7b46ec7ec37f56f41a78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A2=D0=B8=D0=BC=D0=BE=D1=84=D0=B5=D0=B9=20=D0=94=D0=BC?= =?UTF-8?q?=D0=B8=D1=82=D1=80=D0=B8=D0=B5=D0=B2=D0=B8=D1=87=20=D0=A8=D0=B8?= =?UTF-8?q?=D0=BD=D0=BA=D0=B0=D1=80=D0=B5=D0=BD=D0=BA=D0=BE?= Date: Tue, 7 Apr 2026 19:12:14 +0500 Subject: [PATCH 05/10] 3 --- index.html | 25 ++++++++++++++-------- index.js | 17 ++++++++------- styles.css | 61 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 78 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 467ada0..c874f10 100644 --- a/index.html +++ b/index.html @@ -1,28 +1,35 @@ - + Практика позиционирования - - - - + + diff --git a/index.js b/index.js index ea56f04..20e8c5c 100644 --- a/index.js +++ b/index.js @@ -1,18 +1,19 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ const openModalBtn = document.getElementById('openModalBtn'); const closeModalBtn = document.getElementById('closeModalBtn'); const overlay = document.getElementById('overlay'); +const progressFill = document.getElementById('progressFill'); +const progressTextWhite = document.getElementById('progressTextWhite'); + openModalBtn.addEventListener('click', () => { overlay.classList.remove('hidden'); }); closeModalBtn.addEventListener('click', () => { overlay.classList.add('hidden'); -}); \ No newline at end of file +}); + +const progress = 45; + +progressFill.style.width = progress + '%'; +progressTextWhite.style.width = progress + '%'; \ No newline at end of file diff --git a/styles.css b/styles.css index e6606a6..a37a226 100644 --- a/styles.css +++ b/styles.css @@ -1,7 +1,3 @@ -.logo { - width: 100px; - height: 100px; -} * { box-sizing: border-box; } @@ -13,9 +9,12 @@ body { padding: 40px; } -#logo { - display: block; - margin-bottom: 30px; +.logo { + width: 100px; + height: 100px; + display: inline-block; + margin-right: 12px; + margin-bottom: 20px; } .open-btn { @@ -75,7 +74,53 @@ body { } .modal-text { - margin: 0; + margin: 0 0 20px; font-size: 16px; line-height: 1.5; +} + +.progress-bar { + position: relative; + width: 100%; + height: 44px; + background-color: #cfcfcf; + border-radius: 10px; + overflow: hidden; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + width: 45%; + height: 100%; + background-color: #e53935; + z-index: 1; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 18px; + font-weight: 700; + white-space: nowrap; + pointer-events: none; +} + +.progress-text-black { + color: #000; + z-index: 2; +} + +.progress-text-white { + color: #fff; + z-index: 3; + width: 45%; + height: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; } \ No newline at end of file From a623c9d413e90eae13abfd6a095918d5b6c50769 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 19:16:11 +0500 Subject: [PATCH 06/10] windows logo --- index.html | 10 ++++++---- styles.css | 15 ++++++++++++++- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 467ada0..4525d2e 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,12 @@ - - - - +
+
+
+
+
+
diff --git a/styles.css b/styles.css index e6606a6..ba290c2 100644 --- a/styles.css +++ b/styles.css @@ -1,7 +1,20 @@ -.logo { +.image-container { width: 100px; height: 100px; } + +.windows-image { + width: 100px; + height: 100px; + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; +} + +.windows-square { + +} + * { box-sizing: border-box; } From 2abc6df0ef480ce0298bd0b0ad4d5337639a5d08 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 19:25:42 +0500 Subject: [PATCH 07/10] task1 finally --- index.html | 16 +++++++++++----- styles.css | 19 +++++++++++++------ 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index bdd81b4..3f18474 100644 --- a/index.html +++ b/index.html @@ -6,11 +6,17 @@ -
-
-
-
-
+
+
+
+
+
+
+
+
+ +
+
diff --git a/styles.css b/styles.css index 3f0ab9f..6c4715d 100644 --- a/styles.css +++ b/styles.css @@ -1,18 +1,25 @@ .image-container { width: 100px; height: 100px; + padding: 20px; + display: flex; + align-items: center; + justify-content: center; } .windows-image { - width: 100px; - height: 100px; + width: 60px; + height: 60px; display: grid; - grid-template-columns: 50px 50px; - grid-template-rows: 50px 50px; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; } -.windows-square { - +.japan { + background-color: red; + border-radius: 50%; + width: 30px; + height: 30px; } * { From b072cea5f559482eec95f3d3b3991aef063b5890 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 19:33:37 +0500 Subject: [PATCH 08/10] task4 --- index.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 20e8c5c..06c846c 100644 --- a/index.js +++ b/index.js @@ -5,15 +5,26 @@ const overlay = document.getElementById('overlay'); const progressFill = document.getElementById('progressFill'); const progressTextWhite = document.getElementById('progressTextWhite'); +let currentStep = 0; +const seconds = 3; +const totalSteps = 60 * seconds; + openModalBtn.addEventListener('click', () => { overlay.classList.remove('hidden'); + const interval = setInterval(() => { + currentStep++; + const progress = (currentStep / totalSteps) * 100; + + progressFill.style.width = progress + '%'; + progressTextWhite.style.width = progress + '%'; + + if (currentStep >= totalSteps) { + clearInterval(interval); + } + }, 1000 / 60); }); closeModalBtn.addEventListener('click', () => { overlay.classList.add('hidden'); -}); - -const progress = 45; - -progressFill.style.width = progress + '%'; -progressTextWhite.style.width = progress + '%'; \ No newline at end of file + currentStep = 0; +}); \ No newline at end of file From 25fa8fdb2126ab6d4480b695c596b5344ec22214 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 19:51:16 +0500 Subject: [PATCH 09/10] task5 --- index.html | 14 ++++++++++++++ index.js | 15 +++++++++++++-- styles.css | 9 +++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3f18474..27e9611 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,20 @@

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

+
+
→ section1
+ +
+ +
+
→ section2
+ +
+ \ No newline at end of file diff --git a/index.js b/index.js index 06c846c..e570a69 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,8 @@ const overlay = document.getElementById('overlay'); const progressFill = document.getElementById('progressFill'); const progressTextWhite = document.getElementById('progressTextWhite'); - +const accordeonHeads = document.getElementsByClassName("accordeon-head") +const accordeonOpened = new Array(accordeonHeads.length).fill(false); let currentStep = 0; const seconds = 3; const totalSteps = 60 * seconds; @@ -27,4 +28,14 @@ openModalBtn.addEventListener('click', () => { closeModalBtn.addEventListener('click', () => { overlay.classList.add('hidden'); currentStep = 0; -}); \ No newline at end of file +}); + +for (let i = 0; i < accordeonHeads.length; i++) { + const accordeonHead = accordeonHeads[i] + accordeonHead.addEventListener("click", (event) => { + const nextEl = accordeonHead.nextElementSibling; + accordeonOpened[i] = ! accordeonOpened[i]; + nextEl.style.display = accordeonOpened[i] ? "" : "none"; + accordeonHead.textContent = accordeonOpened[i] ? "↓" : "→" + accordeonHead.textContent + }) +} \ No newline at end of file diff --git a/styles.css b/styles.css index 6c4715d..f834df2 100644 --- a/styles.css +++ b/styles.css @@ -147,4 +147,13 @@ body { display: flex; align-items: center; justify-content: center; +} + +.accordeon { + border-radius: 10px; + border: 1px solid black; +} + +.accordeon-head { + cursor: pointer; } \ No newline at end of file From f94072b3bb251177eef1ffe3ba466612dad21ca5 Mon Sep 17 00:00:00 2001 From: Andrew Goodman Date: Tue, 7 Apr 2026 19:56:30 +0500 Subject: [PATCH 10/10] task5_final --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index e570a69..1c2aea7 100644 --- a/index.js +++ b/index.js @@ -36,6 +36,6 @@ for (let i = 0; i < accordeonHeads.length; i++) { const nextEl = accordeonHead.nextElementSibling; accordeonOpened[i] = ! accordeonOpened[i]; nextEl.style.display = accordeonOpened[i] ? "" : "none"; - accordeonHead.textContent = accordeonOpened[i] ? "↓" : "→" + accordeonHead.textContent + accordeonHead.textContent = (accordeonOpened[i] ? "↓" : "→") + accordeonHead.textContent.substring(1); }) } \ No newline at end of file