Spaces:
Running
Running
Download index.html from Elsimplerd/cine-suite: direct link, hf CLI and curl.
- Browser
- Download file 35.1 kB
-
https://huggingface.co/spaces/Elsimplerd/cine-suite/resolve/main/index.html
- Command line
-
hf download hf://spaces/Elsimplerd/cine-suite/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Elsimplerd/cine-suite/resolve/main/index.html
35.1 kB
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simple Studio - Dashboard</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"> | |
| <style> | |
| .grid-stack-item-content { | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| padding: 1rem; | |
| } | |
| .draggable-widget { | |
| cursor: move; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #e5e7eb; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| background-color: #3b82f6; | |
| } | |
| .notification-dot { | |
| position: absolute; | |
| top: -2px; | |
| right: -2px; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: #ef4444; | |
| } | |
| .sidebar-item:hover { | |
| background-color: #f3f4f6; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 200px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-film text-blue-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-800">Simple Studio</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <div class="px-4 py-4"> | |
| <div class="flex items-center px-4 py-3 bg-blue-50 rounded-lg"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-900">María Rodríguez</p> | |
| <p class="text-xs text-gray-500">Productora</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 px-2 space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg sidebar-item"> | |
| <i class="fas fa-tachometer-alt mr-3 text-blue-500"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-project-diagram mr-3 text-gray-500"></i> | |
| Proyectos | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-users mr-3 text-gray-500"></i> | |
| Clientes | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-user-friends mr-3 text-gray-500"></i> | |
| Colaboradores | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-camera mr-3 text-gray-500"></i> | |
| Equipos | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-file-invoice-dollar mr-3 text-gray-500"></i> | |
| Finanzas | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-calendar-alt mr-3 text-gray-500"></i> | |
| Calendario | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-tasks mr-3 text-gray-500"></i> | |
| Tareas | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-chart-line mr-3 text-gray-500"></i> | |
| Reportes | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-600 rounded-lg sidebar-item"> | |
| <i class="fas fa-cog mr-3 text-gray-500"></i> | |
| Configuración | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="ml-4 text-lg font-semibold text-gray-800">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| <span class="notification-dot"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-500 rounded-full hover:text-gray-600 focus:outline-none"> | |
| <i class="fas fa-envelope"></i> | |
| <span class="notification-dot"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="flex items-center text-sm font-medium text-gray-700 rounded-full focus:outline-none"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User profile"> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dashboard content --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <!-- Quick actions --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <button class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm border border-gray-200 hover:bg-gray-50"> | |
| <i class="fas fa-plus-circle text-blue-500 mr-2"></i> | |
| <span>Nuevo Proyecto</span> | |
| </button> | |
| <button class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm border border-gray-200 hover:bg-gray-50"> | |
| <i class="fas fa-user-plus text-green-500 mr-2"></i> | |
| <span>Agregar Cliente</span> | |
| </button> | |
| <button class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm border border-gray-200 hover:bg-gray-50"> | |
| <i class="fas fa-file-invoice-dollar text-purple-500 mr-2"></i> | |
| <span>Crear Factura</span> | |
| </button> | |
| <button class="flex items-center justify-center p-4 bg-white rounded-lg shadow-sm border border-gray-200 hover:bg-gray-50"> | |
| <i class="fas fa-calendar-plus text-yellow-500 mr-2"></i> | |
| <span>Agendar Evento</span> | |
| </button> | |
| </div> | |
| <!-- Dashboard widgets --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Resumen general --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Resumen General</h2> | |
| <div class="flex space-x-2"> | |
| <button class="p-1 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="p-1 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-3 bg-blue-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Proyectos Activos</p> | |
| <p class="text-2xl font-bold text-gray-800">12</p> | |
| </div> | |
| <div class="p-3 bg-green-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Facturado (Mes)</p> | |
| <p class="text-2xl font-bold text-gray-800">$24,500</p> | |
| </div> | |
| <div class="p-3 bg-purple-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Por Cobrar</p> | |
| <p class="text-2xl font-bold text-gray-800">$8,200</p> | |
| </div> | |
| <div class="p-3 bg-yellow-50 rounded-lg"> | |
| <p class="text-sm text-gray-500">Equipos en Uso</p> | |
| <p class="text-2xl font-bold text-gray-800">7/15</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Actividad reciente --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Actividad Reciente</h2> | |
| <button class="text-blue-500 text-sm font-medium">Ver todo</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-project-diagram text-blue-500 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Nuevo proyecto creado</p> | |
| <p class="text-sm text-gray-500">"Cobertura del Corte de Malta" por Agiftrd</p> | |
| <p class="text-xs text-gray-400">Hace 2 horas</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-file-invoice-dollar text-green-500 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Factura pagada</p> | |
| <p class="text-sm text-gray-500">#INV-2023-045 por $3,500</p> | |
| <p class="text-xs text-gray-400">Ayer, 4:30 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-user-plus text-purple-500 text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Nuevo colaborador</p> | |
| <p class="text-sm text-gray-500">Carlos M. (Editor) agregado al equipo</p> | |
| <p class="text-xs text-gray-400">Ayer, 11:20 AM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proyectos en progreso --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Proyectos en Progreso</h2> | |
| <button class="text-blue-500 text-sm font-medium">Ver todos</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Cobertura del Corte de Malta</span> | |
| <span class="text-sm font-medium text-gray-500">25%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 25%"></div> | |
| </div> | |
| <div class="flex justify-between mt-1"> | |
| <span class="text-xs text-gray-500">Agiftrd</span> | |
| <span class="text-xs text-gray-500">Entrega: 15 Nov</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Video Corporativo BHD</span> | |
| <span class="text-sm font-medium text-gray-500">65%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between mt-1"> | |
| <span class="text-xs text-gray-500">Banco BHD</span> | |
| <span class="text-xs text-gray-500">Entrega: 5 Nov</span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Documental "Isla de Luz"</span> | |
| <span class="text-sm font-medium text-gray-500">42%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 42%"></div> | |
| </div> | |
| <div class="flex justify-between mt-1"> | |
| <span class="text-xs text-gray-500">Ministerio de Cultura</span> | |
| <span class="text-xs text-gray-500">Entrega: 30 Nov</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Second row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Métricas financieras --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Métricas Financieras</h2> | |
| <div class="flex items-center space-x-2"> | |
| <select class="text-sm border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option>Últimos 30 días</option> | |
| <option>Este mes</option> | |
| <option>Este trimestre</option> | |
| <option>Este año</option> | |
| </select> | |
| <button class="p-1 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <!-- Placeholder for chart --> | |
| <div class="h-full flex items-center justify-center bg-gray-100 rounded-lg"> | |
| <p class="text-gray-500">Gráfico de métricas financieras</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 mt-4"> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Facturado</p> | |
| <p class="text-lg font-bold text-green-600">$24,500</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Gastos</p> | |
| <p class="text-lg font-bold text-red-600">$8,750</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-sm text-gray-500">Margen</p> | |
| <p class="text-lg font-bold text-blue-600">64%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Equipo recomendado para Agiftrd --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Equipo Recomendado</h2> | |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Agiftrd</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Para el proyecto "Cobertura del Corte de Malta"</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Juan Pérez</p> | |
| <p class="text-xs text-gray-500">Filmaker (Disponible)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">4.8 ★</span> | |
| <button class="ml-2 p-1 text-blue-500"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/28.jpg" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Laura Gómez</p> | |
| <p class="text-xs text-gray-500">Filmaker (Disponible)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">4.6 ★</span> | |
| <button class="ml-2 p-1 text-blue-500"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Carlos Rodríguez</p> | |
| <p class="text-xs text-gray-500">Fotógrafo (Disponible)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">4.9 ★</span> | |
| <button class="ml-2 p-1 text-blue-500"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/36.jpg" alt="User profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-800">Ana Martínez</p> | |
| <p class="text-xs text-gray-500">Editor (Disponible)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">4.7 ★</span> | |
| <button class="ml-2 p-1 text-blue-500"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-right"> | |
| <button class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| Confirmar Equipo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Third row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <!-- Calendario --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Calendario</h2> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <span class="text-sm font-medium">Noviembre 2023</span> | |
| <button class="p-1 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1 mb-2"> | |
| <div class="text-center text-xs font-medium text-gray-500">Dom</div> | |
| <div class="text-center text-xs font-medium text-gray-500">Lun</div> | |
| <div class="text-center text-xs font-medium text-gray-500">Mar</div> | |
| <div class="text-center text-xs font-medium text-gray-500">Mié</div> | |
| <div class="text-center text-xs font-medium text-gray-500">Jue</div> | |
| <div class="text-center text-xs font-medium text-gray-500">Vie</div> | |
| <div class="text-center text-xs font-medium text-gray-500">Sáb</div> | |
| </div> | |
| <div class="grid grid-cols-7 gap-1"> | |
| <!-- Calendar days would go here --> | |
| <div class="h-10 flex items-center justify-center text-sm text-gray-400">29</div> | |
| <div class="h-10 flex items-center justify-center text-sm text-gray-400">30</div> | |
| <div class="h-10 flex items-center justify-center text-sm text-gray-400">31</div> | |
| <div class="h-10 flex items-center justify-center text-sm">1</div> | |
| <div class="h-10 flex items-center justify-center text-sm">2</div> | |
| <div class="h-10 flex items-center justify-center text-sm">3</div> | |
| <div class="h-10 flex items-center justify-center text-sm">4</div> | |
| <!-- More days... --> | |
| </div> | |
| <div class="mt-4 space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div> | |
| <p class="text-xs text-gray-800 truncate">Filmación - Cobertura del Corte de Malta</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div> | |
| <p class="text-xs text-gray-800 truncate">Entrega - Video Corporativo BHD</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div> | |
| <p class="text-xs text-gray-800 truncate">Reunión con Agiftrd</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Estado de equipos --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 draggable-widget"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Estado de Equipos</h2> | |
| <button class="text-blue-500 text-sm font-medium">Ver inventario</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Cámaras</span> | |
| <span class="text-sm font-medium text-gray-500">5/8 disponibles</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 62.5%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Lentes</span> | |
| <span class="text-sm font-medium text-gray-500">12/15 disponibles</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Luces</span> | |
| <span class="text-sm font-medium text-gray-500">8/10 disponibles</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Trípodes</span> | |
| <span class="text-sm font-medium text-gray-500">4/6 disponibles</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 66.6%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> | |
| <p class="text-sm font-medium text-gray-800">Mantenimiento pendiente</p> | |
| </div> | |
| <span class="text-xs text-gray-500">2 equipos</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple drag functionality demonstration | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const draggableWidgets = document.querySelectorAll('.draggable-widget'); | |
| draggableWidgets.forEach(widget => { | |
| widget.addEventListener('mousedown', function(e) { | |
| if (e.target.closest('button, a, select, input')) return; | |
| const shiftX = e.clientX - widget.getBoundingClientRect().left; | |
| const shiftY = e.clientY - widget.getBoundingClientRect().top; | |
| widget.style.position = 'absolute'; | |
| widget.style.zIndex = 1000; | |
| document.body.append(widget); | |
| moveAt(e.pageX, e.pageY); | |
| function moveAt(pageX, pageY) { | |
| widget.style.left = pageX - shiftX + 'px'; | |
| widget.style.top = pageY - shiftY + 'px'; | |
| } | |
| function onMouseMove(e) { | |
| moveAt(e.pageX, e.pageY); | |
| } | |
| document.addEventListener('mousemove', onMouseMove); | |
| widget.onmouseup = function() { | |
| document.removeEventListener('mousemove', onMouseMove); | |
| widget.onmouseup = null; | |
| }; | |
| }); | |
| widget.ondragstart = function() { | |
| return false; | |
| }; | |
| }); | |
| }); | |
| </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=Elsimplerd/cine-suite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |