kontur-web-courses · jstnoname · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/index.html b/index.html
@@ -6,7 +6,43 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+    <button id="openButton">Открыть модальное окно</button>
+    <dialog id="dialog">
+        <button class="closeButton" id="closeButton">✕</button>
+        <div class="accordion">
+            <details class="accordion-item">
+                <summary>Section 1</summary>
+                <div class="accordion-content"><p>Яндекс.Рефераты — это старый юмористический и демонстрационный сервис Яндекса (генератор текста), созданный для создания уникальных, но часто бессмысленных рефератов по различным дисциплинам</p></div>
+            </details>
+            <details class="accordion-item">
+                <summary>Section 2</summary>
+                <div class="accordion-content"><p>Сгенерированные тексты существуют в единственном экземпляре и не являются плагиатом, так как создаются автоматически на основе уже проиндексированного контента</p></div>
+            </details>
+            <details class="accordion-item">
+                <summary>Section 3</summary>
+                <div class="accordion-content"><p>а сюда не придумал, что вставить</p></div>
+            </details>
+        </div>
+    </dialog>
+
+    <div class="japan">
+        <div class="circle"></div>
+        <div class="prymougolnik"></div>
+    </div>
+
+    <div class="mitsubishi">
+        <div class="diamond top"></div>
+        <div class="diamond left"></div>
+        <div class="diamond right"></div>
+    </div>
+    <div class="progress">
+        <div class="progress-fill"></div>
+
+        <div class="progress-text" id="text">
+            Loading...
+        </div>
+    </div>
+
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,53 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+const dialog = document.querySelector("#dialog")
+const openButton = document.querySelector("#openButton");
+const closeButton = document.querySelector("#closeButton");
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+openButton.onclick = () => dialog.showModal();
+closeButton.onclick = () => dialog.close();
+
+
+const fill = document.querySelector(".progress-fill");
+const text = document.querySelector("#text");
+
+const word = text.textContent;
+text.textContent = "";
+
+[...word].forEach(letter => {
+    const span = document.createElement("span");
+    span.textContent = letter;
+    text.appendChild(span);
+});
+
+const letters = text.querySelectorAll("span");
+
+let progress = 0;
+
+const frames = 120;
+const interval = 3000 / frames;
+
+const progressWidth = 500;
+
+const timer = setInterval(() => {
+
+    progress++;
+
+    fill.style.width = progress + "%";
+
+    const barX = progressWidth * progress / 100;
+
+    letters.forEach(letter => {
+        const rect = letter.getBoundingClientRect();
+        const parentRect = text.getBoundingClientRect();
+
+        const letterX = rect.left - parentRect.left;
+
+        if (barX >= letterX) {
+            letter.classList.add("active");
+        }
+    });
+
+    if (progress >= 100) {
+        clearInterval(timer);
+    }
+
+}, interval);
diff --git a/styles.css b/styles.css
@@ -0,0 +1,166 @@
+dialog {
+  width: 640px;
+  max-width: 90vw;
+  height: auto;
+  padding: 40px 20px 20px;
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  position: fixed;
+}
+
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  background: none;
+  border: none;
+  font-size: 30px;
+  line-height: 1;
+  cursor: pointer;
+  color: #666;
+}
+
+details {
+    border: 1px solid #a6a6a6;
+    border-radius: 4px;
+    margin-bottom: 4px;
+    overflow: hidden;
+    .accordion-inner {
+        background: #fff;
+        padding: 20px;
+        border-top: 1px solid #a6a6a6;
+        font-size: 14px;
+        line-height: 1.5;
+    }
+    .accordion-inner ul {
+        margin: 10px 0 0 20px;
+        padding: 0;
+    }
+    font-family: Arial, sans-serif;
+}
+
+summary {
+    background: linear-gradient(to bottom, #f0f0f0 0%, #d3d3d3 100%);
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #333;
+    cursor: pointer;
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+summary::before {
+    content: '▶';
+    font-size: 9px;
+    margin-right: 10px;
+    color: #444;
+    transition: transform 0.2s;
+}
+
+details[open] summary::before {
+    transform: rotate(90deg);
+}
+
+.closeButton:hover {
+  color: #000;
+}
+.japan {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    background-color: white;
+    border: 1px solid #ccc;
+}
+.japan .circle {
+    width: 40px;
+    height: 40px;
+    background-color: #BA002C;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+}
+
+.japan .prymougolnik {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+.mitsubishi {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    background-color: white;
+    border: 1px solid #ccc;
+}
+
+.diamond {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    background-color: black;
+    clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
+}
+
+.mitsubishi .top {
+    top: 5px;
+    left: 25px;
+    transform: rotate(0deg);
+}
+
+.mitsubishi .left {
+    top: 42px;
+    left: 3px;
+    transform: rotate(59deg);
+}
+
+.mitsubishi .right {
+    top: 42px;
+    left: 46px;
+    transform: rotate(121deg);
+}
+.progress {
+    width: 500px;
+    height: 40px;
+    background: gray;
+    position: relative;
+}
+
+.progress-fill {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background: red;
+}
+
+.progress-text {
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 24px;
+}
+
+.progress-text span {
+    color: black;
+}
+
+.progress-text span.active {
+    color: white;
+}