cine-suite / index.html
Elsimplerd's picture
Add 3 files
91337c8 verified
Raw History Blame Contribute Delete
35.1 kB
<!DOCTYPE html>
<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>