sending binary files

.gitignore

@@ -0,0 +1,4 @@
+app/static/models/*
+__pycache__/
+*.pyc
+.env

Dockerfile

@@ -11,6 +11,19 @@ WORKDIR /app
 COPY app/requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Descargar modelos de Face API durante el build
+RUN mkdir -p app/static/models && \
+    apt-get update && apt-get install -y wget && \
+    wget -P app/static/models/ \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-weights_manifest.json \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-shard1 \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_landmark_68_model-weights_manifest.json \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_landmark_68_model-shard1 \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_recognition_model-weights_manifest.json \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_recognition_model-shard1 \
+    https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/face_recognition_model-shard2 \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
 # Copiar la aplicación
 COPY app/ .
 

app/main.py

@@ -697,6 +697,10 @@ def classroom():
 def asistencia():
     return render_template('asistencia.html', title="Toma de Asistencia")
 
+@app.route('/tutoria')
+def tutoria():
+    return render_template('tutoria.html', title="Tutoría y Guías")
+
 @app.route('/api/faces', methods=['GET', 'POST'])
 def api_faces():
     if request.method == 'POST':

app/static/css/style.css

@@ -70,24 +70,96 @@ body {
     gap: 0.5rem;
 }
 
-.nav-links {
+/* MENÚ HAMBURGUESA */
+.hamburger {
+    background: none;
+    border: none;
+    color: var(--accent);
+    font-size: 1.8rem;
+    cursor: pointer;
+    transition: transform 0.3s;
+    z-index: 200;
+}
+
+.hamburger:hover {
+    transform: scale(1.1);
+}
+
+/* SIDEBAR OVERLAY */
+.nav-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    z-index: 1000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s;
+}
+
+.nav-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+.nav-sidebar {
+    position: fixed;
+    top: 0;
+    right: -300px;
+    width: 280px;
+    height: 100%;
+    background: rgba(15, 23, 42, 0.95);
+    padding: 2rem;
     display: flex;
-    gap: 2rem;
+    flex-direction: column;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 1px solid var(--glass-border);
+}
+
+.nav-overlay.active .nav-sidebar {
+    right: 0;
 }
 
