update with teacher and students sides

Dockerfile

@@ -14,7 +14,10 @@ COPY app/ ./app/
 ENV FLASK_APP=app.app
 ENV FLASK_ENV=production
 ENV PORT=7860
+ENV DATA_DIR=/data
 
 EXPOSE 7860
 
+VOLUME ["/data"]
+
 CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--timeout", "120", "app.app:app"]

app/app.py

@@ -1,92 +1,154 @@
-from flask import Flask, render_template, jsonify, request
+from flask import Flask, render_template, jsonify, request, session
 from flask_cors import CORS
 import json
 import os
+import uuid
+from datetime import datetime
 
 app = Flask(__name__)
+app.secret_key = os.environ.get('SECRET_KEY', 'educateenIA_secret_key_2024')
 CORS(app)
 
-# Data files
-DATA_DIR = os.path.join(os.path.dirname(__file__), 'data')
-COURSES_FILE = os.path.join(DATA_DIR, 'courses.json')
-CLASSROOMS_FILE = os.path.join(DATA_DIR, 'classrooms.json')
-
-os.makedirs(DATA_DIR, exist_ok=True)
-
-# Initialize data files if they don't exist
-if not os.path.exists(COURSES_FILE):
-    with open(COURSES_FILE, 'w') as f:
-        json.dump([
-            {"id": 1, "title": "Introducción a la IA", "description": "Aprende los conceptos fundamentales de la Inteligencia Artificial", "category": "ai", "level": "beginner", "students": 45, "modules": 8, "icon": "🤖", "color": "linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)"},
-            {"id": 2, "title": "Machine Learning Práctico", "description": "Implementa modelos de ML desde cero con Python", "category": "ml", "level": "intermediate", "students": 32, "modules": 12, "icon": "📊", "color": "linear-gradient(135deg, #10B981 0%, #34D399 100%)"},
-            {"id": 3, "title": "Arduino para Principiantes", "description": "Crea tus primeros proyectos electrónicos con Arduino", "category": "arduino", "level": "beginner", "students": 56, "modules": 10, "icon": "⚡", "color": "linear-gradient(135deg, #00979D 0%, #4ECDC4 100%)"},
-            {"id": 4, "title": "IoT con ESP32", "description": "Conecta dispositivos a internet y crea soluciones IoT", "category": "iot", "level": "intermediate", "students": 28, "modules": 8, "icon": "📡", "color": "linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)"},
-            {"id": 5, "title": "Raspberry Pi Mastery", "description": "Domina Raspberry Pi para proyectos de automatización", "category": "raspberry", "level": "advanced", "students": 18, "modules": 15, "icon": "🖥️", "color": "linear-gradient(135deg, #C13584 0%, #E1306C 100%)"}
-        ], f, indent=2)
-
-if not os.path.exists(CLASSROOMS_FILE):
-    with open(CLASSROOMS_FILE, 'w') as f:
-        json.dump([
-            {"id": 1, "name": "IA Básico - Grupo A", "course_id": 1, "course_name": "Introducción a la IA", "students": 25, "capacity": 30, "schedule": "Lun-Mié 10:00", "tools": ["ai_test", "ml_classification"]},
-            {"id": 2, "name": "ML Práctico - Grupo A", "course_id": 2, "course_name": "Machine Learning Práctico", "students": 20, "capacity": 25, "schedule": "Mar-Jue 14:00", "tools": ["ml_classification", "ml_regression"]},
-            {"id": 3, "name": "Arduino - Taller", "course_id": 3, "course_name": "Arduino para Principiantes", "students": 18, "capacity": 20, "schedule": "Sáb 9:00", "tools": ["arduino_sim", "iot_sim"]}
-        ], f, indent=2)
-
-
-def load_courses():
-    with open(COURSES_FILE, 'r') as f:
-        return json.load(f)
-
+# HF Spaces proporciona /data para almacenamiento persistente
+DATA_DIR = os.environ.get('DATA_DIR', '/data')
 
-def save_courses(courses):
-    with open(COURSES_FILE, 'w') as f:
-        json.dump(courses, f, indent=2)
+# Si no existe /data, usar directorio local (para desarrollo)
+if not os.path.exists(DATA_DIR):
+    DATA_DIR = os.path.join(os.path.dirname(__file__), 'data')
+    os.makedirs(DATA_DIR, exist_ok=True)
 
-
-def load_classrooms():
-    with open(CLASSROOMS_FILE, 'r') as f:
+COURSES_FILE = os.path.join(DATA_DIR, 'courses.json')
+CLASSROOMS_FILE = os.path.join(DATA_DIR, 'classrooms.json')
+USERS_FILE = os.path.join(DATA_DIR, 'users.json')
+PROGRESS_FILE = os.path.join(DATA_DIR, 'progress.json')
+
+def init_data_files():
+    if not os.path.exists(COURSES_FILE):
+        with open(COURSES_FILE, 'w') as f:
+            json.dump([
+                {"id": 1, "title": "Introducción a la IA", "description": "Aprende los conceptos fundamentales de la Inteligencia Artificial", "category": "ai", "level": "beginner", "students": 45, "modules": 8, "icon": "🤖", "color": "linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%)"},
+                {"id": 2, "title": "Machine Learning Práctico", "description": "Implementa modelos de ML desde cero con Python", "category": "ml", "level": "intermediate", "students": 32, "modules": 12, "icon": "📊", "color": "linear-gradient(135deg, #10B981 0%, #34D399 100%)"},
+                {"id": 3, "title": "Arduino para Principiantes", "description": "Crea tus primeros proyectos electrónicos con Arduino", "category": "arduino", "level": "beginner", "students": 56, "modules": 10, "icon": "⚡", "color": "linear-gradient(135deg, #00979D 0%, #4ECDC4 100%)"},
+                {"id": 4, "title": "IoT con ESP32", "description": "Conecta dispositivos a internet y crea soluciones IoT", "category": "iot", "level": "intermediate", "students": 28, "modules": 8, "icon": "📡", "color": "linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)"},
+                {"id": 5, "title": "Raspberry Pi Mastery", "description": "Domina Raspberry Pi para proyectos de automatización", "category": "raspberry", "level": "advanced", "students": 18, "modules": 15, "icon": "🖥️", "color": "linear-gradient(135deg, #C13584 0%, #E1306C 100%)"}
+            ], f, indent=2)
+
+    if not os.path.exists(CLASSROOMS_FILE):
+        with open(CLASSROOMS_FILE, 'w') as f:
+            json.dump([
+                {"id": 1, "name": "IA Básico - Grupo A", "course_id": 1, "course_name": "Introducción a la IA", "students": 25, "capacity": 30, "schedule": "Lun-Mié 10:00", "tools": ["ai_test", "ml_classification"], "enrolled_students": []},
+                {"id": 2, "name": "ML Práctico - Grupo A", "course_id": 2, "course_name": "Machine Learning Práctico", "students": 20, "capacity": 25, "schedule": "Mar-Jue 14:00", "tools": ["ml_classification", "ml_regression"], "enrolled_students": []},
+                {"id": 3, "name": "Arduino - Taller", "course_id": 3, "course_name": "Arduino para Principiantes", "students": 18, "capacity": 20, "schedule": "Sáb 9:00", "tools": ["arduino_sim", "iot_sim"], "enrolled_students": []}
+            ], f, indent=2)
+
+    if not os.path.exists(USERS_FILE):
+        with open(USERS_FILE, 'w') as f:
+            json.dump({"students": [], "teachers": []}, f, indent=2)
+
+    if not os.path.exists(PROGRESS_FILE):
+        with open(PROGRESS_FILE, 'w') as f:
+            json.dump({}, f, indent=2)
+
+init_data_files()
+
+def load_json(filepath):
+    with open(filepath, 'r') as f:
         return json.load(f)
 
