-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (79 loc) · 3.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Desplegable y Three.js</title>
<link rel="stylesheet" href="style.css">
<!-- Import Map para módulos -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
}
}
</script>
<!-- Cargar Cannon.js desde CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cannon-es.js"></script>
</head>
<body>
<!-- Contenedor principal -->
<div id="app-container">
<h1>Inicie sesión o regístrese</h1>
<!-- Controles de registro e inicio de sesión -->
<h2>Registro</h2>
<input type="email" id="register-email" placeholder="Correo">
<input type="password" id="register-password" placeholder="Contraseña">
<button id="register-button">Registrarse</button>
<h2>Inicio de Sesión</h2>
<input type="email" id="login-email" placeholder="Correo">
<input type="password" id="login-password" placeholder="Contraseña">
<button id="login-button">Iniciar Sesión</button>
<h2>Sesión Activa</h2>
<button id="logout-button">Cerrar Sesión</button>
<!-- Contenedor para mensajes -->
<div id="messages"></div>
</div>
<!-- Menú desplegable -->
<div class="menu-container">
<!-- Checkbox oculto para manejar el estado -->
<input type="checkbox" id="toggle" class="hidden-input">
<!-- Botón principal del menú -->
<label for="toggle" class="menu-item">
<span>🔸</span> Menú
</label>
<!-- Contenido desplegable -->
<div class="menu-content">
<div class="menu-item" data-action="option1">
<span>🔸</span> Opción 1
</div>
<div class="menu-item" data-action="option2">
<span>🔸</span> Opción 2
</div>
<div class="menu-item" data-action="option3">
<span>🔸</span> Opción 3
</div>
</div>
</div>
<!-- Contenedor de Three.js -->
<div id="three-container">
<h1>Three.js + Firebase</h1>
<button id="load-scene-button">Cargar Escena</button>
<button id="unload-scene-button">Descargar Escena</button>
</div>
<!-- Scripts -->
<script type="module" src="js/firebase-config.js"></script>
<script type="module" src="js/app.js"></script>
<script type="module">
import { handleRegister, handleLogin, handleLogout } from './js/firebase-config.js';
import { loadScene, unloadScene } from './js/app.js';
// Agregar manejadores de eventos
document.getElementById("register-button").addEventListener("click", handleRegister);
document.getElementById("login-button").addEventListener("click", handleLogin);
document.getElementById("logout-button").addEventListener("click", handleLogout);
document.getElementById("load-scene-button").addEventListener("click", loadScene);
document.getElementById("unload-scene-button").addEventListener("click", unloadScene);
</script>
</body>
</html>