diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..69ab804 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/encodings.xml b/.idea/encodings.xml new file mode 100644 index 0000000..df87cf9 --- /dev/null +++ b/.idea/encodings.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67fa43d --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning.iml b/.idea/positioning.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..14e9ec2 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,87 @@ - + + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..60a28f3 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,58 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openBtn = document.getElementById('lightboxBtn'); +const overlay = document.getElementById('modalOverlay'); +const closeBtn = document.getElementById('modalCloseBtn'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function openModal() { + overlay.style.display = 'flex'; + + bar.style.width = '0%'; + textWhite.style.clipPath = 'inset(0 100% 0 0)'; + + animateProgress(); +} + +function closeModal() { + overlay.style.display = 'none'; +} + +openBtn.addEventListener('click', openModal); + +closeBtn.addEventListener('click', closeModal); + +overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + closeModal(); + } +}); + +document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && overlay.style.display === 'flex') { + closeModal(); + } +}); + +const bar = document.querySelector('.bar'); +const textWhite = document.querySelector('.text-white'); + +function animateProgress() { + let progress = 0; + + const duration = 3000; + const fps = 60; + const stepTime = 1000 / fps; + const step = 100 / (duration / stepTime); + + const interval = setInterval(() => { + progress += step; + + if (progress >= 100) { + progress = 100; + clearInterval(interval); + } + + bar.style.width = progress + '%'; + + textWhite.style.clipPath = `inset(0 ${100 - progress}% 0 0)`; + + }, stepTime); +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..e81c0eb 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,245 @@ +body { + background: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.logo { + width: 100px; + height: 100px; + position: relative; +} + +.circle { + width: 15px; + height: 15px; + background: #61dafb; + border-radius: 50%; + position: absolute; + top: 42px; + left: 42px; +} + +.ellipse { + position: absolute; + width: 100px; + height: 40px; + border: 4px solid #61dafb; + border-radius: 50%; + top: 30px; + box-sizing: border-box; +} + +.e1 { + transform: rotate(0deg); +} + +.e2 { + transform: rotate(60deg); +} + +.e3 { + transform: rotate(-60deg); +} + + +.logo-mickey { + width: 100px; + height: 100px; + position: relative; +} + +.logo-mickey .head { + width: 60px; + height: 60px; + background: black; + border-radius: 50%; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.logo-mickey .ear { + width: 40px; + height: 40px; + background: black; + border-radius: 50%; + position: absolute; + top: 10px; +} + +.logo-mickey .left { + left: 5px; +} + +.logo-mickey .right { + right: 5px; +} + +.lightbox-btn { + margin-top: 40px; + padding: 12px 28px; + font-size: 1.1rem; + font-weight: 600; + background: #61dafb; + border: none; + border-radius: 40px; + cursor: pointer; +} + +.modal-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal { + position: relative; + width: 640px; + max-width: 90vw; + background: white; + border-radius: 24px; + padding: 24px 28px 32px 28px; + box-sizing: border-box; +} + +.modal-close { + position: absolute; + top: 16px; + right: 20px; + background: none; + border: none; + font-size: 32px; + line-height: 1; + cursor: pointer; + color: black; + padding: 0 6px; +} + +.modal-content { + margin-top: 8px; +} + +.accordion { + display: flex; + flex-direction: column; + gap: 12px; +} + +.accordion-item { + border: 1px solid #e0e0e0; + border-radius: 16px; + overflow: hidden; + background: #fefefe; + width: 95%; +} + +.accordion-input { + display: none; +} + +.accordion-label { + display: block; + padding: 16px 20px; + font-weight: 700; + font-size: 1.2rem; + background: #f7f7f9; + cursor: pointer; + user-select: none; + position: relative; + border-bottom: 1px solid transparent; +} + +.accordion-label::after { + content: "▼"; + float: right; + font-size: 0.9rem; + color: #61dafb; +} + +.accordion-input:checked + .accordion-label::after { + transform: rotate(180deg); +} + +.accordion-body { + display: none; + padding: 0 20px 16px 20px; + background: white; + border-top: 1px solid #eee; + line-height: 1.5; + color: #2c3e50; +} + +.accordion-input:checked ~ .accordion-body { + display: block; +} + +.accordion-body p { + margin: 12px 0; +} + +.accordion-body ul { + margin: 8px 0 12px 20px; + padding-left: 0; +} + +.accordion-body li { + margin: 6px 0; +} + + +.progress { + position: relative; + margin-top: 20px; + height: 40px; + background: #aaa; + overflow: hidden; + border-radius: 6px; + + display: flex; + align-items: center; + justify-content: center; +} + +.bar { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 40%; + background: crimson; +} + + +.text { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + text-align: center; + line-height: 40px; + font-size: 18px; +} + +.text-black { + color: black; + z-index: 1; +} + +.text-white { + color: white; + z-index: 2; +} \ No newline at end of file