+def save_json(filepath, data):
+    with open(filepath, 'w') as f:
+        json.dump(data, f, indent=2)
 
-def save_classrooms(classrooms):
-    with open(CLASSROOMS_FILE, 'w') as f:
-        json.dump(classrooms, f, indent=2)
-
-
-# Routes
 @app.route('/')
 def index():
     return render_template('index.html')
 
-
-# API: Stats
+# ============ AUTH ============
+@app.route('/api/login', methods=['POST'])
+def login():
+    data = request.json
+    role = data.get('role')
+    password = data.get('password')
+    name = data.get('name')
+    course_id = data.get('course_id')
+
+    users = load_json(USERS_FILE)
+
+    if role == 'teacher':
+        from app.config import AuthConfig
+        if password == AuthConfig.MASTER_PASSWORD:
+            session['user'] = {'role': 'teacher', 'name': 'Maestro'}
+            return jsonify({'success': True, 'role': 'teacher', 'name': 'Maestro'})
+        return jsonify({'success': False, 'error': 'Contraseña incorrecta'}), 401
+
+    elif role == 'student':
+        if not name or not course_id:
+            return jsonify({'success': False, 'error': 'Nombre y curso requeridos'}), 400
+        
+        student_id = str(uuid.uuid4())[:8]
+        student = {'id': student_id, 'name': name, 'course_id': int(course_id), 'created_at': datetime.now().isoformat()}
+        
+        users['students'].append(student)
+        save_json(USERS_FILE, users)
+
+        classrooms = load_json(CLASSROOMS_FILE)
+        for cr in classrooms:
+            if cr['course_id'] == int(course_id):
+                if 'enrolled_students' not in cr:
+                    cr['enrolled_students'] = []
+                cr['enrolled_students'].append({'id': student_id, 'name': name})
+        save_json(CLASSROOMS_FILE, classrooms)
+
+        session['user'] = {'role': 'student', 'id': student_id, 'name': name, 'course_id': int(course_id)}
+        return jsonify({'success': True, 'role': 'student', 'name': name, 'student_id': student_id})
+
+    return jsonify({'success': False, 'error': 'Rol inválido'}), 400
+
+@app.route('/api/logout', methods=['POST'])
+def logout():
+    session.clear()
+    return jsonify({'success': True})
+
+@app.route('/api/session')
+def get_session():
+    if 'user' in session:
+        return jsonify({'authenticated': True, 'user': session['user']})
+    return jsonify({'authenticated': False})
+
+# ============ STATS ============
 @app.route('/api/stats')
 def get_stats():
-    courses = load_courses()
-    classrooms = load_classrooms()
-    total_students = sum(c.get('students', 0) for c in courses)
+    courses = load_json(COURSES_FILE)
+    classrooms = load_json(CLASSROOMS_FILE)
+    users = load_json(USERS_FILE)
+    progress = load_json(PROGRESS_FILE)
     
+    total_students = len(users.get('students', []))
+    completion_rate = 0
+    if progress:
+        completed = sum(1 for p in progress.values() if p.get('completed', False))
+        if completed > 0:
+            completion_rate = int((completed / len(progress)) * 100)
+
     return jsonify({
         "courses": len(courses),
         "classrooms": len(classrooms),
         "students": total_students,
-        "completionRate": 89
+        "completionRate": completion_rate
     })
 
-
-# API: Courses
+# ============ COURSES ============
 @app.route('/api/courses')
 def get_courses():
     limit = request.args.get('limit', type=int)
-    courses = load_courses()
+    courses = load_json(COURSES_FILE)
     if limit:
         courses = courses[:limit]
     return jsonify(courses)
 
-
 @app.route('/api/courses', methods=['POST'])
 def create_course():
-    courses = load_courses()
+    courses = load_json(COURSES_FILE)
     data = request.json
     
     icons = {"ai": "🤖", "ml": "📊", "arduino": "⚡", "iot": "📡", "raspberry": "🖥️", "python": "🐍", "data": "📈"}
@@ -105,20 +167,18 @@ def create_course():
     }
     
     courses.append(new_course)
-    save_courses(courses)
+    save_json(COURSES_FILE, courses)
     return jsonify(new_course), 201
 
-
-# API: Classrooms
+# ============ CLASSROOMS ============
 @app.route('/api/classrooms')
 def get_classrooms():
-    return jsonify(load_classrooms())
-
+    return jsonify(load_json(CLASSROOMS_FILE))
 
 @app.route('/api/classrooms', methods=['POST'])
 def create_classroom():
-    classrooms = load_classrooms()
-    courses = load_courses()
+    classrooms = load_json(CLASSROOMS_FILE)
+    courses = load_json(COURSES_FILE)
     data = request.json
     
     course = next((c for c in courses if c['id'] == int(data.get('course_id', 0))), None)
@@ -132,22 +192,113 @@ def create_classroom():
         "capacity": data.get('capacity', 30),
         "students": 0,
         "schedule": "Por definir",
-        "tools": data.get('tools', [])
+        "tools": data.get('tools', []),
+        "enrolled_students": []
     }
     
     classrooms.append(new_classroom)
-    save_classrooms(classrooms)
+    save_json(CLASSROOMS_FILE, classrooms)
     return jsonify(new_classroom), 201
 
+# ============ STUDENT PROGRESS ============
+@app.route('/api/progress', methods=['GET'])
+def get_progress():
+    student_id = request.args.get('student_id')
+    progress = load_json(PROGRESS_FILE)
+    
+    if student_id:
+        return jsonify(progress.get(student_id, {}))
+    return jsonify(progress)
+
+@app.route('/api/progress', methods=['POST'])
+def update_progress():
+    data = request.json
+    student_id = data.get('student_id')
+    tool_id = data.get('tool_id')
+    score = data.get('score', 0)
+    completed = data.get('completed', False)
+    attempts = data.get('attempts', 1)
+
+    progress = load_json(PROGRESS_FILE)
+    
+    if student_id not in progress:
+        progress[student_id] = {'name': data.get('name', ''), 'course_id': data.get('course_id'), 'activities': {}}
+    
+    if tool_id not in progress[student_id]['activities']:
+        progress[student_id]['activities'][tool_id] = {'attempts': 0, 'best_score': 0, 'completed': False, 'extra_attempts': 0}
+    
+    activity = progress[student_id]['activities'][tool_id]
+    activity['attempts'] = attempts
+    if score > activity['best_score']:
+        activity['best_score'] = score
+    if completed:
+        activity['completed'] = True
+    
+    save_json(PROGRESS_FILE, progress)
+    return jsonify({'success': True})
+
+@app.route('/api/progress/extra-attempts', methods=['POST'])
+def add_extra_attempts():
+    data = request.json
+    student_id = data.get('student_id')
+    tool_id = data.get('tool_id')
+    extra = data.get('extra', 1)
+
+    progress = load_json(PROGRESS_FILE)
+    
+    if student_id in progress and tool_id in progress[student_id]['activities']:
+        progress[student_id]['activities'][tool_id]['extra_attempts'] = progress[student_id]['activities'][tool_id].get('extra_attempts', 0) + extra
+        save_json(PROGRESS_FILE, progress)
+        return jsonify({'success': True, 'extra_attempts': progress[student_id]['activities'][tool_id]['extra_attempts']})
+    
+    return jsonify({'success': False, 'error': 'Estudiante o actividad no encontrada'}), 404
 
