kontur-web-courses · Batonovvva · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/index.html b/index.html
@@ -6,7 +6,39 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+<div class="logo-container">
+    <div class="logo-target">
+        <div class="target-white-ring">
+            <div class="target-center"></div>
+        </div>
+    </div>
+    <div class="logo-mickey">
+        <div class="head"></div>
+        <div class="ear left"></div>
+        <div class="ear right"></div>
+    </div>
+</div>
+
+
+<button id="openModalBtn">Открыть модальное окно</button>
+
+    <div id="modalOverlay" class="modal-overlay">
+        <div class="modal">
+            <div class="modal-header">
+                <h2>Загрузка</h2>
+                <button id="closeModalBtn" class="close-btn">✕</button>
+            </div>
+            <div class="modal-body">
+                <div class="progress-container">
+                    <div class="progress-bg">
+                        <div class="progress-fill" id="progressFill"></div>
+                        <div class="progress-text progress-text-black">Loading...</div>
+                        <div class="progress-text progress-text-white" id="whiteText">Loading...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -4,4 +4,68 @@
     const element = document.querySelector('.myElement');
     element.style.color = 'red';
     element.style.width = '300px';
-*/
+*/
+
+document.addEventListener('DOMContentLoaded', function() {
+    const overlay = document.querySelector('#modalOverlay');
+    const openBtn = document.querySelector('#openModalBtn');
+    const closeBtn = document.querySelector('#closeModalBtn');
+
+    const progressFill = document.querySelector('#progressFill');
+    const whiteText = document.querySelector('#whiteText');
+
+    let animationId = null;
+
+    function resetProgress() {
+        if (progressFill) progressFill.style.width = '0%';
+        if (whiteText) whiteText.style.clipPath = 'inset(0 100% 0 0)';
+    }
+
+    function startProgress() {
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+        }
+        resetProgress();
+
+        const duration = 3000;
+        const startTime = performance.now();
+
+        function update(currentTime) {
+            const elapsed = currentTime - startTime;
+            let percent = Math.min(1, elapsed / duration);
+            const widthPercent = percent * 100;
+
+            progressFill.style.width = widthPercent + '%';
+            const clipRight = 100 - widthPercent;
+            whiteText.style.clipPath = `inset(0 ${clipRight}% 0 0)`;
+
+            if (percent < 1) {
+                animationId = requestAnimationFrame(update);
+            } else {
+                animationId = null;
+            }
+        }
+
+        animationId = requestAnimationFrame(update);
+    }
+
+    function openModal() {
+        overlay.classList.add('active');
+        startProgress();
+    }
+
+    function closeModal() {
+        overlay.classList.remove('active');
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    }
+
+    openBtn.addEventListener('click', openModal);
+    closeBtn.addEventListener('click', closeModal);
+
+    overlay.addEventListener('click', function(e) {
+        if (e.target === overlay) closeModal();
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,226 @@
+/* Общие стили */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f4f4f4;
+    gap: 40px;
+}
+
+.logo-container {
+    display: flex;
+    gap: 20px;
+}
+
+/* Логотип Микки Мауса */
+.logo-mickey {
+    width: 100px;
+    height: 100px;
+    position: relative;
+}
+
+.logo-mickey .head {
+    width: 60px;
+    height: 60px;
+    background: black;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.logo-mickey .ear {
+    width: 40px;
+    height: 40px;
+    background: black;
+    border-radius: 50%;
+    position: absolute;
+    top: 10px;
+}
+
+.logo-mickey .left {
+    left: 5px;
+}
+
+.logo-mickey .right {
+    right: 5px;
+}
+
+.logo-target {
+    width: 90px;
+    height: 90px;
+    background-color: red;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.target-white-ring {
+    width: 60px;
+    height: 60px;
+    background-color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.target-center {
+    width: 30px;
+    height: 30px;
+    background-color: red;
+    border-radius: 50%;
+}
+
+.head {
+    width: 80px; /* Уменьшаем голову для пропорциональности */
+    height: 80px;
+    background-color: black;
+    border-radius: 50%;
+    position: absolute;
+    top: 20px; /* Смещаем вниз */
+    left: 20px; /* Центрируем относительно родительского контейнера */
+}
+
+.ear {
+    width: 40px; /* Уменьшаем размер ушей */
+    height: 40px;
+    background-color: black;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+}
+
+.left {
+    left: -20px; /* Смещаем влево */
+}
+
+.right {
+    right: -20px; /* Смещаем вправо */
+}
+
+
+#openModalBtn {
+    padding: 12px 24px;
+    font-size: 18px;
+    background: #a634db;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.2s;
+}
+
+.modal-overlay.active {
+    visibility: visible;
+    opacity: 1;
+}
+
+.modal {
+    width: 640px;
+    max-width: 90%;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid #eee;
+}
+
+.modal-header h2 {
+    font-size: 24px;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 28px;
+    cursor: pointer;
+    color: #999;
+}
+
+.close-btn:hover {
+    color: #e74c3c;
+}
+
+.modal-body {
+    padding: 32px 24px;
+}
+
+.progress-container {
+    margin: 20px 0;
+}
+
+.progress-bg {
+    position: relative;
+    background-color: #b0b0b0;
+    height: 48px;
+    border-radius: 24px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0%;
+    background-color: #e63946;
+    border-radius: 24px;
+    transition: width 0.05s linear;
+    z-index: 1;
+}
+
+.progress-text {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 20px;
+    letter-spacing: 1px;
+    pointer-events: none;
+}
+
+.progress-text-black {
+    color: black;
+    z-index: 2;
+}
+
+.progress-text-white {
+    color: white;
+    z-index: 3;
+    clip-path: inset(0 100% 0 0);
+}