Modularización de GKACHELE SaaS
This commit is contained in:
gkachele
113
backups/backup-20260114-085602/local/demo/templates/admin.html
Normal file
113
backups/backup-20260114-085602/local/demo/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,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Admin - Cliente</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: #f0f0f1;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
background: white;
|
||||
padding: 20px 30px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.header h1 {
|
||||
color: #1d2327;
|
||||
font-size: 24px;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-size: 14px;
|
||||
color: #50575e;
|
||||
}
|
||||
.tab.active {
|
||||
color: #2271b1;
|
||||
border-bottom-color: #2271b1;
|
||||
}
|
||||
.tab-content {
|
||||
display: none;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
background: #2271b1;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn:hover { background: #135e96; }
|
||||
.btn-danger { background: #d63638; }
|
||||
.btn-danger:hover { background: #b32d2e; }
|
||||
.btn-success { background: #00a32a; }
|
||||
.btn-success:hover { background: #008a20; }
|
||||
.upload-area {
|
||||
border: 2px dashed #c3c4c7;
|
||||
border-radius: 4px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
background: #f6f7f7;
|
||||
}
|
||||
.upload-area:hover {
|
||||
border-color: #2271b1;
|
||||
background: #f0f6fc;
|
||||
}
|
||||
.media-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.media-item {
|
||||
position: relative;
|
||||
border: 1px solid #c3c4c7;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
.media-item img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.media-item .actions {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
background: #f6f7f7;
|
||||
}
|
||||
.media-item .actions button {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #1d2327;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #8c8f94;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
border-color: #2271b1;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px #2271b1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>⚙️ Panel de Administración</h1>
|
||||
<div>
|
||||
<a href="/dashboard" class="btn">← Volver al Dashboard</a>
|
||||
<a href="/logout" class="btn btn-danger">Salir</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab('media')">📷 Media</button>
|
||||
<button class="tab" onclick="showTab('settings')">⚙️ Configuración</button>
|
||||
<button class="tab" onclick="showTab('sites')">🌐 Mis Sitios</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab Media -->
|
||||
<div id="tab-media" class="tab-content active">
|
||||
<h2>Gestionar Imágenes</h2>
|
||||
<div class="upload-area" onclick="document.getElementById('fileInput').click()">
|
||||
<p style="font-size: 18px; color: #50575e; margin-bottom: 10px;">📤 Arrastra imágenes aquí o haz clic para subir</p>
|
||||
<p style="font-size: 12px; color: #8c8f94;">Formatos: JPG, PNG, GIF (máx. 5MB)</p>
|
||||
<input type="file" id="fileInput" multiple accept="image/*" onchange="uploadFiles(this.files)">
|
||||
</div>
|
||||
<div id="mediaGrid" class="media-grid">
|
||||
<!-- Las imágenes se cargarán aquí -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Configuración -->
|
||||
<div id="tab-settings" class="tab-content">
|
||||
<h2>Configuración de Cuenta</h2>
|
||||
<form id="settingsForm">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" id="user_email" value="{{ user_email }}" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Plan</label>
|
||||
<input type="text" id="user_plan" value="{{ user_plan }}" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Cambiar Contraseña</label>
|
||||
<input type="password" id="new_password" placeholder="Nueva contraseña">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">💾 Guardar Cambios</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Tab Sitios -->
|
||||
<div id="tab-sites" class="tab-content">
|
||||
<h2>Mis Sitios</h2>
|
||||
<div style="display: grid; gap: 15px; margin-top: 20px;">
|
||||
{% for site in sites %}
|
||||
<div style="background: #f6f7f7; padding: 15px; border-radius: 4px; border: 1px solid #c3c4c7;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<h3 style="margin-bottom: 5px;">{{ site.slug }}</h3>
|
||||
<p style="color: #50575e; font-size: 14px;">Tema: {{ site.theme }} | Estado: <span style="padding: 3px 8px; background: {% if site.status == 'published' %}#00a32a{% elif site.status == 'pending' %}#dba617{% else %}#d63638{% endif %}; color: white; border-radius: 3px; font-size: 12px;">{{ site.status }}</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/customizer/{{ site.id }}" class="btn">✏️ Editar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showTab(tabName) {
|
||||
// Ocultar todos los tabs
|
||||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
document.querySelectorAll('.tab').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
|
||||
// Mostrar el tab seleccionado
|
||||
document.getElementById('tab-' + tabName).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
function uploadFiles(files) {
|
||||
const formData = new FormData();
|
||||
for (let file of files) {
|
||||
formData.append('files', file);
|
||||
}
|
||||
|
||||
fetch('/api/admin/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('✅ Imágenes subidas correctamente');
|
||||
loadMedia();
|
||||
} else {
|
||||
alert('❌ Error: ' + data.error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadMedia() {
|
||||
fetch('/api/admin/media')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const grid = document.getElementById('mediaGrid');
|
||||
grid.innerHTML = '';
|
||||
data.media.forEach(item => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'media-item';
|
||||
div.innerHTML = `
|
||||
<img src="/uploads/${item.filename}" alt="${item.filename}">
|
||||
<div class="actions">
|
||||
<button class="btn" onclick="copyUrl('${item.filename}')">📋 URL</button>
|
||||
<button class="btn btn-danger" onclick="deleteMedia(${item.id})">🗑️</button>
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(div);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function copyUrl(filename) {
|
||||
const url = window.location.origin + '/uploads/' + filename;
|
||||
navigator.clipboard.writeText(url);
|
||||
alert('✅ URL copiada: ' + url);
|
||||
}
|
||||
|
||||
function deleteMedia(id) {
|
||||
if (confirm('¿Eliminar esta imagen?')) {
|
||||
fetch(`/api/admin/media/${id}`, {method: 'DELETE'})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
loadMedia();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Cargar media al iniciar
|
||||
loadMedia();
|
||||
|
||||
// Guardar configuración
|
||||
document.getElementById('settingsForm').addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const password = document.getElementById('new_password').value;
|
||||
if (password) {
|
||||
fetch('/api/admin/settings', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({password: password})
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('✅ Contraseña actualizada');
|
||||
document.getElementById('new_password').value = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</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,108 @@
|
||||
<!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 Panel de Control</h1>
|
||||
<div>
|
||||
<a href="/dashboard/admin" class="btn" style="background: #28a745;">⚙️ Admin</a>
|
||||
<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' %}
|
||||
<button onclick="submitSite({{ site.id }})" class="btn" style="background: #ff9800; border: none; cursor: pointer;">📤 Enviar</button>
|
||||
{% 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>
|
||||
|
||||
<script>
|
||||
function submitSite(siteId) {
|
||||
if (confirm('¿Enviar sitio para aprobación?')) {
|
||||
fetch(`/dashboard/submit/${siteId}`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'}
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
alert('✅ Sitio enviado para aprobación');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('❌ Error: ' + (data.error || 'Error al enviar'));
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error:', err);
|
||||
alert('❌ Error de conexión');
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,91 @@
|
||||
<!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)
|
||||
});
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = await res.json();
|
||||
} catch (e) {
|
||||
const text = await res.text();
|
||||
console.error('❌ Servidor devolvió HTML:', text.substring(0, 200));
|
||||
alert('❌ Error del servidor. Revisa la consola.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
window.location.href = result.redirect || '/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>
|
||||
@@ -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