-# API: Tools - configurable desde config.py
+@app.route('/api/students/progress')
+def get_all_students_progress():
+    progress = load_json(PROGRESS_FILE)
+    users = load_json(USERS_FILE)
+    courses = load_json(COURSES_FILE)
+    
+    result = []
+    for student_id, data in progress.items():
+        student = next((s for s in users['students'] if s['id'] == student_id), None)
+        course = next((c for c in courses if c['id'] == data.get('course_id')), None)
+        
+        activities = []
+        total = 0
+        completed = 0
+        for tool_id, act in data.get('activities', {}).items():
+            total += 1
+            if act.get('completed'):
+                completed += 1
+            activities.append({
+                'tool_id': tool_id,
+                'attempts': act.get('attempts', 0),
+                'extra_attempts': act.get('extra_attempts', 0),
+                'best_score': act.get('best_score', 0),
+                'completed': act.get('completed', False)
+            })
+        
+        result.append({
+            'id': student_id,
+            'name': data.get('name', student_id),
+            'course': course['title'] if course else 'Sin curso',
+            'course_id': data.get('course_id'),
+            'activities': activities,
+            'total_activities': total,
+            'completed_activities': completed,
+            'progress_percent': int((completed / total) * 100) if total > 0 else 0
+        })
+    
+    return jsonify(result)
+
+# ============ TOOLS ============
 @app.route('/api/tools')
 def get_tools():
-    from config import ToolConfig
+    from app.config import ToolConfig
     return jsonify(ToolConfig.get_tools_for_classroom())
 
-
-# API: Quiz
+# ============ QUIZ ============
 @app.route('/api/quiz/questions')
 def get_quiz_questions():
     return jsonify([
@@ -159,8 +310,7 @@ def get_quiz_questions():
         {"question": "¿Cuál es la función de un sensor en un proyecto IoT?", "options": ["Almacenar datos", "Capturar información del entorno físico", "Procesar imágenes", "Conectar a internet"], "correct": 1}
     ])
 
-
-# API: Raspberry Guide
+# ============ RASPBERRY GUIDE ============
 @app.route('/api/raspberry/guide')
 def get_raspberry_guide():
     return jsonify([
@@ -171,6 +321,6 @@ def get_raspberry_guide():
         {"title": "Acceso Remoto", "description": "Configura SSH y VNC para acceder remotamente.", "code": "ssh pi@192.168.1.100\n# Contraseña: raspberry"}
     ])
 
-
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=True)
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=True)

app/config.py

@@ -6,8 +6,6 @@ Agrega nuevas herramientas aquí sin modificar el código existente.
 class ToolConfig:
     """Configuración de herramientas disponibles en la plataforma."""
     
