diff --git a/index.html b/index.html index 846cf93..7549c0a 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,65 @@ - Практика позиционирования + Модалка с прогресс-баром и логотипами - - + +
+
+ +

Прогресс загрузки

+ + +
+
+
+
+ Loading... +
+
+
+ + +
+
+ +
+
+ Logo 1 +
+
+ Logo 2 +
+
+ +
+
+ + +
+

Frontend — это часть веб-разработки, отвечающая за отображение и взаимодействие с пользователем. HTML, CSS и JavaScript — основные технологии.

+
+
+ +
+ + +
+

Backend — это логика приложения на сервере, работа с базами данных, авторизация, обработка запросов. Используются языки как PHP, Python, Node.js.

+
+
+ +
+ + +
+

UX/UI дизайнер разрабатывает визуальный стиль приложения и взаимодействие пользователя с системой. Занимается прототипами, юзабилити, визуалом.

+
+
+
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..dd20e9d 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,64 @@ -/* - Изменить элементу цвет и ширину можно вот так: +// Анимация прогресс-бара +const progressFill = document.querySelector('.progress-fill'); +const whiteText = document.querySelector('.progress-text .white'); +const blackText = document.querySelector('.progress-text .black'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +let progress = 0; +const duration = 3000; // 3 секунды +const fps = 60; +const step = 100 / (duration / (1000 / fps)); + +const interval = setInterval(() => { + progress += step; + + if (progress >= 100) { + progress = 100; + clearInterval(interval); + } + + progressFill.style.width = progress + '%'; + + const letters = "Loading...".split(""); + const progressContainer = document.querySelector('.progress-bar'); + const totalWidth = progressContainer.offsetWidth; + const redWidth = progressFill.offsetWidth; + const percentRed = redWidth / totalWidth; + + const redChars = Math.round(letters.length * percentRed) + 3; + const redText = letters.slice(0, redChars).join(''); + const blackTextPart = letters.slice(redChars).join(''); + + whiteText.textContent = redText; + blackText.textContent = blackTextPart; + +}, 1000 / fps); + +document.addEventListener("DOMContentLoaded", () => { + const overlay = document.getElementById('modalOverlay'); + const closeModal = document.getElementById('closeModal'); + const closeButton = document.getElementById('closeButton'); + + if (closeModal) { + closeModal.addEventListener('click', () => { + overlay.style.display = 'none'; + }); + } + + if (closeButton) { + closeButton.addEventListener('click', () => { + overlay.style.display = 'none'; + }); + } + + window.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.style.display = 'none'; + } + }); + + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + overlay.style.display = 'none'; + } + }); +}); diff --git a/styles.css b/styles.css index e69de29..f0e9df2 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,126 @@ +body { + margin: 0; + font-family: sans-serif; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.modal { + position: relative; + background: white; + width: 640px; + max-height: 90vh; + overflow-y: auto; + padding: 24px; + border-radius: 6px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); +} + +.close-btn { + position: absolute; + top: 10px; + right: 12px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; +} + +.progress-container { + margin-top: 20px; +} +.progress-bar { + position: relative; + width: 100%; + height: 40px; + background-color: #ccc; + overflow: hidden; + margin-bottom: 16px; +} +.progress-fill { + position: absolute; + height: 100%; + width: 0%; + background-color: red; + z-index: 1; + transition: width 0.3s; +} +.progress-text { + position: absolute; + width: 100%; + text-align: center; + top: 50%; + transform: translateY(-50%); + font-size: 24px; + font-weight: bold; + z-index: 2; + white-space: nowrap; +} +.progress-text .white { + color: white; +} +.progress-text .black { + color: black; +} + +.accordion { + margin: 20px 0; + border-top: 1px solid #ccc; +} +.accordion-item { + border-bottom: 1px solid #ccc; +} +.accordion-item input { + display: none; +} +.accordion-item label { + display: block; + padding: 12px; + background-color: #f0f0f0; + cursor: pointer; + font-weight: bold; +} +.accordion-item .accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + background-color: #fafafa; + padding: 0 12px; +} +.accordion-item input:checked + label + .accordion-content { + max-height: 300px; + padding: 12px; +} + +.logos { + display: flex; + justify-content: space-around; + gap: 16px; + margin-top: 24px; +} +.logo-container img { + max-width: 100px; + height: auto; + display: block; +} + +.green-btn { + margin-top: 20px; + background-color: #4CAF50; + color: white; + padding: 10px 18px; + border: none; + border-radius: 4px; + cursor: pointer; +}