220 lines
7.8 KiB
HTML
220 lines
7.8 KiB
HTML
<!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>
|