kontur-web-courses · vbolgarskay · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/index.html b/index.html
@@ -1,12 +1,73 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Практика позиционирования</title>
-    <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-    <!--Верстать тут-->
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <img class="square-logo" src="designs/logo1.png" />
+    <img class="square-logo" src="designs/logo3.jpg" />
+
+    <button id="openModalBtn" class="btn">Открыть модальное окно</button>
+
+    <div class="modal" id="modal">
+      <button class="close-btn" id="closeModalBtn">&times;</button>
+      <div class="modal-content">
+        <div class="progress-container">
+          <div class="progress-bar" id="progressBar">
+            <div class="progress-fill" id="progressFill"></div>
+            <span class="progress-text" id="progressText">Loading...</span>
+          </div>
+        </div>
+        <div class="accordion">
+          <div class="accordion-item">
+            <input type="checkbox" id="item1" class="accordion-input" />
+            <label for="item1" class="accordion-label">Что такое HTML?</label>
+            <div class="accordion-content">
+              <p>
+                HTML (HyperText Markup Language) - это стандартный язык разметки
+                для создания веб-страниц. Он определяет структуру и содержание
+                веб-страницы, используя различные элементы и теги.
+              </p>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <input type="checkbox" id="item2" class="accordion-input" />
+            <label for="item2" class="accordion-label"
+              >Основные принципы CSS</label
+            >
+            <div class="accordion-content">
+              <p>
+                CSS (Cascading Style Sheets) - это язык стилей, который
+                определяет внешний вид HTML-документов. Основные принципы
+                включают каскадирование, наследование и специфичность
+                селекторов.
+              </p>
+            </div>
+          </div>
+
+          <div class="accordion-item">
+            <input type="checkbox" id="item3" class="accordion-input" />
+            <label for="item3" class="accordion-label"
+              >Зачем нужен JavaScript?</label
+            >
+            <div class="accordion-content">
+              <p>
+                JavaScript - это язык программирования, который добавляет
+                интерактивность веб-страницам. Он позволяет создавать
+                динамически обновляемый контент, анимации, обрабатывать
+                пользовательские события и многое другое.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="overlay" id="overlay"></div>
+
     <script src="index.js"></script>
-</body>
-</html>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -1,7 +1,74 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
+document.addEventListener('DOMContentLoaded', function () {
+  const modal = document.getElementById('modal');
+  const overlay = document.getElementById('overlay');
+  const openModalBtn = document.getElementById('openModalBtn');
+  const closeModalBtn = document.getElementById('closeModalBtn');
+  const progressFill = document.getElementById('progressFill');
+  const progressText = document.getElementById('progressText');
+  const progressBar = document.getElementById('progressBar');
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+  openModalBtn.addEventListener('click', function () {
+    modal.style.display = 'block';
+    overlay.style.display = 'block';
+    startProgressAnimation();
+  });
+
+  closeModalBtn.addEventListener('click', function () {
+    modal.style.display = 'none';
+    overlay.style.display = 'none';
+  });
+
+  function startProgressAnimation() {
+    let progress = 0;
+    progressFill.style.width = '0';
+    progressText.textContent = 'Loading...';
+    progressText.style.color = '#000';
+
+    const text = progressText.textContent;
+    progressText.textContent = '';
+
+    const letters = [];
+    for (let i = 0; i < text.length; i++) {
+      const span = document.createElement('span');
+      span.textContent = text[i];
+      span.style.position = 'relative';
+      span.style.zIndex = '2';
+      progressText.appendChild(span);
+      letters.push(span);
+    }
+
+    const duration = 3000;
+    const startTime = performance.now();
+
+    function updateProgress(currentTime) {
+      const elapsedTime = currentTime - startTime;
+      progress = Math.min((elapsedTime / duration) * 100, 100);
+      progressFill.style.width = `${progress}%`;
+
+      const barRect = progressBar.getBoundingClientRect();
+      const fillWidth = barRect.width * (progress / 100);
+
+      letters.forEach((letter) => {
+        const letterRect = letter.getBoundingClientRect();
+        const letterLeft = letterRect.left - barRect.left;
+
+        if (letterLeft < fillWidth) {
+          letter.style.color = '#fff';
+        } else {
+          letter.style.color = '#000';
+        }
+      });
+
+      if (progress < 100) {
+        requestAnimationFrame(updateProgress);
+      } else {
+        setTimeout(() => {
+          modal.style.display = 'none';
+          overlay.style.display = 'none';
+        }, 500);
+      }
+    }
+
+    requestAnimationFrame(updateProgress);
+  }
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,172 @@
+.square-logo {
+  border: 1px solid #222;
+  overflow: hidden;
+  width: 100px;
+  height: 100px;
+  margin: 10px;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+  display: none;
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 640px;
+  max-width: 90%;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  z-index: 1001;
+  display: none;
+}
+
+.modal-content {
+  padding: 30px;
+}
+
+.close-btn {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #777;
+  padding: 5px;
+  line-height: 1;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+.btn {
+  background: #4caf50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 16px;
+}
+
+.btn:hover {
+  background: #45a049;
+}
+
+.progress-container {
+  width: 100%;
+  margin: 20px 0;
+}
+
+.progress-bar {
+  height: 40px;
+  background-color: #e0e0e0;
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+}
+
+.progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  background-color: #f44336;
+  border-radius: 20px;
+  transition: width 0.1s linear;
+  pointer-events: none;
+  will-change: color;
+}
+
+.progress-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-weight: bold;
+  font-size: 16px;
+  color: #000;
+  z-index: 2;
+  width: 100%;
+  text-align: center;
+  will-change: width;
+}
+
+.white-text {
+  color: #fff;
+}
+
+.accordion {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.accordion-item {
+  margin-bottom: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.accordion-input {
+  display: none;
+}
+
+.accordion-label {
+  display: block;
+  padding: 12px 20px;
+  background-color: #f5f5f5;
+  color: #333;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.3s;
+  position: relative;
+}
+
+.accordion-label:hover {
+  background-color: #e9e9e9;
+}
+
+.accordion-label::after {
+  content: '+';
+  position: absolute;
+  right: 20px;
+  font-size: 18px;
+  transition: transform 0.3s;
+}
+
+.accordion-input:checked ~ .accordion-label::after {
+  content: '-';
+}
+
+.accordion-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  padding: 0 20px;
+  background-color: #fff;
+}
+
+.accordion-input:checked ~ .accordion-content {
+  max-height: 300px;
+  padding: 15px 20px;
+}
+
+.accordion-content p {
+  margin: 0;
+  padding: 5px 0;
+}