schermata iniziale

index.html

@@ -13,19 +13,32 @@
         <div class="overlay"></div>
         <div class="content">
             <div class="top-section">
-                <img src="./img/titolo.png" alt="titolo" class="main-title" />
+                <img src="titolo.png" alt="titolo" class="main-title" />
             </div>
             <div class="container bottom-section">
                 <div class="item left">
                     <div class="controls-box">
                         <h3>Controlli</h3>
-                        <p><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> Movimento</p>
+                        <p>Movimento</p>
-                        <p><kbd>Mouse</kbd> Camera</p>
+                        <p><kbd>Freccia su</kbd> Avanti</p>
+                        <p><kbd>Freccia giù</kbd> Indietro</p>
+                        <p><kbd>Freccia destra</kbd> Destra</p>
+                        <p><kbd>Freccia sinistra</kbd> Sinistra</p>
+                        <p><kbd>Mouse</kbd> Punto di vista</p>
                     </div>
                 </div>
                 <div class="item center">
                     <span class="pulse-text">Clicca per giocare</span>
                 </div>
+                <div class="item right">
+                    <div class="instructions-box">
+                        <h3>Istruzioni</h3>
+                        <p>Obiettivo: raccogliere tutti i rifiuti sull’isola</p>
+                        <p>Attenzione allo scadere del tempo!</p>
+                        <p>Usa i comandi per esplorare e ripulire</p>
+                    </div>
+                </div>
+
                 <div class="item right"></div>
             </div>
         </div>

style.css

@@ -110,10 +110,11 @@ body {
 }
 
 .main-title {
-    max-width: 80%;
+    width: 25%;
     height: auto;
 }
 
+
 /* Divisione 50% Sotto */
 .bottom-section {
     flex: 1;
@@ -132,37 +133,72 @@ body {
     text-align: center;
 }
 
-/* Styling dei Controlli (KBD) */
+/* Styling dei Controlli */
 .controls-box {
     width: 100%;
     display: flex;
     flex-direction: column;  
     align-items: center;      
-}
+    justify-content: center; 
-.controls-box h3 {
+    height: 100%;         
-    margin-bottom: 10px;
+    color: white;
-    font-size: 1.2rem;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
-    text-transform: uppercase;
+    font-family: 'Press Start 2P', cursive; 
-}
-.controls-box h3, .controls-box p, .pulse-text {
-    margin-top: 0;
 }
 
-kbd {
+.controls-box h3 {
-    background-color: #eee;
+    margin-bottom: 10px;
-    border-radius: 3px;
+    font-size: 1.4rem;
-    border: 1px solid #b4b4b4;
+    text-transform: uppercase;
-    box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 2px 0 0 rgba(255,255,255,0.7) inset;
+    text-align: center;
-    color: #333;
-    display: inline-block;
-    font-size: 0.85em;
-    font-weight: 700;
-    line-height: 1;
-    padding: 2px 4px;
-    white-space: nowrap;
-    margin: 0 2px;
 }
 
+.controls-box p {
+    margin: 6px 0;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+/* Stile dei tasti */
+.controls-box kbd {
+    background-color: #5e5d5d;
+    color: #fff;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family: monospace;
+    font-weight: bold;
+    margin: 6px 0; 
+}
+
+/* Box delle istruzioni */
+.instructions-box {
+    width: 100%;
+    display: flex;
+    flex-direction: column;  
+    align-items: center;   
+    justify-content: center;  
+    height: 100%;     
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+    font-family: 'Press Start 2P', cursive; 
+}
+
+.instructions-box h3 {
+    margin-bottom: 10px;
+    font-size: 1.4rem;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.instructions-box p {
+    margin: 6px 0;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+
+
+
 /* Animazione per "Clicca per giocare" */
 .pulse-text {
     font-size: 1.5rem;