kontur-web-courses · goodsoul-andrew · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/goodsoul-shinkarenko-positioning.iml b/.idea/goodsoul-shinkarenko-positioning.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -1,12 +1,62 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <title>Практика позиционирования</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+<div class="image-container">
+    <div class="windows-image">
+        <div class="windows-square" style="background-color: red;"></div>
+        <div class="windows-square" style="background-color: green;"></div>
+        <div class="windows-square" style="background-color: cyan;"></div>
+        <div class="windows-square" style="background-color: yellow;"></div>
+    </div>
+</div>
+
+<div class="image-container">
+    <div class="japan"></div>
+</div>
+
+<button id="openModalBtn" class="open-btn">Открыть модальное окно</button>
+
+<div id="overlay" class="overlay hidden">
+    <div class="modal">
+        <button
+                id="closeModalBtn"
+                class="close-btn"
+                aria-label="Закрыть модальное окно"
+        >
+            &times;
+        </button>
+
+        <h2 class="modal-title">Модальное окно</h2>
+        <p class="modal-text">Loading progress</p>
+
+        <div class="progress-bar">
+            <div class="progress-fill" id="progressFill"></div>
+
+            <div class="progress-text progress-text-black">Loading...</div>
+            <div class="progress-text progress-text-white" id="progressTextWhite">Loading...</div>
+        </div>
+    </div>
+</div>
+
+<div class="accordeon">
+    <div class="accordeon-head">→ section1</div>
+    <div class="accordeon-content" style="display: none;">
+        dk;o;fhsdhuisdfhvuidfhvudfhvodsfhb
+    </div>
+</div>
+
+<div class="accordeon">
+    <div class="accordeon-head">→ section2</div>
+    <div class="accordeon-content" style="display: none;">
+        dfgiogpidrgjtejgthtrh
+    </div>
+</div>
+
+<script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,41 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+const openModalBtn = document.getElementById('openModalBtn');
+const closeModalBtn = document.getElementById('closeModalBtn');
+const overlay = document.getElementById('overlay');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+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;
+
+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');
+    currentStep = 0;
+});
+
+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.substring(1);
+    })
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,159 @@
+.image-container {
+  width: 100px;
+  height: 100px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.windows-image {
+  width: 60px;
+  height: 60px;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 50% 50%;
+}
+
+.japan {
+  background-color: red;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  min-height: 100vh;
+  padding: 40px;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  margin-right: 12px;
+  margin-bottom: 20px;
+}
+
+.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 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;
+}
+
+.accordeon {
+  border-radius: 10px;
+  border: 1px solid black;
+}
+
+.accordeon-head {
+  cursor: pointer;
+}