kontur-web-courses · fomidon · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/designs/cross.jpg b/designs/cross.jpg
diff --git a/index.html b/index.html
@@ -6,7 +6,55 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+    <img src="designs/logo1.png">
+    <img src="designs/logo3.jpg">
+    <div class="module-screen">
+        <div class="module-window">
+            <div id="cross">
+                <img src="designs/cross.jpg">
+            </div>
+            <p>Это прогресс бар</p>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill">
+                    <span class="progress-text white-text"></span>
+                </div>
+                <span class="progress-text black-text">Loading...</span>
+                <span id="white-text" class="progress-text white-text">Loading...</span>
+            </div>
+            <p>Да, он работает</p>
+            <div class="accordion">
+                <div class="accordion-item">
+                    <input type="checkbox" id="acc1">
+                    <label for="acc1" class="accordion-header">Заголовок блока 1</label>
+                    <div class="accordion-content">
+                        <p>Бином Ньютона, конечно, неограничен сверху. Умножение двух векторов (скалярное) отображает отрицательный натуральный логарифм. Поэтому высшая арифметика положительна. Сравнивая две формулы, приходим к следующему заключению: предел последовательности концентрирует положительный полином. Несмотря на сложности, функция выпуклая кверху однородно масштабирует стремящийся определитель системы линейных уравнений. Интеграл по поверхности, общеизвестно, нейтрализует анормальный степенной ряд.</p>
+                    </div>
+                </div>
+
+                <div class="accordion-item">
+                    <input type="checkbox" id="acc2">
+                    <label for="acc2" class="accordion-header">Заголовок блока 2</label>
+                    <div class="accordion-content">
+                        <p>Критерий сходимости Коши развивает многомерный контрпример. Доказательство синхронизирует метод последовательных приближений, что несомненно приведет нас к истине. График функции многих переменных, как следует из вышесказанного, осмысленно переворачивает положительный интеграл Гамильтона. Связное множество, не вдаваясь в подробности, концентрирует тройной интеграл.</p>
+                    </div>
+                </div>
+
+                <div class="accordion-item">
+                    <input type="checkbox" id="acc3">
+                    <label for="acc3" class="accordion-header">Заголовок блока 3</label>
+                    <div class="accordion-content">
+                        <p>Нечетная функция стремительно уравновешивает комплексный интеграл от функции, имеющий конечный разрыв, при этом, вместо 13 можно взять любую другую константу. Дифференциальное уравнение программирует действительный экстремум функции. Полином нейтрализует равновероятный интеграл от функции, обращающейся в бесконечность вдоль линии. Доказательство в принципе переворачивает детерминант, при этом, вместо 13 можно взять любую другую константу. Сходящийся ряд, следовательно, изящно транслирует аксиоматичный график функции.</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <button id="openModuleBtn">Показать прогресс-бар</button>
+
+
+
     <script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git 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';
-*/
+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
@@ -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;
+}