From e827a093fb7a4919b671f5d0047eaba60efe0938 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 8 Apr 2025 15:48:09 +0500 Subject: [PATCH 1/7] 2 --- index.html | 20 +++++++++++++++++--- index.js | 38 +++++++++++++++++++++++++++++++++++++ styles.css | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 846cf93..05ae6c1 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,21 @@ - - + + + + + +
+
+ +

That's all, folks

+

You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.

+

If you like this you would probably enjoy Merry, reveal.js and stroll.js.

+ +
+
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..49f5487 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,41 @@ +// Закрытие по кнопке "крестик" +document.getElementById('closeModal').onclick = function () { + document.getElementById('modalOverlay').style.display = 'none'; +}; + +// Закрытие по кнопке "Close" +document.getElementById('closeButton').onclick = function () { + document.getElementById('modalOverlay').style.display = 'none'; +}; + +// Закрытие при клике вне модального окна +window.onclick = function(event) { + const overlay = document.getElementById('modalOverlay'); + if (event.target === overlay) { + overlay.style.display = 'none'; + } +}; + +// Закрытие по нажатию ESC +document.addEventListener('keydown', function(event) { + if (event.key === "Escape") { + document.getElementById('modalOverlay').style.display = 'none'; + } +}); + +// Показ по кнопке (если добавишь кнопку в HTML) +/* +document.getElementById('showModalBtn').onclick = function () { + document.getElementById('modalOverlay').style.display = 'flex'; +}; +*/ +/* + Изменить элементу цвет и ширину можно вот так: + + const element = document.querySelector('.myElement'); + element.style.color = 'red'; + element.style.width = '300px'; +*/ /* Изменить элементу цвет и ширину можно вот так: diff --git a/styles.css b/styles.css index e69de29..2edebc4 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,55 @@ +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; + padding: 24px; + border-radius: 4px; + 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: 20px; + cursor: pointer; +} + +.modal h2 { + margin-top: 0; +} + +.modal a { + color: #4CAF50; + text-decoration: none; +} + +.modal .green-btn { + margin-top: 16px; + background-color: #4CAF50; + color: white; + padding: 8px 16px; + border: none; + cursor: pointer; + border-radius: 4px; +} From e3ea80901fd51d7dd2b28780fb8bd1ca76381b3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 8 Apr 2025 15:55:47 +0500 Subject: [PATCH 2/7] 3 --- index.html | 24 +++++++++++++++--------- index.js | 43 +++++++++---------------------------------- styles.css | 50 ++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 64 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index 05ae6c1..1c1a09a 100644 --- a/index.html +++ b/index.html @@ -2,22 +2,28 @@ - Практика позиционирования + Модалка с прогресс-баром - - - - +
-

That's all, folks

-

You can hit ESC or click outside to close the modal. Give it a go to see the reverse transition.

-

If you like this you would probably enjoy Merry, reveal.js and stroll.js.

- +

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

+ + +
+
+
+
+ Loading... +
+
+
+ +
diff --git a/index.js b/index.js index 49f5487..b27f7c1 100644 --- a/index.js +++ b/index.js @@ -1,45 +1,20 @@ -// Закрытие по кнопке "крестик" -document.getElementById('closeModal').onclick = function () { +// Закрытие по кнопке +document.getElementById('closeModal').onclick = () => { document.getElementById('modalOverlay').style.display = 'none'; }; - -// Закрытие по кнопке "Close" -document.getElementById('closeButton').onclick = function () { +document.getElementById('closeButton').onclick = () => { document.getElementById('modalOverlay').style.display = 'none'; }; -// Закрытие при клике вне модального окна -window.onclick = function(event) { +// Закрытие по клику вне окна +window.onclick = (e) => { const overlay = document.getElementById('modalOverlay'); - if (event.target === overlay) { - overlay.style.display = 'none'; - } + if (e.target === overlay) overlay.style.display = 'none'; }; -// Закрытие по нажатию ESC -document.addEventListener('keydown', function(event) { - if (event.key === "Escape") { +// ESC +document.addEventListener('keydown', (e) => { + if (e.key === "Escape") { document.getElementById('modalOverlay').style.display = 'none'; } }); - -// Показ по кнопке (если добавишь кнопку в HTML) -/* -document.getElementById('showModalBtn').onclick = function () { - document.getElementById('modalOverlay').style.display = 'flex'; -}; -*/ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file diff --git a/styles.css b/styles.css index 2edebc4..d98702e 100644 --- a/styles.css +++ b/styles.css @@ -35,16 +35,7 @@ body { cursor: pointer; } -.modal h2 { - margin-top: 0; -} - -.modal a { - color: #4CAF50; - text-decoration: none; -} - -.modal .green-btn { +.green-btn { margin-top: 16px; background-color: #4CAF50; color: white; @@ -53,3 +44,42 @@ body { cursor: pointer; border-radius: 4px; } + +.progress-container { + margin-top: 20px; +} + +.progress-bar { + position: relative; + width: 100%; + height: 40px; + background-color: #ccc; + overflow: hidden; +} + +.progress-fill { + position: absolute; + height: 100%; + width: 30%; /* Измени процент для имитации прогресса */ + background-color: red; + z-index: 1; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + font-weight: bold; + white-space: nowrap; + z-index: 2; +} + +.progress-text .white { + color: white; +} + +.progress-text .black { + color: black; +} From f92aa40cac6a220ee0e037d5c2b14e1287efd4d0 Mon Sep 17 00:00:00 2001 From: EgorKolovev <118982453+EgorKolovev@users.noreply.github.com> Date: Tue, 8 Apr 2025 16:03:54 +0500 Subject: [PATCH 3/7] task1 --- index.html | 13 ++++++++++--- index.js | 3 --- styles.css | 24 +++++++++++++++++++++++- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 1c1a09a..25d4d96 100644 --- a/index.html +++ b/index.html @@ -2,18 +2,16 @@ - Модалка с прогресс-баром + Модалка с прогресс-баром и логотипами -

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

