From 60041cf379e8284660a09373545db1fb31327278 Mon Sep 17 00:00:00 2001 From: den-ibr Date: Tue, 8 Apr 2025 18:08:52 +0500 Subject: [PATCH 1/2] made 1, 2 --- index.html | 10 +++++++++- styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ x.svg | 1 + 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 x.svg diff --git a/index.html b/index.html index 846cf93..169a2b2 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,15 @@ - +
+
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..55531a9 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,50 @@ +body { +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: center; +} + +.lightbox { + position: relative; + display: flex; + padding: 24px; + border-radius: 20px; + gap: 16px; + width: 640px; + background-color: white; + align-items: center; + justify-content: center; +} + +.logo100 { + width: 100px; + height: 100px; + object-fit: contain; + overflow: hidden; +} + +#logo3 { + transform: scale(1.15); +} + +.icon-container { + display: flex; + padding: 4px; + border-radius: 20px; + background-color: #f0f0f0; +} + +#cross-icon-container { + position: absolute; + top: 4px; + right: 4px; +} \ No newline at end of file diff --git a/x.svg b/x.svg new file mode 100644 index 0000000..3e0da86 --- /dev/null +++ b/x.svg @@ -0,0 +1 @@ + \ No newline at end of file From ce04d639b9d5619bf03583c15c6a462e3188e531 Mon Sep 17 00:00:00 2001 From: den-ibr Date: Tue, 8 Apr 2025 19:08:29 +0500 Subject: [PATCH 2/2] Done! --- index.html | 41 +++++++++++++++++++++++++-- index.js | 21 ++++++++++---- styles.css | 82 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 134 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 169a2b2..ac89ac0 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,48 @@ -
+
-
-
+
+
+
+
+
+
+
+

Loading...

+
+
+

Loading...

+
+
+
+ + +
+

После долгих зим всегда приходит лето (Е) + Я знаю: где ты, с кем ты; но мне пофиг, где ты, с кем ты

+
+
+
+ + +
+

Двести двадцать третий, Трэвис давит на педаль кареты

+
+
+
+ + +
+

Мешаю ветер с дымом с окон AMG-пакета (Воу, воу, воу, воу-воу, ушёл) +

+
+
+
diff --git a/index.js b/index.js index dd50919..2e42211 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,16 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const bar = document.getElementById('bar'); +var width = 0; +incrementWidth(); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function incrementWidth() { + width++; + bar.style.width = width + '%'; + if (width < 100) { + setTimeout(incrementWidth, 50); + } +} + +const cross = document.getElementById('cross-icon-container'); +cross.addEventListener('click', function() { + document.getElementById('overlay').style.display = 'none'; +}); diff --git a/styles.css b/styles.css index 55531a9..9e9b222 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,5 @@ -body { +p { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .overlay { @@ -16,6 +17,7 @@ body { .lightbox { position: relative; display: flex; + flex-direction: column; padding: 24px; border-radius: 20px; gap: 16px; @@ -25,6 +27,13 @@ body { justify-content: center; } +#logo-container { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; +} + .logo100 { width: 100px; height: 100px; @@ -47,4 +56,75 @@ body { position: absolute; top: 4px; right: 4px; +} + +.progress-bar-background { + position: relative; + display: flex; + justify-content: center; + height: 20px; + width: 350px; + background-color: #f0f0f0; + border-radius: 10px; + overflow: hidden; +} + +.progress-bar-text { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 13px; +} + +.progress-bar-top-text { + margin: 0; + color: white; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 13px; +} + +.progress-bar-container { + position: absolute; + top: 0px; + left: 0px; + width: 0%; + height: 100%; + overflow: hidden; +} + +.progress-bar { + display: flex; + justify-content: center; + position: absolute; + top: 0px; + left: 0px; + background-color: red; + width: 350px; + height: 100%; +} + +.accordion input { + display: none; +} + +.accordion label { + display: block; + background-color: #eee; + padding: 10px; + margin-top: 8px; + cursor: pointer; + border-radius: 4px; +} + +.accordion .panel { + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; + background-color: #f9f9f9; + padding: 0 10px; + border-radius: 4px; +} + +.accordion input:checked ~ .panel { + max-height: 200px; + padding: 10px; } \ No newline at end of file