Modularización de GKACHELE SaaS
This commit is contained in:
gkachele
219
demo/templates/client_admin.html
Normal file
219
demo/templates/client_admin.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Administración del Sitio</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
margin: 0;
|
||||
background: #f0f0f1;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
color: #3c434a;
|
||||
}
|
||||
|
||||
/* Sidebar similar a WP */
|
||||
.sidebar {
|
||||
width: 160px;
|
||||
background: #1d2327;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sidebar-header {
|
||||
padding: 10px 0 10px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.menu-item {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: #f0f0f1;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
border-left: 4px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item:hover, .menu-item.active {
|
||||
background: #2c3338;
|
||||
color: #72aee6;
|
||||
border-left-color: #72aee6;
|
||||
}
|
||||
.menu-item i { margin-right: 8px; width: 16px; text-align: center; }
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Top Bar */
|
||||
.top-bar {
|
||||
height: 32px;
|
||||
background: #1d2327;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.top-bar a { color: #fff; text-decoration: none; margin-left: 20px; }
|
||||
.top-bar a:hover { color: #72aee6; }
|
||||
|
||||
/* Content Area */
|
||||
.wp-content {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
h1 { font-size: 23px; font-weight: 400; margin: 0 0 20px 0; padding: 0; }
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #c3c4c7;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 800px;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.04);
|
||||
}
|
||||
|
||||
.welcome-panel {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border: 1px solid #c3c4c7;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #2271b1;
|
||||
border-color: #2271b1;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-primary:hover { background: #135e96; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||||
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #f0f0f1; }
|
||||
th { font-weight: 600; }
|
||||
.status-badge {
|
||||
background: #f0f0f1;
|
||||
color: #646970;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-badge.published { background: #edfaef; color: #008a20; }
|
||||
.status-badge.pending { background: #fff8e5; color: #996800; }
|
||||
</style>
|
||||
<!-- FontAwesome simplificado para iconos -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<i class="fab fa-wordpress-simple"></i> GKACHELE
|
||||
</div>
|
||||
<a href="#" class="menu-item active"><i class="fas fa-tachometer-alt"></i> Escritorio</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-thumbtack"></i> Entradas</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-images"></i> Medios</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-file-alt"></i> Páginas</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-paint-brush"></i> Apariencia</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-plug"></i> Plugins</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-users"></i> Usuarios</a>
|
||||
<a href="#" class="menu-item"><i class="fas fa-cog"></i> Ajustes</a>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Top Bar -->
|
||||
<div class="top-bar">
|
||||
<div>
|
||||
<a href="/"><i class="fas fa-home"></i> Ir al sitio</a>
|
||||
</div>
|
||||
<div>
|
||||
<span>Hola, {{ user_email }}</span>
|
||||
<a href="/logout">Salir</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- WP Content -->
|
||||
<div class="wp-content">
|
||||
<h1>Escritorio</h1>
|
||||
|
||||
<div class="welcome-panel">
|
||||
<div>
|
||||
<h2 style="margin-top: 0;">¡Te damos la bienvenida a tu panel!</h2>
|
||||
<p style="color: #646970;">Aquí puedes gestionar todos tus sitios y contenidos de forma profesional.</p>
|
||||
</div>
|
||||
<button class="btn-primary" onclick="window.location.href='/dashboard/create'">+ Crear Nuevo Sitio</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3><i class="fas fa-globe"></i> Tus Sitios Web</h3>
|
||||
{% if not sites %}
|
||||
<p>No tienes sitios creados. ¡Empieza ahora!</p>
|
||||
{% else %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nombre (Slug)</th>
|
||||
<th>Tema</th>
|
||||
<th>Estado</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for site in sites %}
|
||||
<tr>
|
||||
<td><strong>{{ site.slug }}</strong></td>
|
||||
<td>{{ site.theme }}</td>
|
||||
<td><span class="status-badge {{ site.status }}">{{ site.status|upper }}</span></td>
|
||||
<td>
|
||||
<a href="/customizer/{{ site.id }}" class="btn-primary" style="padding: 4px 8px; font-size: 11px;">Personalizar</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3><i class="fas fa-chart-line"></i> Estadísticas Rápidas</h3>
|
||||
<div style="display: flex; gap: 20px;">
|
||||
<div>
|
||||
<span style="font-size: 24px; font-weight: bold;">{{ sites|length }}</span><br>
|
||||
<span style="color: #646970;">Sitios</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: 24px; font-weight: bold;">{{ user_plan|upper }}</span><br>
|
||||
<span style="color: #646970;">Plan Actual</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user