final version :P

Author: Greekforce1821

index.html

@@ -70,7 +70,7 @@ <h2>Πληροφορίες Εφαρμογής</h2>
       <thead>
         <tr>
           <th>Αριθμός</th>
-          <th>Λειτουργία</th>
+          <th>Λειτουργίες</th>
         </tr>
       </thead>
       <tbody>
@@ -101,14 +101,12 @@ <h2>Πληροφορίες Εφαρμογής</h2>
       </tbody>
     </table>
 
-    <p>Η εφαρμογή συνδυάζει την τεχνολογία, την αισθητική και τη γνώση, προσφέροντας μια πλούσια εμπειρία που προσκαλεί τον χρήστη να ανακαλύψει, να μάθει και να ψυχαγωγηθεί.</p>
-
-    <button id="closeInfo">Κλείσιμο Πληροφοριών</button>
+  <p>Η εφαρμογή συνδυάζει την τεχνολογία, την αισθητική και τη γνώση, προσφέροντας μια πλούσια εμπειρία που προσκαλεί τον χρήστη να ανακαλύψει, να μάθει και να ψυχαγωγηθεί.</p>
+  <button id="closeInfo">Κλείσιμο Πληροφοριών</button>
   </div>
 </div>
 
 
-
 <!--Properties for the Help UI-->
 <div id="helpUI" style="display:none;">
   <div id="helpMessage">
@@ -126,41 +124,28 @@ <h2>Βοήθεια & Υποστήριξη</h2>
       </tr>
       <tr>
         <td>2</td>
-        <td>Όλα τα αντικείμενα εκτός των σπιτιών του Patrick, του Spongebob & του Squidward υποστηρίζουν animation & εκπομπή ήχων.</td>
-      </tr>
-      <tr>
-        <td>3</td>
         <td>Περιπλανηθείτε στον χώρο με τα πλήκτρα W,A,S,D ή με τα γνωστά βελάκια.</td>
       </tr>
       <tr>
-        <td>4</td>
+        <td>3</td>
         <td>Για την καλύτερη απόδοση των γραφικών, καλό θα είναι να ενεργοποιήσετε εκ των προτέρων την επιλογή: "Use hardware acceleration when available"</td>
       </tr>
       <tr>
-        <td>5</td>
+        <td>4</td>
         <td>Σε περίπτωση που παρατηρήσετε "κολλήματα" και frame drops κατά την περιήγησή σας, φορτώστε ξανά την σελίδα, περιηγηθείτε σε όλο τον χάρτη και αφήστε τα κολλήματα να ξεκολλήσουν. Αυτό συμβαίνει γιατί είναι μεγάλα τα μοντέλα και η κάρτα γραφικών του φυλλομετρητή σας ζορίζεται.</td>
       </tr>
       <tr>
-        <td>6</td>
+        <td>5</td>
         <td>Επειδή η σελίδα εκπέμπει ηχητικά εφέ, θα πρέπει να έχετε ενεργοποιημένο το <bold>autoplay</bold> & τον <bold> ήχο</bold> για να τα ακούσετε.</td>
       </tr>
       <tr>
-        <td>7</td>
+        <td>6</td>
         <td>Eπειδή τα 3D μοντέλα είναι "ευαίσθητα" με το framework A-Frame, παρακαλείστε, να δώσετε ιδιαίτερη προσοχή στα κλίκ που κάνετε στα αντικείμενα.</td>
       </tr>
     </table>
 
     <p>Σε περίπτωση που έρθετε αντιμέτωποι με κάποιο νέο σφάλμα, παρακαλώ, να επικοινωνήσετε με τον υπεύθυνο υλοποίησης.</p>
 
-    <footer id="helpFooter">
-      <div class="footer-content">
-        <p>Powered by: A-Frame</p>
-      </div>
-      <div class="footer-bottom">
-        <p>© Σπυρίδων Ευτύχιος Κοκοτός © | Email: inf2021098@ionio.gr / skokotos@ionio.gr
-        </p>
-      </div>
-    </footer>
     <p>Πατήστε το παρακάτω κουμπί για να πραγματοποιήσετε έξοδο από το μενού βοήθειας.</p>
     <button id="closeHelp">Κλείσιμο Βοήθειας</button> 
   </div>
