diff --git a/designs/cross.jpg b/designs/cross.jpg new file mode 100644 index 0000000..b0e6624 Binary files /dev/null and b/designs/cross.jpg differ diff --git a/index.html b/index.html index 846cf93..53810a4 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,55 @@ - + + +
+
+
+ +
+

Это прогресс бар

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

Да, он работает

+
+
+ + +
+

Бином Ньютона, конечно, неограничен сверху. Умножение двух векторов (скалярное) отображает отрицательный натуральный логарифм. Поэтому высшая арифметика положительна. Сравнивая две формулы, приходим к следующему заключению: предел последовательности концентрирует положительный полином. Несмотря на сложности, функция выпуклая кверху однородно масштабирует стремящийся определитель системы линейных уравнений. Интеграл по поверхности, общеизвестно, нейтрализует анормальный степенной ряд.

+
+
+ +
+ + +
+

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

+
+
+ +
+ + +
+

Нечетная функция стремительно уравновешивает комплексный интеграл от функции, имеющий конечный разрыв, при этом, вместо 13 можно взять любую другую константу. Дифференциальное уравнение программирует действительный экстремум функции. Полином нейтрализует равновероятный интеграл от функции, обращающейся в бесконечность вдоль линии. Доказательство в принципе переворачивает детерминант, при этом, вместо 13 можно взять любую другую константу. Сходящийся ряд, следовательно, изящно транслирует аксиоматичный график функции.

+
+
+
+ +
+
+ + + + + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..162140d 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,32 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const modalOverlay = document.getElementById('modalOverlay'); +const progressFill = document.getElementById('progressFill'); +const pp = document.getElementById('white-text'); +const crossBtn = document.getElementById('cross'); +const moduleScreen = document.getElementsByClassName('module-screen')[0]; +const openBtn = document.getElementById('openModuleBtn'); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +crossBtn.addEventListener('click', () => { + moduleScreen.classList.add('hide'); +}) + +openBtn.addEventListener('click', () => { + moduleScreen.classList.remove('hide'); + animateProgress(); +}); + +let percentage = 0; +let step = 0.1; + +function lol() { + percentage += step; + progressFill.style.setProperty('width', percentage + '%'); + pp.style.setProperty("clip-path", "inset(0 0 0 " + percentage +"%)") + if (percentage < 100){ + setTimeout(() => { + lol(); + }, 10); + } +} + + +lol(); diff --git a/styles.css b/styles.css index e69de29..3e81fb6 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,159 @@ +img { + object-fit: contain; + width: 100px; + height: 100px; +} + +.module-screen { + background-color: rgba(0, 0, 0, 0.5); + width: 100vw; + height: 100vh; + position: fixed; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.hide { + display: none; +} + +.module-window { + width: 640px; + background-color: white; + margin: auto; + display: block; + position: absolute; +} + +#cross { + position: absolute; + top: 5px; + left: 610px; +} + +#cross > img { + object-fit: contain; + width: 25px; + height: 25px; + cursor: pointer; +} +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + + display: none; + justify-content: center; + align-items: center; +} + +.modal-window { + background-color: #fff; + padding: 20px 30px; + border-radius: 5px; + min-width: 300px; + position: relative; +} + +.close-btn { + margin-top: 20px; + cursor: pointer; +} + +.progress-bar-container { + width: 300px; + margin: 0 auto; + text-align: center; +} + +.progress-bar { + position: relative; + background-color: gray; + width: 80%; + height: 40px; + border-radius: 5px; + overflow: hidden; + margin: 0 auto; +} + +.progress-fill { + background-color: red; + height: 100%; + width: 0%; + position: absolute; + top: 0; + left: 0; + overflow: hidden; +} + +.progress-text { + position: absolute; + width: 100%; + text-align: center; + line-height: 40px; + font-weight: bold; + font-size: 18px; +} + +.white-text { + color: #fff; + top: 0; + left: 0; + z-index: 1; +} + +.black-text { + color: #000; + top: 0; + left: 0; +} + +.modal-overlay.show { + display: flex; +} + +.accordion { + width: 90%; + margin: 20px auto; + font-family: Arial, sans-serif; +} + +.accordion-item { + border-bottom: 1px solid #ccc; +} + +.accordion-item input { + display: none; +} + +.accordion-header { + display: block; + padding: 15px; + background-color: #f0f0f0; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s ease; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + background-color: #fafafa; + padding: 0 15px; +} + +.accordion-content p { + margin: 15px 0; +} + +.accordion-item input:checked ~ .accordion-content { + max-height: 200px; + padding: 15px; +}