Spaces:
Configuration error
Configuration error
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Osorno Runners</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box}:root{--primary:#dc143c;--primary-dark:#8b0000;--secondary:#00a65a;--danger:#dd4b39;--warning:#f39c12;--info:#00c0ef;--dark:#222d32;--sidebar:#222d32;--content:#ecf0f5;--white:#fff;--text-dark:#333;--text-light:#666;--border:#ddd}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--content);color:var(--text-dark)}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}.login-box{background:var(--white);padding:40px;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.3);max-width:400px;width:100%}.login-header{text-align:center;margin-bottom:30px}.login-header i{font-size:60px;color:var(--primary);margin-bottom:15px}.header{background:var(--primary);color:var(--white);padding:15px 20px;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;z-index:1000}.menu-toggle{background:0 0;border:none;color:var(--white);font-size:24px;cursor:pointer}.logo{font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px}.sidebar{position:fixed;top:60px;left:0;width:250px;height:calc(100vh - 60px);background:var(--sidebar);color:var(--white);overflow-y:auto;transition:transform .3s;z-index:999}.sidebar.hidden{transform:translateX(-100%)}.sidebar-menu{list-style:none;padding:20px 0}.sidebar-menu a{display:flex;align-items:center;gap:15px;padding:12px 20px;color:var(--white);text-decoration:none;cursor:pointer}.sidebar-menu a:hover,.sidebar-menu a.active{background:rgba(255,255,255,.1);border-left:3px solid var(--primary)}.main-content{margin-left:250px;margin-top:60px;padding:30px;transition:margin-left .3s}.main-content.expanded{margin-left:0}.stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:var(--white);border-radius:8px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.stat-icon{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--white)}.stat-card.primary .stat-icon{background:var(--primary)}.stat-card.success .stat-icon{background:var(--secondary)}.stat-card.warning .stat-icon{background:var(--warning)}.stat-card.info .stat-icon{background:var(--info)}.box{background:var(--white);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);margin-bottom:30px}.box-header{background:#f7f7f7;padding:15px 20px;border-bottom:1px solid var(--border)}.box-body{padding:20px}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:20px}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:600;margin-bottom:8px;font-size:14px}.form-group input,.form-group select,.form-group textarea{padding:10px 15px;border:1px solid var(--border);border-radius:5px;font-size:14px}.form-group input:focus,.form-group select:focus{outline:0;border-color:var(--primary)}.checkbox-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.checkbox-item{display:flex;align-items:center;padding:8px;background:#f8f9fa;border-radius:5px}.section-divider{margin:30px 0 20px;padding-bottom:12px;border-bottom:3px solid var(--primary);color:var(--primary);font-size:20px;font-weight:700}.btn{padding:12px 30px;border:none;border-radius:5px;font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:10px}.btn-primary{background:var(--primary);color:var(--white)}.btn-success{background:var(--secondary);color:var(--white)}.btn-danger{background:var(--danger);color:var(--white)}.btn-sm{padding:6px 15px;font-size:14px}.btn-secondary{background:#6c757d;color:var(--white)}.plan-list{display:grid;gap:20px}.plan-card{background:var(--white);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);padding:20px}.alert{padding:15px 20px;border-radius:5px;margin-bottom:20px;display:flex;align-items:center;gap:10px}.alert-info{background:#d1ecf1;color:#0c5460;border-left:4px solid var(--info)}.hidden{display:none!important}.prep-race-item{background:#f8f9fa;padding:15px;border-radius:8px;margin-bottom:15px;border-left:4px solid var(--primary)}@media(max-width:768px){.sidebar{transform:translateX(-100%)}.main-content{margin-left:0}} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loginScreen" class="login-container"> | |
| <div class="login-box"> | |
| <div class="login-header"> | |
| <i class="fas fa-running"></i> | |
| <h2>Osorno Runners</h2> | |
| <p>Sistema de Planes de Entrenamiento</p> | |
| </div> | |
| <form id="loginForm"> | |
| <div class="form-group"> | |
| <label><i class="fas fa-user"></i> Usuario</label> | |
| <input type="text" id="loginUsername" required placeholder="USER o ADMIN"> | |
| </div> | |
| <div class="form-group" style="margin-top:15px"> | |
| <label><i class="fas fa-lock"></i> Contraseña</label> | |
| <input type="password" id="loginPassword" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="width:100%;margin-top:20px;justify-content:center"> | |
| <i class="fas fa-sign-in-alt"></i> Iniciar Sesión | |
| </button> | |
| </form> | |
| <div style="margin-top:20px;text-align:center;color:#666;font-size:13px"> | |
| <p><strong>Usuario:</strong> USER / <strong>Pass:</strong> 123</p> | |
| <p><strong>Admin:</strong> ADMIN / <strong>Pass:</strong> 123</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="appScreen" class="hidden"> | |
| <header class="header"> | |
| <div style="display:flex;align-items:center;gap:15px"> | |
| <button class="menu-toggle" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button> | |
| <div class="logo"><i class="fas fa-running"></i><span>Osorno Runners</span></div> | |
| </div> | |
| <div style="display:flex;align-items:center;gap:20px"> | |
| <span id="currentUserName">Usuario</span> | |
| <button class="btn-danger" style="padding:8px 15px;border:none;border-radius:5px;cursor:pointer" onclick="logout()"> | |
| <i class="fas fa-sign-out-alt"></i> Salir | |
| </button> | |
| </div> | |
| </header> | |
| <nav class="sidebar" id="sidebar"> | |
| <ul class="sidebar-menu"> | |
| <li><a href="#" class="active" onclick="showSection('dashboard')"><i class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li> | |
| <li id="menu-new-plan"><a href="#" onclick="showSection('new-plan')"><i class="fas fa-plus-circle"></i><span>Nuevo Plan</span></a></li> | |
| <li><a href="#" onclick="showSection('plan-list')"><i class="fas fa-list-ul"></i><span>Ver Planes</span></a></li> | |
| </ul> | |
| </nav> | |
| <main class="main-content" id="mainContent"> | |
| <section id="dashboard-section"> | |
| <h1 style="margin-bottom:30px"><i class="fas fa-tachometer-alt"></i> Dashboard</h1> | |
| <div class="stats-container"> | |
| <div class="stat-card primary"> | |
| <div><h3 style="font-size:14px;color:#666;margin-bottom:10px">PLANES CREADOS</h3><p id="stat-plans" style="font-size:28px;font-weight:700">0</p></div> | |
| <div class="stat-icon"><i class="fas fa-list-alt"></i></div> | |
| </div> | |
| <div class="stat-card success"> | |
| <div><h3 style="font-size:14px;color:#666;margin-bottom:10px">TOTAL ATLETAS</h3><p id="stat-users" style="font-size:28px;font-weight:700">0</p></div> | |
| <div class="stat-icon"><i class="fas fa-users"></i></div> | |
| </div> | |
| </div> | |
| <div class="alert alert-info"><i class="fas fa-info-circle"></i><span>Sistema conectado a base de datos SQLite en HuggingFace Space</span></div> | |
| </section> | |
| <section id="new-plan-section" class="hidden"> | |
| <h1 style="margin-bottom:30px"><i class="fas fa-plus-circle"></i> Crear Nuevo Plan</h1> | |
| <div class="box"> | |
| <div class="box-header"><h3 style="font-size:18px;font-weight:700"><i class="fas fa-user-circle"></i> Información del Atleta</h3></div> | |
| <div class="box-body"> | |
| <form id="trainingForm"> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label><i class="fas fa-user"></i> Nombre *</label> | |
| <input type="text" id="athleteName" required> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-birthday-cake"></i> Edad *</label> | |
| <input type="number" id="athleteAge" required min="10" max="100"> | |
| </div> | |
| <div class="form-group"> | |
| <label><i class="fas fa-layer-group"></i> Experiencia *</label> | |
| <select id="experience" required> | |
| <option value="">Selecciona...</option> | |
| <option value="principiante">Principiante</option> | |
| <option value="intermedio">Intermedio</option> | |
| <option value="avanzado">Avanzado</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="section-divider"><i class="fas fa-weight"></i> Antropometría</div> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label>Peso (kg) *</label> | |
| <input type="number" id="weight" required min="30" max="200" step="0.1"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Talla (cm) *</label> | |
| <input type="number" id="height" required min="100" max="250"> | |
| </div> | |
| <div class="form-group"> | |
| <label>IMC</label> | |
| <input type="text" id="imc" readonly style="background:#e9ecef"> | |
| </div> | |
| </div> | |
| <div class="section-divider"><i class="fas fa-heartbeat"></i> Datos Fisiológicos</div> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label>FC Máxima (bpm) *</label> | |
| <input type="number" id="hrMax" required min="100" max="220"> | |
| </div> | |
| <div class="form-group"> | |
| <label>FC Reposo (bpm) *</label> | |
| <input type="number" id="hrRest" required min="30" max="100"> | |
| </div> | |
| <div class="form-group"> | |
| <label>VO2Max (opcional)</label> | |
| <input type="number" id="vo2max" min="20" max="90" step="0.1"> | |
| </div> | |
| </div> | |
| <div class="section-divider"><i class="fas fa-bullseye"></i> Objetivo</div> | |
| <div class="form-grid"> | |
| <div class="form-group"> | |
| <label>Distancia *</label> | |
| <select id="distance" required> | |
| <option value="">Selecciona...</option> | |
| <option value="5K">5K</option> | |
| <option value="10K">10K</option> | |
| <option value="21K">21K</option> | |
| <option value="42K">42K</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Ritmo (min/km) *</label> | |
| <input type="text" id="targetPace" required placeholder="4:30"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Fecha Carrera *</label> | |
| <input type="date" id="raceDate" required> | |
| </div> | |
| </div> | |
| <div class="section-divider"><i class="fas fa-calendar-day"></i> Disponibilidad</div> | |
| <div class="form-group"> | |
| <label>Días de Entrenamiento *</label> | |
| <div class="checkbox-group"> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="lunes">Lunes</label> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="martes">Martes</label> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="miércoles">Miércoles</label> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="jueves">Jueves</label> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="viernes">Viernes</label> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="sábado">Sábado</label> | |
| <label class="checkbox-item"><input type="checkbox" name="trainingDays" value="domingo">Domingo</label> | |
| </div> | |
| </div> | |
| <div style="margin-top:30px"> | |
| <button type="submit" class="btn btn-success"><i class="fas fa-check"></i> Generar Plan</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="plan-list-section" class="hidden"> | |
| <h1 style="margin-bottom:30px"><i class="fas fa-list-ul"></i> Planes de Entrenamiento</h1> | |
| <div id="planListContent" class="plan-list"></div> | |
| <div id="noPlanPlaceholder" class="hidden"> | |
| <div class="alert alert-info"><i class="fas fa-info-circle"></i><span>No hay planes disponibles</span></div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <script> | |
| let currentUser=null;const API_URL='/api';async function apiCall(endpoint,data){try{const response=await fetch(API_URL+endpoint,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});return await response.json()}catch(e){console.error('API Error:',e);return{success:false,error:e.message}}}document.getElementById('loginForm').addEventListener('submit',async function(e){e.preventDefault();const username=document.getElementById('loginUsername').value.toUpperCase(),password=document.getElementById('loginPassword').value,result=await apiCall('/login',{username:username,password:password});if(result.success){currentUser=result.user;document.getElementById('loginScreen').classList.add('hidden');document.getElementById('appScreen').classList.remove('hidden');document.getElementById('currentUserName').textContent=currentUser.name;currentUser.role==='user'&&(document.getElementById('menu-new-plan').style.display='none');loadPlans()}else alert('Usuario o contraseña incorrectos')});function logout(){currentUser=null;document.getElementById('appScreen').classList.add('hidden');document.getElementById('loginScreen').classList.remove('hidden');document.getElementById('loginForm').reset()}function toggleSidebar(){document.getElementById('sidebar').classList.toggle('hidden');document.getElementById('mainContent').classList.toggle('expanded')}function showSection(section){document.querySelectorAll('main > section').forEach(s=>s.classList.add('hidden'));document.querySelectorAll('.sidebar-menu a').forEach(a=>a.classList.remove('active'));if('dashboard'===section)document.getElementById('dashboard-section').classList.remove('hidden');else if('new-plan'===section){if(currentUser&&'admin'===currentUser.role)document.getElementById('new-plan-section').classList.remove('hidden');else{alert('Solo administradores pueden crear planes');return}}else'plan-list'===section&&(document.getElementById('plan-list-section').classList.remove('hidden'),loadPlans());window.event&&window.event.target&&window.event.target.closest('a').classList.add('active')}async function loadPlans(){const result=await apiCall('/get_plans',{username:currentUser.username,role:currentUser.role});if(result.success){const plans=result.plans,listContent=document.getElementById('planListContent'),placeholder=document.getElementById('noPlanPlaceholder');if(0===plans.length){placeholder.classList.remove('hidden');listContent.innerHTML='';return}placeholder.classList.add('hidden');let html='';plans.forEach(plan=>{html+=`<div class="plan-card"><div><h3><i class="fas fa-user"></i> ${plan.userData.name}</h3><p><strong>Objetivo:</strong> ${plan.userData.distance} - ${plan.totalWeeks} sem</p></div><div style="display:flex;gap:10px"><button class="btn btn-success btn-sm" onclick="generatePDF(${plan.id})"><i class="fas fa-file-pdf"></i> PDF</button>${currentUser&&'admin'===currentUser.role?`<button class="btn btn-danger btn-sm" onclick="deletePlan(${plan.id})"><i class="fas fa-trash"></i></button>`:''}</div></div>`});listContent.innerHTML=html;document.getElementById('stat-plans').textContent=plans.length}}document.getElementById('trainingForm').addEventListener('submit',async function(e){e.preventDefault();const trainingDays=Array.from(document.querySelectorAll('input[name="trainingDays"]:checked')).map(cb=>cb.value);if(trainingDays.length<3)return void alert('Selecciona al menos 3 días');const plan={userData:{name:document.getElementById('athleteName').value,age:parseInt(document.getElementById('athleteAge').value),experience:document.getElementById('experience').value,weight:parseFloat(document.getElementById('weight').value),height:parseFloat(document.getElementById('height').value),imc:document.getElementById('imc').value,hrMax:parseInt(document.getElementById('hrMax').value),hrRest:parseInt(document.getElementById('hrRest').value),vo2max:document.getElementById('vo2max').value||null,distance:document.getElementById('distance').value,targetPace:document.getElementById('targetPace').value,raceDate:document.getElementById('raceDate').value,trainingDays:trainingDays},totalWeeks:12,weeklyPlans:[]};const result=await apiCall('/save_plan',{plan:JSON.stringify(plan),username:currentUser.username});result.success?(alert('Plan creado exitosamente'),document.getElementById('trainingForm').reset(),showSection('plan-list')):alert('Error al crear plan: '+result.error)});async function deletePlan(planId){if(confirm('¿Eliminar este plan?')){const result=await apiCall('/delete_plan',{plan_id:planId});result.success?(alert('Plan eliminado'),loadPlans()):alert('Error al eliminar')}}function generatePDF(planId){alert('Generación de PDF disponible en versión completa')} | |
| </script> | |
| </body> | |
| </html> | |