-    # Registro centralizado de herramientas
-    # Cada herramienta tiene: id, nombre, descripción, icono, tags, y página relacionada
     TOOLS = {
         "ai_test": {
             "id": "ai_test",
@@ -97,17 +95,14 @@ class ToolConfig:
 
     @classmethod
     def get_all_tools(cls):
-        """Retorna todas las herramientas habilitadas."""
         return {k: v for k, v in cls.TOOLS.items() if v.get("enabled", True)}
 
     @classmethod
     def get_tool(cls, tool_id):
-        """Retorna una herramienta específica por su ID."""
         return cls.TOOLS.get(tool_id)
 
     @classmethod
     def get_tools_for_classroom(cls):
-        """Retorna herramientas formatadas para selector en creación de aulas."""
         tools = cls.get_all_tools()
         return [
             {
@@ -123,10 +118,6 @@ class ToolConfig:
 
     @classmethod
     def register_tool(cls, tool_id, name, description, icon, color, tags, page, **kwargs):
-        """
-        Método para registrar nuevas herramientas dinámicamente.
-        Uso: ToolConfig.register_tool('nuevo_id', 'Nombre', 'Descripción', 'fa-icon', 'color', ['tags'], 'pagina')
-        """
         cls.TOOLS[tool_id] = {
             "id": tool_id,
             "name": name,
@@ -141,8 +132,6 @@ class ToolConfig:
 
 
 class CategoryConfig:
-    """Categorías de cursos."""
-    
     CATEGORIES = {
         "ai": {"name": "Inteligencia Artificial", "icon": "fa-robot", "color": "#4F46E5"},
         "ml": {"name": "Machine Learning", "icon": "fa-brain", "color": "#10B981"},
@@ -160,3 +149,9 @@ class CategoryConfig:
     @classmethod
     def get(cls, key):
         return cls.CATEGORIES.get(key)
+
+
+# Configuración de autenticación
+class AuthConfig:
+    MASTER_PASSWORD = "educateenIA2024"
+    SESSION_TIMEOUT = 3600

app/static/js/app.js

@@ -1,16 +1,57 @@
 /**
  * EducateEnIA - Router Principal
- * Maneja la navegación entre páginas sin recargar
  */
 
 const App = {
     currentPage: 'dashboard',
-    pages: ['dashboard', 'courses', 'classrooms', 'tools', 'ai-test', 'simulators', 'raspberry'],
+    user: null,
+    pages: ['dashboard', 'courses', 'classrooms', 'tools', 'ai-test', 'simulators', 'raspberry', 'progress'],
 
     init() {
+        this.checkSession();
+    },
+
+    async checkSession() {
+        try {
+            const response = await fetch('/api/session');
+            const data = await response.json();
+            if (data.authenticated) {
+                this.user = data.user;
+                this.showMainApp();
+            } else {
+                this.showLogin();
+            }
+        } catch (error) {
+            console.error('Error checking session:', error);
+            this.showLogin();
+        }
+    },
+
+    showLogin() {
+        document.getElementById('loginScreen').style.display = 'flex';
+        document.getElementById('mainApp').style.display = 'none';
+    },
+
+    showMainApp() {
+        document.getElementById('loginScreen').style.display = 'none';
+        document.getElementById('mainApp').style.display = 'block';
+        
+        if (this.user.role === 'teacher') {
+            document.getElementById('teacherNav').style.display = 'block';
+            document.getElementById('studentNav').style.display = 'none';
+            document.getElementById('newCourseBtn').style.display = 'inline-flex';
+            document.getElementById('newClassroomBtn').style.display = 'inline-flex';
+        } else {
+            document.getElementById('teacherNav').style.display = 'none';
+            document.getElementById('studentNav').style.display = 'block';
+            document.getElementById('newCourseBtn').style.display = 'none';
+            document.getElementById('newClassroomBtn').style.display = 'none';
+        }
+
         this.setupNavigation();
-        this.setupToolCards();
-        this.loadPage('dashboard');
+        Dashboard.init();
+        Courses.init();
+        Tools.init();
     },
 
     setupNavigation() {
@@ -23,15 +64,6 @@ const App = {
         });
     },
 
-    setupToolCards() {
-        document.querySelectorAll('.tool-card').forEach(card => {
-            card.addEventListener('click', () => {
-                const tool = card.dataset.tool;
-                this.openTool(tool);
-            });
-        });
-    },
-
     navigateTo(page) {
         if (!this.pages.includes(page)) return;
 
@@ -47,12 +79,25 @@ const App = {
         this.currentPage = page;
         this.updatePageTitle(page);
 
-        if (page === 'simulators') {
-            setTimeout(() => Simulators.init(), 100);
-        }
-        if (page === 'raspberry') {
-            setTimeout(() => Raspberry.init(), 100);
-        }
+        if (page === 'classrooms') Classrooms.init();
+        if (page === 'ai-test') Quiz.init();
+        if (page === 'simulators') Simulators.init();
+        if (page === 'raspberry') Raspberry.init();
+        if (page === 'progress' && this.user.role === 'teacher') TeacherProgress.init();
+    },
+
+    updatePageTitle(page) {
+        const titles = {
+            dashboard: 'Dashboard',
+            courses: 'Gestión de Cursos',
+            classrooms: 'Aulas Virtuales',
+            tools: 'Herramientas de Aprendizaje',
+            'ai-test': 'Test de Conocimientos IA',
+            simulators: 'Simuladores Prácticos',
+            raspberry: 'Aprende Raspberry Pi',
+            progress: 'Progreso de Estudiantes'
+        };
+        document.getElementById('pageTitle').textContent = titles[page] || 'EducateEnIA';
     },
 
     openTool(tool) {
@@ -62,42 +107,20 @@ const App = {
             'ml-regression': 'simulators',
             'arduino-sim': 'simulators',
             'iot-sim': 'simulators',
-            'raspberry-learn': 'raspberry',
-            'python-basics': 'python-basics',
-            'data-science': 'data-science'
+            'raspberry-learn': 'raspberry'
         };
         
         const page = toolPages[tool];
         this.navigateTo(page);
         
-        if (page === 'ai-test') {
-            setTimeout(() => Quiz.init(), 100);
-        } else if (page === 'simulators' && tool !== 'ai-test') {
-            const tabMap = {
-                'ml-classification': 'classification',
-                'ml-regression': 'regression',
-                'arduino-sim': 'arduino',
-                'iot-sim': 'iot'
-            };
-            setTimeout(() => {
-                Simulators.switchTab(tabMap[tool] || 'classification');
-            }, 150);
-        }
+        if (page === 'ai-test') setTimeout(() => Quiz.init(), 100);
+        if (page === 'simulators') setTimeout(() => Simulators.init(), 100);
     },
 
-    updatePageTitle(page) {
-        const titles = {
-            dashboard: 'Dashboard',
-            courses: 'Gestión de Cursos',
-            classrooms: 'Aulas Virtuales',
-            tools: 'Herramientas de Aprendizaje',
-            'ai-test': 'Test de Conocimientos IA',
-            simulators: 'Simuladores Prácticos',
-            raspberry: 'Aprende Raspberry Pi',
-            'python-basics': 'Python Básico',
-            'data-science': 'Ciencia de Datos'
-        };
-        document.getElementById('pageTitle').textContent = titles[page] || 'EducateEnIA';
+    async logout() {
+        await fetch('/api/logout', { method: 'POST' });
+        this.user = null;
+        location.reload();
     }
 };
 

app/static/js/auth.js

@@ -0,0 +1,116 @@
+/**
+ * EducateEnIA - Auth
+ * Manejo de autenticación
+ */
+
+const Auth = {
+    currentRole: 'student',
+
+    init() {
+        this.loadCoursesForLogin();
+        
+        document.querySelectorAll('.login-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                this.selectRole(tab.dataset.role);
+            });
+        });
+    },
+
+    selectRole(role) {
+        this.currentRole = role;
+        
+        document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
+        document.querySelector(`.login-tab[data-role="${role}"]`).classList.add('active');
+
+        document.querySelectorAll('.login-form').forEach(f => f.classList.remove('active'));
+        document.getElementById(role + 'LoginForm').classList.add('active');
+    },
+
+    async loadCoursesForLogin() {
+        try {
+            const response = await fetch('/api/courses');
+            const courses = await response.json();
+            const select = document.getElementById('studentCourse');
+            if (select) {
+                select.innerHTML = '<option value="">-- Selecciona un curso --</option>' +
+                    courses.map(c => `<option value="${c.id}">${c.title}</option>`).join('');
+            }
+        } catch (error) {
+            console.error('Error loading courses:', error);
+        }
+    },
+
+    async loginStudent(e) {
+        e.preventDefault();
+        
+        const name = document.getElementById('studentName').value;
+        const courseId = document.getElementById('studentCourse').value;
+
+        if (!name || !courseId) {
+            this.showError('Por favor completa todos los campos');
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    role: 'student',
+                    name: name,
+                    course_id: courseId
+                })
+            });
+
+            const data = await response.json();
+            
+            if (data.success) {
+                App.user = { role: 'student', id: data.student_id, name: data.name, course_id: parseInt(courseId) };
+                App.showMainApp();
+            } else {
+                this.showError(data.error);
+            }
+        } catch (error) {
+            this.showError('Error de conexión');
+        }
+    },
+
+    async loginTeacher(e) {
+        e.preventDefault();
+        
+        const password = document.getElementById('teacherPassword').value;
+
+        try {
+            const response = await fetch('/api/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    role: 'teacher',
+                    password: password
+                })
+            });
+
+            const data = await response.json();
+            
+            if (data.success) {
+                App.user = { role: 'teacher', name: 'Maestro' };
+                App.showMainApp();
+            } else {
+                this.showError(data.error);
+            }
+        } catch (error) {
+            this.showError('Error de conexión');
+        }
+    },
+
+    showError(message) {
+        const errorEl = document.getElementById('loginError');
+        if (errorEl) {
+            errorEl.textContent = message;
+            errorEl.style.display = 'block';
+            setTimeout(() => {
+                errorEl.style.display = 'none';
+            }, 3000);
+        }
+    }
+};

app/static/js/teacher.js

