kontur-web-courses · mistervlady · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/index.html b/index.html
@@ -2,11 +2,65 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Практика позиционирования</title>
+    <title>Модалка с прогресс-баром и логотипами</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+
+<div class="overlay" id="modalOverlay">
+    <div class="modal">
+        <button class="close-btn" id="closeModal">&times;</button>
+        <h2>Прогресс загрузки</h2>
+
+        <!-- Прогресс-бар -->
+        <div class="progress-container">
+            <div class="progress-bar">
+                <div class="progress-fill"></div>
+                <div class="progress-text">
+                    <span class="white">Lo</span><span class="black">ading...</span>
+                </div>
+            </div>
+        </div>
+
+        <button class="green-btn" id="closeButton">Закрыть</button>
+    </div>
+</div>
+
+<div class="logos">
+    <div class="logo-container">
+        <img src="designs/logo1.png" alt="Logo 1">
+    </div>
+    <div class="logo-container">
+        <img src="designs/logo2.png" alt="Logo 2">
+    </div>
+</div>
+
+<div class="accordion">
+    <div class="accordion-item">
+        <input type="checkbox" id="acc1">
+        <label for="acc1">Что такое frontend?</label>
+        <div class="accordion-content">
+            <p>Frontend — это часть веб-разработки, отвечающая за отображение и взаимодействие с пользователем. HTML, CSS и JavaScript — основные технологии.</p>
+        </div>
+    </div>
+
+    <div class="accordion-item">
+        <input type="checkbox" id="acc2">
+        <label for="acc2">Что такое backend?</label>
+        <div class="accordion-content">
+            <p>Backend — это логика приложения на сервере, работа с базами данных, авторизация, обработка запросов. Используются языки как PHP, Python, Node.js.</p>
+        </div>
+    </div>
+
+    <div class="accordion-item">
+        <input type="checkbox" id="acc3">
+        <label for="acc3">Что делает дизайнер интерфейсов?</label>
+        <div class="accordion-content">
+            <p>UX/UI дизайнер разрабатывает визуальный стиль приложения и взаимодействие пользователя с системой. Занимается прототипами, юзабилити, визуалом.</p>
+        </div>
+    </div>
+</div>
+
+<script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -1,7 +1,64 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+// Анимация прогресс-бара
+const progressFill = document.querySelector('.progress-fill');
+const whiteText = document.querySelector('.progress-text .white');
+const blackText = document.querySelector('.progress-text .black');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+let progress = 0;
+const duration = 3000; // 3 секунды
+const fps = 60;
+const step = 100 / (duration / (1000 / fps));
+
+const interval = setInterval(() => {
+    progress += step;
+
+    if (progress >= 100) {
+        progress = 100;
+        clearInterval(interval);
+    }
+
+    progressFill.style.width = progress + '%';
+
+    const letters = "Loading...".split("");
+    const progressContainer = document.querySelector('.progress-bar');
+    const totalWidth = progressContainer.offsetWidth;
+    const redWidth = progressFill.offsetWidth;
+    const percentRed = redWidth / totalWidth;
+
+    const redChars = Math.round(letters.length * percentRed) + 3;
+    const redText = letters.slice(0, redChars).join('');
+    const blackTextPart = letters.slice(redChars).join('');
+
+    whiteText.textContent = redText;
+    blackText.textContent = blackTextPart;
+
+}, 1000 / fps);
+
+document.addEventListener("DOMContentLoaded", () => {
+    const overlay = document.getElementById('modalOverlay');
+    const closeModal = document.getElementById('closeModal');
+    const closeButton = document.getElementById('closeButton');
+
+    if (closeModal) {
+        closeModal.addEventListener('click', () => {
+            overlay.style.display = 'none';
+        });
+    }
+
+    if (closeButton) {
+        closeButton.addEventListener('click', () => {
+            overlay.style.display = 'none';
+        });
+    }
+
+    window.addEventListener('click', (e) => {
+        if (e.target === overlay) {
+            overlay.style.display = 'none';
+        }
+    });
+
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            overlay.style.display = 'none';
+        }
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,126 @@
+body {
+    margin: 0;
+    font-family: sans-serif;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal {
+    position: relative;
+    background: white;
+    width: 640px;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: 24px;
+    border-radius: 6px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.progress-container {
+    margin-top: 20px;
+}
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 40px;
+    background-color: #ccc;
+    overflow: hidden;
+    margin-bottom: 16px;
+}
+.progress-fill {
+    position: absolute;
+    height: 100%;
+    width: 0%;
+    background-color: red;
+    z-index: 1;
+    transition: width 0.3s;
+}
+.progress-text {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 24px;
+    font-weight: bold;
+    z-index: 2;
+    white-space: nowrap;
+}
+.progress-text .white {
+    color: white;
+}
+.progress-text .black {
+    color: black;
+}
+
+.accordion {
+    margin: 20px 0;
+    border-top: 1px solid #ccc;
+}
+.accordion-item {
+    border-bottom: 1px solid #ccc;
+}
+.accordion-item input {
+    display: none;
+}
+.accordion-item label {
+    display: block;
+    padding: 12px;
+    background-color: #f0f0f0;
+    cursor: pointer;
+    font-weight: bold;
+}
+.accordion-item .accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+    background-color: #fafafa;
+    padding: 0 12px;
+}
+.accordion-item input:checked + label + .accordion-content {
+    max-height: 300px;
+    padding: 12px;
+}
+
+.logos {
+    display: flex;
+    justify-content: space-around;
+    gap: 16px;
+    margin-top: 24px;
+}
+.logo-container img {
+    max-width: 100px;
+    height: auto;
+    display: block;
+}
+
+.green-btn {
+    margin-top: 20px;
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 18px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}