kontur-web-courses · mefodyvaulin · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/index.html b/index.html
@@ -6,7 +6,48 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+
+
+    <div class="modal-window-container">
+        <button class="modal-window-button">Открыть модальное окно</button>
+    </div>
+    <div id="Modal" class="modal">
+        <div class="modal-content">
+            <button class="modal-close" aria-label="Закрыть">&times;</button>
+
+            <h2>That's all, folks</h2>
+            <p>You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.</p>
+            <p>If you like this you would probably enjoy Meny, reveal.js and stroll.js.</p>
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: 49%;"></div>
+                <span class="progress-text progress-text-back">Loading...</span>
+                <span class="progress-text progress-text-front">Loading...</span>
+            </div>
+
+            <button class="close-modal-btn">Close</button>
+        </div>
+    </div>
+    <p></p>
+    <div id="task1">
+
+        <div class = "japan-back">
+            <div class = "japan"></div>
+        </div>
+        <p> </p>
+
+        <div class = "bunny-back">
+            <div class = "ears">
+                <div class = "bunny-u1"></div>
+                <div class = "bunny-u2"></div>
+            </div>
+            <div class = "bunny-head"></div>
+        </div>
+
+
+
+
+    </div>
+        <script src="index.js"></script>
+
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,53 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+const modalWindowButton = document.querySelector('.modal-window-button');
+const modal = document.getElementById('Modal');
+const closeModalBtn = document.querySelector('.close-modal-btn');
+const closeIcon = document.querySelector('.modal-close');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+modalWindowButton.addEventListener('click', ()   => {
+    modal.style.display = 'flex';
+    startProgressBar()
+});
+
+closeModalBtn.addEventListener('click', () => {
+    modal.style.display = 'none';
+    dropProgressBar()
+});
+
+closeIcon.addEventListener('click', () => {
+    modal.style.display = 'none';
+    dropProgressBar()
+});
+
+let interval =0
+function startProgressBar() {
+
+    const fill = document.querySelector(".progress-fill");
+    const text1 = document.querySelector(".progress-text-back");
+    const text2 = document.querySelector(".progress-text-front");
+
+    let width = 1;
+
+    interval = setInterval(() => {
+        if (width >= 100) {
+            clearInterval(interval);
+            fill.style.backgroundColor = 'green';
+            text1.textContent = `Loaded`;
+            text2.textContent = `Loaded`;
+        } else {
+            width++;
+            fill.style.width = `${width}%`;
+        }
+    }, 30);
+
+}
+
+function dropProgressBar(){
+    clearInterval(interval);
+    const fill = document.querySelector(".progress-fill");
+    const text1 = document.querySelector(".progress-text-back");
+    const text2 = document.querySelector(".progress-text-front");
+    fill.style.width = `0%`
+    fill.style.backgroundColor = `#d62828`;
+    text1.textContent = `Loading...`;
+    text2.textContent = `Loading...`;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,166 @@
+.modal {
+    position: fixed;
+    inset: 0;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    z-index: 1000;
+}
+
+.modal.active {
+    display: flex;
+}
+
+.modal-content {
+    position: relative;
+    width: 320px;
+    max-width: 90%;
+    height: auto;
+    background: #fff;
+    border: 1px solid #bfbfbf;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+    padding: 14px 16px 16px;
+    box-sizing: border-box;
+}
+
+.modal-content h2 {
+    margin: 0 0 10px;
+    font-size: 28px;
+    font-weight: 700;
+    color: #222;
+}
+
+.modal-content p {
+    margin: 0 0 12px;
+    font-size: 14px;
+    line-height: 1.4;
+    color: #333;
+}
+
+.modal-window-button,
+.close-modal-btn {
+    padding: 4px 10px;
+    font-size: 13px;
+    color: #fff;
+    background: #7fbf6a;
+    border: 1px solid #6aa657;
+    cursor: pointer;
+}
+
+.close-modal-btn:hover {
+    background: #6fad59;
+}
+
+.modal-close {
+    position: absolute;
+    top: 6px;
+    right: 8px;
+    background: transparent;
+    border: none;
+    font-size: 22px;
+    line-height: 1;
+    color: #666;
+    cursor: pointer;
+    padding: 0;
+}
+
+.modal-close:hover {
+    color: #000;
+}
+
+.square{
+    position: absolute;
+    border: solid red;
+    width: 100px;
+    height: 100px;
+}
+
+.japan-back {
+    border: 1px solid black;
+    display: flex;
+    height: 70px;
+    width: 100px;
+    justify-content: center;
+    align-items: center;
+}
+.japan{
+    background-color: #d62828;
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+}
+
+
+ .bunny-back {
+     display: flex;
+     flex-direction: column;
+     align-items: center;
+     width: 60px;
+
+     padding: 10px;
+ }
+
+.ears {
+    display: flex;
+    gap: 20px;
+    margin-bottom: -10px;
+}
+
+.bunny-u1, .bunny-u2 {
+    background-color: black;
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+}
+
+.bunny-head {
+    background-color: black;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+}
+
+
+
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 32px;
+    background: #bfbfbf;
+    border: 1px solid #999;
+    overflow: hidden;
+    margin: 16px 0;
+}
+
+.progress-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 45%;
+    background: #d62828;
+    z-index: 1;
+}
+
+.progress-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.progress-text-back {
+    color: #000;
+}
+
+.progress-text-front {
+    color: #fff;
+    z-index: 3;
+    clip-path: inset(0 55% 0 0);
+}