|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Turismo El Salvador</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s; |
|
|
min-width: 64px; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .nav-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .fa-chevron-down { |
|
|
display: none; |
|
|
} |
|
|
.content { |
|
|
transition: all 0.3s; |
|
|
margin-left: 256px; |
|
|
} |
|
|
.sidebar.collapsed + .content { |
|
|
margin-left: 70px; |
|
|
} |
|
|
.group:hover .hidden { |
|
|
display: block; |
|
|
} |
|
|
.chart-container { |
|
|
height: 300px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-blue-800 text-white w-64 flex flex-col transition-all duration-300 ease-in-out"> |
|
|
<div class="p-4 flex items-center justify-between border-b border-blue-700"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-umbrella-beach text-2xl"></i> |
|
|
<span class="logo-text font-bold text-xl">Turismo SV</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-white focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 overflow-y-auto"> |
|
|
<div class="p-4 border-b border-blue-700"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<span class="nav-text">Usuario</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="p-2"> |
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="dashboard"> |
|
|
<i class="fas fa-chart-line w-6 text-center"></i> |
|
|
<span class="nav-text">Estadísticas</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="viajes"> |
|
|
<i class="fas fa-route w-6 text-center"></i> |
|
|
<span class="nav-text">Paquetes Turísticos</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="clientes"> |
|
|
<i class="fas fa-user-tie w-6 text-center"></i> |
|
|
<span class="nav-text">Clientes</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="empleados"> |
|
|
<i class="fas fa-user-cog w-6 text-center"></i> |
|
|
<span class="nav-text">Personal</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="destinos"> |
|
|
<i class="fas fa-mountain w-6 text-center"></i> |
|
|
<span class="nav-text">Atractivos</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="facturacion"> |
|
|
<i class="fas fa-cash-register w-6 text-center"></i> |
|
|
<span class="nav-text">Facturación</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="reservaciones"> |
|
|
<i class="fas fa-clipboard-list w-6 text-center"></i> |
|
|
<span class="nav-text">Reservas</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="servicios"> |
|
|
<i class="fas fa-umbrella-beach w-6 text-center"></i> |
|
|
<span class="nav-text">Servicios Incluidos</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="transporte"> |
|
|
<i class="fas fa-bus-alt w-6 text-center"></i> |
|
|
<span class="nav-text">Transporte</span> |
|
|
</a> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300" data-section="reportes"> |
|
|
<i class="fas fa-chart-pie w-6 text-center"></i> |
|
|
<span class="nav-text">Reportes</span> |
|
|
</a> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-blue-700"> |
|
|
<button id="loginBtn" class="w-full flex items-center space-x-3 p-2 rounded hover:bg-blue-700 transition duration-300"> |
|
|
<i class="fas fa-sign-in-alt w-6 text-center"></i> |
|
|
<span class="nav-text">Iniciar Sesión</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="content flex-1 overflow-auto"> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
<div class="section-content" id="dashboard-section"> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> |
|
|
<i class="fas fa-suitcase-rolling text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Viajes activos</p> |
|
|
<h3 class="text-2xl font-bold">24 <span class="text-sm font-normal text-green-600">(+12% vs mes pasado)</span></h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> |
|
|
<i class="fas fa-dollar-sign text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Ingresos mensuales</p> |
|
|
<h3 class="text-2xl font-bold">$12,450 <span class="text-sm font-normal text-red-600">(-5% vs mes pasado)</span></h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Clientes nuevos</p> |
|
|
<h3 class="text-2xl font-bold">18 <span class="text-sm font-normal text-green-600">(+20% vs mes pasado)</span></h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> |
|
|
<i class="fas fa-calendar-check text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500">Reservaciones</p> |
|
|
<h3 class="text-2xl font-bold">32 <span class="text-sm font-normal text-green-600">(+8% vs mes pasado)</span></h3> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Viajes por destino</h3> |
|
|
<div class="chart-container"> |
|
|
<canvas id="destinationsChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Ingresos mensuales</h3> |
|
|
<div class="chart-container"> |
|
|
<canvas id="revenueChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6 mb-8"> |
|
|
<h3 class="text-lg font-semibold mb-4">Destinos Turísticos de El Salvador</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<h4 class="font-medium text-blue-600 mb-2">Ruta de las Flores</h4> |
|
|
<p class="text-gray-600 text-sm mb-2"><i class="fas fa-map-marker-alt mr-2"></i>Departamento: Sonsonate</p> |
|
|
<p class="text-gray-600 text-sm mb-2"><i class="fas fa-info-circle mr-2"></i>Pueblos coloniales: Juayúa, Apaneca, Ataco</p> |
|
|
<p class="text-gray-600 text-sm mb-2"><i class="fas fa-star mr-2"></i>Atractivos: Cafetales, gastronomía, festivales</p> |
|
|
<p class="text-gray-600 text-sm">Es un recorrido pintoresco por pueblos coloniales famosos por sus cafetales y festivales gastronómicos los fines de semana. La ruta ofrece paisajes montañosos, clima fresco y artesanías locales.</p> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<h4 class="font-medium text-blue-600 mb-2">Playa El Tunco</h4> |
|
|
<p class="text-gray-600 text-sm">La playa más famosa para surfistas, con ambiente bohemio, hoteles boutique, restaurantes y espectaculares atardeceres sobre el Océano Pacífico.</p> |
|
|
</div> |
|
|
<div class="border rounded-lg p-4"> |
|
|
<h4 class="font-medium text-blue-600 mb-2">Lago de Coatepeque</h4> |
|
|
<p class="text-gray-600 text-sm">Hermoso lago de origen volcánico con aguas cristalinas que cambian de color, ideal para deportes acuáticos, paseos en bote y relajarse en sus hoteles con vista al lago.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">¿Por qué visitar El Salvador?</h3> |
|
|
<div class="space-y-4"> |
|
|
<p class="text-gray-600">El Salvador, conocido como "El Pulgarcito de América", ofrece una gran diversidad en un territorio pequeño: playas paradisíacas, volcanes imponentes, pueblos coloniales y una rica cultura.</p> |
|
|
<p class="text-gray-600">Nuestros tours incluyen:</p> |
|
|
<ul class="list-disc list-inside text-gray-600 space-y-2"> |
|
|
<li>Guías turísticos certificados</li> |
|
|
<li>Transporte seguro y cómodo</li> |
|
|
<li>Alimentación típica incluida</li> |
|
|
<li>Seguro médico básico</li> |
|
|
<li>Acceso a los mejores miradores y atracciones</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="viajes-section"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Viajes Turísticos</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Código</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destino</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Precio</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><input type="text" class="w-full px-2 py-1 border rounded" value="VT001"></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><input type="text" class="w-full px-2 py-1 border rounded" value="Tour Ruta de las Flores"></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><input type="text" class="w-full px-2 py-1 border rounded" value="Apaneca"></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><input type="date" class="w-full px-2 py-1 border rounded" value="2023-07-15"></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><input type="number" class="w-full px-2 py-1 border rounded" value="75.00" step="0.01"></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<select class="w-full px-2 py-1 border rounded"> |
|
|
<option value="active" selected>Activo</option> |
|
|
<option value="inactive">Inactivo</option> |
|
|
<option value="pending">Pendiente</option> |
|
|
</select> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap flex space-x-2"> |
|
|
<button class="text-green-600 hover:text-green-800"> |
|
|
<i class="fas fa-save"></i> |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-800"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">VT002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Playa El Tunco</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">La Libertad</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">22/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$60.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Activo</span></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">VT003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Lago de Coatepeque</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Santa Ana</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">29/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$85.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Próximo</span></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">VT004</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Volcán Ilamatepec</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Santa Ana</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">05/08/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$90.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Próximo</span></td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nuevo Viaje |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="empleados-section"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Empleados</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Puesto</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Teléfono</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">EMP001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Carlos Martínez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Guía turístico</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">7123-4567</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">carlos@tursv.com</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Activo</span></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">EMP002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Ana Rodríguez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Coordinadora</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">7890-1234</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">ana@tursv.com</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Activo</span></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">EMP003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Luis Hernández</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Conductor</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">7654-3210</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">luis@tursv.com</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Activo</span></td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nuevo Empleado |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="destinos-section"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<img src="https://elsalvador.travel/wp-content/uploads/2020/12/playa-el-tunco-1.jpg" alt="El Tunco" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-2">Playa El Tunco</h3> |
|
|
<p class="text-gray-600 mb-4">Famosa playa para surfear con ambiente bohemio y hermosos atardeceres.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600 font-medium">$60.00</span> |
|
|
<button class="text-blue-600 hover:text-blue-800">Ver detalles</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<img src="https://elsalvador.travel/wp-content/uploads/2020/12/ruta-de-las-flores-1.jpg" alt="Ruta de las Flores" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-2">Ruta de las Flores</h3> |
|
|
<p class="text-gray-600 mb-4">Pintoresca ruta con pueblos coloridos, cafetales y artesanías.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600 font-medium">$75.00</span> |
|
|
<button class="text-blue-600 hover:text-blue-800">Ver detalles</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<img src="https://elsalvador.travel/wp-content/uploads/2020/12/lago-de-coatepeque-1.jpg" alt="Lago de Coatepeque" class="w-full h-48 object-cover"> |
|
|
<div class="p-4"> |
|
|
<h3 class="text-lg font-semibold mb-2">Lago de Coatepeque</h3> |
|
|
<p class="text-gray-600 mb-4">Hermoso lago de origen volcánico con aguas cristalinas.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-blue-600 font-medium">$85.00</span> |
|
|
<button class="text-blue-600 hover:text-blue-800">Ver detalles</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Agregar Destino |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="facturas-section"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Facturas</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N° Factura</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Monto</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">FAC-2023-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">María González</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">10/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$150.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Pagada</span></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-green-600 hover:text-green-800"><i class="fas fa-download"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">FAC-2023-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Juan Pérez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">12/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$225.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Pagada</span></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-green-600 hover:text-green-800"><i class="fas fa-download"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">FAC-2023-003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Roberto Sánchez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">15/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$180.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pendiente</span></td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<button class="text-blue-600 hover:text-blue-800 mr-2"><i class="fas fa-eye"></i></button> |
|
|
<button class="text-green-600 hover:text-green-800"><i class="fas fa-download"></i></button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nueva Factura |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="pagos-section"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Pagos</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID Pago</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Factura</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Monto</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Método</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">PAG-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">FAC-2023-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">María González</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">10/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$150.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Tarjeta</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">PAG-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">FAC-2023-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Juan Pérez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">12/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$225.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Efectivo</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">PAG-003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">FAC-2023-004</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Laura Ramírez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">14/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">$120.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Transferencia</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Registrar Pago |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="reservaciones-section"> |
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">Reservaciones</h2> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Código</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Viaje</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Personas</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">RES-001</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">María González</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Tour Ruta de las Flores</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">15/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">2</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Confirmada</span></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">RES-002</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Juan Pérez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Playa El Tunco</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">22/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">4</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Confirmada</span></td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-6 py-4 whitespace-nowrap">RES-003</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Roberto Sánchez</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">Lago de Coatepeque</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">29/07/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap">3</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"><span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pendiente</span></td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
<div class="p-4 border-t border-gray-200 flex justify-end"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nueva Reservación |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="section-content hidden" id="servicios-section"> |
|
|
<div class="bg-white rounded-lg shadow p-6 mb-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Servicios Incluidos en Paquetes</h2> |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-medium">Agregar Nuevo Servicio</h3> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Nuevo Servicio |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Nombre del Servicio</label> |
|
|
<input type="text" class="w-full px-3 py-2 border rounded-md"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Tipo de Servicio</label> |
|
|
<select class="w-full px-3 py-2 border rounded-md"> |
|
|
<option>Alimentación</option> |
|
|
<option>Hospedaje</option> |
|
|
<option>Guía Turístico</option> |
|
|
<option>Transporte</option> |
|
|
<option>Actividad</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Costo Adicional</label> |
|
|
<input type="number" class="w-full px-3 py-2 border rounded-md" placeholder="$0.00"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Duración</label> |
|
|
<input type="text" class="w-full px-3 py-2 border rounded-md" placeholder="Ej: 2 horas"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Disponibilidad</label> |
|
|
<select class="w-full px-3 py-2 border rounded-md"> |
|
|
<option>Disponible</option> |
|
|
<option>Limitado</option> |
|
|
<option>No disponible</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2">Descripción</label> |
|
|
<textarea class="w-full px-3 py-2 border rounded-md" rows="3"></textarea> |
|
|
</div> |
|
|
<button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md"> |
|
|
Guardar Servicio |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-blue-500"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Guía Turístico Bilingüe</h3> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Incluido</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Guía profesional certificado en inglés y español para todo el recorrido.</p> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span>8 horas de servicio</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<i class="fas fa-tag mr-2"></i> |
|
|
<span>Guía Turístico</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-green-600 font-medium">Disponible</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-green-500"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Almuerzo Típico</h3> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Opcional (+$15)</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Comida tradicional salvadoreña en restaurante local con vista panorámica.</p> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span>1 hora</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<i class="fas fa-tag mr-2"></i> |
|
|
<span>Alimentación</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-green-600 font-medium">Disponible</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-purple-500"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Tour de Café</h3> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800">Premium (+$25)</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Recorrido por plantación de café con degustación de variedades premium.</p> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span>2 horas</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<i class="fas fa-tag mr-2"></i> |
|
|
<span>Actividad</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-yellow-600 font-medium">Limitado</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-yellow-500"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Hospedaje Boutique</h3> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Opcional (+$80)</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Noche en hotel boutique con desayuno incluido y vista al volcán.</p> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span>1 noche</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<i class="fas fa-tag mr-2"></i> |
|
|
<span>Hospedaje</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-green-600 font-medium">Disponible</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-red-500"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Transporte Privado</h3> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800">Opcional (+$50)</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Vehiculo privado con chofer para grupos pequeños (hasta 4 personas).</p> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span>Todo el día</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<i class="fas fa-tag mr-2"></i> |
|
|
<span>Transporte</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-green-600 font-medium">Disponible</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden border-l-4 border-indigo-500"> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Clase de Surf</h3> |
|
|
<span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">Opcional (+$35)</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-3">Clase de 2 horas con instructor certificado y equipo incluido.</p> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-2"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span>2 horas</span> |
|
|
</div> |
|
|
<div class="flex items-center text-sm text-gray-500 mb-3"> |
|
|
<i class="fas fa-tag mr-2"></i> |
|
|
<span>Actividad</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-green-600 font-medium">Disponible</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-blue-600 hover:text-blue-800"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-800"><i class="fas fa-trash"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden transition-opacity duration-300"> |
|
|
<div class="bg-white rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 max-w-md w-full"> |
|
|
|
|
|
<div class="flex border-b"> |
|
|
<button id="loginTab" class="flex-1 py-4 px-6 text-center font-medium text-blue-600 border-b-2 border-blue-600">Iniciar Sesión</button> |
|
|
<button id="registerTab" class="flex-1 py-4 px-6 text-center font-medium text-gray-500">Registrarse</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loginForm" class="p-6"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-umbrella-beach text-4xl text-blue-600 mr-3"></i> |
|
|
<span class="text-2xl font-bold text-blue-800">Turismo SV</span> |
|
|
</div> |
|
|
</div> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="login-email">Correo Electrónico</label> |
|
|
<input type="email" id="login-email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="login-password">Contraseña</label> |
|
|
<input type="password" id="login-password" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 transform hover:scale-105"> |
|
|
Iniciar Sesión |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="registerForm" class="p-6 hidden"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-blue-800 mr-3">Turismo SV</span> |
|
|
<i class="fas fa-umbrella-beach text-4xl text-blue-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="register-name">Nombre Completo</label> |
|
|
<input type="text" id="register-name" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="register-email">Correo Electrónico</label> |
|
|
<input type="email" id="register-email" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 mb-2" for="register-password">Contraseña</label> |
|
|
<input type="password" id="register-password" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 mb-2" for="register-confirm">Confirmar Contraseña</label> |
|
|
<input type="password" id="register-confirm" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600"> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md transition duration-300 transform hover:scale-105"> |
|
|
Registrarse |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const toggleSidebar = document.getElementById('toggleSidebar'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
|
|
|
toggleSidebar.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('collapsed'); |
|
|
}); |
|
|
|
|
|
|
|
|
const authModal = document.getElementById('authModal'); |
|
|
const loginBtn = document.getElementById('loginBtn'); |
|
|
const loginTab = document.getElementById('loginTab'); |
|
|
const registerTab = document.getElementById('registerTab'); |
|
|
const loginForm = document.getElementById('loginForm'); |
|
|
const registerForm = document.getElementById('registerForm'); |
|
|
|
|
|
loginBtn.addEventListener('click', () => { |
|
|
authModal.classList.remove('hidden'); |
|
|
setTimeout(() => authModal.classList.add('opacity-100'), 10); |
|
|
}); |
|
|
|
|
|
loginTab.addEventListener('click', () => { |
|
|
loginTab.classList.add('text-blue-600', 'border-blue-600'); |
|
|
loginTab.classList.remove('text-gray-500'); |
|
|
registerTab.classList.add('text-gray-500'); |
|
|
registerTab.classList.remove('text-blue-600', 'border-blue-600'); |
|
|
loginForm.classList.remove('hidden'); |
|
|
registerForm.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
registerTab.addEventListener('click', () => { |
|
|
registerTab.classList.add('text-blue-600', 'border-blue-600'); |
|
|
registerTab.classList.remove('text-gray-500'); |
|
|
loginTab.classList.add('text-gray-500'); |
|
|
loginTab.classList.remove('text-blue-600', 'border-blue-600'); |
|
|
registerForm.classList.remove('hidden'); |
|
|
loginForm.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
authModal.addEventListener('click', (e) => { |
|
|
if (e.target === authModal) { |
|
|
authModal.classList.remove('opacity-100'); |
|
|
setTimeout(() => authModal.classList.add('hidden'), 300); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('nav a[data-section]').forEach(item => { |
|
|
item.addEventListener('click', function() { |
|
|
const section = this.getAttribute('data-section'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('nav div').forEach(navItem => { |
|
|
navItem.classList.remove('bg-blue-700', 'active-nav'); |
|
|
}); |
|
|
this.classList.add('bg-blue-700', 'active-nav'); |
|
|
|
|
|
|
|
|
const headerTitle = document.querySelector('header h1'); |
|
|
headerTitle.textContent = this.querySelector('.nav-text').textContent; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.section-content').forEach(section => { |
|
|
section.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(`${section}-section`).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const destinationsCtx = document.getElementById('destinationsChart').getContext('2d'); |
|
|
const destinationsChart = new Chart(destinationsCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Ruta de las Flores', 'El Tunco', 'Coatepeque', 'Volcán Ilamatepec', 'Suchitoto'], |
|
|
datasets: [{ |
|
|
data: [15, 12, 8, 5, 7], |
|
|
backgroundColor: [ |
|
|
'#3B82F6', |
|
|
'#10B981', |
|
|
'#F59E0B', |
|
|
'#6366F1', |
|
|
'#EC4899' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right' |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const revenueCtx = document.getElementById('revenueChart').getContext('2d'); |
|
|
const revenueChart = new Chart(revenueCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [{ |
|
|
label: 'Ingresos ($)', |
|
|
data: [8500, 9200, 10500, 11200, 9800, 12450, 11800], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.1)', |
|
|
borderColor: '#3B82F6', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
}); |
|
|
</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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=PTRNL/ptc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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=PTRNL/ptc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
