Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Planificador de Carrera</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="app.js" defer></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#1B4332', | |
| 600: '#0f2b1f' | |
| }, | |
| accent: { | |
| 500: '#006341', | |
| 600: '#004d33' | |
| }, | |
| gray: { | |
| 500: '#6B7280' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto p-4 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <h1 class="text-3xl font-bold text-primary-500">Planificador de Carrera</h1> | |
| <p class="text-gray-500">Organiza tu plan de estudios de manera inteligente</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div id="app"> | |
| <!-- Paso 1: Selección de Programa y Plan --> | |
| <section id="step1" class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold text-primary-500 mb-4">Selecciona tu programa</h2> | |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label for="programa" class="block text-sm font-medium text-gray-700 mb-1">Programa</label> | |
| <select id="programa" class="w-full p-2 border border-gray-300 rounded-md focus:ring-accent-500 focus:border-accent-500"> | |
| <option value="">Selecciona un programa</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="plan" class="block text-sm font-medium text-gray-700 mb-1">Plan</label> | |
| <select id="plan" class="w-full p-2 border border-gray-300 rounded-md focus:ring-accent-500 focus:border-accent-500" disabled> | |
| <option value="">Selecciona un plan</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button id="continuarBtn" class="bg-accent-500 hover:bg-accent-600 text-white font-medium py-2 px-4 rounded-md transition-colors disabled:opacity-50" disabled>Continuar</button> | |
| </section> | |
| <!-- Paso 2: Selección de Materias Cursadas --> | |
| <section id="step2" class="hidden bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold text-primary-500 mb-4">Selecciona las materias ya cursadas</h2> | |
| <div id="materiasContainer" class="space-y-2 mb-4"></div> | |
| <div class="flex justify-between"> | |
| <button id="volverInicioBtn" class="bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition-colors"> | |
| ← Volver al inicio | |
| </button> | |
| <button id="generarPlanBtn" class="bg-accent-500 hover:bg-accent-600 text-white font-medium py-2 px-4 rounded-md transition-colors"> | |
| Generar plan → | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Paso 3: Planificador --> | |
| <section id="step3" class="hidden"> | |
| <button id="volverMateriasBtn" class="mb-4 bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition-colors"> | |
| ← Volver a materias | |
| </button> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Panel izquierdo --> | |
| <div class="md:w-1/3 lg:w-1/4 bg-white rounded-lg shadow-md p-4 sticky top-4 h-fit"> | |
| <h2 class="text-lg font-semibold text-primary-500 mb-3">Materias cursadas</h2> | |
| <div id="cursadasList" class="mb-6 space-y-2"></div> | |
| <h2 class="text-lg font-semibold text-primary-500 mb-3">Ajustes</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="maxMaterias" class="block text-sm font-medium text-gray-700">Máx. materias por semestre</label> | |
| <input type="range" id="maxMaterias" min="2" max="8" value="5" class="w-full mt-1"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>2</span> | |
| <span id="maxMateriasValue">5</span> | |
| <span>8</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="maxCreditos" class="block text-sm font-medium text-gray-700">Máx. créditos por semestre</label> | |
| <input type="range" id="maxCreditos" min="0" max="60" value="18" class="w-full mt-1"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>0</span> | |
| <span id="maxCreditosValue">18</span> | |
| <span>60</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="autoPlanBtn" class="mt-4 w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-md transition-colors">Auto-planear</button> | |
| <h2 class="text-lg font-semibold text-primary-500 mt-6 mb-3">Materias pendientes</h2> | |
| <div class="materias-no-asignadas space-y-2 max-h-96 overflow-y-auto"></div> | |
| </div> | |
| <!-- Panel derecho --> | |
| <div class="md:w-2/3 lg:w-3/4"> | |
| <div id="semestresContainer" class="space-y-4"> | |
| <!-- Semestres se generarán aquí --> | |
| </div> | |
| <button id="addSemestreBtn" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition-colors">Agregar semestre</button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script> | |
| feather.replace(); | |
| // Agregar event listeners para los nuevos botones | |
| document.getElementById('volverInicioBtn').addEventListener('click', () => { | |
| document.getElementById('step2').classList.add('hidden'); | |
| document.getElementById('step1').classList.remove('hidden'); | |
| }); | |
| document.getElementById('volverMateriasBtn').addEventListener('click', () => { | |
| document.getElementById('step3').classList.add('hidden'); | |
| document.getElementById('step2').classList.remove('hidden'); | |
| }); | |
| // Redibujar conexiones al cambiar tamaño de ventana | |
| window.addEventListener('resize', () => { | |
| if (!document.getElementById('step3').classList.contains('hidden')) { | |
| dibujarConexiones(); | |
| } | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |