diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /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/goodsoul-shinkarenko-positioning.iml b/.idea/goodsoul-shinkarenko-positioning.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/goodsoul-shinkarenko-positioning.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..a91f303 --- /dev/null +++ b/.idea/modules.xml @@ -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..27e9611 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,62 @@ - + Практика позиционирования - - +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + +
+
→ section1
+ +
+ +
+
→ section2
+ +
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..1c2aea7 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,41 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const openModalBtn = document.getElementById('openModalBtn'); +const closeModalBtn = document.getElementById('closeModalBtn'); +const overlay = document.getElementById('overlay'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const progressFill = document.getElementById('progressFill'); +const progressTextWhite = document.getElementById('progressTextWhite'); +const accordeonHeads = document.getElementsByClassName("accordeon-head") +const accordeonOpened = new Array(accordeonHeads.length).fill(false); +let currentStep = 0; +const seconds = 3; +const totalSteps = 60 * seconds; + +openModalBtn.addEventListener('click', () => { + overlay.classList.remove('hidden'); + const interval = setInterval(() => { + currentStep++; + const progress = (currentStep / totalSteps) * 100; + + progressFill.style.width = progress + '%'; + progressTextWhite.style.width = progress + '%'; + + if (currentStep >= totalSteps) { + clearInterval(interval); + } + }, 1000 / 60); +}); + +closeModalBtn.addEventListener('click', () => { + overlay.classList.add('hidden'); + currentStep = 0; +}); + +for (let i = 0; i < accordeonHeads.length; i++) { + const accordeonHead = accordeonHeads[i] + accordeonHead.addEventListener("click", (event) => { + const nextEl = accordeonHead.nextElementSibling; + accordeonOpened[i] = ! accordeonOpened[i]; + nextEl.style.display = accordeonOpened[i] ? "" : "none"; + accordeonHead.textContent = (accordeonOpened[i] ? "↓" : "→") + accordeonHead.textContent.substring(1); + }) +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..f834df2 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,159 @@ +.image-container { + width: 100px; + height: 100px; + padding: 20px; + display: flex; + align-items: center; + justify-content: center; +} + +.windows-image { + width: 60px; + height: 60px; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; +} + +.japan { + background-color: red; + border-radius: 50%; + width: 30px; + height: 30px; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, sans-serif; + min-height: 100vh; + padding: 40px; +} + +.logo { + width: 100px; + height: 100px; + display: inline-block; + margin-right: 12px; + margin-bottom: 20px; +} + +.open-btn { + padding: 12px 20px; + font-size: 16px; + border: none; + border-radius: 8px; + background-color: #2f80ed; + color: #fff; + cursor: pointer; +} + +.open-btn:hover { + background-color: #1366d6; +} + +.overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.55); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.hidden { + display: none; +} + +.modal { + position: relative; + width: 640px; + max-width: calc(100% - 40px); + background-color: #fff; + border-radius: 12px; + padding: 32px 24px 24px; + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); +} + +.close-btn { + position: absolute; + top: 12px; + right: 12px; + width: 32px; + height: 32px; + border: none; + background: transparent; + font-size: 28px; + line-height: 1; + cursor: pointer; +} + +.modal-title { + margin: 0 0 16px; + font-size: 28px; +} + +.modal-text { + margin: 0 0 20px; + font-size: 16px; + line-height: 1.5; +} + +.progress-bar { + position: relative; + width: 100%; + height: 44px; + background-color: #cfcfcf; + border-radius: 10px; + overflow: hidden; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + width: 45%; + height: 100%; + background-color: #e53935; + z-index: 1; +} + +.progress-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 18px; + font-weight: 700; + white-space: nowrap; + pointer-events: none; +} + +.progress-text-black { + color: #000; + z-index: 2; +} + +.progress-text-white { + color: #fff; + z-index: 3; + width: 45%; + height: 100%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.accordeon { + border-radius: 10px; + border: 1px solid black; +} + +.accordeon-head { + cursor: pointer; +} \ No newline at end of file