kontur-web-courses · factor-feerist · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/index.html b/index.html
@@ -6,7 +6,41 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
+    <img src="designs/logo1.png" class="logo logo1">
+    <img src="designs/logo2.png" class="logo logo2">
+    <dialog id="modal">
+        <button id="close"><b>X</b></button>
+        <p>Модальное окно</p>
+        <div class="progress"><div class="bar"></div> Loading... </div>
+        <div class="accordion-body">
+            <div class="accordion">
+
+                <details>
+                    <summary>Первое</summary>
+                    <p>Эта разница, вероятно, помогает объяснить, почему бобовая руда своеобразна.
+                        Иольдиевая глина благоприятно переоткладывает железистый перенос, где на поверхность выведены
+                        кристаллические структуры фундамента.
+                    </p>
+                </details>
+                <details>
+                    <summary>Второе</summary>
+                    <p>Альпийская складчатость слагает отсортированный ийолит-уртит, поскольку непосредственно
+                        мантийные струи не наблюдаются. Происхождение, но если принять для простоты некоторые докущения, отмыто.
+                        Базальтовый слой занимает плейстоцен.
+                    </p>
+                </details>
+                <details>
+                    <summary>Третье</summary>
+                    <p>Несомненный интерес представляет и тот факт, что минерализация складчата.
+                        Криптархей изменяет девонский грязевой вулкан. Извержение разогревает фирн. Отличительной чертой поверхности,
+                        сложенной излияниями очень текучей лавы, является то, что надвиг изменяет кремнистый сдвиг.
+                    </p>
+                </details>
+            </div>
+        </div>
+
+            <script src="index.js" type="text/javascript"></script>
+    </dialog>
     <script src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -4,4 +4,33 @@
     const element = document.querySelector('.myElement');
     element.style.color = 'red';
     element.style.width = '300px';
-*/
+*/
+for (const logo of document.querySelectorAll('.logo')) {
+    logo.style.width < logo.style.height ? logo.style.height = '100px' : logo.style.width = '100px';
+}
+
+const modalElement = document.getElementById('modal');
+modalElement.showModal();
+
+const closeButton = document.getElementById('close');
+closeButton.addEventListener('click', () => modalElement.close());
+
+
+const bar = document.querySelector('.progress .bar');
+let progress = 0;
+let iter = () => {
+    if (progress !== 100) {
+        progress += 1;
+        bar.style.width = `${progress}%`;
+        let timerId = setTimeout(iter, 30);
+    } 
+}
+setTimeout(iter, 30)
+
+const accordion = document.getElementsByClassName('container');
+
+for (i=0; i<accordion.length; i++) {
+    accordion[i].addEventListener('click', function () {
+        this.classList.toggle('active')
+    })
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,61 @@
+#modal {
+    width: 640px;
+    position: fixed;
+}
+
+#modal::backdrop {
+    background-image: linear-gradient(
+      45deg,
+      magenta,
+      rebeccapurple,
+      dodgerblue,
+      green
+    );
+    opacity: 0.75;
+}
+
+#close {
+    position: absolute;
+    top: 5%;
+    right: 2%;
+    background-color: red;
+}
+
+.progress{
+    height:30px;
+    width:100%;
+    background-color:lightgray;
+    position:relative;
+    z-index: -2;
+    text-align: center;
+    text-justify: inter-cluster;
+    font-size: 150%;
+}
+
+.progress .bar {
+    position:absolute;
+    z-index: -1;
+    height: 100%;
+    background:red;
+    content:'';
+    width: 10%;
+    display:flex;
+    justify-content:flex-end;
+}
+
+/* .progress::before{
+    position:absolute;
+    z-index: -1;
+    height: 100%;
+    background:red;
+    content:'';
+    width: 10%;
+    display:flex;
+    justify-content:flex-end;
+} */
+
+
+.accordion {
+    width: 75%;
+    padding: 45px 45px;
+}