Modularización de GKACHELE SaaS
This commit is contained in:
gkachele
113
backups/backup-20260114-085602/raspberry/templates/admin.html
Normal file
113
backups/backup-20260114-085602/raspberry/templates/admin.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Admin - Demo</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
th {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
.btn {
|
||||
padding: 5px 15px;
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>🔧 Panel Admin</h1>
|
||||
</div>
|
||||
|
||||
<h2>Solicitudes Pendientes</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Slug</th>
|
||||
<th>Email Cliente</th>
|
||||
<th>Fecha</th>
|
||||
<th>Acción</th>
|
||||
</tr>
|
||||
{% for req in requests %}
|
||||
<tr>
|
||||
<td>{{ req.id }}</td>
|
||||
<td>{{ req.slug }}</td>
|
||||
<td>{{ req.email }}</td>
|
||||
<td>{{ req.created_at }}</td>
|
||||
<td>
|
||||
<button class="btn" onclick="approve({{ req.id }})">✅ Aprobar</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% if not requests %}
|
||||
<tr><td colspan="5">No hay solicitudes pendientes</td></tr>
|
||||
{% endif %}
|
||||
</table>
|
||||
|
||||
<h2>Todos los Sitios</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Slug</th>
|
||||
<th>Tema</th>
|
||||
<th>Status</th>
|
||||
<th>Ver</th>
|
||||
</tr>
|
||||
{% for site in sites %}
|
||||
<tr>
|
||||
<td>{{ site.id }}</td>
|
||||
<td>{{ site.slug }}</td>
|
||||
<td>{{ site.theme }}</td>
|
||||
<td>{{ site.status }}</td>
|
||||
<td>
|
||||
{% if site.status == 'published' %}
|
||||
<a href="/site/{{ site.slug }}" target="_blank">Ver</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
<script>
|
||||
function approve(requestId) {
|
||||
if (confirm('¿Aprobar este sitio?')) {
|
||||
fetch(`/admin/approve/${requestId}`, {method: 'POST'})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('✅ Sitio aprobado');
|
||||
location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Crear Sitio - Demo</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
h1 { margin-bottom: 20px; }
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn {
|
||||
padding: 12px 30px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover { background: #5568d3; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>➕ Crear Nuevo Sitio</h1>
|
||||
<form id="createForm">
|
||||
<input type="text" id="site_name" placeholder="Nombre del sitio" required>
|
||||
<input type="text" id="slug" placeholder="Slug (URL)" required>
|
||||
<input type="text" id="hero_title" placeholder="Título principal" required>
|
||||
<textarea id="hero_description" placeholder="Descripción" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 15px;"></textarea>
|
||||
<select id="theme">
|
||||
<option value="default">Tema Default</option>
|
||||
<option value="modern">Tema Moderno</option>
|
||||
</select>
|
||||
<button type="submit" class="btn">Crear Sitio</button>
|
||||
</form>
|
||||
<a href="/dashboard" style="display: inline-block; margin-top: 15px; color: #667eea;">← Volver</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('createForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
site_name: document.getElementById('site_name').value,
|
||||
slug: document.getElementById('slug').value,
|
||||
hero_title: document.getElementById('hero_title').value,
|
||||
hero_description: document.getElementById('hero_description').value,
|
||||
theme: document.getElementById('theme').value
|
||||
};
|
||||
|
||||
const res = await fetch('/dashboard/create', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
if (result.success) {
|
||||
window.location.href = `/customizer/${result.site_id}`;
|
||||
} else {
|
||||
alert(result.error || 'Error al crear sitio');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,467 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Dashboard - Demo</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sites {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.site-card {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.status.draft { background: #ffc107; }
|
||||
.status.pending { background: #ff9800; }
|
||||
.status.published { background: #4caf50; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>📊 Mi Dashboard</h1>
|
||||
<div>
|
||||
<a href="/dashboard/create" class="btn">➕ Crear Sitio</a>
|
||||
<a href="/logout" class="btn" style="background: #ff4d4d;">Salir</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sites">
|
||||
{% for site in sites %}
|
||||
<div class="site-card">
|
||||
<h3>{{ site.slug }}</h3>
|
||||
<p>Tema: {{ site.theme }}</p>
|
||||
<span class="status {{ site.status }}">{{ site.status }}</span>
|
||||
<div style="margin-top: 15px;">
|
||||
<a href="/customizer/{{ site.id }}" class="btn">✏️ Editar</a>
|
||||
{% if site.status == 'draft' %}
|
||||
<a href="/dashboard/submit/{{ site.id }}" class="btn" style="background: #ff9800;">📤 Enviar</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if not sites %}
|
||||
<div class="site-card">
|
||||
<p>No tienes sitios aún. <a href="/dashboard/create">Crear uno</a></p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>PageBuilder SaaS - Demo</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
h1 { color: #333; margin-bottom: 20px; }
|
||||
p { color: #666; margin-bottom: 30px; }
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.btn:hover { background: #5568d3; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎨 PageBuilder SaaS</h1>
|
||||
<p>Crea tu sitio web en minutos</p>
|
||||
<a href="/register" class="btn">Registrarse</a>
|
||||
<a href="/login" class="btn">Iniciar Sesión</a>
|
||||
<a href="/admin" class="btn" style="background: #ff4d4d;">Admin</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1442
backups/backup-20260114-085602/raspberry/templates/landing_real.html
Normal file
1442
backups/backup-20260114-085602/raspberry/templates/landing_real.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login - Demo</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
h1 { margin-bottom: 20px; color: #333; }
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.btn:hover { background: #5568d3; }
|
||||
a { color: #667eea; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🔐 Iniciar Sesión</h1>
|
||||
<form id="loginForm">
|
||||
<input type="email" id="email" placeholder="Email" required>
|
||||
<input type="password" id="password" placeholder="Contraseña" required>
|
||||
<button type="submit" class="btn">Iniciar Sesión</button>
|
||||
</form>
|
||||
<p style="text-align: center; margin-top: 15px;">
|
||||
<a href="/register">¿No tienes cuenta? Regístrate</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const data = {
|
||||
email: document.getElementById('email').value,
|
||||
password: document.getElementById('password').value
|
||||
};
|
||||
|
||||
const res = await fetch('/login', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await res.json();
|
||||
if (result.success) {
|
||||
window.location.href = '/dashboard';
|
||||
} else {
|
||||
alert(result.error || 'Error al iniciar sesión');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ content.site_name or 'Mi Sitio' }}</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: {{ content.typography.font_family if content.typography else 'Arial' }};
|
||||
background: white;
|
||||
padding: 40px;
|
||||
}
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
color: {{ content.colors.primary if content.colors else '#ff4d4d' }};
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
p {
|
||||
color: {{ content.colors.text if content.colors else '#333' }};
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>{{ content.hero_title or 'Título' }}</h1>
|
||||
<p>{{ content.hero_description or 'Descripción' }}</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
132
backups/backup-20260114-085602/raspberry/templates/register.html
Normal file
132
backups/backup-20260114-085602/raspberry/templates/register.html
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Registro - Demo</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
h1 { margin-bottom: 20px; color: #333; }
|
||||
input, select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.btn:hover { background: #5568d3; }
|
||||
a { color: #667eea; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>📝 Registrarse</h1>
|
||||
<form id="registerForm">
|
||||
<input type="email" id="email" placeholder="Email" required>
|
||||
<input type="password" id="password" placeholder="Contraseña" required>
|
||||
<select id="plan">
|
||||
<option value="base" {% if plan == 'base' %}selected{% endif %}>Base</option>
|
||||
<option value="pro" {% if plan == 'pro' %}selected{% endif %}>Pro</option>
|
||||
<option value="premium" {% if plan == 'premium' %}selected{% endif %}>Premium</option>
|
||||
</select>
|
||||
<select id="rubro">
|
||||
<option value="gimnasio" {% if rubro == 'gimnasio' or rubro == 'gimnasios' %}selected{% endif %}>Gimnasio</option>
|
||||
<option value="restaurante" {% if rubro == 'restaurante' %}selected{% endif %}>Restaurante</option>
|
||||
<option value="danza" {% if rubro == 'danza' %}selected{% endif %}>Danza</option>
|
||||
<option value="cosmeticos" {% if rubro == 'cosmeticos' %}selected{% endif %}>Cosméticos</option>
|
||||
<option value="despachos" {% if rubro == 'despachos' %}selected{% endif %}>Despachos</option>
|
||||
<option value="educacion" {% if rubro == 'educacion' %}selected{% endif %}>Educación</option>
|
||||
<option value="tienda" {% if rubro == 'tienda' %}selected{% endif %}>Tienda</option>
|
||||
</select>
|
||||
<button type="submit" class="btn">Registrarse</button>
|
||||
</form>
|
||||
<p style="text-align: center; margin-top: 15px;">
|
||||
<a href="/login">¿Ya tienes cuenta? Inicia sesión</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('registerForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const plan = document.getElementById('plan').value;
|
||||
const rubro = document.getElementById('rubro').value;
|
||||
|
||||
if (!email || !password) {
|
||||
alert('❌ Por favor completa email y contraseña');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
email: email,
|
||||
password: password,
|
||||
plan: plan,
|
||||
rubro: rubro
|
||||
};
|
||||
|
||||
console.log('Enviando registro:', data);
|
||||
|
||||
try {
|
||||
const res = await fetch('/register', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
console.log('Respuesta del servidor:', res.status, res.statusText);
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = await res.json();
|
||||
} catch (e) {
|
||||
// Si no es JSON, el servidor devolvió HTML (error 500)
|
||||
const text = await res.text();
|
||||
console.error('❌ Servidor devolvió HTML en vez de JSON:', text.substring(0, 200));
|
||||
alert('❌ Error del servidor. Revisa la consola para más detalles.');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Resultado:', result);
|
||||
|
||||
if (result.success) {
|
||||
// Registro exitoso - mostrar mensaje y redirigir al login
|
||||
alert(result.message || '✅ Registro exitoso. Por favor inicia sesión.');
|
||||
window.location.href = result.redirect || '/login';
|
||||
} else {
|
||||
alert('❌ Error: ' + (result.error || 'Error al registrarse'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error en registro:', error);
|
||||
alert('❌ Error de conexión. Verifica la consola para más detalles.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user