Skip to content

Commit 26880ec

Browse files
final version :P
1 parent 5f03610 commit 26880ec

File tree

2 files changed

+90
-53
lines changed

2 files changed

+90
-53
lines changed

index.html

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ <h2>Πληροφορίες Εφαρμογής</h2>
7070
<thead>
7171
<tr>
7272
<th>Αριθμός</th>
73-
<th>Λειτουργία</th>
73+
<th>Λειτουργίες</th>
7474
</tr>
7575
</thead>
7676
<tbody>
@@ -101,14 +101,12 @@ <h2>Πληροφορίες Εφαρμογής</h2>
101101
</tbody>
102102
</table>
103103

104-
<p>Η εφαρμογή συνδυάζει την τεχνολογία, την αισθητική και τη γνώση, προσφέροντας μια πλούσια εμπειρία που προσκαλεί τον χρήστη να ανακαλύψει, να μάθει και να ψυχαγωγηθεί.</p>
105-
106-
<button id="closeInfo">Κλείσιμο Πληροφοριών</button>
104+
<p>Η εφαρμογή συνδυάζει την τεχνολογία, την αισθητική και τη γνώση, προσφέροντας μια πλούσια εμπειρία που προσκαλεί τον χρήστη να ανακαλύψει, να μάθει και να ψυχαγωγηθεί.</p>
105+
<button id="closeInfo">Κλείσιμο Πληροφοριών</button>
107106
</div>
108107
</div>
109108

110109

111-
112110
<!--Properties for the Help UI-->
113111
<div id="helpUI" style="display:none;">
114112
<div id="helpMessage">
@@ -126,41 +124,28 @@ <h2>Βοήθεια & Υποστήριξη</h2>
126124
</tr>
127125
<tr>
128126
<td>2</td>
129-
<td>Όλα τα αντικείμενα εκτός των σπιτιών του Patrick, του Spongebob & του Squidward υποστηρίζουν animation & εκπομπή ήχων.</td>
130-
</tr>
131-
<tr>
132-
<td>3</td>
133127
<td>Περιπλανηθείτε στον χώρο με τα πλήκτρα W,A,S,D ή με τα γνωστά βελάκια.</td>
134128
</tr>
135129
<tr>
136-
<td>4</td>
130+
<td>3</td>
137131
<td>Για την καλύτερη απόδοση των γραφικών, καλό θα είναι να ενεργοποιήσετε εκ των προτέρων την επιλογή: "Use hardware acceleration when available"</td>
138132
</tr>
139133
<tr>
140-
<td>5</td>
134+
<td>4</td>
141135
<td>Σε περίπτωση που παρατηρήσετε "κολλήματα" και frame drops κατά την περιήγησή σας, φορτώστε ξανά την σελίδα, περιηγηθείτε σε όλο τον χάρτη και αφήστε τα κολλήματα να ξεκολλήσουν. Αυτό συμβαίνει γιατί είναι μεγάλα τα μοντέλα και η κάρτα γραφικών του φυλλομετρητή σας ζορίζεται.</td>
142136
</tr>
143137
<tr>
144-
<td>6</td>
138+
<td>5</td>
145139
<td>Επειδή η σελίδα εκπέμπει ηχητικά εφέ, θα πρέπει να έχετε ενεργοποιημένο το <bold>autoplay</bold> & τον <bold> ήχο</bold> για να τα ακούσετε.</td>
146140
</tr>
147141
<tr>
148-
<td>7</td>
142+
<td>6</td>
149143
<td>Eπειδή τα 3D μοντέλα είναι "ευαίσθητα" με το framework A-Frame, παρακαλείστε, να δώσετε ιδιαίτερη προσοχή στα κλίκ που κάνετε στα αντικείμενα.</td>
150144
</tr>
151145
</table>
152146

153147
<p>Σε περίπτωση που έρθετε αντιμέτωποι με κάποιο νέο σφάλμα, παρακαλώ, να επικοινωνήσετε με τον υπεύθυνο υλοποίησης.</p>
154148

