From bdf2cb43ee5ad683a7068cdcfbb65dbbfeb34180 Mon Sep 17 00:00:00 2001
From: David espinosa <104380606+davespser@users.noreply.github.com>
Date: Thu, 5 Dec 2024 15:19:55 +0100
Subject: [PATCH] Update index.html

---
 index.html | 53 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 13 deletions(-)
diff --git a/index.html b/index.html
index 6693385e..54d2047c 100644
--- a/index.html
+++ b/index.html
@@ -5,21 +5,48 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mundo Interactivo 3D</title>
 
-  <!-- Carga de la librería Three.js -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-
-  <!-- Carga de Firebase -->
-<script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-database.js"></script>
-  
-
-  <!-- Carga de tus propios scripts -->
-  <script src="js/firebase-config.js"></script> <!-- Configuración de Firebase -->
-  <script src="js/app.js"></script>            <!-- Lógica de Three.js -->
+  <!-- Carga de librerías externas -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <!-- Three.js -->
+  <script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js"></script> <!-- Firebase App -->
+  <script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-database.js"></script> <!-- Firebase Database -->
 
+  <!-- Estilos básicos -->
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden; /* Quita las barras de desplazamiento */
+      font-family: Arial, sans-serif;
+      background-color: #111; /* Fondo oscuro */
+      color: #fff; /* Texto blanco */
+    }
+    #threeCanvas {
+      display: block;
+      width: 100vw;
+      height: 100vh;
+    }
+    #ui {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 100; /* Encima del canvas */
+    }
+    h1, p {
+      margin: 0;
+    }
+  </style>
 </head>
 <body>
-  <h1>Bienvenido al Mundo 3D</h1>
-  <p>Usa las teclas de flecha para moverte.</p>
+  <!-- Interfaz básica -->
+  <div id="ui">
+    <h1>Mundo Interactivo 3D</h1>
+    <p>Usa las teclas de flecha para moverte.</p>
+  </div>
+
+  <!-- Canvas para renderizar con Three.js -->
+  <canvas id="threeCanvas"></canvas>
+
+  <!-- Carga de tus scripts -->
+  <script src="js/firebase-config.js"></script> <!-- Configuración de Firebase -->
+  <script src="js/app.js"></script> <!-- Lógica de la aplicación 3D -->
 </body>
 </html>
