Maintenance Page — Hawkers Co.

Página de mantenimiento mostrada durante despliegues o caídas del sitio. Es un archivo HTML autocontenido: el logotipo es un SVG inline y la imagen de fondo está embebida como Base64 directamente en el CSS, por lo que no necesita conexión al servidor de assets para renderizarse correctamente.

La única dependencia externa es la tipografía Syne cargada desde Google Fonts.

Estructura visual

┌─────────────────────────────────────┐
│           .header                   │  Logo Hawkers (SVG inline, 200px)
│                                     │
│           .content                  │  Imagen fotográfica a pantalla completa
│                                     │  (base64 en background-image)
│                                     │
│  ┌──── .text-wrapper ────────────┐  │  Texto superpuesto en la parte inferior
│  │  .title                       │  │
│  │  .subtitle                    │  │
│  │  .paragraph / .link           │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

Dependencias externas

Recurso	URL	Cuándo carga
Fuente Syne (400, 700, 800)	`fonts.googleapis.com`	Al cargar la página
Preconnect	`fonts.gstatic.com`	Optimización de precarga

Sin conexión a Google Fonts

Si el servidor de fuentes no está disponible, el navegador usará la fuente de sistema por defecto. El layout no se rompe, pero el aspecto tipográfico cambia.

Clases CSS principales

Clase	Descripción
`.main`	Contenedor raíz. `100vw × 100vh`, `flex-direction: column`. Fondo negro (`#000`).
`.header`	Cabecera centrada con `padding: 24px`. Contiene el logo SVG.
`.logo`	Ancho del logo: `200px`.
`.content`	Área principal. `flex-grow: 1`, `justify-content: flex-end`, `align-items: center`. Imagen de fondo embebida como Base64 (`background-size: cover`, posición `top 40%`).
`.is-hidden`	Clase utilitaria: `display: none`. Usada para ocultar elementos condicionalmente.

Estructura HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Google Fonts: Syne -->
    <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=Syne:wght@400;700;800&display=swap"
          rel="stylesheet">

    <title>Hawkers - Maintenance page</title>
    <style>
      /* reset + layout */
      html, body {
        margin: 0; padding: 0;
        box-sizing: border-box;
        background-color: black;
      }
      .main {
        width: 100vw; height: 100vh;
        display: flex; flex-direction: column;
      }
      .header {
        padding: 24px;
        text-align: center;
      }
      .logo { width: 200px; }
      .content {
        flex-grow: 1;
        display: flex; flex-direction: column;
        justify-content: flex-end; align-items: center;
        background-size: cover;
        background-position-y: top;
        background-position-x: 40%;
        background-repeat: no-repeat;
        background-image: url('data:image/jpeg;base64,...'); /* imagen embebida */
      }
      .is-hidden { display: none; }
      /* ... estilos de texto superpuesto ... */
    </style>
  </head>
  <body>
    <div class="main">

      <!-- Cabecera con logo SVG inline -->
      <div class="header">
        <svg class="logo" ...> <!-- SVG Hawkers --> </svg>
      </div>

      <!-- Área de contenido con imagen de fondo y texto inferior -->
      <div class="content">
        <div class="text-wrapper">
          <p class="title">...</p>
          <p class="subtitle">...</p>
          <p class="paragraph">
            <a class="link" href="...">...</a>
          </p>
        </div>
      </div>

    </div>
  </body>
</html>

Imagen de fondo

La imagen está embebida directamente en el CSS como un data URI en formato JPEG Base64. Esto elimina la petición HTTP al servidor de assets pero aumenta el tamaño del archivo HTML.

background-image: url('data:image/jpeg;base64,/9j/4AAQ...');

Actualizar la imagen

Para cambiar la imagen de fondo, hay que convertir el nuevo JPEG a Base64 y sustituir el valor del data URI en el CSS. Herramientas como base64encode.org o el comando base64 -i imagen.jpg en terminal lo generan directamente.

Tipografía

Peso	Uso previsto
`400`	Texto de párrafo / link
`700`	Subtítulo
`800`	Título principal

La familia tipográfica es Syne, cargada con display=swap para que el texto sea visible mientras la fuente descarga.

Despliegue

1. Nombre de la carpeta

La carpeta que contiene el index.html debe llamarse exactamente www.hawkersco.com:

www.hawkersco.com/
└── index.html

2. Crear el ZIP

Comprime el contenido de la carpeta en un archivo llamado www.hawkersco.com.zip:

# Desde el directorio padre de la carpeta
zip -r www.hawkersco.com.zip www.hawkersco.com

3. Eliminar archivos ocultos

Asegúrate de que el ZIP no contiene archivos ocultos generados por macOS (.DS_Store, __MACOSX). Para crearlos limpios directamente desde terminal:

zip -r www.hawkersco.com.zip www.hawkersco.com \
  --exclude "*.DS_Store" \
  --exclude "__MACOSX/*" \
  --exclude "*/__MACOSX/*"

Archivos ocultos en el ZIP

Un ZIP con .DS_Store o __MACOSX puede causar errores al descomprimir en el servidor. Verifica el contenido antes de subir:

zipinfo www.hawkersco.com.zip

Estructura visual​

Dependencias externas​

Clases CSS principales​

Estructura HTML​

Imagen de fondo​

Tipografía​

Despliegue​

1. Nombre de la carpeta​

2. Crear el ZIP​

3. Eliminar archivos ocultos​