-
@@ -27,6 +25,15 @@

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

+
+
+ Logo 1 +
+
+ Logo 2 +
+
+ diff --git a/index.js b/index.js index b27f7c1..a87cf18 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ -// Закрытие по кнопке document.getElementById('closeModal').onclick = () => { document.getElementById('modalOverlay').style.display = 'none'; }; @@ -6,13 +5,11 @@ document.getElementById('closeButton').onclick = () => { document.getElementById('modalOverlay').style.display = 'none'; }; -// Закрытие по клику вне окна window.onclick = (e) => { const overlay = document.getElementById('modalOverlay'); if (e.target === overlay) overlay.style.display = 'none'; }; -// ESC document.addEventListener('keydown', (e) => { if (e.key === "Escape") { document.getElementById('modalOverlay').style.display = 'none'; diff --git a/styles.css b/styles.css index d98702e..7ff1317 100644 --- a/styles.css +++ b/styles.css @@ -60,7 +60,7 @@ body { .progress-fill { position: absolute; height: 100%; - width: 30%; /* Измени процент для имитации прогресса */ + width: 30%; background-color: red; z-index: 1; } @@ -83,3 +83,25 @@ body { .progress-text .black { color: black; } + +.logos { + display: flex; + gap: 20px; + margin: 20px; +} + +.logo-container { + width: 100px; + height: 100px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #ddd; +} + +.logo-container img { + max-width: 100%; + max-height: 100%; + display: block; +} From 0d9784a886d7093780a635bd85f497b5b6c129b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 8 Apr 2025 16:08:20 +0500 Subject: [PATCH 4/7] 4 --- index.js | 55 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/index.js b/index.js index a87cf18..c02290d 100644 --- a/index.js +++ b/index.js @@ -1,17 +1,40 @@ -document.getElementById('closeModal').onclick = () => { - document.getElementById('modalOverlay').style.display = 'none'; -}; -document.getElementById('closeButton').onclick = () => { - document.getElementById('modalOverlay').style.display = 'none'; -}; - -window.onclick = (e) => { - const overlay = document.getElementById('modalOverlay'); - if (e.target === overlay) overlay.style.display = 'none'; -}; - -document.addEventListener('keydown', (e) => { - if (e.key === "Escape") { - document.getElementById('modalOverlay').style.display = 'none'; +// Получаем элементы +const progressFill = document.querySelector('.progress-fill'); +const whiteText = document.querySelector('.progress-text .white'); +const blackText = document.querySelector('.progress-text .black'); + +// Начальные значения +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 + '%'; + + // Пример адаптации текста: меняем длину белой части "Lo" в зависимости от ширины + const totalLength = "Loading...".length; + 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); + const redText = letters.slice(0, redChars).join(''); + const blackTextPart = letters.slice(redChars).join(''); + + whiteText.textContent = redText; + blackText.textContent = blackTextPart; + +}, 1000 / fps); From b4fa6b7b5bde79f4d1b01155c87adb74177800df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 8 Apr 2025 16:18:43 +0500 Subject: [PATCH 5/7] 5 50/50 --- index.html | 30 +++++++++++++++++ index.js | 43 ++++++++++++++++++------ styles.css | 95 ++++++++++++++++++++++++++++++++++-------------------- 3 files changed, 124 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index 25d4d96..711edae 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,13 @@ +

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

+
@@ -21,10 +23,38 @@

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

+ +
+
+ + +
+

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

+
+
+ +
+ + +
+

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

+
+
+ +
+ + +
+

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

