From cb089a862bfd38b4ca9b0bbbbc914d28e1ce3ec8 Mon Sep 17 00:00:00 2001 From: kolya1601 Date: Mon, 3 Apr 2023 17:23:42 +0500 Subject: [PATCH 1/6] . --- .idea/.gitignore | 5 +++++ .idea/modules.xml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ .idea/web-positioning.iml | 12 ++++++++++++ index.html | 2 ++ styles.css | 6 ++++++ 6 files changed, 39 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/web-positioning.iml 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..c34c63b 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + 1 + 2 \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a0529d2 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,6 @@ +img { + width: 100px; + height: 100px; + overflow: hidden; + object-fit: cover; +} \ No newline at end of file From 5d933089d4d68269c835abb5642a09fa87728f1c Mon Sep 17 00:00:00 2001 From: kolya1601 Date: Mon, 3 Apr 2023 17:32:50 +0500 Subject: [PATCH 2/6] . --- index.html | 12 ++++++++++++ index.js | 20 +++++++++++++++++++- styles.css | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 67 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index c34c63b..7e58dcd 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,18 @@ 1 2 +
+
+ +
+ + 1 +
+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..53a8d81 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,22 @@ 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(); // предотвращаем закрытие окна при клике внутри него +}); \ No newline at end of file diff --git a/styles.css b/styles.css index a0529d2..9e6e344 100644 --- a/styles.css +++ b/styles.css @@ -3,4 +3,40 @@ img { 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; } \ No newline at end of file From e5be794ed13324e9669bf9118add8f51b9681cf5 Mon Sep 17 00:00:00 2001 From: kolya1601 Date: Mon, 3 Apr 2023 17:35:21 +0500 Subject: [PATCH 3/6] . --- index.html | 8 ++++++-- index.js | 13 ++++++++++++- styles.css | 37 ++++++++++++++++++++++++++++++++++++- 3 files changed, 54 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 7e58dcd..81109be 100644 --- a/index.html +++ b/index.html @@ -13,14 +13,18 @@
- - 1 +
+
+ Loading... +
+
+ \ No newline at end of file diff --git a/index.js b/index.js index 53a8d81..d271ef8 100644 --- a/index.js +++ b/index.js @@ -22,4 +22,15 @@ overlay.addEventListener('click', closeModal); closeBtn.addEventListener('click', closeModal); modal.addEventListener('click', function(event) { event.stopPropagation(); // предотвращаем закрытие окна при клике внутри него -}); \ No newline at end of file +}); + +const progressBarFill = document.querySelector('.progress-bar-fill'); +const progressBarText = document.querySelector('.progress-bar-text'); + +function updateProgressBar(percent) { + progressBarFill.style.width = percent + '%'; + progressBarText.innerText = percent + '%'; +} + +// Пример использования: +updateProgressBar(50); // заполнить прогресс-бар на 50% diff --git a/styles.css b/styles.css index 9e6e344..935d99d 100644 --- a/styles.css +++ b/styles.css @@ -39,4 +39,39 @@ img { background-color: transparent; border: none; cursor: pointer; -} \ No newline at end of file +} + +/* Стили для модального окна и оверлея */ +/* ... */ + +/* Стили для прогресс-бара */ +.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: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 16px; + font-weight: bold; +} + +.progress-bar-fill .progress-bar-text { + color: #fff; /* белый цвет для букв, находящихся на красном фоне */ +} From ed9de4c2389b8e56d39cd4e723cacff39bea5f01 Mon Sep 17 00:00:00 2001 From: kolya1601 Date: Mon, 3 Apr 2023 17:42:05 +0500 Subject: [PATCH 4/6] . --- index.js | 12 ++++++++---- styles.css | 7 ++++--- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index d271ef8..dbb6dfa 100644 --- a/index.js +++ b/index.js @@ -25,12 +25,16 @@ modal.addEventListener('click', function(event) { }); const progressBarFill = document.querySelector('.progress-bar-fill'); -const progressBarText = document.querySelector('.progress-bar-text'); function updateProgressBar(percent) { progressBarFill.style.width = percent + '%'; - progressBarText.innerText = percent + '%'; } -// Пример использования: -updateProgressBar(50); // заполнить прогресс-бар на 50% +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 935d99d..7c23920 100644 --- a/styles.css +++ b/styles.css @@ -64,9 +64,10 @@ img { .progress-bar-text { color: #000; /* черный цвет для букв, находящихся на сером фоне */ - position: absolute; - top: 50%; - left: 50%; + position: relative; + /*top: 50%;*/ + /*left: 50%;*/ + align-self: center; transform: translate(-50%, -50%); font-size: 16px; font-weight: bold; From 4ddf37a73d476aa7caba089be1347c3e2852515a Mon Sep 17 00:00:00 2001 From: kolya1601 Date: Mon, 3 Apr 2023 17:44:11 +0500 Subject: [PATCH 5/6] . --- index.html | 27 +++++++++++++++++++++++++++ styles.css | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) diff --git a/index.html b/index.html index 81109be..adf1d04 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,33 @@ +
+
+ +
+
+ + +
+

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.

+
+
+
+
+
+ diff --git a/styles.css b/styles.css index 7c23920..43de796 100644 --- a/styles.css +++ b/styles.css @@ -76,3 +76,37 @@ img { .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; +} From a50f9cf61206c2b472025a62b14650bdf20cbb06 Mon Sep 17 00:00:00 2001 From: kolya1601 Date: Mon, 3 Apr 2023 17:49:11 +0500 Subject: [PATCH 6/6] . --- index.html | 17 +++-------------- styles.css | 5 ----- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index adf1d04..61befbb 100644 --- a/index.html +++ b/index.html @@ -14,17 +14,10 @@
-
- Loading... -
+
+
Loading...
-
- - -
-
- -
+
@@ -48,10 +41,6 @@
- - - - \ No newline at end of file diff --git a/styles.css b/styles.css index 43de796..803f87e 100644 --- a/styles.css +++ b/styles.css @@ -68,7 +68,6 @@ img { /*top: 50%;*/ /*left: 50%;*/ align-self: center; - transform: translate(-50%, -50%); font-size: 16px; font-weight: bold; } @@ -77,10 +76,6 @@ img { color: #fff; /* белый цвет для букв, находящихся на красном фоне */ } -/* Стили для модального окна и оверлея */ -/* ... */ - -/* Стили для блоков "аккордеон" */ .accordion { margin-top: 20px; }