add modal crear pregunta

perfil.php

@@ -210,6 +210,26 @@
 
                             </div>
 
+
+                            <!-- ========================= -->
+                            <!-- CREAR PREGUNTA -->
+                            <!-- ========================= -->
+
+                            <div class="text-center mt-4">
+
+                                <button
+                                    type="button"
+                                    class="btn btn-play-kahoot"
+                                    data-bs-toggle="modal"
+                                    data-bs-target="#modalCrearPregunta">
+
+                                    <i class="bi bi-plus-circle-fill"></i>
+                                    Crear pregunta
+
+                                </button>
+
+                            </div>
+
                         </div>
 
                     </div>
@@ -223,14 +243,192 @@
     </div>
 
 
+    <!-- ================================================= -->
+    <!-- MODAL CREAR PREGUNTA -->
+    <!-- ================================================= -->
+
+    <div
+        class="modal fade"
+        id="modalCrearPregunta"
+        tabindex="-1"
+        aria-labelledby="modalCrearPreguntaLabel"
+        aria-hidden="true">
+
+        <div class="modal-dialog modal-dialog-centered">
+
+            <div class="modal-content modal-kahoot">
+
+
+                <!-- CABECERA DEL MODAL -->
+
+                <div class="modal-header modal-kahoot-header">
+
+                    <h5
+                        class="modal-title"
+                        id="modalCrearPreguntaLabel">
+
+                        <i class="bi bi-question-circle-fill me-2"></i>
+                        Crear pregunta
+
+                    </h5>
+
+
+                    <button
+                        type="button"
+                        class="btn-close btn-close-white"
+                        data-bs-dismiss="modal"
+                        aria-label="Cerrar">
+                    </button>
+
+                </div>
+
+
+                <!-- CUERPO DEL MODAL -->
+
+                <div class="modal-body p-4">
+
+                    <form id="formCrearPregunta">
+
+
+                        <!-- PREGUNTA -->
+
+                        <div class="mb-4">
+
+                            <label
+                                for="pregunta"
+                                class="form-label fw-semibold">
+
+                                <i class="bi bi-question-lg me-1"></i>
+                                Pregunta
+
+                            </label>
+
+                            <textarea
+                                id="pregunta"
+                                name="pregunta"
+                                class="form-control input-kahoot"
+                                rows="3"
+                                placeholder="Escribe aquí la pregunta..."
+                                required></textarea>
+
+                        </div>
+
+
+                        <!-- RESPUESTA CORRECTA -->
+
+                        <div class="mb-3">
+
+                            <label
+                                for="respuestaCorrecta"
+                                class="form-label fw-semibold text-success">
+
+                                <i class="bi bi-check-circle-fill me-1"></i>
+                                Respuesta correcta
+
+                            </label>
+
+                            <input
+                                type="text"
+                                id="respuestaCorrecta"
+                                name="respuestaCorrecta"
+                                class="form-control input-kahoot"
+                                placeholder="Escribe la respuesta correcta..."
+                                required>
+
+                        </div>
+
+
+                        <!-- RESPUESTAS INCORRECTAS -->
+
+                        <div class="mb-3">
+
+                            <label
+                                class="form-label fw-semibold text-danger">
+
+                                <i class="bi bi-x-circle-fill me-1"></i>
+                                Respuestas incorrectas
+
+                            </label>
+
+
+                            <input
+                                type="text"
+                                id="respuestaIncorrecta1"
+                                name="respuestaIncorrecta1"
+                                class="form-control input-kahoot mb-2"
+                                placeholder="Respuesta incorrecta 1"
+                                required>
+
+
+                            <input
+                                type="text"
+                                id="respuestaIncorrecta2"
+                                name="respuestaIncorrecta2"
+                                class="form-control input-kahoot mb-2"
+                                placeholder="Respuesta incorrecta 2"
+                                required>
+
+
+                            <input
+                                type="text"
+                                id="respuestaIncorrecta3"
+                                name="respuestaIncorrecta3"
+                                class="form-control input-kahoot"
+                                placeholder="Respuesta incorrecta 3"
+                                required>
+
+                        </div>
+
+                    </form>
+
+                </div>
+
+
+                <!-- PIE DEL MODAL -->
+
+                <div class="modal-footer">
+
+                    <button
+                        type="button"
+                        class="btn btn-secondary"
+                        data-bs-dismiss="modal">
+
+                        <i class="bi bi-x-lg me-1"></i>
+                        Cancelar
+
+                    </button>
+
+
+                    <button
+                        type="submit"
+                        form="formCrearPregunta"
+                        class="btn btn-kahoot-login">
+
+                        <i class="bi bi-check-lg me-1"></i>
+                        Crear pregunta
+
+                    </button>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
+
     <!-- Bootstrap JS -->
+
     <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js">
     </script>
 
+
     <!-- Tu JavaScript -->
+
     <script src="js/perfil.js"></script>
 
 </body>
 
-</html>
+</html>