megaofertas/admin.html at main · fr0st87/megaofertas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="robots" content="noindex, nofollow">
  <title>MegaOfertas — Administración</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body class="admin-body">

<div id="admin-gate" class="admin-gate">
  <div class="admin-gate-box">
    <p class="admin-gate-back"><a href="index.html" class="link-store">← Volver a la tienda</a></p>
    <h2 class="admin-gate-title">Acceso administración</h2>
    <p id="admin-login-msg" class="muted gate-msg"></p>
    <form id="admin-login-form" class="admin-login-form">
      <label class="gate-label">
        Correo electrónico
        <input type="email" id="admin-login-email" name="email" autocomplete="email" placeholder="tu@correo.com" required>
      </label>
      <label class="gate-label">
        Contraseña
        <input type="password" id="admin-login-pass" name="password" autocomplete="current-password" required>
      </label>
      <button type="submit" class="btn-primary gate-btn">Entrar</button>
    </form>
  </div>
</div>

<div id="admin-authed" class="hidden">
  <header class="header">
    <a href="index.html" class="logo">🏷️ MegaOfertas</a>
    <nav class="admin-nav">
      <a href="index.html" class="link-store">← Volver a la tienda</a>
      <button type="button" class="btn-secondary btn-small" id="admin-logout">Cerrar sesión</button>
    </nav>
  </header>

  <main class="admin-main">
    <div id="admin-insecure-banner" class="admin-insecure-banner hidden">
      Modo desarrollo: no configuraste <code>admin-auth.js</code>. En GitHub Pages es obligatorio poner el hash SHA-256 de tu contraseña.
    </div>

    <h1 class="admin-title">Panel de administración</h1>
    <p id="admin-user-info" class="admin-user-info muted hidden"></p>
    <p class="admin-intro muted">Imágenes recomendadas: subilas al repo en <code>img/productos/</code> y usá la ruta relativa (ej. <code>img/productos/tv.jpg</code>). El catálogo sigue guardándose en el navegador de cada visitante (localStorage); para un catálogo único público habría que versionar datos en el repositorio o usar backend.</p>

    <section class="admin-panel">
      <h2>Categorías</h2>
      <form id="cat-form" class="admin-form">
        <input type="hidden" id="cat-editing-id" value="">
        <label>
          Nombre
          <input type="text" id="cat-name" required placeholder="Ej. Audio" maxlength="80">
        </label>
        <button type="submit" class="btn-primary" id="cat-submit">Añadir categoría</button>
      </form>
      <ul id="cat-list" class="admin-list"></ul>
    </section>

    <section class="admin-panel">
      <h2>Productos</h2>
      <form id="prod-form" class="admin-form admin-form-grid">
        <input type="hidden" id="prod-id" value="">
        <label>
          Código del producto (CP-REF-001)
          <input type="text" id="prod-code" required placeholder="CP-REF-001" maxlength="12" pattern="[A-Z]{2}-[A-Z]{3}-\d{3}" title="Formato: XX-XXX-NNN (ej: CP-REF-001)">
        </label>
        <label class="code-validation" id="code-validation-msg" style="display: none;"></label>
        <label>
          Nombre
          <input type="text" id="prod-name" required placeholder="Ej. Auriculares Bluetooth" maxlength="120">
        </label>
        <label>
          Precio
          <input type="number" id="prod-price" required min="0" step="0.01" placeholder="0">
        </label>
        <label>
          Moneda
          <select id="prod-currency" required>
            <option value="USD">USD ($)</option>
            <option value="CUP">CUP (₱)</option>
          </select>
        </label>
        <label>
          Categoría
          <select id="prod-category"></select>
        </label>
        <label class="full-width">
          Descripción (visible en la tienda)
          <textarea id="prod-description" maxlength="2000" placeholder="Características breves del producto…"></textarea>
        </label>
        <label class="admin-checkbox full-width">
          <input type="checkbox" id="prod-featured">
          Destacar en la página de inicio (solo uno recomendado)
        </label>
        <label>
          Stock (vacío = ilimitado)
          <input type="number" id="prod-stock" min="0" step="1" placeholder="Ej. 10">
        </label>
        <label class="full-width">
          Ruta de imagen local
          <input type="text" id="prod-image-url" placeholder="img/productos/mi-foto.jpg">
        </label>
        <p class="muted full-width field-hint">Subí la imagen a la carpeta <code>img/productos/</code> en tu repositorio y escribí la ruta relativa (ej: <code>img/productos/tv.jpg</code>).</p>
        <div class="image-preview-wrap full-width">
          <img id="prod-image-preview" class="admin-preview hidden" alt="Vista previa">
          <button type="button" class="btn-secondary btn-small" id="prod-clear-image">Quitar imagen nueva</button>
        </div>
        <div class="form-actions full-width">
          <button type="submit" class="btn-primary" id="prod-submit">Añadir producto</button>
          <button type="button" class="btn-secondary hidden" id="prod-cancel">Cancelar edición</button>
        </div>
      </form>
      <ul id="prod-list" class="admin-list"></ul>
    </section>
  </main>
</div>

<script src="site-config.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script src="supabase-config.js"></script>
<script src="store.js"></script>
<script src="supabase-auth.js"></script>
<script src="admin.js"></script>
</body>
</html>