From b0ba9751ddef2b34cf0fc0fdc75a64cafd2cbaa3 Mon Sep 17 00:00:00 2001 From: Firsikita Date: Tue, 8 Apr 2025 15:57:09 +0500 Subject: [PATCH 1/6] 1-2 --- index.html | 26 +++++++++- index.js | 20 +++++++- styles.css | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 188 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..9e2c58f 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,31 @@ - +
+
+
+
+
+ +
+
+
+
+
+
+ + + +
+
+ +
+

Привет!

+

Это модальное окно. дффцпкоцфпкошкфцзшпаофцзщумкзтйцгефэзтет шркижефгцтзмущшфэцхтишщефцктрмедфищцуежфтцмежщрЦИ.

+
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..81a1f4d 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,22 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const openModalBtn = document.getElementById('openModalBtn'); +const closeModalBtn = document.getElementById('closeModalBtn'); +const overlay = document.getElementById('overlay'); + +openModalBtn.addEventListener('click', () => { + overlay.classList.add('active'); +}); + +closeModalBtn.addEventListener('click', () => { + overlay.classList.remove('active'); +}); + +overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.classList.remove('active'); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..8b4f792 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,144 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + min-height: 100vh; + margin: 0; + background-color: #f5f5f5; + padding: 20px; +} + +/* Mickey logo */ +.logo-mickey { + position: relative; + width: 100px; + height: 100px; +} + +.logo-mickey .head { + width: 60px; + height: 60px; + background: black; + border-radius: 50%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.logo-mickey .ear { + width: 30px; + height: 30px; + background: black; + border-radius: 50%; + position: absolute; + top: 0; +} + +.logo-mickey .ear.left { + left: 5px; +} + +.logo-mickey .ear.right { + right: 5px; +} + +/* Microsoft logo */ +.logo-microsoft { + width: 100px; + height: 100px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 10px; + background: white; +} + +.logo-microsoft .square { + width: 55px; + height: 55px; +} + +.logo-microsoft .red { + background-color: #F25022; +} + +.logo-microsoft .green { + background-color: #7FBA00; +} + +.logo-microsoft .blue { + background-color: #00A4EF; +} + +.logo-microsoft .yellow { + background-color: #FFB900; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + + +/* Кнопка открытия */ +#openModalBtn { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +/* Оверлей */ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); /* затемнение */ + display: flex; + justify-content: center; + align-items: center; + visibility: hidden; + opacity: 0; + transition: opacity 0.3s ease; + z-index: 1000; +} + +/* Модалка */ +.modal { + position: relative; + background: #fff; + width: 640px; + padding: 20px; + border-radius: 8px; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); +} + +/* Контент модалки */ +.modal-content { + margin-top: 10px; +} + +/* Кнопка закрытия */ +.close-btn { + position: absolute; + top: 10px; + right: 10px; + background: transparent; + border: none; + font-size: 24px; + cursor: pointer; +} + +/* Показ модалки */ +.overlay.active { + visibility: visible; + opacity: 1; +} \ No newline at end of file From 3092f3a29c4ae98696bbdb57ced6a11c2c5b9773 Mon Sep 17 00:00:00 2001 From: mmdoneperson Date: Tue, 8 Apr 2025 16:04:52 +0500 Subject: [PATCH 2/6] add tasks 3, 4 --- index.html | 44 +++++++++++++++++--------------- index.js | 59 +++++++++++++++++++++++++++++++++++++------ styles.css | 74 ++++++++++++++++++++++++++++++++++++++---------------- 3 files changed, 128 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 9e2c58f..935e079 100644 --- a/index.html +++ b/index.html @@ -6,31 +6,35 @@ -
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
- + -
-
- -
+
+
+ +

Привет!

-

Это модальное окно. дффцпкоцфпкошкфцзшпаофцзщумкзтйцгефэзтет шркижефгцтзмущшфэцхтишщефцктрмедфищцуежфтцмежщрЦИ.

-
+

Это модальное окно с прогресс-баром.