@@ -0,0 +1,108 @@
+/**
+ * EducateEnIA - Teacher Progress
+ * Ver progreso de estudiantes
+ */
+
+const TeacherProgress = {
+    students: [],
+
+    async init() {
+        await this.loadProgress();
+    },
+
+    async loadProgress() {
+        try {
+            const response = await fetch('/api/students/progress');
+            this.students = await response.json();
+            this.renderProgress();
+        } catch (error) {
+            console.error('Error loading progress:', error);
+            this.renderEmpty();
+        }
+    },
+
+    renderProgress() {
+        const container = document.getElementById('progressList');
+        if (!container) return;
+
+        if (!this.students || this.students.length === 0) {
+            container.innerHTML = '<p style="color: #6B7280; text-align: center;">No hay estudiantes registrados aún</p>';
+            return;
+        }
+
+        container.innerHTML = this.students.map(student => `
+            <div class="progress-card">
+                <div class="progress-header">
+                    <div class="progress-student-info">
+                        <div class="progress-avatar">${student.name.charAt(0).toUpperCase()}</div>
+                        <div>
+                            <div class="progress-name">${student.name}</div>
+                            <div class="progress-course">${student.course}</div>
+                        </div>
+                    </div>
+                    <div class="progress-bar-container">
+                        <div class="progress-percent">${student.progress_percent}%</div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: ${student.progress_percent}%"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="progress-activities">
+                    ${student.activities.map(act => this.renderActivity(student.id, act)).join('')}
+                </div>
+            </div>
+        `).join('');
+    },
+
+    renderActivity(studentId, activity) {
+        const toolNames = {
+            'ai_test': 'Test IA',
+            'ml_classification': 'Clasificación',
+            'ml_regression': 'Regresión',
+            'arduino_sim': 'Arduino',
+            'iot_sim': 'IoT',
+            'raspberry_learn': 'Raspberry Pi'
+        };
+
+        const statusClass = activity.completed ? 'completed' : 'pending';
+        const statusText = activity.completed ? 'Completado' : 'Pendiente';
+        const maxAttempts = 1 + activity.extra_attempts;
+        const remaining = maxAttempts - activity.attempts;
+
+        return `
+            <div class="activity-item ${statusClass}">
+                <div class="activity-info">
+                    <span class="activity-name">${toolNames[activity.tool_id] || activity.tool_id}</span>
+                    <span class="activity-status">${statusText}</span>
+                </div>
+                <div class="activity-stats">
+                    <span class="activity-score">Mejor: ${activity.best_score}%</span>
+                    <span class="activity-attempts">Intentos: ${activity.attempts}/${maxAttempts}</span>
+                    ${remaining > 0 && !activity.completed ? `<button class="btn-add-attempt" onclick="TeacherProgress.addAttempts('${studentId}', '${activity.tool_id}')">+1 Intento</button>` : ''}
+                </div>
+            </div>
+        `;
+    },
+
+    async addAttempts(studentId, toolId) {
+        try {
+            const response = await fetch('/api/progress/extra-attempts', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ student_id: studentId, tool_id: toolId, extra: 1 })
+            });
+            if (response.ok) {
+                this.loadProgress();
+            }
+        } catch (error) {
+            console.error('Error adding attempts:', error);
+        }
+    },
+
+    renderEmpty() {
+        const container = document.getElementById('progressList');
+        if (container) {
+            container.innerHTML = '<p style="color: #6B7280; text-align: center;">No hay datos de progreso</p>';
+        }
+    }
+};

app/templates/index.html

@@ -8,33 +8,100 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --primary: #4F46E5;
-            --primary-dark: #3730A3;
-            --primary-light: #818CF8;
-            --secondary: #10B981;
-            --secondary-dark: #059669;
-            --accent: #F59E0B;
-            --danger: #EF4444;
-            --dark: #1F2937;
-            --dark-secondary: #374151;
-            --light: #F9FAFB;
-            --light-secondary: #E5E7EB;
+            --primary: #4F46E5; --primary-dark: #3730A3; --primary-light: #818CF8;
+            --secondary: #10B981; --secondary-dark: #059669;
+            --accent: #F59E0B; --danger: #EF4444;
+            --dark: #1F2937; --dark-secondary: #374151;
+            --light: #F9FAFB; --light-secondary: #E5E7EB;
             --white: #FFFFFF;
             --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
             --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
             --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
             --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
         }
-
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body { font-family: 'Inter', sans-serif; background: var(--light); color: var(--dark); line-height: 1.6; }
 
