kontur-web-courses · VladaKhazova · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/.idea/.gitignore b/.idea/.gitignore
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,54 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+    <div class="container">
+        <div class="log1">
+            <div class="block1"></div>
+            <div class="block2"></div>
+            <div class="block3"></div>
+        </div>
+        <div class="japan" >
+            <div class="circle" ></div>
+        </div>
+    </div>
+
+    <div class="overlay" id="modal">
+        <div class="modal">
+            <button class="close-btn" onclick="closeModal()">×</button>
+            <h2>Модальное окно</h2>
+            <p>Это модальное окно.</p>
+            <p>Ты можешь нажать <a href="#">меня</a> или <a href="#">меня</a>.</p>
+            <div class="progress-bar">
+                <div class="progress-text back">Loading...</div>
+                <div class="progress">
+                    <div class="progress-text front">Loading...</div>
+                </div>
+            </div>
+            <div class="accordion">
+                <div class="accordion-item">
+                    <input type="checkbox" id="item1" hidden>
+                    <label for="item1" class="accordion-title">Или меня!</label>
+                    <div class="accordion-content">
+                        Спасибо, что нажал! мне очень приятно это <3!
+                    </div>
+                </div>
+                <div class="accordion-item">
+                    <input type="checkbox" id="item2" hidden>
+                    <label for="item2" class="accordion-title">Узнатешь что то новое ;)</label>
+                    <div class="accordion-content">
+                        Интернет возник как исследовательский проект ARPANET в США и стал основой глобальной информационной среды.
+                    </div>
+                </div>
+                <div class="accordion-item">
+                    <input type="checkbox" id="item3" hidden>
+                    <label for="item3" class="accordion-title">не нажимай 👀</label>
+                    <div class="accordion-content">
+                        закрой меня
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,14 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
-
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+const element = document.querySelector('.progress');
+let current = 0;
+const totalFrames = 180;
+const duration = 3000;
+const intervalTime = duration / totalFrames;
+const step = 100 / totalFrames;
+const interval = setInterval(() => {
+    current += step;
+    if (current >= 100) {
+        current = 100;
+        clearInterval(interval);
+    }
+    element.style.width = current + '%';
+}, intervalTime);
diff --git a/styles.css b/styles.css
@@ -0,0 +1,197 @@
+body {
+    margin: 10px;
+}
+
+.container {
+    display: flex;
+    gap: 10px;
+}
+
+.japan {
+    width: 100px;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid black;
+}
+
+.circle {
+    width: 70px;
+    height: 70px;
+    background-color: #BC002C;
+    border-radius: 50%;
+}
+
+.log1 {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+}
+
+.log1 div {
+    position: absolute;
+    width: 25px;
+    height: 50px;
+    background: black;
+    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+    transform: rotate(0deg);
+}
+
+.log1 div.block1 {
+    top: 0;
+    left: 25%;
+    transform: translate(50%, 25%) rotate(0deg);
+}
+
+.log1 div.block2 {
+    bottom: 0;
+    left: 0;
+    transform: translateX(60%) rotate(60deg);
+}
+
+.log1 div.block3 {
+    bottom: 0;
+    right: 0;
+    transform: translateX(-60%) rotate(300deg);
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+}
+
+.modal {
+    background: #fff;
+    width: 640px;
+    max-width: 90%;
+    border-radius: 8px;
+    padding: 20px 30px;
+    position: relative;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+}
+
+.close-btn {
+    position: absolute;
+    top: 15px;
+    right: 20px;
+    font-size: 22px;
+    font-weight: bold;
+    color: #999;
+    cursor: pointer;
+    border: none;
+    background: none;
+}
+
+.close-btn:hover {
+    color: #000;
+}
+
+.modal a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.modal a:hover {
+    text-decoration: underline;
+}
+
+.modal .footer-button {
+    margin-top: 20px;
+}
+
+.footer-button button {
+    padding: 10px 20px;
+    background: #5cae69;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.footer-button button:hover {
+    background: #4b9c5b;
+}
+
+.progress-bar {
+    position: relative;
+    width: 300px;
+    height: 40px;
+    background-color: #ccc;
+    margin: 20px auto;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.progress-text.back {
+    color: black;
+    z-index: 1;
+}
+
+.progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 100%;
+    background-color: red;
+    z-index: 2;
+    overflow: hidden;
+}
+
+.progress-text.front {
+    color: white;
+    text-align: center;
+    line-height: 40px;
+    z-index: 3;
+    position: absolute;
+    width: 300px;
+    left: 0;
+}
+
+.accordion {
+    margin-top: 30px;
+}
+
+.accordion-item {
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.accordion-title {
+    display: block;
+    padding: 15px;
+    background-color: #f2f2f2;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s;
+}
+
+.accordion-title:hover {
+    background-color: #e0e0e0;
+}
+
+.accordion-content {
+    max-height: 0;
+    transition: max-height 0.3s ease, padding 0.3s ease;
+    padding: 0 15px;
+    background: #fafafa;
+}
+
+input[type="checkbox"]:checked ~ .accordion-content {
+    max-height: 200px;
+    padding: 15px;
+}