+
+
+
+
+
- + - \ No newline at end of file + diff --git a/index.js b/index.js index 81a1f4d..70e61e1 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,50 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const progressBar = document.querySelector('.progress'); +const loadingText = document.getElementById('loadingText'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ +let animationStarted = false; +const text = 'Loading...'; + +text.split('').forEach(char => { + const span = document.createElement('span'); + span.textContent = char; + loadingText.appendChild(span); +}); + +const letterSpans = loadingText.querySelectorAll('span'); + +const animateProgress = () => { + const duration = 3000; + const startTime = Date.now(); + + const step = () => { + const elapsed = Date.now() - startTime; + const progress = Math.min(elapsed / duration, 1); + const percent = progress * 100; + progressBar.style.width = `${percent}%`; + + const barRect = progressBar.getBoundingClientRect(); + const barRight = barRect.left + barRect.width; + + letterSpans.forEach(span => { + const spanRect = span.getBoundingClientRect(); + const spanCenter = spanRect.left + spanRect.width / 2; + + if (spanCenter < barRight) { + span.style.color = 'white'; + } else { + span.style.color = 'black'; + } + }); + + if (progress < 1) { + requestAnimationFrame(step); + } else { + letterSpans.forEach(span => (span.style.color = 'white')); + } + }; + + requestAnimationFrame(step); +}; const openModalBtn = document.getElementById('openModalBtn'); const closeModalBtn = document.getElementById('closeModalBtn'); @@ -12,6 +52,11 @@ const overlay = document.getElementById('overlay'); openModalBtn.addEventListener('click', () => { overlay.classList.add('active'); + + if (!animationStarted) { + animateProgress(); + animationStarted = true; + } }); closeModalBtn.addEventListener('click', () => { @@ -22,4 +67,4 @@ overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.classList.remove('active'); } -}); \ No newline at end of file +}); diff --git a/styles.css b/styles.css index 8b4f792..5aa75ed 100644 --- a/styles.css +++ b/styles.css @@ -7,9 +7,10 @@ body { margin: 0; background-color: #f5f5f5; padding: 20px; + font-family: Arial, sans-serif; } -/* Mickey logo */ + .logo-mickey { position: relative; width: 100px; @@ -44,7 +45,7 @@ body { right: 5px; } -/* Microsoft logo */ + .logo-microsoft { width: 100px; height: 100px; @@ -76,32 +77,21 @@ body { background-color: #FFB900; } -body { - font-family: Arial, sans-serif; - margin: 0; - padding: 0; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; -} - -/* Кнопка открытия */ #openModalBtn { padding: 10px 20px; font-size: 16px; cursor: pointer; } -/* Оверлей */ + .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.6); /* затемнение */ + background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; @@ -111,7 +101,11 @@ body { z-index: 1000; } -/* Модалка */ +.overlay.active { + visibility: visible; + opacity: 1; +} + .modal { position: relative; background: #fff; @@ -121,7 +115,6 @@ body { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } -/* Контент модалки */ .modal-content { margin-top: 10px; } @@ -137,8 +130,45 @@ body { cursor: pointer; } -/* Показ модалки */ -.overlay.active { - visibility: visible; - opacity: 1; -} \ No newline at end of file +/* Прогресс-бар */ +.progress-bar { + background-color: #e0e0e0; + border-radius: 10px; + width: 100%; + height: 30px; + position: relative; + overflow: hidden; + margin-top: 20px; +} + +.progress { + width: 0%; + height: 100%; + background-color: #ff3333; + position: absolute; + top: 0; + left: 0; + transition: width 0.05s linear; +} + +.loading-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + z-index: 2; + pointer-events: none; + user-select: none; +} + +.loading-text span { + position: relative; + z-index: 3; + transition: color 0.1s; + white-space: pre; +} From 002f06ab37e3a8740a90552a0c62ffd6fb266584 Mon Sep 17 00:00:00 2001 From: Firsikita Date: Tue, 8 Apr 2025 16:12:42 +0500 Subject: [PATCH 3/6] =?UTF-8?q?=D1=80=D0=BE=D0=B2=D0=BD=D1=8F=D0=B5=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles.css | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/styles.css b/styles.css index 5aa75ed..ad7e280 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* Базовые стили */ body { display: flex; flex-direction: column; @@ -10,7 +11,7 @@ body { font-family: Arial, sans-serif; } - +/* Логотип Микки */ .logo-mickey { position: relative; width: 100px; @@ -18,47 +19,51 @@ body { } .logo-mickey .head { - width: 60px; - height: 60px; + width: 80px; + height: 80px; background: black; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); + z-index: 1; } .logo-mickey .ear { - width: 30px; - height: 30px; + width: 45px; + height: 45px; background: black; border-radius: 50%; position: absolute; - top: 0; + top: -5px; + z-index: 2; } .logo-mickey .ear.left { - left: 5px; + left: 0; } .logo-mickey .ear.right { - right: 5px; + right: 0; } - +/* Логотип Microsoft */ .logo-microsoft { width: 100px; height: 100px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; - gap: 10px; + gap: 4px; /* Меньше зазор между квадратами */ background: white; + padding: 4px; /* чтобы квадраты не упирались в края */ + box-sizing: border-box; } .logo-microsoft .square { - width: 55px; - height: 55px; + width: 44px; + height: 44px; } .logo-microsoft .red { @@ -77,14 +82,14 @@ body { background-color: #FFB900; } - +/* Кнопка открытия модалки */ #openModalBtn { padding: 10px 20px; font-size: 16px; cursor: pointer; } - +/* Оверлей */ .overlay { position: fixed; top: 0; @@ -106,6 +111,7 @@ body { opacity: 1; } +/* Модалка */ .modal { position: relative; background: #fff; @@ -115,6 +121,7 @@ body { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } +/* Контент модалки */ .modal-content { margin-top: 10px; } @@ -148,7 +155,7 @@ body { position: absolute; top: 0; left: 0; - transition: width 0.05s linear; + transition: width 0.1s linear; } .loading-text { @@ -171,4 +178,4 @@ body { z-index: 3; transition: color 0.1s; white-space: pre; -} +} \ No newline at end of file From 9993fc82f88ba71b2b7e929c073b05d2ef04ec79 Mon Sep 17 00:00:00 2001 From: mmdoneperson Date: Tue, 8 Apr 2025 16:17:39 +0500 Subject: [PATCH 4/6] add task 5 --- index.html | 23 ++++++++++++++++++++++- index.js | 3 --- styles.css | 51 ++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 64 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 935e079..b83ca22 100644 --- a/index.html +++ b/index.html @@ -26,11 +26,32 @@

Привет!

-

Это модальное окно с прогресс-баром.

+

Это модальное окно с прогресс-баром и аккордеоном.

+
+ +
+ + +
+

Философия — это наука, изучающая общие и фундаментальные вопросы бытия, знания, ценностей, разума, сознания и языка.

+
+ + + +
+

Демократия — это политический режим, при котором власть принадлежит народу, а решения принимаются большинством голосов.

+
+ + + +
+

Биология — это наука о живых организмах, их строении, функциях, развитии, происхождении и распределении на Земле.

+
+
diff --git a/index.js b/index.js index 70e61e1..381d376 100644 --- a/index.js +++ b/index.js @@ -52,17 +52,14 @@ const overlay = document.getElementById('overlay'); openModalBtn.addEventListener('click', () => { overlay.classList.add('active'); - if (!animationStarted) { animateProgress(); animationStarted = true; } }); - closeModalBtn.addEventListener('click', () => { overlay.classList.remove('active'); }); - overlay.addEventListener('click', (e) => { if (e.target === overlay) { overlay.classList.remove('active'); diff --git a/styles.css b/styles.css index ad7e280..58d610b 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,4 @@ -/* Базовые стили */ + body { display: flex; flex-direction: column; @@ -11,7 +11,7 @@ body { font-family: Arial, sans-serif; } -/* Логотип Микки */ + .logo-mickey { position: relative; width: 100px; @@ -55,9 +55,9 @@ body { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; - gap: 4px; /* Меньше зазор между квадратами */ + gap: 4px; background: white; - padding: 4px; /* чтобы квадраты не упирались в края */ + padding: 4px; box-sizing: border-box; } @@ -82,7 +82,7 @@ body { background-color: #FFB900; } -/* Кнопка открытия модалки */ +/* Кнопка */ #openModalBtn { padding: 10px 20px; font-size: 16px; @@ -121,12 +121,10 @@ body { box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } -/* Контент модалки */ .modal-content { margin-top: 10px; } -/* Кнопка закрытия */ .close-btn { position: absolute; top: 10px; @@ -145,7 +143,7 @@ body { height: 30px; position: relative; overflow: hidden; - margin-top: 20px; + margin: 20px 0; } .progress { @@ -178,4 +176,39 @@ body { z-index: 3; transition: color 0.1s; white-space: pre; -} \ No newline at end of file +} + +/* Аккордеон */ +.accordion { + margin-top: 30px; +} + +.accordion input { + display: none; +} + +.accordion-title { + display: block; + background: #eee; + padding: 10px; + cursor: pointer; + font-weight: bold; + border: 1px solid #ccc; + margin-bottom: 5px; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + background: #fafafa; + padding: 0 10px; + border-left: 1px solid #ccc; + border-right: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} + +input:checked + .accordion-title + .accordion-content { + max-height: 200px; + padding: 10px; +} From 139ee95f83b545adef09ec89864faf96757da97e Mon Sep 17 00:00:00 2001 From: Firsikita Date: Tue, 8 Apr 2025 16:20:12 +0500 Subject: [PATCH 5/6] ready --- styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 58d610b..cd9a988 100644 --- a/styles.css +++ b/styles.css @@ -19,8 +19,8 @@ body { } .logo-mickey .head { - width: 80px; - height: 80px; + width: 65px; + height: 65px; background: black; border-radius: 50%; position: absolute; @@ -31,8 +31,8 @@ body { } .logo-mickey .ear { - width: 45px; - height: 45px; + width: 40px; + height: 40px; background: black; border-radius: 50%; position: absolute; From 32a068915d7899c3cd74476db3fe3d83a8ee636e Mon Sep 17 00:00:00 2001 From: Firsikita Date: Tue, 8 Apr 2025 16:29:28 +0500 Subject: [PATCH 6/6] h --- index.js | 10 +++++++++- styles.css | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 381d376..3c5943e 100644 --- a/index.js +++ b/index.js @@ -39,7 +39,15 @@ const animateProgress = () => { if (progress < 1) { requestAnimationFrame(step); } else { - letterSpans.forEach(span => (span.style.color = 'white')); + // Когда загрузка завершена + loadingText.innerHTML = ''; // очищаем старые буквы + const completeText = 'Complete!'; + completeText.split('').forEach(char => { + const span = document.createElement('span'); + span.textContent = char; + span.style.color = 'white'; // весь текст белый + loadingText.appendChild(span); + }); } }; diff --git a/styles.css b/styles.css index cd9a988..3206347 100644 --- a/styles.css +++ b/styles.css @@ -11,7 +11,7 @@ body { font-family: Arial, sans-serif; } - +/* Логотип микимаус */ .logo-mickey { position: relative; width: 100px;