-.nav-item {
+.close-btn {
+    align-self: flex-end;
+    background: none;
+    border: none;
     color: var(--text-dim);
-    text-decoration: none;
-    font-weight: 600;
+    font-size: 2rem;
+    cursor: pointer;
+    margin-bottom: 2rem;
     transition: color 0.3s;
-    font-size: 0.9rem;
-    letter-spacing: 1px;
 }
 
-.nav-item:hover {
+.close-btn:hover {
     color: var(--accent);
 }
 
+.sidebar-links {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    height: 100%;
+}
+
+.sidebar-links .nav-item {
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem;
+    border-radius: 8px;
+    transition: background 0.3s;
+}
+
+.sidebar-links .nav-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    padding-left: 1rem;
+}
+
 .content-wrapper {
     max-width: 1000px;
     margin: 0 auto;

app/templates/asistencia.html

@@ -63,7 +63,8 @@
     // Cargar modelos y arrancar
     async function init() {
         try {
-            const MODEL_URL = 'https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights';
+            // Modelos locales
+            const MODEL_URL = '/static/models';
             await Promise.all([
                 faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
                 faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),

app/templates/base.html

@@ -34,14 +34,32 @@
                 <i class="fas fa-cube"></i>
                 <span>MAKER SPACE</span>
             </a>
-            <div class="nav-links">
-                <a href="/prestamos" class="nav-item">PRÉSTAMOS</a>
-                <a href="/miembros" class="nav-item">MIEMBROS</a>
-
-                <!-- Botón de Logout (solo si el usuario está autenticado) -->
-                {% if current_user.is_authenticated %}
-                <a href="/logout" class="nav-item" style="color: #ef4444;"><i class="fas fa-sign-out-alt"></i></a>
-                {% endif %}
+            <!-- Botón Hamburguesa -->
+            <button class="hamburger" id="hamburger-btn" aria-label="Menu">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <!-- Sidebar Overlay -->
+            <div class="nav-overlay" id="nav-overlay">
+                <div class="nav-sidebar glass">
+                    <button class="close-btn" id="close-btn">&times;</button>
+                    <div class="sidebar-links">
+                        <a href="/" class="nav-item"><i class="fas fa-home"></i> INICIO</a>
+                        <a href="/tutoria" class="nav-item"><i class="fas fa-book"></i> TUTORÍA</a>
+                        <a href="/prestamos" class="nav-item"><i class="fas fa-tools"></i> PRÉSTAMOS</a>
+                        <a href="/miembros" class="nav-item"><i class="fas fa-users"></i> MIEMBROS</a>
+
+                        {% if current_user.is_authenticated %}
+                        <div style="margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem;">
+                            <a href="/logout" class="nav-item" style="color: #ef4444;"><i
+                                    class="fas fa-sign-out-alt"></i> Salir</a>
+                        </div>
+                        {% else %}
+                        <a href="/login" class="nav-item" style="color: #38bdf8;"><i class="fas fa-sign-in-alt"></i>
+                            Acceder</a>
+                        {% endif %}
+                    </div>
+                </div>
             </div>
             <div style="display: flex; gap: 1rem; align-items: center;">
                 <!-- Botón para instalar PWA (solo aparece si es instalable) -->
@@ -143,25 +161,21 @@
             });
         }
 
-        // Manejo del banner de instalación "Añadir a pantalla de inicio"
-        let deferredPrompt;
-        const installBtn = document.getElementById('install-btn');
+        // Lógica del Menú Hamburguesa
+        const hamburgerBtn = document.getElementById('hamburger-btn');
+        const closeBtn = document.getElementById('close-btn');
+        const navOverlay = document.getElementById('nav-overlay');
 
-        window.addEventListener('beforeinstallprompt', (e) => {
-            e.preventDefault();
-            deferredPrompt = e;
-            installBtn.style.display = 'block';
-        });
+        function toggleMenu() {
+            navOverlay.classList.toggle('active');
+        }
 
-        installBtn.addEventListener('click', async () => {
-            if (deferredPrompt) {
-                deferredPrompt.prompt();
-                const { outcome } = await deferredPrompt.userChoice;
-                if (outcome === 'accepted') {
-                    installBtn.style.display = 'none';
-                }
-                deferredPrompt = null;
-            }
+        if (hamburgerBtn) hamburgerBtn.addEventListener('click', toggleMenu);
+        if (closeBtn) closeBtn.addEventListener('click', toggleMenu);
+
+        // Cerrar al hacer click fuera del sidebar
+        if (navOverlay) navOverlay.addEventListener('click', (e) => {
+            if (e.target === navOverlay) toggleMenu();
         });
     </script>
 </body>

app/templates/tutoria.html

@@ -0,0 +1,77 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="hero section">
+    <h1>TUTORIALES</h1>
+    <p class="text-dim">Guías y recursos para miembros y maestros del Maker Space.</p>
+</div>
+
+<div class="glass" style="padding: 2rem; border-radius: 1rem; margin-bottom: 2rem;">
+    <div class="tabs"
+        style="display: flex; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2rem;">
+        <button class="tab-btn active" onclick="switchTab('miembros')" id="tab-miembros"
+            style="background: none; border: none; color: white; padding: 1rem; cursor: pointer; border-bottom: 2px solid #38bdf8;">
+            Para Miembros
+        </button>
+        <button class="tab-btn" onclick="switchTab('maestros')" id="tab-maestros"
+            style="background: none; border: none; color: rgba(255,255,255,0.5); padding: 1rem; cursor: pointer;">
+            Para Maestros
+        </button>
+    </div>
+
+    <div id="content-miembros" class="tab-content">
+        <ul style="list-style: none; padding: 0;">
+            <li class="repo-item glass">
+                <div>
+                    <h3>🚀 Primeros Pasos</h3>
+                    <p class="text-dim">Cómo registrarte y acceder al espacio.</p>
+                </div>
+                <button class="btn glass">Ver Guía</button>
+            </li>
+            <li class="repo-item glass">
+                <div>
+                    <h3>🛠 Solicitud de Herramientas</h3>
+                    <p class="text-dim">Proceso para pedir prestada una herramienta.</p>
+                </div>
+                <button class="btn glass">Ver Guía</button>
+            </li>
+        </ul>
+    </div>
+
+    <div id="content-maestros" class="tab-content" style="display: none;">
+        <ul style="list-style: none; padding: 0;">
+            <li class="repo-item glass">
+                <div>
+                    <h3>📋 Gestión de Asistencia</h3>
+                    <p class="text-dim">Cómo usar el sistema de reconocimiento facial.</p>
+                </div>
+                <button class="btn glass">Ver Guía</button>
+            </li>
+            <li class="repo-item glass">
+                <div>
+                    <h3>📦 Aprobación de Préstamos</h3>
+                    <p class="text-dim">Guía para administrar solicitudes de equipo.</p>
+                </div>
+                <button class="btn glass">Ver Guía</button>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<script>
+    function switchTab(tabName) {
+        document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
+        document.querySelectorAll('.tab-btn').forEach(el => {
+            el.style.color = 'rgba(255,255,255,0.5)';
+            el.style.borderBottom = 'none';
+            el.classList.remove('active');
+        });
+
+        document.getElementById(`content-${tabName}`).style.display = 'block';
+        const activeTab = document.getElementById(`tab-${tabName}`);
+        activeTab.style.color = 'white';
+        activeTab.style.borderBottom = '2px solid #38bdf8';
+        activeTab.classList.add('active');
+    }
+</script>
+{% endblock %}