155-
<footer id="helpFooter">
156-
<div class="footer-content">
157-
<p>Powered by: A-Frame</p>
158-
</div>
159-
<div class="footer-bottom">
160-
<p>© Σπυρίδων Ευτύχιος Κοκοτός © | Email: inf2021098@ionio.gr / skokotos@ionio.gr
161-
</p>
162-
</div>
163-
</footer>
164149
<p>Πατήστε το παρακάτω κουμπί για να πραγματοποιήσετε έξοδο από το μενού βοήθειας.</p>
165150
<button id="closeHelp">Κλείσιμο Βοήθειας</button>
166151
</div>
@@ -199,15 +184,15 @@ <h2>Βοήθεια & Υποστήριξη</h2>
199184
<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%);">
200185
<h2>Καλώς ορίσατε!</h2>
201186
<p>Πατήστε το παρακάτω κουμπί για να εισέλθετε στον εικονικό κόσμο και να εξερευνήσετε τη διαδραστική εμπειρία!</p>
202-
<button id="enterVR">Enter VR</button>
187+
<button id="enterVR">Είσοδος</button>
203188
</div>
204189
<footer id="welcomeFooter">
205190
<div class="footer-content">
206191
<p>Ιόνιο Πανεπιστήμιο | Τμήμα Πληροφορικής | Μάθημα: Πολυμέσα | Ακαδημαϊκό έτος: 2024 - 2025 | Κέρκυρα |</p>
207192
</div>
208193
<div class="footer-bottom">
209194
<p>Powered by: A-Frame</p>
210-
<p>© Σπυρίδων Ευτύχιος Κοκοτός | inf2021098 | Email: skokotos@ionio.gr / inf202109@ionio.gr ©</p>
195+
<p>© Σπυρίδων Ευτύχιος Κοκοτός | inf2021098 | Email: skokotos@ionio.gr / inf2021098@ionio.gr © </p>
211196
</div>
212197
</footer>
213198
</div>

src/css/help.css

Lines changed: 81 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,72 @@
11
html, body {
2-
height: 100%;
3-
margin: 0;
4-
padding: 0;
5-
overflow: hidden;
2+
height: 100%;
3+
margin: 0;
4+
padding: 0;
5+
overflow: hidden;
6+
font-family: 'Roboto', sans-serif;
7+
}
8+
9+
#helpUI {
10+
position: fixed;
11+
top: 0;
12+
left: 0;
13+
width: 100vw;
14+
height: 100vh;
15+
background: rgba(0, 0, 0, 0.85);
16+
display: flex;
17+
justify-content: center;
18+
align-items: flex-start;
19+
z-index: 1000;
20+
overflow: auto;
21+
padding: 20px;
22+
}
23+
24+
#helpTable {
25+
width: 200% !important;
26+
max-width: 1200px !important;
27+
margin: 20px auto;
28+
border-collapse: collapse;
29+
background: rgba(255, 255, 255, 0.1);
30+
table-layout: auto;
31+
border-radius: 15px;
32+
overflow: hidden;
33+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
634
}
735

8-
#helpUI {
9-
position: fixed;
10-
top: 0;
11-
left: 0;
12-
width: 100vw;
13-
height: 100vh;
14-
background: rgba(0, 0, 0, 0.75);
15-
display: flex;
16-
justify-content: center;
17-
align-items: center;
18-
z-index: 1000;
36+
#helpTable th,
37+
#helpTable td {
38+
padding: 12px;
39+
border: 1px solid rgba(255, 255, 255, 0.2);
40+
color: #ecf0f1;
41+
text-align: left;
42+
word-wrap: break-word;
43+
overflow-wrap: break-word;
44+
}
45+
46+
#helpTable thead {
47+
background-color: #ff5722;
48+
color: white;
49+
}
50+
51+
#helpTable tbody tr:nth-child(even) {
52+
background-color: rgba(255, 255, 255, 0.05);
53+
}
54+
55+
#helpTable tbody tr:hover {
56+
background-color: rgba(255, 87, 34, 0.3);
57+
transition: background-color 0.3s ease;
58+
}
59+
60+
@media screen and (max-width: 768px) {
61+
#helpTable {
62+
font-size: 0.9em;
63+
}
64+
}
65+
66+
@media screen and (max-width: 480px) {
67+
#helpTable {
68+
font-size: 0.8em;
69+
}
1970
}
2071

2172
#helpIcon {
@@ -79,26 +130,27 @@ html, body {
79130
z-index: 1010;
80131
}
81132

82-
.footer-bottom p {
133+
#footer-bottom p {
83134
font-size: 1.2em;
84135
margin: 0;
85136
padding: 5px 0;
86137
color: white;
87138
}
88139

89-
#closeHelp {
90-
background-color: #ff5722;
140+
141+
#closehelp {
142+
background-color: #ff5722;
91143
color: white;
92144
border: none;
93-
border-radius: 8px;
94-
padding: 10px 20px;
95-
font-size: 1em;
145+
border-radius: 10px;
146+
padding: 8px 20px;
147+
font-size: 0.5em;
96148
cursor: pointer;
97-
transition: all 0.3s ease;
98-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
99-
}
100-
101-
#closeHelpButton:hover {
102-
background-color: #e64a19;
103-
transform: scale(1.05);
104-
}
149+
transition: all 0.3s ease;
150+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
151+
}
152+
153+
#closehelp:hover {
154+
background-color: #e64a19;
155+
transform: scale(1.1);
156+
}

0 commit comments

Comments
 (0)