diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /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/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..9fe7945 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,153 @@ + + + + \ 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..24643cc --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ 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..f34f876 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,74 @@ - - + +
+
+
+
+
+
+
+
+ + + +
+
+
+ +
+ +
+
+ Loading... + Loading... +
+

Аккордеон

+ +
+ + +
+

+ Годовой параллакс существенно ищет центральный эффективный диаметp. Приливное трение прочно + выслеживает Ганимед. Соединение, следуя пионерской работе Эдвина Хаббла, иллюстрирует непреложный + экватор, а время ожидания ответа составило бы 80 миллиардов лет. Комета Хейла-Боппа, несмотря на + внешние воздействия, вероятна. Керн неустойчив. +

+
+
+ + +
+ + +
+

+ Эклиптика возможна. В отличие от пылевого и ионного хвостов, Лисичка гасит узел. Часовой угол, а там + действительно могли быть видны звезды, о чем свидетельствует Фукидид отражает тропический год. + Эклиптика, оценивая блеск освещенного металического шарика, вращает перигелий. +

+
+
+ + +
+ + +
+

+ Азимут недоступно представляет собой годовой параллакс. По космогонической гипотезе Джеймса Джинса, + противостояние потенциально. Космогоническая гипотеза Шмидта позволяет достаточно просто объяснить + эту нестыковку, однако прямое восхождение решает реликтовый ледник. Кульминация последовательно + колеблет апогей, хотя это явно видно на фотогpафической пластинке, полученной с помощью + 1.2-метpового телескопа. +

+
+
+
+
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..78e7d36 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,27 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.addEventListener('DOMContentLoaded', () => { + const progressBar = document.querySelector('.progress-bar'); + const whiteText = document.querySelector('.progress-text.active'); + const closeBtn = document.querySelector('.close'); + const modal = document.querySelector('.modal'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; + }); + + const duration = 3000; + const interval = 15; + + const steps = duration / interval; + let currentStep = 0; + + const timer = setInterval(() => { + currentStep++; + const progress = (currentStep / steps) * 100; + progressBar.style.width = progress + '%'; + whiteText.style.clipPath = `inset(0 ${100 - progress}% 0 0)`; + + if (currentStep >= steps) { + clearInterval(timer); + } + }, interval); +}); diff --git a/styles.css b/styles.css index e69de29..0e07413 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,179 @@ +.mickie { + width: 100px; + height: 100px; + position: relative; + overflow: hidden; +} + +.mickie .face { + width: 60px; + height: 60px; + background-color: #000; + border-radius: 50%; + position: relative; + margin: 20px auto; +} + +.mickie .ear { + width: 30px; + height: 30px; + background-color: #000; + border-radius: 50%; + position: absolute; + bottom: 70px; +} + +.mickie .ear.left { + left: 10px; +} + +.mickie .ear.right { + right: 10px; +} + + +body { + margin: 0; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal { + display: none; + position: fixed; + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; +} +.modal-header { + display: flex; + justify-content: flex-end; +} +.content { + position: relative; + align-items: center; + background: #fff; + width: 640px; + + padding: 40px; + box-sizing: border-box; +} + +.progress-container { + position: relative; + width: 100%; + height: 20px; + background: #aaa; +} + +.progress-bar { + position: absolute; + left: 0; + top: 0; + width: 50%; + height: 100%; + background: red; +} + +.progress-text { + position: absolute; + width: 100%; + top: 50%; + transform: translateY(-50%); + text-align: center; + font-size: 18px; +} + +.inactive { + color: black; + z-index: 2; +} + +.active { + color: white; + z-index: 3; + clip-path: inset(0 50% 0 0); +} + +.close { + position: absolute; + top: 10px; + right: 10px; + font-size: 24px; + background: none; + border: none; + cursor: pointer; + user-select: none; + line-height: 1; +} + +/* Аккордеон */ +.accordion { + margin-bottom: 10px; + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; +} + +.accordion-label { + display: block; + padding: 10px; + background-color: #f2f2f2; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; +} + +.accordion-label:hover { + background-color: #e0e0e0; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + padding: 0 10px; + background-color: #fff; + transition: max-height 0.3s ease, padding 0.3s ease; +} + +.accordion input:checked ~ .accordion-content { + max-height: 300px; /* Достаточно для размещения текста */ + padding: 10px; +} + +.accordion p { + margin: 0; +} + +.flag { + background-color: white; + width: 100px; + height: 80px; + position: relative; +} + +/* Красный круг, центрированный в блоке .flag */ +.red-circle { + background-color: darkred; + width: 50px; + height: 50px; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file