kontur-web-courses · PurpleCat404 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/positioning.iml b/.idea/positioning.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -6,7 +6,74 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+<!--Верстать тут-->
+<div class="mickie">
+    <div class="ear left"></div>
+    <div class="ear right"></div>
+    <div class="face"></div>
+</div>
+<div class="flag">
+    <div class="red-circle"></div>
+</div>
+
+
+
+<div class="modal">
+    <div class="content">
+        <div class="modal-header">
+            <button type="button" class="close">&times;</button>
+        </div>
+
+        <div class="progress-container">
+            <div class="progress-bar"></div>
+            <span class="progress-text inactive">Loading...</span>
+            <span class="progress-text active">Loading...</span>
+        </div>
+        <h2>Аккордеон</h2>
+        <!-- Аккордеон — Блок 1 -->
+        <div class="accordion">
+            <input type="checkbox" id="acc1" hidden>
+            <label for="acc1" class="accordion-label">Блок 1</label>
+            <div class="accordion-content">
+                <p>
+                    Годовой параллакс существенно ищет центральный эффективный диаметp. Приливное трение прочно
+                    выслеживает Ганимед. Соединение, следуя пионерской работе Эдвина Хаббла, иллюстрирует непреложный
+                    экватор, а время ожидания ответа составило бы 80 миллиардов лет. Комета Хейла-Боппа, несмотря на
+                    внешние воздействия, вероятна. Керн неустойчив.
+                </p>
+            </div>
+        </div>
+
+        <!-- Аккордеон — Блок 2 -->
+        <div class="accordion">
+            <input type="checkbox" id="acc2" hidden>
+            <label for="acc2" class="accordion-label">Блок 2</label>
+            <div class="accordion-content">
+                <p>
+                    Эклиптика возможна. В отличие от пылевого и ионного хвостов, Лисичка гасит узел. Часовой угол, а там
+                    действительно могли быть видны звезды, о чем свидетельствует Фукидид отражает тропический год.
+                    Эклиптика, оценивая блеск освещенного металического шарика, вращает перигелий.
+                </p>
+            </div>
+        </div>
+
+        <!-- Аккордеон — Блок 3 -->
+        <div class="accordion">
+            <input type="checkbox" id="acc3" hidden>
+            <label for="acc3" class="accordion-label">Блок 3</label>
+            <div class="accordion-content">
+                <p>
+                    Азимут недоступно представляет собой годовой параллакс. По космогонической гипотезе Джеймса Джинса,
+                    противостояние потенциально. Космогоническая гипотеза Шмидта позволяет достаточно просто объяснить
+                    эту нестыковку, однако прямое восхождение решает реликтовый ледник. Кульминация последовательно
+                    колеблет апогей, хотя это явно видно на фотогpафической пластинке, полученной с помощью
+                    1.2-метpового телескопа.
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,27 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+document.addEventListener('DOMContentLoaded', () => {
+    const progressBar = document.querySelector('.progress-bar');
+    const whiteText = document.querySelector('.progress-text.active');
+    const closeBtn = document.querySelector('.close');
+    const modal = document.querySelector('.modal');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+    closeBtn.addEventListener('click', () => {
+        modal.style.display = 'none';
+    });
+
+    const duration = 3000;
+    const interval = 15;
+
+    const steps = duration / interval;
+    let currentStep = 0;
+
+    const timer = setInterval(() => {
+        currentStep++;
+        const progress = (currentStep / steps) * 100;
+        progressBar.style.width = progress + '%';
+        whiteText.style.clipPath = `inset(0 ${100 - progress}% 0 0)`;
+
+        if (currentStep >= steps) {
+            clearInterval(timer);
+        }
+    }, interval);
+});