+        /* Login Screen */
+        #loginScreen {
+            min-height: 100vh;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, #1F2937 0%, #4F46E5 100%);
+            padding: 1rem;
+        }
+        .login-container {
+            background: white;
+            border-radius: 20px;
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 420px;
+            box-shadow: var(--shadow-xl);
+        }
+        .login-logo {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .login-logo-icon {
+            width: 70px; height: 70px;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+            border-radius: 16px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            color: white;
+            margin-bottom: 1rem;
+        }
+        .login-logo h1 { font-size: 1.5rem; color: var(--dark); margin-bottom: 0.25rem; }
+        .login-logo p { color: #6B7280; font-size: 0.9rem; }
+        
+        .login-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
+        .login-tab {
+            flex: 1;
+            padding: 0.75rem;
+            border: 2px solid var(--light-secondary);
+            border-radius: 10px;
+            background: white;
+            cursor: pointer;
+            text-align: center;
+            transition: all 0.2s;
+        }
+        .login-tab:hover { border-color: var(--primary-light); }
+        .login-tab.active { border-color: var(--primary); background: #EEF2FF; }
+        .login-tab i { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }
+        .login-tab span { font-weight: 600; color: var(--dark); }
+        
+        .login-form { display: none; }
+        .login-form.active { display: block; }
+        
+        .login-input-group { margin-bottom: 1rem; }
+        .login-input-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--dark); }
+        .login-input-group input, .login-input-group select {
+            width: 100%; padding: 0.75rem 1rem; border solid var(--light-secondary);
+            border-radius: 8px; font-size: 1px: 0.9rem; transition: all 0.2s;
+        }
+        .login-input-group input:focus, .login-input-group select:focus {
+            outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+        }
+        
+        .login-btn {
+            width: 100%; padding: 0.875rem; background: var(--primary); color: white;
+            border: none; border-radius: 8px; font-size: 1rem; font-weight: 600;
+            cursor: pointer; transition: all 0.2s; margin-top: 1rem;
+        }
+        .login-btn:hover { background: var(--primary-dark); }
+        .login-error { color: var(--danger); font-size: 0.875rem; margin-top: 0.5rem; text-align: center; display: none; }
+
+        /* Main App */
+        #mainApp { display: none; }
+
         .sidebar {
             position: fixed; left: 0; top: 0; width: 260px; height: 100vh;
             background: linear-gradient(180deg, var(--dark) 0%, var(--dark-secondary) 100%);
             padding: 1.5rem; display: flex; flex-direction: column; z-index: 100; overflow-y: auto;
         }
-
         .logo { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; margin-bottom: 2rem; }
         .logo-icon {
             width: 42px; height: 42px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
@@ -55,6 +122,15 @@
         .nav-item.active { background: var(--primary); color: white; }
         .nav-item i { width: 20px; text-align: center; }
 
+        .user-info {
+            margin-top: auto; padding: 1rem; background: rgba(255,255,255,0.1);
+            border-radius: 10px; margin-top: 1rem;
+        }
+        .user-info .name { color: white; font-weight: 600; font-size: 0.9rem; }
+        .user-info .role { color: #9CA3AF; font-size: 0.75rem; }
+        .user-logout { margin-top: 0.75rem; width: 100%; padding: 0.5rem; background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; color: #D1D5DB; cursor: pointer; font-size: 0.8rem; }
+        .user-logout:hover { background: rgba(255,255,255,0.1); color: white; }
+
         .main-content { margin-left: 260px; min-height: 100vh; }
 
         .header {
@@ -117,8 +193,6 @@
         .classroom-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
         .tool-badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; display: flex; align-items: center; gap: 0.25rem; }
         .no-tools { color: #9CA3AF; font-size: 0.8rem; }
-        .classroom-meta { text-align: center; padding: 0 1rem; }
-        .classroom-capacity { font-weight: 600; color: var(--primary); }
         .classroom-actions { display: flex; gap: 0.5rem; }
         .btn-icon { width: 36px; height: 36px; border-radius: 8px; border: none; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #6B7280; transition: all 0.2s; }
         .btn-icon:hover { background: var(--light-secondary); color: var(--dark); }
@@ -198,6 +272,30 @@
         .tool-selector-desc { display: block; font-size: 0.7rem; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
         .tool-selector-hint { font-size: 0.8rem; color: #9CA3AF; text-align: center; }
 
+        /* Progress Styles */
+        .progress-card { background: white; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; border: 1px solid var(--light-secondary); }
+        .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+        .progress-student-info { display: flex; align-items: center; gap: 1rem; }
+        .progress-avatar { width: 45px; height: 45px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 600; }
+        .progress-name { font-weight: 600; color: var(--dark); }
+        .progress-course { font-size: 0.8rem; color: #6B7280; }
+        .progress-bar-container { width: 200px; text-align: right; }
+        .progress-percent { font-size: 1.25rem; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; }
+        .progress-bar { height: 8px; background: var(--light-secondary); border-radius: 4px; overflow: hidden; }
+        .progress-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }
+        .progress-activities { display: flex; flex-direction: column; gap: 0.5rem; }
+        .activity-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--light); border-radius: 8px; }
+        .activity-item.completed { background: #D1FAE5; }
+        .activity-info { display: flex; gap: 1rem; }
+        .activity-name { font-weight: 500; color: var(--dark); }
+        .activity-status { font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 4px; }
+        .activity-item.completed .activity-status { background: var(--secondary); color: white; }
+        .activity-item.pending .activity-status { background: #FEF3C7; color: var(--accent); }
+        .activity-stats { display: flex; align-items: center; gap: 1rem; }
+        .activity-score, .activity-attempts { font-size: 0.8rem; color: #6B7280; }
+        .btn-add-attempt { padding: 0.25rem 0.5rem; background: var(--primary); color: white; border: none; border-radius: 4px; font-size: 0.7rem; cursor: pointer; }
+        .btn-add-attempt:hover { background: var(--primary-dark); }
+
         @media (max-width: 1024px) {
             .sidebar { width: 80px; padding: 1rem 0.5rem; }
             .logo-text, .nav-section-title, .nav-item span { display: none; }
@@ -209,133 +307,198 @@
             .main-content { margin-left: 0; }
             .stats-grid, .courses-grid, .tools-grid { grid-template-columns: 1fr; }
             .tool-selector-grid { grid-template-columns: 1fr; }
+            .login-container { padding: 1.5rem; }
         }
     </style>
 </head>
 <body>
-    <nav class="sidebar">
-        <div class="logo">
-            <div class="logo-icon"><i class="fas fa-brain"></i></div>
-            <span class="logo-text">EducateEnIA</span>
-        </div>
-        <div class="nav-section">
-            <div class="nav-section-title">Principal</div>
-            <a class="nav-item active" data-page="dashboard"><i class="fas fa-th-large"></i><span>Dashboard</span></a>
-            <a class="nav-item" data-page="courses"><i class="fas fa-book"></i><span>Cursos</span></a>
-            <a class="nav-item" data-page="classrooms"><i class="fas fa-chalkboard-teacher"></i><span>Aulas</span></a>
-            <a class="nav-item" data-page="tools"><i class="fas fa-tools"></i><span>Herramientas</span></a>
-        </div>
-        <div class="nav-section">
-            <div class="nav-section-title">Aprendizaje</div>
-            <a class="nav-item" data-page="ai-test"><i class="fas fa-robot"></i><span>Test de IA</span></a>
-            <a class="nav-item" data-page="simulators"><i class="fas fa-microchip"></i><span>Simuladores</span></a>
-            <a class="nav-item" data-page="raspberry"><i class="fas fa-server"></i><span>Raspberry Pi</span></a>
-        </div>
-    </nav>
-
-    <main class="main-content">
-        <header class="header">
-            <h1 class="header-title" id="pageTitle">Dashboard</h1>
-            <div class="header-actions">
-                <button class="btn btn-secondary"><i class="fas fa-bell"></i></button>
-                <button class="btn btn-primary" id="newCourseBtn"><i class="fas fa-plus"></i>Nuevo Curso</button>
+    <!-- Login Screen -->
+    <div id="loginScreen">
+        <div class="login-container">
+            <div class="login-logo">
+                <div class="login-logo-icon"><i class="fas fa-brain"></i></div>
+                <h1>EducateEnIA</h1>
+                <p>Plataforma Educativa de Inteligencia Artificial</p>
             </div>
-        </header>
-
-        <div class="content-area">
-            <!-- DASHBOARD -->
-            <div class="page active" id="dashboard">
-                <div class="stats-grid">
-                    <div class="stat-card"><div class="stat-icon blue"><i class="fas fa-book"></i></div><div class="stat-value">-</div><div class="stat-label">Cursos Activos</div></div>
-                    <div class="stat-card"><div class="stat-icon green"><i class="fas fa-chalkboard-teacher"></i></div><div class="stat-value">-</div><div class="stat-label">Aulas Virtuales</div></div>
-                    <div class="stat-card"><div class="stat-icon yellow"><i class="fas fa-users"></i></div><div class="stat-value">-</div><div class="stat-label">Estudiantes</div></div>
-                    <div class="stat-card"><div class="stat-icon purple"><i class="fas fa-certificate"></i></div><div class="stat-value">-</div><div class="stat-label">Tasa de Completado</div></div>
+            
+            <div class="login-tabs">
+                <div class="login-tab active" data-role="student" onclick="Auth.selectRole('student')">
+                    <i class="fas fa-user-graduate"></i>
+                    <span>Estudiante</span>
                 </div>
-                <div class="card">
-                    <div class="card-header"><h3 class="card-title">Cursos Recientes</h3><button class="btn btn-secondary" onclick="App.navigateTo('courses')">Ver Todos</button></div>
-                    <div class="card-body"><div class="courses-grid" id="recentCourses"></div></div>
+                <div class="login-tab" data-role="teacher" onclick="Auth.selectRole('teacher')">
+                    <i class="fas fa-chalkboard-teacher"></i>
+                    <span>Maestro</span>
                 </div>
             </div>
 
-            <!-- COURSES -->
-            <div class="page" id="courses">
-                <div class="courses-grid" id="allCourses"></div>
-            </div>
-
-            <!-- CLASSROOMS -->
-            <div class="page" id="classrooms">
-                <div class="card">
-                    <div class="card-header">
-                        <h3 class="card-title">Aulas Virtuales</h3>
-                        <button class="btn btn-primary" id="newClassroomBtn"><i class="fas fa-plus"></i>Nueva Aula</button>
-                    </div>
-                    <div class="card-body"><div class="classroom-list" id="classroomList"></div></div>
+            <!-- Student Form -->
+            <form id="studentLoginForm" class="login-form active" onsubmit="Auth.loginStudent(event)">
+                <div class="login-input-group">
+                    <label>Nombre completo</label>
+                    <input type="text" id="studentName" placeholder="Ingresa tu nombre" required>
+                </div>
+                <div class="login-input-group">
+                    <label>Seleccionar Curso</label>
+                    <select id="studentCourse" required>
+                        <option value="">-- Selecciona un curso --</option>
+                    </select>
+                </div>
+                <button type="submit" class="login-btn">Entrar al Aula</button>
+            </form>
+
+            <!-- Teacher Form -->
+            <form id="teacherLoginForm" class="login-form" onsubmit="Auth.loginTeacher(event)">
+                <div class="login-input-group">
+                    <label>Contraseña del Maestro</label>
+                    <input type="password" id="teacherPassword" placeholder="Ingresa la contraseña" required>
                 </div>
+                <button type="submit" class="login-btn">Entrar como Maestro</button>
+            </form>
+            
+            <div class="login-error" id="loginError"></div>
+        </div>
+    </div>
+
+    <!-- Main App -->
+    <div id="mainApp">
+        <nav class="sidebar">
+            <div class="logo">
+                <div class="logo-icon"><i class="fas fa-brain"></i></div>
+                <span class="logo-text">EducateEnIA</span>
+            </div>
+            
+            <div class="nav-section">
+                <div class="nav-section-title">Principal</div>
+                <a class="nav-item active" data-page="dashboard"><i class="fas fa-th-large"></i><span>Dashboard</span></a>
+                <a class="nav-item" data-page="courses"><i class="fas fa-book"></i><span>Cursos</span></a>
+                <a class="nav-item" data-page="classrooms"><i class="fas fa-chalkboard-teacher"></i><span>Aulas</span></a>
+                <a class="nav-item" data-page="tools"><i class="fas fa-tools"></i><span>Herramientas</span></a>
+            </div>
+            
+            <div class="nav-section" id="teacherNav" style="display: none;">
+                <div class="nav-section-title">Gestión</div>
+                <a class="nav-item" data-page="progress"><i class="fas fa-chart-bar"></i><span>Progreso</span></a>
             </div>
 
-            <!-- TOOLS -->
-            <div class="page" id="tools">
-                <div class="tools-grid" id="toolsGrid"></div>
+            <div class="nav-section" id="studentNav" style="display: none;">
+                <div class="nav-section-title">Aprendizaje</div>
+                <a class="nav-item" data-page="ai-test"><i class="fas fa-robot"></i><span>Test de IA</span></a>
+                <a class="nav-item" data-page="simulators"><i class="fas fa-microchip"></i><span>Simuladores</span></a>
+                <a class="nav-item" data-page="raspberry"><i class="fas fa-server"></i><span>Raspberry Pi</span></a>
             </div>
 
-            <!-- AI TEST -->
-            <div class="page" id="ai-test">
-                <div class="card">
-                    <div class="card-header"><h3 class="card-title">Test de Conocimientos Básicos en IA</h3></div>
-                    <div class="card-body"><div id="quizContainer"></div></div>
-                </div>
+            <div class="user-info" id="userInfo">
+                <div class="name" id="userName">Usuario</div>
+                <div class="role" id="userRole">Rol</div>
+                <button class="user-logout" onclick="App.logout()"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</button>
             </div>
+        </nav>
+
+        <main class="main-content">
+            <header class="header">
+                <h1 class="header-title" id="pageTitle">Dashboard</h1>
+                <div class="header-actions">
+                    <button class="btn btn-secondary"><i class="fas fa-bell"></i></button>
+                    <button class="btn btn-primary" id="newCourseBtn"><i class="fas fa-plus"></i>Nuevo Curso</button>
+                    <button class="btn btn-primary" id="newClassroomBtn"><i class="fas fa-plus"></i>Nueva Aula</button>
+                </div>
+            </header>
+
+            <div class="content-area">
+                <!-- DASHBOARD -->
+                <div class="page active" id="dashboard">
+                    <div class="stats-grid">
+                        <div class="stat-card"><div class="stat-icon blue"><i class="fas fa-book"></i></div><div class="stat-value">-</div><div class="stat-label">Cursos Activos</div></div>
+                        <div class="stat-card"><div class="stat-icon green"><i class="fas fa-chalkboard-teacher"></i></div><div class="stat-value">-</div><div class="stat-label">Aulas Virtuales</div></div>
+                        <div class="stat-card"><div class="stat-icon yellow"><i class="fas fa-users"></i></div><div class="stat-value">-</div><div class="stat-label">Estudiantes</div></div>
+                        <div class="stat-card"><div class="stat-icon purple"><i class="fas fa-certificate"></i></div><div class="stat-value">-</div><div class="stat-label">Tasa de Completado</div></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-header"><h3 class="card-title">Cursos Recientes</h3><button class="btn btn-secondary" onclick="App.navigateTo('courses')">Ver Todos</button></div>
+                        <div class="card-body"><div class="courses-grid" id="recentCourses"></div></div>
+                    </div>
+                </div>
 
-            <!-- SIMULATORS -->
-            <div class="page" id="simulators">
-                <div class="sim-tabs">
-                    <div class="sim-tab-btn active" data-sim="classification">Clasificación</div>
-                    <div class="sim-tab-btn" data-sim="regression">Regresión</div>
-                    <div class="sim-tab-btn" data-sim="arduino">Arduino</div>
-                    <div class="sim-tab-btn" data-sim="iot">IoT</div>
+                <!-- COURSES -->
+                <div class="page" id="courses">
+                    <div class="courses-grid" id="allCourses"></div>
                 </div>
 
-                <div id="simClassification" class="sim-tab-content active">
+                <!-- CLASSROOMS -->
+                <div class="page" id="classrooms">
                     <div class="card">
-                        <div class="card-header"><h3 class="card-title">Simulador de Clasificación</h3></div>
-                        <div class="card-body">
-                            <div class="simulator-controls">
-                                <div class="simulator-control"><label>Algoritmo</label><select class="form-select" id="classAlgorithm"><option>K-Nearest Neighbors</option><option>SVM</option><option>Decision Tree</option></select></div>
-                                <div class="simulator-control"><label>K (vecinos)</label><input type="range" id="kValue" min="1" max="15" value="5"><span id="kValueDisplay">5</span></div>
-                                <div class="simulator-control"><button class="btn btn-primary" id="trainClassification">Entrenar Modelo</button></div>
-                                <div class="simulator-control"><button class="btn btn-secondary" id="addClassPoint">Añadir Punto</button></div>
-                            </div>
-                            <div class="simulator-canvas" id="classificationCanvas"></div>
+                        <div class="card-header">
+                            <h3 class="card-title">Aulas Virtuales</h3>
+                            <button class="btn btn-primary" id="newClassroomBtn2"><i class="fas fa-plus"></i>Nueva Aula</button>
                         </div>
+                        <div class="card-body"><div class="classroom-list" id="classroomList"></div></div>
                     </div>
                 </div>
 
-                <div id="simRegression" class="sim-tab-content">
+                <!-- TOOLS -->
+                <div class="page" id="tools">
+                    <div class="tools-grid" id="toolsGrid"></div>
+                </div>
+
+                <!-- AI TEST -->
+                <div class="page" id="ai-test">
                     <div class="card">
-                        <div class="card-header"><h3 class="card-title">Simulador de Regresión</h3></div>
-                        <div class="card-body">
-                            <div class="simulator-controls">
-                                <div class="simulator-control"><label>Tipo</label><select class="form-select" id="regType"><option>Lineal</option><option>Polinómica</option><option>Exponencial</option></select></div>
-                                <div class="simulator-control"><label>Grado</label><input type="range" id="polyDegree" min="2" max="5" value="2"><span id="polyDegreeDisplay">2</span></div>
-                                <div class="simulator-control"><button class="btn btn-primary" id="trainRegression">Ajustar Modelo</button></div>
+                        <div class="card-header"><h3 class="card-title">Test de Conocimientos Básicos en IA</h3></div>
+                        <div class="card-body"><div id="quizContainer"></div></div>
+                    </div>
+                </div>
+
+                <!-- SIMULATORS -->
+                <div class="page" id="simulators">
+                    <div class="sim-tabs">
+                        <div class="sim-tab-btn active" data-sim="classification">Clasificación</div>
+                        <div class="sim-tab-btn" data-sim="regression">Regresión</div>
+                        <div class="sim-tab-btn" data-sim="arduino">Arduino</div>
+                        <div class="sim-tab-btn" data-sim="iot">IoT</div>
+                    </div>
+
+                    <div id="simClassification" class="sim-tab-content active">
+                        <div class="card">
+                            <div class="card-header"><h3 class="card-title">Simulador de Clasificación</h3></div>
+                            <div class="card-body">
+                                <div class="simulator-controls">
+                                    <div class="simulator-control"><label>Algoritmo</label><select class="form-select" id="classAlgorithm"><option>K-Nearest Neighbors</option><option>SVM</option><option>Decision Tree</option></select></div>
+                                    <div class="simulator-control"><label>K (vecinos)</label><input type="range" id="kValue" min="1" max="15" value="5"><span id="kValueDisplay">5</span></div>
+                                    <div class="simulator-control"><button class="btn btn-primary" id="trainClassification">Entrenar Modelo</button></div>
+                                    <div class="simulator-control"><button class="btn btn-secondary" id="addClassPoint">Añadir Punto</button></div>
+                                </div>
+                                <div class="simulator-canvas" id="classificationCanvas"></div>
                             </div>
-                            <div class="simulator-canvas" id="regressionCanvas"></div>
                         </div>
                     </div>
-                </div>
 
-                <div id="simArduino" class="sim-tab-content">
-                    <div class="card">
-                        <div class="card-header"><h3 class="card-title">Simulador de Circuitos Arduino</h3></div>
-                        <div class="card-body">
-                            <div class="simulator-controls">
-                                <button class="btn btn-primary" id="addLed"><i class="fas fa-lightbulb"></i> LED</button>
-                                <button class="btn btn-secondary" id="addResistor"><i class="fas fa-atom"></i> Resistencia</button>
-                                <button class="btn btn-secondary" id="addButton"><i class="fas fa-hand-pointer"></i> Botón</button>
-                                <button class="btn btn-secondary" id="addSensor"><i class="fas fa-thermometer-half"></i> Sensor</button>
+                    <div id="simRegression" class="sim-tab-content">
+                        <div class="card">
+                            <div class="card-header"><h3 class="card-title">Simulador de Regresión</h3></div>
+                            <div class="card-body">
+                                <div class="simulator-controls">
+                                    <div class="simulator-control"><label>Tipo</label><select class="form-select" id="regType"><option>Lineal</option><option>Polinómica</option><option>Exponencial</option></select></div>
+                                    <div class="simulator-control"><label>Grado</label><input type="range" id="polyDegree" min="2" max="5" value="2"><span id="polyDegreeDisplay">2</span></div>
+                                    <div class="simulator-control"><button class="btn btn-primary" id="trainRegression">Ajustar Modelo</button></div>
+                                </div>
+                                <div class="simulator-canvas" id="regressionCanvas"></div>
                             </div>
-                            <div class="arduino-canvas" id="arduinoCanvas"></div>
-                            <div class="code-block" id="arduinoCode">// Código Arduino generado
+                        </div>
+                    </div>
+
+                    <div id="simArduino" class="sim-tab-content">
+                        <div class="card">
+                            <div class="card-header"><h3 class="card-title">Simulador de Circuitos Arduino</h3></div>
+                            <div class="card-body">
+                                <div class="simulator-controls">
+                                    <button class="btn btn-primary" id="addLed"><i class="fas fa-lightbulb"></i> LED</button>
+                                    <button class="btn btn-secondary" id="addResistor"><i class="fas fa-atom"></i> Resistencia</button>
+                                    <button class="btn btn-secondary" id="addButton"><i class="fas fa-hand-pointer"></i> Botón</button>
+                                    <button class="btn btn-secondary" id="addSensor"><i class="fas fa-thermometer-half"></i> Sensor</button>
+                                </div>
+                                <div class="arduino-canvas" id="arduinoCanvas"></div>
+                                <div class="code-block" id="arduinoCode">// Código Arduino generado
 void setup() {
   pinMode(13, OUTPUT);
 }
@@ -345,33 +508,42 @@ void loop() {
   digitalWrite(13, LOW);
   delay(1000);
 }</div>
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                <div id="simIot" class="sim-tab-content">
-                    <div class="card">
-                        <div class="card-header"><h3 class="card-title">Simulador IoT</h3></div>
-                        <div class="card-body">
-                            <div class="simulator-controls">
-                                <div class="simulator-control"><label>Dispositivo</label><select class="form-select" id="iotDevice"><option value="temp">Sensor Temperatura</option><option value="humidity">Sensor Humedad</option><option value="motion">Sensor Movimiento</option><option value="light">Sensor Luz</option></select></div>
-                                <div class="simulator-control"><button class="btn btn-primary" id="addIotDevice">Añadir Dispositivo</button></div>
+                    <div id="simIot" class="sim-tab-content">
+                        <div class="card">
+                            <div class="card-header"><h3 class="card-title">Simulador IoT</h3></div>
+                            <div class="card-body">
+                                <div class="simulator-controls">
+                                    <div class="simulator-control"><label>Dispositivo</label><select class="form-select" id="iotDevice"><option value="temp">Sensor Temperatura</option><option value="humidity">Sensor Humedad</option><option value="motion">Sensor Movimiento</option><option value="light">Sensor Luz</option></select></div>
+                                    <div class="simulator-control"><button class="btn btn-primary" id="addIotDevice">Añadir Dispositivo</button></div>
+                                </div>
+                                <div class="simulator-canvas" id="iotCanvas" style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; padding: 1rem;"></div>
                             </div>
-                            <div class="simulator-canvas" id="iotCanvas" style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; padding: 1rem;"></div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- RASPBERRY -->
-            <div class="page" id="raspberry">
-                <div class="card">
-                    <div class="card-header"><h3 class="card-title">Aprende Raspberry Pi</h3></div>
-                    <div class="card-body"><div class="raspberry-guide" id="raspberryGuide"></div></div>
+                <!-- RASPBERRY -->
+                <div class="page" id="raspberry">
+                    <div class="card">
+                        <div class="card-header"><h3 class="card-title">Aprende Raspberry Pi</h3></div>
+                        <div class="card-body"><div class="raspberry-guide" id="raspberryGuide"></div></div>
+                    </div>
+                </div>
+
+                <!-- PROGRESS (Teacher Only) -->
+                <div class="page" id="progress">
+                    <div class="card">
+                        <div class="card-header"><h3 class="card-title">Progreso de Estudiantes</h3></div>
+                        <div class="card-body" id="progressList"></div>
+                    </div>
                 </div>
             </div>
-        </div>
-    </main>
+        </main>
+    </div>
 
     <!-- MODAL NUEVO CURSO -->
     <div class="modal" id="courseModal">
@@ -423,6 +595,7 @@ void loop() {
 
     <script src="/static/js/modal.js"></script>
     <script src="/static/js/app.js"></script>
+    <script src="/static/js/auth.js"></script>
     <script src="/static/js/dashboard.js"></script>
     <script src="/static/js/courses.js"></script>
     <script src="/static/js/classrooms.js"></script>
@@ -430,11 +603,10 @@ void loop() {
     <script src="/static/js/quiz.js"></script>
     <script src="/static/js/simulators.js"></script>
     <script src="/static/js/raspberry.js"></script>
+    <script src="/static/js/teacher.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            Dashboard.init();
-            Courses.init();
-            Tools.init();
+            Auth.init();
             
             document.querySelectorAll('.nav-item').forEach(item => {
                 item.addEventListener('click', () => {
@@ -444,6 +616,7 @@ void loop() {
                     if (page === 'classrooms') Classrooms.init();
                     if (page === 'ai-test') Quiz.init();
                     if (page === 'raspberry') Raspberry.init();
+                    if (page === 'progress') TeacherProgress.init();
                 });
             });