kontur-web-courses · OK219 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/index.html b/index.html
@@ -6,7 +6,30 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+<img src="designs/logo1.png" alt="" id="logo1">
+<img src="designs/logo2.png" alt="" id="logo2">
+<button class="open-modal-btn">Открыть модальное окно</button>
+<div class="overlay" id="overlay"></div>
+<div class="modal" id="modal">
+    <div class="modal-header">
+        <h2>Заголовок</h2>
+        <button class="close-btn" id="close-btn">&times;</button>
+    </div>
+
+    <div class="modal-content">
+        <p>Сегодня</p>
+        <p>Вторник</p>
+        <p>Пара</p>
+        <p>Пара</p>
+    </div>
+
+    <div class="progress-bar">
+        <div class="progress-fill">
+
+        </div>
+        <span class="text-overlay"></span>
+    </div>
+</div>
+<script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -1,7 +1,91 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+const modal = document.getElementById('modal');
+const overlay = document.getElementById('overlay');
+const closeBtn = document.getElementById('close-btn');
+const openModalBtn = document.querySelector('.open-modal-btn');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+function openModal() {
+    modal.style.display = 'block';
+    overlay.style.display = 'block';
+    document.body.style.overflow = 'hidden'; 
+}
+
+function closeModal() {
+    modal.style.display = 'none';
+    overlay.style.display = 'none';
+    document.body.style.overflow = '';
+}
+
+openModalBtn.addEventListener('click', openModal);
+closeBtn.addEventListener('click', closeModal);
+overlay.addEventListener('click', closeModal);
+
+const progressFill = document.querySelector('.progress-fill');
+const progressBar = document.querySelector('.progress-bar');
+
+function animateProgressBar() {
+    const duration = 3000;
+    const startTime = performance.now();
+    const framesPerSecond = 60;
+    const totalFrames = duration / (1000 / framesPerSecond);
+    let currentFrame = 0;
+    const text = "Loading...";
+    const textContainer = document.createElement('div');
+    textContainer.className = 'text-container';
+    textContainer.style.position = 'absolute';
+    textContainer.style.width = '100%';
+    textContainer.style.height = '100%';
+    textContainer.style.display = 'flex';
+    textContainer.style.justifyContent = 'center';
+    textContainer.style.alignItems = 'center';
+
+    const oldText = progressBar.querySelector('.text-container');
+    if (oldText) progressBar.removeChild(oldText);
+
+    for (let i = 0; i < text.length; i++) {
+        const charSpan = document.createElement('span');
+        charSpan.textContent = text[i];
+        charSpan.style.transition = 'color 0.1s';
+        charSpan.className = 'char';
+        textContainer.appendChild(charSpan);
+    }
+
+    progressBar.appendChild(textContainer);
+    const charSpans = progressBar.querySelectorAll('.char');
+
+    function updateProgress() {
+        currentFrame++;
+        const progress = Math.min(currentFrame / totalFrames, 1);
+        const percent = progress * 100;
+        progressFill.style.width = `${percent}%`;
+
+        const barRect = progressBar.getBoundingClientRect();
+        const fillWidth = barRect.width * progress;
+
+
+        charSpans.forEach((span, index) => {
+            const spanRect = span.getBoundingClientRect();
+            const spanPosition = spanRect.left + spanRect.width/2 - barRect.left;
+
+            if (spanPosition < fillWidth) {
+                span.style.color = 'white';
+            } else {
+                span.style.color = 'black';
+            }
+        });
+
+        if (progress < 1) {
+            requestAnimationFrame(updateProgress);
+        } else {
+            charSpans.forEach(span => {
+                span.style.color = 'white';
+            });
+        }
+    }
+
+    requestAnimationFrame(updateProgress);
+}
+
+document.querySelector('.open-modal-btn').addEventListener('click', function() {
+    progressFill.style.width = '0%';
+    setTimeout(animateProgressBar, 100);
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,104 @@
+#logo1, #logo2 {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    line-height: 1.6;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: none;
+}
+
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 640px;
+    max-width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    z-index: 1001;
+    display: none;
+}
+
+.modal-header {
+    padding: 20px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.close-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #777;
+    padding: 0;
+    line-height: 1;
+}
+
+.modal-content {
+    padding: 20px;
+}
+
+.open-modal-btn {
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.progress-bar {
+    position: relative;
+    width: 300px;
+    height: 30px;
+    background-color: #ccc;
+    border-radius: 5px;
+    overflow: hidden;
+    margin: 20px auto;
+    font-family: Arial, sans-serif;
+}
+
+.progress-bar .progress-fill {
+    background-color: red;
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: width 0.1s;
+}
+
+.progress-bar .text-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+}