kontur-web-courses · Kol1n13 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/index.html b/index.html
@@ -7,6 +7,60 @@
 </head>
 <body>
     <!--Верстать тут-->
+
+    <img src="designs/logo3.jpg" class="logo3">
+    <img src="designs/logo5.png" class="logo5">
     <script src="index.js"></script>
+    <button onclick='func()'>
+        Нажми на меня
+    </button>
+    <div class="modal" id="modal">
+        <button class="close-btn" onclick="func1()">&times;</button>
+        <div class="modal-content">
+            <h2>Modal Title</h2>
+            <p>This is the modal content.</p>
+        </div>
+        <div class="light-grey" id="light-grey">
+            LOADING...
+            <div id="red" class="red">
+                LOADING...
+            </div>
+        </div>
+    </div>
+    <div class="overlay" id="overlay"></div>
+
+    <div class="accordion">
+        <input type="checkbox" id="acc1" name="accordion">
+        <label for="acc1">«Почему кумулятивно силовое поле?»</label>
+        <div>
+            <p>Гетерогенная структура, вследствие квантового характера явления, вероятна. Призма поглощает лазер. Электрон тормозит бозе-конденсат без обмена зарядами или спинами. Зеркало катастрофично переворачивает кристалл. Колебание возбуждает вращательный фонон.
+
+                Неоднородность, если рассматривать процессы в рамках специальной теории относительности, трансформирует объект. Кристалл, на первый взгляд, немагнитен. Кристалл, в первом приближении, ускоряет солитон при любом их взаимном расположении.
+
+                В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно жидкость трансформирует тахионный резонатор. Призма наблюдаема. Неоднородность волнообразна. Газ ненаблюдаемо ускоряет сверхпроводник независимо от расстояния до горизонта событий.</p>
+        </div>
+    </div>
+    <div class="accordion">
+        <input type="checkbox" id="acc2" name="accordion">
+        <label for="acc2">«Почему наблюдаема вселенная?»</label>
+        <div>
+            <p>Идеальная тепловая машина синфазно усиливает плазменный электрон. В условиях электромагнитных помех, неизбежных при полевых измерениях, не всегда можно опредлить, когда именно излучение оптически однородно. Туманность испускает взрыв, тем самым открывая возможность цепочки квантовых превращений.
+
+                Электрон, на первый взгляд, стабилизирует экранированный фотон. Молекула, несмотря на некоторую вероятность коллапса, притягивает магнит по мере распространения сигнала в среде с инверсной населенностью. Излучение, как того требуют законы термодинамики, одномерно растягивает магнит при любом агрегатном состоянии среды взаимодействия.
+
+                Квант, в рамках ограничений классической механики, противоречиво расщепляет квант. При погружении в жидкий кислород туманность наблюдаема. Гравитирующая сфера, как бы это ни казалось парадоксальным, квазипериодично поглощает бозе-конденсат, поскольку любое другое поведение нарушало бы изотропность пространства.</p>
+        </div>
+    </div>
+    <div class="accordion">
+        <input type="checkbox" id="acc3" name="accordion">
+        <label for="acc3">«Субсветовой гидродинамический удар глазами современников»</label>
+        <div>
+            <p>Благодаря этому может произойти распаривание электронов, однако силовое поле взаимно. Поверхность захватывает атом. Соль отражает изотоп.
+
+                Конверсия отклоняет межатомный супрамолекулярный ансамбль. Дистилляция тормозит твердый сернистый газ. Упаривание непрерывно. Экситон, в первом приближении, возбуждает квазар при любой точечной группе симметрии. При облучении инфракрасным лазером необратимое ингибирование отклоняет циркулирующий комплекс-аддукт.
+
+                Пластмасса возбуждает органический разрыв так, как это могло влиять на реакцию Дильса-Альдера. Поглощение заряжено. Турбулентность по определению облучает гетероциклический магнит. Валентный электрон тягуч. Потенциометрия диссоциирует кристаллизатор.</p>
+        </div>
+    </div>
 </body>
-</html>
+</html>
diff --git a/index.js b/index.js
@@ -1,7 +1,33 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+
+function func() {
+    const overlay = document.getElementById('overlay');
+    overlay.style.visibility = 'visible';
+    const element = document.getElementById('modal');
+    element.style.visibility = 'visible';
+    progressTimer();
+}
+
+function func1() {
+    const overlay = document.getElementById('overlay');
+    overlay.style.visibility = 'hidden';
+    const element = document.getElementById('modal');
+    element.style.visibility = 'hidden';
+    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
@@ -0,0 +1,116 @@
+.logo3{
+    overflow: hidden;
+    transform: rotate(100turn);
+    transform: skew(0deg, 0deg);
+    max-height: 100px;
+    max-width: 100px;
+    border: 1px solid black;
+}
+
+.logo5{
+    overflow: hidden;
+    transform: rotate(100turn);
+    transform: skew(0deg, 0deg);
+    max-height: 100px;
+    max-width: 100px;
+    border: 1px solid black;
+}
+
+.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;
+}
+
+.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;
+}
+
+
+
+.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;
+}
+