From c285507cadfc6b8d952b0dd0be764ed22deaa62d Mon Sep 17 00:00:00 2001 From: trueforme <144549632+trueforme@users.noreply.github.com> Date: Tue, 8 Apr 2025 18:16:30 +0500 Subject: [PATCH 1/2] first_2_tasks --- index.html | 30 +++++++++++++++++++++------ styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 846cf93..35fba23 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,30 @@ - - Практика позиционирования - + + Практика позиционирования + - - +

Логотипы

+
+
+ Логотип 4 +
+
+ Логотип 5 +
+
+
+
+ +
+

МАДАЛЬНАЕ окно

+

ГОООООООООООООООООООООООООООООООООООООЛ

+
+
+
+ + - \ No newline at end of file + diff --git a/styles.css b/styles.css index e69de29..3002ce3 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,59 @@ +.logo-container { + display: flex; + gap: 20px; + padding: 20px; + } + + .logo-box { + width: 100px; + height: 100px; + overflow: hidden; + border: 1px solid #ccc; + display: flex; + align-items: center; + justify-content: center; + } + + .logo-box img { + max-width: 100%; + max-height: 100%; + transform: rotate(0deg); + } + + .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; + } + + .overlay.active { + display: flex; + } + + .modal { + width: 640px; + background: #fff; + padding: 20px; + position: relative; + } + + .close-btn { + position: absolute; + top: 10px; + right: 10px; + border: none; + background: transparent; + font-size: 24px; + cursor: pointer; + } + + .modal-content h2 { + margin-top: 0; + } + \ No newline at end of file From ed7c03c5b258aa316d1223f4ad5041d0d80dd67b Mon Sep 17 00:00:00 2001 From: trueforme <144549632+trueforme@users.noreply.github.com> Date: Tue, 8 Apr 2025 18:58:23 +0500 Subject: [PATCH 2/2] NEW_VERSION_BATINS_COMPLETED_FULL_GRACIAS --- index.html | 65 +++++++++++++++-------- index.js | 36 ++++++++++--- styles.css | 150 +++++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 185 insertions(+), 66 deletions(-) diff --git a/index.html b/index.html index 35fba23..f9e7b3f 100644 --- a/index.html +++ b/index.html @@ -1,30 +1,53 @@ - - Практика позиционирования - + + + + Document -

Логотипы

-
-
- Логотип 4 + +
+ + +
-
- Логотип 5 -
-
-
-
- -
-

МАДАЛЬНАЕ окно

-

ГОООООООООООООООООООООООООООООООООООООЛ

-
-
-
- + + + + + + diff --git a/index.js b/index.js index dd50919..55241f9 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,31 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openModal = document.getElementById('openModalWindow'); +const modalOverlay = document.getElementById('setModalOverlay'); +const closeModal = document.getElementById('closeModalWindow'); +const progressFill = document.getElementById('progressFilled'); +const progressText = document.getElementById('progressText'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +openModal.addEventListener('click', () => { + modalOverlay.style.display = 'flex'; + startProgressBar(); +}); + +closeModal.addEventListener('click', () => { + modalOverlay.style.display = 'none'; + progressFill.style.width = '0%'; + progressText.textContent = 'Loading...'; +}); + +function startProgressBar() { + let width = 0; + const interval = setInterval(() => { + width++; + progressFill.style.width = `${width}%`; + progressText.style.setProperty('--progress', `${width}%`); + progressText.textContent = 'Loading...'; + + if (width >= 100) { + clearInterval(interval); + progressText.textContent = 'Complete!'; + } + }, 30); +} diff --git a/styles.css b/styles.css index 3002ce3..a733d4b 100644 --- a/styles.css +++ b/styles.css @@ -1,59 +1,131 @@ +/* Общее */ +body { + font-family: Arial, sans-serif; + margin: 20px; +} + +/* Логотипы */ .logo-container { display: flex; gap: 20px; - padding: 20px; - } - - .logo-box { +} + +.logo { width: 100px; height: 100px; + object-fit: contain; overflow: hidden; - border: 1px solid #ccc; - display: flex; - align-items: center; - justify-content: center; - } - - .logo-box img { - max-width: 100%; - max-height: 100%; - transform: rotate(0deg); - } - - .overlay { + border: 1px solid white; +} + +#openModalWindow { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; +} + +/* Модальное окно */ +.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.5); + background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; - } - - .overlay.active { - display: flex; - } - - .modal { - width: 640px; - background: #fff; +} + +.modal { + background: white; + width: 640px; padding: 20px; position: relative; - } - - .close-btn { + border-radius: 10px; +} + +.close { position: absolute; top: 10px; - right: 10px; - border: none; - background: transparent; + right: 15px; font-size: 24px; + border: none; + background: none; + cursor: pointer; +} + +/* Шкала прогресса */ +.progress-wrapper { + margin: 20px 0; +} + +.progress-bar { + position: relative; + width: 100%; + height: 30px; + background: #ccc; + border-radius: 5px; + overflow: hidden; +} + +.progress-fill { + background: red; + height: 100%; + width: 0; +} + +.progress-text { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 16px; + text-align: center; + + background: linear-gradient( + 90deg, + white 0%, + white var(--progress, 0%), + black var(--progress, 0%), + black 100% + ); + -webkit-background-clip: text; + color: transparent; +} + +/* Аккордеон */ +.accordion input { + display: none; +} + +.accordion label { + display: block; + background: #eee; + padding: 10px; + margin-top: 5px; cursor: pointer; - } - - .modal-content h2 { - margin-top: 0; - } - \ No newline at end of file + font-weight: bold; +} + +.accordion .content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + background: #f9f9f9; + padding: 0 10px; +} + +.accordion input:checked + label + .content { + max-height: 100px; + padding: 10px; +}