diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..7e5b7d7 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml 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/index.html b/index.html index 846cf93..84d5346 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,70 @@ + Практика позиционирования + - +
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+

Header

+

ловииоавиоватоитватдтдвалттлвамлтватлд мыоаозвытлзатвлдыатлдвытдатдвылдтатлдвыатлдвытлдатлд + атлдвыдтлавтлдыатлдвытлдатлдвытлдавтлыдатлвытлдатлвылтатл + атлдывтлдавытлдатлвытлавтлыдатлвылтдатлдвытлалвтыдлатдвытлажыавлта аьвыьджавджыаьдвыьдаджвы + твитлщвпитваитлшатлшлтл тлптлваитлдпптлдитлдптилдпадлитлдпалдт тлптлдватлдватлдптлдватлпдватлдптлдва

+ +
+ Loading... +
+ Loading... +
+
+ +
+
+ + +
+ бебебе бабаба +
+
+
+ + +
+ бебебе бабаба +
+
+
+ + +
+ бебебе бабаба +
+
+
+ +
+
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..d643117 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,47 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const overlay = document.getElementById('overlay'); +const openBtn = document.getElementById('openBtn'); +const closeBtn = document.getElementById('closeBtn'); +const progressBar = document.getElementById('progressBar'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function closeModal() { + overlay.classList.remove('active'); +} + +function openModal() { + overlay.classList.add('active'); + + let startTime = null; + const duration = 3000; + + progressBar.style.width = '0%'; + + function animateProgress(timestamp) { + if (!startTime) startTime = timestamp; + let progress = (timestamp - startTime) / duration; + + if (progress > 1) progress = 1; + + const easedProgress = Math.sin(progress * (Math.PI / 2)); + + progressBar.style.width = (easedProgress * 100) + '%'; + + if (progress < 1) { + window.requestAnimationFrame(animateProgress); + } + } + + window.requestAnimationFrame(animateProgress); +} + +overlay.onclick = (e) => { + if (e.target === overlay) closeModal(); +}; + +openBtn.onclick = () => openModal(); +closeBtn.onclick = () => closeModal(); + +document.onkeydown = (e) => { + if (e.key === 'Escape' && overlay.classList.contains('active')) { + closeModal(); + } +}; \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..3b457f5 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,161 @@ +.square { + width: 100px; + height: 100px; + border: 1px solid #000; + box-sizing: border-box; + position: relative; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.logo-japan { + height: 80px; +} + +.logo-japan__circle { + width: 50px; + height: 50px; + background-color: red; + border-radius: 50%; +} + +.windows { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.windows__cube { + width: 45px; + height: 45px; +} + +.windows__cube1 { background-color: orangered; } +.windows__cube2 { background-color: greenyellow; } +.windows__cube3 { background-color: skyblue; } +.windows__cube4 { background-color: yellow; } + +.btn { + padding: 12px 24px; + font-size: 16px; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; + visibility: hidden; + opacity: 0; +} + +.overlay.active { + visibility: visible; + opacity: 1; +} + +.modal { + width: 640px; + background: white; + border-radius: 4px; + position: relative; + padding: 20px; +} + +.close { + padding: 12px 24px; + font-size: 16px; + background-color: #107010; + color: white; + border: none; + cursor: pointer; +} + +/* СТИЛИ ПРОГРЕСС-БАРА */ +.load { + width: 100%; + height: 30px; + background: gray; + border-radius: 15px; + position: relative; + overflow: hidden; + margin-bottom: 20px; +} + +.load-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + font-family: Arial, sans-serif; + pointer-events: none; +} + +.load-text--black { + color: black; + z-index: 1; +} + +.redbar { + position: absolute; + top: 0; + left: 0; + width: 0%; + height: 100%; + background: red; + z-index: 2; + overflow: hidden; +} + +.load-text--white { + color: white; + width: 640px; +} + +.accordion_content { + max-height: 0; + overflow: hidden; + background: white; + border-radius: 0 0 20px 20px; + padding: 0 20px; +} + +.accordion_item input:checked ~ .accordion_content { + max-height: 300px; + padding: 0 20px 6px 20px; +} + +.accordion_item { + margin-bottom: 12px; + border: 1px solid #696969; + border-radius: 6px; + background: #cecece; +} + +.accordion_item input { + display: none; +} + +.accordion_label::before { + content: ">"; + font-size: 14px; + display: inline-block; + width: 20px; +} + +.accordion_item input:checked ~ .accordion_label::before { + transform: rotate(90deg); +}