kontur-web-courses · Bowqua · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/index.html b/index.html
@@ -6,7 +6,37 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+    <div class="logos">
+        <div class="logo logo-japan">
+            <div class="japan-circle"></div>
+        </div>
+        <div class="logo logo-windows">
+            <div class="window-pane pane-1"></div>
+            <div class="window-pane pane-2"></div>
+            <div class="window-pane pane-3"></div>
+            <div class="window-pane pane-4"></div>
+        </div>
+    </div>
+    <section class="modal_window">
+        <h2>Modal window</h2>
+        <button class="open_button">Open the modal window</button>
+    </section>
+    <div class="modal-overlay hidden">
+        <div class="modal">
+            <h3>That's all, folks</h3>
+            <p>
+                You can hit ESC or click outside to close the modal.
+                Give it a go to see the reverse transition.
+                If you like this you would probably enjoy <span class="highlight">Menu</span>, <span class="highlight">reveal.js</span> and <span class="highlight">stroll.js</span>.
+            </p>
+            <button class="close_button">Close</button>
+            <div class="progress">
+                <div class="progress-fill"></div>
+                <div class="progress-text progress-text-dark">Loading...</div>
+                <div class="progress-text progress-text-light"></div>
+            </div>
+        </div>
+    </div>
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,68 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+document.addEventListener('DOMContentLoaded', () => {
+    const openButton = document.querySelector('.open_button');
+    const closeButton = document.querySelector('.close_button');
+    const modalOverlay = document.querySelector('.modal-overlay');
+    const progressFill = document.querySelector('.progress-fill');
+    const progressTextLight = document.querySelector('.progress-text-light');
+    const duration = 3000;
+    let startTime = null;
+    let animationId = null;
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+    function resetProgress() {
+        progressFill.style.width = '0';
+        progressTextLight.style.width = '0';
+        progressFill.style.backgroundColor = '#d62828';
+        startTime = null;
+    }
+
+    function animateProgress(timestamp) {
+        if (!startTime) {
+            startTime = timestamp;
+        }
+
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const percent = progress * 100;
+
+        progressFill.style.width = percent + '%';
+        progressTextLight.style.width = percent + '%';
+
+        if (progress < 1) {
+            animationId = requestAnimationFrame(animateProgress);
+        }
+    }
+
+    function openModal() {
+        modalOverlay.classList.remove('hidden');
+        resetProgress();
+
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+        }
+
+        animationId = requestAnimationFrame(animateProgress);
+    }
+
+    function closeModal() {
+        modalOverlay.classList.add('hidden');
+
+        if (animationId) {
+            cancelAnimationFrame(animationId);
+            animationId = null;
+        }
+    }
+
+    openButton.addEventListener('click', openModal);
+    closeButton.addEventListener('click', closeModal);
+    modalOverlay.addEventListener('click', (event) => {
+        if (event.target === modalOverlay) {
+            closeModal();
+        }
+    });
+
+    document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape' && !modalOverlay.classList.contains('hidden')) {
+            closeModal();
+        }
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,195 @@
+body {
+    margin: 0;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    background: #f5f5f5;
+}
+
+.logos {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
+.logo {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #ddd;
+    background: white;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.logo-japan {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.japan-circle {
+    width: 45px;
+    height: 45px;
+    background: #d60000;
+    border-radius: 50%;
+}
+
+.logo-windows {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 8px;
+    padding: 10px;
+}
+
+.window-pane {
+    width: 100%;
+    height: 100%;
+}
+
+.pane-1 {
+    background: #f25022;
+}
+
+.pane-2 {
+    background: #7fba00;
+}
+
+.pane-3 {
+    background: #00a4ef;
+}
+
+.pane-4 {
+    background: #ffb900;
+}
+
+.modal_window {
+    margin-bottom: 30px;
+}
+
+.open_button {
+    padding: 12px 20px;
+    font-size: 16px;
+    border: none;
+    background: #333;
+    color: white;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.open_button:hover {
+    background: #555;
+}
+
+.modal-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+}
+
+.modal-overlay.hidden {
+    display: none;
+}
+
+.modal {
+    width: 640px;
+    max-width: calc(100% - 40px);
+    background: white;
+    border-radius: 14px;
+    padding: 30px 25px 35px;
+    position: relative;
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
+}
+
+.modal h3 {
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+
+.modal p {
+    margin-bottom: 25px;
+    line-height: 1.5;
+}
+
+.close_button {
+    margin-top: 15px;
+    padding: 10px 18px;
+    background: #6abf69;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.close_button:hover {
+    background: #5aa85a;
+}
+
+.progress {
+    position: relative;
+    width: 100%;
+    height: 42px;
+    background: #e0e0e0;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-top: 20px;
+}
+
+.progress-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background: #d62828;
+    z-index: 1;
+}
+
+.progress-text {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.progress-text-dark {
+    color: black;
+    z-index: 2;
+}
+
+.progress-text-light {
+    color: white;
+    z-index: 3;
+    width: 0;
+    overflow: hidden;
+    left: 0;
+    right: auto;
+    display: block;
+    position: absolute;
+    height: 100%;
+}
+
+.progress-text-light::before {
+    content: "Loading...";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 590px;
+    height: 100%;
+    left: 24px;
+    top: 0;
+    white-space: nowrap;
+}
+
+.highlight {
+    color: green;
+}