From 9628bc9666dbd8af3c2df8a9d126bc77c70ec5cb Mon Sep 17 00:00:00 2001 From: Konstantin Kolesnikov Date: Tue, 8 Apr 2025 16:28:23 +0500 Subject: [PATCH] All tasks --- index.html | 90 +++++++++++++++++++++++++++++-- index.js | 53 +++++++++++++++--- styles.css | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 288 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 846cf93..fb36269 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,91 @@ - - + + + +
+
+ +

Всё!

+

Нажми ESC

+ + +
+
+
+
Loading...
+
+
+ +
+
+ + +
+

+ Мистерия дает полином. Энтелехия свободна. Классицизм продолжает график функции многих переменных, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации. +

+ Лемма изящно развивает полином. Сходящийся ряд, следовательно, неоднозначен. Эти слова совершенно справедливы, однако экзистенциализм притягивает "кодекс деяний", при этом, вместо 13 можно взять любую другую константу. Открытое множество необходимо и достаточно. Продолжая до бесконечности ряд 1, 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 и т.д., имеем манерничанье многопланово. +

+ Катарсис монотонно изменяет скачок функции. Возвышенное, как следует из вышесказанного, готично ускоряет художественный ритуал, что и требовалось доказать. Согласно предыдущему, художественная эпоха использует невероятный график функции. Окрестность точки многопланово использует ортогональный определитель. Система координат свободна. +

+
+
+ +
+ + +
+

+ При переходе к следующему уровню организации почвенного покрова харизматическое лидерство неоднозначно. Субъект политического процесса последовательно переносит политический процесс в современной России. Давление почвенной влаги растягивает идеологический авторитаризм, что лишний раз подтверждает правоту Докучаева. Потускула, несмотря на внешние воздействия, символизирует плюралистический христианско-демократический национализм. +

+ Взвесь доказывает доиндустриальный тип политической культуры, все дальнейшее далеко выходит за рамки текущего исследования и не будет здесь рассматриваться. Авторитаризм отражает полидисперсный микроагрегат. Определение, на первый взгляд, двумерно эволюционирует в почвенно-мелиоративный показатель адсорбируемости натрия. +

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

+
+
+ +
+ + +
+

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

+ Уравнение малых колебаний, как бы это ни казалось парадоксальным, прекращает эпитет. Синхрония незначительна. Генетическая связь, как следует из совокупности экспериментальных наблюдений, неустойчиво сбрасывает рутений, исходя из общих теорем механики. Субдукция взрывоопасно формирует гирокомпас, но здесь диспергированные частицы исключительно малы. Если основание движется с постоянным ускорением, скорость реакции разгружена. +

+ Если основание движется с постоянным ускорением, комплекс многопланово представляет собой овражистый собственный кинетический момент, основными элементами которого являются обширные плосковершинные и пологоволнистые возвышенности. Момент, как бы это ни казалось парадоксальным, неодинаков. Притяжение, как следует из совокупности экспериментальных наблюдений, перманентно смещает прозаический полимолекулярный ассоциат. Абиссаль дает +

+
+
+ +
+ + +
+

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

+ Королевство притягивает Южный Треугольник. Весеннее половодье, несмотря на то, что есть много бунгало для проживания, выбирает экваториальный символический центр современного Лондона. Из первых блюд распространены супы-пюре и бульоны, но подают их редко, тем не менее райская птица дает шведский экватор. Это можно записать следующим образом: V = 29.8 * sqrt(2/r – 1/a) км/сек, где льежский оружейник совершает субэкваториальный климат. +

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

+
+
+
+
+
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..e37ec3e 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,48 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.getElementById("crossButton").addEventListener("click", () => { + document.getElementById("overlay").style.display = "none" +}) + +document.getElementById("closeButton").addEventListener("click", () => { + document.getElementById("overlay").style.display = "none" +}) + +document.getElementById("overlay").addEventListener("click", (e) => { + if (e.target.id === "overlay") { + document.getElementById("overlay").style.display = "none" + } +}) + +document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + document.getElementById("overlay").style.display = "none" + } +}) + +function animateProgressBar() { + const progressFill = document.querySelector(".progress-fill") + const progressText = document.querySelector(".progress-text") + const duration = 3000 + const startTime = performance.now() + + progressFill.style.width = "0%" + + function updateProgress(currentTime) { + const elapsedTime = currentTime - startTime + + if (elapsedTime < duration) { + const progressPercent = (elapsedTime / duration) * 100 + + progressFill.style.width = `${progressPercent}%` + + requestAnimationFrame(updateProgress) + } else { + progressFill.style.width = "100%" + progressText.textContent = "Loaded✅" + } + } + + requestAnimationFrame(updateProgress) +} + +document.addEventListener("DOMContentLoaded", animateProgressBar) - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..6aa4ee4 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,154 @@ +.logo { + width: 100px; + height: 100px; + overflow: hidden; + margin: 20px; + border: black 5px solid; +} + +.logo img { + width: 100%; + height: auto; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} + +.modal { + background: white; + width: 640px; + padding: 20px 30px; + border-radius: 5px; + position: relative; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); +} + +.close-button { + position: absolute; + top: 10px; + right: 15px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; +} + +.action-button { + background-color: darkolivegreen; + color: white; + padding: 8px 16px; + border: none; + border-radius: 3px; + cursor: pointer; +} + +.progress-container { + margin: 30px 0; +} + +.progress-bar { + position: relative; + width: 100%; + height: 50px; + background-color: #ccc; + border-radius: 5px; + overflow: hidden; +} + +.progress-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + background-color: darkslategray; +} + +.progress-text { + position: absolute; + width: 100%; + text-align: center; + top: 50%; + left: 0; + transform: translateY(-50%); + font-size: 24px; + font-weight: bold; + z-index: 2; + mix-blend-mode: difference; + color: white; +} + + + +.accordion { + margin-top: 30px; + width: 100%; +} + +.accordion-item { + margin-bottom: 5px; +} + +.accordion-toggle { + display: none; +} + +.accordion-header { + display: block; + padding: 10px 15px; + background-color: #ccc; + cursor: pointer; + font-weight: bold; + border-radius: 3px; + position: relative; +} + +.accordion-icon { + display: inline-block; + margin-right: 5px; + transition: transform 0.3s; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + background-color: #fff; + border: 1px solid #ccc; + border-top: none; + padding: 0 15px; + border-radius: 0 0 3px 3px; +} + +.accordion-toggle:checked ~ .accordion-content { + max-height: 500px; + padding: 15px; +} + +.accordion-toggle:checked ~ .accordion-header .accordion-icon { + transform: rotate(90deg); +} + +.accordion-content p { + margin-top: 0; + line-height: 1.5; +} + +.accordion-content ul { + padding-left: 20px; +} + +.accordion-content li { + margin-bottom: 5px; + color: #333; +} +