diff --git a/index.html b/index.html index 846cf93..b83ca22 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,56 @@ - - +
+
+
+
+
+ +
+
+
+
+
+
+ + + +
+
+ +
+

Привет!

+

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

+ +
+
+
+
+ +
+ + +
+

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

+
+ + + +
+

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

+
+ + + +
+

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

+
+
+
+
+
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..3c5943e 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,75 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const progressBar = document.querySelector('.progress'); +const loadingText = document.getElementById('loadingText'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +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 { + // Когда загрузка завершена + loadingText.innerHTML = ''; // очищаем старые буквы + const completeText = 'Complete!'; + completeText.split('').forEach(char => { + const span = document.createElement('span'); + span.textContent = char; + span.style.color = 'white'; // весь текст белый + loadingText.appendChild(span); + }); + } + }; + + requestAnimationFrame(step); +}; + +const openModalBtn = document.getElementById('openModalBtn'); +const closeModalBtn = document.getElementById('closeModalBtn'); +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 e69de29..3206347 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,214 @@ + +body { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + min-height: 100vh; + margin: 0; + background-color: #f5f5f5; + padding: 20px; + font-family: Arial, sans-serif; +} + +/* Логотип микимаус */ +.logo-mickey { + position: relative; + width: 100px; + height: 100px; +} + +.logo-mickey .head { + width: 65px; + height: 65px; + background: black; + border-radius: 50%; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 1; +} + +.logo-mickey .ear { + width: 40px; + height: 40px; + background: black; + border-radius: 50%; + position: absolute; + top: -5px; + z-index: 2; +} + +.logo-mickey .ear.left { + left: 0; +} + +.logo-mickey .ear.right { + right: 0; +} + +/* Логотип Microsoft */ +.logo-microsoft { + width: 100px; + height: 100px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 4px; + background: white; + padding: 4px; + box-sizing: border-box; +} + +.logo-microsoft .square { + width: 44px; + height: 44px; +} + +.logo-microsoft .red { + background-color: #F25022; +} + +.logo-microsoft .green { + background-color: #7FBA00; +} + +.logo-microsoft .blue { + background-color: #00A4EF; +} + +.logo-microsoft .yellow { + background-color: #FFB900; +} + +/* Кнопка */ +#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; +} + +.overlay.active { + visibility: visible; + opacity: 1; +} + +/* Модалка */ +.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; +} + +/* Прогресс-бар */ +.progress-bar { + background-color: #e0e0e0; + border-radius: 10px; + width: 100%; + height: 30px; + position: relative; + overflow: hidden; + margin: 20px 0; +} + +.progress { + width: 0%; + height: 100%; + background-color: #ff3333; + position: absolute; + top: 0; + left: 0; + transition: width 0.1s 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; +} + +/* Аккордеон */ +.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; +}