468 lines
17 KiB
HTML
468 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Personalizar - {{ site_name or 'Sitio' }}</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: #f0f0f1;
|
|
}
|
|
|
|
/* Sidebar de personalización */
|
|
.sidebar {
|
|
width: 350px;
|
|
background: #fff;
|
|
border-right: 1px solid #c3c4c7;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 2px 0 5px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #c3c4c7;
|
|
background: #f6f7f7;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
font-size: 20px;
|
|
color: #1d2327;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.sidebar-content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
}
|
|
|
|
.control-section {
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid #c3c4c7;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.control-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.control-section h3 {
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
color: #50575e;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.control-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.control-group label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #1d2327;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.control-group input[type="text"],
|
|
.control-group textarea,
|
|
.control-group select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #8c8f94;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.control-group input[type="text"]:focus,
|
|
.control-group textarea:focus,
|
|
.control-group select:focus {
|
|
outline: none;
|
|
border-color: #2271b1;
|
|
box-shadow: 0 0 0 1px #2271b1;
|
|
}
|
|
|
|
.control-group textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.color-picker-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.color-picker-group input[type="color"] {
|
|
width: 50px;
|
|
height: 40px;
|
|
border: 1px solid #8c8f94;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
padding: 2px;
|
|
}
|
|
|
|
.color-picker-group input[type="text"] {
|
|
flex: 1;
|
|
}
|
|
|
|
.preview-container {
|
|
flex: 1;
|
|
background: #fff;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.preview-header {
|
|
padding: 15px 20px;
|
|
background: #f6f7f7;
|
|
border-bottom: 1px solid #c3c4c7;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-header h3 {
|
|
font-size: 14px;
|
|
color: #1d2327;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.preview-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.preview {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.preview iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #2271b1;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #135e96;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #00a32a;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #008a20;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #d63638;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #b32d2e;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 20px;
|
|
border-top: 1px solid #c3c4c7;
|
|
background: #f6f7f7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-block {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #50575e;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 12px 20px;
|
|
background: #00a32a;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
z-index: 10000;
|
|
display: none;
|
|
}
|
|
|
|
.notification.show {
|
|
display: block;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>⚙️ Personalizar Sitio</h2>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<!-- Contenido -->
|
|
<div class="control-section">
|
|
<h3>Contenido</h3>
|
|
<div class="control-group">
|
|
<label>Nombre del Sitio</label>
|
|
<input type="text" id="site_name" placeholder="Mi Restaurante" value="{{ content.site_name or '' }}">
|
|
</div>
|
|
<div class="control-group">
|
|
<label>Título Principal</label>
|
|
<input type="text" id="hero_title" placeholder="Bienvenido" value="{{ content.hero_title or '' }}">
|
|
</div>
|
|
<div class="control-group">
|
|
<label>Descripción</label>
|
|
<textarea id="hero_description" placeholder="Descripción de tu restaurante...">{{ content.hero_description or '' }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colores -->
|
|
<div class="control-section">
|
|
<h3>Colores</h3>
|
|
<div class="control-group">
|
|
<label>Color Primario</label>
|
|
<div class="color-picker-group">
|
|
<input type="color" id="color_primary" value="{{ content.colors.primary if content.colors else '#d32f2f' }}">
|
|
<input type="text" id="color_primary_text" value="{{ content.colors.primary if content.colors else '#d32f2f' }}" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label>Color Secundario</label>
|
|
<div class="color-picker-group">
|
|
<input type="color" id="color_secondary" value="{{ content.colors.secondary if content.colors else '#ff6f00' }}">
|
|
<input type="text" id="color_secondary_text" value="{{ content.colors.secondary if content.colors else '#ff6f00' }}" readonly>
|
|
</div>
|
|
</div>
|
|
{% if theme == 'restaurante-moderno' or theme == 'restaurante-elegante' %}
|
|
<div class="control-group">
|
|
<label>Color Acento</label>
|
|
<div class="color-picker-group">
|
|
<input type="color" id="color_accent" value="{{ content.colors.accent if content.colors and content.colors.accent else '#ff8f00' }}">
|
|
<input type="text" id="color_accent_text" value="{{ content.colors.accent if content.colors and content.colors.accent else '#ff8f00' }}" readonly>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="control-group">
|
|
<label>Color de Texto</label>
|
|
<div class="color-picker-group">
|
|
<input type="color" id="color_text" value="{{ content.colors.text if content.colors else '#2c2c2c' }}">
|
|
<input type="text" id="color_text_text" value="{{ content.colors.text if content.colors else '#2c2c2c' }}" readonly>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tipografía -->
|
|
<div class="control-section">
|
|
<h3>Tipografía</h3>
|
|
<div class="control-group">
|
|
<label>Familia de Fuente</label>
|
|
<select id="font_family">
|
|
<option value="Roboto" {% if content.typography and content.typography.font_family == 'Roboto' %}selected{% endif %}>Roboto</option>
|
|
<option value="Georgia" {% if content.typography and content.typography.font_family == 'Georgia' %}selected{% endif %}>Georgia</option>
|
|
<option value="Playfair Display" {% if content.typography and content.typography.font_family == 'Playfair Display' %}selected{% endif %}>Playfair Display</option>
|
|
<option value="Cormorant Garamond" {% if content.typography and content.typography.font_family == 'Cormorant Garamond' %}selected{% endif %}>Cormorant Garamond</option>
|
|
<option value="Arial" {% if content.typography and content.typography.font_family == 'Arial' %}selected{% endif %}>Arial</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menús -->
|
|
<div class="control-section">
|
|
<h3>Menús</h3>
|
|
<div class="control-group">
|
|
<label>Gestionar Menús</label>
|
|
<button class="btn" style="background: #f0f0f1; color: #1d2327; width: 100%; margin-top: 5px;" onclick="gestionarMenus()">📋 Gestionar Menús</button>
|
|
<p style="font-size: 11px; color: #50575e; margin-top: 5px;">Configura menús para header, footer y sidebar</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<button class="btn btn-primary btn-block" onclick="saveChanges()">💾 Guardar Cambios</button>
|
|
<button class="btn btn-success btn-block" onclick="submitSite()">📤 Enviar para Aprobación</button>
|
|
<a href="/dashboard" class="btn btn-block" style="background: #50575e; color: #fff; text-align: center;">← Volver al Dashboard</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-container">
|
|
<div class="preview-header">
|
|
<h3>Vista Previa</h3>
|
|
<div class="preview-actions">
|
|
<button class="btn" style="background: #f0f0f1; color: #1d2327;" onclick="refreshPreview()">🔄 Actualizar</button>
|
|
</div>
|
|
</div>
|
|
<div class="preview">
|
|
<div class="loading" id="loading">Cargando vista previa...</div>
|
|
<iframe id="preview-iframe" style="width: 100%; height: 100%; border: none;" src="/api/customizer/preview-frame/{{ site_id }}" onload="document.getElementById('loading').style.display='none'"></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notification" id="notification">✅ Cambios guardados</div>
|
|
|
|
<script>
|
|
const siteId = {{ site_id }};
|
|
const theme = '{{ theme }}';
|
|
|
|
// Sincronizar color picker con input de texto
|
|
function syncColorInputs() {
|
|
document.querySelectorAll('input[type="color"]').forEach(colorInput => {
|
|
const textInput = document.getElementById(colorInput.id + '_text');
|
|
if (textInput) {
|
|
colorInput.addEventListener('input', () => {
|
|
textInput.value = colorInput.value;
|
|
updatePreview();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
syncColorInputs();
|
|
|
|
// Actualizar preview cuando cambian los campos
|
|
function updatePreview() {
|
|
const content = {
|
|
site_name: document.getElementById('site_name').value,
|
|
hero_title: document.getElementById('hero_title').value,
|
|
hero_description: document.getElementById('hero_description').value,
|
|
colors: {
|
|
primary: document.getElementById('color_primary').value,
|
|
secondary: document.getElementById('color_secondary').value,
|
|
text: document.getElementById('color_text').value
|
|
},
|
|
typography: {
|
|
font_family: document.getElementById('font_family').value
|
|
}
|
|
};
|
|
|
|
// Agregar accent si existe
|
|
const accentInput = document.getElementById('color_accent');
|
|
if (accentInput) {
|
|
content.colors.accent = accentInput.value;
|
|
}
|
|
|
|
// Guardar cambios y recargar iframe
|
|
fetch('/api/customizer/save', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({site_id: siteId, content: content})
|
|
})
|
|
.then(() => {
|
|
refreshPreview();
|
|
});
|
|
}
|
|
|
|
function refreshPreview() {
|
|
document.getElementById('loading').style.display = 'block';
|
|
document.getElementById('preview-iframe').src = '/api/customizer/preview-frame/' + siteId + '?t=' + Date.now();
|
|
}
|
|
|
|
function gestionarMenus() {
|
|
alert('📋 Gestión de menús próximamente disponible.\n\nPor ahora los menús se crean automáticamente al registrar.\nPuedes editarlos desde el código o esperar a la próxima actualización.');
|
|
}
|
|
|
|
// Escuchar cambios en los campos
|
|
document.querySelectorAll('#site_name, #hero_title, #hero_description, #color_primary, #color_secondary, #color_text, #font_family').forEach(el => {
|
|
el.addEventListener('input', updatePreview);
|
|
el.addEventListener('change', updatePreview);
|
|
});
|
|
|
|
const accentInput = document.getElementById('color_accent');
|
|
if (accentInput) {
|
|
accentInput.addEventListener('input', updatePreview);
|
|
accentInput.addEventListener('change', updatePreview);
|
|
}
|
|
|
|
function saveChanges() {
|
|
updatePreview();
|
|
showNotification('✅ Cambios guardados');
|
|
}
|
|
|
|
function submitSite() {
|
|
if (confirm('¿Enviar sitio para aprobación? Una vez enviado, esperarás la aprobación del administrador.')) {
|
|
fetch(`/dashboard/submit/${siteId}`, {method: 'POST'})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showNotification('✅ Sitio enviado para aprobación');
|
|
setTimeout(() => {
|
|
window.location.href = '/dashboard';
|
|
}, 1500);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function showNotification(message) {
|
|
const notif = document.getElementById('notification');
|
|
notif.textContent = message;
|
|
notif.classList.add('show');
|
|
setTimeout(() => {
|
|
notif.classList.remove('show');
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|