From db42ad8d0fa489fa7a72db11f329c1c6e5cbbf71 Mon Sep 17 00:00:00 2001 From: Kol1n13 <60143734+Kol1n13@users.noreply.github.com> Date: Tue, 2 Apr 2024 17:39:30 +0500 Subject: [PATCH 1/4] 1 two pictures done --- index.html | 2 ++ styles.css | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/index.html b/index.html index 846cf93..d134518 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a44427c 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,12 @@ +.logo3{ + width: 100px; + height: 100px; + transform: translate(50px, 50px); + border: 1px solid black; +} +.logo5{ + width: 100px; + height: 100px; + transform: translate(100px, 50px); + border: 1px solid black; +} \ No newline at end of file From 8825f04e579a4ff0134d7fdd1c005794bc508e9b Mon Sep 17 00:00:00 2001 From: bober19 <115493537+Manykeys@users.noreply.github.com> Date: Tue, 2 Apr 2024 17:51:17 +0500 Subject: [PATCH 2/4] hi --- index.html | 16 ++++++++++++++++ index.js | 13 ++++++++++++- styles.css | 29 +++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..a113723 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,25 @@ Практика позиционирования + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..a759b05 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,15 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +function func(){ + const element = document.getElementById('modal'); + element.style.visibility = 'visible'; +} + + +function func1(){ + const element = document.getElementById('modal'); + element.style.visibility = 'hidden'; +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..ebd2b1f 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,29 @@ +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + width: 640px; /* фиксированная ширина */ + max-width: 90%; /* максимальная ширина, чтобы модальное окно было адаптивным */ + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1001; + visibility: hidden; +} + +.modal-content { + /* Контент модального окна */ +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + cursor: pointer; + background: transparent; + border: none; + outline: none; +} \ No newline at end of file From 404be87e8562e57644294f6e1f57a3599e35fd84 Mon Sep 17 00:00:00 2001 From: Kol1n13 <60143734+Kol1n13@users.noreply.github.com> Date: Tue, 2 Apr 2024 18:50:50 +0500 Subject: [PATCH 3/4] progress-bar --- index.html | 6 ++++++ index.js | 20 +++++++++++++++++++- styles.css | 34 ++++++++++++++++++++++++++++------ 3 files changed, 53 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d36179f..0eb3e4e 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,12 @@

Modal Title

This is the modal content.

+
+ LOADING... +
+ LOADING... +
+
diff --git a/index.js b/index.js index a759b05..cbc1a50 100644 --- a/index.js +++ b/index.js @@ -9,10 +9,28 @@ function func(){ const element = document.getElementById('modal'); element.style.visibility = 'visible'; + progressTimer(); } function func1(){ const element = document.getElementById('modal'); element.style.visibility = 'hidden'; -} \ No newline at end of file + const elem2 = document.getElementById('red'); + elem2.style.clipPath = "clip-path: polygon(0 0, 0, 0, 0, 100%, 0% 100%)"; +} + +function progressTimer(){ + let width = 0; + let progressBar = document.getElementById('red'); + let time = setInterval(progress, 30); + + function progress(){ + progressBar.style.clipPath = `polygon(0 0, ${width}% 0, ${width}% 100%, 0% 100%)`; + width++; + if (width == 101){ + clearInterval(time); + } + } +} + diff --git a/styles.css b/styles.css index 1051ca1..47a5b6d 100644 --- a/styles.css +++ b/styles.css @@ -1,13 +1,17 @@ .logo3{ - width: 100px; - height: 100px; - transform: translate(50px, 50px); + overflow: hidden; + transform: rotate(100turn); + transform: skew(0deg, 0deg); + max-height: 100px; + max-width: 100px; border: 1px solid black; } .logo5{ - width: 100px; - height: 100px; - transform: translate(100px, 50px); + overflow: hidden; + transform: rotate(100turn); + transform: skew(0deg, 0deg); + max-height: 100px; + max-width: 100px; border: 1px solid black; }.modal { position: fixed; @@ -37,4 +41,22 @@ background: transparent; border: none; outline: none; +} + +.light-grey{ + background-color: lightgray; + text-align: center; + font-size: 40px; +} + +.red{ + height: 50px; + width: 100%; + clip-path: polygon(0 0, 0, 0, 0, 100%, 0% 100%); + background-color: red; + color: white; + margin-top: -48px; + overflow: hidden; + place-content: center; + font-size: 40px; } \ No newline at end of file From 6dfbdc758cb450fae7547102d19c87e6e8b46b69 Mon Sep 17 00:00:00 2001 From: bober19 <115493537+Manykeys@users.noreply.github.com> Date: Tue, 2 Apr 2024 18:51:12 +0500 Subject: [PATCH 4/4] dopchik --- index.html | 42 ++++++++++++++++++++++++++++++++------ index.js | 17 +++++++--------- styles.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 100 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index d36179f..dcd3753 100644 --- a/index.html +++ b/index.html @@ -4,27 +4,57 @@ Практика позиционирования - + - - - +
+
+ + +
+

