kontur-web-courses · Fridmak · Apr 8, 2025 · Apr 8, 2025
diff --git a/index.html b/index.html
@@ -2,11 +2,52 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Практика позиционирования</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
+    <title>Document</title>
 </head>
 <body>
-    <!--Верстать тут-->
+    <!-- Логотипы -->
+    <div class="logo-container">
+        <img src="designs/logo3.jpg" class="logo" alt="Logo 1">
+        <img src="designs/logo4.jpeg" class="logo" alt="Logo 4">
+        <img src="designs/logo5.png" class="logo" alt="Logo 5">
+    </div>
+
+    <!-- Кнопка для открытия модального окна -->
+    <button id="openModalWindow">Открыть модальное окно</button>
+
+    <!-- Модальное окно -->
+    <div class="modal-overlay" id="setModalOverlay">
+        <div class="modal">
+            <button class="close" id="closeModalWindow">&times;</button>
+            <!-- Прогресс бар -->
+            <div class="progress-wrapper">
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressFilled"></div>
+                    <div class="progress-text" id="progressText">Loading...</div>
+                </div>
+            </div>
+            <!-- Аккордеон -->
+            <div class="accordion">
+                <input type="checkbox" id="acc1">
+                <label for="acc1">Раздел 1</label>
+                <div class="content">Hello world.</div>
+
+                <input type="checkbox" id="acc2">
+                <label for="acc2">Раздел 2</label>
+                <div class="content">__proto__.</div>
+
+                <input type="checkbox" id="acc3">
+                <label for="acc3">Раздел 3(Тоже лучший)</label>
+                <div class="content">«В то время как многие могут следовать за своими мечтами в одиночестве, другие мечты подобны великим бурям, которые сметают на своём пути сотни, даже тысячи мечтаний. Мечты вдыхают жизнь в людей и могут обрекать их на страдания. Люди живут и умирают ради своих мечтаний. Но даже после того, как от них отказались, они всё ещё тлеют в сердцах людей. Некоторые не видят ничего, кроме жизни и смерти. Они мертвы, потому что у них нет мечтаний».</div>
+
+                <input type="checkbox" id="acc4">
+                <label for="acc4">Раздел 4(Лучший)</label>
+                <div class="content">В Королевстве Асуры есть группа людей, известная как семь рыцарей Асуры. Эти люди поклялись в абсолютной верности Ариэль Анемой Асуре. Возглавляет группу «доверенное лицо королевы» — Люк Нотос Грейрат.</div>
+            </div>
+        </div>
+    </div>
     <script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -1,7 +1,31 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+const openModal = document.getElementById('openModalWindow');
+const modalOverlay = document.getElementById('setModalOverlay');
+const closeModal = document.getElementById('closeModalWindow');
+const progressFill = document.getElementById('progressFilled');
+const progressText = document.getElementById('progressText');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+openModal.addEventListener('click', () => {
+    modalOverlay.style.display = 'flex';
+    startProgressBar();
+});
+
+closeModal.addEventListener('click', () => {
+    modalOverlay.style.display = 'none';
+    progressFill.style.width = '0%';
+    progressText.textContent = 'Loading...';
+});
+
+function startProgressBar() {
+    let width = 0;
+    const interval = setInterval(() => {
+        width++;
+        progressFill.style.width = `${width}%`;
+        progressText.style.setProperty('--progress', `${width}%`);
+        progressText.textContent = 'Loading...';
+
+        if (width >= 100) {
+            clearInterval(interval);
+            progressText.textContent = 'Complete!';
+        }
+    }, 30);
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,131 @@
+/* Общее */
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+/* Логотипы */
+.logo-container {
+    display: flex;
+    gap: 20px;
+}
+
+.logo {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    overflow: hidden;
+    border: 1px solid white;
+}
+
+#openModalWindow {
+    padding: 10px 20px; 
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+/* Модальное окно */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.6);
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal {
+    background: white;
+    width: 640px;
+    padding: 20px;
+    position: relative;
+    border-radius: 10px;
+}
+
+.close {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    font-size: 24px;
+    border: none;
+    background: none;
+    cursor: pointer;
+}
+
+/* Шкала прогресса */
+.progress-wrapper {
+    margin: 20px 0;
+}
+
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 30px;
+    background: #ccc;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    background: red;
+    height: 100%;
+    width: 0;
+}
+
+.progress-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 16px;
+    text-align: center;
+
+    background: linear-gradient(
+        90deg,
+        white 0%,
+        white var(--progress, 0%),
+        black var(--progress, 0%),
+        black 100%
+    );
+    -webkit-background-clip: text;
+    color: transparent;
+}
+
+/* Аккордеон */
+.accordion input {
+    display: none;
+}
+
+.accordion label {
+    display: block;
+    background: #eee;
+    padding: 10px;
+    margin-top: 5px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.accordion .content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    background: #f9f9f9;
+    padding: 0 10px;
+}
+
+.accordion input:checked + label + .content {
+    max-height: 100px;
+    padding: 10px;
+}