Sistema Contenedor Ibiza v2.0 - Despliegue Docker
This commit is contained in:
323
public/assets/css/style.css
Normal file
323
public/assets/css/style.css
Normal file
@@ -0,0 +1,323 @@
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #2563eb;
|
||||
--secondary: #64748b;
|
||||
--success: #22c55e;
|
||||
--danger: #ef4444;
|
||||
--background: #f8fafc;
|
||||
--surface: #ffffff;
|
||||
--text: #0f172a;
|
||||
--text-light: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Auth Layout */
|
||||
.auth-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
background: var(--surface);
|
||||
padding: 2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Dashboard Layout */
|
||||
.navbar {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-light);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Cards & Tables */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: 600;
|
||||
color: var(--text-light);
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
/* Drag & Drop */
|
||||
.drag-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.drag-item {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: move;
|
||||
/* Fallback */
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.drag-item:active {
|
||||
cursor: grabbing;
|
||||
|
||||
.drag-item:hover {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.drag-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
margin-right: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
100
public/assets/js/dragdrop.js
vendored
Normal file
100
public/assets/js/dragdrop.js
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* Funcionalidad Drag & Drop para reordenar rotaciones
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const list = document.getElementById('sortable-list');
|
||||
if (!list) return;
|
||||
|
||||
let draggedItem = null;
|
||||
|
||||
// Inicializar eventos para items
|
||||
function setupItems() {
|
||||
const items = list.querySelectorAll('.drag-item');
|
||||
items.forEach(item => {
|
||||
item.setAttribute('draggable', true);
|
||||
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
draggedItem = item;
|
||||
setTimeout(() => item.classList.add('dragging'), 0);
|
||||
});
|
||||
|
||||
item.addEventListener('dragend', function() {
|
||||
setTimeout(() => {
|
||||
item.classList.remove('dragging');
|
||||
draggedItem = null;
|
||||
}, 0);
|
||||
saveOrder(); // Guardar automáticamente al soltar
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Eventos de la lista
|
||||
list.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
const afterElement = getDragAfterElement(list, e.clientY);
|
||||
const currentItem = document.querySelector('.dragging');
|
||||
|
||||
if (afterElement == null) {
|
||||
list.appendChild(currentItem);
|
||||
} else {
|
||||
list.insertBefore(currentItem, afterElement);
|
||||
}
|
||||
});
|
||||
|
||||
// Helper para determinar posición
|
||||
function getDragAfterElement(container, y) {
|
||||
const draggableElements = [...container.querySelectorAll('.drag-item:not(.dragging)')];
|
||||
|
||||
return draggableElements.reduce((closest, child) => {
|
||||
const box = child.getBoundingClientRect();
|
||||
const offset = y - box.top - box.height / 2;
|
||||
|
||||
if (offset < 0 && offset > closest.offset) {
|
||||
return { offset: offset, element: child };
|
||||
} else {
|
||||
return closest;
|
||||
}
|
||||
}, { offset: Number.NEGATIVE_INFINITY }).element;
|
||||
}
|
||||
|
||||
// Guardar orden via AJAX
|
||||
function saveOrder() {
|
||||
const items = list.querySelectorAll('.drag-item');
|
||||
const order = Array.from(items).map(item => item.dataset.id);
|
||||
|
||||
const feedback = document.getElementById('save-feedback');
|
||||
if (feedback) feedback.textContent = 'Guardando...';
|
||||
|
||||
fetch('reorganizar.php?action=save_order', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
},
|
||||
body: JSON.stringify({ order: order })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
if (feedback) {
|
||||
feedback.textContent = 'Orden guardado correctamente';
|
||||
feedback.className = 'text-success';
|
||||
setTimeout(() => feedback.textContent = '', 2000);
|
||||
}
|
||||
} else {
|
||||
if (feedback) {
|
||||
feedback.textContent = 'Error al guardar';
|
||||
feedback.className = 'text-danger';
|
||||
}
|
||||
alert('Hubo un error al guardar el orden');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
if (feedback) feedback.textContent = 'Error de conexión';
|
||||
});
|
||||
}
|
||||
|
||||
setupItems();
|
||||
});
|
||||
28
public/assets/js/main.js
Normal file
28
public/assets/js/main.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Main JS
|
||||
*/
|
||||
|
||||
function confirmDelete(message = '¿Estás seguro de eliminar este registro?') {
|
||||
return confirm(message);
|
||||
}
|
||||
|
||||
function openModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) {
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Cerrar modales clickeando fuera
|
||||
window.onclick = function (event) {
|
||||
if (event.target.classList.contains('modal')) {
|
||||
event.target.style.display = "none";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user