Editor Miniweb
Configuració visual i contingut de la miniweb per negoci
Sense carregar

⚠️ Recordatori de desenvolupament

Quan modifiquis la miniweb pública (frontend):

Exemple:

<link rel="stylesheet" href="./styles.css?v=11">
<script src="./app.js?v=11"></script>
const SW_VERSION = "agora-v2";

⚠️ Si no es fa això, el navegador o la PWA poden mostrar versions antigues (cache).

Guia ràpida de configuració

Per configurar un negoci correctament, primer completa les dades bàsiques al formulari de reserves i després acaba la part visual i de contingut aquí, a la miniweb.

Omplir al formulari de reserves

Aquests camps són obligatoris i es fan servir també a la miniweb:

  • Nom del negoci
  • Telèfon
  • Email
  • Direcció
  • Horari
Obrir editor del formulari

Omplir a la miniweb

Aquí configures la part visual i comercial: slug, publicació, logo, portada, WhatsApp públic, Google Maps, web externa, xarxes socials, textos per idioma, promo, tema visual, PWA i visibilitat dels blocs.

Negoci

Escriu per buscar negocis.

URL pública i QR

Obrir miniweb
Miniweb del negoci
Escaneja per obrir la miniweb

Dades generals

Textos per idioma

Tema visual miniweb

Generar colores desde 1 color base

Usa siempre 3 colores principales derivados del color base.
El resto del diseño puede usar: - #ffffff (fondos) - #000000 (textos) - #999999 (placeholder)

Copia este bloque, cambia el color base y pégalo en ChatGPT: 
Color base: #XXXXXX

1. Genera SOLO estos 3 colores en HSL y HEX:
- Base (sin cambios)
- Claro (menos saturación, más luminosidad)
- Muy claro (mínima saturación, máxima luminosidad)

Reglas:
- Mantener el mismo hue (H)
- Claro: ~20–30% saturación, ~90–95% luminosidad
- Muy claro: ~5–15% saturación, ~96–98% luminosidad

2. Después, usando esos 3 colores, genera una paleta UI completa con:
- Fondo tarjeta
- Fondo inputs
- Texto principal
- Texto inputs
- Labels
- Placeholder
- Bordes
- Slot fondo / texto / activo
- Botón / hover / texto

Prioridad:
→ Usar SOLO los 3 colores generados
→ Blanco y negro solo si es necesario para contraste

Devuelve:
1. Los 3 colores (HSL + HEX)
2. La paleta completa lista para usar

Galeria