# La Tienda de Yellito — Sitio web (Hostinger + PHP + MySQL)

Dos páginas:

- **`index.html`** — la página pública, con los anuncios de tus clientes.
- **`admin.html`** — el panel donde tu equipo entra con correo y contraseña a administrar los anuncios.

El sitio ya no depende de Firebase: usa una base de datos **MySQL** y un **API en PHP** (carpeta `api/`), pensado para hosting compartido de Hostinger.

---

## 1. Sube los archivos

Sube TODA esta carpeta (tal cual, con `api/`, `css/`, `js/`, `assets/`) a la carpeta pública de tu hosting en Hostinger — normalmente `public_html`. Puedes usar el Administrador de archivos de hPanel, o FTP.

## 2. Crea la base de datos MySQL

1. En hPanel → **Bases de datos → Bases de datos MySQL** → crea una base de datos y un usuario, y anota: nombre de la base, usuario y contraseña.
2. Entra a **phpMyAdmin** desde hPanel, selecciona tu base de datos, ve a la pestaña **Importar**, y sube el archivo `api/schema.sql` que ya está en el proyecto. Esto crea las tablas y deja 3 categorías de ejemplo (Comida, Tiendas, Servicios).

## 3. Conecta el API a tu base de datos

Abre `api/config.php` y rellena estos 4 datos con los que anotaste en el paso anterior:

```php
define('DB_HOST', 'localhost');
define('DB_NAME', 'TU_BASE_DE_DATOS_AQUI');
define('DB_USER', 'TU_USUARIO_AQUI');
define('DB_PASS', 'TU_CONTRASEÑA_AQUI');
```

`DB_HOST` casi siempre es `localhost` en hosting compartido de Hostinger.

## 4. Crea las cuentas de tu equipo

1. Abre en tu navegador: `tudominio.com/api/crear-usuario.php?clave=cambia-esto-por-una-clave-tuya-123`
2. Antes de usarlo, edita `api/crear-usuario.php` y cambia `$CLAVE_DE_SETUP` por una clave tuya (para que nadie más pueda crear cuentas).
3. Llena el formulario con el correo y contraseña de cada persona de tu equipo que va a administrar la página. Repite por cada persona.
4. **Importante:** cuando termines de crear las cuentas que necesitas, borra `api/crear-usuario.php` del servidor (o dile a tu equipo que solo tú tienes esa clave).

## 5. Entra al panel

Ve a `tudominio.com/admin.html`, entra con uno de los correos que creaste, y ya puedes crear tus anuncios y categorías reales. Los cambios no se ven en la página pública hasta que le das **"Publicar cambios"**.

---

## Cómo funciona "Publicar cambios"

Todo lo que creas, editas o marcas para eliminar en el panel se queda primero en un **borrador** local en tu navegador. La página pública no cambia hasta que le das clic a **Publicar cambios** y confirmas — ahí sí se escribe todo de una vez en la base de datos. Si recargas `admin.html` antes de publicar, el borrador se pierde (lo ya publicado no se ve afectado).

## El video de Instagram

En el campo **"Video de Instagram"** del formulario de anuncio, pega el link del post o reel (ej. `https://www.instagram.com/reel/XXXXXXX/`). Cualquier anuncio publicado que tenga ese campo lleno aparece automáticamente en la fila de "Anuncios con video" de la página pública, además de en el detalle del anuncio.

## Tamaño y posición de los anuncios

- **Tamaño**: Chico, Mediano o Grande — controla cuánto espacio ocupa la tarjeta en el mosaico de la página pública.
- **Posición**: cada anuncio tiene un número de orden; también puedes usar las flechas ▲▼ en la lista del panel para subir o bajar un anuncio.

---

## Estructura de archivos

```
index.html                Página pública
admin.html                Panel de administración
css/style.css              Estilos de la página pública
css/admin.css              Estilos del panel
js/data.js                  Habla con el API en api/ (antes hablaba con Firebase)
js/main.js                  Lógica de la página pública
js/admin.js                 Lógica del panel de administración
api/config.php              ⚠️ Aquí pones los datos de tu base de datos MySQL
api/schema.sql               Estructura de la base de datos (impórtalo en phpMyAdmin)
api/crear-usuario.php        Crea cuentas del equipo (bórralo después de usarlo)
api/login.php, logout.php, me.php    Sesión del panel
api/categorias.php           API de categorías
api/anuncios.php             API de anuncios
api/solicitudes.php          API de solicitudes del formulario "Anúnciate"
api/upload.php               Sube las imágenes de los anuncios
assets/img/                 Logo e imágenes de ejemplo
assets/img/anuncios/         Aquí se guardan las imágenes que subas desde el panel
```