Add buscadorSala

2026-09-23 13:12:42 +02:00
parent 050d5e49c4
commit d65b7fcb91
8 changed files with 677 additions and 238 deletions
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Trivial - Lobby</title>
+
+    <link
+        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+        rel="stylesheet">
+
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/buscadorSala.css">
+</head>
+
+<body>
+
+    <?php
+    include_once("cabecera.php");
+    ?>
+
+    <main class="container py-5">
+
+        <div class="text-center mb-5">
+            <button
+                type="button"
+                class="btn btn-play-kahoot btn-crear-sala"
+                data-bs-toggle="modal"
+                data-bs-target="#modalCrearSala">
+                <span>+</span>
+                Crear sala
+            </button>
+        </div>
+
+        <div
+            id="contenedorSalas"
+            class="row justify-content-center g-4">
+
+        </div>
+    </main>
+
+    <div
+        class="modal fade"
+        id="modalCrearSala"
+        tabindex="-1"
+        aria-labelledby="modalCrearSalaLabel"
+        aria-hidden="true">
+
+        <div class="modal-dialog modal-dialog-centered">
+
+            <div class="modal-content modal-kahoot">
+
+                <div class="modal-header modal-kahoot-header">
+                    <h5
+                        class="modal-title"
+                        id="modalCrearSalaLabel">
+                        Crear sala
+                    </h5>
+                    <button
+                        type="button"
+                        class="btn-close btn-close-white"
+                        data-bs-dismiss="modal"
+                        aria-label="Cerrar">
+                    </button>
+                </div>
+
+                <div class="modal-body p-4">
+
+                    <div class="mb-3">
+                        <label
+                            for="nombreSala"
+                            class="form-label">
+                            Nombre de la sala
+                        </label>
+                        <input
+                            type="text"
+                            id="nombreSala"
+                            class="form-control input-kahoot"
+                            placeholder="Ej. Noche de Trivial">
+                    </div>
+
+                    <div class="mb-3">
+                        <label
+                            for="nombreEquipo1"
+                            class="form-label">
+
+                            Nombre del equipo 1
+                        </label>
+                        <input
+                            type="text"
+                            id="nombreEquipo1"
+                            class="form-control input-kahoot"
+                            placeholder="Ej. Los cerebritos">
+                    </div>
+
+                    <div class="mb-3">
+                        <label
+                            for="nombreEquipo2"
+                            class="form-label">
+                            Nombre del equipo 2
+                        </label>
+                        <input
+                            type="text"
+                            id="nombreEquipo2"
+                            class="form-control input-kahoot"
+                            placeholder="Ej. Los campeones">
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button
+                        type="button"
+                        class="btn btn-secondary"
+                        data-bs-dismiss="modal">
+                        Cancelar
+                    </button>
+                    <button
+                        type="button"
+                        class="btn btn-kahoot-login"
+                        id="btnCrearSala">
+                        Crear sala
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script
+        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
+    </script>
+    <script src="js/lobbyDummy.js"></script>
+    <script src="js/buscadorSala.js"></script>
+
+</body>
+
+</html>