Гетерогенная структура, вследствие квантового характера явления, вероятна. Призма поглощает лазер. Электрон тормозит бозе-конденсат без обмена зарядами или спинами. Зеркало катастрофично переворачивает кристалл. Колебание возбуждает вращательный фонон. + + Неоднородность, если рассматривать процессы в рамках специальной теории относительности, трансформирует объект. Кристалл, на первый взгляд, немагнитен. Кристалл, в первом приближении, ускоряет солитон при любом их взаимном расположении. + + В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно жидкость трансформирует тахионный резонатор. Призма наблюдаема. Неоднородность волнообразна. Газ ненаблюдаемо ускоряет сверхпроводник независимо от расстояния до горизонта событий.

+
+
+
+ + +
+

Идеальная тепловая машина синфазно усиливает плазменный электрон. В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно излучение оптически однородно. Туманность испускает взрыв, тем самым открывая возможность цепочки квантовых превращений. + + Электрон, на первый взгляд, стабилизирует экранированный фотон. Молекула, несмотря на некоторую вероятность коллапса, притягивает магнит по мере распространения сигнала в среде с инверсной населенностью. Излучение, как того требуют законы термодинамики, одномерно растягивает магнит при любом агрегатном состоянии среды взаимодействия. + + Квант, в рамках ограничений классической механики, противоречиво расщепляет квант. При погружении в жидкий кислород туманность наблюдаема. Гравитирующая сфера, как бы это ни казалось парадоксальным, квазипериодично поглощает бозе-конденсат, поскольку любое другое поведение нарушало бы изотропность пространства.

+
+
+
+ + +
+

Благодаря этому может произойти распаривание электронов, однако силовое поле взаимно. Поверхность захватывает атом. Соль отражает изотоп. + + Конверсия отклоняет межатомный супрамолекулярный ансамбль. Дистилляция тормозит твердый сернистый газ. Упаривание непрерывно. Экситон, в первом приближении, возбуждает квазар при любой точечной группе симметрии. При облучении инфракрасным лазером необратимое ингибирование отклоняет циркулирующий комплекс-аддукт. + + Пластмасса возбуждает органический разрыв так, как это могло влиять на реакцию Дильса-Альдера. Поглощение заряжено. Турбулентность по определению облучает гетероциклический магнит. Валентный электрон тягуч. Потенциометрия диссоциирует кристаллизатор.

+
+
- \ No newline at end of file + diff --git a/index.js b/index.js index a759b05..31fad85 100644 --- a/index.js +++ b/index.js @@ -1,18 +1,15 @@ -/* - Изменить элементу цвет и ширину можно вот так: - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ -function func(){ +function func() { + const overlay = document.getElementById('overlay'); + overlay.style.visibility = 'visible'; const element = document.getElementById('modal'); element.style.visibility = 'visible'; } - -function func1(){ +function func1() { + const overlay = document.getElementById('overlay'); + overlay.style.visibility = 'hidden'; const element = document.getElementById('modal'); element.style.visibility = 'hidden'; -} \ No newline at end of file +} diff --git a/styles.css b/styles.css index 1051ca1..13bfca7 100644 --- a/styles.css +++ b/styles.css @@ -4,12 +4,15 @@ transform: translate(50px, 50px); border: 1px solid black; } + .logo5{ width: 100px; height: 100px; transform: translate(100px, 50px); border: 1px solid black; -}.modal { +} + +.modal { position: fixed; top: 50%; left: 50%; @@ -25,7 +28,7 @@ } .modal-content { - /* Контент модального окна */ + } .close-btn { @@ -37,4 +40,55 @@ background: transparent; border: none; outline: none; -} \ No newline at end of file +} + + + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(5px); + z-index: 1000; + visibility: hidden; +} + + +.accordion { + display: flex; + flex-direction: column; +} +.accordion input[type="checkbox"] { + display: none; +} +.accordion label { + background-color: white; + padding: 10px; + margin-bottom: 5px; + cursor: pointer; + display: block; + border-radius: 5px; +} +.accordion label:hover { + background-color: whitesmoke; +} +.accordion label::after { + content: "∨"; + float: right; +} +.accordion input[type="checkbox"]:checked ~ div { + display: block; +} +.accordion input[type="checkbox"]:checked + label::after { + content: "∧"; +} +.accordion div { + display: none; + background-color: whitesmoke; + padding: 10px; + border-radius: 5px; +} +