diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..1c59ed2 --- /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/.idea/web-positioning.iml b/.idea/web-positioning.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/web-positioning.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..61befbb 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,40 @@ + 1 + 2 +
+
+ +
+
+
+
Loading...
+
+ +
+ + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus nunc eu tellus suscipit bibendum. Proin nec magna quis diam cursus posuere.

+
+ + + +
+

Aliquam hendrerit elit a orci ornare, vitae lacinia mauris lobortis. Integer ultrices suscipit sapien, eu tempus libero malesuada in. Etiam scelerisque volutpat urna, sit amet tincidunt sapien consectetur non.

+
+ + + +
+

Duis eu dolor auctor, dignissim ante eu, posuere justo. Fusce tincidunt diam quam, quis consequat orci malesuada vel. Fusce vel hendrerit massa. Ut eleifend, sem non blandit viverra, massa sapien bibendum ex, nec aliquam libero sem vel est.

+
+
+
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..dbb6dfa 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,37 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const overlay = document.querySelector('.overlay'); +const modal = document.querySelector('.modal'); +const closeBtn = document.querySelector('.close-btn'); + +function openModal() { + overlay.style.display = 'block'; +} + +function closeModal() { + overlay.style.display = 'none'; +} + +overlay.addEventListener('click', closeModal); +closeBtn.addEventListener('click', closeModal); +modal.addEventListener('click', function(event) { + event.stopPropagation(); // предотвращаем закрытие окна при клике внутри него +}); + +const progressBarFill = document.querySelector('.progress-bar-fill'); + +function updateProgressBar(percent) { + progressBarFill.style.width = percent + '%'; +} + +let percent = 0; +let intervalId = setInterval(function() { + percent += 1; + updateProgressBar(percent); + if (percent >= 100) { + clearInterval(intervalId); + } +}, 30); // 100% за 3000 миллисекунд (30 * 100 = 3000) diff --git a/styles.css b/styles.css index e69de29..803f87e 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,107 @@ +img { + width: 100px; + height: 100px; + overflow: hidden; + object-fit: cover; +} + +/* Скрыть модальное окно и оверлей по умолчанию */ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* полупрозрачный цвет фона */ + z-index: 9999; /* показывать окно поверх всего остального на странице */ +} + +.modal { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: #fff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* тень вокруг окна */ +} + +.modal-content { + /* стили для контента модального окна */ +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + background-color: transparent; + border: none; + cursor: pointer; +} + +/* Стили для модального окна и оверлея */ +/* ... */ + +/* Стили для прогресс-бара */ +.progress-bar { + width: 100%; + height: 30px; + background-color: #ccc; /* серый цвет */ + position: relative; +} + +.progress-bar-fill { + height: 100%; + background-color: red; /* красный цвет */ + position: absolute; + left: 0; + top: 0; + width: 0; + transition: width 1s ease-in-out; /* анимация заполнения прогресс-бара */ +} + +.progress-bar-text { + color: #000; /* черный цвет для букв, находящихся на сером фоне */ + position: relative; + /*top: 50%;*/ + /*left: 50%;*/ + align-self: center; + font-size: 16px; + font-weight: bold; +} + +.progress-bar-fill .progress-bar-text { + color: #fff; /* белый цвет для букв, находящихся на красном фоне */ +} + +.accordion { + margin-top: 20px; +} + +.accordion input[type="checkbox"] { + display: none; +} + +.accordion label { + display: block; + padding: 10px; + background-color: #f0f0f0; + font-weight: bold; + cursor: pointer; +} + +.accordion label:hover { + background-color: #e0e0e0; +} + +.accordion-content { + padding: 10px; + background-color: #fff; + display: none; +} + +.accordion input[type="checkbox"]:checked + label + .accordion-content { + display: block; +}