+
+
+
+
+
Logo 1 diff --git a/index.js b/index.js index c02290d..69959f6 100644 --- a/index.js +++ b/index.js @@ -1,13 +1,12 @@ -// Получаем элементы +// Анимация прогресс-бара const progressFill = document.querySelector('.progress-fill'); const whiteText = document.querySelector('.progress-text .white'); const blackText = document.querySelector('.progress-text .black'); -// Начальные значения let progress = 0; const duration = 3000; // 3 секунды -const fps = 60; // кадров в секунду -const step = 100 / (duration / (1000 / fps)); // сколько % добавлять за кадр +const fps = 60; +const step = 100 / (duration / (1000 / fps)); const interval = setInterval(() => { progress += step; @@ -17,14 +16,9 @@ const interval = setInterval(() => { clearInterval(interval); } - // Обновляем ширину красного заполнения progressFill.style.width = progress + '%'; - // Пример адаптации текста: меняем длину белой части "Lo" в зависимости от ширины - const totalLength = "Loading...".length; const letters = "Loading...".split(""); - - // Находим, сколько символов попали на красный фон const progressContainer = document.querySelector('.progress-bar'); const totalWidth = progressContainer.offsetWidth; const redWidth = progressFill.offsetWidth; @@ -38,3 +32,34 @@ const interval = setInterval(() => { 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 7ff1317..6da914a 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* Оверлей и модалка */ body { margin: 0; font-family: sans-serif; @@ -20,88 +21,112 @@ body { position: relative; background: white; width: 640px; + max-height: 90vh; + overflow-y: auto; padding: 24px; - border-radius: 4px; + 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: 20px; - cursor: pointer; -} - -.green-btn { - margin-top: 16px; - background-color: #4CAF50; - color: white; - padding: 8px 16px; - border: none; + font-size: 24px; cursor: pointer; - border-radius: 4px; } +/* Прогресс-бар */ .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: 30%; + width: 0%; background-color: red; z-index: 1; + transition: width 0.3s; } - .progress-text { position: absolute; + width: 100%; + text-align: center; top: 50%; - left: 50%; - transform: translate(-50%, -50%); + transform: translateY(-50%); font-size: 24px; font-weight: bold; - white-space: nowrap; z-index: 2; + white-space: nowrap; } - .progress-text .white { color: white; } - .progress-text .black { color: black; } -.logos { - display: flex; - gap: 20px; - margin: 20px; +/* Аккордеон */ +.accordion { + margin: 20px 0; + border-top: 1px solid #ccc; } - -.logo-container { - width: 100px; - height: 100px; +.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; - display: flex; - align-items: center; - justify-content: center; - border: 1px solid #ddd; + 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: 100%; - max-height: 100%; + 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; +} From 7aefd75fd1ef3479ba048ae4ba6994980303f883 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 8 Apr 2025 16:21:49 +0500 Subject: [PATCH 6/7] 5 100/50 --- index.html | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 711edae..d3800f0 100644 --- a/index.html +++ b/index.html @@ -23,33 +23,6 @@

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

- -
-
- - -
-

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

-
-
- -
- - -
-

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

-
-
- -
- - -
-

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

-
-
-
-
@@ -64,6 +37,33 @@

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

+ +
+
+ + +
+

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

+
+
+ +
+ + +
+

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

+
+
+ +
+ + +
+

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

+
+
+
+ From 814c5a0e2e45cb6563a51ab8641b82853ec1226b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9C=D0=B8=D1=85=D0=B0=D0=B8=D0=BB=20=D0=92=D0=BB=D0=B0?= =?UTF-8?q?=D0=B4=D0=B8=D0=BC=D0=B8=D1=80=D0=BE=D0=B2?= Date: Tue, 8 Apr 2025 16:30:57 +0500 Subject: [PATCH 7/7] full 5 --- index.html | 3 --- index.js | 3 +-- styles.css | 6 ------ 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/index.html b/index.html index d3800f0..7549c0a 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ -
@@ -27,7 +26,6 @@

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

-
Logo 1 @@ -37,7 +35,6 @@

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

-
diff --git a/index.js b/index.js index 69959f6..dd20e9d 100644 --- a/index.js +++ b/index.js @@ -24,7 +24,7 @@ const interval = setInterval(() => { const redWidth = progressFill.offsetWidth; const percentRed = redWidth / totalWidth; - const redChars = Math.round(letters.length * percentRed); + const redChars = Math.round(letters.length * percentRed) + 3; const redText = letters.slice(0, redChars).join(''); const blackTextPart = letters.slice(redChars).join(''); @@ -33,7 +33,6 @@ const interval = setInterval(() => { }, 1000 / fps); -// === Закрытие модального окна === // document.addEventListener("DOMContentLoaded", () => { const overlay = document.getElementById('modalOverlay'); const closeModal = document.getElementById('closeModal'); diff --git a/styles.css b/styles.css index 6da914a..f0e9df2 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,3 @@ -/* Оверлей и модалка */ body { margin: 0; font-family: sans-serif; @@ -28,7 +27,6 @@ body { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } -/* Кнопка закрытия */ .close-btn { position: absolute; top: 10px; @@ -39,7 +37,6 @@ body { cursor: pointer; } -/* Прогресс-бар */ .progress-container { margin-top: 20px; } @@ -77,7 +74,6 @@ body { color: black; } -/* Аккордеон */ .accordion { margin: 20px 0; border-top: 1px solid #ccc; @@ -107,7 +103,6 @@ body { padding: 12px; } -/* Логотипы */ .logos { display: flex; justify-content: space-around; @@ -120,7 +115,6 @@ body { display: block; } -/* Кнопка закрытия */ .green-btn { margin-top: 20px; background-color: #4CAF50;