Squash merge from 'Xaempel/yaqa'

XodTech · Xaempel · XodTech · commit c98892aa5660 · 2025-08-18T16:01:16.000+02:00
- Fixed margin in modal window
- Refactored index.html

Co-authored-by: Xaempel &lt;xaempelfeedback@gmail.com&gt;
diff --git a/src/css/index.css b/src/css/index.css
@@ -9,26 +9,63 @@ body {
     margin: 0;
 }
 
-footer {
-    color: #c9c5c5;
+#quiz-list {
+    position: absolute;
+    top: 120px;
+    left: 10px;
     display: flex;
-    justify-content: center;
-    position: fixed;
-    bottom: 10px;
-    margin: 5px;
-    text-align: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    width: 100vw;
+    max-height: calc(100vh - 90px);
+    overflow-y: auto;
+    max-width: 300px;
 }
 
-footer a {
-    color: #e39471;
-    /* text-decoration: none; */
+.quiz-item {
+    margin: 10px 0;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    background-color: #454545;
+    color: #ffffff;
+    cursor: pointer;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    width: auto;
+    max-width: 300px;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.quiz-item .name {
+    margin-right: 10px;
+}
+
+.quiz-item .delete {
+    font-size: 24px;
+    cursor: pointer;
+    margin-left: 10px;
+    color: #ff0000;
+    transition: color 0.2s ease-in-out;
+}
+
+.quiz-item:hover {
+    background-color: #5c5c5c;
+    transform: scale(1.03);
 }
 
 .modal {
     background-color: #2b2b2b;
     padding: 20px;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
     width: 500px;
     position: absolute;
     z-index: 10;
@@ -37,11 +74,26 @@ footer a {
     animation: pop-up 0.1s ease-in-out forwards;
 }
 
+footer {
+    color: #c9c5c5;
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    bottom: 10px;
+    margin: 5px;
+    text-align: center;
+}
+
+footer a {
+    color: #e39471;
+}
+
 @keyframes pop-up {
     0% {
         opacity: 0;
         transform: scale(0.5);
     }
+
     100% {
         opacity: 0.9;
         transform: scale(1);
@@ -52,8 +104,9 @@ footer a {
     position: absolute;
     top: 0px;
     left: 10px;
-    
+
 }
+
 .add-btn {
     position: absolute;
     top: 60px;
@@ -130,54 +183,6 @@ button[type="submit"] {
     padding-left: 50px;
     padding-right: 50px;
     margin-top: 10px;
-    
-}
-
-#quiz-list {
-    position: absolute;
-    top: 120px;
-    left: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100vw;
-    max-height: calc(100vh - 90px);
-    overflow-y: auto;
-    max-width: 300px;
-}
-
-.quiz-item {
-    margin: 10px 0;
-    padding: 10px;
-    border: none;
-    border-radius: 10px;
-    background-color: #454545;
-    color: #ffffff;
-    cursor: pointer;
-    font-size: 18px;
-    display: flex;
-    align-items: center;
-    width: auto;
-    max-width: 300px;
-    transition: background-color 0.2s ease-in-out;
-}
-
-.quiz-item .name {
-    margin-right: 10px;
-}
-
-.quiz-item .delete {
-    font-size: 24px;
-    cursor: pointer;
-    margin-left: 10px;
-    color: #ff0000;
-    transition: color 0.2s ease-in-out;
-}
-
-.quiz-item:hover {
-    background-color: #5c5c5c;
-    transform: scale(1.03);
 }
 
 .delete:hover {
diff --git a/src/index.html b/src/index.html
@@ -3,11 +3,13 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, orientation=portrait">
-        <title>YAQA | Yet Another Quiz App</title>
         <meta name="description" content="Simple yet powerfull open-source quiz application that generates quizzes from JSON data">
         <meta name="keywords" content="open source quiz, quiz generator, json quiz, simple quiz app, quiz application, open-source software">
+        <title>YAQA | Yet Another Quiz App</title>
+
         <link rel="stylesheet" href="css/index.css">
         <link rel="stylesheet" href="css/quiz.css">
+
         <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
         <script src = "./js/main.js"></script>
         <script src = "./js/generators.js"></script>
@@ -27,8 +29,10 @@ <h3 id="title" class="title">YAQA by XodTech</h3>
             <button class="btn" type="submit" onclick="handleSubmit()">Submit</button>
         </div>
         <div id = "quiz-window" class="quiz-window"></div>
+
+        <footer>
+            <span>YAQA is an <a href="https://github.com/XodTech/yaqa" target="_blank">open-source</a> project available under the terms of <a href="https://github.com/XodTech/yaqa/blob/main/LICENSE" target="_blank">AGPL 3.0 License</a></span>
+        </footer>
     </body>
-    <footer>
-        <span>YAQA is an <a href="https://github.com/XodTech/yaqa" target="_blank">open-source</a> project available under the terms of <a href="https://github.com/XodTech/yaqa/blob/main/LICENSE" target="_blank">AGPL 3.0 License</a></span>
-    </footer>
+
 </html> 
