kontur-web-courses · Dabbler10 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/index.html b/index.html
@@ -6,7 +6,35 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+    <image class="logo" src="designs/logo3.jpg"></image>
+    <image class="logo" src="designs/logo6.png"></image>
+    <button class="open-modal-btn">Показать окно</button>
+    <div class="overlay">
+        <div class="modal">
+            <input type="checkbox" name="acor" id="acor1"/>
+            <label for="acor1">Заголовок вкладки</label>
+            <div class="modal-body">
+                <p>Описание вкладки</p>
+            </div>
+
+            <input type="checkbox" name="acor" id="acor2" />
+            <label for="acor2">Бедбар</label>
+            <div class="modal-body">
+                <div class="progress-container" style="--progress: 40;">
+                    <div class="progress-bar"></div>
+                    <div class="progress-text">Loading...</div>
+                </div>
+            </div>
+
+            <input type="checkbox" name="acor" id="acor3" />
+            <label for="acor3">2</label>
+            <div class="modal-body">
+                <h2>Гойда</h2>
+            </div>
+            <button class="close-btn">×</button>
+            <button class="close-btn">
+        </div>
+    </div>
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,41 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+document.addEventListener('DOMContentLoaded', function() {
+    const overlay = document.querySelector('.overlay');
+    const openBtn = document.querySelector('.open-modal-btn');
+
+    function openModal() {
+        overlay.style.display = 'flex';
+    }
+
+    function closeModal() {
+        overlay.style.display = 'none';
+    }
+
+    openBtn.addEventListener('click', openModal);
+
+    document.querySelectorAll('.close-btn').forEach(btn => {
+        btn.addEventListener('click', closeModal);
+    });
+});
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+const openBtn = document.querySelector('.open-modal-btn');
+
+openBtn.addEventListener("click", function(){
+    const progressContainer = document.querySelector('.progress-container');
+    const progressBar = document.querySelector('.progress-bar');
+    let progress = 0;
+
+    const totalTime = 3000;
+    const intervalTime = 10;
+    const steps = totalTime / intervalTime;
+    const stepIncrease = 100 / steps;
+
+    const intervalId = setInterval(() => {
+        progress += stepIncrease;
+        if (progress >= 100) {
+            progress = 100;
+            clearInterval(intervalId);
+        }
+        progressBar.style.width = progress + '%';
+        progressContainer.style.setProperty('--progress', progress);
+    }, intervalTime);
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,133 @@
+.logo {
+    overflow: hidden;
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+}
+
+.progress-container {
+    position: relative;
+    width: 400px;
+    height: 40px;
+    background-color: #ccc;
+    font-family: sans-serif;
+}
+
+.progress-bar {
+    position: absolute;
+    height: 100%;
+    width: calc(var(--progress) * 1%);
+    background-color: red;
+}
+
+.progress-text {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    font-weight: bold;
+    background: linear-gradient(
+            90deg,
+            white calc(var(--progress) * 1%),
+            black calc(var(--progress) * 1%)
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.5);
+    display: none;
+    justify-content: center;
+    align-items: center;
+}
+
+.open-modal-btn {
+    padding: 10px 20px;
+    background: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    margin: 20px;
+}
+
+.open-modal-btn:hover {
+    background: #45a049;
+}
+
+
+.modal {
+    width: 640px;
+    background: white;
+    padding: 20px;
+    position: relative;
+    border-radius: 5px;
+}
+
+.close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    border: none;
+    background: none;
+    p: 10px;
+    font-size: 20px;
+}
+
+.close-btn:hover {
+    color: #666;
+}
+
+.modal .modal-body {
+    width: calc(100% - 40px);
+    margin: 0 auto;
+    height: 0;
+    color: rgba(0, 0, 0, 0);
+    background-color: #ffff;
+    line-height: 18px;
+    padding: 0 30px;
+    box-sizing: border-box;
+    transition: color 0.5s, padding 0.5s;
+    overflow: hidden;
+}
+
+.modal label {
+    cursor: pointer;
+    background-color: #666666;
+    display: block;
+    padding: 15px 20px;
+    width: 100%;
+    font-weight: 300;
+    box-sizing: border-box;
+    z-index: 100;
+    font-family: Verdana, sans-serif;
+    font-size: 18px;
+    margin: 0 0 5px;
+    transition: color .35s;
+}
+.modal input{
+    display: none;
+}
+
+.modal label:before {
+    content: '\276F';
+    float: right;
+}
+
+.modal input:checked + label + .modal-body {
+    height: auto;
+    margin-top: -5px;
+    color: #000;
+    padding: 20px 30px 10px;
+}