Hugging Face's logo

Spaces:
heboss
/
fcmctest
Running

App Files Community
fcmctest / index.html
TAMA
Add 2 files
c3c48a3 verified
Raw
History Blame Contribute Delete
48.8 kB
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Sistema de Trabajos - FCMC</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
 <script src="https://apis.google.com/js/api.js"></script>
 <style>
 .sidebar-collapsed {
 width: 70px;
 }
 .sidebar-collapsed .sidebar-text {
 display: none;
 }
 .sidebar-collapsed .logo-text {
 display: none;
 }
 .sidebar-collapsed .logo-icon {
 margin-left: 8px;
 }
 .file-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 .progress-ring__circle {
 transition: stroke-dashoffset 0.35s;
 transform: rotate(-90deg);
 transform-origin: 50% 50%;
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <!-- Login Modal -->
 <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
 <div class="bg-white rounded-lg shadow-xl w-96 p-8">
 <div class="text-center mb-6">
 <img src="https://via.placeholder.com/50" alt="Logo FCMC" class="mx-auto h-12 w-auto">
 <h2 class="mt-4 text-2xl font-bold text-gray-800">Iniciar Sesión</h2>
 <p class="mt-2 text-sm text-gray-600">Accede con tu correo institucional</p>
 </div>
<div id="normalLogin">
 <div class="mb-4">
 <label for="email" class="block text-sm font-medium text-gray-700">Correo Institucional</label>
 <input type="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div class="mb-6">
 <label for="password" class="block text-sm font-medium text-gray-700">Contraseña</label>
 <input type="password" id="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <button onclick="login()" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 Iniciar Sesión
 </button>
 <div class="mt-4 text-center">
 <button onclick="showGoogleLogin()" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" class="h-4 w-4 mr-2" alt="Google Logo">
 Continuar con Google
 </button>
 </div>
 <div class="mt-4 text-center text-sm text-gray-600">
 <a href="#" class="font-medium text-blue-600 hover:text-blue-500">¿Olvidaste tu contraseña?</a>
 </div>
 </div>
<div id="adminLogin" class="hidden">
 <div class="mb-4">
 <label for="adminUser" class="block text-sm font-medium text-gray-700">Usuario Administrador</label>
 <input type="text" id="adminUser" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <div class="mb-6">
 <label for="adminPassword" class="block text-sm font-medium text-gray-700">Contraseña</label>
 <input type="password" id="adminPassword" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
 </div>
 <button onclick="adminLogin()" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 Acceder como Administrador
 </button>
 <div class="mt-4 text-center">
 <button onclick="showNormalLogin()" class="text-sm text-blue-600 hover:text-blue-500">Volver al login normal</button>
 </div>
 </div>
<div class="mt-6 text-center text-sm">
 <button onclick="toggleLoginType()" class="font-medium text-blue-600 hover:text-blue-500">Acceso Administrador</button>
 </div>
 </div>
 </div>
<!-- Main Layout -->
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div id="sidebar" class="bg-blue-800 text-white w-64 flex-shrink-0 flex flex-col transition-all duration-300 ease-in-out">
 <div class="flex items-center justify-between p-4 border-b border-blue-700">
 <div class="flex items-center">
 <div class="logo-icon">
 <i class="fas fa-graduation-cap text-2xl"></i>
 </div>
 <span class="logo-text ml-3 text-xl font-semibold">FCMC 850</span>
 </div>
 <button id="sidebarToggle" class="text-blue-200 hover:text-white">
 <i class="fas fa-bars"></i>
 </button>
 </div>
<div class="flex-1 overflow-y-auto">
 <nav class="mt-4">
 <div class="px-4 mb-4">
 <div class="relative">
 <input type="text" placeholder="Buscar..." class="w-full bg-blue-700 text-white placeholder-blue-200 rounded-md py-2 pl-10 pr-4 focus:outline-none focus:ring-1 focus:ring-blue-500">
 <i class="fas fa-search absolute left-3 top-3 text-blue-200"></i>
 </div>
 </div>
<div class="px-2">
 <div class="text-xs uppercase font-semibold text-blue-200 px-4 py-2">Principal</div>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-home mr-3"></i>
 <span class="sidebar-text">Inicio</span>
 </a>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-calendar-alt mr-3"></i>
 <span class="sidebar-text">Calendario</span>
 </a>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-tasks mr-3"></i>
 <span class="sidebar-text">Tareas</span>
 </a>
 </div>
<div class="px-2 mt-4">
 <div class="text-xs uppercase font-semibold text-blue-200 px-4 py-2">Documentos</div>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-building mr-3"></i>
 <span class="sidebar-text">Por Coordinación</span>
 </a>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-graduation-cap mr-3"></i>
 <span class="sidebar-text">Por Carreras</span>
 </a>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-book mr-3"></i>
 <span class="sidebar-text">Por Asignaturas</span>
 </a>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-chalkboard-teacher mr-3"></i>
 <span class="sidebar-text">Por Profesores</span>
 </a>
 </div>
<div class="px-2 mt-4">
 <div class="text-xs uppercase font-semibold text-blue-200 px-4 py-2">Historial</div>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-history mr-3"></i>
 <span class="sidebar-text">Registro de Actividad</span>
 </a>
 <a href="#" class="flex items-center px-4 py-3 text-blue-100 hover:bg-blue-700 rounded-lg mx-2">
 <i class="fas fa-file-upload mr-3"></i>
 <span class="sidebar-text">Documentos Subidos</span>
 </a>
 </div>
 </nav>
 </div>
<div class="p-4 border-t border-blue-700">
 <div class="flex items-center">
 <img src="https://via.placeholder.com/40" alt="User" class="rounded-full h-10 w-10">
 <div class="ml-3 sidebar-text">
 <div class="text-sm font-medium">Usuario Actual</div>
 <div class="text-xs text-blue-200">Rol: Administrador</div>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="flex-1 flex flex-col overflow-hidden">
 <!-- Top Navigation -->
 <header class="bg-white shadow-sm z-10">
 <div class="flex items-center justify-between px-6 py-4">
 <div class="flex items-center">
 <h1 class="text-xl font-semibold text-gray-800">Documentos por Coordinación</h1>
 </div>
<div class="flex items-center space-x-4">
 <div class="relative">
 <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-bell text-xl"></i>
 <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
 </button>
 </div>
<div class="relative">
 <button id="userMenuButton" class="flex items-center space-x-2 focus:outline-none">
 <img src="https://via.placeholder.com/40" alt="User" class="rounded-full h-8 w-8">
 <span class="hidden md:inline-block text-sm font-medium">Admin User</span>
 </button>
<div id="userMenu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Perfil</a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configuración</a>
 <div class="border-t border-gray-200"></div>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="logout()">Cerrar Sesión</a>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content Area -->
 <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
 <!-- Filters -->
 <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
 <div class="flex flex-wrap items-center justify-between">
 <div class="flex space-x-4 mb-4 md:mb-0">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Coordinación</label>
 <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
 <option>Todas</option>
 <option>Académica</option>
 <option>Investigación</option>
 <option>Extensión</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Carrera</label>
 <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
 <option>Todas</option>
 <option>Medicina</option>
 <option>Enfermería</option>
 <option>Bioanálisis</option>
 </select>
 </div>
 </div>
<div class="flex space-x-3">
 <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 <i class="fas fa-filter mr-2"></i> Filtrar
 </button>
 <button onclick="openUploadModal()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
 <i class="fas fa-plus mr-2"></i> Subir Documento
 </button>
 </div>
 </div>
 </div>
<!-- Stats -->
 <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
 <div class="bg-white rounded-lg shadow-sm p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Documentos Totales</p>
 <p class="mt-1 text-3xl font-semibold text-gray-900">1,248</p>
 </div>
 <div class="p-3 rounded-full bg-blue-100 text-blue-600">
 <i class="fas fa-file-alt text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow-sm p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Subidos este mes</p>
 <p class="mt-1 text-3xl font-semibold text-gray-900">84</p>
 </div>
 <div class="p-3 rounded-full bg-green-100 text-green-600">
 <i class="fas fa-upload text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow-sm p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Usuarios activos</p>
 <p class="mt-1 text-3xl font-semibold text-gray-900">32</p>
 </div>
 <div class="p-3 rounded-full bg-purple-100 text-purple-600">
 <i class="fas fa-users text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow-sm p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Espacio usado</p>
 <p class="mt-1 text-3xl font-semibold text-gray-900">45%</p>
 </div>
 <div class="relative w-12 h-12">
 <svg class="w-full h-full" viewBox="0 0 36 36">
 <circle cx="18" cy="18" r="16" fill="none" stroke="#e6e6e6" stroke-width="3"></circle>
 <circle cx="18" cy="18" r="16" fill="none" stroke="#4f46e5" stroke-width="3" stroke-dasharray="100, 100" stroke-dashoffset="55" class="progress-ring__circle"></circle>
 </svg>
 </div>
 </div>
 </div>
 </div>
<!-- Documents Grid -->
 <div class="bg-white rounded-lg shadow-sm overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <div class="flex items-center justify-between">
 <h3 class="text-lg font-medium text-gray-900">Documentos recientes</h3>
 <div class="flex space-x-3">
 <button class="p-1 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-th-large"></i>
 </button>
 <button class="p-1 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-list"></i>
 </button>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
 <!-- Document Card 1 -->
 <div class="file-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
 <div class="p-4 border-b border-gray-200 bg-blue-50">
 <div class="flex justify-between items-start">
 <div>
 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
 PDF
 </span>
 </div>
 <div class="dropdown relative">
 <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
 </div>
 <div class="mt-3 text-center">
 <i class="fas fa-file-pdf text-4xl text-red-500"></i>
 </div>
 </div>
 <div class="p-4">
 <h4 class="text-sm font-medium text-gray-900 truncate">Planificación Académica 2023</h4>
 <p class="mt-1 text-xs text-gray-500">Coordinación Académica</p>
 <div class="mt-3 flex items-center text-xs text-gray-500">
 <i class="fas fa-user mr-1"></i>
 <span>Dr. Pérez</span>
 </div>
 <div class="mt-1 flex items-center text-xs text-gray-500">
 <i class="fas fa-calendar-alt mr-1"></i>
 <span>15/06/2023</span>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <button class="text-xs text-blue-600 hover:text-blue-800 font-medium">Ver detalles</button>
 <button class="text-xs text-green-600 hover:text-green-800 font-medium">Descargar</button>
 </div>
 </div>
 </div>
<!-- Document Card 2 -->
 <div class="file-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
 <div class="p-4 border-b border-gray-200 bg-green-50">
 <div class="flex justify-between items-start">
 <div>
 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
 DOCX
 </span>
 </div>
 <div class="dropdown relative">
 <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
 </div>
 <div class="mt-3 text-center">
 <i class="fas fa-file-word text-4xl text-blue-500"></i>
 </div>
 </div>
 <div class="p-4">
 <h4 class="text-sm font-medium text-gray-900 truncate">Informe Investigación COVID</h4>
 <p class="mt-1 text-xs text-gray-500">Coordinación Investigación</p>
 <div class="mt-3 flex items-center text-xs text-gray-500">
 <i class="fas fa-user mr-1"></i>
 <span>Dra. González</span>
 </div>
 <div class="mt-1 flex items-center text-xs text-gray-500">
 <i class="fas fa-calendar-alt mr-1"></i>
 <span>22/05/2023</span>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <button class="text-xs text-blue-600 hover:text-blue-800 font-medium">Ver detalles</button>
 <button class="text-xs text-green-600 hover:text-green-800 font-medium">Descargar</button>
 </div>
 </div>
 </div>
<!-- Document Card 3 -->
 <div class="file-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
 <div class="p-4 border-b border-gray-200 bg-yellow-50">
 <div class="flex justify-between items-start">
 <div>
 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
 XLSX
 </span>
 </div>
 <div class="dropdown relative">
 <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
 </div>
 <div class="mt-3 text-center">
 <i class="fas fa-file-excel text-4xl text-green-500"></i>
 </div>
 </div>
 <div class="p-4">
 <h4 class="text-sm font-medium text-gray-900 truncate">Presupuesto Extensión 2023</h4>
 <p class="mt-1 text-xs text-gray-500">Coordinación Extensión</p>
 <div class="mt-3 flex items-center text-xs text-gray-500">
 <i class="fas fa-user mr-1"></i>
 <span>Lic. Martínez</span>
 </div>
 <div class="mt-1 flex items-center text-xs text-gray-500">
 <i class="fas fa-calendar-alt mr-1"></i>
 <span>10/06/2023</span>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <button class="text-xs text-blue-600 hover:text-blue-800 font-medium">Ver detalles</button>
 <button class="text-xs text-green-600 hover:text-green-800 font-medium">Descargar</button>
 </div>
 </div>
 </div>
<!-- Document Card 4 -->
 <div class="file-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out">
 <div class="p-4 border-b border-gray-200 bg-purple-50">
 <div class="flex justify-between items-start">
 <div>
 <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
 Enlace
 </span>
 </div>
 <div class="dropdown relative">
 <button class="text-gray-400 hover:text-gray-600 focus:outline-none">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
 </div>
 <div class="mt-3 text-center">
 <i class="fas fa-link text-4xl text-purple-500"></i>
 </div>
 </div>
 <div class="p-4">
 <h4 class="text-sm font-medium text-gray-900 truncate">Reglamento Estudiantil</h4>
 <p class="mt-1 text-xs text-gray-500">Coordinación Académica</p>
 <div class="mt-3 flex items-center text-xs text-gray-500">
 <i class="fas fa-user mr-1"></i>
 <span>Dr. Rodríguez</span>
 </div>
 <div class="mt-1 flex items-center text-xs text-gray-500">
 <i class="fas fa-calendar-alt mr-1"></i>
 <span>28/04/2023</span>
 </div>
 <div class="mt-3 flex justify-between items-center">
 <button class="text-xs text-blue-600 hover:text-blue-800 font-medium">Ver detalles</button>
 <button class="text-xs text-green-600 hover:text-green-800 font-medium">Abrir enlace</button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Activity -->
 <div class="mt-6 bg-white rounded-lg shadow-sm overflow-hidden">
 <div class="px-6 py-4 border-b border-gray-200">
 <h3 class="text-lg font-medium text-gray-900">Actividad reciente</h3>
 </div>
 <div class="divide-y divide-gray-200">
 <!-- Activity Item 1 -->
 <div class="px-6 py-4">
 <div class="flex items-start">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
 </div>
 <div class="ml-4">
 <div class="flex items-center">
 <p class="text-sm font-medium text-gray-900">Dr. Pérez</p>
 <p class="ml-1 text-xs text-gray-500">hace 2 horas</p>
 </div>
 <p class="text-sm text-gray-500">Subió un nuevo documento: <span class="font-medium">"Planificación Académica 2023"</span></p>
 <div class="mt-1 text-xs text-blue-600">Coordinación Académica</div>
 </div>
 </div>
 </div>
<!-- Activity Item 2 -->
 <div class="px-6 py-4">
 <div class="flex items-start">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
 </div>
 <div class="ml-4">
 <div class="flex items-center">
 <p class="text-sm font-medium text-gray-900">Dra. González</p>
 <p class="ml-1 text-xs text-gray-500">hace 1 día</p>
 </div>
 <p class="text-sm text-gray-500">Actualizó el documento: <span class="font-medium">"Informe Investigación COVID"</span></p>
 <div class="mt-1 text-xs text-blue-600">Coordinación Investigación</div>
 </div>
 </div>
 </div>
<!-- Activity Item 3 -->
 <div class="px-6 py-4">
 <div class="flex items-start">
 <div class="flex-shrink-0">
 <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
 </div>
 <div class="ml-4">
 <div class="flex items-center">
 <p class="text-sm font-medium text-gray-900">Lic. Martínez</p>
 <p class="ml-1 text-xs text-gray-500">hace 2 días</p>
 </div>
 <p class="text-sm text-gray-500">Compartió un enlace: <span class="font-medium">"Presupuesto Extensión 2023"</span></p>
 <div class="mt-1 text-xs text-blue-600">Coordinación Extensión</div>
 </div>
 </div>
 </div>
 </div>
 <div class="px-6 py-4 text-center">
 <button class="text-sm font-medium text-blue-600 hover:text-blue-800">Ver todo el historial</button>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-white border-t border-gray-200 py-4 px-6">
 <div class="flex flex-col md:flex-row justify-between items-center">
 <div class="text-sm text-gray-500 mb-2 md:mb-0">
 <span id="currentDateTime" class="mr-4"></span>
 <span>Usuario conectado: <span class="font-medium">Admin User</span></span>
 </div>
 <div class="text-sm text-gray-500">
 <span>Usuarios activos: <span class="font-medium">32</span></span>
 <span class="mx-2">|</span>
 <span>Sistema de Trabajos FCMC v1.0</span>
 </div>
 </div>
 </footer>
 </div>
 </div>
<!-- Upload Document Modal -->
 <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
 <div class="px-6 py-4 border-b border-gray-200">
 <h3 class="text-lg font-medium text-gray-900">Subir nuevo documento</h3>
 </div>
<div class="p-6">
 <div class="grid grid-cols-1 gap-6">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de documento</label>
 <div class="grid grid-cols-3 gap-3">
 <button class="flex flex-col items-center justify-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-file-pdf text-3xl text-red-500 mb-2"></i>
 <span class="text-sm">Subir archivo</span>
 </button>
 <button class="flex flex-col items-center justify-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-link text-3xl text-purple-500 mb-2"></i>
 <span class="text-sm">Enlace externo</span>
 </button>
 <button class="flex flex-col items-center justify-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
 <i class="fas fa-google-drive text-3xl text-blue-500 mb-2"></i>
 <span class="text-sm">Desde Drive</span>
 </button>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Título del documento</label>
 <input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Coordinación</label>
 <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
 <option>Seleccionar...</option>
 <option>Académica</option>
 <option>Investigación</option>
 <option>Extensión</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Carrera</label>
 <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border">
 <option>Seleccionar...</option>
 <option>Medicina</option>
 <option>Enfermería</option>
 <option>Bioanálisis</option>
 </select>
 </div>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Descripción</label>
 <textarea rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border"></textarea>
 </div>
<div>
 <label class="block text-sm font-medium text-gray-700 mb-1">Archivo</label>
 <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
 <div class="space-y-1 text-center">
 <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
 <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m0 0V8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
 </svg>
 <div class="flex text-sm text-gray-600">
 <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
 <span>Subir un archivo</span>
 <input type="file" class="sr-only">
 </label>
 <p class="pl-1">o arrastrar y soltar</p>
 </div>
 <p class="text-xs text-gray-500">PDF, DOCX, XLSX hasta 10MB</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
 <button onclick="closeUploadModal()" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 Cancelar
 </button>
 <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 Subir documento
 </button>
 </div>
 </div>
 </div>
<script>
 // Initialize Supabase (replace with your actual credentials)
 const supabaseUrl = 'https://your-supabase-url.supabase.co';
 const supabaseKey = 'your-supabase-key';
 const supabase = supabase.createClient(supabaseUrl, supabaseKey);
// Initialize Google API
 function initGoogleAPI() {
 gapi.load('client:auth2', () => {
 gapi.client.init({
 apiKey: 'your-google-api-key',
 clientId: 'your-google-client-id.apps.googleusercontent.com',
 discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4", "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
 scope: "https://www.googleapis.com/auth/spreadsheets https://www.googleapis.com/auth/drive.file"
 });
 });
 }
// Initialize Google Picker
 function initGooglePicker() {
 const developerKey = 'your-google-developer-key';
 const clientId = 'your-google-client-id.apps.googleusercontent.com';
 const appId = 'your-google-app-id';
 const scope = ['https://www.googleapis.com/auth/drive.file'];
const pickerApiLoaded = () => {
 gapi.load('picker', {'callback': () => {
 // Picker API is ready
 }});
 };
// Load the Google API client
 gapi.load('client:auth2', () => {
 gapi.client.init({
 'apiKey': developerKey,
 'clientId': clientId,
 'scope': scope.join(' '),
 'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
 }).then(() => {
 pickerApiLoaded();
 });
 });
 }
// Show current date and time in footer
 function updateDateTime() {
 const now = new Date();
 const options = {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
 hour: '2-digit',
 minute: '2-digit'
 };
 document.getElementById('currentDateTime').textContent = now.toLocaleDateString('es-ES', options);
 }
// Update date time every minute
 updateDateTime();
 setInterval(updateDateTime, 60000);
// Toggle sidebar
 document.getElementById('sidebarToggle').addEventListener('click', () => {
 document.getElementById('sidebar').classList.toggle('sidebar-collapsed');
 });
// Toggle user menu
 document.getElementById('userMenuButton').addEventListener('click', () => {
 document.getElementById('userMenu').classList.toggle('hidden');
 });
// Close user menu when clicking outside
 document.addEventListener('click', (event) => {
 if (!event.target.closest('#userMenuButton') && !event.target.closest('#userMenu')) {
 document.getElementById('userMenu').classList.add('hidden');
 }
 });
// Login functions
 function toggleLoginType() {
 document.getElementById('normalLogin').classList.toggle('hidden');
 document.getElementById('adminLogin').classList.toggle('hidden');
 }
function showGoogleLogin() {
 // Implement Google OAuth login
 console.log("Google login clicked");
 // gapi.auth2.getAuthInstance().signIn();
 }
function showNormalLogin() {
 document.getElementById('normalLogin').classList.remove('hidden');
 document.getElementById('adminLogin').classList.add('hidden');
 }
function login() {
 const email = document.getElementById('email').value;
 const password = document.getElementById('password').value;
// Validate email is institutional
 if (!email.endsWith('@institucional.com')) {
 alert("Por favor use su correo institucional");
 return;
 }
// Here you would typically authenticate with Supabase
 supabase.auth.signInWithPassword({
 email: email,
 password: password
 }).then((response) => {
 if (response.error) {
 alert("Error de autenticación: " + response.error.message);
 } else {
 // Hide login modal
 document.getElementById('loginModal').classList.add('hidden');
 // Load user data and permissions
 loadUserData(response.data.user.id);
 }
 });
 }
function adminLogin() {
 const username = document.getElementById('adminUser').value;
 const password = document.getElementById('adminPassword').value;
// Hardcoded admin credentials for demo (in production, use proper auth)
 if (username === "admin" && password === "HebossUdelad850") {
 document.getElementById('loginModal').classList.add('hidden');
 // Set admin privileges
 console.log("Admin logged in");
 } else {
 alert("Credenciales de administrador incorrectas");
 }
 }
function logout() {
 // Sign out from Supabase
 supabase.auth.signOut().then(() => {
 // Show login modal
 document.getElementById('loginModal').classList.remove('hidden');
 // Reset to normal login
 showNormalLogin();
 });
 }
function loadUserData(userId) {
 // Fetch user data from Supabase
 supabase.from('users').select('*').eq('id', userId).single().then((response) => {
 if (response.data) {
 const user = response.data;
 console.log("User data loaded:", user);
 // Update UI based on user role and permissions
 }
 });
 }
// Document upload modal
 function openUploadModal() {
 document.getElementById('uploadModal').classList.remove('hidden');
 }
function closeUploadModal() {
 document.getElementById('uploadModal').classList.add('hidden');
 }
// Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
 initGoogleAPI();
 initGooglePicker();
// For demo purposes, hide login modal if we're not showing it
 // In production, you would check auth state first
 // document.getElementById('loginModal').classList.add('hidden');
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=TAMAGAMIS/fcmctest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>