@@ -199,15 +184,15 @@ <h2>Βοήθεια & Υποστήριξη</h2>
       <img src="./src/images/main.jpg" alt="Main Image" style="width: 300px; height: 300px; border-radius: 50%; display: block; margin: 0 auto; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);">
       <h2>Καλώς ορίσατε!</h2>
       <p>Πατήστε το παρακάτω κουμπί για να εισέλθετε στον εικονικό κόσμο και να εξερευνήσετε τη διαδραστική εμπειρία!</p>
-      <button id="enterVR">Enter VR</button> 
+      <button id="enterVR">Είσοδος</button>
     </div>
     <footer id="welcomeFooter">
       <div class="footer-content">
         <p>Ιόνιο Πανεπιστήμιο | Τμήμα Πληροφορικής | Μάθημα: Πολυμέσα | Ακαδημαϊκό έτος: 2024 - 2025 | Κέρκυρα |</p>
       </div>
       <div class="footer-bottom">
         <p>Powered by: A-Frame</p>
-        <p>© Σπυρίδων Ευτύχιος Κοκοτός | inf2021098 | Email: skokotos@ionio.gr / inf202109@ionio.gr ©</p>
+        <p>© Σπυρίδων Ευτύχιος Κοκοτός | inf2021098 | Email: skokotos@ionio.gr / inf2021098@ionio.gr © </p>
       </div>
     </footer>
   </div> 

src/css/help.css

@@ -1,21 +1,72 @@
 html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden; 
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: 'Roboto', sans-serif;
+}
+
+#helpUI {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.85); 
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  z-index: 1000;
+  overflow: auto; 
+  padding: 20px;
+}
+
+  #helpTable {
+    width: 200%  !important;
+    max-width: 1200px !important;
+    margin: 20px auto;
+    border-collapse: collapse;
+    background: rgba(255, 255, 255, 0.1);
+    table-layout: auto;
+    border-radius: 15px; 
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
   }
 
-  #helpUI {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh; 
-    background: rgba(0, 0, 0, 0.75); 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000; 
+  #helpTable th,
+  #helpTable td {
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #ecf0f1;
+    text-align: left;
+    word-wrap: break-word; 
+    overflow-wrap: break-word;
+  }
+
+  #helpTable thead {
+    background-color: #ff5722;
+    color: white;
+  }
+  
+  #helpTable tbody tr:nth-child(even) {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  
+  #helpTable tbody tr:hover {
+    background-color: rgba(255, 87, 34, 0.3);
+    transition: background-color 0.3s ease;
+  }
+  
+  @media screen and (max-width: 768px) {
+    #helpTable {
+      font-size: 0.9em;
+    }
+  }
+  
+  @media screen and (max-width: 480px) {
+    #helpTable {
+      font-size: 0.8em;
+    }
   }
 
   #helpIcon {
@@ -79,26 +130,27 @@ html, body {
     z-index: 1010;
   }
 
-  .footer-bottom p {
+ #footer-bottom p {
     font-size: 1.2em;
     margin: 0; 
     padding: 5px 0; 
     color: white; 
   }
 
-  #closeHelp {
-    background-color: #ff5722; 
+
+  #closehelp {
+    background-color: #ff5722;
     color: white;
     border: none;
-    border-radius: 8px;
-    padding: 10px 20px;
-    font-size: 1em;
+    border-radius: 10px;
+    padding: 8px 20px;
+    font-size: 0.5em;
     cursor: pointer;
-    transition: all 0.3s ease; 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-}
-
-#closeHelpButton:hover {
-    background-color: #e64a19; 
-    transform: scale(1.05); 
-}
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  }
+  
+  #closehelp:hover {
+    background-color: #e64a19;
+    transform: scale(1.1);
+  }