kontur-web-courses · DiOsa1317 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/.DS_Store b/.DS_Store
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/positioning.iml b/.idea/positioning.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -6,7 +6,80 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+<div class="japanese_flag_box">
+    <div class="red"></div>
+</div>
+
+<div class="microsoft_logo">
+    <div class="red_square"></div>
+    <div class="green_square"></div>
+    <div class="blue_square"></div>
+    <div class="yellow_square"></div>
+</div>
+
+<div class="container">
+    <div class="progress-container">
+        <div class="progress-bar"></div>
+        <div class="label label-black">Loading... 0%</div>
+        <div class="label-white-wrap">
+            <div class="label label-white">Loading... 0%</div>
+        </div>
+    </div>
+</div>
+
+<button class="open_lightbox" id="open_lightbox">Открыть модальное окно</button>
+<div class="modal_window" id="modal_window">
+    <div class="modal_content">
+        <div class="close_lightbox" id="close_lightbox">&times;</div>
+        <p>Спят усталые игрушки, книжки спят.<br>
+            Одеяла и подушки ждут ребят. <br>
+            Даже сказка спать ложится, <br>
+            Чтобы ночью нам присниться. <br>
+            Ты ей пожелай: <br>
+            Баю-бай.<br>
+            <br>
+            В сказке можно покататься на луне<br>
+            И по радуге промчаться на коне,<br>
+            Со слоненком подружиться<br>
+            И поймать перо Жар-птицы.<br>
+            Глазки закрывай,<br>
+            Баю-бай.<br>
+            <br>
+            Обязательно по дому в этот час<br>
+            Тихо-тихо ходит дрема возле нас.<br>
+            За окошком всё темнее,<br>
+            Утро ночи мудренее.<br>
+            Глазки закрывай,<br>
+            Баю-бай.<br>
+            <br>
+            Баю-бай, должны все люди ночью спать.<br>
+            Баю-баю, завтра будет день опять.<br>
+            За день мы устали очень,<br>
+            Скажем всем: «Спокойной ночи!»<br>
+            Глазки закрывай,<br>
+            Баю-бай.
+        </p>
+        <div class="css-accordion">
+            <input type="checkbox" name="accordion" id="acc1" checked>
+            <label for="acc1">Посчитай овец</label>
+            <div class="content">
+                <img src="sheep.jpeg" alt="Sheep jumps">
+            </div>
+            <input type="checkbox" name="accordion" id="acc2">
+            <label for="acc2">Переверни подушку на холодную сторону</label>
+            <div class="content">
+                Окно тоже можно открыть!
+            </div>
+            <input type="checkbox" name="accordion" id="acc3">
+            <label for="acc3">Начни смотреть лекцию Созыкина</label>
+            <div class="content">
+                <a href="https://asozykin.ru/courses/networks_online">
+                    Привет! Я Андрей Созыкин и это курс "Компьютерные сети"
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -4,4 +4,33 @@
     const element = document.querySelector('.myElement');
     element.style.color = 'red';
     element.style.width = '300px';
-*/
+*/
+'use strict';
+document.addEventListener('DOMContentLoaded', () => {
+    const bar = document.querySelector('.progress-container');
+    const labelBlack = document.querySelector('.label-black');
+    const labelWhite = document.querySelector('.label-white');
+    const interval = setInterval(frame,30);
+    let width = 0;
+    function frame() {
+        if (width >= 100){
+            clearInterval(interval);
+            return;
+        }
+        width++;
+        bar.style.setProperty('--progress', width + '%');
+        const text = `Loading... ${width + '%'}`;
+        labelBlack.textContent = text;
+        labelWhite.textContent = text;
+    }
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+    const modalWindow = document.getElementById('modal_window');
+    const open_lightbox = document.getElementById('open_lightbox');
+    const close_lightbox = document.getElementById('close_lightbox');
+
+    open_lightbox.onclick = () => modalWindow.style.display = "flex";
+    close_lightbox.onclick = () => modalWindow.style.display = "none";
+})
+
diff --git a/sheep.jpeg b/sheep.jpeg
diff --git a/styles.css b/styles.css
@@ -0,0 +1,211 @@
+.japanese_flag_box {
+    display: flex;
+    width: 100px;
+    height: 100px;
+    color: white;
+    position: relative;
+    border: 1px solid black;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+}
+
+.red {
+    width: 60%;
+    height: 60%;
+    position: absolute;
+    top: 20%;
+    left: 20%;
+    background-color: red;
+    border-radius: 50%;
+
+}
+
+.microsoft_logo {
+    height: 100px;
+    width: 100px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 5px;
+    border: 1px solid black;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.red_square, .blue_square, .green_square, .yellow_square {
+    display: flex;
+}
+
+.red_square {
+    background-color: #F34F1C;
+}
+
+.green_square {
+    background-color: #7FBC00;
+}
+
+.red {
+    width: 60%;
+    height: 60%;
+    position: absolute;
+    top: 20%;
+    left: 20%;
+    background-color: red;
+    border-radius: 50%;
+}
+.blue_square {
+    background-color: #01A6F0;
+}
+
+.yellow_square {
+    background-color: #FFBA01;
+}
+
+.open_lightbox {
+    margin: 40px;
+}
+
+.modal_window {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background-color: rgba(140, 138, 173, 0.5);
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.modal_content {
+    background-color: rgb(192, 178, 226);
+    width: 640px;
+    max-height: 90vh;
+    max-width: 100%;
+    overflow: auto;
+    position: relative;
+    padding: 20px;
+    border-radius: 20px;
+    box-sizing: border-box;
+}
+
+.close_lightbox {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    cursor: pointer;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+
+.container {
+    display: flex;
+    width: 200px;
+    height: 100px;
+    background-color: #e3e0e0;
+    border: 1px solid black;
+    align-items: center;
+    justify-content: center;
+}
+
+.progress-container {
+    --progress: 0%;
+    width: 100%;
+    position: relative;
+    height: 20px;
+    background-color: #9b9a9a;
+    overflow: hidden;
+}
+
+.progress-bar {
+    width: var(--progress);
+    height: 100%;
+    background-color: red;
+}
+
+.label {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 20px;
+    inset: 0;
+}
+
+.label-black {
+    color: black;
+}
+
+.label-white-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--progress);
+    height: 100%;
+    overflow: hidden;
+}
+
+.label-white {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.css-accordion {
+    margin-top: 20px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.css-accordion input {
+    display: none;
+}
+
+.css-accordion label {
+    display: block;
+    padding: 15px;
+    background: #f0f0f0;
+    cursor: pointer;
+    font-weight: bold;
+    border-bottom: 1px solid #ddd;
+    transition: background 0.2s;
+}
+
+.css-accordion label:hover {
+    background: #e0e0e0;
+}
+
+.css-accordion .content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+    background: #fff;
+    padding: 0 15px;
+}
+
+.css-accordion .content p,
+.css-accordion .content ul {
+    margin: 15px 0;
+}
+
+.css-accordion .content ul {
+    padding-left: 20px;
+}
+
+.css-accordion input:checked + label + .content {
+    max-height: 300px;
+    padding: 15px;
+}
+
+.css-accordion input:checked + label {
+    background: #e8e8e8;
+}
+