Hugging Face's logo

Spaces:
Doddieko67
/
god-dipsik
Running

App Files Community
god-dipsik / index.html
Doddieko67's picture
Doddieko67
Add 2 files
2ea11da verified
raw
history blame contribute delete
51.5 kB
 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExamGen AI - Plataforma de Exámenes Personalizados</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
--primary: #6366f1;
--primary-dark: #4f46e5;
--secondary: #10b981;
--dark: #1e293b;
--light: #f8fafc;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f1f5f9;
}
.gradient-bg {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
.subject-chip {
transition: all 0.3s ease;
}
.subject-chip:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.exam-card {
transition: all 0.3s ease;
border-left: 4px solid var(--primary);
}
.exam-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.tab-active {
border-bottom: 3px solid var(--primary);
font-weight: 600;
color: var(--primary);
}
.question-item {
border-left: 3px solid var(--primary);
}
.difficulty-badge {
font-size: 0.7rem;
padding: 0.2rem 0.5rem;
border-radius: 9999px;
}
.easy {
background-color: #dcfce7;
color: #16a34a;
}
.medium {
background-color: #fef9c3;
color: #ca8a04;
}
.hard {
background-color: #fee2e2;
color: #dc2626;
}
.ai-processing {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.6; }
50% { opacity: 1; }
100% { opacity: 0.6; }
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c7d2fe;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #a5b4fc;
}
</style>
</head>
<body class="min-h-screen">
<!-- Navbar -->
<nav class="gradient-bg text-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i class="fas fa-brain text-2xl mr-2"></i>
<span class="text-xl font-bold">ExamGen AI</span>
</div>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-white text-indigo-600">Inicio</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 hover:bg-opacity-75">Mis Exámenes</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 hover:bg-opacity-75">Historial</a>
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 hover:bg-opacity-75">Configuración</a>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="p-1 rounded-full text-indigo-200 hover:text-white focus:outline-none">
<i class="fas fa-bell h-6 w-6"></i>
</button>
<div class="ml-3 relative">
<div>
<button id="user-menu" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button class="inline-flex items-center justify-center p-2 rounded-md text-indigo-200 hover:text-white hover:bg-indigo-700 focus:outline-none">
<i class="fas fa-bars h-6 w-6"></i>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Welcome Banner -->
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
<div class="md:flex">
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold">Bienvenido de vuelta</div>
<h1 class="block mt-1 text-2xl font-medium text-gray-900">¿Qué examen generaremos hoy?</h1>
<p class="mt-2 text-gray-500">Selecciona entre nuestras opciones inteligentes para crear el examen perfecto para tus necesidades.</p>
</div>
<div class="md:flex-shrink-0 flex items-center justify-center p-8 md:w-1/3 bg-indigo-50">
<i class="fas fa-robot text-6xl text-indigo-400"></i>
</div>
</div>
</div>
<!-- Creation Tabs -->
<div class="mb-8 border-b border-gray-200">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<button id="new-exam-tab" class="tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
<i class="fas fa-plus-circle mr-2"></i> Nuevo Examen
</button>
<button id="upload-exam-tab" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm">
<i class="fas fa-file-upload mr-2"></i> Subir Examen
</button>
<button id="history-exam-tab" class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium text-sm">
<i class="fas fa-history mr-2"></i> Basado en Historial
</button>
</nav>
</div>
<!-- New Exam Form -->
<div id="new-exam-section" class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Configura tu examen personalizado</h2>
<!-- Subjects Selection -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-700 mb-4">1. Selecciona las materias</h3>
<div class="flex flex-wrap gap-3 mb-4" id="selected-subjects-container">
<!-- Selected subjects will appear here -->
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- Subject Card 1 -->
<div class="subject-chip bg-white border border-gray-200 rounded-lg p-4 shadow-sm cursor-pointer hover:border-indigo-300" data-color="bg-blue-100" data-text="text-blue-800" data-subject="Matemáticas">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
<i class="fas fa-square-root-alt text-blue-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Matemáticas</h4>
<p class="text-sm text-gray-500">Álgebra, cálculo, geometría</p>
</div>
</div>
</div>
<!-- Subject Card 2 -->
<div class="subject-chip bg-white border border-gray-200 rounded-lg p-4 shadow-sm cursor-pointer hover:border-indigo-300" data-color="bg-green-100" data-text="text-green-800" data-subject="Biología">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
<i class="fas fa-dna text-green-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Biología</h4>
<p class="text-sm text-gray-500">Células, genética, ecología</p>
</div>
</div>
</div>
<!-- Subject Card 3 -->
<div class="subject-chip bg-white border border-gray-200 rounded-lg p-4 shadow-sm cursor-pointer hover:border-indigo-300" data-color="bg-purple-100" data-text="text-purple-800" data-subject="Literatura">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
<i class="fas fa-book-open text-purple-600"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">Literatura</h4>
<p class="text-sm text-gray-500">Obras clásicas, análisis</p>
</div>
</div>
</div>
<!-- Add Custom Subject -->
<div class="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg p-4 cursor-pointer hover:border-indigo-300 hover:bg-gray-100 flex items-center justify-center" id="add-subject-btn">
<div class="text-center">
<i class="fas fa-plus-circle text-gray-400 text-2xl mb-1"></i>
<p class="text-sm font-medium text-gray-500">Añadir materia</p>
</div>
</div>
</div>
</div>
<!-- Questions Configuration -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-700 mb-4">2. Configura las preguntas</h3>
<div class="bg-gray-50 rounded-lg p-4 mb-4" id="questions-config-container">
<!-- Configuration for each subject will appear here -->
<p class="text-gray-500 text-sm">Selecciona materias primero para configurar las preguntas.</p>
</div>
<div class="flex items-center">
<label class="block text-sm font-medium text-gray-700 mr-4">Total de preguntas:</label>
<div class="flex-1">
<input type="range" min="5" max="50" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="total-questions-slider">
</div>
<span class="ml-4 text-gray-700 font-medium w-16 text-center" id="total-questions-value">20</span>
</div>
</div>
<!-- Difficulty Level -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-700 mb-4">3. Nivel de dificultad</h3>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="difficulty-option border-2 border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:border-indigo-300" data-difficulty="easy">
<div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-smile text-green-600"></i>
</div>
<h4 class="font-medium text-gray-800">Fácil</h4>
<p class="text-sm text-gray-500">Conceptos básicos</p>
</div>
<div class="difficulty-option border-2 border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:border-indigo-300" data-difficulty="medium">
<div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-meh text-yellow-600"></i>
</div>
<h4 class="font-medium text-gray-800">Medio</h4>
<p class="text-sm text-gray-500">Reto moderado</p>
</div>
<div class="difficulty-option border-2 border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:border-indigo-300" data-difficulty="hard">
<div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-frown text-red-600"></i>
</div>
<h4 class="font-medium text-gray-800">Difícil</h4>
<p class="text-sm text-gray-500">Preguntas complejas</p>
</div>
<div class="difficulty-option border-2 border-gray-200 rounded-lg p-4 text-center cursor-pointer hover:border-indigo-300" data-difficulty="mixed">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-3">
<i class="fas fa-random text-indigo-600"></i>
</div>
<h4 class="font-medium text-gray-800">Mixto</h4>
<p class="text-sm text-gray-500">Variedad de niveles</p>
</div>
</div>
</div>
<!-- Advanced Options -->
<div class="mb-8">
<div class="flex items-center justify-between cursor-pointer" id="advanced-options-toggle">
<h3 class="text-lg font-medium text-gray-700">4. Opciones avanzadas (Opcional)</h3>
<i class="fas fa-chevron-down text-gray-400 transition-transform duration-200"></i>
</div>
<div class="mt-4 hidden" id="advanced-options-content">
<div class="bg-gray-50 rounded-lg p-4">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Instrucciones especiales para la IA</label>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" rows="3" placeholder="Ej: 'Enfócate en ecuaciones cuadráticas para matemáticas y en genética mendeliana para biología.'"></textarea>
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">Tipo de preguntas</label>
<div class="flex flex-wrap gap-3">
<div class="flex items-center">
<input id="multiple-choice" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" checked>
<label for="multiple-choice" class="ml-2 block text-sm text-gray-700">Opción múltiple</label>
</div>
<div class="flex items-center">
<input id="true-false" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="true-false" class="ml-2 block text-sm text-gray-700">Verdadero/Falso</label>
</div>
<div class="flex items-center">
<input id="short-answer" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="short-answer" class="ml-2 block text-sm text-gray-700">Respuesta corta</label>
</div>
<div class="flex items-center">
<input id="matching" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
<label for="matching" class="ml-2 block text-sm text-gray-700">Emparejamiento</label>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tiempo límite (minutos)</label>
<input type="number" min="5" max="180" value="30" class="w-20 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
</div>
</div>
<!-- Generate Button -->
<div class="flex justify-end">
<button id="generate-exam-btn" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium shadow-md hover:shadow-lg transition duration-300 flex items-center">
<i class="fas fa-magic mr-2"></i> Generar Examen
</button>
</div>
</div>
<!-- Upload Exam Section (Hidden by default) -->
<div id="upload-exam-section" class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8 hidden">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Convierte archivos en exámenes interactivos</h2>
<div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6">
<div class="flex justify-center mb-4">
<i class="fas fa-file-upload text-4xl text-indigo-400"></i>
</div>
<h3 class="text-lg font-medium text-gray-700 mb-2">Arrastra y suelta tus archivos aquí</h3>
<p class="text-sm text-gray-500 mb-4">o</p>
<label for="file-upload" class="cursor-pointer gradient-bg text-white px-4 py-2 rounded-md font-medium inline-block">
<i class="fas fa-folder-open mr-2"></i> Seleccionar archivos
</label>
<input id="file-upload" type="file" class="hidden" multiple>
<p class="text-xs text-gray-500 mt-4">Formatos soportados: PDF, DOCX, TXT (Máx. 10MB)</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">O pega tu texto directamente</h3>
<textarea class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" rows="5" placeholder="Pega aquí el contenido de tu examen..."></textarea>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">Configuración de procesamiento</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tipo de preguntas a generar</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Detectar automáticamente</option>
<option>Opción múltiple</option>
<option>Verdadero/Falso</option>
<option>Respuesta corta</option>
<option>Mezcla de tipos</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Dificultad general</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Detectar automáticamente</option>
<option>Fácil</option>
<option>Medio</option>
<option>Difícil</option>
</select>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium shadow-md hover:shadow-lg transition duration-300 flex items-center">
<i class="fas fa-robot mr-2"></i> Procesar con IA
</button>
</div>
</div>
<!-- History-Based Exam Section (Hidden by default) -->
<div id="history-exam-section" class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8 hidden">
<h2 class="text-xl font-semibold text-gray-800 mb-6">Examen basado en tu historial</h2>
<div class="bg-indigo-50 border-l-4 border-indigo-400 p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<i class="fas fa-info-circle text-indigo-400"></i>
</div>
<div class="ml-3">
<p class="text-sm text-indigo-700">
Nuestra IA analizará tu historial de exámenes anteriores para crear un examen personalizado que se enfoque en tus áreas de mejora y refuerce tus conocimientos.
</p>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
<h3 class="text-lg font-medium text-gray-800 mb-4">Tu rendimiento reciente</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Matemáticas</span>
<span class="text-sm font-medium text-gray-700">72%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 72%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Biología</span>
<span class="text-sm font-medium text-gray-700">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-gray-700">Literatura</span>
<span class="text-sm font-medium text-gray-700">64%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-red-500 h-2 rounded-full" style="width: 64%"></div>
</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
<h3 class="text-lg font-medium text-gray-800 mb-4">Áreas para mejorar</h3>
<div class="space-y-3">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-exclamation text-red-500"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Ecuaciones cuadráticas</p>
<p class="text-xs text-gray-500">Fallaste 5 de 7 preguntas</p>
</div>
</div>
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-red-100 flex items-center justify-center mr-3">
<i class="fas fa-exclamation text-red-500"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Genética mendeliana</p>
<p class="text-xs text-gray-500">Fallaste 3 de 5 preguntas</p>
</div>
</div>
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
<i class="fas fa-question text-yellow-500"></i>
</div>
<div>
<p class="text-sm font-medium text-gray-700">Literatura del siglo XIX</p>
<p class="text-xs text-gray-500">50% de acierto</p>
</div>
</div>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-4">Configuración del examen</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Número de preguntas</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>20 (recomendado)</option>
<option>10</option>
<option>30</option>
<option>50</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Enfoque principal</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Áreas de mejora (recomendado)</option>
<option>Reforzar conocimientos</option>
<option>Mezcla equilibrada</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Dificultad</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Adaptativa (recomendado)</option>
<option>Fácil</option>
<option>Medio</option>
<option>Difícil</option>
</select>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium shadow-md hover:shadow-lg transition duration-300 flex items-center">
<i class="fas fa-brain mr-2"></i> Generar Examen Inteligente
</button>
</div>
</div>
<!-- Recent Exams Section -->
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-gray-800">Tus exámenes recientes</h2>
<a href="#" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">Ver todo</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Exam Card 1 -->
<div class="exam-card bg-white border border-gray-200 rounded-lg p-5 hover:border-indigo-300">
<div class="flex justify-between items-start mb-3">
<div>
<span class="difficulty-badge easy">Fácil</span>
</div>
<span class="text-xs text-gray-500">Hace 2 días</span>
</div>
<h3 class="font-medium text-gray-800 mb-2">Matemáticas básicas</h3>
<p class="text-sm text-gray-600 mb-4">15 preguntas sobre álgebra y aritmética</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-700 mr-2">85%</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-green-500 h-1.5 rounded-full" style="width: 85%"></div>
</div>
</div>
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-500">Ver detalles</button>
</div>
</div>
<!-- Exam Card 2 -->
<div class="exam-card bg-white border border-gray-200 rounded-lg p-5 hover:border-indigo-300">
<div class="flex justify-between items-start mb-3">
<div>
<span class="difficulty-badge medium">Medio</span>
</div>
<span class="text-xs text-gray-500">Hace 1 semana</span>
</div>
<h3 class="font-medium text-gray-800 mb-2">Biología celular</h3>
<p class="text-sm text-gray-600 mb-4">20 preguntas sobre células y organelos</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-700 mr-2">72%</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-yellow-500 h-1.5 rounded-full" style="width: 72%"></div>
</div>
</div>
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-500">Ver detalles</button>
</div>
</div>
<!-- Exam Card 3 -->
<div class="exam-card bg-white border border-gray-200 rounded-lg p-5 hover:border-indigo-300">
<div class="flex justify-between items-start mb-3">
<div>
<span class="difficulty-badge hard">Difícil</span>
</div>
<span class="text-xs text-gray-500">Hace 2 semanas</span>
</div>
<h3 class="font-medium text-gray-800 mb-2">Literatura universal</h3>
<p class="text-sm text-gray-600 mb-4">25 preguntas sobre obras clásicas</p>
<div class="flex justify-between items-center">
<div class="flex items-center">
<span class="text-sm font-medium text-gray-700 mr-2">64%</span>
<div class="w-16 bg-gray-200 rounded-full h-1.5">
<div class="bg-red-500 h-1.5 rounded-full" style="width: 64%"></div>
</div>
</div>
<button class="text-xs font-medium text-indigo-600 hover:text-indigo-500">Ver detalles</button>
</div>
</div>
</div>
</div>
</main>
<!-- Processing Modal (Hidden by default) -->
<div id="processing-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl p-8 max-w-md w-full mx-4">
<div class="text-center">
<div class="ai-processing text-5xl text-indigo-500 mb-4">
<i class="fas fa-robot"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Generando tu examen</h3>
<p class="text-gray-600 mb-6">Nuestra IA está procesando tu solicitud y creando un examen personalizado según tus preferencias.</p>
<div class="w-full bg-gray-200 rounded-full h-2 mb-6">
<div class="bg-indigo-500 h-2 rounded-full animate-pulse" style="width: 45%"></div>
</div>
<p class="text-xs text-gray-500">Esto puede tomar unos segundos...</p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">ExamGen AI</h3>
<p class="text-gray-400 text-sm">La plataforma inteligente para crear exámenes personalizados con ayuda de IA.</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Enlaces</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Inicio</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Funciones</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Precios</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Soporte</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Centro de ayuda</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Contacto</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacidad</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm">Términos</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Conéctate</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
</div>
<p class="text-gray-400 text-sm mt-4">Suscríbete a nuestro boletín</p>
<div class="mt-2 flex">
<input type="email" placeholder="Tu email" class="px-3 py-2 bg-gray-700 text-white rounded-l-md focus:outline-none focus:ring-1 focus:ring-indigo-500 text-sm w-full">
<button class="bg-indigo-600 text-white px-3 py-2 rounded-r-md text-sm hover:bg-indigo-700"><i class="fas fa-paper-plane"></i></button>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
<p>© 2023 ExamGen AI. Todos los derechos reservados.</p>
</div>
</div>
</footer>
<script>
// Initialize Supabase
const supabaseUrl = 'https://your-project.supabase.co';
const supabaseKey = 'your-supabase-key';
const supabase = supabase.createClient(supabaseUrl, supabaseKey);
// DOM Elements
const newExamTab = document.getElementById('new-exam-tab');
const uploadExamTab = document.getElementById('upload-exam-tab');
const historyExamTab = document.getElementById('history-exam-tab');
const newExamSection = document.getElementById('new-exam-section');
const uploadExamSection = document.getElementById('upload-exam-section');
const historyExamSection = document.getElementById('history-exam-section');
const totalQuestionsSlider = document.getElementById('total-questions-slider');
const totalQuestionsValue = document.getElementById('total-questions-value');
const advancedOptionsToggle = document.getElementById('advanced-options-toggle');
const advancedOptionsContent = document.getElementById('advanced-options-content');
const generateExamBtn = document.getElementById('generate-exam-btn');
const processingModal = document.getElementById('processing-modal');
const addSubjectBtn = document.getElementById('add-subject-btn');
const selectedSubjectsContainer = document.getElementById('selected-subjects-container');
const questionsConfigContainer = document.getElementById('questions-config-container');
// Tab Switching
newExamTab.addEventListener('click', () => {
resetTabs();
newExamTab.classList.add('tab-active');
newExamSection.classList.remove('hidden');
});
uploadExamTab.addEventListener('click', () => {
resetTabs();
uploadExamTab.classList.add('tab-active');
uploadExamSection.classList.remove('hidden');
});
historyExamTab.addEventListener('click', () => {
resetTabs();
historyExamTab.classList.add('tab-active');
historyExamSection.classList.remove('hidden');
});
function resetTabs() {
newExamTab.classList.remove('tab-active');
uploadExamTab.classList.remove('tab-active');
historyExamTab.classList.remove('tab-active');
newExamSection.classList.add('hidden');
uploadExamSection.classList.add('hidden');
historyExamSection.classList.add('hidden');
}
// Total Questions Slider
totalQuestionsSlider.addEventListener('input', () => {
totalQuestionsValue.textContent = totalQuestionsSlider.value;
});
// Advanced Options Toggle
advancedOptionsToggle.addEventListener('click', () => {
const icon = advancedOptionsToggle.querySelector('i');
advancedOptionsContent.classList.toggle('hidden');
if (advancedOptionsContent.classList.contains('hidden')) {
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
} else {
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
}
});
// Difficulty Options
const difficultyOptions = document.querySelectorAll('.difficulty-option');
difficultyOptions.forEach(option => {
option.addEventListener('click', () => {
difficultyOptions.forEach(opt => opt.classList.remove('border-indigo-500', 'bg-indigo-50'));
option.classList.add('border-indigo-500', 'bg-indigo-50');
});
});
// Subject Selection
const subjectChips = document.querySelectorAll('.subject-chip');
const selectedSubjects = new Set();
subjectChips.forEach(chip => {
chip.addEventListener('click', () => {
const subject = chip.dataset.subject;
const color = chip.dataset.color;
const textColor = chip.dataset.text;
if (selectedSubjects.has(subject)) {
selectedSubjects.delete(subject);
chip.classList.remove('border-indigo-500', 'bg-indigo-50');
updateSelectedSubjects();
} else {
selectedSubjects.add({subject, color, textColor});
chip.classList.add('border-indigo-500', 'bg-indigo-50');
updateSelectedSubjects();
}
});
});
function updateSelectedSubjects() {
// Clear containers
selectedSubjectsContainer.innerHTML = '';
questionsConfigContainer.innerHTML = '';
if (selectedSubjects.size === 0) {
questionsConfigContainer.innerHTML = '<p class="text-gray-500 text-sm">Selecciona materias primero para configurar las preguntas.</p>';
return;
}
// Add selected subjects chips
selectedSubjects.forEach(subjectObj => {
const subject = subjectObj.subject;
const color = subjectObj.color;
const textColor = subjectObj.textColor;
const chip = document.createElement('div');
chip.className = `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${color} ${textColor} mr-2 mb-2`;
chip.innerHTML = `${subject} <button class="ml-2 text-xs" onclick="removeSubject('${subject}')"><i class="fas fa-times"></i></button>`;
selectedSubjectsContainer.appendChild(chip);
});
// Add questions configuration for each subject
const configHTML = Array.from(selectedSubjects).map(subjectObj => {
const subject = subjectObj.subject;
return `
<div class="mb-4">
<div class="flex items-center justify-between mb-2">
<label class="block text-sm font-medium text-gray-700">${subject}</label>
<span class="text-xs text-gray-500">Preguntas: <span id="${subject.toLowerCase()}-questions-value">5</span></span>
</div>
<div class="flex items-center">
<input type="range" min="1" max="20" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer subject-slider" data-subject="${subject}">
</div>
</div>
`;
}).join('');
questionsConfigContainer.innerHTML = configHTML;
// Add event listeners to subject sliders
document.querySelectorAll('.subject-slider').forEach(slider => {
slider.addEventListener('input', () => {
const subject = slider.dataset.subject;
const value = slider.value;
document.getElementById(`${subject.toLowerCase()}-questions-value`).textContent = value;
});
});
}
// Add custom subject
addSubjectBtn.addEventListener('click', () => {
const subjectName = prompt("Ingresa el nombre de la nueva materia:");
if (subjectName) {
const colors = ['bg-blue-100', 'bg-green-100', 'bg-purple-100', 'bg-yellow-100', 'bg-pink-100', 'bg-indigo-100'];
const textColors = ['text-blue-800', 'text-green-800', 'text-purple-800', 'text-yellow-800', 'text-pink-800', 'text-indigo-800'];
const icons = ['fa-square-root-alt', 'fa-dna', 'fa-book-open', 'fa-flask', 'fa-globe-americas', 'fa-calculator'];
const randomIndex = Math.floor(Math.random() * colors.length);
const newSubject = {
subject: subjectName,
color: colors[randomIndex],
textColor: textColors[randomIndex]
};
selectedSubjects.add(newSubject);
// Add visual feedback
const tempChip = document.createElement('div');
tempChip.className = `subject-chip bg-white border-2 border-indigo-500 rounded-lg p-4 shadow-sm cursor-pointer ${newSubject.color}`;
tempChip.innerHTML = `
<div class="flex items-center">
<div class="w-10 h-10 rounded-full ${newSubject.color} flex items-center justify-center mr-3">
<i class="fas ${icons[randomIndex]} ${newSubject.textColor}"></i>
</div>
<div>
<h4 class="font-medium ${newSubject.textColor}">${subjectName}</h4>
<p class="text-sm ${newSubject.textColor} opacity-70">Nueva materia</p>
</div>
</div>
`;
addSubjectBtn.parentNode.insertBefore(tempChip, addSubjectBtn);
setTimeout(() => {
tempChip.remove();
updateSelectedSubjects();
}, 1000);
}
});
// Remove subject function (used in chips)
window.removeSubject = function(subjectName) {
// Find and remove from selectedSubjects
let subjectToRemove = null;
for (const subject of selectedSubjects) {
if (subject.subject === subjectName) {
subjectToRemove = subject;
break;
}
}
if (subjectToRemove) {
selectedSubjects.delete(subjectToRemove);
// Remove visual selection from subject chips
subjectChips.forEach(chip => {
if (chip.dataset.subject === subjectName) {
chip.classList.remove('border-indigo-500', 'bg-indigo-50');
}
});
updateSelectedSubjects();
}
};
// Generate Exam Button
generateExamBtn.addEventListener('click', () => {
// Validate at least one subject is selected
if (selectedSubjects.size === 0) {
alert('Por favor selecciona al menos una materia para generar el examen.');
return;
}
// Show processing modal
processingModal.classList.remove('hidden');
// Simulate processing (in a real app, this would be an API call)
setTimeout(() => {
processingModal.classList.add('hidden');
// In a real app, you would redirect to the exam page or show it in a modal
alert('Examen generado con éxito! Redirigiendo...');
// window.location.href = '/exam.html';
}, 3000);
});
// Initialize with first tab active
newExamTab.click();
// Google Sign-In
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: window.location.href
}
});
if (error) {
console.error('Error signing in with Google:', error.message);
}
}
// Check auth state
supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN') {
console.log('User signed in:', session.user);
// Update UI for logged in user
} else if (event === 'SIGNED_OUT') {
console.log('User signed out');
// Update UI for logged out user
}
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Doddieko67/god-dipsik" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>