1	html {
2	color-scheme: light dark;
3	font-family: sans-serif;
4	}

1	const nombreDeServiceWorker = "sw.js"
2
3	try {
4	navigator.serviceWorker.register(nombreDeServiceWorker)
5	.then(registro => {
6	console.log(nombreDeServiceWorker, "registrado.")
7	console.log(registro)
8	})
9	.catch(error => console.log(error))
10	} catch (error) {
11	console.log(error)
12	}

1	"favicon.ico",
2	"index.html",
3	"site.webmanifest",
4	"css/estilos.css",
5	"img/icono2048.png",
6	"img/maskable_icon.png",
7	"img/maskable_icon_x128.png",
8	"img/maskable_icon_x192.png",
9	"img/maskable_icon_x384.png",
10	"img/maskable_icon_x48.png",
11	"img/maskable_icon_x512.png",
12	"img/maskable_icon_x72.png",
13	"img/maskable_icon_x96.png",
14	"img/screenshot_horizontal.png",
15	"img/screenshot_vertical.png",
16	"js/registraServiceWorker.js",

1	AddType application/manifest+json .webmanifest
2
3	ExpiresActive On
4
5	Header set Cache-Control "max-age=1, must-revalidate"
6

6. PWA con listas y Material Design 3 Expressive

Versión para imprimir.

A. Introduccion

En esta lección se presenta una PWA que despliega listas y usa Material Design 3 Expressive.
Puedes probar el ejemplo en https://gilpgpwal.github.io/.

B. Referencias

Sitios de Material Design
Material.io: Material Design es una guía de diseño para aplicaciones multiplataforma. La encuentras en https://m3.material.io/.
Herramienta para selección de colores
Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
Adaptación multiplataforma: La forma de adaptar Material Design en distintas plataformas está en https://material.io/design/platform-guidance/cross-platform-adaptation.html

C. Hazlo funcionar (con videos)

Prueba e instala, de preferencia con Chrome, el sitio https://gilpgpwal.github.io/.
Descarga el archivo /src/pwalista.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Crea los íconos del proyecto con https://www.photopea.com/.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Prueba tu PWA.
Publica tu PWA.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

D. Hazlo funcionar (texto)

Prueba e instala, de preferencia con Chrome, el sitio https://gilpgpwal.github.io/.
Descarga el archivo /src/pwalista.zip y descompáctalo.
Crea tu proyecto en GitHub pages:
1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
  - Mantén la selección Public.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
5. Entra al repositorio y selecciona ⚙️ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto. Si haces cambios, clic en Save.
6. En la misma pestaña de ⚙️ Settings selecciona ◯ Actions, luego selecciona General y en Actions permissions selecciona el rediobotón Allow xxxx, and select non-xxxx, actions and reusable workflows y abajo la casilla de verificación Allow actions created by GitHub y cliquea el botón Save.
Importa el proyecto de GitHub a Visual Studio Code:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo, excepto el archivo .htaccess.
Edita los archivos que desees.
Crea los íconos del proyecto con https://www.photopea.com/.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.
Haz al menos una captura de la ventana de tu aplicación con orientación vertical y otra con orientación horizontal, todas ellas de 320 px como mínimo y 3,840 px como máximo.
Coloca las capturas en la carpeta img y asegúrate de que estén declaradas en el archivo site.webmanifest.
Cuando desarrolles, es incómodo modificar la versión cada que realizas cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
5. En la Pestaña Aplicación (o Application en inglés) selecciona Archivo de manifiesto (o Manifest file en inglés). Esta herramienta analiza la estructura del archivo de manifiesto y te indica si hay un error.
6. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamiento en caché (o Cache storage en inglés). Aquí puedes revisar si el caché de la aplicación se llenó correctamente. En caso de que esté vacío, es que hubo algún error durante la carga y la app se ejecuta más lenta.
Cuando usas GitHub pages, antes de subir los archivos, no debes modificar el valor de VERSION en el archivo sw.js.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.
Si usas GitHub pages:
1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.
2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.
3. A partir de este momento, espera al menos 11 minutos para modificar el valor de VERSION en el archivo sw.js y volver a subir el proyecto.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

E. Archivos

Haz clic en los triángulos para expandir las carpetas

F. index.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">

 <title>PWA con Lista</title>

 <!-- Resumen para los motores de búsqueda. -->
 <meta name="description" content="Ejemplo de PWA con Material Design">

 <script type="module" src="js/lib/registraServiceWorker.js"></script>

 <meta name="viewport" content="width=device-width">

 <!-- Color de la barra de navegación de Chrome en dispositivos móviles. -->
 <meta name="theme-color" content="#fffbfe">

 <!-- Ícono para la página web, que normalmente se pone en la raíz del sitio.
  Puede ser diferente para cada página. -->
 <link rel="icon" sizes="32x32" href="favicon.ico">

 <!-- Configuración de la PWA para Chrome, Edge y Safari.
  Debe ponerse en todas las páginas. -->
 <link rel="manifest" href="site.webmanifest">

 <!-- Permite a los navegadores, que como Safari no soportan el estándar
  completo de custom elementsm, lo cumplan totalmente. Debe ponerse en todas
  las páginas. -->
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>
 <script type="module" src="js/nav-tab-fixed.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-tab.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-list.css">

</head>

<body>

 <md-app-bar class="centered" adicional="tab">

  <h1>PWA con Lista</h1>

 </md-app-bar>

 <nav-tab-fixed id="tab"></nav-tab-fixed>

 <section>

  <ul class="md-list">

   <li class="md-one-line">
    <span class="headline">
     Ciudad de México
    </span>
   </li>

   <li class="md-one-line">
    <span class="headline">
     Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
     illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
     alias!
    </span>
   </li>

   <li class="md-one-line icon">
    <span class="material-symbols-outlined">account_balance</span>
    <span class="headline">
     Atenas
    </span>
   </li>

   <li class="md-one-line avatar">
    <img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
    <span class="headline">
     Ana
    </span>
   </li>

   <li class="md-one-line image">
    <img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
    <span class="headline">
     Neza
    </span>
   </li>

   <li class="md-one-line video">
    <img alt="Ciudad de San Francisco"
      src="img/pexels-craig-dennis-3701822.jpg">
    <span class="headline">
     San Francisco
    </span>
   </li>

   <li class="md-one-line video">
    <img alt="Ciudad de San Francisco"
      src="img/pexels-craig-dennis-3701822.jpg">
    <span class="headline">
     Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
     illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
    </span>
   </li>

   <li>
    <a class="md-one-line image" target="_blank" rel="noopener noreferrer"
      href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
     <img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
     <span class="headline">
      Neza Link
     </span>
    </a>
   </li>

  </ul>

  <footer>
   <ul>
    <li>
     <p>
      <small>
       <a target="_blank" rel="noopener noreferrer"
         href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
        La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
        Haz clic en este hipervínculo para más información.
       </a>
      </small>
     </p>
    </li>
    <li>
     <p>
      <small>
       <a target="_blank" rel="noopener noreferrer"
         href="https://www.pinterest.com.mx/ludresi/">
        La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
        Pinterest. Haz clic en este hipervínculo para más información.
       </a>
      </small>
     </p>
    </li>
    <li>
     <p>
      <small>
       <a target="_blank" rel="noopener noreferrer"
         href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
        La foto del puente de San Francisco es de Craig Dennis, publicada en el
        sitio Pexels. Haz clic en este hipervínculo para más información.
       </a>
      </small>
     </p>
    </li>
   </ul>
  </footer>

 </section>

</body>

</html>

G. ayuda.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">

 <title>Ayuda - PWA con Lista</title>

 <script type="module" src="js/lib/registraServiceWorker.js"></script>

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>
 <script type="module" src="js/nav-tab-fixed.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-headline.css">
 <link rel="stylesheet" href="css/md-tab.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-list.css">

</head>

<body>

 <md-app-bar adicional="tab">

  <h1>Ayuda</h1>

 </md-app-bar>

 <nav-tab-fixed id="tab"></nav-tab-fixed>

 <section>

  <ul class="md-list">
   <li class="md-two-line">
    <span class="headline">
     Título
    </span>
    <span class="supporting">
     PWA con Material Design
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Descripción
    </span>
    <span class="supporting">
     Ejemplos de vistas móviles.
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Autor
    </span>
    <span class="supporting">
     Gilberto Pacheco Gallegos
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Derechos de autor
    </span>
    <span class="supporting">
     © 2025 Gilberto Pacheco Gallegos
    </span>
   </li>
   <li class="md-three-line">
    <span class="headline">
     Este software usa la librería para PWA
    </span>
    <span class="supporting">
     Esta obra de Gilberto Pacheco Gallegos está bajo una
     <a target="_blank" rel="license noreferrer"
       href="http://creativecommons.org/licenses/by/4.0/">
      Licencia Creative Commons Atribución 4.0 Internacional</a></span>
   </li>
   <li>
    <a class="md-three-line" target="_blank" rel=”noreferrer”
      href="https://fonts.google.com/icons">
     <span class="headline">
      También usa Material Symbols
     </span>
     <span class="supporting">
      Desarrollada por Google bajo licencia Apache 2.0
     </span>
    </a>
   </li>
  </ul>

 </section>

 <nav-drw></nav-drw>

</body>

</html>

H. site.webmanifest

Este archivo sirve para configurar los instaladores de la aplicación.

Explicación de las propiedades

short_name

Nombre corto. Normalmente se despliega en dispositivos móviles. Máximo 20 caracteres.

name

Nombre largo. Normalmente se despliega en computadoras de escritorio. Máximo 30 caracteres.

id

Identificador del archivo de instalación. Normalmente es la ruta del archivo inicial de la app.

start_url

Ruta del archivo inicial de la app.

display

Forma de mostrar la app. El término standalone significa que no se muestra la barra de navegación del navegador web.

theme_color

Color de la barra de estado (en dispositivos móviles) o de título (en computadoras de escritorio) de la app.

background_color

Color de fondo de la pantalla desplah en dispositivos móviles.

description

Describe el propósito de la aplicación. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

screenshots

Listado de máximo 8 capturas de pantalla. Aparecen en el cuadro de diálogo que muestra el navegador al instalar la app. Debes incluir al menos una con "form_factor": "wide" y otra con "form_factor": "narrow".

icons

Listado de íconos en distintas resoluciones para los instaladores de la app. Se selecciona el que se vea mejor según las característocas del dispositivo.

src

Url de la imagen dentro de la app.

sizes

Dimensiones en pixeles de la imagen, anchoxalto.

type

Tipo mime de la imagen.

purpose

Forma en que se usa la imagen.

maskable: La imagen puede recortarse de forma segura para tomar distintas formas, como círculos, gotas, cuadrados con esquinas redondeadas, etc. Normalmente se usa para dispositivos móviles.
any: No se puede asegurar nada sobre la imagen. Normalmente se usa para dispositivos de escritorio.

Normalmente debe proporcionarse un juego de íconos con purpose any y otro juego de íconos con purpose maskable.

form_factor

Orientación de una screenshot.

wide: La screenshot tiene una orientación horizontal. Normalmente la creenshot se usa para dispositivos de escritorio.
narrow: La screenshot tiene una orientación vertical. Normalmente la creenshot se usa para dispositivos móviles.

Debes incluir al menos una screenshot con "form_factor": "wide" y otra con "form_factor": "narrow".

label

Descripción de una screenshot. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

{
 "short_name": "Lista PWA",
 "name": "PWA con Lista",
 "id": "/index.html",
 "start_url": "/index.html",
 "display": "standalone",
 "theme_color": "#fffbfe",
 "background_color": "#fffbfe",
 "display_override": [
  "window-controls-overlay"
 ],
 "description": "Ejemplos de una lista con Material Design 3.",
 "screenshots": [
  {
   "src": "/img/screenshot_horizontal.png",
   "sizes": "699x389",
   "type": "image/png",
   "form_factor": "wide",
   "label": "Lista con Material Design 3."
  },
  {
   "src": "/img/screenshot_vertical.png",
   "sizes": "502x636",
   "type": "image/png",
   "form_factor": "narrow",
   "label": "Lista con Material Design 3. (2)"
  }
 ],
 "icons": [
  {
   "purpose": "maskable",
   "sizes": "2730x2730",
   "src": "img/maskable_icon.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "48x48",
   "src": "img/maskable_icon_x48.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "72x72",
   "src": "img/maskable_icon_x72.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "96x96",
   "src": "img/maskable_icon_x96.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "128x128",
   "src": "img/maskable_icon_x128.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "192x192",
   "src": "img/maskable_icon_x192.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "384x384",
   "src": "img/maskable_icon_x384.png",
   "type": "image/png"
  },
  {
   "purpose": "maskable",
   "sizes": "512x512",
   "src": "img/maskable_icon_x512.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "2730x2730",
   "src": "img/maskable_icon.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "48x48",
   "src": "img/maskable_icon_x48.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "72x72",
   "src": "img/maskable_icon_x72.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "96x96",
   "src": "img/maskable_icon_x96.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "128x128",
   "src": "img/maskable_icon_x128.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "192x192",
   "src": "img/maskable_icon_x192.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "384x384",
   "src": "img/maskable_icon_x384.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "512x512",
   "src": "img/maskable_icon_x512.png",
   "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "2048x2048",
   "src": "img/icono2048.png",
   "type": "image/png"
  }
 ]
}

I. sw.js

/* Este archivo debe estar colocado en la carpeta raíz del sitio.
 * 
 * Cualquier cambio en el contenido de este archivo hace que el service
 * worker se reinstale. */

/**
 * Cambia el número de la versión cuando cambia el contenido de los
 * archivos.
 * 
 * El número a la izquierda del punto (.), en este caso <q>1</q>, se
 * conoce como número mayor y se cambia cuando se realizan
 * modificaciones grandes o importantes.
 * 
 * El número a la derecha del punto (.), en este caso <q>00</q>, se
 * conoce como número menor y se cambia cuando se realizan
 * modificaciones menores.
 */
const VERSION = "1.00"

/**
 * Nombre de la carpeta de caché.
 */
const CACHE = "pwamd"

/**
 * Archivos requeridos para que la aplicación funcione fuera de
 * línea.
 */
const ARCHIVOS = [
 "ayuda.html",
 "favicon.ico",
 "index.html",
 "site.webmanifest",
 "css/baseline.css",
 "css/colors.css",
 "css/elevation.css",
 "css/estilos.css",
 "css/material-symbols-outlined.css",
 "css/md-headline.css",
 "css/md-list.css",
 "css/md-tab.css",
 "css/motion.css",
 "css/palette.css",
 "css/roboto.css",
 "css/shape.css",
 "css/state.css",
 "css/transicion_pestanas.css",
 "css/typography.css",
 "css/theme/dark.css",
 "css/theme/light.css",
 "fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
 "fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
 "fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
 "fonts/roboto-v32-latin-regular.woff2",
 "img/Escultura_de_coyote.jpeg",
 "img/icono2048.png",
 "img/maskable_icon.png",
 "img/maskable_icon_x128.png",
 "img/maskable_icon_x192.png",
 "img/maskable_icon_x384.png",
 "img/maskable_icon_x48.png",
 "img/maskable_icon_x512.png",
 "img/maskable_icon_x72.png",
 "img/maskable_icon_x96.png",
 "img/pexels-craig-dennis-3701822.jpg",
 "img/pexels-moises-patrício-10961948.jpg",
 "img/screenshot_horizontal.png",
 "img/screenshot_vertical.png",
 "js/nav-tab-fixed.js",
 "js/lib/ES_APPLE.js",
 "js/lib/getAttribute.js",
 "js/lib/querySelector.js",
 "js/lib/registraServiceWorker.js",
 "js/lib/resaltaSiEstasEn.js",
 "js/lib/custom/md-app-bar.js",
 "ungap/custom-elements.js",
 "/"
]

// Verifica si el código corre dentro de un service worker.
if (self instanceof ServiceWorkerGlobalScope) {
 // Evento al empezar a instalar el servide worker,
 self.addEventListener("install",
  (/** @type {ExtendableEvent} */ evt) => {
   console.log("El service worker se está instalando.")
   evt.waitUntil(llenaElCache())
  })

 // Evento al solicitar información a la red.
 self.addEventListener("fetch", (/** @type {FetchEvent} */ evt) => {
  if (evt.request.method === "GET") {
   evt.respondWith(buscaLaRespuestaEnElCache(evt))
  }
 })

 // Evento cuando el service worker se vuelve activo.
 self.addEventListener("activate",
  () => console.log("El service worker está activo."))
}

async function llenaElCache() {
 console.log("Intentando cargar caché:", CACHE)
 // Borra todos los cachés.
 const keys = await caches.keys()
 for (const key of keys) {
  await caches.delete(key)
 }
 // Abre el caché de este service worker.
 const cache = await caches.open(CACHE)
 // Carga el listado de ARCHIVOS.
 await cache.addAll(ARCHIVOS)
 console.log("Cache cargado:", CACHE)
 console.log("Versión:", VERSION)
}

/** @param {FetchEvent} evt */
async function buscaLaRespuestaEnElCache(evt) {
 // Abre el caché.
 const cache = await caches.open(CACHE)
 const request = evt.request
 /* Busca la respuesta a la solicitud en el contenido del caché, sin
  * tomar en cuenta la parte después del símbolo "?" en la URL. */
 const response = await cache.match(request, { ignoreSearch: true })
 if (response === undefined) {
  /* Si no la encuentra, empieza a descargar de la red y devuelve
   * la promesa. */
  return fetch(request)
 } else {
  // Si la encuentra, devuelve la respuesta encontrada en el caché.
  return response
 }
}

J. Carpeta « css »

Versión para imprimir.

A. css / baseline.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

@import url(palette.css);
@import url(typography.css);
@import url(colors.css);
@import url(shape.css);
@import url(motion.css);
@import url(state.css);
@import url(elevation.css);
@import url(theme/light.css) screen and (prefers-color-scheme: light);
@import url(theme/dark.css) screen and (prefers-color-scheme: dark);


B. css / colors.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

.primary {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.on-primary {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-on-primary);
}
.primary-container {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
}
.on-primary-container {
  color: var(--md-sys-color-primary-container);
  background-color: var(--md-sys-color-on-primary-container);
}
.secondary {
  color: var(--md-sys-color-on-secondary);
  background-color: var(--md-sys-color-secondary);
}
.on-secondary {
  color: var(--md-sys-color-secondary);
  background-color: var(--md-sys-color-on-secondary);
}
.secondary-container {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
.on-secondary-container {
  color: var(--md-sys-color-secondary-container);
  background-color: var(--md-sys-color-on-secondary-container);
}
.tertiary {
  color: var(--md-sys-color-on-tertiary);
  background-color: var(--md-sys-color-tertiary);
}
.on-tertiary {
  color: var(--md-sys-color-tertiary);
  background-color: var(--md-sys-color-on-tertiary);
}
.tertiary-container {
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
}
.on-tertiary-container {
  color: var(--md-sys-color-tertiary-container);
  background-color: var(--md-sys-color-on-tertiary-container);
}
.background {
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
}
.surface {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
}
.surface-variant {
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);
}
.on-surface-variant {
  color: var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-on-surface-variant);
}
.outline {
  border: 1px solid var(--md-sys-color-outline);
}
.inverse-surface {
  color: var(--md-sys-color-on-inverse-surface);
  background-color: var(--md-sys-color-inverse-surface);
}
.on-inverse-surface {
  color: var(--md-sys-color-inverse-surface);
  background-color: var(--md-sys-color-on-inverse-surface);
}
.inverse-primary {
  color: var(--md-sys-color-on-inverse-primary);
  background-color: var(--md-sys-color-inverse-primary);
}
.on-inverse-primary {
  color: var(--md-sys-color-inverse-primary);
  background-color: var(--md-sys-color-on-inverse-primary);
}
.surface-tint {
  background-color: var(--md-sys-color-on-surface-tint);
}
.error {
  color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
}
.on-error {
  color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-on-error);
}
.error-container {
  color: var(--md-sys-color-on-error-container);
  background-color: var(--md-sys-color-error-container);
}
.on-error-container {
  color: var(--md-sys-color-error-container);
  background-color: var(--md-sys-color-on-error-container);
}
.black {
  background-color: var(--md-ref-palette-black);
}
.black-text {
  color: var(--md-ref-palette-black);
}
.white {
  background-color: var(--md-ref-palette-white);
}
.white-text {
  color: var(--md-ref-palette-white);
}


C. css / elevation.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Surface tint color */
  --md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
  /* +5 */
  --md-sys-elevation-level5-value: 12px;
  --md-sys-elevation-level5-unit: 1px;
  --md-sys-elevation-level5: 12px;
  /* +4 */
  --md-sys-elevation-level4-value: 8px;
  --md-sys-elevation-level4-unit: 1px;
  --md-sys-elevation-level4: 8px;
  /* +3 */
  --md-sys-elevation-level3-value: 6px;
  --md-sys-elevation-level3-unit: 1px;
  --md-sys-elevation-level3: 6px;
  /* +2 */
  --md-sys-elevation-level2-value: 3px;
  --md-sys-elevation-level2-unit: 1px;
  --md-sys-elevation-level2: 3px;
  /* +1 */
  --md-sys-elevation-level1-value: 1px;
  --md-sys-elevation-level1-unit: 1px;
  --md-sys-elevation-level1: 1px;
  /* 0 */
  --md-sys-elevation-level0-value: 0px;
  --md-sys-elevation-level0-unit: 1px;
  --md-sys-elevation-level0: 0px;
}
.elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}
.elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}
.elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}
.elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}
.elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}
.elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}


D. css / estilos.css

/* Definiciones para Material Design 3  */
@import url(baseline.css);
/* Fonts utilizados */
@import url(roboto.css);

html {
 /* Indica los temas del sistema operativo que son soportados. */
 color-scheme: light dark;
 --tabWidth: 3.75rem;
 --anchoNav: 22.5rem;
}

body>section,
form>section {
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

/* Quita un borde rojo que coloca Firefox. */
:-moz-ui-invalid {
 box-shadow: none;
}

body {
 margin: 0;
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 color: var(--md-sys-color-on-background);
 background-color: var(--md-sys-color-background);
 /* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
 + custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
 opacity: 0;
 animation-name: fouc;
 animation-fill-mode: forwards;
 animation-duration: 1.5s;
}

@keyframes fouc {
 to {
  opacity: 1;
 }
}

html {
 --Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
 --colIntIos: white;
 --colIntIosOnBk: #2acc2a;
 --colIntIosOnBkFc: #1bbb1b;
 --colIntIosOffBk: #dbdbdb;
 --colIntIosOffBkFc: #BDBDBD;
 /* Plain typeface */
 --md-ref-typeface-plain: var(--Font);
 /* Brand typeface */
 --md-ref-typeface-brand: var(--Font);
 --md-sys-typescale-label-large-weight-prominent:
  var(--md-ref-typeface-weight-bold);
 --md-box_shadow_level4:
  0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
 --md-box_shadow_level3:
  0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
 --md-box_shadow_level2:
  0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
 --md-box_shadow_level1:
  0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
 --md-box_shadow_level0: none;
 --iconSize: 1.5rem;
 --avatarSize: 2.5rem;
 --imageSize: 3.5rem;
 --videoWidth: 7.125rem;
 --videoHeight: 4rem;
 --scroll-headline-duracion: 2s;
 --md-sys-state-focus-indicator-outer-offset: 0.125rem;
 --md-sys-state-focus-indicator-thickness: 0.1875rem;
 /* Pressed state layer opacity */
 --state-pressed-transparency-percentage: 84%;
 /* Focus state layer opacity */
 --state-focus-transparency-percentage: 88%;
 /* Hover state layer opacity */
 --state-hover-transparency-percentage: 92%;
}

p {
 margin: 1rem;
}

a {
 color: var(--md-sys-color-on-background);
}

@media (prefers-color-scheme: light) {
 html {
  --md-riple-color: #00000020;
 }
}

@media (prefers-color-scheme: dark) {
 html {
  --md-riple-color: #ffffff40;
 }
}

@keyframes md-ripple {

 from {
  background-size: 100%;
 }

 to {
  background-size: 15000%;
 }

}

@keyframes salePorLaIzquierda {
 to {
  translate: -100vw 0;
 }
}

@keyframes entraPorLaDerecha {
 from {
  translate: 100vw 0;
 }
}

@keyframes aparece {
 from {
  opacity: 0;
 }
}

@keyframes desvanece {
 to {
  opacity: 0;
 }
}

1	/* Definiciones para Material Design 3 */
2	@import url(baseline.css);
3	/* Fonts utilizados */
4	@import url(roboto.css);
5
6	html {
7	/* Indica los temas del sistema operativo que son soportados. */
8	color-scheme: light dark;
9	--tabWidth: 3.75rem;
10	--anchoNav: 22.5rem;
11	}
12
13	body>section,
14	form>section {
15	max-width: 600px;
16	margin-left: auto;
17	margin-right: auto;
18	}
19
20	/* Quita un borde rojo que coloca Firefox. */
21	:-moz-ui-invalid {
22	box-shadow: none;
23	}
24
25	body {
26	margin: 0;
27	font-family: var(--md-sys-typescale-body-large-font);
28	font-weight: var(--md-sys-typescale-body-large-weight);
29	font-size: var(--md-sys-typescale-body-large-size);
30	font-style: var(--md-sys-typescale-body-large-font-style);
31	letter-spacing: var(--md-sys-typescale-body-large-tracking);
32	line-height: var(--md-sys-typescale-body-large-line-height);
33	text-transform: var(--md-sys-typescale-body-large-text-transform);
34	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
35	color: var(--md-sys-color-on-background);
36	background-color: var(--md-sys-color-background);
37	/* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
38	+ custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
39	opacity: 0;
40	animation-name: fouc;
41	animation-fill-mode: forwards;
42	animation-duration: 1.5s;
43	}
44
45	@keyframes fouc {
46	to {
47	opacity: 1;
48	}
49	}
50
51	html {
52	--Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
53	--colIntIos: white;
54	--colIntIosOnBk: #2acc2a;
55	--colIntIosOnBkFc: #1bbb1b;
56	--colIntIosOffBk: #dbdbdb;
57	--colIntIosOffBkFc: #BDBDBD;
58	/* Plain typeface */
59	--md-ref-typeface-plain: var(--Font);
60	/* Brand typeface */
61	--md-ref-typeface-brand: var(--Font);
62	--md-sys-typescale-label-large-weight-prominent:
63	var(--md-ref-typeface-weight-bold);
64	--md-box_shadow_level4:
65	0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
66	--md-box_shadow_level3:
67	0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
68	--md-box_shadow_level2:
69	0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
70	--md-box_shadow_level1:
71	0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
72	--md-box_shadow_level0: none;
73	--iconSize: 1.5rem;
74	--avatarSize: 2.5rem;
75	--imageSize: 3.5rem;
76	--videoWidth: 7.125rem;
77	--videoHeight: 4rem;
78	--scroll-headline-duracion: 2s;
79	--md-sys-state-focus-indicator-outer-offset: 0.125rem;
80	--md-sys-state-focus-indicator-thickness: 0.1875rem;
81	/* Pressed state layer opacity */
82	--state-pressed-transparency-percentage: 84%;
83	/* Focus state layer opacity */
84	--state-focus-transparency-percentage: 88%;
85	/* Hover state layer opacity */
86	--state-hover-transparency-percentage: 92%;
87	}
88
89	p {
90	margin: 1rem;
91	}
92
93	a {
94	color: var(--md-sys-color-on-background);
95	}
96
97	@media (prefers-color-scheme: light) {
98	html {
99	--md-riple-color: #00000020;
100	}
101	}
102
103	@media (prefers-color-scheme: dark) {
104	html {
105	--md-riple-color: #ffffff40;
106	}
107	}
108
109	@keyframes md-ripple {
110
111	from {
112	background-size: 100%;
113	}
114
115	to {
116	background-size: 15000%;
117	}
118
119	}
120
121	@keyframes salePorLaIzquierda {
122	to {
123	translate: -100vw 0;
124	}
125	}
126
127	@keyframes entraPorLaDerecha {
128	from {
129	translate: 100vw 0;
130	}
131	}
132
133	@keyframes aparece {
134	from {
135	opacity: 0;
136	}
137	}
138
139	@keyframes desvanece {
140	to {
141	opacity: 0;
142	}
143	}

E. css / material-symbols-outlined.css

@font-face {
 font-family: 'Material Symbols Outlined';
 font-style: normal;
 src:
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'),
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype');
}

.material-symbols-outlined {
 font-family: 'Material Symbols Outlined';
 font-weight: normal;
 font-style: normal;
 font-size: 1.5rem;
 width: 1.5rem;
 height: 1.5rem;
 /* Preferred icon size */
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
}

F. css / md-headline.css

.md-headline {
 box-sizing: border-box;
 margin: 0;
 color: var(--md-sys-color-on-surface);
 background-color: var(--md-sys-color-surface);
 transition-property: color;
 transition-duration: var(--md-sys-motion-duration-1000);
 transition-timing-function: ease-in;
}

.md-headline.scroll-adicional {
 color: var(--md-sys-color-surface-container-low);
 background-color: var(--md-sys-color-surface-container-low);
}

.md-headline.scroll {
 color: var(--md-sys-color-surface);
}

.md-headline.headline-small {
 padding: 0 1rem 1.5rem 1rem;
}

.md-headline.headline-medium {
 padding: 0 1rem 1.75rem 1rem;
}

md-app-bar.centered~.md-headline {
 text-align: center;
}

md-app-bar[headline] h1 {
 opacity: 0;
 transition-property: opacity;
 transition-duration: var(--md-sys-motion-duration-1000);
}

md-app-bar[headline].scroll h1 {
 opacity: 1;
 transition-timing-function: ease-in;
}

G. css / md-list.css

.md-list {
 margin: 0.5rem 0;
 padding: 0;
 list-style-type: none;
}

.md-list .md-one-line,
.md-list .md-two-line,
.md-list .md-three-line {
 position: relative;
 display: flex;
 box-sizing: border-box;
}

/* container */
.md-list .md-one-line::before,
.md-list .md-two-line::before,
.md-list .md-three-line::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-surface);
}

/* state layer */
.md-list .md-one-line::after,
.md-list .md-two-line::after,
.md-list .md-three-line::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-list .md-one-line {
 align-items: center;
 gap: 1rem;
 min-height: 3.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-one-line.video,
.md-list .md-two-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-two-line,
.md-list .md-three-line {
 flex-flow: column;
}

.md-list .md-two-line {
 justify-content: center;
 min-height: 4.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video,
.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 display: grid;
 column-gap: 1rem;
 row-gap: 0;
 grid-template-areas:
  "img headline"
  "img supporting";
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video {
 align-content: center;
 grid-template-rows: 1fr 1fr;
}

.md-list .md-two-line.icon,
.md-list .md-three-line.icon {
 grid-template-columns: var(--iconSize) 1fr;
}

.md-list .md-two-line.avatar,
.md-list .md-three-line.avatar {
 grid-template-columns: var(--avatarSize) 1fr;
}

.md-list .md-two-line.image,
.md-list .md-three-line.image {
 grid-template-columns: var(--imageSize) 1fr;
}

.md-list .md-two-line.video,
.md-list .md-three-line.video {
 grid-template-columns: var(--videoWidth) 1fr;
}

.md-list .md-three-line {
 align-content: flex-start;
 min-height: 5.5rem;
 padding: 0.75rem 1.5rem 0.75rem 1rem;
}

.md-list .md-three-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 align-content: start;
 grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr;
}

/* state layer */
.md-list .md-one-line:hover::after,
.md-list .md-two-line:hover::after,
.md-list .md-three-line:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

/* state layer */
.md-list a.md-one-line:focus::after,
.md-list a.md-two-line:focus::after,
.md-list a.md-three-line:focus::after,
.md-list a.md-one-line:focus-visible::after,
.md-list a.md-two-line:focus-visible::after,
.md-list a.md-three-line:focus-visible::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-list a:focus,
.md-list a:focus-visible {
 outline: none;
}

.md-list a:active {
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-list a.md-one-line:active::after,
.md-list a.md-two-line:active::after,
.md-list a.md-three-line:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-list a.md-two-line,
.md-list a.md-three-line {
 text-decoration: none;
}

.md-list a.md-two-line .headline,
.md-list a.md-three-line .headline {
 text-decoration: underline;
}

.md-list .headline {
 grid-area: headline;
 display: block;
 box-sizing: border-box;
 color: var(--md-sys-color-on-surface);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 max-height: var(--md-sys-typescale-body-large-line-height);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.md-list .md-two-line.icon .headline,
.md-list .md-two-line.avatar .headline,
.md-list .md-two-line.image .headline,
.md-list .md-two-line.video .headline,
.md-list .md-three-line.icon .headline,
.md-list .md-three-line.avatar .headline,
.md-list .md-three-line.image .headline,
.md-list .md-three-line.video .headline {
 align-self: end;
}

.md-list .supporting {
 grid-area: supporting;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 box-sizing: border-box;
 align-self: start;
 font-family: var(--md-sys-typescale-body-medium-font);
 font-weight: var(--md-sys-typescale-body-medium-weight);
 font-size: var(--md-sys-typescale-body-medium-size);
 font-style: var(--md-sys-typescale-body-medium-font-style);
 letter-spacing: var(--md-sys-typescale-body-medium-tracking);
 line-height: var(--md-sys-typescale-body-medium-line-height);
 text-transform: var(--md-sys-typescale-body-medium-text-transform);
 text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}

.md-list .md-two-line .supporting {
 max-height: var(--md-sys-typescale-body-medium-line-height);
 line-clamp: 1;
 -webkit-line-clamp: 1;
}

.md-list .md-three-line .supporting {
 max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height));
 line-clamp: 2;
 -webkit-line-clamp: 2;
}

.md-list .avatar img,
.md-list .avatar label,
.md-list .avatar .material-symbols-outlined:first-child {
 flex-shrink: 0;
 background-color: var(--md-sys-color-primary-container);
 color: var(--md-sys-color-on-primary-container);
 border-radius: 50%;
 width: var(--avatarSize);
 height: var(--avatarSize);
}

.md-list .avatar label {
 display: inline-block;
 font-family: var(--md-sys-typescale-title-medium-font);
 font-weight: var(--md-sys-typescale-title-medium-weight);
 font-size: var(--md-sys-typescale-title-medium-size);
 font-style: var(--md-sys-typescale-title-medium-font-style);
 letter-spacing: var(--md-sys-typescale-title-medium-tracking);
 line-height: var(--md-sys-typescale-title-medium-line-height);
 text-transform: var(--md-sys-typescale-title-medium-text-transform);
 text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
 overflow: hidden;
}

.md-list .avatar .material-symbols-outlined:first-child {
 font-size: var(--avatarSize);
}

.md-list .avatar.md-two-line img,
.md-list .avatar.md-two-line label,
.md-list .avatar.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .avatar.md-three-line img,
.md-list .avatar.md-three-line label,
.md-list .avatar.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .icon img,
.md-list .icon .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--iconSize);
 height: var(--iconSize);
}

.md-list .icon .material-symbols-outlined:first-child {
 font-size: var(--iconSize);
}

.md-list .icon.md-two-line img,
.md-list .icon.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .icon.md-three-line img,
.md-list .icon.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .video img {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--videoWidth);
 height: var(--videoHeight);
}

.md-list .video.md-two-line img {
 grid-area: img;
 align-self: center;
}

.md-list .video.md-three-line img {
 grid-area: img;
 align-self: start;
}

.md-list .image img,
.md-list .image .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--imageSize);
 height: var(--imageSize);
}

.md-list .image .material-symbols-outlined:first-child {
 font-size: var(--imageSize);
}

.md-list .image.md-two-line img,
.md-list .image.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .image.md-three-line img,
.md-list .image.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

H. css / md-tab.css

.md-tab {
 display: flex;
 background-color: transparent;
 align-items: stretch;
 flex-wrap: nowrap;
 overflow-x: auto;
 position: sticky;
 z-index: 1;
}

.md-tab.fixed {
 justify-content: center;
}

.md-tab.scrollable {
 padding-left: 2rem;
 gap: 1rem;
}

.md-tab.scroll {
 background-color: var(--md-sys-color-surface-container-low);
}

.md-tab a {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: start;
 align-items: center;
 color: var(--md-sys-color-on-surface-variant);
 font-family: var(--md-sys-typescale-title-small-font);
 font-weight: var(--md-sys-typescale-title-small-weight);
 font-size: var(--md-sys-typescale-title-small-size);
 font-style: var(--md-sys-typescale-title-small-font-style);
 letter-spacing: var(--md-sys-typescale-title-small-tracking);
 line-height: var(--md-sys-typescale-title-small-line-height);
 text-transform: var(--md-sys-typescale-title-small-text-transform);
 text-decoration: var(--md-sys-typescale-title-small-text-decoration);
 text-align: center;
 box-sizing: border-box;
 border-bottom: 0.1875rem solid var(--md-sys-color-surface);
}

.md-tab.fixed a {
 flex: 0 0 var(--tabWidth);
}

.md-tab.scrollable a {
 flex: 0 0 auto;
}

.md-tab a.active {
 border-bottom-color: var(--md-sys-color-primary);
}

/* state layer */
.md-tab a::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-tab span {
 font-size: var(--iconSize);
 height: var(--iconSize);
 width: var(--iconSize);
 color: var(--md-sys-color-on-surface-variant);
}

.md-tab .active span {
 color: var(--md-sys-color-primary);
}

.md-tab a:hover {
 color: var(--md-sys-color-on-surface);
}

/* state layer */
.md-tab a:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a.active:hover {
 color: var(--md-sys-color-primary);
}

/* state layer */
.md-tab a.active:hover::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a:hover span {
 color: var(--md-sys-color-on-surface);
}

.md-tab a.active:hover span {
 color: var(--md-sys-color-primary);
}

.md-tab a:focus {
 outline: none;
}

/* state layer */
.md-tab a:focus::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

/* state layer */
.md-tab a.active:focus::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a:active {
 background-position: center;
 background-image:
   radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
}

/* state layer */
.md-tab a:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

/* state layer */
.md-tab a.active:active::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

I. css / motion.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Emphasized decelerate easing (out) */
  --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
  --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
  --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
  --md-sys-motion-easing-emphasized-decelerate-y1: 1;
  /* Emphasized accelerate easing (in) */
  --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
  --md-sys-motion-easing-emphasized-accelerate-y0: 0;
  --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
  --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
  /* Standard decelerate easing (out) */
  --md-sys-motion-easing-standard-decelerate-x0: 0;
  --md-sys-motion-easing-standard-decelerate-y0: 0;
  --md-sys-motion-easing-standard-decelerate-x1: 0;
  --md-sys-motion-easing-standard-decelerate-y1: 1;
  /* Standard accelerate easing (in) */
  --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
  --md-sys-motion-easing-standard-accelerate-y0: 0;
  --md-sys-motion-easing-standard-accelerate-x1: 1;
  --md-sys-motion-easing-standard-accelerate-y1: 1;
  /* Duration 1000ms */
  --md-sys-motion-duration-1000: 1000ms;
  /* Duration 900ms */
  --md-sys-motion-duration-900: 900ms;
  /* Duration 800ms */
  --md-sys-motion-duration-800: 800ms;
  /* Duration 700ms */
  --md-sys-motion-duration-700: 700ms;
  /* Duration 600ms */
  --md-sys-motion-duration-600: 600ms;
  /* Duration 550ms */
  --md-sys-motion-duration-550: 550ms;
  /* Duration 500ms */
  --md-sys-motion-duration-500: 500ms;
  /* Duration 450ms */
  --md-sys-motion-duration-450: 450ms;
  /* Duration 400ms */
  --md-sys-motion-duration-400: 400ms;
  /* Duration 350ms */
  --md-sys-motion-duration-350: 350ms;
  /* Duration 300ms */
  --md-sys-motion-duration-300: 300ms;
  /* Duration 250ms */
  --md-sys-motion-duration-250: 250ms;
  /* Duration 200ms */
  --md-sys-motion-duration-200: 200ms;
  /* Duration 150ms */
  --md-sys-motion-duration-150: 150ms;
  /* Duration 100ms */
  --md-sys-motion-duration-100: 100ms;
  /* Duration 50ms */
  --md-sys-motion-duration-50: 50ms;
  /* Standard easing (in and out) */
  --md-sys-motion-easing-standard-x0: 0.20000000298023224;
  --md-sys-motion-easing-standard-y0: 0;
  --md-sys-motion-easing-standard-x1: 0;
  --md-sys-motion-easing-standard-y1: 1;
  /* Linear easing */
  --md-sys-motion-easing-linear-x0: 0;
  --md-sys-motion-easing-linear-y0: 0;
  --md-sys-motion-easing-linear-x1: 1;
  --md-sys-motion-easing-linear-y1: 1;
  /* Emphasized */
  --md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
  --md-sys-motion-easing-emphasized-y0: 0;
  --md-sys-motion-easing-emphasized-x1: 0;
  --md-sys-motion-easing-emphasized-y1: 1;
  /* Motion path */
  --md-sys-motion-path-standard-path: 1;
}
.duration-50 {
  transition-duration: var(--md-sys-motion-duration-50);
}
.duration-100 {
  transition-duration: var(--md-sys-motion-duration-100);
}
.duration-150 {
  transition-duration: var(--md-sys-motion-duration-150);
}
.duration-200 {
  transition-duration: var(--md-sys-motion-duration-200);
}
.duration-250 {
  transition-duration: var(--md-sys-motion-duration-250);
}
.duration-300 {
  transition-duration: var(--md-sys-motion-duration-300);
}
.duration-350 {
  transition-duration: var(--md-sys-motion-duration-350);
}
.duration-400 {
  transition-duration: var(--md-sys-motion-duration-400);
}
.duration-450 {
  transition-duration: var(--md-sys-motion-duration-450);
}
.duration-500 {
  transition-duration: var(--md-sys-motion-duration-500);
}
.duration-550 {
  transition-duration: var(--md-sys-motion-duration-550);
}
.duration-600 {
  transition-duration: var(--md-sys-motion-duration-600);
}
.duration-700 {
  transition-duration: var(--md-sys-motion-duration-700);
}
.duration-800 {
  transition-duration: var(--md-sys-motion-duration-800);
}
.duration-900 {
  transition-duration: var(--md-sys-motion-duration-900);
}
.duration-1000 {
  transition-duration: var(--md-sys-motion-duration-1000);
}
.easing-standard {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-x0),
    var(--md-sys-motion-easing-standard-y0),
    var(--md-sys-motion-easing-standard-x1),
    var(--md-sys-motion-easing-standard-y1)
  );
}
.easing-linear {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-linear-x0),
    var(--md-sys-motion-easing-linear-y0),
    var(--md-sys-motion-easing-linear-x1),
    var(--md-sys-motion-easing-linear-y1)
  );
}
.easing-standard-accelerate {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-accelerate-x0),
    var(--md-sys-motion-easing-standard-accelerate-y0),
    var(--md-sys-motion-easing-standard-accelerate-x1),
    var(--md-sys-motion-easing-standard-accelerate-y1)
  );
}
.easing-standard-decelerate {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-decelerate-x0),
    var(--md-sys-motion-easing-standard-decelerate-y0),
    var(--md-sys-motion-easing-standard-decelerate-x1),
    var(--md-sys-motion-easing-standard-decelerate-y1)
  );
}
.easing-emphasized {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-emphasized-x0),
    var(--md-sys-motion-easing-emphasized-y0),
    var(--md-sys-motion-easing-emphasized-x1),
    var(--md-sys-motion-easing-emphasized-y1)
  );
}


J. css / palette.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Error 0 */
  --md-ref-palette-error0: #000000ff;
  /* Error 10 */
  --md-ref-palette-error10: #410e0bff;
  /* Error 20 */
  --md-ref-palette-error20: #601410ff;
  /* Error 30 */
  --md-ref-palette-error30: #8c1d18ff;
  /* Error 40 */
  --md-ref-palette-error40: #b3261eff;
  /* Error 50 */
  --md-ref-palette-error50: #dc362eff;
  /* Error 60 */
  --md-ref-palette-error60: #e46962ff;
  /* Error 70 */
  --md-ref-palette-error70: #ec928eff;
  /* Error 80 */
  --md-ref-palette-error80: #f2b8b5ff;
  /* Error 90 */
  --md-ref-palette-error90: #f9dedcff;
  /* Error 95 */
  --md-ref-palette-error95: #fceeeeff;
  /* Error 99 */
  --md-ref-palette-error99: #fffbf9ff;
  /* Error 100 */
  --md-ref-palette-error100: #ffffffff;
  /* Tertiary 0 */
  --md-ref-palette-tertiary0: #000000ff;
  /* Tertiary 10 */
  --md-ref-palette-tertiary10: #31111dff;
  /* Tertiary 20 */
  --md-ref-palette-tertiary20: #492532ff;
  /* Tertiary 30 */
  --md-ref-palette-tertiary30: #633b48ff;
  /* Tertiary 40 */
  --md-ref-palette-tertiary40: #7d5260ff;
  /* Tertiary 50 */
  --md-ref-palette-tertiary50: #986977ff;
  /* Tertiary 60 */
  --md-ref-palette-tertiary60: #b58392ff;
  /* Tertiary 70 */
  --md-ref-palette-tertiary70: #d29dacff;
  /* Tertiary 80 */
  --md-ref-palette-tertiary80: #efb8c8ff;
  /* Tertiary 90 */
  --md-ref-palette-tertiary90: #ffd8e4ff;
  /* Tertiary 95 */
  --md-ref-palette-tertiary95: #ffecf1ff;
  /* Tertiary 99 */
  --md-ref-palette-tertiary99: #fffbfaff;
  /* Tertiary 100 */
  --md-ref-palette-tertiary100: #ffffffff;
  /* Secondary 0 */
  --md-ref-palette-secondary0: #000000ff;
  /* Secondary 10 */
  --md-ref-palette-secondary10: #1d192bff;
  /* Secondary 20 */
  --md-ref-palette-secondary20: #332d41ff;
  /* Secondary 30 */
  --md-ref-palette-secondary30: #4a4458ff;
  /* Secondary 40 */
  --md-ref-palette-secondary40: #625b71ff;
  /* Secondary 50 */
  --md-ref-palette-secondary50: #7a7289ff;
  /* Secondary 60 */
  --md-ref-palette-secondary60: #958da5ff;
  /* Secondary 70 */
  --md-ref-palette-secondary70: #b0a7c0ff;
  /* Secondary 80 */
  --md-ref-palette-secondary80: #ccc2dcff;
  /* Secondary 90 */
  --md-ref-palette-secondary90: #e8def8ff;
  /* Secondary 95 */
  --md-ref-palette-secondary95: #f6edffff;
  /* Secondary 99 */
  --md-ref-palette-secondary99: #fffbfeff;
  /* Secondary 100 */
  --md-ref-palette-secondary100: #ffffffff;
  /* Primary 0 */
  --md-ref-palette-primary0: #000000ff;
  /* Primary 10 */
  --md-ref-palette-primary10: #21005dff;
  /* Primary 20 */
  --md-ref-palette-primary20: #381e72ff;
  /* Primary 30 */
  --md-ref-palette-primary30: #4f378bff;
  /* Primary 40 */
  --md-ref-palette-primary40: #6750a4ff;
  /* Primary 50 */
  --md-ref-palette-primary50: #7f67beff;
  /* Primary 60 */
  --md-ref-palette-primary60: #9a82dbff;
  /* Primary 70 */
  --md-ref-palette-primary70: #b69df8ff;
  /* Primary 80 */
  --md-ref-palette-primary80: #d0bcffff;
  /* Primary 90 */
  --md-ref-palette-primary90: #eaddffff;
  /* Primary 95 */
  --md-ref-palette-primary95: #f6edffff;
  /* Primary 99 */
  --md-ref-palette-primary99: #fffbfeff;
  /* Primary 100 */
  --md-ref-palette-primary100: #ffffffff;
  /* Neutral Variant 0 */
  --md-ref-palette-neutral-variant0: #000000ff;
  /* Neutral Variant 10 */
  --md-ref-palette-neutral-variant10: #1d1a22ff;
  /* Neutral Variant 20 */
  --md-ref-palette-neutral-variant20: #322f37ff;
  /* Neutral Variant 30 */
  --md-ref-palette-neutral-variant30: #49454fff;
  /* Neutral Variant 40 */
  --md-ref-palette-neutral-variant40: #605d66ff;
  /* Neutral Variant 50 */
  --md-ref-palette-neutral-variant50: #79747eff;
  /* Neutral Variant 60 */
  --md-ref-palette-neutral-variant60: #938f99ff;
  /* Neutral Variant 70 */
  --md-ref-palette-neutral-variant70: #aea9b4ff;
  /* Neutral Variant 80 */
  --md-ref-palette-neutral-variant80: #cac4d0ff;
  /* Neutral Variant 90 */
  --md-ref-palette-neutral-variant90: #e7e0ecff;
  /* Neutral Variant 95 */
  --md-ref-palette-neutral-variant95: #f5eefaff;
  /* Neutral Variant 99 */
  --md-ref-palette-neutral-variant99: #fffbfeff;
  /* Neutral Variant 100 */
  --md-ref-palette-neutral-variant100: #ffffffff;
  /* Neutral 0 */
  --md-ref-palette-neutral0: #000000ff;
  /* Neutral 10 */
  --md-ref-palette-neutral10: #1c1b1fff;
  /* Neutral 20 */
  --md-ref-palette-neutral20: #313033ff;
  /* Neutral 30 */
  --md-ref-palette-neutral30: #484649ff;
  /* Neutral 40 */
  --md-ref-palette-neutral40: #605d62ff;
  /* Neutral 50 */
  --md-ref-palette-neutral50: #787579ff;
  /* Neutral 60 */
  --md-ref-palette-neutral60: #939094ff;
  /* Neutral 70 */
  --md-ref-palette-neutral70: #aeaaaeff;
  /* Neutral 80 */
  --md-ref-palette-neutral80: #c9c5caff;
  /* Neutral 90 */
  --md-ref-palette-neutral90: #e6e1e5ff;
  /* Neutral 95 */
  --md-ref-palette-neutral95: #f4eff4ff;
  /* Neutral 99 */
  --md-ref-palette-neutral99: #fffbfeff;
  /* Neutral 100 */
  --md-ref-palette-neutral100: #ffffffff;
  /* Black */
  --md-ref-palette-black: #000000ff;
  /* White */
  --md-ref-palette-white: #ffffffff;
}


K. css / roboto.css

/* roboto-regular - latin */
@font-face {
 /* Revisa
  * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
  * para otras opciones. */
 font-display: swap;
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2');
}

L. css / shape.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Fully rounded */
  --md-sys-shape-corner-full-family: 3px;
  /* Extra large top rounding */
  --md-sys-shape-corner-extra-large-top-family: 1px;
  --md-sys-shape-corner-extra-large-top-default-size: 0px;
  --md-sys-shape-corner-extra-large-top-top-left: 28px;
  --md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
  --md-sys-shape-corner-extra-large-top-top-right: 28px;
  /* Extra large rounding */
  --md-sys-shape-corner-extra-large-family: 1px;
  --md-sys-shape-corner-extra-large-default-size-unit: 1px;
  --md-sys-shape-corner-extra-large-default-size: 28px;
  /* Large top rounding */
  --md-sys-shape-corner-large-top-family: 1px;
  --md-sys-shape-corner-large-top-default-size-unit: 1px;
  --md-sys-shape-corner-large-top-default-size: 0px;
  --md-sys-shape-corner-large-top-top-left-unit: 1px;
  --md-sys-shape-corner-large-top-top-left: 16px;
  --md-sys-shape-corner-large-top-top-right-unit: 1px;
  --md-sys-shape-corner-large-top-top-right: 16px;
  /* Large end rounding */
  --md-sys-shape-corner-large-end-family: 1px;
  --md-sys-shape-corner-large-end-default-size-unit: 1px;
  --md-sys-shape-corner-large-end-default-size: 0px;
  --md-sys-shape-corner-large-end-top-right-unit: 1px;
  --md-sys-shape-corner-large-end-top-right: 16px;
  --md-sys-shape-corner-large-end-bottom-right-unit: 1px;
  --md-sys-shape-corner-large-end-bottom-right: 16px;
  /* Large rounding */
  --md-sys-shape-corner-large-family: 1px;
  --md-sys-shape-corner-large-default-size-unit: 1px;
  --md-sys-shape-corner-large-default-size: 16px;
  /* Medium rounding */
  --md-sys-shape-corner-medium-family: 1px;
  --md-sys-shape-corner-medium-default-size-unit: 1px;
  --md-sys-shape-corner-medium-default-size: 12px;
  /* Small rounding */
  --md-sys-shape-corner-small-family: 1px;
  --md-sys-shape-corner-small-default-size-unit: 1px;
  --md-sys-shape-corner-small-default-size: 8px;
  /* Extra small top rounding */
  --md-sys-shape-corner-extra-small-top-family: 1px;
  --md-sys-shape-corner-extra-small-top-default-size-unit: 1px;
  --md-sys-shape-corner-extra-small-top-default-size: 0px;
  --md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
  --md-sys-shape-corner-extra-small-top-top-left: 4px;
  --md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
  --md-sys-shape-corner-extra-small-top-top-right: 4px;
  /* Extra small rounding */
  --md-sys-shape-corner-extra-small-family: 1px;
  --md-sys-shape-corner-extra-small-default-size-unit: 1px;
  --md-sys-shape-corner-extra-small-default-size: 4px;
  /* No rounding */
  --md-sys-shape-corner-none-family: 1px;
  --md-sys-shape-corner-none-default-size-unit: 1px;
  --md-sys-shape-corner-none-default-size: 0px;

  --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);
  --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);
  --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);
}

.shape-none {
  border-radius: var(--md-sys-shape-corner-none-default-size);
}
.shape-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small-default-size);
}
.shape-small {
  border-radius: var(--md-sys-shape-corner-small-default-size);
}
.shape-medium {
  border-radius: var(--md-sys-shape-corner-medium-default-size);
}
.shape-large {
  border-radius: var(--md-sys-shape-corner-large-default-size);
}
.shape-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large-default-size);
}
.extra-small-top {
  border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
}
.large-end {
  border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right);
  border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right);
}
.large-top {
  border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right);
}
.extra-large-top {
  border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right);
}


M. css / state.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Dragged state layer opacity */
  --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
  /* Pressed state layer opacity */
  --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
  /* Focus state layer opacity */
  --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
  /* Hover state layer opacity */
  --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
}
.hover-state-layer {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
}
.pressed-state-layer {
  opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
.dragged-state-layer {
  opacity: var(--md-sys-state-dragged-state-layer-opacity);
}
.focus-state-layer {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
}


N. css / transicion_pestanas.css

@view-transition {
 navigation: auto;
}

#headline {
 view-transition-name: encabezado;
}

main {
 view-transition-name: contenido;
}

::view-transition-group(encabezado) {
 animation-duration: var(--md-sys-motion-duration-1000);
}

::view-transition-group(contenido) {
 animation-duration: var(--md-sys-motion-duration-1000);
}

html::view-transition-old(encabezado) {
 animation-name: salePorLaIzquierda;
}

html::view-transition-new(encabezado) {
 animation-name: entraPorLaDerecha;
}

html::view-transition-old(contenido) {
 animation-name: salePorLaIzquierda;
}

html::view-transition-new(contenido) {
 animation-duration: var(--md-sys-motion-duration-700);
 animation-name: entraPorLaDerecha;
}

O. css / typography.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

/* This file is generated */

/* DO NOT EDIT */

:root {
  /* Label Small */
  --md-sys-typescale-label-small-text-transform: unset;
  --md-sys-typescale-label-small-axis-value: unset;
  --md-sys-typescale-label-small-font-style: unset;
  --md-sys-typescale-label-small-text-decoration: unset;
  /* Label Small line height */
  --md-sys-typescale-label-small-line-height-value: 16px;
  --md-sys-typescale-label-small-line-height-unit: 2px;
  --md-sys-typescale-label-small-line-height: 16px;
  /* Label Small font tracking */
  --md-sys-typescale-label-small-tracking-value: 0.5px;
  --md-sys-typescale-label-small-tracking-unit: 2px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  /* Label Small font size */
  --md-sys-typescale-label-small-size-value: 11px;
  --md-sys-typescale-label-small-size-unit: 2px;
  --md-sys-typescale-label-small-size: 11px;
  /* Label Small font weight */
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
  /* Label Small font name */
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  /* Label Medium */
  --md-sys-typescale-label-medium-axis-value: unset;
  --md-sys-typescale-label-medium-font-style: unset;
  --md-sys-typescale-label-medium-text-decoration: unset;
  /* Label Medium text transform */
  --md-sys-typescale-label-medium-text-transform: 1;
  /* Label Medium line height */
  --md-sys-typescale-label-medium-line-height-value: 16px;
  --md-sys-typescale-label-medium-line-height-unit: 2px;
  --md-sys-typescale-label-medium-line-height: 16px;
  /* Label Medium font tracking */
  --md-sys-typescale-label-medium-tracking-value: 0.5px;
  --md-sys-typescale-label-medium-tracking-unit: 2px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  /* Label Medium font size */
  --md-sys-typescale-label-medium-size-value: 12px;
  --md-sys-typescale-label-medium-size-unit: 2px;
  --md-sys-typescale-label-medium-size: 12px;
  /* Label Medium font weight */
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
  /* Label Medium font name */
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  /* Label Large */
  --md-sys-typescale-label-large-text-transform: unset;
  --md-sys-typescale-label-large-axis-value: unset;
  --md-sys-typescale-label-large-font-style: unset;
  --md-sys-typescale-label-large-text-decoration: unset;
  /* Label Large line height */
  --md-sys-typescale-label-large-line-height-value: 20px;
  --md-sys-typescale-label-large-line-height-unit: 2px;
  --md-sys-typescale-label-large-line-height: 20px;
  /* Label Large font tracking */
  --md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
  --md-sys-typescale-label-large-tracking-unit: 2px;
  --md-sys-typescale-label-large-tracking: 0.10000000149011612px;
  /* Label Large font size */
  --md-sys-typescale-label-large-size-value: 14px;
  --md-sys-typescale-label-large-size-unit: 2px;
  --md-sys-typescale-label-large-size: 14px;
  /* Label Large font weight */
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
  /* Label Large font name */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  /* Body Small */
  --md-sys-typescale-body-small-text-transform: unset;
  --md-sys-typescale-body-small-axis-value: unset;
  --md-sys-typescale-body-small-font-style: unset;
  --md-sys-typescale-body-small-text-decoration: unset;
  /* Body Small line height */
  --md-sys-typescale-body-small-line-height-value: 16px;
  --md-sys-typescale-body-small-line-height-unit: 2px;
  --md-sys-typescale-body-small-line-height: 16px;
  /* Body Small font tracking */
  --md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
  --md-sys-typescale-body-small-tracking-unit: 2px;
  --md-sys-typescale-body-small-tracking: 0.4000000059604645px;
  /* Body Small font size */
  --md-sys-typescale-body-small-size-value: 12px;
  --md-sys-typescale-body-small-size-unit: 2px;
  --md-sys-typescale-body-small-size: 12px;
  /* Body Small font weight */
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  /* Body Small font name */
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  /* Body Medium */
  --md-sys-typescale-body-medium-text-transform: unset;
  --md-sys-typescale-body-medium-axis-value: unset;
  --md-sys-typescale-body-medium-font-style: unset;
  --md-sys-typescale-body-medium-text-decoration: unset;
  /* Body Medium line height */
  --md-sys-typescale-body-medium-line-height-value: 20px;
  --md-sys-typescale-body-medium-line-height-unit: 2px;
  --md-sys-typescale-body-medium-line-height: 20px;
  /* Body Medium font tracking */
  --md-sys-typescale-body-medium-tracking-value: 0.25px;
  --md-sys-typescale-body-medium-tracking-unit: 2px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  /* Body Medium font size */
  --md-sys-typescale-body-medium-size-value: 14px;
  --md-sys-typescale-body-medium-size-unit: 2px;
  --md-sys-typescale-body-medium-size: 14px;
  /* Body Medium font weight */
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  /* Body Medium font name */
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  /* Body Large */
  --md-sys-typescale-body-large-text-transform: unset;
  --md-sys-typescale-body-large-axis-value: unset;
  --md-sys-typescale-body-large-font-style: unset;
  --md-sys-typescale-body-large-text-decoration: unset;
  /* Body Large line height */
  --md-sys-typescale-body-large-line-height-value: 24px;
  --md-sys-typescale-body-large-line-height-unit: 2px;
  --md-sys-typescale-body-large-line-height: 24px;
  /* Body Large font tracking */
  --md-sys-typescale-body-large-tracking-value: 0.5px;
  --md-sys-typescale-body-large-tracking-unit: 2px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  /* Body Large font size */
  --md-sys-typescale-body-large-size-value: 16px;
  --md-sys-typescale-body-large-size-unit: 2px;
  --md-sys-typescale-body-large-size: 16px;
  /* Body Large font weight */
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  /* Body Large font name */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  /* Title Small */
  --md-sys-typescale-title-small-text-transform: unset;
  --md-sys-typescale-title-small-axis-value: unset;
  --md-sys-typescale-title-small-font-style: unset;
  --md-sys-typescale-title-small-text-decoration: unset;
  /* Title Small line height */
  --md-sys-typescale-title-small-line-height-value: 20px;
  --md-sys-typescale-title-small-line-height-unit: 2px;
  --md-sys-typescale-title-small-line-height: 20px;
  /* Title Small font tracking */
  --md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
  --md-sys-typescale-title-small-tracking-unit: 2px;
  --md-sys-typescale-title-small-tracking: 0.10000000149011612px;
  /* Title Small font size */
  --md-sys-typescale-title-small-size-value: 14px;
  --md-sys-typescale-title-small-size-unit: 2px;
  --md-sys-typescale-title-small-size: 14px;
  /* Title Small font weight */
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
  /* Title Small font name */
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  /* Title Medium */
  --md-sys-typescale-title-medium-text-transform: unset;
  --md-sys-typescale-title-medium-axis-value: unset;
  --md-sys-typescale-title-medium-font-style: unset;
  --md-sys-typescale-title-medium-text-decoration: unset;
  /* Title Medium line height */
  --md-sys-typescale-title-medium-line-height-value: 24px;
  --md-sys-typescale-title-medium-line-height-unit: 2px;
  --md-sys-typescale-title-medium-line-height: 24px;
  /* Title Medium font tracking */
  --md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
  --md-sys-typescale-title-medium-tracking-unit: 2px;
  --md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
  /* Title Medium font size */
  --md-sys-typescale-title-medium-size-value: 16px;
  --md-sys-typescale-title-medium-size-unit: 2px;
  --md-sys-typescale-title-medium-size: 16px;
  /* Title Medium font weight */
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
  /* Title Medium font name */
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  /* Title Large */
  --md-sys-typescale-title-large-text-transform: unset;
  --md-sys-typescale-title-large-axis-value: unset;
  --md-sys-typescale-title-large-font-style: unset;
  --md-sys-typescale-title-large-text-decoration: unset;
  /* Title Large line height */
  --md-sys-typescale-title-large-line-height-value: 28px;
  --md-sys-typescale-title-large-line-height-unit: 2px;
  --md-sys-typescale-title-large-line-height: 28px;
  /* Title Large font tracking */
  --md-sys-typescale-title-large-tracking-value: 0px;
  --md-sys-typescale-title-large-tracking-unit: 2px;
  --md-sys-typescale-title-large-tracking: 0px;
  /* Title Large font size */
  --md-sys-typescale-title-large-size-value: 22px;
  --md-sys-typescale-title-large-size-unit: 2px;
  --md-sys-typescale-title-large-size: 22px;
  /* Title Large font weight */
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
  /* Title Large font name */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  /* Headline Small */
  --md-sys-typescale-headline-small-text-transform: unset;
  --md-sys-typescale-headline-small-axis-value: unset;
  --md-sys-typescale-headline-small-font-style: unset;
  --md-sys-typescale-headline-small-text-decoration: unset;
  /* Headline Small line height */
  --md-sys-typescale-headline-small-line-height-value: 32px;
  --md-sys-typescale-headline-small-line-height-unit: 2px;
  --md-sys-typescale-headline-small-line-height: 32px;
  /* Headline Small font tracking */
  --md-sys-typescale-headline-small-tracking-value: 0px;
  --md-sys-typescale-headline-small-tracking-unit: 2px;
  --md-sys-typescale-headline-small-tracking: 0px;
  /* Headline Small font size */
  --md-sys-typescale-headline-small-size-value: 24px;
  --md-sys-typescale-headline-small-size-unit: 2px;
  --md-sys-typescale-headline-small-size: 24px;
  /* Headline Small font weight */
  --md-sys-typescale-headline-small-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Headline Small font name */
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  /* Headline Medium */
  --md-sys-typescale-headline-medium-text-transform: unset;
  --md-sys-typescale-headline-medium-axis-value: unset;
  --md-sys-typescale-headline-medium-font-style: unset;
  --md-sys-typescale-headline-medium-text-decoration: unset;
  /* Headline Medium line height */
  --md-sys-typescale-headline-medium-line-height-value: 36px;
  --md-sys-typescale-headline-medium-line-height-unit: 2px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  /* Headline Medium font tracking */
  --md-sys-typescale-headline-medium-tracking-value: 0px;
  --md-sys-typescale-headline-medium-tracking-unit: 2px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  /* Headline Medium font size */
  --md-sys-typescale-headline-medium-size-value: 28px;
  --md-sys-typescale-headline-medium-size-unit: 2px;
  --md-sys-typescale-headline-medium-size: 28px;
  /* Headline Medium font weight */
  --md-sys-typescale-headline-medium-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Headline Medium font name */
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  /* Headline Large */
  --md-sys-typescale-headline-large-text-transform: unset;
  --md-sys-typescale-headline-large-axis-value: unset;
  --md-sys-typescale-headline-large-font-style: unset;
  --md-sys-typescale-headline-large-text-decoration: unset;
  /* Headline Large line height */
  --md-sys-typescale-headline-large-line-height-value: 40px;
  --md-sys-typescale-headline-large-line-height-unit: 2px;
  --md-sys-typescale-headline-large-line-height: 40px;
  /* Headline Large font tracking */
  --md-sys-typescale-headline-large-tracking-value: 0px;
  --md-sys-typescale-headline-large-tracking-unit: 2px;
  --md-sys-typescale-headline-large-tracking: 0px;
  /* Headline Large font size */
  --md-sys-typescale-headline-large-size-value: 32px;
  --md-sys-typescale-headline-large-size-unit: 2px;
  --md-sys-typescale-headline-large-size: 32px;
  /* Headline Large font name */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  /* Headline Large font weight */
  --md-sys-typescale-headline-large-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Small */
  --md-sys-typescale-display-small-text-transform: unset;
  --md-sys-typescale-display-small-axis-value: unset;
  --md-sys-typescale-display-small-font-style: unset;
  --md-sys-typescale-display-small-text-decoration: unset;
  /* Display Small line height */
  --md-sys-typescale-display-small-line-height-value: 44px;
  --md-sys-typescale-display-small-line-height-unit: 2px;
  --md-sys-typescale-display-small-line-height: 44px;
  /* Display Small font tracking */
  --md-sys-typescale-display-small-tracking-value: 0px;
  --md-sys-typescale-display-small-tracking-unit: 2px;
  --md-sys-typescale-display-small-tracking: 0px;
  /* Display Small font size */
  --md-sys-typescale-display-small-size-value: 36px;
  --md-sys-typescale-display-small-size-unit: 2px;
  --md-sys-typescale-display-small-size: 36px;
  /* Display Small font weight */
  --md-sys-typescale-display-small-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Small font name */
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  /* Display Medium */
  --md-sys-typescale-display-medium-text-transform: unset;
  --md-sys-typescale-display-medium-axis-value: unset;
  --md-sys-typescale-display-medium-font-style: unset;
  --md-sys-typescale-display-medium-text-decoration: unset;
  /* Display Medium line height */
  --md-sys-typescale-display-medium-line-height-value: 52px;
  --md-sys-typescale-display-medium-line-height-unit: 2px;
  --md-sys-typescale-display-medium-line-height: 52px;
  /* Display Medium font tracking */
  --md-sys-typescale-display-medium-tracking-value: 0px;
  --md-sys-typescale-display-medium-tracking-unit: 2px;
  --md-sys-typescale-display-medium-tracking: 0px;
  /* Display Medium font size */
  --md-sys-typescale-display-medium-size-value: 45px;
  --md-sys-typescale-display-medium-size-unit: 2px;
  --md-sys-typescale-display-medium-size: 45px;
  /* Display Medium font weight */
  --md-sys-typescale-display-medium-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Medium font name */
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  /* Display Large */
  --md-sys-typescale-display-large-text-transform: unset;
  --md-sys-typescale-display-large-axis-value: unset;
  --md-sys-typescale-display-large-font-style: unset;
  --md-sys-typescale-display-large-text-decoration: unset;
  /* Display Large line height */
  --md-sys-typescale-display-large-line-height-value: 64px;
  --md-sys-typescale-display-large-line-height-unit: 2px;
  --md-sys-typescale-display-large-line-height: 64px;
  /* Display Large font tracking */
  --md-sys-typescale-display-large-tracking-value: -0.25px;
  --md-sys-typescale-display-large-tracking-unit: 2px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  /* Display Large font size */
  --md-sys-typescale-display-large-size-value: 57px;
  --md-sys-typescale-display-large-size-unit: 2px;
  --md-sys-typescale-display-large-size: 57px;
  /* Display Large font weight */
  --md-sys-typescale-display-large-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Large font name */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  /* Plain typeface */
  --md-ref-typeface-plain: Roboto;
  /* Brand typeface */
  --md-ref-typeface-brand: Roboto;
  /* Bold weight */
  --md-ref-typeface-weight-bold: 700;
  /* Medium weight */
  --md-ref-typeface-weight-medium: 500;
  /* Regular weight */
  --md-ref-typeface-weight-regular: 400;
}

/* Label Small */
.label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-weight: var(--md-sys-typescale-label-small-weight);
  font-size: var(--md-sys-typescale-label-small-size);
  font-style: var(--md-sys-typescale-label-small-font-style);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-line-height);
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}
/* Label Medium */
.label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-style: var(--md-sys-typescale-label-medium-font-style);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}
/* Label Large */
.label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  font-style: var(--md-sys-typescale-label-large-font-style);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}
/* Body Small */
.body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-weight: var(--md-sys-typescale-body-small-weight);
  font-size: var(--md-sys-typescale-body-small-size);
  font-style: var(--md-sys-typescale-body-small-font-style);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}
/* Body Medium */
.body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-style: var(--md-sys-typescale-body-medium-font-style);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
/* Body Large */
.body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  font-style: var(--md-sys-typescale-body-large-font-style);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-line-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}
/* Title Small */
.title-small {
  font-family: var(--md-sys-typescale-title-small-font);
  font-weight: var(--md-sys-typescale-title-small-weight);
  font-size: var(--md-sys-typescale-title-small-size);
  font-style: var(--md-sys-typescale-title-small-font-style);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  line-height: var(--md-sys-typescale-title-small-line-height);
  text-transform: var(--md-sys-typescale-title-small-text-transform);
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}
/* Title Medium */
.title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-style: var(--md-sys-typescale-title-medium-font-style);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}
/* Title Large */
.title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-weight: var(--md-sys-typescale-title-large-weight);
  font-size: var(--md-sys-typescale-title-large-size);
  font-style: var(--md-sys-typescale-title-large-font-style);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-line-height);
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}
/* Headline Small */
.headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-style: var(--md-sys-typescale-headline-small-font-style);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}
/* Headline Medium */
.headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  font-size: var(--md-sys-typescale-headline-medium-size);
  font-style: var(--md-sys-typescale-headline-medium-font-style);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}
/* Headline Large */
.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  font-style: var(--md-sys-typescale-headline-large-font-style);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}
/* Display Small */
.display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-weight: var(--md-sys-typescale-display-small-weight);
  font-size: var(--md-sys-typescale-display-small-size);
  font-style: var(--md-sys-typescale-display-small-font-style);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  line-height: var(--md-sys-typescale-display-small-line-height);
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}
/* Display Medium */
.display-medium {
  font-family: var(--md-sys-typescale-display-medium-font);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  font-size: var(--md-sys-typescale-display-medium-size);
  font-style: var(--md-sys-typescale-display-medium-font-style);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}
/* Display Large */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-weight: var(--md-sys-typescale-display-large-weight);
  font-size: var(--md-sys-typescale-display-large-size);
  font-style: var(--md-sys-typescale-display-large-font-style);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  line-height: var(--md-sys-typescale-display-large-line-height);
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}


P. Carpeta « css / theme »

Versión para imprimir.

1. css / theme / dark.css

.dark {
  --md-sys-color-primary: rgb(170 199 255);
  --md-sys-color-surface-tint: rgb(170 199 255);
  --md-sys-color-on-primary: rgb(10 48 95);
  --md-sys-color-primary-container: rgb(40 71 119);
  --md-sys-color-on-primary-container: rgb(214 227 255);
  --md-sys-color-secondary: rgb(190 198 220);
  --md-sys-color-on-secondary: rgb(40 49 65);
  --md-sys-color-secondary-container: rgb(62 71 89);
  --md-sys-color-on-secondary-container: rgb(218 226 249);
  --md-sys-color-tertiary: rgb(221 188 224);
  --md-sys-color-on-tertiary: rgb(63 40 68);
  --md-sys-color-tertiary-container: rgb(87 62 92);
  --md-sys-color-on-tertiary-container: rgb(250 216 253);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(17 19 24);
  --md-sys-color-on-surface: rgb(226 226 233);
  --md-sys-color-surface-variant: rgb(68 71 78);
  --md-sys-color-on-surface-variant: rgb(196 198 208);
  --md-sys-color-outline: rgb(142 144 153);
  --md-sys-color-outline-variant: rgb(68 71 78);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(226 226 233);
  --md-sys-color-inverse-on-surface: rgb(46 48 54);
  --md-sys-color-inverse-primary: rgb(65 95 145);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(17 19 24);
  --md-sys-color-surface-bright: rgb(55 57 62);
  --md-sys-color-surface-container-lowest: rgb(12 14 19);
  --md-sys-color-surface-container-low: rgb(25 28 32);
  --md-sys-color-surface-container: rgb(29 32 36);
  --md-sys-color-surface-container-high: rgb(40 42 47);
  --md-sys-color-surface-container-highest: rgb(51 53 58);
}


2. css / theme / light.css

.light {
  --md-sys-color-primary: rgb(65 95 145);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(214 227 255);
  --md-sys-color-on-primary-container: rgb(40 71 119);
  --md-sys-color-secondary: rgb(86 95 113);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(218 226 249);
  --md-sys-color-on-secondary-container: rgb(62 71 89);
  --md-sys-color-tertiary: rgb(112 85 117);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(250 216 253);
  --md-sys-color-on-tertiary-container: rgb(87 62 92);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(25 28 32);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(68 71 78);
  --md-sys-color-outline: rgb(116 119 127);
  --md-sys-color-outline-variant: rgb(196 198 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(46 48 54);
  --md-sys-color-inverse-on-surface: rgb(240 240 247);
  --md-sys-color-inverse-primary: rgb(170 199 255);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(217 217 224);
  --md-sys-color-surface-bright: rgb(249 249 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(243 243 250);
  --md-sys-color-surface-container: rgb(237 237 244);
  --md-sys-color-surface-container-high: rgb(231 232 238);
  --md-sys-color-surface-container-highest: rgb(226 226 233);
}


K. Carpeta « fonts »

Versión para imprimir.

A. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints

Descarga el archivo.

B. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf

Descarga el archivo.

C. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2

Descarga el archivo.

D. fonts / roboto-v32-latin-regular.woff2

Descarga el archivo.

L. Carpeta « img »

Versión para imprimir.

A. img / Escultura_de_coyote.jpeg

B. img / icono2048.png

C. img / maskable_icon.png

D. img / maskable_icon_x128.png

E. img / maskable_icon_x192.png

F. img / maskable_icon_x384.png

G. img / maskable_icon_x48.png

H. img / maskable_icon_x512.png

I. img / maskable_icon_x72.png

J. img / maskable_icon_x96.png

K. img / pexels-craig-dennis-3701822.jpg

L. img / pexels-moises-patrício-10961948.jpg

M. img / screenshot_horizontal.png

N. img / screenshot_vertical.png

M. Carpeta « js »

Versión para imprimir.

A. js / nav-tab-fixed.js

import { resaltaSiEstasEn } from "./lib/resaltaSiEstasEn.js"

export class NavTabFixed extends HTMLElement {

 constructor() {
  super()
  this.creado = false
 }

 connectedCallback() {
  this.classList.add("md-tab", "fixed")

  if (!this.creado) {

   this.innerHTML = /* HTML */`
    <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
     <span class="material-symbols-outlined">home</span>
     Inicio
    </a>
 
    <a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
     <span class="material-symbols-outlined">help</span>
     Ayuda
    </a>`

   this.creado = true

  }

 }

}

customElements.define("nav-tab-fixed", NavTabFixed)

1	import { resaltaSiEstasEn } from "./lib/resaltaSiEstasEn.js"
2
3	export class NavTabFixed extends HTMLElement {
4
5	constructor() {
6	super()
7	this.creado = false
8	}
9
10	connectedCallback() {
11	this.classList.add("md-tab", "fixed")
12
13	if (!this.creado) {
14
15	this.innerHTML = /* HTML */`
16	<a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
17	<span class="material-symbols-outlined">home</span>
18	Inicio
19	</a>
20
21	<a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
22	<span class="material-symbols-outlined">help</span>
23	Ayuda
24	</a>`
25
26	this.creado = true
27
28	}
29
30	}
31
32	}
33
34	customElements.define("nav-tab-fixed", NavTabFixed)

B. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / ES_APPLE.js


1	export const ES_APPLE = /.(iPad\|iPhone\|iPod\|Mac)./.test(navigator.userAgent)

2. js / lib / getAttribute.js

/**
 * @param {HTMLElement} elementoHtml
 * @param {string} nombre
 * @returns {string}
 */
export function getAttribute(elementoHtml, nombre) {
 const valor = elementoHtml.getAttribute(nombre)
 return valor === null ? "" : valor
}

3. js / lib / querySelector.js

/**
 * @template { HTMLElement } T
 * @param { Document | Element | ShadowRoot } raiz
 * @param { string } query
 * @returns { T }
 */
export function querySelector(raiz, query) {
 /** @type { T | null } */
 const resutado = raiz.querySelector(query)
 if (resutado === null)
  throw new Error(`No se encuentra ${query}.`)
 return resutado
}

4. js / lib / registraServiceWorker.js

const nombreDeServiceWorker = "sw.js"

try {
 navigator.serviceWorker.register(nombreDeServiceWorker)
  .then(registro => {
   console.log(nombreDeServiceWorker, "registrado.")
   console.log(registro)
  })
  .catch(error => console.log(error))
} catch (error) {
 console.log(error)
}

1	const nombreDeServiceWorker = "sw.js"
2
3	try {
4	navigator.serviceWorker.register(nombreDeServiceWorker)
5	.then(registro => {
6	console.log(nombreDeServiceWorker, "registrado.")
7	console.log(registro)
8	})
9	.catch(error => console.log(error))
10	} catch (error) {
11	console.log(error)
12	}

5. js / lib / resaltaSiEstasEn.js

/**
 * @param {string[]} paginas
 */
export function resaltaSiEstasEn(paginas) {

 const pathname = location.pathname

 for (const pagina of paginas) {

  if (pathname === pagina) {
   queueMicrotask(() => {
    const tab = document.querySelector(".active")
    if (tab !== null && tab.closest(".scrollable") !== null) {
     tab.scrollIntoView({ inline: "center", block: "end" })
    }
   })
   return `class="active"`
  }

 }

 return ""

}

6. Carpeta « js / lib / custom »

Versión para imprimir.

A. js / lib / custom / md-app-bar.js

import { ES_APPLE } from "../ES_APPLE.js"
import { getAttribute } from "../getAttribute.js"
import { querySelector } from "../querySelector.js"

class MdAppBar extends HTMLElement {

 getContent() {
  return /* HTML */`
   <style>

    :host {
     display: flex;
     box-sizing: border-box;
     align-items: center;
     padding: 0 0.25rem;
     background-color: var(--md-sys-color-surface);
     position: sticky;
     z-index: 1;
     left: env(titlebar-area-x, 0);
     top: env(titlebar-area-y, 0);
     height: env(titlebar-area-height, 4rem);
     width: env(titlebar-area-width, 100%);
    }
    
    :host(.apple) {
     height: env(titlebar-area-height, 3rem);
    }

    :host(.scroll) {
     background-color: var(--md-sys-color-surface-container-low);
    }

    #navigation {
     flex: 0 0 auto;
     overflow: hidden
    }

    #navigation ::slotted(*) {
     color: var(--md-sys-color-on-surface);
    }

    #acciones {
     margin-left: auto;
     flex: 0 0 auto;
     overflow: hidden
    }

    :host(.centered) #navigation,
    :host(.centered) #acciones {
     flex: 0 0 6rem;
     overflow: hidden
    }

    #headline::slotted(*) {
     -webkit-app-region: drag;
     flex: 1 1 auto;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     font-family: var(--md-sys-typescale-title-large-font);
     font-weight: var(--md-sys-typescale-title-large-weight);
     font-size: var(--md-sys-typescale-title-large-size);
     font-style: var(--md-sys-typescale-title-large-font-style);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     line-height: var(--md-sys-typescale-title-large-line-height);
     text-transform: var(--md-sys-typescale-title-large-text-transform);
     text-decoration: var(--md-sys-typescale-title-large-text-decoration);
     color: var(--md-sys-color-on-surface);
    }

    :host(.centered) #headline::slotted(*) {
     flex: 1 1 auto;
     text-align: center
    }

   </style>

   <span id="navigation">
    <slot name="navigation"></slot>
   </span>
   <slot id="headline"></slot>
   <span id="acciones">
    <slot name="action"></slot>
   </span>`
 }

 constructor() {
  super()
  if (ES_APPLE) {
   document.body.classList.add("apple")
   document.body.classList.remove("material")
  } else {
   document.body.classList.add("material")
   document.body.classList.remove("apple")
  }

  /**
   * @private
   * @readonly
   */
  const shadow = this.attachShadow({ mode: "open" })
  shadow.innerHTML = this.getContent()
  this._configuraAction = this._configuraAction.bind(this)
  /**
   * @private
   * @type {number}
   */
  this._posY = 0
  /**
   * @private
   * @type {boolean}
   */
  this._scrolling = false
  /**
    * @private
    * @type { HTMLSlotElement }
    */
  this._navigation = querySelector(shadow, '[name="navigation"]')
  /**
    * @private
    * @type { HTMLSlotElement }
    */
  this._action = querySelector(shadow, '[name="action"]')
  /**
    * @private
    * @type { HTMLHeadingElement | null }
    */
  this._headline = null
  /**
    * @private
    * @type { HTMLElement | null }
    */
  this._adicional = null
  this._action.addEventListener("slotchange", this._configuraAction)
  addEventListener("scroll", () => this._onScroll())
  addEventListener("load", () => this.configurOtros())
 }

 connectedCallback() {
  this.role = "toolbar"
  this._configuraAction()
 }

 configurOtros() {
  const idHeadline = getAttribute(this, "headline")
  if (idHeadline !== "") {
   const headline = document.getElementById(idHeadline)
   if (headline instanceof HTMLHeadingElement) {
    this._headline = headline
    if (this.classList.contains("apple") || this.classList.contains("medium")) {
     headline.classList.add("md-headline", "headline-small")
    } else {
     headline.classList.add("md-headline", "headline-medium")
    }
   }
  }
  const idAdicional = getAttribute(this, "adicional")
  if (idAdicional !== "") {
   this._adicional = document.getElementById(idAdicional)
   if (this._adicional !== null) {
    if (this.classList.contains("apple")) {
     this._adicional.style.top = "env(titlebar-area-height, 3rem)"
    } else {
     this._adicional.style.top = "env(titlebar-area-height, 4rem)"
    }
   }
  }
 }

 _configuraAction() {
  const assignedElements = this._action.assignedElements()
  if (this.isConnected) {
   if (ES_APPLE) {
    this.classList.add("apple")
    this.classList.remove("material")
   } else {
    this.classList.add("material")
    this.classList.remove("apple")
   }
   if (this.classList.contains("centered")) {
    this.classList.remove("centrado")
    this.classList.remove("justificado")
   } else {
    if (ES_APPLE && assignedElements.length <= 1) {
     this.classList.add("centrado")
     this.classList.remove("justificado")
    } else {
     this.classList.add("justificado")
     this.classList.remove("centrado")
    }
   }
  }
 }

 /** @private */
 _onScroll() {
  this._posY = scrollY
  if (!this._scrolling) {
   requestAnimationFrame(() => this._avanza())
  }
  this._scrolling = true
 }

 /** @private */
 _avanza() {
  if (this._posY === 0) {
   this.classList.remove("scroll")
   if (this._headline !== null) {
    if (this._adicional === null) {
     this._headline.classList.remove("scroll")
    } else {
     this._headline.classList.remove("scroll-adicional")
    }
   }
   if (this._adicional !== null) {
    this._adicional.classList.remove("scroll")
   }
  } else {
   this.classList.add("scroll")
   if (this._headline !== null) {
    if (this._adicional === null) {
     this._headline.classList.add("scroll")
    } else {
     this._headline.classList.add("scroll-adicional")
    }
   }
   if (this._adicional !== null) {
    this._adicional.classList.add("scroll")
   }
  }
  this._scrolling = false
 }

}

customElements.define("md-app-bar", MdAppBar)

1	import { ES_APPLE } from "../ES_APPLE.js"
2	import { getAttribute } from "../getAttribute.js"
3	import { querySelector } from "../querySelector.js"
4
5	class MdAppBar extends HTMLElement {
6
7	getContent() {
8	return /* HTML */`
9	<style>
10
11	:host {
12	display: flex;
13	box-sizing: border-box;
14	align-items: center;
15	padding: 0 0.25rem;
16	background-color: var(--md-sys-color-surface);
17	position: sticky;
18	z-index: 1;
19	left: env(titlebar-area-x, 0);
20	top: env(titlebar-area-y, 0);
21	height: env(titlebar-area-height, 4rem);
22	width: env(titlebar-area-width, 100%);
23	}
24
25	:host(.apple) {
26	height: env(titlebar-area-height, 3rem);
27	}
28
29	:host(.scroll) {
30	background-color: var(--md-sys-color-surface-container-low);
31	}
32
33	#navigation {
34	flex: 0 0 auto;
35	overflow: hidden
36	}
37
38	#navigation ::slotted(*) {
39	color: var(--md-sys-color-on-surface);
40	}
41
42	#acciones {
43	margin-left: auto;
44	flex: 0 0 auto;
45	overflow: hidden
46	}
47
48	:host(.centered) #navigation,
49	:host(.centered) #acciones {
50	flex: 0 0 6rem;
51	overflow: hidden
52	}
53
54	#headline::slotted(*) {
55	-webkit-app-region: drag;
56	flex: 1 1 auto;
57	white-space: nowrap;
58	text-overflow: ellipsis;
59	overflow: hidden;
60	font-family: var(--md-sys-typescale-title-large-font);
61	font-weight: var(--md-sys-typescale-title-large-weight);
62	font-size: var(--md-sys-typescale-title-large-size);
63	font-style: var(--md-sys-typescale-title-large-font-style);
64	letter-spacing: var(--md-sys-typescale-title-large-tracking);
65	line-height: var(--md-sys-typescale-title-large-line-height);
66	text-transform: var(--md-sys-typescale-title-large-text-transform);
67	text-decoration: var(--md-sys-typescale-title-large-text-decoration);
68	color: var(--md-sys-color-on-surface);
69	}
70
71	:host(.centered) #headline::slotted(*) {
72	flex: 1 1 auto;
73	text-align: center
74	}
75
76	</style>
77
78	<span id="navigation">
79	<slot name="navigation"></slot>
80	</span>
81	<slot id="headline"></slot>
82	<span id="acciones">
83	<slot name="action"></slot>
84	</span>`
85	}
86
87	constructor() {
88	super()
89	if (ES_APPLE) {
90	document.body.classList.add("apple")
91	document.body.classList.remove("material")
92	} else {
93	document.body.classList.add("material")
94	document.body.classList.remove("apple")
95	}
96
97	/**
98	* @private
99	* @readonly
100	*/
101	const shadow = this.attachShadow({ mode: "open" })
102	shadow.innerHTML = this.getContent()
103	this._configuraAction = this._configuraAction.bind(this)
104	/**
105	* @private
106	* @type {number}
107	*/
108	this._posY = 0
109	/**
110	* @private
111	* @type {boolean}
112	*/
113	this._scrolling = false
114	/**
115	* @private
116	* @type { HTMLSlotElement }
117	*/
118	this._navigation = querySelector(shadow, '[name="navigation"]')
119	/**
120	* @private
121	* @type { HTMLSlotElement }
122	*/
123	this._action = querySelector(shadow, '[name="action"]')
124	/**
125	* @private
126	* @type { HTMLHeadingElement \| null }
127	*/
128	this._headline = null
129	/**
130	* @private
131	* @type { HTMLElement \| null }
132	*/
133	this._adicional = null
134	this._action.addEventListener("slotchange", this._configuraAction)
135	addEventListener("scroll", () => this._onScroll())
136	addEventListener("load", () => this.configurOtros())
137	}
138
139	connectedCallback() {
140	this.role = "toolbar"
141	this._configuraAction()
142	}
143
144	configurOtros() {
145	const idHeadline = getAttribute(this, "headline")
146	if (idHeadline !== "") {
147	const headline = document.getElementById(idHeadline)
148	if (headline instanceof HTMLHeadingElement) {
149	this._headline = headline
150	if (this.classList.contains("apple") \|\| this.classList.contains("medium")) {
151	headline.classList.add("md-headline", "headline-small")
152	} else {
153	headline.classList.add("md-headline", "headline-medium")
154	}
155	}
156	}
157	const idAdicional = getAttribute(this, "adicional")
158	if (idAdicional !== "") {
159	this._adicional = document.getElementById(idAdicional)
160	if (this._adicional !== null) {
161	if (this.classList.contains("apple")) {
162	this._adicional.style.top = "env(titlebar-area-height, 3rem)"
163	} else {
164	this._adicional.style.top = "env(titlebar-area-height, 4rem)"
165	}
166	}
167	}
168	}
169
170	_configuraAction() {
171	const assignedElements = this._action.assignedElements()
172	if (this.isConnected) {
173	if (ES_APPLE) {
174	this.classList.add("apple")
175	this.classList.remove("material")
176	} else {
177	this.classList.add("material")
178	this.classList.remove("apple")
179	}
180	if (this.classList.contains("centered")) {
181	this.classList.remove("centrado")
182	this.classList.remove("justificado")
183	} else {
184	if (ES_APPLE && assignedElements.length <= 1) {
185	this.classList.add("centrado")
186	this.classList.remove("justificado")
187	} else {
188	this.classList.add("justificado")
189	this.classList.remove("centrado")
190	}
191	}
192	}
193	}
194
195	/** @private */
196	_onScroll() {
197	this._posY = scrollY
198	if (!this._scrolling) {
199	requestAnimationFrame(() => this._avanza())
200	}
201	this._scrolling = true
202	}
203
204	/** @private */
205	_avanza() {
206	if (this._posY === 0) {
207	this.classList.remove("scroll")
208	if (this._headline !== null) {
209	if (this._adicional === null) {
210	this._headline.classList.remove("scroll")
211	} else {
212	this._headline.classList.remove("scroll-adicional")
213	}
214	}
215	if (this._adicional !== null) {
216	this._adicional.classList.remove("scroll")
217	}
218	} else {
219	this.classList.add("scroll")
220	if (this._headline !== null) {
221	if (this._adicional === null) {
222	this._headline.classList.add("scroll")
223	} else {
224	this._headline.classList.add("scroll-adicional")
225	}
226	}
227	if (this._adicional !== null) {
228	this._adicional.classList.add("scroll")
229	}
230	}
231	this._scrolling = false
232	}
233
234	}
235
236	customElements.define("md-app-bar", MdAppBar)

N. favicon.ico

O. .htaccess

Este archivo configura las respuestas del servidor..
Lo utilizan principalmente servidores como Apache o Nginx.
Configura el mime type para el archivo de manifiesto y sedhabilita el uso de la cache general de http..

AddType application/manifest+json .webmanifest

ExpiresActive On

Header set Cache-Control "max-age=1, must-revalidate"


1	AddType application/manifest+json .webmanifest
2
3	ExpiresActive On
4
5	Header set Cache-Control "max-age=1, must-revalidate"
6

P. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

Q. instruccionesListadoSw.txt

Generar el listado de archivos del sw.js desde Visual Studio Code.
1. Abrir una terminal desde el menú 
    Terminal > New Terminal

2. Desde la terminal introducir la orden:
    Get-ChildItem -path . -Recurse | Select Directory,Name | Out-File archivos.txt

3. Abrir el archivo generado, que se llama
    archivos.txt
   y sobre este, realizar los pasos que siguen:

4. Quita del archivo archivos.txt:
    * el encabezado,
    * todas las carpetas,
    * todos los archivos dentro de .vscode como:
       * el archivo .vscode/settings.json,
       * el archivo .vscode/launch.json,
    * el archivo .htaccess,
    * el archivo archivos.txt,
    * este archivo (instruccionesListadoSw.txt),
    * el archivo jsconfig.json,
    * el archivo sw.js,
    * el archivo de la base de datos, que termina en ".db" y
      está en la carpeta php,
    * todos los archivos de php y
    * las líneas en blanco del final

5. Cambia los \ por / desde Visual Studio Code con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece introduce lo siguiente:
    Find:\
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
 
6. Coloca las comillas y coma del final de cada línea desde Visual
   Studio Code con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s*$
    Replace:",

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

7. Marca la carpeta inicial, presiona la combinación de teclas:

    Shift+Ctrl+L

    borra la selección, teclea " y luego ESC

8. Cambia las secuencias de espacios por / con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s+
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

9. Cambia las "/ por " con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, quita la selección del botón
            ".*"
           e introduce lo siguiente:
    Find:"/
    Replace:"

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

10. Copia el texto al archivo
     sw.js
    en el contenido del arreglo llamado ARCHIVOS, pero recuerda
    mantener el último elemento, que dice:
     "/"

R. archivos.txt

"ayuda.html",
"favicon.ico",
"index.html",
"site.webmanifest",
"css/baseline.css",
"css/colors.css",
"css/elevation.css",
"css/estilos.css",
"css/material-symbols-outlined.css",
"css/md-headline.css",
"css/md-list.css",
"css/md-tab.css",
"css/motion.css",
"css/palette.css",
"css/roboto.css",
"css/shape.css",
"css/state.css",
"css/transicion_pestanas.css",
"css/typography.css",
"css/theme/dark.css",
"css/theme/light.css",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
"fonts/roboto-v32-latin-regular.woff2",
"img/Escultura_de_coyote.jpeg",
"img/icono2048.png",
"img/maskable_icon.png",
"img/maskable_icon_x128.png",
"img/maskable_icon_x192.png",
"img/maskable_icon_x384.png",
"img/maskable_icon_x48.png",
"img/maskable_icon_x512.png",
"img/maskable_icon_x72.png",
"img/maskable_icon_x96.png",
"img/pexels-craig-dennis-3701822.jpg",
"img/pexels-moises-patrício-10961948.jpg",
"img/screenshot_horizontal.png",
"img/screenshot_vertical.png",
"js/nav-tab-fixed.js",
"js/lib/ES_APPLE.js",
"js/lib/getAttribute.js",
"js/lib/querySelector.js",
"js/lib/registraServiceWorker.js",
"js/lib/resaltaSiEstasEn.js",
"js/lib/custom/md-app-bar.js",
"ungap/custom-elements.js",

S. Carpeta « ungap »

Versión para imprimir.

A. ungap / custom-elements.js

Descarga el archivo.

T. Resumen

En esta lección se presentó la estructura básica de una PWA con Material Design 3 Expressive.

7. PWA con formulario y Material Design 3 Expressive

Versión para imprimir.

A. Introduccion

En esta lección se presenta una PWA que despliega un formulario y usa Material Design 3 Expressive.
Puedes probar el ejemplo en https://pwaform.rf.gd/.

B. Referencias

Sitios de Material Design
Material.io: Material Design es una guía de diseño para aplicaciones multiplataforma. La encuentras en https://m3.material.io/.
Herramienta para selección de colores
Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
Adaptación multiplataforma: La forma de adaptar Material Design en distintas plataformas está en https://material.io/design/platform-guidance/cross-platform-adaptation.html

C. Hazlo funcionar (con videos)

Prueba e instala, de preferencia con Chrome, el sitio https://pwaform.rf.gd/.
Descarga el archivo /src/pwaform.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Crea los íconos del proyecto con https://www.photopea.com/.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Prueba tu PWA.
Publica tu PWA.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

D. Hazlo funcionar (texto)

Prueba e instala, de preferencia con Chrome, el sitio pwaform.rf.gd/.
Descarga el archivo /src/pwaform.zip y descompáctalo.
Crea tu proyecto en GitHub pages:
1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
  - Mantén la selección Public.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
5. Entra al repositorio y selecciona ⚙️ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto. Si haces cambios, clic en Save.
6. En la misma pestaña de ⚙️ Settings selecciona ◯ Actions, luego selecciona General y en Actions permissions selecciona el rediobotón Allow xxxx, and select non-xxxx, actions and reusable workflows y abajo la casilla de verificación Allow actions created by GitHub y cliquea el botón Save.
Importa el proyecto de GitHub a Visual Studio Code:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo, excepto el archivo .htaccess.
Edita los archivos que desees.
Crea los íconos del proyecto con https://www.photopea.com/.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.
Haz al menos una captura de la ventana de tu aplicación con orientación vertical y otra con orientación horizontal, todas ellas de 320 px como mínimo y 3,840 px como máximo.
Coloca las capturas en la carpeta img y asegúrate de que estén declaradas en el archivo site.webmanifest.
Cuando desarrolles, es incómodo modificar la versión cada que realizas cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
5. En la Pestaña Aplicación (o Application en inglés) selecciona Archivo de manifiesto (o Manifest file en inglés). Esta herramienta analiza la estructura del archivo de manifiesto y te indica si hay un error.
6. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamiento en caché (o Cache storage en inglés). Aquí puedes revisar si el caché de la aplicación se llenó correctamente. En caso de que esté vacío, es que hubo algún error durante la carga y la app se ejecuta más lenta.
Cuando usas GitHub pages, antes de subir los archivos, no debes modificar el valor de VERSION en el archivo sw.js.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.
Si usas GitHub pages:
1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.
2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.
3. A partir de este momento, espera al menos 11 minutos para modificar el valor de VERSION en el archivo sw.js y volver a subir el proyecto.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

E. Archivos

Haz clic en los triángulos para expandir las carpetas

F. index.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">

 <title>PWA con Formulario</title>

 <meta name="description" content="Ejemplo de PWA con Formulario">

 <!-- <script type="module" src="js/lib/registraServiceWorker.js"></script> -->
 <script type="module" src="js/lib/manejaErrores.js"></script>

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>
 <script type="module" src="js/nav-tab-fixed.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-tab.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-filled-text-field.css">
 <link rel="stylesheet" href="css/md-filled-button.css">
 <link rel="stylesheet" href="css/md-outline-button.css">

</head>

<body>

 <form id="formulario" novalidate>

  <md-app-bar class="centered" adicional="tab">

   <h1>PWA con Formulario</h1>

  </md-app-bar>

  <nav-tab-fixed id="tab"></nav-tab-fixed>

  <section>

   <!-- Usa
    class="float"
   cuando quieras que la etiqueta esté arriba todo el tiempo. -->
   <p>
    <label class="md-filled-text-field float">
     <output name="respuesta">Todavía no hay respuesta</output>
     <span>Respuesta</span>
    </label>
   </p>

   <p>
    <label class="md-filled-text-field">
     <input name="nombre" required placeholder="Nombre*">
     <span>Nombre *</span>
     <small id="supportingNombre">Obligatorio</small>
    </label>
   </p>

   <p>
    <label class="md-filled-text-field">
     <input name="email" type="email" placeholder="Email">
     <span accesskey="M">Email</span>
     <small id="supportingEmail">Texto con formato de email</small>
    </label>
   </p>

   <p>
    <label class="md-filled-text-field float">
     <input name="fecha" type="date" placeholder="Fecha">
     <span>Fecha de nacimiento</span>
    </label>
   </p>

   <p>
    <label class="md-filled-text-field">
     <textarea name="dieccion" rows="3" placeholder="Dirección"></textarea>
     <span>Dirección</span>
    </label>
   </p>

   <p>
    <button id="botonSaludo" class="md-filled-button">Saludar</button>
    <button id="botonDatos" class="md-outline-button">Datos</button>
   </p>

  </section>

 </form>

 <script type="module">

  import { muestraTextoDeAyuda } from "./js/lib/muestraTextoDeAyuda.js"

  formulario.nombre.addEventListener("input", copiaMensajes)
  formulario.email.addEventListener("input", copiaMensajes)
  formulario.addEventListener("submit", procesa)

  function copiaMensajes() {
   muestraTextoDeAyuda(formulario.nombre, supportingNombre, "Obligatorio")
   muestraTextoDeAyuda(
    formulario.email, supportingEmail, "Texto con formato de email"
   )
  }

  /**
   * @param {SubmitEvent} evt
   */
  function procesa(evt) {
   evt.preventDefault()
   copiaMensajes()
   if (
    formulario.nombre.validity.valid
    && formulario.email.validity.valid
    && formulario.fecha.validity.valid
    && formulario.dieccion.validity.valid
   ) {
    const botonSeleccionado = evt.submitter
    if (botonSeleccionado === botonSaludo) {
     saluda()
    } else if (botonSeleccionado === botonDatos) {
     datos()
    }
   }
  }

  function saluda() {
   formulario.respuesta.value = `Hola ${formulario.nombre.value}`
  }

  function datos() {
   formulario.respuesta.value =
    `Nombre: ${formulario.nombre.value} Email: ${formulario.email.value}`
  }

 </script>

</body>

</html>

G. ayuda.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">

 <title>Ayuda - PWA con Formulario</title>

 <!-- <script type="module" src="js/lib/registraServiceWorker.js"></script> -->

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>
 <script type="module" src="js/nav-tab-fixed.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-headline.css">
 <link rel="stylesheet" href="css/md-tab.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-list.css">

</head>

<body>

 <md-app-bar adicional="tab">

  <h1>Ayuda</h1>

 </md-app-bar>

 <nav-tab-fixed id="tab"></nav-tab-fixed>

 <section>

  <ul class="md-list">
   <li class="md-two-line">
    <span class="headline">
     Título
    </span>
    <span class="supporting">
     PWA con Material Design
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Descripción
    </span>
    <span class="supporting">
     Ejemplos de vistas móviles.
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Autor
    </span>
    <span class="supporting">
     Gilberto Pacheco Gallegos
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Derechos de autor
    </span>
    <span class="supporting">
     © 2025 Gilberto Pacheco Gallegos
    </span>
   </li>
   <li class="md-three-line">
    <span class="headline">
     Este software usa la librería para PWA
    </span>
    <span class="supporting">
     Esta obra de Gilberto Pacheco Gallegos está bajo una
     <a target="_blank" rel="license noreferrer"
       href="http://creativecommons.org/licenses/by/4.0/">
      Licencia Creative Commons Atribución 4.0 Internacional</a></span>
   </li>
   <li>
    <a class="md-three-line" target="_blank" rel=”noreferrer”
      href="https://fonts.google.com/icons">
     <span class="headline">
      También usa Material Symbols
     </span>
     <span class="supporting">
      Desarrollada por Google bajo licencia Apache 2.0
     </span>
    </a>
   </li>
  </ul>

 </section>

 <nav-drw></nav-drw>

</body>

</html>

H. site.webmanifest

Este archivo sirve para configurar los instaladores de la aplicación.

Explicación de las propiedades

short_name

Nombre corto. Normalmente se despliega en dispositivos móviles. Máximo 20 caracteres.

name

Nombre largo. Normalmente se despliega en computadoras de escritorio. Máximo 30 caracteres.

id

Identificador del archivo de instalación. Normalmente es la ruta del archivo inicial de la app.

start_url

Ruta del archivo inicial de la app.

display

Forma de mostrar la app. El término standalone significa que no se muestra la barra de navegación del navegador web.

theme_color

Color de la barra de estado (en dispositivos móviles) o de título (en computadoras de escritorio) de la app.

background_color

Color de fondo de la pantalla desplah en dispositivos móviles.

description

Describe el propósito de la aplicación. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

screenshots

icons

Listado de íconos en distintas resoluciones para los instaladores de la app. Se selecciona el que se vea mejor según las característocas del dispositivo.

src

Url de la imagen dentro de la app.

sizes

Dimensiones en pixeles de la imagen, anchoxalto.

type

Tipo mime de la imagen.

purpose

Forma en que se usa la imagen.

maskable: La imagen puede recortarse de forma segura para tomar distintas formas, como círculos, gotas, cuadrados con esquinas redondeadas, etc. Normalmente se usa para dispositivos móviles.
any: No se puede asegurar nada sobre la imagen. Normalmente se usa para dispositivos de escritorio.

Normalmente debe proporcionarse un juego de íconos con purpose any y otro juego de íconos con purpose maskable.

form_factor

Orientación de una screenshot.

wide: La screenshot tiene una orientación horizontal. Normalmente la creenshot se usa para dispositivos de escritorio.
narrow: La screenshot tiene una orientación vertical. Normalmente la creenshot se usa para dispositivos móviles.

Debes incluir al menos una screenshot con "form_factor": "wide" y otra con "form_factor": "narrow".

label

Descripción de una screenshot. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

{
 "short_name": "Formulario PWA",
 "name": "PWA con Formulario",
 "id": "/index.html",
 "start_url": "/index.html",
 "display": "standalone",
 "theme_color": "#fffbfe",
 "background_color": "#fffbfe",
 "display_override": [
  "window-controls-overlay"
 ],
 "description": "PWA con componentes de Material Design.",
 "screenshots": [
  {
   "src": "/img/screenshot_horizontal.png",
   "sizes": "760x384",
   "type": "image/png",
   "form_factor": "wide",
   "label": "PWA con Material Design"
  },
  {
   "src": "/img/screenshot_vertical.png",
   "sizes": "557x759",
   "type": "image/png",
   "form_factor": "narrow",
   "label": "PWA con Material Design (2)"
  }
 ],
 "icons": [
  {
    "purpose": "maskable",
    "sizes": "2730x2730",
    "src": "img/maskable_icon.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "48x48",
    "src": "img/maskable_icon_x48.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "72x72",
    "src": "img/maskable_icon_x72.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "96x96",
    "src": "img/maskable_icon_x96.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "128x128",
    "src": "img/maskable_icon_x128.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "192x192",
    "src": "img/maskable_icon_x192.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "384x384",
    "src": "img/maskable_icon_x384.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "512x512",
    "src": "img/maskable_icon_x512.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "2730x2730",
    "src": "img/maskable_icon.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "48x48",
    "src": "img/maskable_icon_x48.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "72x72",
    "src": "img/maskable_icon_x72.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "96x96",
    "src": "img/maskable_icon_x96.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "128x128",
    "src": "img/maskable_icon_x128.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "192x192",
    "src": "img/maskable_icon_x192.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "384x384",
    "src": "img/maskable_icon_x384.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "512x512",
    "src": "img/maskable_icon_x512.png",
    "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "2048x2048",
   "src": "img/icono2048.png",
   "type": "image/png"
  }
 ]
}

I. sw.js

/* Este archivo debe estar colocado en la carpeta raíz del sitio.
 * 
 * Cualquier cambio en el contenido de este archivo hace que el service
 * worker se reinstale. */

/**
 * Cambia el número de la versión cuando cambia el contenido de los
 * archivos.
 * 
 * El número a la izquierda del punto (.), en este caso <q>1</q>, se
 * conoce como número mayor y se cambia cuando se realizan
 * modificaciones grandes o importantes.
 * 
 * El número a la derecha del punto (.), en este caso <q>00</q>, se
 * conoce como número menor y se cambia cuando se realizan
 * modificaciones menores.
 */
const VERSION = "1.00"

/**
 * Nombre de la carpeta de caché.
 */
const CACHE = "pwamd"

/**
 * Archivos requeridos para que la aplicación funcione fuera de
 * línea.
 */
const ARCHIVOS = [
"ayuda.html",
"favicon.ico",
"index.html",
"site.webmanifest",
"css/baseline.css",
"css/colors.css",
"css/elevation.css",
"css/estilos.css",
"css/material-symbols-outlined.css",
"css/md-filled-button.css",
"css/md-filled-text-field.css",
"css/md-headline.css",
"css/md-list.css",
"css/md-outline-button.css",
"css/md-tab.css",
"css/motion.css",
"css/palette.css",
"css/roboto.css",
"css/shape.css",
"css/state.css",
"css/transicion_pestanas.css",
"css/typography.css",
"css/theme/dark.css",
"css/theme/light.css",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
"fonts/roboto-v32-latin-regular.woff2",
"img/icono2048.png",
"img/maskable_icon.png",
"img/maskable_icon_x128.png",
"img/maskable_icon_x192.png",
"img/maskable_icon_x384.png",
"img/maskable_icon_x48.png",
"img/maskable_icon_x512.png",
"img/maskable_icon_x72.png",
"img/maskable_icon_x96.png",
"img/screenshot_horizontal.png",
"img/screenshot_vertical.png",
"js/nav-tab-fixed.js",
"js/lib/ES_APPLE.js",
"js/lib/getAttribute.js",
"js/lib/manejaErrores.js",
"js/lib/muestraError.js",
"js/lib/muestraTextoDeAyuda.js",
"js/lib/ProblemDetailsError.js",
"js/lib/querySelector.js",
"js/lib/registraServiceWorker.js",
"js/lib/resaltaSiEstasEn.js",
"js/lib/custom/md-app-bar.js",
"ungap/custom-elements.js",
 "/"
]

// Verifica si el código corre dentro de un service worker.
if (self instanceof ServiceWorkerGlobalScope) {
 // Evento al empezar a instalar el servide worker,
 self.addEventListener("install",
  (/** @type {ExtendableEvent} */ evt) => {
   console.log("El service worker se está instalando.")
   evt.waitUntil(llenaElCache())
  })

 // Evento al solicitar información a la red.
 self.addEventListener("fetch", (/** @type {FetchEvent} */ evt) => {
  if (evt.request.method === "GET") {
   evt.respondWith(buscaLaRespuestaEnElCache(evt))
  }
 })

 // Evento cuando el service worker se vuelve activo.
 self.addEventListener("activate",
  () => console.log("El service worker está activo."))
}

async function llenaElCache() {
 console.log("Intentando cargar caché:", CACHE)
 // Borra todos los cachés.
 const keys = await caches.keys()
 for (const key of keys) {
  await caches.delete(key)
 }
 // Abre el caché de este service worker.
 const cache = await caches.open(CACHE)
 // Carga el listado de ARCHIVOS.
 await cache.addAll(ARCHIVOS)
 console.log("Cache cargado:", CACHE)
 console.log("Versión:", VERSION)
}

/** @param {FetchEvent} evt */
async function buscaLaRespuestaEnElCache(evt) {
 // Abre el caché.
 const cache = await caches.open(CACHE)
 const request = evt.request
 /* Busca la respuesta a la solicitud en el contenido del caché, sin
  * tomar en cuenta la parte después del símbolo "?" en la URL. */
 const response = await cache.match(request, { ignoreSearch: true })
 if (response === undefined) {
  /* Si no la encuentra, empieza a descargar de la red y devuelve
   * la promesa. */
  return fetch(request)
 } else {
  // Si la encuentra, devuelve la respuesta encontrada en el caché.
  return response
 }
}

J. Carpeta « css »

Versión para imprimir.

A. css / baseline.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

@import url(palette.css);
@import url(typography.css);
@import url(colors.css);
@import url(shape.css);
@import url(motion.css);
@import url(state.css);
@import url(elevation.css);
@import url(theme/light.css) screen and (prefers-color-scheme: light);
@import url(theme/dark.css) screen and (prefers-color-scheme: dark);


B. css / colors.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

.primary {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.on-primary {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-on-primary);
}
.primary-container {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
}
.on-primary-container {
  color: var(--md-sys-color-primary-container);
  background-color: var(--md-sys-color-on-primary-container);
}
.secondary {
  color: var(--md-sys-color-on-secondary);
  background-color: var(--md-sys-color-secondary);
}
.on-secondary {
  color: var(--md-sys-color-secondary);
  background-color: var(--md-sys-color-on-secondary);
}
.secondary-container {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
.on-secondary-container {
  color: var(--md-sys-color-secondary-container);
  background-color: var(--md-sys-color-on-secondary-container);
}
.tertiary {
  color: var(--md-sys-color-on-tertiary);
  background-color: var(--md-sys-color-tertiary);
}
.on-tertiary {
  color: var(--md-sys-color-tertiary);
  background-color: var(--md-sys-color-on-tertiary);
}
.tertiary-container {
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
}
.on-tertiary-container {
  color: var(--md-sys-color-tertiary-container);
  background-color: var(--md-sys-color-on-tertiary-container);
}
.background {
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
}
.surface {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
}
.surface-variant {
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);
}
.on-surface-variant {
  color: var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-on-surface-variant);
}
.outline {
  border: 1px solid var(--md-sys-color-outline);
}
.inverse-surface {
  color: var(--md-sys-color-on-inverse-surface);
  background-color: var(--md-sys-color-inverse-surface);
}
.on-inverse-surface {
  color: var(--md-sys-color-inverse-surface);
  background-color: var(--md-sys-color-on-inverse-surface);
}
.inverse-primary {
  color: var(--md-sys-color-on-inverse-primary);
  background-color: var(--md-sys-color-inverse-primary);
}
.on-inverse-primary {
  color: var(--md-sys-color-inverse-primary);
  background-color: var(--md-sys-color-on-inverse-primary);
}
.surface-tint {
  background-color: var(--md-sys-color-on-surface-tint);
}
.error {
  color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
}
.on-error {
  color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-on-error);
}
.error-container {
  color: var(--md-sys-color-on-error-container);
  background-color: var(--md-sys-color-error-container);
}
.on-error-container {
  color: var(--md-sys-color-error-container);
  background-color: var(--md-sys-color-on-error-container);
}
.black {
  background-color: var(--md-ref-palette-black);
}
.black-text {
  color: var(--md-ref-palette-black);
}
.white {
  background-color: var(--md-ref-palette-white);
}
.white-text {
  color: var(--md-ref-palette-white);
}


C. css / elevation.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Surface tint color */
  --md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
  /* +5 */
  --md-sys-elevation-level5-value: 12px;
  --md-sys-elevation-level5-unit: 1px;
  --md-sys-elevation-level5: 12px;
  /* +4 */
  --md-sys-elevation-level4-value: 8px;
  --md-sys-elevation-level4-unit: 1px;
  --md-sys-elevation-level4: 8px;
  /* +3 */
  --md-sys-elevation-level3-value: 6px;
  --md-sys-elevation-level3-unit: 1px;
  --md-sys-elevation-level3: 6px;
  /* +2 */
  --md-sys-elevation-level2-value: 3px;
  --md-sys-elevation-level2-unit: 1px;
  --md-sys-elevation-level2: 3px;
  /* +1 */
  --md-sys-elevation-level1-value: 1px;
  --md-sys-elevation-level1-unit: 1px;
  --md-sys-elevation-level1: 1px;
  /* 0 */
  --md-sys-elevation-level0-value: 0px;
  --md-sys-elevation-level0-unit: 1px;
  --md-sys-elevation-level0: 0px;
}
.elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}
.elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}
.elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}
.elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}
.elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}
.elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}


D. css / estilos.css

/* Definiciones para Material Design 3  */
@import url(baseline.css);
/* Fonts utilizados */
@import url(roboto.css);

html {
 /* Indica los temas del sistema operativo que son soportados. */
 color-scheme: light dark;
 --tabWidth: 3.75rem;
 --anchoNav: 22.5rem;
}

body>section,
form>section {
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

/* Quita un borde rojo que coloca Firefox. */
:-moz-ui-invalid {
 box-shadow: none;
}

body {
 margin: 0;
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 color: var(--md-sys-color-on-background);
 background-color: var(--md-sys-color-background);
 /* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
 + custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
 opacity: 0;
 animation-name: fouc;
 animation-fill-mode: forwards;
 animation-duration: 1.5s;
}

@keyframes fouc {
 to {
  opacity: 1;
 }
}

html {
 --Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
 --colIntIos: white;
 --colIntIosOnBk: #2acc2a;
 --colIntIosOnBkFc: #1bbb1b;
 --colIntIosOffBk: #dbdbdb;
 --colIntIosOffBkFc: #BDBDBD;
 /* Plain typeface */
 --md-ref-typeface-plain: var(--Font);
 /* Brand typeface */
 --md-ref-typeface-brand: var(--Font);
 --md-sys-typescale-label-large-weight-prominent:
  var(--md-ref-typeface-weight-bold);
 --md-box_shadow_level4:
  0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
 --md-box_shadow_level3:
  0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
 --md-box_shadow_level2:
  0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
 --md-box_shadow_level1:
  0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
 --md-box_shadow_level0: none;
 --iconSize: 1.5rem;
 --avatarSize: 2.5rem;
 --imageSize: 3.5rem;
 --videoWidth: 7.125rem;
 --videoHeight: 4rem;
 --scroll-headline-duracion: 2s;
 --md-sys-state-focus-indicator-outer-offset: 0.125rem;
 --md-sys-state-focus-indicator-thickness: 0.1875rem;
 /* Pressed state layer opacity */
 --state-pressed-transparency-percentage: 84%;
 /* Focus state layer opacity */
 --state-focus-transparency-percentage: 88%;
 /* Hover state layer opacity */
 --state-hover-transparency-percentage: 92%;
}

p {
 margin: 1rem;
}

a {
 color: var(--md-sys-color-on-background);
}

@media (prefers-color-scheme: light) {
 html {
  --md-riple-color: #00000020;
 }
}

@media (prefers-color-scheme: dark) {
 html {
  --md-riple-color: #ffffff40;
 }
}

@keyframes md-ripple {

 from {
  background-size: 100%;
 }

 to {
  background-size: 15000%;
 }

}

@keyframes salePorLaIzquierda {
 to {
  translate: -100vw 0;
 }
}

@keyframes entraPorLaDerecha {
 from {
  translate: 100vw 0;
 }
}

@keyframes aparece {
 from {
  opacity: 0;
 }
}

@keyframes desvanece {
 to {
  opacity: 0;
 }
}

1	/* Definiciones para Material Design 3 */
2	@import url(baseline.css);
3	/* Fonts utilizados */
4	@import url(roboto.css);
5
6	html {
7	/* Indica los temas del sistema operativo que son soportados. */
8	color-scheme: light dark;
9	--tabWidth: 3.75rem;
10	--anchoNav: 22.5rem;
11	}
12
13	body>section,
14	form>section {
15	max-width: 600px;
16	margin-left: auto;
17	margin-right: auto;
18	}
19
20	/* Quita un borde rojo que coloca Firefox. */
21	:-moz-ui-invalid {
22	box-shadow: none;
23	}
24
25	body {
26	margin: 0;
27	font-family: var(--md-sys-typescale-body-large-font);
28	font-weight: var(--md-sys-typescale-body-large-weight);
29	font-size: var(--md-sys-typescale-body-large-size);
30	font-style: var(--md-sys-typescale-body-large-font-style);
31	letter-spacing: var(--md-sys-typescale-body-large-tracking);
32	line-height: var(--md-sys-typescale-body-large-line-height);
33	text-transform: var(--md-sys-typescale-body-large-text-transform);
34	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
35	color: var(--md-sys-color-on-background);
36	background-color: var(--md-sys-color-background);
37	/* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
38	+ custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
39	opacity: 0;
40	animation-name: fouc;
41	animation-fill-mode: forwards;
42	animation-duration: 1.5s;
43	}
44
45	@keyframes fouc {
46	to {
47	opacity: 1;
48	}
49	}
50
51	html {
52	--Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
53	--colIntIos: white;
54	--colIntIosOnBk: #2acc2a;
55	--colIntIosOnBkFc: #1bbb1b;
56	--colIntIosOffBk: #dbdbdb;
57	--colIntIosOffBkFc: #BDBDBD;
58	/* Plain typeface */
59	--md-ref-typeface-plain: var(--Font);
60	/* Brand typeface */
61	--md-ref-typeface-brand: var(--Font);
62	--md-sys-typescale-label-large-weight-prominent:
63	var(--md-ref-typeface-weight-bold);
64	--md-box_shadow_level4:
65	0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
66	--md-box_shadow_level3:
67	0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
68	--md-box_shadow_level2:
69	0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
70	--md-box_shadow_level1:
71	0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
72	--md-box_shadow_level0: none;
73	--iconSize: 1.5rem;
74	--avatarSize: 2.5rem;
75	--imageSize: 3.5rem;
76	--videoWidth: 7.125rem;
77	--videoHeight: 4rem;
78	--scroll-headline-duracion: 2s;
79	--md-sys-state-focus-indicator-outer-offset: 0.125rem;
80	--md-sys-state-focus-indicator-thickness: 0.1875rem;
81	/* Pressed state layer opacity */
82	--state-pressed-transparency-percentage: 84%;
83	/* Focus state layer opacity */
84	--state-focus-transparency-percentage: 88%;
85	/* Hover state layer opacity */
86	--state-hover-transparency-percentage: 92%;
87	}
88
89	p {
90	margin: 1rem;
91	}
92
93	a {
94	color: var(--md-sys-color-on-background);
95	}
96
97	@media (prefers-color-scheme: light) {
98	html {
99	--md-riple-color: #00000020;
100	}
101	}
102
103	@media (prefers-color-scheme: dark) {
104	html {
105	--md-riple-color: #ffffff40;
106	}
107	}
108
109	@keyframes md-ripple {
110
111	from {
112	background-size: 100%;
113	}
114
115	to {
116	background-size: 15000%;
117	}
118
119	}
120
121	@keyframes salePorLaIzquierda {
122	to {
123	translate: -100vw 0;
124	}
125	}
126
127	@keyframes entraPorLaDerecha {
128	from {
129	translate: 100vw 0;
130	}
131	}
132
133	@keyframes aparece {
134	from {
135	opacity: 0;
136	}
137	}
138
139	@keyframes desvanece {
140	to {
141	opacity: 0;
142	}
143	}

E. css / material-symbols-outlined.css

@font-face {
 font-family: 'Material Symbols Outlined';
 font-style: normal;
 src:
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'),
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype');
}

.material-symbols-outlined {
 font-family: 'Material Symbols Outlined';
 font-weight: normal;
 font-style: normal;
 font-size: 1.5rem;
 width: 1.5rem;
 height: 1.5rem;
 /* Preferred icon size */
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
}

F. css / md-filled-button.css

/* container */
.md-filled-button::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-primary);
}

/* state layer */
.md-filled-button::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

/* label, shape */
.md-filled-button {
 position: relative;
 box-sizing: border-box;
 border-radius: 1.25rem;
 height: 2.5rem;
 line-height: 2.5rem;
 padding: 0 1.5rem;
 border: none;
 background-color: transparent;
 box-shadow: var(--md-box_shadow_level0);
 font-family: var(--md-sys-typescale-label-large-font);
 font-weight: var(--md-sys-typescale-label-large-weight);
 font-size: var(--md-sys-typescale-label-large-size);
 font-style: var(--md-sys-typescale-label-large-font-style);
 letter-spacing: var(--md-sys-typescale-label-large-tracking);
 text-transform: var(--md-sys-typescale-label-large-text-transform);
 text-decoration: var(--md-sys-typescale-label-large-text-decoration);
 color: var(--md-sys-color-on-primary);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

/* label, shape */
.md-filled-button:hover {
 color: var(--md-sys-color-on-primary);
 box-shadow: var(--md-box_shadow_level1);
}

/* state layer */
.md-filled-button:hover::after {
 background-color: var(--md-sys-color-on-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

/* label, shape */
.md-filled-button:focus {
 outline: none;
 color: var(--md-sys-color-on-primary);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-filled-button:focus::after {
 background-color: var(--md-sys-color-on-primary);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

/* label, shape */
.md-filled-button:active {
 color: var(--md-sys-color-on-primary);
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-sys-color-on-primary-container) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-filled-button:active::after {
 background-color: var(--md-sys-color-on-primary);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

/* label, shape */
.md-filled-button:disabled {
 background-color: transparent !important;
 color: var(--md-sys-color-on-surface) !important;
 opacity: 0.38 !important;
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* container */
.md-filled-button:disabled::before {
 background-color: var(--md-sys-color-on-surface) !important;
 opacity: 0.12 !important;
}

/* state layer */
.md-filled-button:disabled::after {
 background-color: transparent !important;
 opacity: 1 !important;
}

G. css / md-filled-text-field.css

.md-filled-text-field {
 position: relative;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 padding-top: calc(0.5rem + var(--md-sys-typescale-body-small-line-height));
 border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
 border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
 overflow: hidden;
}

/* container */
.md-filled-text-field::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-surface-container-highest);
}

/* state layer */
.md-filled-text-field::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-filled-text-field span,
.md-filled-text-field label {
 position: absolute;
 top: 0.5rem;
 left: 1rem;
 right: 1rem;
 display: block;
 transform: translateY(1rem);
 transition-property: transform;
 transition-duration: var(--md-sys-motion-duration-300);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 color: var(--md-sys-color-on-surface-variant);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}

.md-filled-text-field :not(:placeholder-shown)+span,
.md-filled-text-field :not(:placeholder-shown)+label,
.md-filled-text-field .populated+span,
.md-filled-text-field .populated+label,
.md-filled-text-field:focus-within span,
.md-filled-text-field:focus-within label,
.md-filled-text-field.float span,
.md-filled-text-field.float label {
 transform: translateY(0);
 font-family: var(--md-sys-typescale-body-small-font);
 font-weight: var(--md-sys-typescale-body-small-weight);
 font-size: var(--md-sys-typescale-body-small-size);
 font-style: var(--md-sys-typescale-body-small-font-style);
 letter-spacing: var(--md-sys-typescale-body-small-tracking);
 line-height: var(--md-sys-typescale-body-small-line-height);
 text-transform: var(--md-sys-typescale-body-small-text-transform);
 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}

.md-filled-text-field :not(label, span, small) {
 position: relative;
 caret-color: var(--md-sys-color-primary);
 min-height: 2rem;
 box-sizing: border-box;
 padding-left: 1rem;
 padding-bottom: 0.5rem;
 padding-right: 1rem;
 border: none;
 resize: none;
 color: var(--md-sys-color-on-surface);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 background-color: transparent;
 outline: none;
 border-bottom-width: 0.0625rem;
 border-bottom-style: solid;
 border-bottom-color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field ::placeholder {
 color: transparent;
}

.md-filled-text-field small {
 display: block;
 color: var(--md-sys-color-on-surface-variant);
 background-color: var(--md-sys-color-background);
 font-family: var(--md-sys-typescale-body-small-font);
 font-weight: var(--md-sys-typescale-body-small-weight);
 font-size: var(--md-sys-typescale-body-small-size);
 font-style: var(--md-sys-typescale-body-small-font-style);
 letter-spacing: var(--md-sys-typescale-body-small-tracking);
 line-height: var(--md-sys-typescale-body-small-line-height);
 text-transform: var(--md-sys-typescale-body-small-text-transform);
 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
 padding: 0.25rem 1rem 0 1rem;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.md-filled-text-field:hover span,
.md-filled-text-field:hover label {
 color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field:hover :not(label, span, small) {
 padding-bottom: 0.5rem;
 border-bottom-width: 0.0625rem;
 border-bottom-color: var(--md-sys-color-on-surface);
}

.md-filled-text-field:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-filled-text-field:hover small {
 color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field:focus-within span,
.md-filled-text-field:focus-within label {
 color: var(--md-sys-color-primary);
}

.md-filled-text-field :focus {
 color: var(--md-sys-color-on-surface);
 outline: none;
 padding-bottom: 0.4375rem;
 border-bottom-width: 0.125rem;
 border-bottom-color: var(--md-sys-color-primary);
}

.md-filled-text-field:hover :focus {
 padding-bottom: 0.4375rem;
 border-bottom-width: 0.125rem;
}

.md-filled-text-field:focus-within small {
 color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field :invalid {
 color: var(--md-sys-color-on-surface);
 border-bottom-color: var(--md-sys-color-error);
}

.md-filled-text-field :invalid+span,
.md-filled-text-field :invalid+label {
 color: var(--md-sys-color-error);
}

.md-filled-text-field :invalid~small,
.md-filled-text-field:hover :invalid~small,
.md-filled-text-field:focus-within .input-text:invalid~small {
 color: var(--md-sys-color-error);
}

.md-filled-text-field :invalid:focus {
 caret-color: var(--md-sys-color-error);
 border-bottom-color: var(--md-sys-color-error);
}

.md-filled-text-field:hover :invalid {
 color: var(--md-sys-color-on-surface);
 border-bottom-color: var(--md-sys-color-error);
}

H. css / md-headline.css

.md-headline {
 box-sizing: border-box;
 margin: 0;
 color: var(--md-sys-color-on-surface);
 background-color: var(--md-sys-color-surface);
 transition-property: color;
 transition-duration: var(--md-sys-motion-duration-1000);
 transition-timing-function: ease-in;
}

.md-headline.scroll-adicional {
 color: var(--md-sys-color-surface-container-low);
 background-color: var(--md-sys-color-surface-container-low);
}

.md-headline.scroll {
 color: var(--md-sys-color-surface);
}

.md-headline.headline-small {
 padding: 0 1rem 1.5rem 1rem;
}

.md-headline.headline-medium {
 padding: 0 1rem 1.75rem 1rem;
}

md-app-bar.centered~.md-headline {
 text-align: center;
}

md-app-bar[headline] h1 {
 opacity: 0;
 transition-property: opacity;
 transition-duration: var(--md-sys-motion-duration-1000);
}

md-app-bar[headline].scroll h1 {
 opacity: 1;
 transition-timing-function: ease-in;
}

I. css / md-list.css

.md-list {
 margin: 0.5rem 0;
 padding: 0;
 list-style-type: none;
}

.md-list .md-one-line,
.md-list .md-two-line,
.md-list .md-three-line {
 position: relative;
 display: flex;
 box-sizing: border-box;
}

/* container */
.md-list .md-one-line::before,
.md-list .md-two-line::before,
.md-list .md-three-line::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-surface);
}

/* state layer */
.md-list .md-one-line::after,
.md-list .md-two-line::after,
.md-list .md-three-line::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-list .md-one-line {
 align-items: center;
 gap: 1rem;
 min-height: 3.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-one-line.video,
.md-list .md-two-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-two-line,
.md-list .md-three-line {
 flex-flow: column;
}

.md-list .md-two-line {
 justify-content: center;
 min-height: 4.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video,
.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 display: grid;
 column-gap: 1rem;
 row-gap: 0;
 grid-template-areas:
  "img headline"
  "img supporting";
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video {
 align-content: center;
 grid-template-rows: 1fr 1fr;
}

.md-list .md-two-line.icon,
.md-list .md-three-line.icon {
 grid-template-columns: var(--iconSize) 1fr;
}

.md-list .md-two-line.avatar,
.md-list .md-three-line.avatar {
 grid-template-columns: var(--avatarSize) 1fr;
}

.md-list .md-two-line.image,
.md-list .md-three-line.image {
 grid-template-columns: var(--imageSize) 1fr;
}

.md-list .md-two-line.video,
.md-list .md-three-line.video {
 grid-template-columns: var(--videoWidth) 1fr;
}

.md-list .md-three-line {
 align-content: flex-start;
 min-height: 5.5rem;
 padding: 0.75rem 1.5rem 0.75rem 1rem;
}

.md-list .md-three-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 align-content: start;
 grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr;
}

/* state layer */
.md-list .md-one-line:hover::after,
.md-list .md-two-line:hover::after,
.md-list .md-three-line:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

/* state layer */
.md-list a.md-one-line:focus::after,
.md-list a.md-two-line:focus::after,
.md-list a.md-three-line:focus::after,
.md-list a.md-one-line:focus-visible::after,
.md-list a.md-two-line:focus-visible::after,
.md-list a.md-three-line:focus-visible::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-list a:focus,
.md-list a:focus-visible {
 outline: none;
}

.md-list a:active {
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-list a.md-one-line:active::after,
.md-list a.md-two-line:active::after,
.md-list a.md-three-line:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-list a.md-two-line,
.md-list a.md-three-line {
 text-decoration: none;
}

.md-list a.md-two-line .headline,
.md-list a.md-three-line .headline {
 text-decoration: underline;
}

.md-list .headline {
 grid-area: headline;
 display: block;
 box-sizing: border-box;
 color: var(--md-sys-color-on-surface);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 max-height: var(--md-sys-typescale-body-large-line-height);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.md-list .md-two-line.icon .headline,
.md-list .md-two-line.avatar .headline,
.md-list .md-two-line.image .headline,
.md-list .md-two-line.video .headline,
.md-list .md-three-line.icon .headline,
.md-list .md-three-line.avatar .headline,
.md-list .md-three-line.image .headline,
.md-list .md-three-line.video .headline {
 align-self: end;
}

.md-list .supporting {
 grid-area: supporting;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 box-sizing: border-box;
 align-self: start;
 font-family: var(--md-sys-typescale-body-medium-font);
 font-weight: var(--md-sys-typescale-body-medium-weight);
 font-size: var(--md-sys-typescale-body-medium-size);
 font-style: var(--md-sys-typescale-body-medium-font-style);
 letter-spacing: var(--md-sys-typescale-body-medium-tracking);
 line-height: var(--md-sys-typescale-body-medium-line-height);
 text-transform: var(--md-sys-typescale-body-medium-text-transform);
 text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}

.md-list .md-two-line .supporting {
 max-height: var(--md-sys-typescale-body-medium-line-height);
 line-clamp: 1;
 -webkit-line-clamp: 1;
}

.md-list .md-three-line .supporting {
 max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height));
 line-clamp: 2;
 -webkit-line-clamp: 2;
}

.md-list .avatar img,
.md-list .avatar label,
.md-list .avatar .material-symbols-outlined:first-child {
 flex-shrink: 0;
 background-color: var(--md-sys-color-primary-container);
 color: var(--md-sys-color-on-primary-container);
 border-radius: 50%;
 width: var(--avatarSize);
 height: var(--avatarSize);
}

.md-list .avatar label {
 display: inline-block;
 font-family: var(--md-sys-typescale-title-medium-font);
 font-weight: var(--md-sys-typescale-title-medium-weight);
 font-size: var(--md-sys-typescale-title-medium-size);
 font-style: var(--md-sys-typescale-title-medium-font-style);
 letter-spacing: var(--md-sys-typescale-title-medium-tracking);
 line-height: var(--md-sys-typescale-title-medium-line-height);
 text-transform: var(--md-sys-typescale-title-medium-text-transform);
 text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
 overflow: hidden;
}

.md-list .avatar .material-symbols-outlined:first-child {
 font-size: var(--avatarSize);
}

.md-list .avatar.md-two-line img,
.md-list .avatar.md-two-line label,
.md-list .avatar.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .avatar.md-three-line img,
.md-list .avatar.md-three-line label,
.md-list .avatar.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .icon img,
.md-list .icon .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--iconSize);
 height: var(--iconSize);
}

.md-list .icon .material-symbols-outlined:first-child {
 font-size: var(--iconSize);
}

.md-list .icon.md-two-line img,
.md-list .icon.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .icon.md-three-line img,
.md-list .icon.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .video img {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--videoWidth);
 height: var(--videoHeight);
}

.md-list .video.md-two-line img {
 grid-area: img;
 align-self: center;
}

.md-list .video.md-three-line img {
 grid-area: img;
 align-self: start;
}

.md-list .image img,
.md-list .image .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--imageSize);
 height: var(--imageSize);
}

.md-list .image .material-symbols-outlined:first-child {
 font-size: var(--imageSize);
}

.md-list .image.md-two-line img,
.md-list .image.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .image.md-three-line img,
.md-list .image.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

J. css / md-outline-button.css

.md-outline-button {
 position: relative;
 box-sizing: border-box;
 border-radius: 1.25rem;
 height: 2.5rem;
 padding: 0 1.5rem;
 border: 0.0625rem solid var(--md-sys-color-outline);
 background-color: transparent;
 box-shadow: var(--md-box_shadow_level0);
 font-family: var(--md-sys-typescale-label-large-font);
 font-weight: var(--md-sys-typescale-label-large-weight);
 font-size: var(--md-sys-typescale-label-large-size);
 font-style: var(--md-sys-typescale-label-large-font-style);
 letter-spacing: var(--md-sys-typescale-label-large-tracking);
 text-transform: var(--md-sys-typescale-label-large-text-transform);
 text-decoration: var(--md-sys-typescale-label-large-text-decoration);
 color: var(--md-sys-color-primary);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

/* state layer */
.md-outline-button::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-outline-button:hover {
 color: var(--md-sys-color-primary);
 border-color: var(--md-sys-color-outline);
}

/* state layer */
.md-outline-button:hover::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-outline-button:focus {
 outline: none;
 color: var(--md-sys-color-primary);
 border-color: var(--md-sys-color-outline);
}

/* state layer */
.md-outline-button:focus::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-outline-button:active {
 color: var(--md-sys-color-primary);
 border-color: var(--md-sys-color-outline);
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-outline-button:active::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-outline-button:disabled {
 background-color: transparent !important;
 border-color: var(--md-sys-color-on-surface) !important;
 color: var(--md-sys-color-on-surface) !important;
 opacity: 0.38 !important;
}

/* container */
.md-outline-button:disabled::after {
 background-color: transparent !important;
 opacity: 1 !important;
}

K. css / md-tab.css

.md-tab {
 display: flex;
 background-color: transparent;
 align-items: stretch;
 flex-wrap: nowrap;
 overflow-x: auto;
 position: sticky;
 z-index: 1;
}

.md-tab.fixed {
 justify-content: center;
}

.md-tab.scrollable {
 padding-left: 2rem;
 gap: 1rem;
}

.md-tab.scroll {
 background-color: var(--md-sys-color-surface-container-low);
}

.md-tab a {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: start;
 align-items: center;
 color: var(--md-sys-color-on-surface-variant);
 font-family: var(--md-sys-typescale-title-small-font);
 font-weight: var(--md-sys-typescale-title-small-weight);
 font-size: var(--md-sys-typescale-title-small-size);
 font-style: var(--md-sys-typescale-title-small-font-style);
 letter-spacing: var(--md-sys-typescale-title-small-tracking);
 line-height: var(--md-sys-typescale-title-small-line-height);
 text-transform: var(--md-sys-typescale-title-small-text-transform);
 text-decoration: var(--md-sys-typescale-title-small-text-decoration);
 text-align: center;
 box-sizing: border-box;
 border-bottom: 0.1875rem solid var(--md-sys-color-surface);
}

.md-tab.fixed a {
 flex: 0 0 var(--tabWidth);
}

.md-tab.scrollable a {
 flex: 0 0 auto;
}

.md-tab a.active {
 border-bottom-color: var(--md-sys-color-primary);
}

/* state layer */
.md-tab a::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-tab span {
 font-size: var(--iconSize);
 height: var(--iconSize);
 width: var(--iconSize);
 color: var(--md-sys-color-on-surface-variant);
}

.md-tab .active span {
 color: var(--md-sys-color-primary);
}

.md-tab a:hover {
 color: var(--md-sys-color-on-surface);
}

/* state layer */
.md-tab a:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a.active:hover {
 color: var(--md-sys-color-primary);
}

/* state layer */
.md-tab a.active:hover::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a:hover span {
 color: var(--md-sys-color-on-surface);
}

.md-tab a.active:hover span {
 color: var(--md-sys-color-primary);
}

.md-tab a:focus {
 outline: none;
}

/* state layer */
.md-tab a:focus::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

/* state layer */
.md-tab a.active:focus::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a:active {
 background-position: center;
 background-image:
   radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
}

/* state layer */
.md-tab a:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

/* state layer */
.md-tab a.active:active::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

L. css / motion.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Emphasized decelerate easing (out) */
  --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
  --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
  --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
  --md-sys-motion-easing-emphasized-decelerate-y1: 1;
  /* Emphasized accelerate easing (in) */
  --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
  --md-sys-motion-easing-emphasized-accelerate-y0: 0;
  --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
  --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
  /* Standard decelerate easing (out) */
  --md-sys-motion-easing-standard-decelerate-x0: 0;
  --md-sys-motion-easing-standard-decelerate-y0: 0;
  --md-sys-motion-easing-standard-decelerate-x1: 0;
  --md-sys-motion-easing-standard-decelerate-y1: 1;
  /* Standard accelerate easing (in) */
  --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
  --md-sys-motion-easing-standard-accelerate-y0: 0;
  --md-sys-motion-easing-standard-accelerate-x1: 1;
  --md-sys-motion-easing-standard-accelerate-y1: 1;
  /* Duration 1000ms */
  --md-sys-motion-duration-1000: 1000ms;
  /* Duration 900ms */
  --md-sys-motion-duration-900: 900ms;
  /* Duration 800ms */
  --md-sys-motion-duration-800: 800ms;
  /* Duration 700ms */
  --md-sys-motion-duration-700: 700ms;
  /* Duration 600ms */
  --md-sys-motion-duration-600: 600ms;
  /* Duration 550ms */
  --md-sys-motion-duration-550: 550ms;
  /* Duration 500ms */
  --md-sys-motion-duration-500: 500ms;
  /* Duration 450ms */
  --md-sys-motion-duration-450: 450ms;
  /* Duration 400ms */
  --md-sys-motion-duration-400: 400ms;
  /* Duration 350ms */
  --md-sys-motion-duration-350: 350ms;
  /* Duration 300ms */
  --md-sys-motion-duration-300: 300ms;
  /* Duration 250ms */
  --md-sys-motion-duration-250: 250ms;
  /* Duration 200ms */
  --md-sys-motion-duration-200: 200ms;
  /* Duration 150ms */
  --md-sys-motion-duration-150: 150ms;
  /* Duration 100ms */
  --md-sys-motion-duration-100: 100ms;
  /* Duration 50ms */
  --md-sys-motion-duration-50: 50ms;
  /* Standard easing (in and out) */
  --md-sys-motion-easing-standard-x0: 0.20000000298023224;
  --md-sys-motion-easing-standard-y0: 0;
  --md-sys-motion-easing-standard-x1: 0;
  --md-sys-motion-easing-standard-y1: 1;
  /* Linear easing */
  --md-sys-motion-easing-linear-x0: 0;
  --md-sys-motion-easing-linear-y0: 0;
  --md-sys-motion-easing-linear-x1: 1;
  --md-sys-motion-easing-linear-y1: 1;
  /* Emphasized */
  --md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
  --md-sys-motion-easing-emphasized-y0: 0;
  --md-sys-motion-easing-emphasized-x1: 0;
  --md-sys-motion-easing-emphasized-y1: 1;
  /* Motion path */
  --md-sys-motion-path-standard-path: 1;
}
.duration-50 {
  transition-duration: var(--md-sys-motion-duration-50);
}
.duration-100 {
  transition-duration: var(--md-sys-motion-duration-100);
}
.duration-150 {
  transition-duration: var(--md-sys-motion-duration-150);
}
.duration-200 {
  transition-duration: var(--md-sys-motion-duration-200);
}
.duration-250 {
  transition-duration: var(--md-sys-motion-duration-250);
}
.duration-300 {
  transition-duration: var(--md-sys-motion-duration-300);
}
.duration-350 {
  transition-duration: var(--md-sys-motion-duration-350);
}
.duration-400 {
  transition-duration: var(--md-sys-motion-duration-400);
}
.duration-450 {
  transition-duration: var(--md-sys-motion-duration-450);
}
.duration-500 {
  transition-duration: var(--md-sys-motion-duration-500);
}
.duration-550 {
  transition-duration: var(--md-sys-motion-duration-550);
}
.duration-600 {
  transition-duration: var(--md-sys-motion-duration-600);
}
.duration-700 {
  transition-duration: var(--md-sys-motion-duration-700);
}
.duration-800 {
  transition-duration: var(--md-sys-motion-duration-800);
}
.duration-900 {
  transition-duration: var(--md-sys-motion-duration-900);
}
.duration-1000 {
  transition-duration: var(--md-sys-motion-duration-1000);
}
.easing-standard {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-x0),
    var(--md-sys-motion-easing-standard-y0),
    var(--md-sys-motion-easing-standard-x1),
    var(--md-sys-motion-easing-standard-y1)
  );
}
.easing-linear {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-linear-x0),
    var(--md-sys-motion-easing-linear-y0),
    var(--md-sys-motion-easing-linear-x1),
    var(--md-sys-motion-easing-linear-y1)
  );
}
.easing-standard-accelerate {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-accelerate-x0),
    var(--md-sys-motion-easing-standard-accelerate-y0),
    var(--md-sys-motion-easing-standard-accelerate-x1),
    var(--md-sys-motion-easing-standard-accelerate-y1)
  );
}
.easing-standard-decelerate {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-decelerate-x0),
    var(--md-sys-motion-easing-standard-decelerate-y0),
    var(--md-sys-motion-easing-standard-decelerate-x1),
    var(--md-sys-motion-easing-standard-decelerate-y1)
  );
}
.easing-emphasized {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-emphasized-x0),
    var(--md-sys-motion-easing-emphasized-y0),
    var(--md-sys-motion-easing-emphasized-x1),
    var(--md-sys-motion-easing-emphasized-y1)
  );
}


M. css / palette.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Error 0 */
  --md-ref-palette-error0: #000000ff;
  /* Error 10 */
  --md-ref-palette-error10: #410e0bff;
  /* Error 20 */
  --md-ref-palette-error20: #601410ff;
  /* Error 30 */
  --md-ref-palette-error30: #8c1d18ff;
  /* Error 40 */
  --md-ref-palette-error40: #b3261eff;
  /* Error 50 */
  --md-ref-palette-error50: #dc362eff;
  /* Error 60 */
  --md-ref-palette-error60: #e46962ff;
  /* Error 70 */
  --md-ref-palette-error70: #ec928eff;
  /* Error 80 */
  --md-ref-palette-error80: #f2b8b5ff;
  /* Error 90 */
  --md-ref-palette-error90: #f9dedcff;
  /* Error 95 */
  --md-ref-palette-error95: #fceeeeff;
  /* Error 99 */
  --md-ref-palette-error99: #fffbf9ff;
  /* Error 100 */
  --md-ref-palette-error100: #ffffffff;
  /* Tertiary 0 */
  --md-ref-palette-tertiary0: #000000ff;
  /* Tertiary 10 */
  --md-ref-palette-tertiary10: #31111dff;
  /* Tertiary 20 */
  --md-ref-palette-tertiary20: #492532ff;
  /* Tertiary 30 */
  --md-ref-palette-tertiary30: #633b48ff;
  /* Tertiary 40 */
  --md-ref-palette-tertiary40: #7d5260ff;
  /* Tertiary 50 */
  --md-ref-palette-tertiary50: #986977ff;
  /* Tertiary 60 */
  --md-ref-palette-tertiary60: #b58392ff;
  /* Tertiary 70 */
  --md-ref-palette-tertiary70: #d29dacff;
  /* Tertiary 80 */
  --md-ref-palette-tertiary80: #efb8c8ff;
  /* Tertiary 90 */
  --md-ref-palette-tertiary90: #ffd8e4ff;
  /* Tertiary 95 */
  --md-ref-palette-tertiary95: #ffecf1ff;
  /* Tertiary 99 */
  --md-ref-palette-tertiary99: #fffbfaff;
  /* Tertiary 100 */
  --md-ref-palette-tertiary100: #ffffffff;
  /* Secondary 0 */
  --md-ref-palette-secondary0: #000000ff;
  /* Secondary 10 */
  --md-ref-palette-secondary10: #1d192bff;
  /* Secondary 20 */
  --md-ref-palette-secondary20: #332d41ff;
  /* Secondary 30 */
  --md-ref-palette-secondary30: #4a4458ff;
  /* Secondary 40 */
  --md-ref-palette-secondary40: #625b71ff;
  /* Secondary 50 */
  --md-ref-palette-secondary50: #7a7289ff;
  /* Secondary 60 */
  --md-ref-palette-secondary60: #958da5ff;
  /* Secondary 70 */
  --md-ref-palette-secondary70: #b0a7c0ff;
  /* Secondary 80 */
  --md-ref-palette-secondary80: #ccc2dcff;
  /* Secondary 90 */
  --md-ref-palette-secondary90: #e8def8ff;
  /* Secondary 95 */
  --md-ref-palette-secondary95: #f6edffff;
  /* Secondary 99 */
  --md-ref-palette-secondary99: #fffbfeff;
  /* Secondary 100 */
  --md-ref-palette-secondary100: #ffffffff;
  /* Primary 0 */
  --md-ref-palette-primary0: #000000ff;
  /* Primary 10 */
  --md-ref-palette-primary10: #21005dff;
  /* Primary 20 */
  --md-ref-palette-primary20: #381e72ff;
  /* Primary 30 */
  --md-ref-palette-primary30: #4f378bff;
  /* Primary 40 */
  --md-ref-palette-primary40: #6750a4ff;
  /* Primary 50 */
  --md-ref-palette-primary50: #7f67beff;
  /* Primary 60 */
  --md-ref-palette-primary60: #9a82dbff;
  /* Primary 70 */
  --md-ref-palette-primary70: #b69df8ff;
  /* Primary 80 */
  --md-ref-palette-primary80: #d0bcffff;
  /* Primary 90 */
  --md-ref-palette-primary90: #eaddffff;
  /* Primary 95 */
  --md-ref-palette-primary95: #f6edffff;
  /* Primary 99 */
  --md-ref-palette-primary99: #fffbfeff;
  /* Primary 100 */
  --md-ref-palette-primary100: #ffffffff;
  /* Neutral Variant 0 */
  --md-ref-palette-neutral-variant0: #000000ff;
  /* Neutral Variant 10 */
  --md-ref-palette-neutral-variant10: #1d1a22ff;
  /* Neutral Variant 20 */
  --md-ref-palette-neutral-variant20: #322f37ff;
  /* Neutral Variant 30 */
  --md-ref-palette-neutral-variant30: #49454fff;
  /* Neutral Variant 40 */
  --md-ref-palette-neutral-variant40: #605d66ff;
  /* Neutral Variant 50 */
  --md-ref-palette-neutral-variant50: #79747eff;
  /* Neutral Variant 60 */
  --md-ref-palette-neutral-variant60: #938f99ff;
  /* Neutral Variant 70 */
  --md-ref-palette-neutral-variant70: #aea9b4ff;
  /* Neutral Variant 80 */
  --md-ref-palette-neutral-variant80: #cac4d0ff;
  /* Neutral Variant 90 */
  --md-ref-palette-neutral-variant90: #e7e0ecff;
  /* Neutral Variant 95 */
  --md-ref-palette-neutral-variant95: #f5eefaff;
  /* Neutral Variant 99 */
  --md-ref-palette-neutral-variant99: #fffbfeff;
  /* Neutral Variant 100 */
  --md-ref-palette-neutral-variant100: #ffffffff;
  /* Neutral 0 */
  --md-ref-palette-neutral0: #000000ff;
  /* Neutral 10 */
  --md-ref-palette-neutral10: #1c1b1fff;
  /* Neutral 20 */
  --md-ref-palette-neutral20: #313033ff;
  /* Neutral 30 */
  --md-ref-palette-neutral30: #484649ff;
  /* Neutral 40 */
  --md-ref-palette-neutral40: #605d62ff;
  /* Neutral 50 */
  --md-ref-palette-neutral50: #787579ff;
  /* Neutral 60 */
  --md-ref-palette-neutral60: #939094ff;
  /* Neutral 70 */
  --md-ref-palette-neutral70: #aeaaaeff;
  /* Neutral 80 */
  --md-ref-palette-neutral80: #c9c5caff;
  /* Neutral 90 */
  --md-ref-palette-neutral90: #e6e1e5ff;
  /* Neutral 95 */
  --md-ref-palette-neutral95: #f4eff4ff;
  /* Neutral 99 */
  --md-ref-palette-neutral99: #fffbfeff;
  /* Neutral 100 */
  --md-ref-palette-neutral100: #ffffffff;
  /* Black */
  --md-ref-palette-black: #000000ff;
  /* White */
  --md-ref-palette-white: #ffffffff;
}


N. css / roboto.css

/* roboto-regular - latin */
@font-face {
 /* Revisa
  * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
  * para otras opciones. */
 font-display: swap;
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2');
}

O. css / shape.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Fully rounded */
  --md-sys-shape-corner-full-family: 3px;
  /* Extra large top rounding */
  --md-sys-shape-corner-extra-large-top-family: 1px;
  --md-sys-shape-corner-extra-large-top-default-size: 0px;
  --md-sys-shape-corner-extra-large-top-top-left: 28px;
  --md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
  --md-sys-shape-corner-extra-large-top-top-right: 28px;
  /* Extra large rounding */
  --md-sys-shape-corner-extra-large-family: 1px;
  --md-sys-shape-corner-extra-large-default-size-unit: 1px;
  --md-sys-shape-corner-extra-large-default-size: 28px;
  /* Large top rounding */
  --md-sys-shape-corner-large-top-family: 1px;
  --md-sys-shape-corner-large-top-default-size-unit: 1px;
  --md-sys-shape-corner-large-top-default-size: 0px;
  --md-sys-shape-corner-large-top-top-left-unit: 1px;
  --md-sys-shape-corner-large-top-top-left: 16px;
  --md-sys-shape-corner-large-top-top-right-unit: 1px;
  --md-sys-shape-corner-large-top-top-right: 16px;
  /* Large end rounding */
  --md-sys-shape-corner-large-end-family: 1px;
  --md-sys-shape-corner-large-end-default-size-unit: 1px;
  --md-sys-shape-corner-large-end-default-size: 0px;
  --md-sys-shape-corner-large-end-top-right-unit: 1px;
  --md-sys-shape-corner-large-end-top-right: 16px;
  --md-sys-shape-corner-large-end-bottom-right-unit: 1px;
  --md-sys-shape-corner-large-end-bottom-right: 16px;
  /* Large rounding */
  --md-sys-shape-corner-large-family: 1px;
  --md-sys-shape-corner-large-default-size-unit: 1px;
  --md-sys-shape-corner-large-default-size: 16px;
  /* Medium rounding */
  --md-sys-shape-corner-medium-family: 1px;
  --md-sys-shape-corner-medium-default-size-unit: 1px;
  --md-sys-shape-corner-medium-default-size: 12px;
  /* Small rounding */
  --md-sys-shape-corner-small-family: 1px;
  --md-sys-shape-corner-small-default-size-unit: 1px;
  --md-sys-shape-corner-small-default-size: 8px;
  /* Extra small top rounding */
  --md-sys-shape-corner-extra-small-top-family: 1px;
  --md-sys-shape-corner-extra-small-top-default-size-unit: 1px;
  --md-sys-shape-corner-extra-small-top-default-size: 0px;
  --md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
  --md-sys-shape-corner-extra-small-top-top-left: 4px;
  --md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
  --md-sys-shape-corner-extra-small-top-top-right: 4px;
  /* Extra small rounding */
  --md-sys-shape-corner-extra-small-family: 1px;
  --md-sys-shape-corner-extra-small-default-size-unit: 1px;
  --md-sys-shape-corner-extra-small-default-size: 4px;
  /* No rounding */
  --md-sys-shape-corner-none-family: 1px;
  --md-sys-shape-corner-none-default-size-unit: 1px;
  --md-sys-shape-corner-none-default-size: 0px;

  --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);
  --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);
  --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);
}

.shape-none {
  border-radius: var(--md-sys-shape-corner-none-default-size);
}
.shape-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small-default-size);
}
.shape-small {
  border-radius: var(--md-sys-shape-corner-small-default-size);
}
.shape-medium {
  border-radius: var(--md-sys-shape-corner-medium-default-size);
}
.shape-large {
  border-radius: var(--md-sys-shape-corner-large-default-size);
}
.shape-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large-default-size);
}
.extra-small-top {
  border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
}
.large-end {
  border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right);
  border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right);
}
.large-top {
  border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right);
}
.extra-large-top {
  border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right);
}


P. css / state.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Dragged state layer opacity */
  --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
  /* Pressed state layer opacity */
  --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
  /* Focus state layer opacity */
  --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
  /* Hover state layer opacity */
  --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
}
.hover-state-layer {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
}
.pressed-state-layer {
  opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
.dragged-state-layer {
  opacity: var(--md-sys-state-dragged-state-layer-opacity);
}
.focus-state-layer {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
}


Q. css / transicion_pestanas.css

@view-transition {
 navigation: auto;
}

#headline {
 view-transition-name: encabezado;
}

main {
 view-transition-name: contenido;
}

::view-transition-group(encabezado) {
 animation-duration: var(--md-sys-motion-duration-1000);
}

::view-transition-group(contenido) {
 animation-duration: var(--md-sys-motion-duration-1000);
}

html::view-transition-old(encabezado) {
 animation-name: salePorLaIzquierda;
}

html::view-transition-new(encabezado) {
 animation-name: entraPorLaDerecha;
}

html::view-transition-old(contenido) {
 animation-name: salePorLaIzquierda;
}

html::view-transition-new(contenido) {
 animation-duration: var(--md-sys-motion-duration-700);
 animation-name: entraPorLaDerecha;
}

R. css / typography.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

/* This file is generated */

/* DO NOT EDIT */

:root {
  /* Label Small */
  --md-sys-typescale-label-small-text-transform: unset;
  --md-sys-typescale-label-small-axis-value: unset;
  --md-sys-typescale-label-small-font-style: unset;
  --md-sys-typescale-label-small-text-decoration: unset;
  /* Label Small line height */
  --md-sys-typescale-label-small-line-height-value: 16px;
  --md-sys-typescale-label-small-line-height-unit: 2px;
  --md-sys-typescale-label-small-line-height: 16px;
  /* Label Small font tracking */
  --md-sys-typescale-label-small-tracking-value: 0.5px;
  --md-sys-typescale-label-small-tracking-unit: 2px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  /* Label Small font size */
  --md-sys-typescale-label-small-size-value: 11px;
  --md-sys-typescale-label-small-size-unit: 2px;
  --md-sys-typescale-label-small-size: 11px;
  /* Label Small font weight */
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
  /* Label Small font name */
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  /* Label Medium */
  --md-sys-typescale-label-medium-axis-value: unset;
  --md-sys-typescale-label-medium-font-style: unset;
  --md-sys-typescale-label-medium-text-decoration: unset;
  /* Label Medium text transform */
  --md-sys-typescale-label-medium-text-transform: 1;
  /* Label Medium line height */
  --md-sys-typescale-label-medium-line-height-value: 16px;
  --md-sys-typescale-label-medium-line-height-unit: 2px;
  --md-sys-typescale-label-medium-line-height: 16px;
  /* Label Medium font tracking */
  --md-sys-typescale-label-medium-tracking-value: 0.5px;
  --md-sys-typescale-label-medium-tracking-unit: 2px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  /* Label Medium font size */
  --md-sys-typescale-label-medium-size-value: 12px;
  --md-sys-typescale-label-medium-size-unit: 2px;
  --md-sys-typescale-label-medium-size: 12px;
  /* Label Medium font weight */
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
  /* Label Medium font name */
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  /* Label Large */
  --md-sys-typescale-label-large-text-transform: unset;
  --md-sys-typescale-label-large-axis-value: unset;
  --md-sys-typescale-label-large-font-style: unset;
  --md-sys-typescale-label-large-text-decoration: unset;
  /* Label Large line height */
  --md-sys-typescale-label-large-line-height-value: 20px;
  --md-sys-typescale-label-large-line-height-unit: 2px;
  --md-sys-typescale-label-large-line-height: 20px;
  /* Label Large font tracking */
  --md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
  --md-sys-typescale-label-large-tracking-unit: 2px;
  --md-sys-typescale-label-large-tracking: 0.10000000149011612px;
  /* Label Large font size */
  --md-sys-typescale-label-large-size-value: 14px;
  --md-sys-typescale-label-large-size-unit: 2px;
  --md-sys-typescale-label-large-size: 14px;
  /* Label Large font weight */
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
  /* Label Large font name */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  /* Body Small */
  --md-sys-typescale-body-small-text-transform: unset;
  --md-sys-typescale-body-small-axis-value: unset;
  --md-sys-typescale-body-small-font-style: unset;
  --md-sys-typescale-body-small-text-decoration: unset;
  /* Body Small line height */
  --md-sys-typescale-body-small-line-height-value: 16px;
  --md-sys-typescale-body-small-line-height-unit: 2px;
  --md-sys-typescale-body-small-line-height: 16px;
  /* Body Small font tracking */
  --md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
  --md-sys-typescale-body-small-tracking-unit: 2px;
  --md-sys-typescale-body-small-tracking: 0.4000000059604645px;
  /* Body Small font size */
  --md-sys-typescale-body-small-size-value: 12px;
  --md-sys-typescale-body-small-size-unit: 2px;
  --md-sys-typescale-body-small-size: 12px;
  /* Body Small font weight */
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  /* Body Small font name */
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  /* Body Medium */
  --md-sys-typescale-body-medium-text-transform: unset;
  --md-sys-typescale-body-medium-axis-value: unset;
  --md-sys-typescale-body-medium-font-style: unset;
  --md-sys-typescale-body-medium-text-decoration: unset;
  /* Body Medium line height */
  --md-sys-typescale-body-medium-line-height-value: 20px;
  --md-sys-typescale-body-medium-line-height-unit: 2px;
  --md-sys-typescale-body-medium-line-height: 20px;
  /* Body Medium font tracking */
  --md-sys-typescale-body-medium-tracking-value: 0.25px;
  --md-sys-typescale-body-medium-tracking-unit: 2px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  /* Body Medium font size */
  --md-sys-typescale-body-medium-size-value: 14px;
  --md-sys-typescale-body-medium-size-unit: 2px;
  --md-sys-typescale-body-medium-size: 14px;
  /* Body Medium font weight */
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  /* Body Medium font name */
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  /* Body Large */
  --md-sys-typescale-body-large-text-transform: unset;
  --md-sys-typescale-body-large-axis-value: unset;
  --md-sys-typescale-body-large-font-style: unset;
  --md-sys-typescale-body-large-text-decoration: unset;
  /* Body Large line height */
  --md-sys-typescale-body-large-line-height-value: 24px;
  --md-sys-typescale-body-large-line-height-unit: 2px;
  --md-sys-typescale-body-large-line-height: 24px;
  /* Body Large font tracking */
  --md-sys-typescale-body-large-tracking-value: 0.5px;
  --md-sys-typescale-body-large-tracking-unit: 2px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  /* Body Large font size */
  --md-sys-typescale-body-large-size-value: 16px;
  --md-sys-typescale-body-large-size-unit: 2px;
  --md-sys-typescale-body-large-size: 16px;
  /* Body Large font weight */
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  /* Body Large font name */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  /* Title Small */
  --md-sys-typescale-title-small-text-transform: unset;
  --md-sys-typescale-title-small-axis-value: unset;
  --md-sys-typescale-title-small-font-style: unset;
  --md-sys-typescale-title-small-text-decoration: unset;
  /* Title Small line height */
  --md-sys-typescale-title-small-line-height-value: 20px;
  --md-sys-typescale-title-small-line-height-unit: 2px;
  --md-sys-typescale-title-small-line-height: 20px;
  /* Title Small font tracking */
  --md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
  --md-sys-typescale-title-small-tracking-unit: 2px;
  --md-sys-typescale-title-small-tracking: 0.10000000149011612px;
  /* Title Small font size */
  --md-sys-typescale-title-small-size-value: 14px;
  --md-sys-typescale-title-small-size-unit: 2px;
  --md-sys-typescale-title-small-size: 14px;
  /* Title Small font weight */
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
  /* Title Small font name */
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  /* Title Medium */
  --md-sys-typescale-title-medium-text-transform: unset;
  --md-sys-typescale-title-medium-axis-value: unset;
  --md-sys-typescale-title-medium-font-style: unset;
  --md-sys-typescale-title-medium-text-decoration: unset;
  /* Title Medium line height */
  --md-sys-typescale-title-medium-line-height-value: 24px;
  --md-sys-typescale-title-medium-line-height-unit: 2px;
  --md-sys-typescale-title-medium-line-height: 24px;
  /* Title Medium font tracking */
  --md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
  --md-sys-typescale-title-medium-tracking-unit: 2px;
  --md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
  /* Title Medium font size */
  --md-sys-typescale-title-medium-size-value: 16px;
  --md-sys-typescale-title-medium-size-unit: 2px;
  --md-sys-typescale-title-medium-size: 16px;
  /* Title Medium font weight */
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
  /* Title Medium font name */
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  /* Title Large */
  --md-sys-typescale-title-large-text-transform: unset;
  --md-sys-typescale-title-large-axis-value: unset;
  --md-sys-typescale-title-large-font-style: unset;
  --md-sys-typescale-title-large-text-decoration: unset;
  /* Title Large line height */
  --md-sys-typescale-title-large-line-height-value: 28px;
  --md-sys-typescale-title-large-line-height-unit: 2px;
  --md-sys-typescale-title-large-line-height: 28px;
  /* Title Large font tracking */
  --md-sys-typescale-title-large-tracking-value: 0px;
  --md-sys-typescale-title-large-tracking-unit: 2px;
  --md-sys-typescale-title-large-tracking: 0px;
  /* Title Large font size */
  --md-sys-typescale-title-large-size-value: 22px;
  --md-sys-typescale-title-large-size-unit: 2px;
  --md-sys-typescale-title-large-size: 22px;
  /* Title Large font weight */
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
  /* Title Large font name */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  /* Headline Small */
  --md-sys-typescale-headline-small-text-transform: unset;
  --md-sys-typescale-headline-small-axis-value: unset;
  --md-sys-typescale-headline-small-font-style: unset;
  --md-sys-typescale-headline-small-text-decoration: unset;
  /* Headline Small line height */
  --md-sys-typescale-headline-small-line-height-value: 32px;
  --md-sys-typescale-headline-small-line-height-unit: 2px;
  --md-sys-typescale-headline-small-line-height: 32px;
  /* Headline Small font tracking */
  --md-sys-typescale-headline-small-tracking-value: 0px;
  --md-sys-typescale-headline-small-tracking-unit: 2px;
  --md-sys-typescale-headline-small-tracking: 0px;
  /* Headline Small font size */
  --md-sys-typescale-headline-small-size-value: 24px;
  --md-sys-typescale-headline-small-size-unit: 2px;
  --md-sys-typescale-headline-small-size: 24px;
  /* Headline Small font weight */
  --md-sys-typescale-headline-small-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Headline Small font name */
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  /* Headline Medium */
  --md-sys-typescale-headline-medium-text-transform: unset;
  --md-sys-typescale-headline-medium-axis-value: unset;
  --md-sys-typescale-headline-medium-font-style: unset;
  --md-sys-typescale-headline-medium-text-decoration: unset;
  /* Headline Medium line height */
  --md-sys-typescale-headline-medium-line-height-value: 36px;
  --md-sys-typescale-headline-medium-line-height-unit: 2px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  /* Headline Medium font tracking */
  --md-sys-typescale-headline-medium-tracking-value: 0px;
  --md-sys-typescale-headline-medium-tracking-unit: 2px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  /* Headline Medium font size */
  --md-sys-typescale-headline-medium-size-value: 28px;
  --md-sys-typescale-headline-medium-size-unit: 2px;
  --md-sys-typescale-headline-medium-size: 28px;
  /* Headline Medium font weight */
  --md-sys-typescale-headline-medium-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Headline Medium font name */
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  /* Headline Large */
  --md-sys-typescale-headline-large-text-transform: unset;
  --md-sys-typescale-headline-large-axis-value: unset;
  --md-sys-typescale-headline-large-font-style: unset;
  --md-sys-typescale-headline-large-text-decoration: unset;
  /* Headline Large line height */
  --md-sys-typescale-headline-large-line-height-value: 40px;
  --md-sys-typescale-headline-large-line-height-unit: 2px;
  --md-sys-typescale-headline-large-line-height: 40px;
  /* Headline Large font tracking */
  --md-sys-typescale-headline-large-tracking-value: 0px;
  --md-sys-typescale-headline-large-tracking-unit: 2px;
  --md-sys-typescale-headline-large-tracking: 0px;
  /* Headline Large font size */
  --md-sys-typescale-headline-large-size-value: 32px;
  --md-sys-typescale-headline-large-size-unit: 2px;
  --md-sys-typescale-headline-large-size: 32px;
  /* Headline Large font name */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  /* Headline Large font weight */
  --md-sys-typescale-headline-large-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Small */
  --md-sys-typescale-display-small-text-transform: unset;
  --md-sys-typescale-display-small-axis-value: unset;
  --md-sys-typescale-display-small-font-style: unset;
  --md-sys-typescale-display-small-text-decoration: unset;
  /* Display Small line height */
  --md-sys-typescale-display-small-line-height-value: 44px;
  --md-sys-typescale-display-small-line-height-unit: 2px;
  --md-sys-typescale-display-small-line-height: 44px;
  /* Display Small font tracking */
  --md-sys-typescale-display-small-tracking-value: 0px;
  --md-sys-typescale-display-small-tracking-unit: 2px;
  --md-sys-typescale-display-small-tracking: 0px;
  /* Display Small font size */
  --md-sys-typescale-display-small-size-value: 36px;
  --md-sys-typescale-display-small-size-unit: 2px;
  --md-sys-typescale-display-small-size: 36px;
  /* Display Small font weight */
  --md-sys-typescale-display-small-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Small font name */
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  /* Display Medium */
  --md-sys-typescale-display-medium-text-transform: unset;
  --md-sys-typescale-display-medium-axis-value: unset;
  --md-sys-typescale-display-medium-font-style: unset;
  --md-sys-typescale-display-medium-text-decoration: unset;
  /* Display Medium line height */
  --md-sys-typescale-display-medium-line-height-value: 52px;
  --md-sys-typescale-display-medium-line-height-unit: 2px;
  --md-sys-typescale-display-medium-line-height: 52px;
  /* Display Medium font tracking */
  --md-sys-typescale-display-medium-tracking-value: 0px;
  --md-sys-typescale-display-medium-tracking-unit: 2px;
  --md-sys-typescale-display-medium-tracking: 0px;
  /* Display Medium font size */
  --md-sys-typescale-display-medium-size-value: 45px;
  --md-sys-typescale-display-medium-size-unit: 2px;
  --md-sys-typescale-display-medium-size: 45px;
  /* Display Medium font weight */
  --md-sys-typescale-display-medium-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Medium font name */
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  /* Display Large */
  --md-sys-typescale-display-large-text-transform: unset;
  --md-sys-typescale-display-large-axis-value: unset;
  --md-sys-typescale-display-large-font-style: unset;
  --md-sys-typescale-display-large-text-decoration: unset;
  /* Display Large line height */
  --md-sys-typescale-display-large-line-height-value: 64px;
  --md-sys-typescale-display-large-line-height-unit: 2px;
  --md-sys-typescale-display-large-line-height: 64px;
  /* Display Large font tracking */
  --md-sys-typescale-display-large-tracking-value: -0.25px;
  --md-sys-typescale-display-large-tracking-unit: 2px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  /* Display Large font size */
  --md-sys-typescale-display-large-size-value: 57px;
  --md-sys-typescale-display-large-size-unit: 2px;
  --md-sys-typescale-display-large-size: 57px;
  /* Display Large font weight */
  --md-sys-typescale-display-large-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Large font name */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  /* Plain typeface */
  --md-ref-typeface-plain: Roboto;
  /* Brand typeface */
  --md-ref-typeface-brand: Roboto;
  /* Bold weight */
  --md-ref-typeface-weight-bold: 700;
  /* Medium weight */
  --md-ref-typeface-weight-medium: 500;
  /* Regular weight */
  --md-ref-typeface-weight-regular: 400;
}

/* Label Small */
.label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-weight: var(--md-sys-typescale-label-small-weight);
  font-size: var(--md-sys-typescale-label-small-size);
  font-style: var(--md-sys-typescale-label-small-font-style);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-line-height);
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}
/* Label Medium */
.label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-style: var(--md-sys-typescale-label-medium-font-style);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}
/* Label Large */
.label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  font-style: var(--md-sys-typescale-label-large-font-style);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}
/* Body Small */
.body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-weight: var(--md-sys-typescale-body-small-weight);
  font-size: var(--md-sys-typescale-body-small-size);
  font-style: var(--md-sys-typescale-body-small-font-style);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}
/* Body Medium */
.body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-style: var(--md-sys-typescale-body-medium-font-style);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
/* Body Large */
.body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  font-style: var(--md-sys-typescale-body-large-font-style);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-line-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}
/* Title Small */
.title-small {
  font-family: var(--md-sys-typescale-title-small-font);
  font-weight: var(--md-sys-typescale-title-small-weight);
  font-size: var(--md-sys-typescale-title-small-size);
  font-style: var(--md-sys-typescale-title-small-font-style);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  line-height: var(--md-sys-typescale-title-small-line-height);
  text-transform: var(--md-sys-typescale-title-small-text-transform);
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}
/* Title Medium */
.title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-style: var(--md-sys-typescale-title-medium-font-style);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}
/* Title Large */
.title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-weight: var(--md-sys-typescale-title-large-weight);
  font-size: var(--md-sys-typescale-title-large-size);
  font-style: var(--md-sys-typescale-title-large-font-style);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-line-height);
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}
/* Headline Small */
.headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-style: var(--md-sys-typescale-headline-small-font-style);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}
/* Headline Medium */
.headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  font-size: var(--md-sys-typescale-headline-medium-size);
  font-style: var(--md-sys-typescale-headline-medium-font-style);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}
/* Headline Large */
.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  font-style: var(--md-sys-typescale-headline-large-font-style);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}
/* Display Small */
.display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-weight: var(--md-sys-typescale-display-small-weight);
  font-size: var(--md-sys-typescale-display-small-size);
  font-style: var(--md-sys-typescale-display-small-font-style);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  line-height: var(--md-sys-typescale-display-small-line-height);
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}
/* Display Medium */
.display-medium {
  font-family: var(--md-sys-typescale-display-medium-font);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  font-size: var(--md-sys-typescale-display-medium-size);
  font-style: var(--md-sys-typescale-display-medium-font-style);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}
/* Display Large */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-weight: var(--md-sys-typescale-display-large-weight);
  font-size: var(--md-sys-typescale-display-large-size);
  font-style: var(--md-sys-typescale-display-large-font-style);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  line-height: var(--md-sys-typescale-display-large-line-height);
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}


S. Carpeta « css / theme »

Versión para imprimir.

1. css / theme / dark.css

.dark {
  --md-sys-color-primary: rgb(170 199 255);
  --md-sys-color-surface-tint: rgb(170 199 255);
  --md-sys-color-on-primary: rgb(10 48 95);
  --md-sys-color-primary-container: rgb(40 71 119);
  --md-sys-color-on-primary-container: rgb(214 227 255);
  --md-sys-color-secondary: rgb(190 198 220);
  --md-sys-color-on-secondary: rgb(40 49 65);
  --md-sys-color-secondary-container: rgb(62 71 89);
  --md-sys-color-on-secondary-container: rgb(218 226 249);
  --md-sys-color-tertiary: rgb(221 188 224);
  --md-sys-color-on-tertiary: rgb(63 40 68);
  --md-sys-color-tertiary-container: rgb(87 62 92);
  --md-sys-color-on-tertiary-container: rgb(250 216 253);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(17 19 24);
  --md-sys-color-on-surface: rgb(226 226 233);
  --md-sys-color-surface-variant: rgb(68 71 78);
  --md-sys-color-on-surface-variant: rgb(196 198 208);
  --md-sys-color-outline: rgb(142 144 153);
  --md-sys-color-outline-variant: rgb(68 71 78);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(226 226 233);
  --md-sys-color-inverse-on-surface: rgb(46 48 54);
  --md-sys-color-inverse-primary: rgb(65 95 145);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(17 19 24);
  --md-sys-color-surface-bright: rgb(55 57 62);
  --md-sys-color-surface-container-lowest: rgb(12 14 19);
  --md-sys-color-surface-container-low: rgb(25 28 32);
  --md-sys-color-surface-container: rgb(29 32 36);
  --md-sys-color-surface-container-high: rgb(40 42 47);
  --md-sys-color-surface-container-highest: rgb(51 53 58);
}


2. css / theme / light.css

.light {
  --md-sys-color-primary: rgb(65 95 145);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(214 227 255);
  --md-sys-color-on-primary-container: rgb(40 71 119);
  --md-sys-color-secondary: rgb(86 95 113);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(218 226 249);
  --md-sys-color-on-secondary-container: rgb(62 71 89);
  --md-sys-color-tertiary: rgb(112 85 117);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(250 216 253);
  --md-sys-color-on-tertiary-container: rgb(87 62 92);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(25 28 32);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(68 71 78);
  --md-sys-color-outline: rgb(116 119 127);
  --md-sys-color-outline-variant: rgb(196 198 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(46 48 54);
  --md-sys-color-inverse-on-surface: rgb(240 240 247);
  --md-sys-color-inverse-primary: rgb(170 199 255);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(217 217 224);
  --md-sys-color-surface-bright: rgb(249 249 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(243 243 250);
  --md-sys-color-surface-container: rgb(237 237 244);
  --md-sys-color-surface-container-high: rgb(231 232 238);
  --md-sys-color-surface-container-highest: rgb(226 226 233);
}


K. Carpeta « fonts »

Versión para imprimir.

A. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints

Descarga el archivo.

B. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf

Descarga el archivo.

C. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2

Descarga el archivo.

D. fonts / roboto-v32-latin-regular.woff2

Descarga el archivo.

L. Carpeta « img »

Versión para imprimir.

A. img / icono2048.png

B. img / maskable_icon.png

C. img / maskable_icon_x128.png

D. img / maskable_icon_x192.png

E. img / maskable_icon_x384.png

F. img / maskable_icon_x48.png

G. img / maskable_icon_x512.png

H. img / maskable_icon_x72.png

I. img / maskable_icon_x96.png

J. img / screenshot_horizontal.png

K. img / screenshot_vertical.png

M. Carpeta « js »

Versión para imprimir.

A. js / nav-tab-fixed.js

import { resaltaSiEstasEn } from "./lib/resaltaSiEstasEn.js"

export class NavTabFixed extends HTMLElement {

 constructor() {
  super()
  this.creado = false
 }

 connectedCallback() {
  this.classList.add("md-tab", "fixed")

  if (!this.creado) {

   this.innerHTML = /* HTML */`
    <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
     <span class="material-symbols-outlined">home</span>
     Inicio
    </a>
 
    <a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
     <span class="material-symbols-outlined">help</span>
     Ayuda
    </a>`

   this.creado = true

  }

 }

}

customElements.define("nav-tab-fixed", NavTabFixed)

B. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / ES_APPLE.js


1	export const ES_APPLE = /.(iPad\|iPhone\|iPod\|Mac)./.test(navigator.userAgent)

2. js / lib / getAttribute.js

/**
 * @param {HTMLElement} elementoHtml
 * @param {string} nombre
 * @returns {string}
 */
export function getAttribute(elementoHtml, nombre) {
 const valor = elementoHtml.getAttribute(nombre)
 return valor === null ? "" : valor
}

3. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


4. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

5. js / lib / muestraTextoDeAyuda.js

/**
 * Si un elemento HTML tiene un mensaje de validación, lo
 * muestra en su elemento de ayuda; en caso contrario, muestra
 * un mensaje de ayuda. 
 * @param { {
 *   validity: { valid: boolean };
 *   validationMessage: string
 *  } } elementoHtml elemento que contiene datos de validación.
 * @param { HTMLElement } elementoDeAyuda elemento fonde
 * se muestran los elementos de validación para elementoHtml.
 * @param { string } mensajeDeAyuda mensaje de ayuda cuando el
 *  estado de elementoHtml es válido.
 */
export function muestraTextoDeAyuda(elementoHtml, elementoDeAyuda,
 mensajeDeAyuda) {
 if (elementoHtml.validity.valid) {
  elementoDeAyuda.textContent = mensajeDeAyuda
 } else {
  elementoDeAyuda.textContent = elementoHtml.validationMessage
 }
}

6. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

7. js / lib / querySelector.js

/**
 * @template { HTMLElement } T
 * @param { Document | Element | ShadowRoot } raiz
 * @param { string } query
 * @returns { T }
 */
export function querySelector(raiz, query) {
 /** @type { T | null } */
 const resutado = raiz.querySelector(query)
 if (resutado === null)
  throw new Error(`No se encuentra ${query}.`)
 return resutado
}

8. js / lib / registraServiceWorker.js

const nombreDeServiceWorker = "sw.js"

try {
 navigator.serviceWorker.register(nombreDeServiceWorker)
  .then(registro => {
   console.log(nombreDeServiceWorker, "registrado.")
   console.log(registro)
  })
  .catch(error => console.log(error))
} catch (error) {
 console.log(error)
}

9. js / lib / resaltaSiEstasEn.js

/**
 * @param {string[]} paginas
 */
export function resaltaSiEstasEn(paginas) {

 const pathname = location.pathname

 for (const pagina of paginas) {

  if (pathname === pagina) {
   queueMicrotask(() => {
    const tab = document.querySelector(".active")
    if (tab !== null && tab.closest(".scrollable") !== null) {
     tab.scrollIntoView({ inline: "center", block: "end" })
    }
   })
   return `class="active"`
  }

 }

 return ""

}

10. Carpeta « js / lib / custom »

Versión para imprimir.

A. js / lib / custom / md-app-bar.js

import { ES_APPLE } from "../ES_APPLE.js"
import { getAttribute } from "../getAttribute.js"
import { querySelector } from "../querySelector.js"

class MdAppBar extends HTMLElement {

 getContent() {
  return /* HTML */`
   <style>

    :host {
     display: flex;
     box-sizing: border-box;
     align-items: center;
     padding: 0 0.25rem;
     background-color: var(--md-sys-color-surface);
     position: sticky;
     z-index: 1;
     left: env(titlebar-area-x, 0);
     top: env(titlebar-area-y, 0);
     height: env(titlebar-area-height, 4rem);
     width: env(titlebar-area-width, 100%);
    }
    
    :host(.apple) {
     height: env(titlebar-area-height, 3rem);
    }

    :host(.scroll) {
     background-color: var(--md-sys-color-surface-container-low);
    }

    #navigation {
     flex: 0 0 auto;
     overflow: hidden
    }

    #navigation ::slotted(*) {
     color: var(--md-sys-color-on-surface);
    }

    #acciones {
     margin-left: auto;
     flex: 0 0 auto;
     overflow: hidden
    }

    :host(.centered) #navigation,
    :host(.centered) #acciones {
     flex: 0 0 6rem;
     overflow: hidden
    }

    #headline::slotted(*) {
     -webkit-app-region: drag;
     flex: 1 1 auto;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     font-family: var(--md-sys-typescale-title-large-font);
     font-weight: var(--md-sys-typescale-title-large-weight);
     font-size: var(--md-sys-typescale-title-large-size);
     font-style: var(--md-sys-typescale-title-large-font-style);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     line-height: var(--md-sys-typescale-title-large-line-height);
     text-transform: var(--md-sys-typescale-title-large-text-transform);
     text-decoration: var(--md-sys-typescale-title-large-text-decoration);
     color: var(--md-sys-color-on-surface);
    }

    :host(.centered) #headline::slotted(*) {
     flex: 1 1 auto;
     text-align: center
    }

   </style>

   <span id="navigation">
    <slot name="navigation"></slot>
   </span>
   <slot id="headline"></slot>
   <span id="acciones">
    <slot name="action"></slot>
   </span>`
 }

 constructor() {
  super()
  if (ES_APPLE) {
   document.body.classList.add("apple")
   document.body.classList.remove("material")
  } else {
   document.body.classList.add("material")
   document.body.classList.remove("apple")
  }

  /**
   * @private
   * @readonly
   */
  const shadow = this.attachShadow({ mode: "open" })
  shadow.innerHTML = this.getContent()
  this._configuraAction = this._configuraAction.bind(this)
  /**
   * @private
   * @type {number}
   */
  this._posY = 0
  /**
   * @private
   * @type {boolean}
   */
  this._scrolling = false
  /**
    * @private
    * @type { HTMLSlotElement }
    */
  this._navigation = querySelector(shadow, '[name="navigation"]')
  /**
    * @private
    * @type { HTMLSlotElement }
    */
  this._action = querySelector(shadow, '[name="action"]')
  /**
    * @private
    * @type { HTMLHeadingElement | null }
    */
  this._headline = null
  /**
    * @private
    * @type { HTMLElement | null }
    */
  this._adicional = null
  this._action.addEventListener("slotchange", this._configuraAction)
  addEventListener("scroll", () => this._onScroll())
  addEventListener("load", () => this.configurOtros())
 }

 connectedCallback() {
  this.role = "toolbar"
  this._configuraAction()
 }

 configurOtros() {
  const idHeadline = getAttribute(this, "headline")
  if (idHeadline !== "") {
   const headline = document.getElementById(idHeadline)
   if (headline instanceof HTMLHeadingElement) {
    this._headline = headline
    if (this.classList.contains("apple") || this.classList.contains("medium")) {
     headline.classList.add("md-headline", "headline-small")
    } else {
     headline.classList.add("md-headline", "headline-medium")
    }
   }
  }
  const idAdicional = getAttribute(this, "adicional")
  if (idAdicional !== "") {
   this._adicional = document.getElementById(idAdicional)
   if (this._adicional !== null) {
    if (this.classList.contains("apple")) {
     this._adicional.style.top = "env(titlebar-area-height, 3rem)"
    } else {
     this._adicional.style.top = "env(titlebar-area-height, 4rem)"
    }
   }
  }
 }

 _configuraAction() {
  const assignedElements = this._action.assignedElements()
  if (this.isConnected) {
   if (ES_APPLE) {
    this.classList.add("apple")
    this.classList.remove("material")
   } else {
    this.classList.add("material")
    this.classList.remove("apple")
   }
   if (this.classList.contains("centered")) {
    this.classList.remove("centrado")
    this.classList.remove("justificado")
   } else {
    if (ES_APPLE && assignedElements.length <= 1) {
     this.classList.add("centrado")
     this.classList.remove("justificado")
    } else {
     this.classList.add("justificado")
     this.classList.remove("centrado")
    }
   }
  }
 }

 /** @private */
 _onScroll() {
  this._posY = scrollY
  if (!this._scrolling) {
   requestAnimationFrame(() => this._avanza())
  }
  this._scrolling = true
 }

 /** @private */
 _avanza() {
  if (this._posY === 0) {
   this.classList.remove("scroll")
   if (this._headline !== null) {
    if (this._adicional === null) {
     this._headline.classList.remove("scroll")
    } else {
     this._headline.classList.remove("scroll-adicional")
    }
   }
   if (this._adicional !== null) {
    this._adicional.classList.remove("scroll")
   }
  } else {
   this.classList.add("scroll")
   if (this._headline !== null) {
    if (this._adicional === null) {
     this._headline.classList.add("scroll")
    } else {
     this._headline.classList.add("scroll-adicional")
    }
   }
   if (this._adicional !== null) {
    this._adicional.classList.add("scroll")
   }
  }
  this._scrolling = false
 }

}

customElements.define("md-app-bar", MdAppBar)

N. favicon.ico

O. .htaccess

Este archivo configura las respuestas del servidor..
Lo utilizan principalmente servidores como Apache o Nginx.
Configura el mime type para el archivo de manifiesto y sedhabilita el uso de la cache general de http..

AddType application/manifest+json .webmanifest

ExpiresActive On

Header set Cache-Control "max-age=1, must-revalidate"


P. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

Q. instruccionesListadoSw.txt

Generar el listado de archivos del sw.js desde Visual Studio Code.
1. Abrir una terminal desde el menú 
    Terminal > New Terminal

2. Desde la terminal introducir la orden:
    Get-ChildItem -path . -Recurse | Select Directory,Name | Out-File archivos.txt

3. Abrir el archivo generado, que se llama
    archivos.txt
   y sobre este, realizar los pasos que siguen:

4. Quita del archivo archivos.txt:
    * el encabezado,
    * todas las carpetas,
    * todos los archivos dentro de .vscode como:
       * el archivo .vscode/settings.json,
       * el archivo .vscode/launch.json,
    * el archivo .htaccess,
    * el archivo archivos.txt,
    * este archivo (instruccionesListadoSw.txt),
    * el archivo jsconfig.json,
    * el archivo sw.js,
    * el archivo de la base de datos, que termina en ".db" y
      está en la carpeta php,
    * todos los archivos de php y
    * las líneas en blanco del final

5. Cambia los \ por / desde Visual Studio Code con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece introduce lo siguiente:
    Find:\
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
 
6. Coloca las comillas y coma del final de cada línea desde Visual
   Studio Code con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s*$
    Replace:",

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

7. Marca la carpeta inicial, presiona la combinación de teclas:

    Shift+Ctrl+L

    borra la selección, teclea " y luego ESC

8. Cambia las secuencias de espacios por / con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s+
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

9. Cambia las "/ por " con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, quita la selección del botón
            ".*"
           e introduce lo siguiente:
    Find:"/
    Replace:"

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

10. Copia el texto al archivo
     sw.js
    en el contenido del arreglo llamado ARCHIVOS, pero recuerda
    mantener el último elemento, que dice:
     "/"

R. archivos.txt

"ayuda.html",
"favicon.ico",
"index.html",
"site.webmanifest",
"css/baseline.css",
"css/colors.css",
"css/elevation.css",
"css/estilos.css",
"css/material-symbols-outlined.css",
"css/md-filled-button.css",
"css/md-filled-text-field.css",
"css/md-headline.css",
"css/md-list.css",
"css/md-outline-button.css",
"css/md-tab.css",
"css/motion.css",
"css/palette.css",
"css/roboto.css",
"css/shape.css",
"css/state.css",
"css/transicion_pestanas.css",
"css/typography.css",
"css/theme/dark.css",
"css/theme/light.css",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
"fonts/roboto-v32-latin-regular.woff2",
"img/icono2048.png",
"img/maskable_icon.png",
"img/maskable_icon_x128.png",
"img/maskable_icon_x192.png",
"img/maskable_icon_x384.png",
"img/maskable_icon_x48.png",
"img/maskable_icon_x512.png",
"img/maskable_icon_x72.png",
"img/maskable_icon_x96.png",
"img/screenshot_horizontal.png",
"img/screenshot_vertical.png",
"js/nav-tab-fixed.js",
"js/lib/ES_APPLE.js",
"js/lib/getAttribute.js",
"js/lib/manejaErrores.js",
"js/lib/muestraError.js",
"js/lib/muestraTextoDeAyuda.js",
"js/lib/ProblemDetailsError.js",
"js/lib/querySelector.js",
"js/lib/registraServiceWorker.js",
"js/lib/resaltaSiEstasEn.js",
"js/lib/custom/md-app-bar.js",
"ungap/custom-elements.js",

S. Carpeta « ungap »

Versión para imprimir.

A. ungap / custom-elements.js

/*! (c) Andrea Giammarchi @webreflection ISC */

!function(){"use strict";var e=function(e,t){var n=function(e){for(var t=0,n=e.length;t<n;t++)r(e[t])},r=function(e){var t=e.target,n=e.attributeName,r=e.oldValue;t.attributeChangedCallback(n,r,t.getAttribute(n))};return function(o,a){var l=o.constructor.observedAttributes;return l&&e(a).then((function(){new t(n).observe(o,{attributes:!0,attributeOldValue:!0,attributeFilter:l});for(var e=0,a=l.length;e<a;e++)o.hasAttribute(l[e])&&r({target:o,attributeName:l[e],oldValue:null})})),o}};function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function n(e,n){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}}(e))||n&&e&&"number"==typeof e.length){r&&(e=r);var o=0,a=function(){};return{s:a,n:function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,i=!0,c=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return i=e.done,e},e:function(e){c=!0,l=e},f:function(){try{i||null==r.return||r.return()}finally{if(c)throw l}}}}

/*! (c) Andrea Giammarchi - ISC */var r=!0,o=!1,a="querySelectorAll",l="querySelectorAll",i=self,c=i.document,u=i.Element,s=i.MutationObserver,f=i.Set,d=i.WeakMap,h=function(e){return l in e},v=[].filter,p=function(e){var t=new d,i=function(n,r){var o;if(r)for(var a,l=function(e){return e.matches||e.webkitMatchesSelector||e.msMatchesSelector}(n),i=0,c=y.length;i<c;i++)l.call(n,a=y[i])&&(t.has(n)||t.set(n,new f),(o=t.get(n)).has(a)||(o.add(a),e.handle(n,r,a)));else t.has(n)&&(o=t.get(n),t.delete(n),o.forEach((function(t){e.handle(n,r,t)})))},p=function(e){for(var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=0,r=e.length;n<r;n++)i(e[n],t)},y=e.query,g=e.root||c,m=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document,l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:MutationObserver,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:["*"],c=function t(o,l,i,c,u,s){var f,d=n(o);try{for(d.s();!(f=d.n()).done;){var h=f.value;(s||a in h)&&(u?i.has(h)||(i.add(h),c.delete(h),e(h,u)):c.has(h)||(c.add(h),i.delete(h),e(h,u)),s||t(h[a](l),l,i,c,u,r))}}catch(e){d.e(e)}finally{d.f()}},u=new l((function(e){if(i.length){var t,a=i.join(","),l=new Set,u=new Set,s=n(e);try{for(s.s();!(t=s.n()).done;){var f=t.value,d=f.addedNodes,h=f.removedNodes;c(h,a,l,u,o,o),c(d,a,l,u,r,o)}}catch(e){s.e(e)}finally{s.f()}}})),s=u.observe;return(u.observe=function(e){return s.call(u,e,{subtree:r,childList:r})})(t),u}(i,g,s,y),w=u.prototype.attachShadow;return w&&(u.prototype.attachShadow=function(e){var t=w.call(this,e);return m.observe(t),t}),y.length&&p(g[l](y)),{drop:function(e){for(var n=0,r=e.length;n<r;n++)t.delete(e[n])},flush:function(){for(var e=m.takeRecords(),t=0,n=e.length;t<n;t++)p(v.call(e[t].removedNodes,h),!1),p(v.call(e[t].addedNodes,h),!0)},observer:m,parse:p}},y=self,g=y.document,m=y.Map,w=y.MutationObserver,b=y.Object,E=y.Set,S=y.WeakMap,A=y.Element,M=y.HTMLElement,O=y.Node,N=y.Error,C=y.TypeError,T=y.Reflect,q=b.defineProperty,D=b.keys,I=b.getOwnPropertyNames,P=b.setPrototypeOf,k=!self.customElements,L=function(e){for(var t=D(e),n=[],r=new E,o=t.length,a=0;a<o;a++){n[a]=e[t[a]];try{delete e[t[a]]}catch(e){r.add(a)}}return function(){for(var a=0;a<o;a++)r.has(a)||(e[t[a]]=n[a])}};if(k){var x=function(){var e=this.constructor;if(!$.has(e))throw new C("Illegal constructor");var t=$.get(e);if(W)return F(W,t);var n=H.call(g,t);return F(P(n,e.prototype),t)},H=g.createElement,$=new m,_=new m,j=new m,R=new m,V=[],U=p({query:V,handle:function(e,t,n){var r=j.get(n);if(t&&!r.isPrototypeOf(e)){var o=L(e);W=P(e,r);try{new r.constructor}finally{W=null,o()}}var a="".concat(t?"":"dis","connectedCallback");a in r&&e[a]()}}).parse,W=null,B=function(e){if(!_.has(e)){var t,n=new Promise((function(e){t=e}));_.set(e,{$:n,_:t})}return _.get(e).$},F=e(B,w);self.customElements={define:function(e,t){if(R.has(e))throw new N('the name "'.concat(e,'" has already been used with this registry'));$.set(t,e),j.set(e,t.prototype),R.set(e,t),V.push(e),B(e).then((function(){U(g.querySelectorAll(e))})),_.get(e)._(t)},get:function(e){return R.get(e)},whenDefined:B},q(x.prototype=M.prototype,"constructor",{value:x}),self.HTMLElement=x,g.createElement=function(e,t){var n=t&&t.is,r=n?R.get(n):R.get(e);return r?new r:H.call(g,e)},"isConnected"in O.prototype||q(O.prototype,"isConnected",{configurable:!0,get:function(){return!(this.ownerDocument.compareDocumentPosition(this)&this.DOCUMENT_POSITION_DISCONNECTED)}})}else if(k=!self.customElements.get("extends-br"))try{var z=function e(){return self.Reflect.construct(HTMLBRElement,[],e)};z.prototype=HTMLLIElement.prototype;var G="extends-br";self.customElements.define("extends-br",z,{extends:"br"}),k=g.createElement("br",{is:G}).outerHTML.indexOf(G)<0;var J=self.customElements,K=J.get,Q=J.whenDefined;self.customElements.whenDefined=function(e){var t=this;return Q.call(this,e).then((function(n){return n||K.call(t,e)}))}}catch(e){}if(k){var X=function(e){var t=ae.get(e);ve(t.querySelectorAll(this),e.isConnected)},Y=self.customElements,Z=g.createElement,ee=Y.define,te=Y.get,ne=Y.upgrade,re=T||{construct:function(e){return e.call(this)}},oe=re.construct,ae=new S,le=new E,ie=new m,ce=new m,ue=new m,se=new m,fe=[],de=[],he=function(e){return se.get(e)||te.call(Y,e)},ve=p({query:de,handle:function(e,t,n){var r=ue.get(n);if(t&&!r.isPrototypeOf(e)){var o=L(e);we=P(e,r);try{new r.constructor}finally{we=null,o()}}var a="".concat(t?"":"dis","connectedCallback");a in r&&e[a]()}}).parse,pe=p({query:fe,handle:function(e,t){ae.has(e)&&(t?le.add(e):le.delete(e),de.length&&X.call(de,e))}}).parse,ye=A.prototype.attachShadow;ye&&(A.prototype.attachShadow=function(e){var t=ye.call(this,e);return ae.set(this,t),t});var ge=function(e){if(!ce.has(e)){var t,n=new Promise((function(e){t=e}));ce.set(e,{$:n,_:t})}return ce.get(e).$},me=e(ge,w),we=null;I(self).filter((function(e){return/^HTML.*Element$/.test(e)})).forEach((function(e){var t=self[e];function n(){var e=this.constructor;if(!ie.has(e))throw new C("Illegal constructor");var n=ie.get(e),r=n.is,o=n.tag;if(r){if(we)return me(we,r);var a=Z.call(g,o);return a.setAttribute("is",r),me(P(a,e.prototype),r)}return oe.call(this,t,[],e)}q(n.prototype=t.prototype,"constructor",{value:n}),q(self,e,{value:n})})),g.createElement=function(e,t){var n=t&&t.is;if(n){var r=se.get(n);if(r&&ie.get(r).tag===e)return new r}var o=Z.call(g,e);return n&&o.setAttribute("is",n),o},Y.get=he,Y.whenDefined=ge,Y.upgrade=function(e){var t=e.getAttribute("is");if(t){var n=se.get(t);if(n)return void me(P(e,n.prototype),t)}ne.call(Y,e)},Y.define=function(e,t,n){if(he(e))throw new N("'".concat(e,"' has already been defined as a custom element"));var r,o=n&&n.extends;ie.set(t,o?{is:e,tag:o}:{is:"",tag:e}),o?(r="".concat(o,'[is="').concat(e,'"]'),ue.set(r,t.prototype),se.set(e,t),de.push(r)):(ee.apply(Y,arguments),fe.push(r=e)),ge(e).then((function(){o?(ve(g.querySelectorAll(r)),le.forEach(X,[r])):pe(g.querySelectorAll(r))})),ce.get(e)._(t)}}}();

T. Resumen

En esta lección se presentó la estructura básica de una PWA con un formulario y Material Design 3 Expressive.

9. IoT

Versión para imprimir.

A. Introduccion

En esta lección se presenta el ejemplo base para IoT.
Puedes probar el ejemplo en https://iothtml.rf.gd/.

B. Diagrama de despliegue

C. Hazlo funcionar (con videos)

Prueba el ejemplo en https://iothtml.rf.gd/.
Copia la url de la app y pégala en varias pestañas, navegadores y dispositivos para que veas como entre todas estas vistas se puede controlar el foquito.
Este proyecto puede correr simultáneamente en varios navegadores y computadoras. Todos interactuan con el servidor test.mosquitto.org.
Este ejercicio usa la librería Eclipse Paho JavaScript Client para conectar el JavaScript del navegador web para conectarse al servidor de mqtt. Puedes profundizar en este tema en la URL https://eclipse.dev/paho/clients/js/
Descarga el archivo /src/iothtml.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
Publica tu sitio. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

D. Hazlo funcionar (texto)

Prueba el ejemplo en https://iothtml.rf.gd/.
Copia la url de la app y pégala en varias pestañas, navegadores y dispositivos para que veas como entre todas estas vistas se puede chatear.
Este proyecto puede correr simultáneamente en varios navegadores y computadoras. Todos interactuan con el servidor test.mosquitto.org.
Este ejercicio usa la librería Eclipse Paho JavaScript Client para conectar el JavaScript del navegador web para conectarse al servidor de mqtt. Puedes profundizar en este tema en la URL https://eclipse.dev/paho/clients/js/
Descarga el archivo /src/iothtml.zip y descompáctalo.
Crea tu proyecto en GitHub pages:
1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
  - Mantén la selección Public.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
5. Entra al repositorio y selecciona ⚙️ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto.Si haces cambios, clic en Save.
6. En la misma pestaña de ⚙️ Settings selecciona ◯ Actions, luego selecciona General y en Actions permissions selecciona el rediobotón Allow xxxx, and select non-xxxx, actions and reusable workflows y abajo la casilla de verificación Allow actions created by GitHub y cliquea el botón Save.
Importa el proyecto de GitHub a Visual Studio Code:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
Haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.
Los cambios tardan 10 minutos en reflejarse en el navegador. Cuando desarrolles, es incómodo esperar a que se reflejen los cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.
Si usas GitHub pages:
1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.
2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.

E. Archivos

Haz clic en los triángulos para expandir las carpetas

F. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">

 <title>IoT</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>
 <script src="paho.javascript-1.0.3/paho-mqtt-min.js"></script>

</head>

<body>

 <h1>IoT</h1>

 <p>
  <output id="salida">
   <progress max="100">Cargando…</progress>
  </output>
 </p>

 <p>
  <button id="boton" type="button">
   Enviar
  </button>
 </p>

 <script type="module">

  import { creaIdCliente } from "./js/lib/creaIdCliente.js"
  import { falloEnLaConexionMqtt } from "./js/lib/falloEnLaConexionMqtt.js"
  import { conexionMqttPerdida } from "./js/lib/conexionMqttPerdida.js"
  import { enviaMensajeMqtt } from "./js/lib/enviaMensajeMqtt.js"

  // A cada control le corresponde un tópico diferente.
  const TOPICO_FOCO = "gilpgdm/IoT/foco"

  let valor = "0"

  // Cambia por una raíz para tu proyecto.
  const clientId = creaIdCliente("gilpgdmIoT-")

  // Si usas un servidor de MQTT diferente, necesitas cambiar los parámetros.
  const cliente = new Paho.MQTT.Client("test.mosquitto.org", 8081, clientId)

  function clicEnBoton() {
    enviaMensajeMqtt(cliente, valor === '1' ? '0' : '1', TOPICO_FOCO)
  }

  // Acciones al recibir un mensaje.
  cliente.onMessageArrived = mensaje => {
   if (mensaje.destinationName === TOPICO_FOCO) {
    valor = mensaje.payloadString
    salida.value = valor === "1" ? "🔴" : "⚪"
   }
  }

  // Acciones al perder la conexión.
  cliente.onConnectionLost = conexionMqttPerdida

  // Configura el cliente.
  cliente.connect({

   // Manda un mensaje cada número de segundos indicados por este valor,
   // para que el sistema sepa que este dispositivo está activo.
   keepAliveInterval: 10,

   useSSL: true,

   // Acciones al fallar la conexión.
   onFailure: falloEnLaConexionMqtt,

   // Acciones al lograr la conexión.
   onSuccess: () => {
    console.log("Conectado")
    // Se suscribe a uno o más tópicos.
    cliente.subscribe(TOPICO_FOCO)
    // Envía el valor inicial al tópico.
    enviaMensajeMqtt(cliente, valor, TOPICO_FOCO)
    boton.addEventListener("click", clicEnBoton)
   },

  })

 </script>

</body>

</html>

G. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / conexionMqttPerdida.js

/**
 * @param {{
 *   errorCode: number,
 *   errorMessage: string
 *  }} responseObject
 */
export function conexionMqttPerdida(responseObject) {
 if (responseObject.errorCode !== 0) {
  const mensaje = "Conexión MQTT terminada " + responseObject.errorMessage
  console.error(mensaje)
  alert(mensaje)
 }
}

2. js / lib / creaIdCliente.js

/**
 * Añade caracteres al azar a una raíz, para obtener un clientId único.
 * @param {string} raiz 
 */
export function creaIdCliente(raiz) {
 const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
 for (var i = 0; i < 15; i++) {
  raiz += chars.charAt(Math.floor(Math.random() * chars.length))
 }
 return raiz
}

3. js / lib / enviaMensajeMqtt.js

// @ts-nocheck
/**
 * Envá un valor al servidor de MQTT y es reenviado a todos los dispositivos
 * suscritos al tópico indicado
 * @param {Paho.MQTT.Client} cliente
 * @param {string} mensaje
 * @param {string} topico
 */
export function enviaMensajeMqtt(cliente, mensaje, topico) {
 const mensajeMqtt = new Paho.MQTT.Message(mensaje)
 mensajeMqtt.destinationName = topico
 cliente.send(mensajeMqtt)
}

4. js / lib / falloEnLaConexionMqtt.js

/**
 * @param {{errorMessage: string}} res
 */
export function falloEnLaConexionMqtt(res) {
 const mensaje = "Fallo en conexión MQTT: " + res.errorMessage
 console.error(mensaje)
 alert(mensaje)
}

5. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


6. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

7. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

H. Carpeta « paho.javascript-1.0.3 »

Versión para imprimir.

A. paho.javascript-1.0.3 / about.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>About</title>
</head>
<body lang="EN-US">
<h2>About This Content</h2>
 
<p><em>December 9, 2013</em></p>	
<h3>License</h3>

<p>The Eclipse Foundation makes available all content in this plug-in ("Content").  Unless otherwise 
indicated below, the Content is provided to you under the terms and conditions of the
Eclipse Public License Version 1.0 ("EPL") and Eclipse Distribution License Version 1.0 ("EDL").
A copy of the EPL is available at 
<a href="http://www.eclipse.org/legal/epl-v10.html">http://www.eclipse.org/legal/epl-v10.html</a> 
and a copy of the EDL is available at 
<a href="http://www.eclipse.org/org/documents/edl-v10.php">http://www.eclipse.org/org/documents/edl-v10.php</a>. 
For purposes of the EPL, "Program" will mean the Content.</p>

<p>If you did not receive this Content directly from the Eclipse Foundation, the Content is 
being redistributed by another party ("Redistributor") and different terms and conditions may
apply to your use of any object code in the Content.  Check the Redistributor's license that was 
provided with the Content.  If no such license exists, contact the Redistributor.  Unless otherwise
indicated below, the terms and conditions of the EPL still apply to any source code in the Content
and such source code may be obtained at <a href="http://www.eclipse.org/">http://www.eclipse.org</a>.</p>

</body></html>


B. paho.javascript-1.0.3 / CONTRIBUTING.md

# Contributing to Paho

Thanks for your interest in this project!

You can contribute bugfixes and new features by sending pull requests through GitHub.

## Legal

In order for your contribution to be accepted, it must comply with the Eclipse Foundation IP policy.

Please read the [Eclipse Foundation policy on accepting contributions via Git](http://wiki.eclipse.org/Development_Resources/Contributing_via_Git).

1. Sign the [Eclipse CLA](http://www.eclipse.org/legal/CLA.php)
  1. Register for an Eclipse Foundation User ID. You can register [here](https://dev.eclipse.org/site_login/createaccount.php).
  2. Log into the [Projects Portal](https://projects.eclipse.org/), and click on the '[Eclipse CLA](https://projects.eclipse.org/user/sign/cla)' link.
2. Go to your [account settings](https://dev.eclipse.org/site_login/myaccount.php#open_tab_accountsettings) and add your GitHub username to your account.
3. Make sure that you _sign-off_ your Git commits in the following format:
  ``` Signed-off-by: John Smith  ``` This is usually at the bottom of the commit message. You can automate this by adding the '-s' flag when you make the commits. e.g.   ```git commit -s -m "Adding a cool feature"```
4. Ensure that the email address that you make your commits with is the same one you used to sign up to the Eclipse Foundation website with.

## Contributing a change

## Contributing a change

1. [Fork the repository on GitHub](https://github.com/eclipse/paho.mqtt.javascript/fork)
2. Clone the forked repository onto your computer: ``` git clone https://github.com//paho.mqtt.javascript.git ```
3. Create a new branch from the latest ```develop``` branch with ```git checkout -b YOUR_BRANCH_NAME origin/develop```
4. Make your changes
5. If developing a new feature, make sure to include JUnit tests.
6. Ensure that all new and existing tests pass.
7. Commit the changes into the branch: ``` git commit -s ``` Make sure that your commit message is meaningful and describes your changes correctly.
8. If you have a lot of commits for the change, squash them into a single / few commits.
9. Push the changes in your branch to your forked repository.
10. Finally, go to [https://github.com/eclipse/paho.mqtt.javascript](https://github.com/eclipse/paho.mqtt.javascript) and create a pull request from your "YOUR_BRANCH_NAME" branch to the ```develop``` one to request review and merge of the commits in your pushed branch.


What happens next depends on the content of the patch. If it is 100% authored
by the contributor and is less than 1000 lines (and meets the needs of the
project), then it can be pulled into the main repository. If not, more steps
are required. These are detailed in the
[legal process poster](http://www.eclipse.org/legal/EclipseLegalProcessPoster.pdf).



## Developer resources:


Information regarding source code management, builds, coding standards, and more.

- [https://projects.eclipse.org/projects/iot.paho/developer](https://projects.eclipse.org/projects/iot.paho/developer)

Contact:
--------

Contact the project developers via the project's development
[mailing list](https://dev.eclipse.org/mailman/listinfo/paho-dev).

Search for bugs:
----------------

This project uses GitHub Issues here: [github.com/eclipse/paho.mqtt.javascript/issues](https://github.com/eclipse/paho.mqtt.javascript/issues) to track ongoing development and issues.

Create a new bug:
-----------------

Be sure to search for existing bugs before you create another one. Remember that contributions are always welcome!

- [Create new Paho bug](https://github.com/eclipse/paho.mqtt.javascript/issues/new)


C. paho.javascript-1.0.3 / edl-v10


Eclipse Distribution License - v 1.0

Copyright (c) 2007, Eclipse Foundation, Inc. and its licensors.

All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

    Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
    Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
    Neither the name of the Eclipse Foundation, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.



D. paho.javascript-1.0.3 / epl-v10

Eclipse Public License - v 1.0

THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.

1. DEFINITIONS

"Contribution" means:

a) in the case of the initial Contributor, the initial code and documentation distributed under this Agreement, and
b) in the case of each subsequent Contributor:
i) changes to the Program, and
ii) additions to the Program;
where such changes and/or additions to the Program originate from and are distributed by that particular Contributor. A Contribution 'originates' from a Contributor if it was added to the Program by such Contributor itself or anyone acting on such Contributor's behalf. Contributions do not include additions to the Program which: (i) are separate modules of software distributed in conjunction with the Program under their own license agreement, and (ii) are not derivative works of the Program.
"Contributor" means any person or entity that distributes the Program.

"Licensed Patents" mean patent claims licensable by a Contributor which are necessarily infringed by the use or sale of its Contribution alone or when combined with the Program.

"Program" means the Contributions distributed in accordance with this Agreement.

"Recipient" means anyone who receives the Program under this Agreement, including all Contributors.

2. GRANT OF RIGHTS

a) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, distribute and sublicense the Contribution of such Contributor, if any, and such derivative works, in source code and object code form.
b) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free patent license under Licensed Patents to make, use, sell, offer to sell, import and otherwise transfer the Contribution of such Contributor, if any, in source code and object code form. This patent license shall apply to the combination of the Contribution and the Program if, at the time the Contribution is added by the Contributor, such addition of the Contribution causes such combination to be covered by the Licensed Patents. The patent license shall not apply to any other combinations which include the Contribution. No hardware per se is licensed hereunder.
c) Recipient understands that although each Contributor grants the licenses to its Contributions set forth herein, no assurances are provided by any Contributor that the Program does not infringe the patent or other intellectual property rights of any other entity. Each Contributor disclaims any liability to Recipient for claims brought by any other entity based on infringement of intellectual property rights or otherwise. As a condition to exercising the rights and licenses granted hereunder, each Recipient hereby assumes sole responsibility to secure any other intellectual property rights needed, if any. For example, if a third party patent license is required to allow Recipient to distribute the Program, it is Recipient's responsibility to acquire that license before distributing the Program.
d) Each Contributor represents that to its knowledge it has sufficient copyright rights in its Contribution, if any, to grant the copyright license set forth in this Agreement.
3. REQUIREMENTS

A Contributor may choose to distribute the Program in object code form under its own license agreement, provided that:

a) it complies with the terms and conditions of this Agreement; and
b) its license agreement:
i) effectively disclaims on behalf of all Contributors all warranties and conditions, express and implied, including warranties or conditions of title and non-infringement, and implied warranties or conditions of merchantability and fitness for a particular purpose;
ii) effectively excludes on behalf of all Contributors all liability for damages, including direct, indirect, special, incidental and consequential damages, such as lost profits;
iii) states that any provisions which differ from this Agreement are offered by that Contributor alone and not by any other party; and
iv) states that source code for the Program is available from such Contributor, and informs licensees how to obtain it in a reasonable manner on or through a medium customarily used for software exchange.
When the Program is made available in source code form:

a) it must be made available under this Agreement; and
b) a copy of this Agreement must be included with each copy of the Program.
Contributors may not remove or alter any copyright notices contained within the Program.

Each Contributor must identify itself as the originator of its Contribution, if any, in a manner that reasonably allows subsequent Recipients to identify the originator of the Contribution.

4. COMMERCIAL DISTRIBUTION

Commercial distributors of software may accept certain responsibilities with respect to end users, business partners and the like. While this license is intended to facilitate the commercial use of the Program, the Contributor who includes the Program in a commercial product offering should do so in a manner which does not create potential liability for other Contributors. Therefore, if a Contributor includes the Program in a commercial product offering, such Contributor ("Commercial Contributor") hereby agrees to defend and indemnify every other Contributor ("Indemnified Contributor") against any losses, damages and costs (collectively "Losses") arising from claims, lawsuits and other legal actions brought by a third party against the Indemnified Contributor to the extent caused by the acts or omissions of such Commercial Contributor in connection with its distribution of the Program in a commercial product offering. The obligations in this section do not apply to any claims or Losses relating to any actual or alleged intellectual property infringement. In order to qualify, an Indemnified Contributor must: a) promptly notify the Commercial Contributor in writing of such claim, and b) allow the Commercial Contributor to control, and cooperate with the Commercial Contributor in, the defense and any related settlement negotiations. The Indemnified Contributor may participate in any such claim at its own expense.

For example, a Contributor might include the Program in a commercial product offering, Product X. That Contributor is then a Commercial Contributor. If that Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Contributor would have to defend claims against the other Contributors related to those performance claims and warranties, and if a court requires any other Contributor to pay any damages as a result, the Commercial Contributor must pay those damages.

5. NO WARRANTY

EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the appropriateness of using and distributing the Program and assumes all risks associated with its exercise of rights under this Agreement , including but not limited to the risks and costs of program errors, compliance with applicable laws, damage to or loss of data, programs or equipment, and unavailability or interruption of operations.

6. DISCLAIMER OF LIABILITY

EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

7. GENERAL

If any provision of this Agreement is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this Agreement, and without further action by the parties hereto, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.

If Recipient institutes patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Program itself (excluding combinations of the Program with other software or hardware) infringes such Recipient's patent(s), then such Recipient's rights granted under Section 2(b) shall terminate as of the date such litigation is filed.

All Recipient's rights under this Agreement shall terminate if it fails to comply with any of the material terms or conditions of this Agreement and does not cure such failure in a reasonable period of time after becoming aware of such noncompliance. If all Recipient's rights under this Agreement terminate, Recipient agrees to cease use and distribution of the Program as soon as reasonably practicable. However, Recipient's obligations under this Agreement and any licenses granted by Recipient relating to the Program shall continue and survive.

Everyone is permitted to copy and distribute copies of this Agreement, but in order to avoid inconsistency the Agreement is copyrighted and may only be modified in the following manner. The Agreement Steward reserves the right to publish new versions (including revisions) of this Agreement from time to time. No one other than the Agreement Steward has the right to modify this Agreement. The Eclipse Foundation is the initial Agreement Steward. The Eclipse Foundation may assign the responsibility to serve as the Agreement Steward to a suitable separate entity. Each new version of the Agreement will be given a distinguishing version number. The Program (including Contributions) may always be distributed subject to the version of the Agreement under which it was received. In addition, after a new version of the Agreement is published, Contributor may elect to distribute the Program (including its Contributions) under the new version. Except as expressly stated in Sections 2(a) and 2(b) above, Recipient receives no rights or licenses to the intellectual property of any Contributor under this Agreement, whether expressly, by implication, estoppel or otherwise. All rights in the Program not expressly granted under this Agreement are reserved.

This Agreement is governed by the laws of the State of New York and the intellectual property laws of the United States of America. No party to this Agreement will bring a legal action under this Agreement more than one year after the cause of action arose. Each party waives its rights to a jury trial in any resulting litigation.


E. paho.javascript-1.0.3 / paho-mqtt-min.js

/*******************************************************************************
 * Copyright (c) 2013, 2016 IBM Corp.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * and Eclipse Distribution License v1.0 which accompany this distribution.
 *
 * The Eclipse Public License is available at
 *    http://www.eclipse.org/legal/epl-v10.html
 * and the Eclipse Distribution License is available at
 *   http://www.eclipse.org/org/documents/edl-v10.php.
 *
 *******************************************************************************/
(function(p,s){"object"===typeof exports&&"object"===typeof module?module.exports=s():"function"===typeof define&&define.amd?define(s):"object"===typeof exports?exports=s():("undefined"===typeof p.Paho&&(p.Paho={}),p.Paho.MQTT=s())})(this,function(){return function(p){function s(a,b,c){b[c++]=a>>8;b[c++]=a%256;return c}function u(a,b,c,k){k=s(b,c,k);D(a,c,k);return k+b}function n(a){for(var b=0,c=0;c<a.length;c++){var k=a.charCodeAt(c);2047<k?(55296<=k&&56319>=k&&(c++,b++),b+=3):127<k?b+=2:b++}return b}
function D(a,b,c){for(var k=0;k<a.length;k++){var e=a.charCodeAt(k);if(55296<=e&&56319>=e){var g=a.charCodeAt(++k);if(isNaN(g))throw Error(f(h.MALFORMED_UNICODE,[e,g]));e=(e-55296<<10)+(g-56320)+65536}127>=e?b[c++]=e:(2047>=e?b[c++]=e>>6&31|192:(65535>=e?b[c++]=e>>12&15|224:(b[c++]=e>>18&7|240,b[c++]=e>>12&63|128),b[c++]=e>>6&63|128),b[c++]=e&63|128)}return b}function E(a,b,c){for(var k="",e,g=b;g<b+c;){e=a[g++];if(!(128>e)){var m=a[g++]-128;if(0>m)throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),
""]));if(224>e)e=64*(e-192)+m;else{var d=a[g++]-128;if(0>d)throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),d.toString(16)]));if(240>e)e=4096*(e-224)+64*m+d;else{var l=a[g++]-128;if(0>l)throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),d.toString(16),l.toString(16)]));if(248>e)e=262144*(e-240)+4096*m+64*d+l;else throw Error(f(h.MALFORMED_UTF,[e.toString(16),m.toString(16),d.toString(16),l.toString(16)]));}}}65535<e&&(e-=65536,k+=String.fromCharCode(55296+(e>>10)),e=56320+(e&
1023));k+=String.fromCharCode(e)}return k}var z=function(a,b){for(var c in a)if(a.hasOwnProperty(c))if(b.hasOwnProperty(c)){if(typeof a[c]!==b[c])throw Error(f(h.INVALID_TYPE,[typeof a[c],c]));}else{c="Unknown property, "+c+". Valid properties are:";for(var k in b)b.hasOwnProperty(k)&&(c=c+" "+k);throw Error(c);}},v=function(a,b){return function(){return a.apply(b,arguments)}},h={OK:{code:0,text:"AMQJSC0000I OK."},CONNECT_TIMEOUT:{code:1,text:"AMQJSC0001E Connect timed out."},SUBSCRIBE_TIMEOUT:{code:2,
text:"AMQJS0002E Subscribe timed out."},UNSUBSCRIBE_TIMEOUT:{code:3,text:"AMQJS0003E Unsubscribe timed out."},PING_TIMEOUT:{code:4,text:"AMQJS0004E Ping timed out."},INTERNAL_ERROR:{code:5,text:"AMQJS0005E Internal error. Error Message: {0}, Stack trace: {1}"},CONNACK_RETURNCODE:{code:6,text:"AMQJS0006E Bad Connack return code:{0} {1}."},SOCKET_ERROR:{code:7,text:"AMQJS0007E Socket error:{0}."},SOCKET_CLOSE:{code:8,text:"AMQJS0008I Socket closed."},MALFORMED_UTF:{code:9,text:"AMQJS0009E Malformed UTF data:{0} {1} {2}."},
UNSUPPORTED:{code:10,text:"AMQJS0010E {0} is not supported by this browser."},INVALID_STATE:{code:11,text:"AMQJS0011E Invalid state {0}."},INVALID_TYPE:{code:12,text:"AMQJS0012E Invalid type {0} for {1}."},INVALID_ARGUMENT:{code:13,text:"AMQJS0013E Invalid argument {0} for {1}."},UNSUPPORTED_OPERATION:{code:14,text:"AMQJS0014E Unsupported operation."},INVALID_STORED_DATA:{code:15,text:"AMQJS0015E Invalid data in local storage key\x3d{0} value\x3d{1}."},INVALID_MQTT_MESSAGE_TYPE:{code:16,text:"AMQJS0016E Invalid MQTT message type {0}."},
MALFORMED_UNICODE:{code:17,text:"AMQJS0017E Malformed Unicode string:{0} {1}."},BUFFER_FULL:{code:18,text:"AMQJS0018E Message buffer is full, maximum buffer size: {0}."}},H={0:"Connection Accepted",1:"Connection Refused: unacceptable protocol version",2:"Connection Refused: identifier rejected",3:"Connection Refused: server unavailable",4:"Connection Refused: bad user name or password",5:"Connection Refused: not authorized"},f=function(a,b){var c=a.text;if(b)for(var k,e,g=0;g<b.length;g++)if(k="{"+
g+"}",e=c.indexOf(k),0<e)var h=c.substring(0,e),c=c.substring(e+k.length),c=h+b[g]+c;return c},A=[0,6,77,81,73,115,100,112,3],B=[0,4,77,81,84,84,4],q=function(a,b){this.type=a;for(var c in b)b.hasOwnProperty(c)&&(this[c]=b[c])};q.prototype.encode=function(){var a=(this.type&15)<<4,b=0,c=[],k=0,e;void 0!==this.messageIdentifier&&(b+=2);switch(this.type){case 1:switch(this.mqttVersion){case 3:b+=A.length+3;break;case 4:b+=B.length+3}b+=n(this.clientId)+2;void 0!==this.willMessage&&(b+=n(this.willMessage.destinationName)+
2,e=this.willMessage.payloadBytes,e instanceof Uint8Array||(e=new Uint8Array(h)),b+=e.byteLength+2);void 0!==this.userName&&(b+=n(this.userName)+2);void 0!==this.password&&(b+=n(this.password)+2);break;case 8:for(var a=a|2,g=0;g<this.topics.length;g++)c[g]=n(this.topics[g]),b+=c[g]+2;b+=this.requestedQos.length;break;case 10:a|=2;for(g=0;g<this.topics.length;g++)c[g]=n(this.topics[g]),b+=c[g]+2;break;case 6:a|=2;break;case 3:this.payloadMessage.duplicate&&(a|=8);a=a|=this.payloadMessage.qos<<1;this.payloadMessage.retained&&
(a|=1);var k=n(this.payloadMessage.destinationName),h=this.payloadMessage.payloadBytes,b=b+(k+2)+h.byteLength;h instanceof ArrayBuffer?h=new Uint8Array(h):h instanceof Uint8Array||(h=new Uint8Array(h.buffer))}var f=b,g=Array(1),d=0;do{var t=f%128,f=f>>7;0<f&&(t|=128);g[d++]=t}while(0<f&&4>d);f=g.length+1;b=new ArrayBuffer(b+f);d=new Uint8Array(b);d[0]=a;d.set(g,1);if(3==this.type)f=u(this.payloadMessage.destinationName,k,d,f);else if(1==this.type){switch(this.mqttVersion){case 3:d.set(A,f);f+=A.length;
break;case 4:d.set(B,f),f+=B.length}a=0;this.cleanSession&&(a=2);void 0!==this.willMessage&&(a=a|4|this.willMessage.qos<<3,this.willMessage.retained&&(a|=32));void 0!==this.userName&&(a|=128);void 0!==this.password&&(a|=64);d[f++]=a;f=s(this.keepAliveInterval,d,f)}void 0!==this.messageIdentifier&&(f=s(this.messageIdentifier,d,f));switch(this.type){case 1:f=u(this.clientId,n(this.clientId),d,f);void 0!==this.willMessage&&(f=u(this.willMessage.destinationName,n(this.willMessage.destinationName),d,f),
f=s(e.byteLength,d,f),d.set(e,f),f+=e.byteLength);void 0!==this.userName&&(f=u(this.userName,n(this.userName),d,f));void 0!==this.password&&u(this.password,n(this.password),d,f);break;case 3:d.set(h,f);break;case 8:for(g=0;g<this.topics.length;g++)f=u(this.topics[g],c[g],d,f),d[f++]=this.requestedQos[g];break;case 10:for(g=0;g<this.topics.length;g++)f=u(this.topics[g],c[g],d,f)}return b};var F=function(a,b,c){this._client=a;this._window=b;this._keepAliveInterval=1E3*c;this.isReset=!1;var k=(new q(12)).encode(),
e=function(a){return function(){return g.apply(a)}},g=function(){this.isReset?(this.isReset=!1,this._client._trace("Pinger.doPing","send PINGREQ"),this._client.socket.send(k),this.timeout=this._window.setTimeout(e(this),this._keepAliveInterval)):(this._client._trace("Pinger.doPing","Timed out"),this._client._disconnected(h.PING_TIMEOUT.code,f(h.PING_TIMEOUT)))};this.reset=function(){this.isReset=!0;this._window.clearTimeout(this.timeout);0<this._keepAliveInterval&&(this.timeout=setTimeout(e(this),
this._keepAliveInterval))};this.cancel=function(){this._window.clearTimeout(this.timeout)}},w=function(a,b,c,f,e){this._window=b;c||(c=30);this.timeout=setTimeout(function(a,b,c){return function(){return a.apply(b,c)}}(f,a,e),1E3*c);this.cancel=function(){this._window.clearTimeout(this.timeout)}},d=function(a,b,c,d,e){if(!("WebSocket"in p&&null!==p.WebSocket))throw Error(f(h.UNSUPPORTED,["WebSocket"]));if(!("localStorage"in p&&null!==p.localStorage))throw Error(f(h.UNSUPPORTED,["localStorage"]));
if(!("ArrayBuffer"in p&&null!==p.ArrayBuffer))throw Error(f(h.UNSUPPORTED,["ArrayBuffer"]));this._trace("Paho.MQTT.Client",a,b,c,d,e);this.host=b;this.port=c;this.path=d;this.uri=a;this.clientId=e;this._wsuri=null;this._localKey=b+":"+c+("/mqtt"!=d?":"+d:"")+":"+e+":";this._msg_queue=[];this._buffered_msg_queue=[];this._sentMessages={};this._receivedMessages={};this._notify_msg_sent={};this._message_identifier=1;this._sequence=0;for(var g in localStorage)0!==g.indexOf("Sent:"+this._localKey)&&0!==
g.indexOf("Received:"+this._localKey)||this.restore(g)};d.prototype.host=null;d.prototype.port=null;d.prototype.path=null;d.prototype.uri=null;d.prototype.clientId=null;d.prototype.socket=null;d.prototype.connected=!1;d.prototype.maxMessageIdentifier=65536;d.prototype.connectOptions=null;d.prototype.hostIndex=null;d.prototype.onConnected=null;d.prototype.onConnectionLost=null;d.prototype.onMessageDelivered=null;d.prototype.onMessageArrived=null;d.prototype.traceFunction=null;d.prototype._msg_queue=
null;d.prototype._buffered_msg_queue=null;d.prototype._connectTimeout=null;d.prototype.sendPinger=null;d.prototype.receivePinger=null;d.prototype._reconnectInterval=1;d.prototype._reconnecting=!1;d.prototype._reconnectTimeout=null;d.prototype.disconnectedPublishing=!1;d.prototype.disconnectedBufferSize=5E3;d.prototype.receiveBuffer=null;d.prototype._traceBuffer=null;d.prototype._MAX_TRACE_ENTRIES=100;d.prototype.connect=function(a){var b=this._traceMask(a,"password");this._trace("Client.connect",
b,this.socket,this.connected);if(this.connected)throw Error(f(h.INVALID_STATE,["already connected"]));if(this.socket)throw Error(f(h.INVALID_STATE,["already connected"]));this._reconnecting&&(this._reconnectTimeout.cancel(),this._reconnectTimeout=null,this._reconnecting=!1);this.connectOptions=a;this._reconnectInterval=1;this._reconnecting=!1;a.uris?(this.hostIndex=0,this._doConnect(a.uris[0])):this._doConnect(this.uri)};d.prototype.subscribe=function(a,b){this._trace("Client.subscribe",a,b);if(!this.connected)throw Error(f(h.INVALID_STATE,
["not connected"]));var c=new q(8);c.topics=[a];c.requestedQos=void 0!==b.qos?[b.qos]:[0];b.onSuccess&&(c.onSuccess=function(a){b.onSuccess({invocationContext:b.invocationContext,grantedQos:a})});b.onFailure&&(c.onFailure=function(a){b.onFailure({invocationContext:b.invocationContext,errorCode:a,errorMessage:f(a)})});b.timeout&&(c.timeOut=new w(this,window,b.timeout,b.onFailure,[{invocationContext:b.invocationContext,errorCode:h.SUBSCRIBE_TIMEOUT.code,errorMessage:f(h.SUBSCRIBE_TIMEOUT)}]));this._requires_ack(c);
this._schedule_message(c)};d.prototype.unsubscribe=function(a,b){this._trace("Client.unsubscribe",a,b);if(!this.connected)throw Error(f(h.INVALID_STATE,["not connected"]));var c=new q(10);c.topics=[a];b.onSuccess&&(c.callback=function(){b.onSuccess({invocationContext:b.invocationContext})});b.timeout&&(c.timeOut=new w(this,window,b.timeout,b.onFailure,[{invocationContext:b.invocationContext,errorCode:h.UNSUBSCRIBE_TIMEOUT.code,errorMessage:f(h.UNSUBSCRIBE_TIMEOUT)}]));this._requires_ack(c);this._schedule_message(c)};
d.prototype.send=function(a){this._trace("Client.send",a);wireMessage=new q(3);wireMessage.payloadMessage=a;if(this.connected)0<a.qos?this._requires_ack(wireMessage):this.onMessageDelivered&&(this._notify_msg_sent[wireMessage]=this.onMessageDelivered(wireMessage.payloadMessage)),this._schedule_message(wireMessage);else if(this._reconnecting&&this.disconnectedPublishing){if(Object.keys(this._sentMessages).length+this._buffered_msg_queue.length>this.disconnectedBufferSize)throw Error(f(h.BUFFER_FULL,
[this.disconnectedBufferSize]));0<a.qos?this._requires_ack(wireMessage):(wireMessage.sequence=++this._sequence,this._buffered_msg_queue.push(wireMessage))}else throw Error(f(h.INVALID_STATE,["not connected"]));};d.prototype.disconnect=function(){this._trace("Client.disconnect");this._reconnecting&&(this._reconnectTimeout.cancel(),this._reconnectTimeout=null,this._reconnecting=!1);if(!this.socket)throw Error(f(h.INVALID_STATE,["not connecting or connected"]));wireMessage=new q(14);this._notify_msg_sent[wireMessage]=
v(this._disconnected,this);this._schedule_message(wireMessage)};d.prototype.getTraceLog=function(){if(null!==this._traceBuffer){this._trace("Client.getTraceLog",new Date);this._trace("Client.getTraceLog in flight messages",this._sentMessages.length);for(var a in this._sentMessages)this._trace("_sentMessages ",a,this._sentMessages[a]);for(a in this._receivedMessages)this._trace("_receivedMessages ",a,this._receivedMessages[a]);return this._traceBuffer}};d.prototype.startTrace=function(){null===this._traceBuffer&&
(this._traceBuffer=[]);this._trace("Client.startTrace",new Date,"1.0.3")};d.prototype.stopTrace=function(){delete this._traceBuffer};d.prototype._doConnect=function(a){this.connectOptions.useSSL&&(a=a.split(":"),a[0]="wss",a=a.join(":"));this._wsuri=a;this.connected=!1;this.socket=4>this.connectOptions.mqttVersion?new WebSocket(a,["mqttv3.1"]):new WebSocket(a,["mqtt"]);this.socket.binaryType="arraybuffer";this.socket.onopen=v(this._on_socket_open,this);this.socket.onmessage=v(this._on_socket_message,
this);this.socket.onerror=v(this._on_socket_error,this);this.socket.onclose=v(this._on_socket_close,this);this.sendPinger=new F(this,window,this.connectOptions.keepAliveInterval);this.receivePinger=new F(this,window,this.connectOptions.keepAliveInterval);this._connectTimeout&&(this._connectTimeout.cancel(),this._connectTimeout=null);this._connectTimeout=new w(this,window,this.connectOptions.timeout,this._disconnected,[h.CONNECT_TIMEOUT.code,f(h.CONNECT_TIMEOUT)])};d.prototype._schedule_message=function(a){this._msg_queue.push(a);
this.connected&&this._process_queue()};d.prototype.store=function(a,b){var c={type:b.type,messageIdentifier:b.messageIdentifier,version:1};switch(b.type){case 3:b.pubRecReceived&&(c.pubRecReceived=!0);c.payloadMessage={};for(var d="",e=b.payloadMessage.payloadBytes,g=0;g<e.length;g++)d=15>=e[g]?d+"0"+e[g].toString(16):d+e[g].toString(16);c.payloadMessage.payloadHex=d;c.payloadMessage.qos=b.payloadMessage.qos;c.payloadMessage.destinationName=b.payloadMessage.destinationName;b.payloadMessage.duplicate&&
(c.payloadMessage.duplicate=!0);b.payloadMessage.retained&&(c.payloadMessage.retained=!0);0===a.indexOf("Sent:")&&(void 0===b.sequence&&(b.sequence=++this._sequence),c.sequence=b.sequence);break;default:throw Error(f(h.INVALID_STORED_DATA,[key,c]));}localStorage.setItem(a+this._localKey+b.messageIdentifier,JSON.stringify(c))};d.prototype.restore=function(a){var b=localStorage.getItem(a),c=JSON.parse(b),d=new q(c.type,c);switch(c.type){case 3:for(var b=c.payloadMessage.payloadHex,e=new ArrayBuffer(b.length/
2),e=new Uint8Array(e),g=0;2<=b.length;){var m=parseInt(b.substring(0,2),16),b=b.substring(2,b.length);e[g++]=m}b=new Paho.MQTT.Message(e);b.qos=c.payloadMessage.qos;b.destinationName=c.payloadMessage.destinationName;c.payloadMessage.duplicate&&(b.duplicate=!0);c.payloadMessage.retained&&(b.retained=!0);d.payloadMessage=b;break;default:throw Error(f(h.INVALID_STORED_DATA,[a,b]));}0===a.indexOf("Sent:"+this._localKey)?(d.payloadMessage.duplicate=!0,this._sentMessages[d.messageIdentifier]=d):0===a.indexOf("Received:"+
this._localKey)&&(this._receivedMessages[d.messageIdentifier]=d)};d.prototype._process_queue=function(){for(var a=null,b=this._msg_queue.reverse();a=b.pop();)this._socket_send(a),this._notify_msg_sent[a]&&(this._notify_msg_sent[a](),delete this._notify_msg_sent[a])};d.prototype._requires_ack=function(a){var b=Object.keys(this._sentMessages).length;if(b>this.maxMessageIdentifier)throw Error("Too many messages:"+b);for(;void 0!==this._sentMessages[this._message_identifier];)this._message_identifier++;
a.messageIdentifier=this._message_identifier;this._sentMessages[a.messageIdentifier]=a;3===a.type&&this.store("Sent:",a);this._message_identifier===this.maxMessageIdentifier&&(this._message_identifier=1)};d.prototype._on_socket_open=function(){var a=new q(1,this.connectOptions);a.clientId=this.clientId;this._socket_send(a)};d.prototype._on_socket_message=function(a){this._trace("Client._on_socket_message",a.data);a=this._deframeMessages(a.data);for(var b=0;b<a.length;b+=1)this._handleMessage(a[b])};
d.prototype._deframeMessages=function(a){a=new Uint8Array(a);var b=[];if(this.receiveBuffer){var c=new Uint8Array(this.receiveBuffer.length+a.length);c.set(this.receiveBuffer);c.set(a,this.receiveBuffer.length);a=c;delete this.receiveBuffer}try{for(c=0;c<a.length;){var d;a:{var e=a,g=c,m=g,n=e[g],l=n>>4,t=n&15,g=g+1,x=void 0,C=0,p=1;do{if(g==e.length){d=[null,m];break a}x=e[g++];C+=(x&127)*p;p*=128}while(0!==(x&128));x=g+C;if(x>e.length)d=[null,m];else{var y=new q(l);switch(l){case 2:e[g++]&1&&(y.sessionPresent=
!0);y.returnCode=e[g++];break;case 3:var m=t>>1&3,s=256*e[g]+e[g+1],g=g+2,u=E(e,g,s),g=g+s;0<m&&(y.messageIdentifier=256*e[g]+e[g+1],g+=2);var r=new Paho.MQTT.Message(e.subarray(g,x));1==(t&1)&&(r.retained=!0);8==(t&8)&&(r.duplicate=!0);r.qos=m;r.destinationName=u;y.payloadMessage=r;break;case 4:case 5:case 6:case 7:case 11:y.messageIdentifier=256*e[g]+e[g+1];break;case 9:y.messageIdentifier=256*e[g]+e[g+1],g+=2,y.returnCode=e.subarray(g,x)}d=[y,x]}}var v=d[0],c=d[1];if(null!==v)b.push(v);else break}c<
a.length&&(this.receiveBuffer=a.subarray(c))}catch(w){d="undefined"==w.hasOwnProperty("stack")?w.stack.toString():"No Error Stack Available";this._disconnected(h.INTERNAL_ERROR.code,f(h.INTERNAL_ERROR,[w.message,d]));return}return b};d.prototype._handleMessage=function(a){this._trace("Client._handleMessage",a);try{switch(a.type){case 2:this._connectTimeout.cancel();this._reconnectTimeout&&this._reconnectTimeout.cancel();if(this.connectOptions.cleanSession){for(var b in this._sentMessages){var c=this._sentMessages[b];
localStorage.removeItem("Sent:"+this._localKey+c.messageIdentifier)}this._sentMessages={};for(b in this._receivedMessages){var d=this._receivedMessages[b];localStorage.removeItem("Received:"+this._localKey+d.messageIdentifier)}this._receivedMessages={}}if(0===a.returnCode)this.connected=!0,this.connectOptions.uris&&(this.hostIndex=this.connectOptions.uris.length);else{this._disconnected(h.CONNACK_RETURNCODE.code,f(h.CONNACK_RETURNCODE,[a.returnCode,H[a.returnCode]]));break}a=[];for(var e in this._sentMessages)this._sentMessages.hasOwnProperty(e)&&
a.push(this._sentMessages[e]);if(0<this._buffered_msg_queue.length){e=null;for(var g=this._buffered_msg_queue.reverse();e=g.pop();)a.push(e),this.onMessageDelivered&&(this._notify_msg_sent[e]=this.onMessageDelivered(e.payloadMessage))}a=a.sort(function(a,b){return a.sequence-b.sequence});for(var g=0,m=a.length;g<m;g++)if(c=a[g],3==c.type&&c.pubRecReceived){var n=new q(6,{messageIdentifier:c.messageIdentifier});this._schedule_message(n)}else this._schedule_message(c);if(this.connectOptions.onSuccess)this.connectOptions.onSuccess({invocationContext:this.connectOptions.invocationContext});
c=!1;this._reconnecting&&(c=!0,this._reconnectInterval=1,this._reconnecting=!1);this._connected(c,this._wsuri);this._process_queue();break;case 3:this._receivePublish(a);break;case 4:if(c=this._sentMessages[a.messageIdentifier])if(delete this._sentMessages[a.messageIdentifier],localStorage.removeItem("Sent:"+this._localKey+a.messageIdentifier),this.onMessageDelivered)this.onMessageDelivered(c.payloadMessage);break;case 5:if(c=this._sentMessages[a.messageIdentifier])c.pubRecReceived=!0,n=new q(6,{messageIdentifier:a.messageIdentifier}),
this.store("Sent:",c),this._schedule_message(n);break;case 6:d=this._receivedMessages[a.messageIdentifier];localStorage.removeItem("Received:"+this._localKey+a.messageIdentifier);d&&(this._receiveMessage(d),delete this._receivedMessages[a.messageIdentifier]);var l=new q(7,{messageIdentifier:a.messageIdentifier});this._schedule_message(l);break;case 7:c=this._sentMessages[a.messageIdentifier];delete this._sentMessages[a.messageIdentifier];localStorage.removeItem("Sent:"+this._localKey+a.messageIdentifier);
if(this.onMessageDelivered)this.onMessageDelivered(c.payloadMessage);break;case 9:if(c=this._sentMessages[a.messageIdentifier]){c.timeOut&&c.timeOut.cancel();if(128===a.returnCode[0]){if(c.onFailure)c.onFailure(a.returnCode)}else if(c.onSuccess)c.onSuccess(a.returnCode);delete this._sentMessages[a.messageIdentifier]}break;case 11:if(c=this._sentMessages[a.messageIdentifier])c.timeOut&&c.timeOut.cancel(),c.callback&&c.callback(),delete this._sentMessages[a.messageIdentifier];break;case 13:this.sendPinger.reset();
break;case 14:this._disconnected(h.INVALID_MQTT_MESSAGE_TYPE.code,f(h.INVALID_MQTT_MESSAGE_TYPE,[a.type]));break;default:this._disconnected(h.INVALID_MQTT_MESSAGE_TYPE.code,f(h.INVALID_MQTT_MESSAGE_TYPE,[a.type]))}}catch(t){c="undefined"==t.hasOwnProperty("stack")?t.stack.toString():"No Error Stack Available",this._disconnected(h.INTERNAL_ERROR.code,f(h.INTERNAL_ERROR,[t.message,c]))}};d.prototype._on_socket_error=function(a){this._reconnecting||this._disconnected(h.SOCKET_ERROR.code,f(h.SOCKET_ERROR,
[a.data]))};d.prototype._on_socket_close=function(){this._reconnecting||this._disconnected(h.SOCKET_CLOSE.code,f(h.SOCKET_CLOSE))};d.prototype._socket_send=function(a){if(1==a.type){var b=this._traceMask(a,"password");this._trace("Client._socket_send",b)}else this._trace("Client._socket_send",a);this.socket.send(a.encode());this.sendPinger.reset()};d.prototype._receivePublish=function(a){switch(a.payloadMessage.qos){case "undefined":case 0:this._receiveMessage(a);break;case 1:var b=new q(4,{messageIdentifier:a.messageIdentifier});
this._schedule_message(b);this._receiveMessage(a);break;case 2:this._receivedMessages[a.messageIdentifier]=a;this.store("Received:",a);a=new q(5,{messageIdentifier:a.messageIdentifier});this._schedule_message(a);break;default:throw Error("Invaild qos\x3d"+wireMmessage.payloadMessage.qos);}};d.prototype._receiveMessage=function(a){if(this.onMessageArrived)this.onMessageArrived(a.payloadMessage)};d.prototype._connected=function(a,b){if(this.onConnected)this.onConnected(a,b)};d.prototype._reconnect=
function(){this._trace("Client._reconnect");this.connected||(this._reconnecting=!0,this.sendPinger.cancel(),this.receivePinger.cancel(),128>this._reconnectInterval&&(this._reconnectInterval*=2),this.connectOptions.uris?(this.hostIndex=0,this._doConnect(this.connectOptions.uris[0])):this._doConnect(this.uri))};d.prototype._disconnected=function(a,b){this._trace("Client._disconnected",a,b);if(void 0!==a&&this._reconnecting)this._reconnectTimeout=new w(this,window,this._reconnectInterval,this._reconnect);
else if(this.sendPinger.cancel(),this.receivePinger.cancel(),this._connectTimeout&&(this._connectTimeout.cancel(),this._connectTimeout=null),this._msg_queue=[],this._buffered_msg_queue=[],this._notify_msg_sent={},this.socket&&(this.socket.onopen=null,this.socket.onmessage=null,this.socket.onerror=null,this.socket.onclose=null,1===this.socket.readyState&&this.socket.close(),delete this.socket),this.connectOptions.uris&&this.hostIndex<this.connectOptions.uris.length-1)this.hostIndex++,this._doConnect(this.connectOptions.uris[this.hostIndex]);
else if(void 0===a&&(a=h.OK.code,b=f(h.OK)),this.connected){this.connected=!1;if(this.onConnectionLost)this.onConnectionLost({errorCode:a,errorMessage:b,reconnect:this.connectOptions.reconnect,uri:this._wsuri});a!==h.OK.code&&this.connectOptions.reconnect&&(this._reconnectInterval=1,this._reconnect())}else if(4===this.connectOptions.mqttVersion&&!1===this.connectOptions.mqttVersionExplicit)this._trace("Failed to connect V4, dropping back to V3"),this.connectOptions.mqttVersion=3,this.connectOptions.uris?
(this.hostIndex=0,this._doConnect(this.connectOptions.uris[0])):this._doConnect(this.uri);else if(this.connectOptions.onFailure)this.connectOptions.onFailure({invocationContext:this.connectOptions.invocationContext,errorCode:a,errorMessage:b})};d.prototype._trace=function(){if(this.traceFunction){for(var a in arguments)"undefined"!==typeof arguments[a]&&arguments.splice(a,1,JSON.stringify(arguments[a]));a=Array.prototype.slice.call(arguments).join("");this.traceFunction({severity:"Debug",message:a})}if(null!==
this._traceBuffer){a=0;for(var b=arguments.length;a<b;a++)this._traceBuffer.length==this._MAX_TRACE_ENTRIES&&this._traceBuffer.shift(),0===a?this._traceBuffer.push(arguments[a]):"undefined"===typeof arguments[a]?this._traceBuffer.push(arguments[a]):this._traceBuffer.push("  "+JSON.stringify(arguments[a]))}};d.prototype._traceMask=function(a,b){var c={},d;for(d in a)a.hasOwnProperty(d)&&(c[d]=d==b?"******":a[d]);return c};var G=function(a,b,c,k){var e;if("string"!==typeof a)throw Error(f(h.INVALID_TYPE,
[typeof a,"host"]));if(2==arguments.length){k=b;e=a;var g=e.match(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/);if(g)a=g[4]||g[2],b=parseInt(g[7]),c=g[8];else throw Error(f(h.INVALID_ARGUMENT,[a,"host"]));}else{3==arguments.length&&(k=c,c="/mqtt");if("number"!==typeof b||0>b)throw Error(f(h.INVALID_TYPE,[typeof b,"port"]));if("string"!==typeof c)throw Error(f(h.INVALID_TYPE,[typeof c,"path"]));e="ws://"+(-1!==a.indexOf(":")&&"["!==a.slice(0,1)&&"]"!==a.slice(-1)?"["+a+"]":a)+":"+b+c}for(var m=
g=0;m<k.length;m++){var n=k.charCodeAt(m);55296<=n&&56319>=n&&m++;g++}if("string"!==typeof k||65535<g)throw Error(f(h.INVALID_ARGUMENT,[k,"clientId"]));var l=new d(e,a,b,c,k);this._getHost=function(){return a};this._setHost=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getPort=function(){return b};this._setPort=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getPath=function(){return c};this._setPath=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getURI=function(){return e};
this._setURI=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getClientId=function(){return l.clientId};this._setClientId=function(){throw Error(f(h.UNSUPPORTED_OPERATION));};this._getOnConnected=function(){return l.onConnected};this._setOnConnected=function(a){if("function"===typeof a)l.onConnected=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onConnected"]));};this._getDisconnectedPublishing=function(){return l.disconnectedPublishing};this._setDisconnectedPublishing=function(a){l.disconnectedPublishing=
a};this._getDisconnectedBufferSize=function(){return l.disconnectedBufferSize};this._setDisconnectedBufferSize=function(a){l.disconnectedBufferSize=a};this._getOnConnectionLost=function(){return l.onConnectionLost};this._setOnConnectionLost=function(a){if("function"===typeof a)l.onConnectionLost=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onConnectionLost"]));};this._getOnMessageDelivered=function(){return l.onMessageDelivered};this._setOnMessageDelivered=function(a){if("function"===typeof a)l.onMessageDelivered=
a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onMessageDelivered"]));};this._getOnMessageArrived=function(){return l.onMessageArrived};this._setOnMessageArrived=function(a){if("function"===typeof a)l.onMessageArrived=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onMessageArrived"]));};this._getTrace=function(){return l.traceFunction};this._setTrace=function(a){if("function"===typeof a)l.traceFunction=a;else throw Error(f(h.INVALID_TYPE,[typeof a,"onTrace"]));};this.connect=function(a){a=a||{};z(a,
{timeout:"number",userName:"string",password:"string",willMessage:"object",keepAliveInterval:"number",cleanSession:"boolean",useSSL:"boolean",invocationContext:"object",onSuccess:"function",onFailure:"function",hosts:"object",ports:"object",reconnect:"boolean",mqttVersion:"number",mqttVersionExplicit:"boolean",uris:"object"});void 0===a.keepAliveInterval&&(a.keepAliveInterval=60);if(4<a.mqttVersion||3>a.mqttVersion)throw Error(f(h.INVALID_ARGUMENT,[a.mqttVersion,"connectOptions.mqttVersion"]));void 0===
a.mqttVersion?(a.mqttVersionExplicit=!1,a.mqttVersion=4):a.mqttVersionExplicit=!0;if(void 0!==a.password&&void 0===a.userName)throw Error(f(h.INVALID_ARGUMENT,[a.password,"connectOptions.password"]));if(a.willMessage){if(!(a.willMessage instanceof r))throw Error(f(h.INVALID_TYPE,[a.willMessage,"connectOptions.willMessage"]));a.willMessage.stringPayload=null;if("undefined"===typeof a.willMessage.destinationName)throw Error(f(h.INVALID_TYPE,[typeof a.willMessage.destinationName,"connectOptions.willMessage.destinationName"]));
}"undefined"===typeof a.cleanSession&&(a.cleanSession=!0);if(a.hosts){if(!(a.hosts instanceof Array))throw Error(f(h.INVALID_ARGUMENT,[a.hosts,"connectOptions.hosts"]));if(1>a.hosts.length)throw Error(f(h.INVALID_ARGUMENT,[a.hosts,"connectOptions.hosts"]));for(var b=!1,d=0;d<a.hosts.length;d++){if("string"!==typeof a.hosts[d])throw Error(f(h.INVALID_TYPE,[typeof a.hosts[d],"connectOptions.hosts["+d+"]"]));if(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/.test(a.hosts[d]))if(0===d)b=!0;else{if(!b)throw Error(f(h.INVALID_ARGUMENT,
[a.hosts[d],"connectOptions.hosts["+d+"]"]));}else if(b)throw Error(f(h.INVALID_ARGUMENT,[a.hosts[d],"connectOptions.hosts["+d+"]"]));}if(b)a.uris=a.hosts;else{if(!a.ports)throw Error(f(h.INVALID_ARGUMENT,[a.ports,"connectOptions.ports"]));if(!(a.ports instanceof Array))throw Error(f(h.INVALID_ARGUMENT,[a.ports,"connectOptions.ports"]));if(a.hosts.length!==a.ports.length)throw Error(f(h.INVALID_ARGUMENT,[a.ports,"connectOptions.ports"]));a.uris=[];for(d=0;d<a.hosts.length;d++){if("number"!==typeof a.ports[d]||
0>a.ports[d])throw Error(f(h.INVALID_TYPE,[typeof a.ports[d],"connectOptions.ports["+d+"]"]));var b=a.hosts[d],g=a.ports[d];e="ws://"+(-1!==b.indexOf(":")?"["+b+"]":b)+":"+g+c;a.uris.push(e)}}}l.connect(a)};this.subscribe=function(a,b){if("string"!==typeof a)throw Error("Invalid argument:"+a);b=b||{};z(b,{qos:"number",invocationContext:"object",onSuccess:"function",onFailure:"function",timeout:"number"});if(b.timeout&&!b.onFailure)throw Error("subscribeOptions.timeout specified with no onFailure callback.");
if("undefined"!==typeof b.qos&&0!==b.qos&&1!==b.qos&&2!==b.qos)throw Error(f(h.INVALID_ARGUMENT,[b.qos,"subscribeOptions.qos"]));l.subscribe(a,b)};this.unsubscribe=function(a,b){if("string"!==typeof a)throw Error("Invalid argument:"+a);b=b||{};z(b,{invocationContext:"object",onSuccess:"function",onFailure:"function",timeout:"number"});if(b.timeout&&!b.onFailure)throw Error("unsubscribeOptions.timeout specified with no onFailure callback.");l.unsubscribe(a,b)};this.send=function(a,b,c,d){var e;if(0===
arguments.length)throw Error("Invalid argument.length");if(1==arguments.length){if(!(a instanceof r)&&"string"!==typeof a)throw Error("Invalid argument:"+typeof a);e=a;if("undefined"===typeof e.destinationName)throw Error(f(h.INVALID_ARGUMENT,[e.destinationName,"Message.destinationName"]));}else e=new r(b),e.destinationName=a,3<=arguments.length&&(e.qos=c),4<=arguments.length&&(e.retained=d);l.send(e)};this.publish=function(a,b,c,d){console.log("Publising message to: ",a);var e;if(0===arguments.length)throw Error("Invalid argument.length");
if(1==arguments.length){if(!(a instanceof r)&&"string"!==typeof a)throw Error("Invalid argument:"+typeof a);e=a;if("undefined"===typeof e.destinationName)throw Error(f(h.INVALID_ARGUMENT,[e.destinationName,"Message.destinationName"]));}else e=new r(b),e.destinationName=a,3<=arguments.length&&(e.qos=c),4<=arguments.length&&(e.retained=d);l.send(e)};this.disconnect=function(){l.disconnect()};this.getTraceLog=function(){return l.getTraceLog()};this.startTrace=function(){l.startTrace()};this.stopTrace=
function(){l.stopTrace()};this.isConnected=function(){return l.connected}};G.prototype={get host(){return this._getHost()},set host(a){this._setHost(a)},get port(){return this._getPort()},set port(a){this._setPort(a)},get path(){return this._getPath()},set path(a){this._setPath(a)},get clientId(){return this._getClientId()},set clientId(a){this._setClientId(a)},get onConnected(){return this._getOnConnected()},set onConnected(a){this._setOnConnected(a)},get disconnectedPublishing(){return this._getDisconnectedPublishing()},
set disconnectedPublishing(a){this._setDisconnectedPublishing(a)},get disconnectedBufferSize(){return this._getDisconnectedBufferSize()},set disconnectedBufferSize(a){this._setDisconnectedBufferSize(a)},get onConnectionLost(){return this._getOnConnectionLost()},set onConnectionLost(a){this._setOnConnectionLost(a)},get onMessageDelivered(){return this._getOnMessageDelivered()},set onMessageDelivered(a){this._setOnMessageDelivered(a)},get onMessageArrived(){return this._getOnMessageArrived()},set onMessageArrived(a){this._setOnMessageArrived(a)},
get trace(){return this._getTrace()},set trace(a){this._setTrace(a)}};var r=function(a){var b;if("string"===typeof a||a instanceof ArrayBuffer||a instanceof Int8Array||a instanceof Uint8Array||a instanceof Int16Array||a instanceof Uint16Array||a instanceof Int32Array||a instanceof Uint32Array||a instanceof Float32Array||a instanceof Float64Array)b=a;else throw f(h.INVALID_ARGUMENT,[a,"newPayload"]);this._getPayloadString=function(){return"string"===typeof b?b:E(b,0,b.length)};this._getPayloadBytes=
function(){if("string"===typeof b){var a=new ArrayBuffer(n(b)),a=new Uint8Array(a);D(b,a,0);return a}return b};var c;this._getDestinationName=function(){return c};this._setDestinationName=function(a){if("string"===typeof a)c=a;else throw Error(f(h.INVALID_ARGUMENT,[a,"newDestinationName"]));};var d=0;this._getQos=function(){return d};this._setQos=function(a){if(0===a||1===a||2===a)d=a;else throw Error("Invalid argument:"+a);};var e=!1;this._getRetained=function(){return e};this._setRetained=function(a){if("boolean"===
typeof a)e=a;else throw Error(f(h.INVALID_ARGUMENT,[a,"newRetained"]));};var g=!1;this._getDuplicate=function(){return g};this._setDuplicate=function(a){g=a}};r.prototype={get payloadString(){return this._getPayloadString()},get payloadBytes(){return this._getPayloadBytes()},get destinationName(){return this._getDestinationName()},set destinationName(a){this._setDestinationName(a)},get topic(){return this._getDestinationName()},set topic(a){this._setDestinationName(a)},get qos(){return this._getQos()},
set qos(a){this._setQos(a)},get retained(){return this._getRetained()},set retained(a){this._setRetained(a)},get duplicate(){return this._getDuplicate()},set duplicate(a){this._setDuplicate(a)}};return{Client:G,Message:r}}(window)});

F. paho.javascript-1.0.3 / paho-mqtt.js

/*******************************************************************************
 * Copyright (c) 2013 IBM Corp.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * and Eclipse Distribution License v1.0 which accompany this distribution.
 *
 * The Eclipse Public License is available at
 *    http://www.eclipse.org/legal/epl-v10.html
 * and the Eclipse Distribution License is available at
 *   http://www.eclipse.org/org/documents/edl-v10.php.
 *
 * Contributors:
 *    Andrew Banks - initial API and implementation and initial documentation
 *******************************************************************************/


// Only expose a single object name in the global namespace.
// Everything must go through this module. Global Paho.MQTT module
// only has a single public function, client, which returns
// a Paho.MQTT client object given connection details.

/**
 * Send and receive messages using web browsers.
 * <p>
 * This programming interface lets a JavaScript client application use the MQTT V3.1 or
 * V3.1.1 protocol to connect to an MQTT-supporting messaging server.
 *
 * The function supported includes:
 * <ol>
 * <li>Connecting to and disconnecting from a server. The server is identified by its host name and port number.
 * <li>Specifying options that relate to the communications link with the server,
 * for example the frequency of keep-alive heartbeats, and whether SSL/TLS is required.
 * <li>Subscribing to and receiving messages from MQTT Topics.
 * <li>Publishing messages to MQTT Topics.
 * </ol>
 * <p>
 * The API consists of two main objects:
 * <dl>
 * <dt><b>{@link Paho.MQTT.Client}</b></dt>
 * <dd>This contains methods that provide the functionality of the API,
 * including provision of callbacks that notify the application when a message
 * arrives from or is delivered to the messaging server,
 * or when the status of its connection to the messaging server changes.</dd>
 * <dt><b>{@link Paho.MQTT.Message}</b></dt>
 * <dd>This encapsulates the payload of the message along with various attributes
 * associated with its delivery, in particular the destination to which it has
 * been (or is about to be) sent.</dd>
 * </dl>
 * <p>
 * The programming interface validates parameters passed to it, and will throw
 * an Error containing an error message intended for developer use, if it detects
 * an error with any parameter.
 * <p>
 * Example:
 *
 * <code><pre>
client = new Paho.MQTT.Client(location.hostname, Number(location.port), "clientId");
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({onSuccess:onConnect});

function onConnect() {
  // Once a connection has been made, make a subscription and send a message.
  console.log("onConnect");
  client.subscribe("/World");
  message = new Paho.MQTT.Message("Hello");
  message.destinationName = "/World";
  client.send(message);
};
function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0)
	console.log("onConnectionLost:"+responseObject.errorMessage);
};
function onMessageArrived(message) {
  console.log("onMessageArrived:"+message.payloadString);
  client.disconnect();
};
 * </pre></code>
 * @namespace Paho.MQTT
 */

/* jshint shadow:true */
(function ExportLibrary(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object'){
		module.exports = factory();
	} else if (typeof define === 'function' && define.amd){
		define(factory);
	} else if (typeof exports === 'object'){
		exports = factory();
	} else {
		if (typeof root.Paho === 'undefined'){
			root.Paho = {};
		}
		root.Paho.MQTT = factory();
	}
})(this, function LibraryFactory(){


var PahoMQTT = (function (global) {

	// Private variables below, these are only visible inside the function closure
	// which is used to define the module.

	var version = "@VERSION@";
	var buildLevel = "@BUILDLEVEL@";

	/**
	 * Unique message type identifiers, with associated
	 * associated integer values.
	 * @private
	 */
	var MESSAGE_TYPE = {
		CONNECT: 1,
		CONNACK: 2,
		PUBLISH: 3,
		PUBACK: 4,
		PUBREC: 5,
		PUBREL: 6,
		PUBCOMP: 7,
		SUBSCRIBE: 8,
		SUBACK: 9,
		UNSUBSCRIBE: 10,
		UNSUBACK: 11,
		PINGREQ: 12,
		PINGRESP: 13,
		DISCONNECT: 14
	};

	// Collection of utility methods used to simplify module code
	// and promote the DRY pattern.

	/**
	 * Validate an object's parameter names to ensure they
	 * match a list of expected variables name for this option
	 * type. Used to ensure option object passed into the API don't
	 * contain erroneous parameters.
	 * @param {Object} obj - User options object
	 * @param {Object} keys - valid keys and types that may exist in obj.
	 * @throws {Error} Invalid option parameter found.
	 * @private
	 */
	var validate = function(obj, keys) {
		for (var key in obj) {
			if (obj.hasOwnProperty(key)) {
				if (keys.hasOwnProperty(key)) {
					if (typeof obj[key] !== keys[key])
					   throw new Error(format(ERROR.INVALID_TYPE, [typeof obj[key], key]));
				} else {
					var errorStr = "Unknown property, " + key + ". Valid properties are:";
					for (var validKey in keys)
						if (keys.hasOwnProperty(validKey))
							errorStr = errorStr+" "+validKey;
					throw new Error(errorStr);
				}
			}
		}
	};

	/**
	 * Return a new function which runs the user function bound
	 * to a fixed scope.
	 * @param {function} User function
	 * @param {object} Function scope
	 * @return {function} User function bound to another scope
	 * @private
	 */
	var scope = function (f, scope) {
		return function () {
			return f.apply(scope, arguments);
		};
	};

	/**
	 * Unique message type identifiers, with associated
	 * associated integer values.
	 * @private
	 */
	var ERROR = {
		OK: {code:0, text:"AMQJSC0000I OK."},
		CONNECT_TIMEOUT: {code:1, text:"AMQJSC0001E Connect timed out."},
		SUBSCRIBE_TIMEOUT: {code:2, text:"AMQJS0002E Subscribe timed out."},
		UNSUBSCRIBE_TIMEOUT: {code:3, text:"AMQJS0003E Unsubscribe timed out."},
		PING_TIMEOUT: {code:4, text:"AMQJS0004E Ping timed out."},
		INTERNAL_ERROR: {code:5, text:"AMQJS0005E Internal error. Error Message: {0}, Stack trace: {1}"},
		CONNACK_RETURNCODE: {code:6, text:"AMQJS0006E Bad Connack return code:{0} {1}."},
		SOCKET_ERROR: {code:7, text:"AMQJS0007E Socket error:{0}."},
		SOCKET_CLOSE: {code:8, text:"AMQJS0008I Socket closed."},
		MALFORMED_UTF: {code:9, text:"AMQJS0009E Malformed UTF data:{0} {1} {2}."},
		UNSUPPORTED: {code:10, text:"AMQJS0010E {0} is not supported by this browser."},
		INVALID_STATE: {code:11, text:"AMQJS0011E Invalid state {0}."},
		INVALID_TYPE: {code:12, text:"AMQJS0012E Invalid type {0} for {1}."},
		INVALID_ARGUMENT: {code:13, text:"AMQJS0013E Invalid argument {0} for {1}."},
		UNSUPPORTED_OPERATION: {code:14, text:"AMQJS0014E Unsupported operation."},
		INVALID_STORED_DATA: {code:15, text:"AMQJS0015E Invalid data in local storage key={0} value={1}."},
		INVALID_MQTT_MESSAGE_TYPE: {code:16, text:"AMQJS0016E Invalid MQTT message type {0}."},
		MALFORMED_UNICODE: {code:17, text:"AMQJS0017E Malformed Unicode string:{0} {1}."},
		BUFFER_FULL: {code:18, text:"AMQJS0018E Message buffer is full, maximum buffer size: {0}."},
	};

	/** CONNACK RC Meaning. */
	var CONNACK_RC = {
		0:"Connection Accepted",
		1:"Connection Refused: unacceptable protocol version",
		2:"Connection Refused: identifier rejected",
		3:"Connection Refused: server unavailable",
		4:"Connection Refused: bad user name or password",
		5:"Connection Refused: not authorized"
	};

	/**
	 * Format an error message text.
	 * @private
	 * @param {error} ERROR.KEY value above.
	 * @param {substitutions} [array] substituted into the text.
	 * @return the text with the substitutions made.
	 */
	var format = function(error, substitutions) {
		var text = error.text;
		if (substitutions) {
		  var field,start;
		  for (var i=0; i<substitutions.length; i++) {
			field = "{"+i+"}";
			start = text.indexOf(field);
			if(start > 0) {
				var part1 = text.substring(0,start);
				var part2 = text.substring(start+field.length);
				text = part1+substitutions[i]+part2;
			}
		  }
		}
		return text;
	};

	//MQTT protocol and version          6    M    Q    I    s    d    p    3
	var MqttProtoIdentifierv3 = [0x00,0x06,0x4d,0x51,0x49,0x73,0x64,0x70,0x03];
	//MQTT proto/version for 311         4    M    Q    T    T    4
	var MqttProtoIdentifierv4 = [0x00,0x04,0x4d,0x51,0x54,0x54,0x04];

	/**
	 * Construct an MQTT wire protocol message.
	 * @param type MQTT packet type.
	 * @param options optional wire message attributes.
	 *
	 * Optional properties
	 *
	 * messageIdentifier: message ID in the range [0..65535]
	 * payloadMessage:	Application Message - PUBLISH only
	 * connectStrings:	array of 0 or more Strings to be put into the CONNECT payload
	 * topics:			array of strings (SUBSCRIBE, UNSUBSCRIBE)
	 * requestQoS:		array of QoS values [0..2]
	 *
	 * "Flag" properties
	 * cleanSession:	true if present / false if absent (CONNECT)
	 * willMessage:  	true if present / false if absent (CONNECT)
	 * isRetained:		true if present / false if absent (CONNECT)
	 * userName:		true if present / false if absent (CONNECT)
	 * password:		true if present / false if absent (CONNECT)
	 * keepAliveInterval:	integer [0..65535]  (CONNECT)
	 *
	 * @private
	 * @ignore
	 */
	var WireMessage = function (type, options) {
		this.type = type;
		for (var name in options) {
			if (options.hasOwnProperty(name)) {
				this[name] = options[name];
			}
		}
	};

	WireMessage.prototype.encode = function() {
		// Compute the first byte of the fixed header
		var first = ((this.type & 0x0f) << 4);

		/*
		 * Now calculate the length of the variable header + payload by adding up the lengths
		 * of all the component parts
		 */

		var remLength = 0;
		var topicStrLength = [];
		var destinationNameLength = 0;
		var willMessagePayloadBytes;

		// if the message contains a messageIdentifier then we need two bytes for that
		if (this.messageIdentifier !== undefined)
			remLength += 2;

		switch(this.type) {
			// If this a Connect then we need to include 12 bytes for its header
			case MESSAGE_TYPE.CONNECT:
				switch(this.mqttVersion) {
					case 3:
						remLength += MqttProtoIdentifierv3.length + 3;
						break;
					case 4:
						remLength += MqttProtoIdentifierv4.length + 3;
						break;
				}

				remLength += UTF8Length(this.clientId) + 2;
				if (this.willMessage !== undefined) {
					remLength += UTF8Length(this.willMessage.destinationName) + 2;
					// Will message is always a string, sent as UTF-8 characters with a preceding length.
					willMessagePayloadBytes = this.willMessage.payloadBytes;
					if (!(willMessagePayloadBytes instanceof Uint8Array))
						willMessagePayloadBytes = new Uint8Array(payloadBytes);
					remLength += willMessagePayloadBytes.byteLength +2;
				}
				if (this.userName !== undefined)
					remLength += UTF8Length(this.userName) + 2;
				if (this.password !== undefined)
					remLength += UTF8Length(this.password) + 2;
			break;

			// Subscribe, Unsubscribe can both contain topic strings
			case MESSAGE_TYPE.SUBSCRIBE:
				first |= 0x02; // Qos = 1;
				for ( var i = 0; i < this.topics.length; i++) {
					topicStrLength[i] = UTF8Length(this.topics[i]);
					remLength += topicStrLength[i] + 2;
				}
				remLength += this.requestedQos.length; // 1 byte for each topic's Qos
				// QoS on Subscribe only
				break;

			case MESSAGE_TYPE.UNSUBSCRIBE:
				first |= 0x02; // Qos = 1;
				for ( var i = 0; i < this.topics.length; i++) {
					topicStrLength[i] = UTF8Length(this.topics[i]);
					remLength += topicStrLength[i] + 2;
				}
				break;

			case MESSAGE_TYPE.PUBREL:
				first |= 0x02; // Qos = 1;
				break;

			case MESSAGE_TYPE.PUBLISH:
				if (this.payloadMessage.duplicate) first |= 0x08;
				first  = first |= (this.payloadMessage.qos << 1);
				if (this.payloadMessage.retained) first |= 0x01;
				destinationNameLength = UTF8Length(this.payloadMessage.destinationName);
				remLength += destinationNameLength + 2;
				var payloadBytes = this.payloadMessage.payloadBytes;
				remLength += payloadBytes.byteLength;
				if (payloadBytes instanceof ArrayBuffer)
					payloadBytes = new Uint8Array(payloadBytes);
				else if (!(payloadBytes instanceof Uint8Array))
					payloadBytes = new Uint8Array(payloadBytes.buffer);
				break;

			case MESSAGE_TYPE.DISCONNECT:
				break;

			default:
				break;
		}

		// Now we can allocate a buffer for the message

		var mbi = encodeMBI(remLength);  // Convert the length to MQTT MBI format
		var pos = mbi.length + 1;        // Offset of start of variable header
		var buffer = new ArrayBuffer(remLength + pos);
		var byteStream = new Uint8Array(buffer);    // view it as a sequence of bytes

		//Write the fixed header into the buffer
		byteStream[0] = first;
		byteStream.set(mbi,1);

		// If this is a PUBLISH then the variable header starts with a topic
		if (this.type == MESSAGE_TYPE.PUBLISH)
			pos = writeString(this.payloadMessage.destinationName, destinationNameLength, byteStream, pos);
		// If this is a CONNECT then the variable header contains the protocol name/version, flags and keepalive time

		else if (this.type == MESSAGE_TYPE.CONNECT) {
			switch (this.mqttVersion) {
				case 3:
					byteStream.set(MqttProtoIdentifierv3, pos);
					pos += MqttProtoIdentifierv3.length;
					break;
				case 4:
					byteStream.set(MqttProtoIdentifierv4, pos);
					pos += MqttProtoIdentifierv4.length;
					break;
			}
			var connectFlags = 0;
			if (this.cleanSession)
				connectFlags = 0x02;
			if (this.willMessage !== undefined ) {
				connectFlags |= 0x04;
				connectFlags |= (this.willMessage.qos<<3);
				if (this.willMessage.retained) {
					connectFlags |= 0x20;
				}
			}
			if (this.userName !== undefined)
				connectFlags |= 0x80;
			if (this.password !== undefined)
				connectFlags |= 0x40;
			byteStream[pos++] = connectFlags;
			pos = writeUint16 (this.keepAliveInterval, byteStream, pos);
		}

		// Output the messageIdentifier - if there is one
		if (this.messageIdentifier !== undefined)
			pos = writeUint16 (this.messageIdentifier, byteStream, pos);

		switch(this.type) {
			case MESSAGE_TYPE.CONNECT:
				pos = writeString(this.clientId, UTF8Length(this.clientId), byteStream, pos);
				if (this.willMessage !== undefined) {
					pos = writeString(this.willMessage.destinationName, UTF8Length(this.willMessage.destinationName), byteStream, pos);
					pos = writeUint16(willMessagePayloadBytes.byteLength, byteStream, pos);
					byteStream.set(willMessagePayloadBytes, pos);
					pos += willMessagePayloadBytes.byteLength;

				}
			if (this.userName !== undefined)
				pos = writeString(this.userName, UTF8Length(this.userName), byteStream, pos);
			if (this.password !== undefined)
				pos = writeString(this.password, UTF8Length(this.password), byteStream, pos);
			break;

			case MESSAGE_TYPE.PUBLISH:
				// PUBLISH has a text or binary payload, if text do not add a 2 byte length field, just the UTF characters.
				byteStream.set(payloadBytes, pos);

				break;

//    	    case MESSAGE_TYPE.PUBREC:
//    	    case MESSAGE_TYPE.PUBREL:
//    	    case MESSAGE_TYPE.PUBCOMP:
//    	    	break;

			case MESSAGE_TYPE.SUBSCRIBE:
				// SUBSCRIBE has a list of topic strings and request QoS
				for (var i=0; i<this.topics.length; i++) {
					pos = writeString(this.topics[i], topicStrLength[i], byteStream, pos);
					byteStream[pos++] = this.requestedQos[i];
				}
				break;

			case MESSAGE_TYPE.UNSUBSCRIBE:
				// UNSUBSCRIBE has a list of topic strings
				for (var i=0; i<this.topics.length; i++)
					pos = writeString(this.topics[i], topicStrLength[i], byteStream, pos);
				break;

			default:
				// Do nothing.
		}

		return buffer;
	};

	function decodeMessage(input,pos) {
	    var startingPos = pos;
		var first = input[pos];
		var type = first >> 4;
		var messageInfo = first &= 0x0f;
		pos += 1;


		// Decode the remaining length (MBI format)

		var digit;
		var remLength = 0;
		var multiplier = 1;
		do {
			if (pos == input.length) {
			    return [null,startingPos];
			}
			digit = input[pos++];
			remLength += ((digit & 0x7F) * multiplier);
			multiplier *= 128;
		} while ((digit & 0x80) !== 0);

		var endPos = pos+remLength;
		if (endPos > input.length) {
		    return [null,startingPos];
		}

		var wireMessage = new WireMessage(type);
		switch(type) {
			case MESSAGE_TYPE.CONNACK:
				var connectAcknowledgeFlags = input[pos++];
				if (connectAcknowledgeFlags & 0x01)
					wireMessage.sessionPresent = true;
				wireMessage.returnCode = input[pos++];
				break;

			case MESSAGE_TYPE.PUBLISH:
				var qos = (messageInfo >> 1) & 0x03;

				var len = readUint16(input, pos);
				pos += 2;
				var topicName = parseUTF8(input, pos, len);
				pos += len;
				// If QoS 1 or 2 there will be a messageIdentifier
				if (qos > 0) {
					wireMessage.messageIdentifier = readUint16(input, pos);
					pos += 2;
				}

				var message = new Paho.MQTT.Message(input.subarray(pos, endPos));
				if ((messageInfo & 0x01) == 0x01)
					message.retained = true;
				if ((messageInfo & 0x08) == 0x08)
					message.duplicate =  true;
				message.qos = qos;
				message.destinationName = topicName;
				wireMessage.payloadMessage = message;
				break;

			case  MESSAGE_TYPE.PUBACK:
			case  MESSAGE_TYPE.PUBREC:
			case  MESSAGE_TYPE.PUBREL:
			case  MESSAGE_TYPE.PUBCOMP:
			case  MESSAGE_TYPE.UNSUBACK:
				wireMessage.messageIdentifier = readUint16(input, pos);
				break;

			case  MESSAGE_TYPE.SUBACK:
				wireMessage.messageIdentifier = readUint16(input, pos);
				pos += 2;
				wireMessage.returnCode = input.subarray(pos, endPos);
				break;

			default:
				break;
		}

		return [wireMessage,endPos];
	}

	function writeUint16(input, buffer, offset) {
		buffer[offset++] = input >> 8;      //MSB
		buffer[offset++] = input % 256;     //LSB
		return offset;
	}

	function writeString(input, utf8Length, buffer, offset) {
		offset = writeUint16(utf8Length, buffer, offset);
		stringToUTF8(input, buffer, offset);
		return offset + utf8Length;
	}

	function readUint16(buffer, offset) {
		return 256*buffer[offset] + buffer[offset+1];
	}

	/**
	 * Encodes an MQTT Multi-Byte Integer
	 * @private
	 */
	function encodeMBI(number) {
		var output = new Array(1);
		var numBytes = 0;

		do {
			var digit = number % 128;
			number = number >> 7;
			if (number > 0) {
				digit |= 0x80;
			}
			output[numBytes++] = digit;
		} while ( (number > 0) && (numBytes<4) );

		return output;
	}

	/**
	 * Takes a String and calculates its length in bytes when encoded in UTF8.
	 * @private
	 */
	function UTF8Length(input) {
		var output = 0;
		for (var i = 0; i<input.length; i++)
		{
			var charCode = input.charCodeAt(i);
				if (charCode > 0x7FF)
				   {
					  // Surrogate pair means its a 4 byte character
					  if (0xD800 <= charCode && charCode <= 0xDBFF)
						{
						  i++;
						  output++;
						}
				   output +=3;
				   }
			else if (charCode > 0x7F)
				output +=2;
			else
				output++;
		}
		return output;
	}

	/**
	 * Takes a String and writes it into an array as UTF8 encoded bytes.
	 * @private
	 */
	function stringToUTF8(input, output, start) {
		var pos = start;
		for (var i = 0; i<input.length; i++) {
			var charCode = input.charCodeAt(i);

			// Check for a surrogate pair.
			if (0xD800 <= charCode && charCode <= 0xDBFF) {
				var lowCharCode = input.charCodeAt(++i);
				if (isNaN(lowCharCode)) {
					throw new Error(format(ERROR.MALFORMED_UNICODE, [charCode, lowCharCode]));
				}
				charCode = ((charCode - 0xD800)<<10) + (lowCharCode - 0xDC00) + 0x10000;

			}

			if (charCode <= 0x7F) {
				output[pos++] = charCode;
			} else if (charCode <= 0x7FF) {
				output[pos++] = charCode>>6  & 0x1F | 0xC0;
				output[pos++] = charCode     & 0x3F | 0x80;
			} else if (charCode <= 0xFFFF) {
				output[pos++] = charCode>>12 & 0x0F | 0xE0;
				output[pos++] = charCode>>6  & 0x3F | 0x80;
				output[pos++] = charCode     & 0x3F | 0x80;
			} else {
				output[pos++] = charCode>>18 & 0x07 | 0xF0;
				output[pos++] = charCode>>12 & 0x3F | 0x80;
				output[pos++] = charCode>>6  & 0x3F | 0x80;
				output[pos++] = charCode     & 0x3F | 0x80;
			}
		}
		return output;
	}

	function parseUTF8(input, offset, length) {
		var output = "";
		var utf16;
		var pos = offset;

		while (pos < offset+length)
		{
			var byte1 = input[pos++];
			if (byte1 < 128)
				utf16 = byte1;
			else
			{
				var byte2 = input[pos++]-128;
				if (byte2 < 0)
					throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16),""]));
				if (byte1 < 0xE0)             // 2 byte character
					utf16 = 64*(byte1-0xC0) + byte2;
				else
				{
					var byte3 = input[pos++]-128;
					if (byte3 < 0)
						throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16)]));
					if (byte1 < 0xF0)        // 3 byte character
						utf16 = 4096*(byte1-0xE0) + 64*byte2 + byte3;
								else
								{
								   var byte4 = input[pos++]-128;
								   if (byte4 < 0)
						throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16), byte4.toString(16)]));
								   if (byte1 < 0xF8)        // 4 byte character
										   utf16 = 262144*(byte1-0xF0) + 4096*byte2 + 64*byte3 + byte4;
					   else                     // longer encodings are not supported
						throw new Error(format(ERROR.MALFORMED_UTF, [byte1.toString(16), byte2.toString(16), byte3.toString(16), byte4.toString(16)]));
								}
				}
			}

				if (utf16 > 0xFFFF)   // 4 byte character - express as a surrogate pair
				  {
					 utf16 -= 0x10000;
					 output += String.fromCharCode(0xD800 + (utf16 >> 10)); // lead character
					 utf16 = 0xDC00 + (utf16 & 0x3FF);  // trail character
				  }
			output += String.fromCharCode(utf16);
		}
		return output;
	}

	/**
	 * Repeat keepalive requests, monitor responses.
	 * @ignore
	 */
	var Pinger = function(client, window, keepAliveInterval) {
		this._client = client;
		this._window = window;
		this._keepAliveInterval = keepAliveInterval*1000;
		this.isReset = false;

		var pingReq = new WireMessage(MESSAGE_TYPE.PINGREQ).encode();

		var doTimeout = function (pinger) {
			return function () {
				return doPing.apply(pinger);
			};
		};

		/** @ignore */
		var doPing = function() {
			if (!this.isReset) {
				this._client._trace("Pinger.doPing", "Timed out");
				this._client._disconnected( ERROR.PING_TIMEOUT.code , format(ERROR.PING_TIMEOUT));
			} else {
				this.isReset = false;
				this._client._trace("Pinger.doPing", "send PINGREQ");
				this._client.socket.send(pingReq);
				this.timeout = this._window.setTimeout(doTimeout(this), this._keepAliveInterval);
			}
		};

		this.reset = function() {
			this.isReset = true;
			this._window.clearTimeout(this.timeout);
			if (this._keepAliveInterval > 0)
				this.timeout = setTimeout(doTimeout(this), this._keepAliveInterval);
		};

		this.cancel = function() {
			this._window.clearTimeout(this.timeout);
		};
	 };

	/**
	 * Monitor request completion.
	 * @ignore
	 */
	var Timeout = function(client, window, timeoutSeconds, action, args) {
		this._window = window;
		if (!timeoutSeconds)
			timeoutSeconds = 30;

		var doTimeout = function (action, client, args) {
			return function () {
				return action.apply(client, args);
			};
		};
		this.timeout = setTimeout(doTimeout(action, client, args), timeoutSeconds * 1000);

		this.cancel = function() {
			this._window.clearTimeout(this.timeout);
		};
	};

	/*
	 * Internal implementation of the Websockets MQTT V3.1 client.
	 *
	 * @name Paho.MQTT.ClientImpl @constructor
	 * @param {String} host the DNS nameof the webSocket host.
	 * @param {Number} port the port number for that host.
	 * @param {String} clientId the MQ client identifier.
	 */
	var ClientImpl = function (uri, host, port, path, clientId) {
		// Check dependencies are satisfied in this browser.
		if (!("WebSocket" in global && global.WebSocket !== null)) {
			throw new Error(format(ERROR.UNSUPPORTED, ["WebSocket"]));
		}
		if (!("localStorage" in global && global.localStorage !== null)) {
			throw new Error(format(ERROR.UNSUPPORTED, ["localStorage"]));
		}
		if (!("ArrayBuffer" in global && global.ArrayBuffer !== null)) {
			throw new Error(format(ERROR.UNSUPPORTED, ["ArrayBuffer"]));
		}
		this._trace("Paho.MQTT.Client", uri, host, port, path, clientId);

		this.host = host;
		this.port = port;
		this.path = path;
		this.uri = uri;
		this.clientId = clientId;
		this._wsuri = null;

		// Local storagekeys are qualified with the following string.
		// The conditional inclusion of path in the key is for backward
		// compatibility to when the path was not configurable and assumed to
		// be /mqtt
		this._localKey=host+":"+port+(path!="/mqtt"?":"+path:"")+":"+clientId+":";

		// Create private instance-only message queue
		// Internal queue of messages to be sent, in sending order.
		this._msg_queue = [];
		this._buffered_msg_queue = [];

		// Messages we have sent and are expecting a response for, indexed by their respective message ids.
		this._sentMessages = {};

		// Messages we have received and acknowleged and are expecting a confirm message for
		// indexed by their respective message ids.
		this._receivedMessages = {};

		// Internal list of callbacks to be executed when messages
		// have been successfully sent over web socket, e.g. disconnect
		// when it doesn't have to wait for ACK, just message is dispatched.
		this._notify_msg_sent = {};

		// Unique identifier for SEND messages, incrementing
		// counter as messages are sent.
		this._message_identifier = 1;

		// Used to determine the transmission sequence of stored sent messages.
		this._sequence = 0;


		// Load the local state, if any, from the saved version, only restore state relevant to this client.
		for (var key in localStorage)
			if (   key.indexOf("Sent:"+this._localKey) === 0 || key.indexOf("Received:"+this._localKey) === 0)
			this.restore(key);
	};

	// Messaging Client public instance members.
	ClientImpl.prototype.host = null;
	ClientImpl.prototype.port = null;
	ClientImpl.prototype.path = null;
	ClientImpl.prototype.uri = null;
	ClientImpl.prototype.clientId = null;

	// Messaging Client private instance members.
	ClientImpl.prototype.socket = null;
	/* true once we have received an acknowledgement to a CONNECT packet. */
	ClientImpl.prototype.connected = false;
	/* The largest message identifier allowed, may not be larger than 2**16 but
	 * if set smaller reduces the maximum number of outbound messages allowed.
	 */
	ClientImpl.prototype.maxMessageIdentifier = 65536;
	ClientImpl.prototype.connectOptions = null;
	ClientImpl.prototype.hostIndex = null;
	ClientImpl.prototype.onConnected = null;
	ClientImpl.prototype.onConnectionLost = null;
	ClientImpl.prototype.onMessageDelivered = null;
	ClientImpl.prototype.onMessageArrived = null;
	ClientImpl.prototype.traceFunction = null;
	ClientImpl.prototype._msg_queue = null;
	ClientImpl.prototype._buffered_msg_queue = null;
	ClientImpl.prototype._connectTimeout = null;
	/* The sendPinger monitors how long we allow before we send data to prove to the server that we are alive. */
	ClientImpl.prototype.sendPinger = null;
	/* The receivePinger monitors how long we allow before we require evidence that the server is alive. */
	ClientImpl.prototype.receivePinger = null;
	ClientImpl.prototype._reconnectInterval = 1; // Reconnect Delay, starts at 1 second
	ClientImpl.prototype._reconnecting = false;
	ClientImpl.prototype._reconnectTimeout = null;
	ClientImpl.prototype.disconnectedPublishing = false;
	ClientImpl.prototype.disconnectedBufferSize = 5000;

	ClientImpl.prototype.receiveBuffer = null;

	ClientImpl.prototype._traceBuffer = null;
	ClientImpl.prototype._MAX_TRACE_ENTRIES = 100;

	ClientImpl.prototype.connect = function (connectOptions) {
		var connectOptionsMasked = this._traceMask(connectOptions, "password");
		this._trace("Client.connect", connectOptionsMasked, this.socket, this.connected);

		if (this.connected)
			throw new Error(format(ERROR.INVALID_STATE, ["already connected"]));
		if (this.socket)
			throw new Error(format(ERROR.INVALID_STATE, ["already connected"]));

		if (this._reconnecting) {
			// connect() function is called while reconnect is in progress.
			// Terminate the auto reconnect process to use new connect options.
			this._reconnectTimeout.cancel();
			this._reconnectTimeout = null;
			this._reconnecting = false;
		}

		this.connectOptions = connectOptions;
		this._reconnectInterval = 1;
		this._reconnecting = false;
		if (connectOptions.uris) {
			this.hostIndex = 0;
			this._doConnect(connectOptions.uris[0]);
		} else {
			this._doConnect(this.uri);
		}

	};

	ClientImpl.prototype.subscribe = function (filter, subscribeOptions) {
		this._trace("Client.subscribe", filter, subscribeOptions);

		if (!this.connected)
			throw new Error(format(ERROR.INVALID_STATE, ["not connected"]));

		var wireMessage = new WireMessage(MESSAGE_TYPE.SUBSCRIBE);
		wireMessage.topics=[filter];
		if (subscribeOptions.qos !== undefined)
			wireMessage.requestedQos = [subscribeOptions.qos];
		else
			wireMessage.requestedQos = [0];

		if (subscribeOptions.onSuccess) {
			wireMessage.onSuccess = function(grantedQos) {subscribeOptions.onSuccess({invocationContext:subscribeOptions.invocationContext,grantedQos:grantedQos});};
		}

		if (subscribeOptions.onFailure) {
			wireMessage.onFailure = function(errorCode) {subscribeOptions.onFailure({invocationContext:subscribeOptions.invocationContext,errorCode:errorCode, errorMessage:format(errorCode)});};
		}

		if (subscribeOptions.timeout) {
			wireMessage.timeOut = new Timeout(this, window, subscribeOptions.timeout, subscribeOptions.onFailure,
						[{invocationContext:subscribeOptions.invocationContext,
						errorCode:ERROR.SUBSCRIBE_TIMEOUT.code,
						errorMessage:format(ERROR.SUBSCRIBE_TIMEOUT)}]);
		}

		// All subscriptions return a SUBACK.
		this._requires_ack(wireMessage);
		this._schedule_message(wireMessage);
	};

	/** @ignore */
	ClientImpl.prototype.unsubscribe = function(filter, unsubscribeOptions) {
		this._trace("Client.unsubscribe", filter, unsubscribeOptions);

		if (!this.connected)
		   throw new Error(format(ERROR.INVALID_STATE, ["not connected"]));

		var wireMessage = new WireMessage(MESSAGE_TYPE.UNSUBSCRIBE);
		wireMessage.topics = [filter];

		if (unsubscribeOptions.onSuccess) {
			wireMessage.callback = function() {unsubscribeOptions.onSuccess({invocationContext:unsubscribeOptions.invocationContext});};
		}
		if (unsubscribeOptions.timeout) {
			wireMessage.timeOut = new Timeout(this, window, unsubscribeOptions.timeout, unsubscribeOptions.onFailure,
					  [{invocationContext:unsubscribeOptions.invocationContext,
						errorCode:ERROR.UNSUBSCRIBE_TIMEOUT.code,
						errorMessage:format(ERROR.UNSUBSCRIBE_TIMEOUT)}]);
		}

		// All unsubscribes return a SUBACK.
		this._requires_ack(wireMessage);
		this._schedule_message(wireMessage);
	};

	ClientImpl.prototype.send = function (message) {
		this._trace("Client.send", message);

		wireMessage = new WireMessage(MESSAGE_TYPE.PUBLISH);
		wireMessage.payloadMessage = message;

		if (this.connected) {
			// Mark qos 1 & 2 message as "ACK required"
			// For qos 0 message, invoke onMessageDelivered callback if there is one.
			// Then schedule the message.
			if (message.qos > 0) {
			this._requires_ack(wireMessage);
			} else if (this.onMessageDelivered) {
			this._notify_msg_sent[wireMessage] = this.onMessageDelivered(wireMessage.payloadMessage);
			}
		this._schedule_message(wireMessage);
		} else {
			// Currently disconnected, will not schedule this message
			// Check if reconnecting is in progress and disconnected publish is enabled.
			if (this._reconnecting && this.disconnectedPublishing) {
				// Check the limit which include the "required ACK" messages
				var messageCount = Object.keys(this._sentMessages).length + this._buffered_msg_queue.length;
				if (messageCount > this.disconnectedBufferSize) {
					throw new Error(format(ERROR.BUFFER_FULL, [this.disconnectedBufferSize]));
				} else {
					if (message.qos > 0) {
						// Mark this message as "ACK required"
						this._requires_ack(wireMessage);
					} else {
						wireMessage.sequence = ++this._sequence;
						this._buffered_msg_queue.push(wireMessage);
					}
				}
			} else {
				throw new Error(format(ERROR.INVALID_STATE, ["not connected"]));
			}
		}
	};

	ClientImpl.prototype.disconnect = function () {
		this._trace("Client.disconnect");

		if (this._reconnecting) {
			// disconnect() function is called while reconnect is in progress.
			// Terminate the auto reconnect process.
			this._reconnectTimeout.cancel();
			this._reconnectTimeout = null;
			this._reconnecting = false;
		}

		if (!this.socket)
			throw new Error(format(ERROR.INVALID_STATE, ["not connecting or connected"]));

		wireMessage = new WireMessage(MESSAGE_TYPE.DISCONNECT);

		// Run the disconnected call back as soon as the message has been sent,
		// in case of a failure later on in the disconnect processing.
		// as a consequence, the _disconected call back may be run several times.
		this._notify_msg_sent[wireMessage] = scope(this._disconnected, this);

		this._schedule_message(wireMessage);
	};

	ClientImpl.prototype.getTraceLog = function () {
		if ( this._traceBuffer !== null ) {
			this._trace("Client.getTraceLog", new Date());
			this._trace("Client.getTraceLog in flight messages", this._sentMessages.length);
			for (var key in this._sentMessages)
				this._trace("_sentMessages ",key, this._sentMessages[key]);
			for (var key in this._receivedMessages)
				this._trace("_receivedMessages ",key, this._receivedMessages[key]);

			return this._traceBuffer;
		}
	};

	ClientImpl.prototype.startTrace = function () {
		if ( this._traceBuffer === null ) {
			this._traceBuffer = [];
		}
		this._trace("Client.startTrace", new Date(), version);
	};

	ClientImpl.prototype.stopTrace = function () {
		delete this._traceBuffer;
	};

	ClientImpl.prototype._doConnect = function (wsurl) {
		// When the socket is open, this client will send the CONNECT WireMessage using the saved parameters.
		if (this.connectOptions.useSSL) {
		    var uriParts = wsurl.split(":");
		    uriParts[0] = "wss";
		    wsurl = uriParts.join(":");
		}
		this._wsuri = wsurl;
		this.connected = false;



		if (this.connectOptions.mqttVersion < 4) {
			this.socket = new WebSocket(wsurl, ["mqttv3.1"]);
		} else {
			this.socket = new WebSocket(wsurl, ["mqtt"]);
		}
		this.socket.binaryType = 'arraybuffer';
		this.socket.onopen = scope(this._on_socket_open, this);
		this.socket.onmessage = scope(this._on_socket_message, this);
		this.socket.onerror = scope(this._on_socket_error, this);
		this.socket.onclose = scope(this._on_socket_close, this);

		this.sendPinger = new Pinger(this, window, this.connectOptions.keepAliveInterval);
		this.receivePinger = new Pinger(this, window, this.connectOptions.keepAliveInterval);
		if (this._connectTimeout) {
			this._connectTimeout.cancel();
			this._connectTimeout = null;
		}
		this._connectTimeout = new Timeout(this, window, this.connectOptions.timeout, this._disconnected,  [ERROR.CONNECT_TIMEOUT.code, format(ERROR.CONNECT_TIMEOUT)]);
	};


	// Schedule a new message to be sent over the WebSockets
	// connection. CONNECT messages cause WebSocket connection
	// to be started. All other messages are queued internally
	// until this has happened. When WS connection starts, process
	// all outstanding messages.
	ClientImpl.prototype._schedule_message = function (message) {
		this._msg_queue.push(message);
		// Process outstanding messages in the queue if we have an  open socket, and have received CONNACK.
		if (this.connected) {
			this._process_queue();
		}
	};

	ClientImpl.prototype.store = function(prefix, wireMessage) {
		var storedMessage = {type:wireMessage.type, messageIdentifier:wireMessage.messageIdentifier, version:1};

		switch(wireMessage.type) {
		  case MESSAGE_TYPE.PUBLISH:
			  if(wireMessage.pubRecReceived)
				  storedMessage.pubRecReceived = true;

			  // Convert the payload to a hex string.
			  storedMessage.payloadMessage = {};
			  var hex = "";
			  var messageBytes = wireMessage.payloadMessage.payloadBytes;
			  for (var i=0; i<messageBytes.length; i++) {
				if (messageBytes[i] <= 0xF)
				  hex = hex+"0"+messageBytes[i].toString(16);
				else
				  hex = hex+messageBytes[i].toString(16);
			  }
			  storedMessage.payloadMessage.payloadHex = hex;

			  storedMessage.payloadMessage.qos = wireMessage.payloadMessage.qos;
			  storedMessage.payloadMessage.destinationName = wireMessage.payloadMessage.destinationName;
			  if (wireMessage.payloadMessage.duplicate)
				  storedMessage.payloadMessage.duplicate = true;
			  if (wireMessage.payloadMessage.retained)
				  storedMessage.payloadMessage.retained = true;

			  // Add a sequence number to sent messages.
			  if ( prefix.indexOf("Sent:") === 0 ) {
				  if ( wireMessage.sequence === undefined )
					  wireMessage.sequence = ++this._sequence;
				  storedMessage.sequence = wireMessage.sequence;
			  }
			  break;

			default:
				throw Error(format(ERROR.INVALID_STORED_DATA, [key, storedMessage]));
		}
		localStorage.setItem(prefix+this._localKey+wireMessage.messageIdentifier, JSON.stringify(storedMessage));
	};

	ClientImpl.prototype.restore = function(key) {
		var value = localStorage.getItem(key);
		var storedMessage = JSON.parse(value);

		var wireMessage = new WireMessage(storedMessage.type, storedMessage);

		switch(storedMessage.type) {
		  case MESSAGE_TYPE.PUBLISH:
			  // Replace the payload message with a Message object.
			  var hex = storedMessage.payloadMessage.payloadHex;
			  var buffer = new ArrayBuffer((hex.length)/2);
			  var byteStream = new Uint8Array(buffer);
			  var i = 0;
			  while (hex.length >= 2) {
				  var x = parseInt(hex.substring(0, 2), 16);
				  hex = hex.substring(2, hex.length);
				  byteStream[i++] = x;
			  }
			  var payloadMessage = new Paho.MQTT.Message(byteStream);

			  payloadMessage.qos = storedMessage.payloadMessage.qos;
			  payloadMessage.destinationName = storedMessage.payloadMessage.destinationName;
			  if (storedMessage.payloadMessage.duplicate)
				  payloadMessage.duplicate = true;
			  if (storedMessage.payloadMessage.retained)
				  payloadMessage.retained = true;
			  wireMessage.payloadMessage = payloadMessage;

			  break;

			default:
			  throw Error(format(ERROR.INVALID_STORED_DATA, [key, value]));
		}

		if (key.indexOf("Sent:"+this._localKey) === 0) {
			wireMessage.payloadMessage.duplicate = true;
			this._sentMessages[wireMessage.messageIdentifier] = wireMessage;
		} else if (key.indexOf("Received:"+this._localKey) === 0) {
			this._receivedMessages[wireMessage.messageIdentifier] = wireMessage;
		}
	};

	ClientImpl.prototype._process_queue = function () {
		var message = null;
		// Process messages in order they were added
		var fifo = this._msg_queue.reverse();

		// Send all queued messages down socket connection
		while ((message = fifo.pop())) {
			this._socket_send(message);
			// Notify listeners that message was successfully sent
			if (this._notify_msg_sent[message]) {
				this._notify_msg_sent[message]();
				delete this._notify_msg_sent[message];
			}
		}
	};

	/**
	 * Expect an ACK response for this message. Add message to the set of in progress
	 * messages and set an unused identifier in this message.
	 * @ignore
	 */
	ClientImpl.prototype._requires_ack = function (wireMessage) {
		var messageCount = Object.keys(this._sentMessages).length;
		if (messageCount > this.maxMessageIdentifier)
			throw Error ("Too many messages:"+messageCount);

		while(this._sentMessages[this._message_identifier] !== undefined) {
			this._message_identifier++;
		}
		wireMessage.messageIdentifier = this._message_identifier;
		this._sentMessages[wireMessage.messageIdentifier] = wireMessage;
		if (wireMessage.type === MESSAGE_TYPE.PUBLISH) {
			this.store("Sent:", wireMessage);
		}
		if (this._message_identifier === this.maxMessageIdentifier) {
			this._message_identifier = 1;
		}
	};

	/**
	 * Called when the underlying websocket has been opened.
	 * @ignore
	 */
	ClientImpl.prototype._on_socket_open = function () {
		// Create the CONNECT message object.
		var wireMessage = new WireMessage(MESSAGE_TYPE.CONNECT, this.connectOptions);
		wireMessage.clientId = this.clientId;
		this._socket_send(wireMessage);
	};

	/**
	 * Called when the underlying websocket has received a complete packet.
	 * @ignore
	 */
	ClientImpl.prototype._on_socket_message = function (event) {
		this._trace("Client._on_socket_message", event.data);
		var messages = this._deframeMessages(event.data);
		for (var i = 0; i < messages.length; i+=1) {
		    this._handleMessage(messages[i]);
		}
	};

	ClientImpl.prototype._deframeMessages = function(data) {
		var byteArray = new Uint8Array(data);
		var messages = [];
	    if (this.receiveBuffer) {
	        var newData = new Uint8Array(this.receiveBuffer.length+byteArray.length);
	        newData.set(this.receiveBuffer);
	        newData.set(byteArray,this.receiveBuffer.length);
	        byteArray = newData;
	        delete this.receiveBuffer;
	    }
		try {
		    var offset = 0;
		    while(offset < byteArray.length) {
		        var result = decodeMessage(byteArray,offset);
		        var wireMessage = result[0];
		        offset = result[1];
		        if (wireMessage !== null) {
		            messages.push(wireMessage);
		        } else {
		            break;
		        }
		    }
		    if (offset < byteArray.length) {
		    	this.receiveBuffer = byteArray.subarray(offset);
		    }
		} catch (error) {
			var errorStack = ((error.hasOwnProperty('stack') == 'undefined') ? error.stack.toString() : "No Error Stack Available");
			this._disconnected(ERROR.INTERNAL_ERROR.code , format(ERROR.INTERNAL_ERROR, [error.message,errorStack]));
			return;
		}
		return messages;
	};

	ClientImpl.prototype._handleMessage = function(wireMessage) {

		this._trace("Client._handleMessage", wireMessage);

		try {
			switch(wireMessage.type) {
			case MESSAGE_TYPE.CONNACK:
				this._connectTimeout.cancel();
				if (this._reconnectTimeout)
					this._reconnectTimeout.cancel();

				// If we have started using clean session then clear up the local state.
				if (this.connectOptions.cleanSession) {
					for (var key in this._sentMessages) {
						var sentMessage = this._sentMessages[key];
						localStorage.removeItem("Sent:"+this._localKey+sentMessage.messageIdentifier);
					}
					this._sentMessages = {};

					for (var key in this._receivedMessages) {
						var receivedMessage = this._receivedMessages[key];
						localStorage.removeItem("Received:"+this._localKey+receivedMessage.messageIdentifier);
					}
					this._receivedMessages = {};
				}
				// Client connected and ready for business.
				if (wireMessage.returnCode === 0) {

					this.connected = true;
					// Jump to the end of the list of uris and stop looking for a good host.

					if (this.connectOptions.uris)
            this.hostIndex = this.connectOptions.uris.length;

				} else {
					this._disconnected(ERROR.CONNACK_RETURNCODE.code , format(ERROR.CONNACK_RETURNCODE, [wireMessage.returnCode, CONNACK_RC[wireMessage.returnCode]]));
					break;
				}

				// Resend messages.
				var sequencedMessages = [];
				for (var msgId in this._sentMessages) {
					if (this._sentMessages.hasOwnProperty(msgId))
						sequencedMessages.push(this._sentMessages[msgId]);
				}

				// Also schedule qos 0 buffered messages if any
				if (this._buffered_msg_queue.length > 0) {
					var msg = null;
					var fifo = this._buffered_msg_queue.reverse();
					while ((msg = fifo.pop())) {
						sequencedMessages.push(msg);
						if (this.onMessageDelivered)
							this._notify_msg_sent[msg] = this.onMessageDelivered(msg.payloadMessage);
					}
				}

				// Sort sentMessages into the original sent order.
				var sequencedMessages = sequencedMessages.sort(function(a,b) {return a.sequence - b.sequence;} );
				for (var i=0, len=sequencedMessages.length; i<len; i++) {
					var sentMessage = sequencedMessages[i];
					if (sentMessage.type == MESSAGE_TYPE.PUBLISH && sentMessage.pubRecReceived) {
						var pubRelMessage = new WireMessage(MESSAGE_TYPE.PUBREL, {messageIdentifier:sentMessage.messageIdentifier});
						this._schedule_message(pubRelMessage);
					} else {
						this._schedule_message(sentMessage);
				}
				}

				// Execute the connectOptions.onSuccess callback if there is one.
        // Will also now return if this connection was the result of an automatic
        // reconnect and which URI was successfully connected to.
				if (this.connectOptions.onSuccess) {
					this.connectOptions.onSuccess({invocationContext:this.connectOptions.invocationContext});
				}

				var reconnected = false;
				if (this._reconnecting) {
					reconnected = true;
					this._reconnectInterval = 1;
					this._reconnecting = false;
				}

				// Execute the onConnected callback if there is one.
				this._connected(reconnected, this._wsuri);

				// Process all queued messages now that the connection is established.
				this._process_queue();
				break;

			case MESSAGE_TYPE.PUBLISH:
				this._receivePublish(wireMessage);
				break;

			case MESSAGE_TYPE.PUBACK:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				 // If this is a re flow of a PUBACK after we have restarted receivedMessage will not exist.
				if (sentMessage) {
					delete this._sentMessages[wireMessage.messageIdentifier];
					localStorage.removeItem("Sent:"+this._localKey+wireMessage.messageIdentifier);
					if (this.onMessageDelivered)
						this.onMessageDelivered(sentMessage.payloadMessage);
				}
				break;

			case MESSAGE_TYPE.PUBREC:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				// If this is a re flow of a PUBREC after we have restarted receivedMessage will not exist.
				if (sentMessage) {
					sentMessage.pubRecReceived = true;
					var pubRelMessage = new WireMessage(MESSAGE_TYPE.PUBREL, {messageIdentifier:wireMessage.messageIdentifier});
					this.store("Sent:", sentMessage);
					this._schedule_message(pubRelMessage);
				}
				break;

			case MESSAGE_TYPE.PUBREL:
				var receivedMessage = this._receivedMessages[wireMessage.messageIdentifier];
				localStorage.removeItem("Received:"+this._localKey+wireMessage.messageIdentifier);
				// If this is a re flow of a PUBREL after we have restarted receivedMessage will not exist.
				if (receivedMessage) {
					this._receiveMessage(receivedMessage);
					delete this._receivedMessages[wireMessage.messageIdentifier];
				}
				// Always flow PubComp, we may have previously flowed PubComp but the server lost it and restarted.
				var pubCompMessage = new WireMessage(MESSAGE_TYPE.PUBCOMP, {messageIdentifier:wireMessage.messageIdentifier});
				this._schedule_message(pubCompMessage);


				break;

			case MESSAGE_TYPE.PUBCOMP:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				delete this._sentMessages[wireMessage.messageIdentifier];
				localStorage.removeItem("Sent:"+this._localKey+wireMessage.messageIdentifier);
				if (this.onMessageDelivered)
					this.onMessageDelivered(sentMessage.payloadMessage);
				break;

			case MESSAGE_TYPE.SUBACK:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				if (sentMessage) {
					if(sentMessage.timeOut)
						sentMessage.timeOut.cancel();
					// This will need to be fixed when we add multiple topic support
          			if (wireMessage.returnCode[0] === 0x80) {
						if (sentMessage.onFailure) {
							sentMessage.onFailure(wireMessage.returnCode);
						}
					} else if (sentMessage.onSuccess) {
						sentMessage.onSuccess(wireMessage.returnCode);
					}
					delete this._sentMessages[wireMessage.messageIdentifier];
				}
				break;

			case MESSAGE_TYPE.UNSUBACK:
				var sentMessage = this._sentMessages[wireMessage.messageIdentifier];
				if (sentMessage) {
					if (sentMessage.timeOut)
						sentMessage.timeOut.cancel();
					if (sentMessage.callback) {
						sentMessage.callback();
					}
					delete this._sentMessages[wireMessage.messageIdentifier];
				}

				break;

			case MESSAGE_TYPE.PINGRESP:
				/* The sendPinger or receivePinger may have sent a ping, the receivePinger has already been reset. */
				this.sendPinger.reset();
				break;

			case MESSAGE_TYPE.DISCONNECT:
				// Clients do not expect to receive disconnect packets.
				this._disconnected(ERROR.INVALID_MQTT_MESSAGE_TYPE.code , format(ERROR.INVALID_MQTT_MESSAGE_TYPE, [wireMessage.type]));
				break;

			default:
				this._disconnected(ERROR.INVALID_MQTT_MESSAGE_TYPE.code , format(ERROR.INVALID_MQTT_MESSAGE_TYPE, [wireMessage.type]));
			}
		} catch (error) {
			var errorStack = ((error.hasOwnProperty('stack') == 'undefined') ? error.stack.toString() : "No Error Stack Available");
			this._disconnected(ERROR.INTERNAL_ERROR.code , format(ERROR.INTERNAL_ERROR, [error.message,errorStack]));
			return;
		}
	};

	/** @ignore */
	ClientImpl.prototype._on_socket_error = function (error) {
		if (!this._reconnecting) {
		this._disconnected(ERROR.SOCKET_ERROR.code , format(ERROR.SOCKET_ERROR, [error.data]));
		}
	};

	/** @ignore */
	ClientImpl.prototype._on_socket_close = function () {
		if (!this._reconnecting) {
		this._disconnected(ERROR.SOCKET_CLOSE.code , format(ERROR.SOCKET_CLOSE));
		}
	};

	/** @ignore */
	ClientImpl.prototype._socket_send = function (wireMessage) {

		if (wireMessage.type == 1) {
			var wireMessageMasked = this._traceMask(wireMessage, "password");
			this._trace("Client._socket_send", wireMessageMasked);
		}
		else this._trace("Client._socket_send", wireMessage);

		this.socket.send(wireMessage.encode());
		/* We have proved to the server we are alive. */
		this.sendPinger.reset();
	};

	/** @ignore */
	ClientImpl.prototype._receivePublish = function (wireMessage) {
		switch(wireMessage.payloadMessage.qos) {
			case "undefined":
			case 0:
				this._receiveMessage(wireMessage);
				break;

			case 1:
				var pubAckMessage = new WireMessage(MESSAGE_TYPE.PUBACK, {messageIdentifier:wireMessage.messageIdentifier});
				this._schedule_message(pubAckMessage);
				this._receiveMessage(wireMessage);
				break;

			case 2:
				this._receivedMessages[wireMessage.messageIdentifier] = wireMessage;
				this.store("Received:", wireMessage);
				var pubRecMessage = new WireMessage(MESSAGE_TYPE.PUBREC, {messageIdentifier:wireMessage.messageIdentifier});
				this._schedule_message(pubRecMessage);

				break;

			default:
				throw Error("Invaild qos="+wireMmessage.payloadMessage.qos);
		}
	};

	/** @ignore */
	ClientImpl.prototype._receiveMessage = function (wireMessage) {
		if (this.onMessageArrived) {
			this.onMessageArrived(wireMessage.payloadMessage);
		}
	};

	/**
	 * Client has connected.
	 * @param {reconnect} [boolean] indicate if this was a result of reconnect operation.
	 * @param {uri} [string] fully qualified WebSocket URI of the server.
	 */
	ClientImpl.prototype._connected = function (reconnect, uri) {
		// Execute the onConnected callback if there is one.
		if (this.onConnected)
			this.onConnected(reconnect, uri);
	};

	/**
	 * Attempts to reconnect the client to the server.
   * For each reconnect attempt, will double the reconnect interval
   * up to 128 seconds.
	 */
	ClientImpl.prototype._reconnect = function () {
		this._trace("Client._reconnect");
		if (!this.connected) {
			this._reconnecting = true;
			this.sendPinger.cancel();
			this.receivePinger.cancel();
			if (this._reconnectInterval < 128)
				this._reconnectInterval = this._reconnectInterval * 2;
			if (this.connectOptions.uris) {
				this.hostIndex = 0;
				this._doConnect(this.connectOptions.uris[0]);
			} else {
				this._doConnect(this.uri);
			}
		}
	};

	/**
	 * Client has disconnected either at its own request or because the server
	 * or network disconnected it. Remove all non-durable state.
	 * @param {errorCode} [number] the error number.
	 * @param {errorText} [string] the error text.
	 * @ignore
	 */
	ClientImpl.prototype._disconnected = function (errorCode, errorText) {
		this._trace("Client._disconnected", errorCode, errorText);

		if (errorCode !== undefined && this._reconnecting) {
      //Continue automatic reconnect process
  		this._reconnectTimeout = new Timeout(this, window, this._reconnectInterval, this._reconnect);
			return;
		}

		this.sendPinger.cancel();
		this.receivePinger.cancel();
		if (this._connectTimeout) {
			this._connectTimeout.cancel();
			this._connectTimeout = null;
		}

		// Clear message buffers.
		this._msg_queue = [];
		this._buffered_msg_queue = [];
		this._notify_msg_sent = {};

		if (this.socket) {
			// Cancel all socket callbacks so that they cannot be driven again by this socket.
			this.socket.onopen = null;
			this.socket.onmessage = null;
			this.socket.onerror = null;
			this.socket.onclose = null;
			if (this.socket.readyState === 1)
				this.socket.close();
			delete this.socket;
		}

		if (this.connectOptions.uris && this.hostIndex < this.connectOptions.uris.length-1) {
			// Try the next host.
			this.hostIndex++;
			this._doConnect(this.connectOptions.uris[this.hostIndex]);
		} else {

			if (errorCode === undefined) {
				errorCode = ERROR.OK.code;
				errorText = format(ERROR.OK);
			}

			// Run any application callbacks last as they may attempt to reconnect and hence create a new socket.
			if (this.connected) {
				this.connected = false;
				// Execute the connectionLostCallback if there is one, and we were connected.
				if (this.onConnectionLost) {
					this.onConnectionLost({errorCode:errorCode, errorMessage:errorText, reconnect:this.connectOptions.reconnect, uri:this._wsuri});
				}
				if (errorCode !== ERROR.OK.code && this.connectOptions.reconnect) {
					// Start automatic reconnect process for the very first time since last successful connect.
					this._reconnectInterval = 1;
					this._reconnect();
					return;
				}
			} else {
				// Otherwise we never had a connection, so indicate that the connect has failed.
				if (this.connectOptions.mqttVersion === 4 && this.connectOptions.mqttVersionExplicit === false) {
					this._trace("Failed to connect V4, dropping back to V3");
					this.connectOptions.mqttVersion = 3;
					if (this.connectOptions.uris) {
						this.hostIndex = 0;
						this._doConnect(this.connectOptions.uris[0]);
					} else {
						this._doConnect(this.uri);
					}
				} else if(this.connectOptions.onFailure) {
					this.connectOptions.onFailure({invocationContext:this.connectOptions.invocationContext, errorCode:errorCode, errorMessage:errorText});
				}
			}
		}
	};

	/** @ignore */
	ClientImpl.prototype._trace = function () {
		// Pass trace message back to client's callback function
		if (this.traceFunction) {
			for (var i in arguments)
			{
				if (typeof arguments[i] !== "undefined")
					arguments.splice(i, 1, JSON.stringify(arguments[i]));
			}
			var record = Array.prototype.slice.call(arguments).join("");
			this.traceFunction ({severity: "Debug", message: record	});
		}

		//buffer style trace
		if ( this._traceBuffer !== null ) {
			for (var i = 0, max = arguments.length; i < max; i++) {
				if ( this._traceBuffer.length == this._MAX_TRACE_ENTRIES ) {
					this._traceBuffer.shift();
				}
				if (i === 0) this._traceBuffer.push(arguments[i]);
				else if (typeof arguments[i] === "undefined" ) this._traceBuffer.push(arguments[i]);
				else this._traceBuffer.push("  "+JSON.stringify(arguments[i]));
		   }
		}
	};

	/** @ignore */
	ClientImpl.prototype._traceMask = function (traceObject, masked) {
		var traceObjectMasked = {};
		for (var attr in traceObject) {
			if (traceObject.hasOwnProperty(attr)) {
				if (attr == masked)
					traceObjectMasked[attr] = "******";
				else
					traceObjectMasked[attr] = traceObject[attr];
			}
		}
		return traceObjectMasked;
	};

	// ------------------------------------------------------------------------
	// Public Programming interface.
	// ------------------------------------------------------------------------

	/**
	 * The JavaScript application communicates to the server using a {@link Paho.MQTT.Client} object.
	 * <p>
	 * Most applications will create just one Client object and then call its connect() method,
	 * however applications can create more than one Client object if they wish.
	 * In this case the combination of host, port and clientId attributes must be different for each Client object.
	 * <p>
	 * The send, subscribe and unsubscribe methods are implemented as asynchronous JavaScript methods
	 * (even though the underlying protocol exchange might be synchronous in nature).
	 * This means they signal their completion by calling back to the application,
	 * via Success or Failure callback functions provided by the application on the method in question.
	 * Such callbacks are called at most once per method invocation and do not persist beyond the lifetime
	 * of the script that made the invocation.
	 * <p>
	 * In contrast there are some callback functions, most notably <i>onMessageArrived</i>,
	 * that are defined on the {@link Paho.MQTT.Client} object.
	 * These may get called multiple times, and aren't directly related to specific method invocations made by the client.
	 *
	 * @name Paho.MQTT.Client
	 *
	 * @constructor
	 *
	 * @param {string} host - the address of the messaging server, as a fully qualified WebSocket URI, as a DNS name or dotted decimal IP address.
	 * @param {number} port - the port number to connect to - only required if host is not a URI
	 * @param {string} path - the path on the host to connect to - only used if host is not a URI. Default: '/mqtt'.
	 * @param {string} clientId - the Messaging client identifier, between 1 and 23 characters in length.
	 *
	 * @property {string} host - <i>read only</i> the server's DNS hostname or dotted decimal IP address.
	 * @property {number} port - <i>read only</i> the server's port.
	 * @property {string} path - <i>read only</i> the server's path.
	 * @property {string} clientId - <i>read only</i> used when connecting to the server.
	 * @property {function} onConnectionLost - called when a connection has been lost.
	 *                            after a connect() method has succeeded.
	 *                            Establish the call back used when a connection has been lost. The connection may be
	 *                            lost because the client initiates a disconnect or because the server or network
	 *                            cause the client to be disconnected. The disconnect call back may be called without
	 *                            the connectionComplete call back being invoked if, for example the client fails to
	 *                            connect.
	 *                            A single response object parameter is passed to the onConnectionLost callback containing the following fields:
	 *                            <ol>
	 *                            <li>errorCode
	 *                            <li>errorMessage
	 *                            </ol>
	 * @property {function} onMessageDelivered - called when a message has been delivered.
	 *                            All processing that this Client will ever do has been completed. So, for example,
	 *                            in the case of a Qos=2 message sent by this client, the PubComp flow has been received from the server
	 *                            and the message has been removed from persistent storage before this callback is invoked.
	 *                            Parameters passed to the onMessageDelivered callback are:
	 *                            <ol>
	 *                            <li>{@link Paho.MQTT.Message} that was delivered.
	 *                            </ol>
	 * @property {function} onMessageArrived - called when a message has arrived in this Paho.MQTT.client.
	 *                            Parameters passed to the onMessageArrived callback are:
	 *                            <ol>
	 *                            <li>{@link Paho.MQTT.Message} that has arrived.
	 *                            </ol>
	 * @property {function} onConnected - called when a connection is successfully made to the server.
	 *                                  after a connect() method.
	 *                                  Parameters passed to the onConnected callback are:
	 *                                  <ol>
	 *                                  <li>reconnect (boolean) - If true, the connection was the result of a reconnect.</li>
	 *                                  <li>URI (string) - The URI used to connect to the server.</li>
	 *                                  </ol>
	 * @property {boolean} disconnectedPublishing - if set, will enable disconnected publishing in
	 *                                            in the event that the connection to the server is lost.
	 * @property {number} disconnectedBufferSize - Used to set the maximum number of messages that the disconnected
	 *                                             buffer will hold before rejecting new messages. Default size: 5000 messages
	 * @property {function} trace - called whenever trace is called. TODO
	 */
	var Client = function (host, port, path, clientId) {

	    var uri;

		if (typeof host !== "string")
			throw new Error(format(ERROR.INVALID_TYPE, [typeof host, "host"]));

	    if (arguments.length == 2) {
	        // host: must be full ws:// uri
	        // port: clientId
	        clientId = port;
	        uri = host;
	        var match = uri.match(/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/);
	        if (match) {
	            host = match[4]||match[2];
	            port = parseInt(match[7]);
	            path = match[8];
	        } else {
	            throw new Error(format(ERROR.INVALID_ARGUMENT,[host,"host"]));
	        }
	    } else {
	        if (arguments.length == 3) {
				clientId = path;
				path = "/mqtt";
			}
			if (typeof port !== "number" || port < 0)
				throw new Error(format(ERROR.INVALID_TYPE, [typeof port, "port"]));
			if (typeof path !== "string")
				throw new Error(format(ERROR.INVALID_TYPE, [typeof path, "path"]));

			var ipv6AddSBracket = (host.indexOf(":") !== -1 && host.slice(0,1) !== "[" && host.slice(-1) !== "]");
			uri = "ws://"+(ipv6AddSBracket?"["+host+"]":host)+":"+port+path;
		}

		var clientIdLength = 0;
		for (var i = 0; i<clientId.length; i++) {
			var charCode = clientId.charCodeAt(i);
			if (0xD800 <= charCode && charCode <= 0xDBFF)  {
				 i++; // Surrogate pair.
			}
			clientIdLength++;
		}
		if (typeof clientId !== "string" || clientIdLength > 65535)
			throw new Error(format(ERROR.INVALID_ARGUMENT, [clientId, "clientId"]));

		var client = new ClientImpl(uri, host, port, path, clientId);
		this._getHost =  function() { return host; };
		this._setHost = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getPort = function() { return port; };
		this._setPort = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getPath = function() { return path; };
		this._setPath = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getURI = function() { return uri; };
		this._setURI = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getClientId = function() { return client.clientId; };
		this._setClientId = function() { throw new Error(format(ERROR.UNSUPPORTED_OPERATION)); };

		this._getOnConnected = function() { return client.onConnected; };
		this._setOnConnected = function(newOnConnected) {
			if (typeof newOnConnected === "function")
				client.onConnected = newOnConnected;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnConnected, "onConnected"]));
		};

		this._getDisconnectedPublishing = function() { return client.disconnectedPublishing; };
		this._setDisconnectedPublishing = function(newDisconnectedPublishing) {
			client.disconnectedPublishing = newDisconnectedPublishing;
		};

		this._getDisconnectedBufferSize = function() { return client.disconnectedBufferSize; };
		this._setDisconnectedBufferSize = function(newDisconnectedBufferSize) {
			client.disconnectedBufferSize = newDisconnectedBufferSize;
		};

		this._getOnConnectionLost = function() { return client.onConnectionLost; };
		this._setOnConnectionLost = function(newOnConnectionLost) {
			if (typeof newOnConnectionLost === "function")
				client.onConnectionLost = newOnConnectionLost;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnConnectionLost, "onConnectionLost"]));
		};

		this._getOnMessageDelivered = function() { return client.onMessageDelivered; };
		this._setOnMessageDelivered = function(newOnMessageDelivered) {
			if (typeof newOnMessageDelivered === "function")
				client.onMessageDelivered = newOnMessageDelivered;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnMessageDelivered, "onMessageDelivered"]));
		};

		this._getOnMessageArrived = function() { return client.onMessageArrived; };
		this._setOnMessageArrived = function(newOnMessageArrived) {
			if (typeof newOnMessageArrived === "function")
				client.onMessageArrived = newOnMessageArrived;
			else
				throw new Error(format(ERROR.INVALID_TYPE, [typeof newOnMessageArrived, "onMessageArrived"]));
		};

		this._getTrace = function() { return client.traceFunction; };
		this._setTrace = function(trace) {
			if(typeof trace === "function"){
				client.traceFunction = trace;
			}else{
				throw new Error(format(ERROR.INVALID_TYPE, [typeof trace, "onTrace"]));
			}
		};

		/**
		 * Connect this Messaging client to its server.
		 *
		 * @name Paho.MQTT.Client#connect
		 * @function
		 * @param {object} connectOptions - Attributes used with the connection.
		 * @param {number} connectOptions.timeout - If the connect has not succeeded within this
		 *                    number of seconds, it is deemed to have failed.
		 *                    The default is 30 seconds.
		 * @param {string} connectOptions.userName - Authentication username for this connection.
		 * @param {string} connectOptions.password - Authentication password for this connection.
		 * @param {Paho.MQTT.Message} connectOptions.willMessage - sent by the server when the client
		 *                    disconnects abnormally.
		 * @param {number} connectOptions.keepAliveInterval - the server disconnects this client if
		 *                    there is no activity for this number of seconds.
		 *                    The default value of 60 seconds is assumed if not set.
		 * @param {boolean} connectOptions.cleanSession - if true(default) the client and server
		 *                    persistent state is deleted on successful connect.
		 * @param {boolean} connectOptions.useSSL - if present and true, use an SSL Websocket connection.
		 * @param {object} connectOptions.invocationContext - passed to the onSuccess callback or onFailure callback.
		 * @param {function} connectOptions.onSuccess - called when the connect acknowledgement
		 *                    has been received from the server.
		 * A single response object parameter is passed to the onSuccess callback containing the following fields:
		 * <ol>
		 * <li>invocationContext as passed in to the onSuccess method in the connectOptions.
		 * </ol>
     * @param {function} connectOptions.onFailure - called when the connect request has failed or timed out.
		 * A single response object parameter is passed to the onFailure callback containing the following fields:
		 * <ol>
		 * <li>invocationContext as passed in to the onFailure method in the connectOptions.
		 * <li>errorCode a number indicating the nature of the error.
		 * <li>errorMessage text describing the error.
		 * </ol>
     * @param {array} connectOptions.hosts - If present this contains either a set of hostnames or fully qualified
		 * WebSocket URIs (ws://iot.eclipse.org:80/ws), that are tried in order in place
		 * of the host and port paramater on the construtor. The hosts are tried one at at time in order until
		 * one of then succeeds.
     * @param {array} connectOptions.ports - If present the set of ports matching the hosts. If hosts contains URIs, this property
		 * is not used.
     * @param {boolean} connectOptions.reconnect - Sets whether the client will automatically attempt to reconnect
     * to the server if the connection is lost.
     *<ul>
     *<li>If set to false, the client will not attempt to automatically reconnect to the server in the event that the
     * connection is lost.</li>
     *<li>If set to true, in the event that the connection is lost, the client will attempt to reconnect to the server.
     * It will initially wait 1 second before it attempts to reconnect, for every failed reconnect attempt, the delay
     * will double until it is at 2 minutes at which point the delay will stay at 2 minutes.</li>
     *</ul>
     * @param {number} connectOptions.mqttVersion - The version of MQTT to use to connect to the MQTT Broker.
     *<ul>
     *<li>3 - MQTT V3.1</li>
     *<li>4 - MQTT V3.1.1</li>
     *</ul>
     * @param {boolean} connectOptions.mqttVersionExplicit - If set to true, will force the connection to use the
     * selected MQTT Version or will fail to connect.
     * @param {array} connectOptions.uris - If present, should contain a list of fully qualified WebSocket uris
     * (e.g. ws://iot.eclipse.org:80/ws), that are tried in order in place of the host and port parameter of the construtor.
     * The uris are tried one at a time in order until one of them succeeds. Do not use this in conjunction with hosts as
     * the hosts array will be converted to uris and will overwrite this property.
		 * @throws {InvalidState} If the client is not in disconnected state. The client must have received connectionLost
		 * or disconnected before calling connect for a second or subsequent time.
		 */
		this.connect = function (connectOptions) {
			connectOptions = connectOptions || {} ;
			validate(connectOptions,  {timeout:"number",
									   userName:"string",
									   password:"string",
									   willMessage:"object",
									   keepAliveInterval:"number",
									   cleanSession:"boolean",
									   useSSL:"boolean",
									   invocationContext:"object",
									   onSuccess:"function",
									   onFailure:"function",
									   hosts:"object",
									   ports:"object",
									   reconnect:"boolean",
									   mqttVersion:"number",
									   mqttVersionExplicit:"boolean",
									   uris: "object"});

			// If no keep alive interval is set, assume 60 seconds.
			if (connectOptions.keepAliveInterval === undefined)
				connectOptions.keepAliveInterval = 60;

			if (connectOptions.mqttVersion > 4 || connectOptions.mqttVersion < 3) {
				throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.mqttVersion, "connectOptions.mqttVersion"]));
			}

			if (connectOptions.mqttVersion === undefined) {
				connectOptions.mqttVersionExplicit = false;
				connectOptions.mqttVersion = 4;
			} else {
				connectOptions.mqttVersionExplicit = true;
			}

			//Check that if password is set, so is username
			if (connectOptions.password !== undefined && connectOptions.userName === undefined)
				throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.password, "connectOptions.password"]));

			if (connectOptions.willMessage) {
				if (!(connectOptions.willMessage instanceof Message))
					throw new Error(format(ERROR.INVALID_TYPE, [connectOptions.willMessage, "connectOptions.willMessage"]));
				// The will message must have a payload that can be represented as a string.
				// Cause the willMessage to throw an exception if this is not the case.
				connectOptions.willMessage.stringPayload = null;

				if (typeof connectOptions.willMessage.destinationName === "undefined")
					throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.willMessage.destinationName, "connectOptions.willMessage.destinationName"]));
			}
			if (typeof connectOptions.cleanSession === "undefined")
				connectOptions.cleanSession = true;
			if (connectOptions.hosts) {

				if (!(connectOptions.hosts instanceof Array) )
					throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts, "connectOptions.hosts"]));
				if (connectOptions.hosts.length <1 )
					throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts, "connectOptions.hosts"]));

				var usingURIs = false;
				for (var i = 0; i<connectOptions.hosts.length; i++) {
					if (typeof connectOptions.hosts[i] !== "string")
						throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.hosts[i], "connectOptions.hosts["+i+"]"]));
					if (/^(wss?):\/\/((\[(.+)\])|([^\/]+?))(:(\d+))?(\/.*)$/.test(connectOptions.hosts[i])) {
						if (i === 0) {
							usingURIs = true;
						} else if (!usingURIs) {
							throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts[i], "connectOptions.hosts["+i+"]"]));
						}
					} else if (usingURIs) {
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.hosts[i], "connectOptions.hosts["+i+"]"]));
					}
				}

				if (!usingURIs) {
					if (!connectOptions.ports)
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.ports, "connectOptions.ports"]));
					if (!(connectOptions.ports instanceof Array) )
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.ports, "connectOptions.ports"]));
					if (connectOptions.hosts.length !== connectOptions.ports.length)
						throw new Error(format(ERROR.INVALID_ARGUMENT, [connectOptions.ports, "connectOptions.ports"]));

					connectOptions.uris = [];

					for (var i = 0; i<connectOptions.hosts.length; i++) {
						if (typeof connectOptions.ports[i] !== "number" || connectOptions.ports[i] < 0)
							throw new Error(format(ERROR.INVALID_TYPE, [typeof connectOptions.ports[i], "connectOptions.ports["+i+"]"]));
						var host = connectOptions.hosts[i];
						var port = connectOptions.ports[i];

						var ipv6 = (host.indexOf(":") !== -1);
						uri = "ws://"+(ipv6?"["+host+"]":host)+":"+port+path;
						connectOptions.uris.push(uri);
					}
				} else {
					connectOptions.uris = connectOptions.hosts;
				}
			}

			client.connect(connectOptions);
		};

		/**
		 * Subscribe for messages, request receipt of a copy of messages sent to the destinations described by the filter.
		 *
		 * @name Paho.MQTT.Client#subscribe
		 * @function
		 * @param {string} filter describing the destinations to receive messages from.
		 * <br>
		 * @param {object} subscribeOptions - used to control the subscription
		 *
		 * @param {number} subscribeOptions.qos - the maiximum qos of any publications sent
		 *                                  as a result of making this subscription.
		 * @param {object} subscribeOptions.invocationContext - passed to the onSuccess callback
		 *                                  or onFailure callback.
		 * @param {function} subscribeOptions.onSuccess - called when the subscribe acknowledgement
		 *                                  has been received from the server.
		 *                                  A single response object parameter is passed to the onSuccess callback containing the following fields:
		 *                                  <ol>
		 *                                  <li>invocationContext if set in the subscribeOptions.
		 *                                  </ol>
		 * @param {function} subscribeOptions.onFailure - called when the subscribe request has failed or timed out.
		 *                                  A single response object parameter is passed to the onFailure callback containing the following fields:
		 *                                  <ol>
		 *                                  <li>invocationContext - if set in the subscribeOptions.
		 *                                  <li>errorCode - a number indicating the nature of the error.
		 *                                  <li>errorMessage - text describing the error.
		 *                                  </ol>
		 * @param {number} subscribeOptions.timeout - which, if present, determines the number of
		 *                                  seconds after which the onFailure calback is called.
		 *                                  The presence of a timeout does not prevent the onSuccess
		 *                                  callback from being called when the subscribe completes.
		 * @throws {InvalidState} if the client is not in connected state.
		 */
		this.subscribe = function (filter, subscribeOptions) {
			if (typeof filter !== "string")
				throw new Error("Invalid argument:"+filter);
			subscribeOptions = subscribeOptions || {} ;
			validate(subscribeOptions,  {qos:"number",
										 invocationContext:"object",
										 onSuccess:"function",
										 onFailure:"function",
										 timeout:"number"
										});
			if (subscribeOptions.timeout && !subscribeOptions.onFailure)
				throw new Error("subscribeOptions.timeout specified with no onFailure callback.");
			if (typeof subscribeOptions.qos !== "undefined" && !(subscribeOptions.qos === 0 || subscribeOptions.qos === 1 || subscribeOptions.qos === 2 ))
				throw new Error(format(ERROR.INVALID_ARGUMENT, [subscribeOptions.qos, "subscribeOptions.qos"]));
			client.subscribe(filter, subscribeOptions);
		};

		/**
		 * Unsubscribe for messages, stop receiving messages sent to destinations described by the filter.
		 *
		 * @name Paho.MQTT.Client#unsubscribe
		 * @function
		 * @param {string} filter - describing the destinations to receive messages from.
		 * @param {object} unsubscribeOptions - used to control the subscription
		 * @param {object} unsubscribeOptions.invocationContext - passed to the onSuccess callback
		                                      or onFailure callback.
		 * @param {function} unsubscribeOptions.onSuccess - called when the unsubscribe acknowledgement has been received from the server.
		 *                                    A single response object parameter is passed to the
		 *                                    onSuccess callback containing the following fields:
		 *                                    <ol>
		 *                                    <li>invocationContext - if set in the unsubscribeOptions.
		 *                                    </ol>
		 * @param {function} unsubscribeOptions.onFailure called when the unsubscribe request has failed or timed out.
		 *                                    A single response object parameter is passed to the onFailure callback containing the following fields:
		 *                                    <ol>
		 *                                    <li>invocationContext - if set in the unsubscribeOptions.
		 *                                    <li>errorCode - a number indicating the nature of the error.
		 *                                    <li>errorMessage - text describing the error.
		 *                                    </ol>
		 * @param {number} unsubscribeOptions.timeout - which, if present, determines the number of seconds
		 *                                    after which the onFailure callback is called. The presence of
		 *                                    a timeout does not prevent the onSuccess callback from being
		 *                                    called when the unsubscribe completes
		 * @throws {InvalidState} if the client is not in connected state.
		 */
		this.unsubscribe = function (filter, unsubscribeOptions) {
			if (typeof filter !== "string")
				throw new Error("Invalid argument:"+filter);
			unsubscribeOptions = unsubscribeOptions || {} ;
			validate(unsubscribeOptions,  {invocationContext:"object",
										   onSuccess:"function",
										   onFailure:"function",
										   timeout:"number"
										  });
			if (unsubscribeOptions.timeout && !unsubscribeOptions.onFailure)
				throw new Error("unsubscribeOptions.timeout specified with no onFailure callback.");
			client.unsubscribe(filter, unsubscribeOptions);
		};

		/**
		 * Send a message to the consumers of the destination in the Message.
		 *
		 * @name Paho.MQTT.Client#send
		 * @function
		 * @param {string|Paho.MQTT.Message} topic - <b>mandatory</b> The name of the destination to which the message is to be sent.
		 * 					   - If it is the only parameter, used as Paho.MQTT.Message object.
		 * @param {String|ArrayBuffer} payload - The message data to be sent.
		 * @param {number} qos The Quality of Service used to deliver the message.
		 * 		<dl>
		 * 			<dt>0 Best effort (default).
		 *     			<dt>1 At least once.
		 *     			<dt>2 Exactly once.
		 * 		</dl>
		 * @param {Boolean} retained If true, the message is to be retained by the server and delivered
		 *                     to both current and future subscriptions.
		 *                     If false the server only delivers the message to current subscribers, this is the default for new Messages.
		 *                     A received message has the retained boolean set to true if the message was published
		 *                     with the retained boolean set to true
		 *                     and the subscrption was made after the message has been published.
		 * @throws {InvalidState} if the client is not connected.
		 */
		this.send = function (topic,payload,qos,retained) {
			var message ;

			if(arguments.length === 0){
				throw new Error("Invalid argument."+"length");

			}else if(arguments.length == 1) {

				if (!(topic instanceof Message) && (typeof topic !== "string"))
					throw new Error("Invalid argument:"+ typeof topic);

				message = topic;
				if (typeof message.destinationName === "undefined")
					throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"]));
				client.send(message);

			}else {
				//parameter checking in Message object
				message = new Message(payload);
				message.destinationName = topic;
				if(arguments.length >= 3)
					message.qos = qos;
				if(arguments.length >= 4)
					message.retained = retained;
				client.send(message);
			}
		};

		/**
		 * Publish a message to the consumers of the destination in the Message.
		 * Synonym for Paho.Mqtt.Client#send
		 *
		 * @name Paho.MQTT.Client#publish
		 * @function
		 * @param {string|Paho.MQTT.Message} topic - <b>mandatory</b> The name of the topic to which the message is to be published.
		 * 					   - If it is the only parameter, used as Paho.MQTT.Message object.
		 * @param {String|ArrayBuffer} payload - The message data to be published.
		 * @param {number} qos The Quality of Service used to deliver the message.
		 * 		<dl>
		 * 			<dt>0 Best effort (default).
		 *     			<dt>1 At least once.
		 *     			<dt>2 Exactly once.
		 * 		</dl>
		 * @param {Boolean} retained If true, the message is to be retained by the server and delivered
		 *                     to both current and future subscriptions.
		 *                     If false the server only delivers the message to current subscribers, this is the default for new Messages.
		 *                     A received message has the retained boolean set to true if the message was published
		 *                     with the retained boolean set to true
		 *                     and the subscrption was made after the message has been published.
		 * @throws {InvalidState} if the client is not connected.
		 */
		 this.publish = function(topic,payload,qos,retained) {
			 console.log("Publising message to: ", topic);
			 var message ;

 			if(arguments.length === 0){
 				throw new Error("Invalid argument."+"length");

 			}else if(arguments.length == 1) {

 				if (!(topic instanceof Message) && (typeof topic !== "string"))
 					throw new Error("Invalid argument:"+ typeof topic);

 				message = topic;
 				if (typeof message.destinationName === "undefined")
 					throw new Error(format(ERROR.INVALID_ARGUMENT,[message.destinationName,"Message.destinationName"]));
 				client.send(message);

 			}else {
 				//parameter checking in Message object
 				message = new Message(payload);
 				message.destinationName = topic;
 				if(arguments.length >= 3)
 					message.qos = qos;
 				if(arguments.length >= 4)
 					message.retained = retained;
 				client.send(message);
 			}
		};

		/**
		 * Normal disconnect of this Messaging client from its server.
		 *
		 * @name Paho.MQTT.Client#disconnect
		 * @function
		 * @throws {InvalidState} if the client is already disconnected.
		 */
		this.disconnect = function () {
			client.disconnect();
		};

		/**
		 * Get the contents of the trace log.
		 *
		 * @name Paho.MQTT.Client#getTraceLog
		 * @function
		 * @return {Object[]} tracebuffer containing the time ordered trace records.
		 */
		this.getTraceLog = function () {
			return client.getTraceLog();
		};

		/**
		 * Start tracing.
		 *
		 * @name Paho.MQTT.Client#startTrace
		 * @function
		 */
		this.startTrace = function () {
			client.startTrace();
		};

		/**
		 * Stop tracing.
		 *
		 * @name Paho.MQTT.Client#stopTrace
		 * @function
		 */
		this.stopTrace = function () {
			client.stopTrace();
		};

		this.isConnected = function() {
			return client.connected;
		};
	};

	Client.prototype = {
		get host() { return this._getHost(); },
		set host(newHost) { this._setHost(newHost); },

		get port() { return this._getPort(); },
		set port(newPort) { this._setPort(newPort); },

		get path() { return this._getPath(); },
		set path(newPath) { this._setPath(newPath); },

		get clientId() { return this._getClientId(); },
		set clientId(newClientId) { this._setClientId(newClientId); },

		get onConnected() { return this._getOnConnected(); },
		set onConnected(newOnConnected) { this._setOnConnected(newOnConnected); },

		get disconnectedPublishing() { return this._getDisconnectedPublishing(); },
		set disconnectedPublishing(newDisconnectedPublishing) { this._setDisconnectedPublishing(newDisconnectedPublishing); },

		get disconnectedBufferSize() { return this._getDisconnectedBufferSize(); },
		set disconnectedBufferSize(newDisconnectedBufferSize) { this._setDisconnectedBufferSize(newDisconnectedBufferSize); },

		get onConnectionLost() { return this._getOnConnectionLost(); },
		set onConnectionLost(newOnConnectionLost) { this._setOnConnectionLost(newOnConnectionLost); },

		get onMessageDelivered() { return this._getOnMessageDelivered(); },
		set onMessageDelivered(newOnMessageDelivered) { this._setOnMessageDelivered(newOnMessageDelivered); },

		get onMessageArrived() { return this._getOnMessageArrived(); },
		set onMessageArrived(newOnMessageArrived) { this._setOnMessageArrived(newOnMessageArrived); },

		get trace() { return this._getTrace(); },
		set trace(newTraceFunction) { this._setTrace(newTraceFunction); }

	};

	/**
	 * An application message, sent or received.
	 * <p>
	 * All attributes may be null, which implies the default values.
	 *
	 * @name Paho.MQTT.Message
	 * @constructor
	 * @param {String|ArrayBuffer} payload The message data to be sent.
	 * <p>
	 * @property {string} payloadString <i>read only</i> The payload as a string if the payload consists of valid UTF-8 characters.
	 * @property {ArrayBuffer} payloadBytes <i>read only</i> The payload as an ArrayBuffer.
	 * <p>
	 * @property {string} destinationName <b>mandatory</b> The name of the destination to which the message is to be sent
	 *                    (for messages about to be sent) or the name of the destination from which the message has been received.
	 *                    (for messages received by the onMessage function).
	 * <p>
	 * @property {number} qos The Quality of Service used to deliver the message.
	 * <dl>
	 *     <dt>0 Best effort (default).
	 *     <dt>1 At least once.
	 *     <dt>2 Exactly once.
	 * </dl>
	 * <p>
	 * @property {Boolean} retained If true, the message is to be retained by the server and delivered
	 *                     to both current and future subscriptions.
	 *                     If false the server only delivers the message to current subscribers, this is the default for new Messages.
	 *                     A received message has the retained boolean set to true if the message was published
	 *                     with the retained boolean set to true
	 *                     and the subscrption was made after the message has been published.
	 * <p>
	 * @property {Boolean} duplicate <i>read only</i> If true, this message might be a duplicate of one which has already been received.
	 *                     This is only set on messages received from the server.
	 *
	 */
	var Message = function (newPayload) {
		var payload;
		if (   typeof newPayload === "string" ||
		newPayload instanceof ArrayBuffer ||
		newPayload instanceof Int8Array   ||
		newPayload instanceof Uint8Array  ||
		newPayload instanceof Int16Array  ||
		newPayload instanceof Uint16Array ||
		newPayload instanceof Int32Array  ||
		newPayload instanceof Uint32Array ||
		newPayload instanceof Float32Array ||
		newPayload instanceof Float64Array
		   ) {
			payload = newPayload;
		} else {
			throw (format(ERROR.INVALID_ARGUMENT, [newPayload, "newPayload"]));
		}

		this._getPayloadString = function () {
			if (typeof payload === "string")
				return payload;
			else
				return parseUTF8(payload, 0, payload.length);
		};

		this._getPayloadBytes = function() {
			if (typeof payload === "string") {
				var buffer = new ArrayBuffer(UTF8Length(payload));
				var byteStream = new Uint8Array(buffer);
				stringToUTF8(payload, byteStream, 0);

				return byteStream;
			} else {
				return payload;
			}
		};

		var destinationName;
		this._getDestinationName = function() { return destinationName; };
		this._setDestinationName = function(newDestinationName) {
			if (typeof newDestinationName === "string")
				destinationName = newDestinationName;
			else
				throw new Error(format(ERROR.INVALID_ARGUMENT, [newDestinationName, "newDestinationName"]));
		};

		var qos = 0;
		this._getQos = function() { return qos; };
		this._setQos = function(newQos) {
			if (newQos === 0 || newQos === 1 || newQos === 2 )
				qos = newQos;
			else
				throw new Error("Invalid argument:"+newQos);
		};

		var retained = false;
		this._getRetained = function() { return retained; };
		this._setRetained = function(newRetained) {
			if (typeof newRetained === "boolean")
				retained = newRetained;
			else
				throw new Error(format(ERROR.INVALID_ARGUMENT, [newRetained, "newRetained"]));
		};

		var duplicate = false;
		this._getDuplicate = function() { return duplicate; };
		this._setDuplicate = function(newDuplicate) { duplicate = newDuplicate; };
	};

	Message.prototype = {
		get payloadString() { return this._getPayloadString(); },
		get payloadBytes() { return this._getPayloadBytes(); },

		get destinationName() { return this._getDestinationName(); },
		set destinationName(newDestinationName) { this._setDestinationName(newDestinationName); },

		get topic() { return this._getDestinationName(); },
		set topic(newTopic) { this._setDestinationName(newTopic); },

		get qos() { return this._getQos(); },
		set qos(newQos) { this._setQos(newQos); },

		get retained() { return this._getRetained(); },
		set retained(newRetained) { this._setRetained(newRetained); },

		get duplicate() { return this._getDuplicate(); },
		set duplicate(newDuplicate) { this._setDuplicate(newDuplicate); }
	};

	// Module contents.
	return {
		Client: Client,
		Message: Message
	};
})(window);
return PahoMQTT;
});


I. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

J. Resumen

En esta lección se presentó el proyecto base para IoT.

13. Notificaciones push

Versión para imprimir.

1. Introduccion

En esta lección se muestra un ejemplo de notificaciones push.
Puedes probar el ejemplo en https://notipush.rf.gd/.
Primero suscríbete y luego envía notificaciones a todos los que estén conectados.

2. Diagrama entidad relación

3. Diagrama de despliegue

4. Hazlo funcionar (con videos)

Prueba el ejemplo en https://notipush.rf.gd/.
Copia la url de la app y pégala en varios navegadores y dispositivos.
Suscríbanse y envíen notificaciones ntre los dispositivos conectados.
Descarga el archivo /src/notipush.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

5. Hazlo funcionar (texto)

Este ejercicio usa la librería WebPush para PHP. Puedes profundizar en este tema en la URL https://github.com/web-push-libs/web-push-php
Prueba el ejemplo en https://notipush.rf.gd/.
Copia la url de la app y pégala en varios navegadores y dispositivos.
Suscríbanse y envíen notificaciones ntre los dispositivos conectados.
Descarga el archivo /src/notipush.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email, por ejemplo, pepito@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
El ejercicio usa una llave pública en el servidor y la repite el código de JavaScript en el navegador. También se requiere la correspondiente llave privada que se almacena solo en el servidor.
Las llaves se pueden generar con el enlace Genera llaves del ejemplo. Para copiar los valores despliega el código fuente de la página, porque en el navegador algunos caracteres pueden tener interpretación diferente.
El proyecto ya contiene la carpeta vendor y el archivo composer.lock, pero es posible crearlos con estos pasos:
1. Instalar composer. Para Windows, usa el instalador de https://getcomposer.org/download/.
2. Abre una terminal y ejecuta el comando
  composer update
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Recarga la página, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
3. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
4. Selecciona el archivo donde vas a empezar a depurar.
5. Haz clic en el número de la línea donde vas a empezar a depurar.
6. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
7. Haz clic en Run and Debug .
8. Si no está configurada la depuración, haz clic en create a launch json file.
9. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
10. Aparece un cuadro con los controles de depuración.
11. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
12. Regresa al navegador, recarga la página de manera normal y empieza a usarla.
13. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo tiempo SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de su servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera ves que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

6. Archivos

Haz clic en los triángulos para expandir las carpetas

composer.json
composer.lock
index.html
jsconfig.json
sw.js
errors
js
- lib
php
vendor
- -- No se muestra el contenido de esta carpeta --

7. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Notificaciones Push</title>

 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Notificaciones Push</h1>

 <menu style="display: flex; list-style: none; flex-wrap: wrap; gap: 0.5rem;">
  <li>
   <button id="btnSuscribe" type="button" hidden>
    Suscríbete
   </button>
  </li>
  <li>
   <button id="btnCancela" type="button" hidden>
    Cancela suscripción
   </button>
  </li>
  <li>
   <button id="btnNotifica" type="button" hidden>
    Notifica
   </button>
  </li>
  <li>
   <a href="srv/genera-llaves.php" target="_blank">Genera llaves</a>
  </li>
 </menu>

 <p>
  <output id="outEstado">
   <progress max="100">Cargando…</progress>
  </output>
 </p>

 <fieldset>
  <legend>Reporte de envío a endpoints</legend>

  <dl id="reporte"></dl>

 </fieldset>

 <script type="module">

  import {
   activaNotificacionesPush
  } from "./js/lib/activaNotificacionesPush.js"
  import { getSuscripcionPush } from "./js/lib/getSuscripcionPush.js"
  import { suscribeAPush } from "./js/lib/suscribeAPush.js"
  import { cancelaSuscripcionPush } from "./js/lib/cancelaSuscripcionPush.js"
  import { urlBase64ToUint8Array } from "./js/lib/urlBase64ToUint8Array.js"
  import {
   calculaDtoParaSuscripcion
  } from "./js/lib/calculaDtoParaSuscripcion.js"
  import { consume } from "./js/lib/consume.js"
  import { enviaJsonRecibeJson } from "./js/lib/enviaJsonRecibeJson.js"
  import { descargaVista } from "./js/lib/descargaVista.js"
  import { muestraError } from "./js/lib/muestraError.js"

  const applicationServerKey = urlBase64ToUint8Array(
   "BMBlr6YznhYMX3NgcWIDRxZXs0sh7tCv7_YCsWcww0ZCv9WGg-tRCXfMEHTiBPCksSqeve1twlbmVAZFv7GSuj0")
  /** @enum {string} */
  const Estado = {
   CALCULANDO: "Calculando…",
   SUSCRITO: "Suscrito",
   DESUSCRITO: "Sin suscripción",
   INCOMPATIBLE: "Incompatible"
  }

  preparaVista()
  btnSuscribe.addEventListener("click", suscribe)
  btnCancela.addEventListener("click", cancela)
  btnNotifica.addEventListener("click", notificaDesdeElServidor)

  async function preparaVista() {
   try {
    await activaNotificacionesPush("sw.js")
    const suscripcion = await getSuscripcionPush()
    if (suscripcion === null) {
     muestraEstado(Estado.DESUSCRITO)
    } else {
     // Modifica la suscripción en el servidor,
     const dto = calculaDtoParaSuscripcion(suscripcion)
     await consume(enviaJsonRecibeJson("php/suscripcion-modifica.php", dto))
     muestraEstado(Estado.SUSCRITO)
    }
   } catch (error) {
    muestraEstado(Estado.INCOMPATIBLE)
    muestraError(error)
   }
  }

  async function notificaDesdeElServidor() {
   reporte.innerHTML =
     /* html */ `<progress max="100">Cargando…</progress>`
   await descargaVista("php/notifica.php", "POST")
  }

  async function suscribe() {
   muestraEstado(Estado.CALCULANDO)
   const suscripcion = await suscribeAPush(applicationServerKey)
   // Agrega la suscripción al servidor,
   const dto = calculaDtoParaSuscripcion(suscripcion)
   await consume(enviaJsonRecibeJson("php/suscripcion-modifica.php", dto)
   )
   muestraEstado(Estado.SUSCRITO)
  }

  async function cancela() {
   muestraEstado(Estado.CALCULANDO)
   const suscripcion = await cancelaSuscripcionPush()
   if (suscripcion !== null) {
    // Elimina la suscripción en el servidor,
    const dto = calculaDtoParaSuscripcion(suscripcion)
    await consume(enviaJsonRecibeJson("php/suscripcion-elimina.php", dto))
    muestraEstado(Estado.DESUSCRITO)
   }
  }

  /**
   * @param {Estado} estado
   */
  function muestraEstado(estado) {
   outEstado.value = estado
   if (estado === Estado.INCOMPATIBLE || estado === Estado.CALCULANDO) {
    btnSuscribe.hidden = true
    btnCancela.hidden = true
    btnNotifica.hidden = true
   } else if (estado === Estado.SUSCRITO) {
    btnSuscribe.hidden = true
    btnCancela.hidden = false
    btnNotifica.hidden = false
   } else if (estado === Estado.DESUSCRITO) {
    btnSuscribe.hidden = false
    btnCancela.hidden = true
    btnNotifica.hidden = true
   }
  }

 </script>

 </body>

</html>

8. sw.js

const URL_SERVIDOR = "https://notipush.rf.gd"

if (self instanceof ServiceWorkerGlobalScope) {

 // El siguiente código se activa cuando llega una notificación push.
 self.addEventListener("push", (/** @type {PushEvent} */ event) => {
  const notificacion = event.data
  /* Si el navegador tiene permitido mostrar notificaciones push,
   * nuestra la que se ha recibido. */
  if (notificacion !== null && self.Notification.permission === 'granted') {
   event.waitUntil(muestraNotificacion(notificacion))
  }
 })

 self.addEventListener("notificationclick",
  (/** @type {NotificationEvent} */ event) => {
   event.notification.close()
   event.waitUntil(muestraVentana())
  })
}

/**
 * @param {PushMessageData} notificacion
 */
async function muestraNotificacion(notificacion) {
 if (self instanceof ServiceWorkerGlobalScope) {
  const mensaje = notificacion.text()
  await self.registration.showNotification(mensaje)
 }
}

async function muestraVentana() {
 if (self instanceof ServiceWorkerGlobalScope) {
  const clientes = await self.clients.matchAll({ type: "window" })
  for (const cliente of clientes) {
   if (cliente.url.startsWith(URL_SERVIDOR)) {
    return cliente.focus()
   }
  }
  return self.clients.openWindow("/")
 }
}

9. Carpeta « php »

Versión para imprimir.

A. php / Bd.php

<?php

class Bd
{

 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {

   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/notipush.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS SUSCRIPCION (
       SUS_ENDPOINT TEXT NOT NULL,
       SUS_PUB_KEY TEXT NOT NULL,
       SUS_AUT_TOK TEXT NOT NULL,
       SUS_CONT_ENCOD TEXT NOT NULL,
      CONSTRAINT SUS_PK
       PRIMARY KEY(SUS_ENDPOINT),
      CONSTRAINT SUS_ENDPNT_NV
       CHECK(LENGTH(SUS_ENDPOINT) > 0)
     )'
   );
  }

  return self::$pdo;
 }
}


B. php / genera-llaves.php

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Llaves VAPID</title>

</head>

<body>

 <h1>Llaves VAPID</h1>

 <pre>
 <?php

 require __DIR__ . "/../vendor/autoload.php";

 use Minishlink\WebPush\VAPID;

 var_dump(VAPID::createVapidKeys());

 ?>
 </pre>

</body>

</html>

C. php / notifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/../vendor/autoload.php";
require_once  __DIR__ . "/lib/devuelveJson.php";
require_once  __DIR__ . "/Bd.php";
require_once __DIR__ . "/Suscripcion.php";
require_once __DIR__ . "/suscripcionElimina.php";

use Minishlink\WebPush\WebPush;

const AUTH = [
 "VAPID" => [
  "subject" => "https://notipush.rf.gd/",
  "publicKey" => "BMBlr6YznhYMX3NgcWIDRxZXs0sh7tCv7_YCsWcww0ZCv9WGg-tRCXfMEHTiBPCksSqeve1twlbmVAZFv7GSuj0",
  "privateKey" => "vplfkITvu0cwHqzK9Kj-DYStbCH_9AhGx9LqMyaeI6w"
 ]
];

$webPush = new WebPush(AUTH);
$mensaje = "Hola! 👋";

// Envia el mensaje a todas las suscripciones.

$bd = Bd::pdo();
$stmt = $bd->query("SELECT * FROM SUSCRIPCION");
$suscripciones =
 $stmt->fetchAll(PDO::FETCH_CLASS | PDO::FETCH_PROPS_LATE, Suscripcion::class);

foreach ($suscripciones as $suscripcion) {
 $webPush->queueNotification($suscripcion, $mensaje);
}
$reportes = $webPush->flush();

// Genera el reporte de envio a cada suscripcion.
$reporteDeEnvios = "";
foreach ($reportes as $reporte) {
 $endpoint = $reporte->getRequest()->getUri();
 $htmlEndpoint = htmlentities($endpoint);
 if ($reporte->isSuccess()) {
  // Reporte de éxito.
  $reporteDeEnvios .= "<dt>$htmlEndpoint</dt><dd>Éxito</dd>";
 } else {
  if ($reporte->isSubscriptionExpired()) {
   suscripcionElimina($bd, $endpoint);
  }
  // Reporte de fallo.
  $explicacion = htmlentities($reporte->getReason());
  $reporteDeEnvios .= "<dt>$endpoint</dt><dd>Fallo: $explicacion</dd>";
 }
}

devuelveJson(["reporte" => ["innerHTML" => $reporteDeEnvios]]);


D. php / recibeSuscripcion.php

<?php

require_once __DIR__ . "/lib/BAD_REQUEST.php";
require_once __DIR__ . "/lib/recibeJson.php";
require_once __DIR__ . "/lib/ProblemDetailsException.php";

function recibeSuscripcion()
{

 $objeto = recibeJson();

 if (
  !isset($objeto->authToken)
  || !is_string($objeto->authToken)
  || $objeto->authToken === ""
 )
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "El authToken debe ser texto que no esté en blanco.",
   "type" => "/errors/authtokenincorrecto.html",
  ]);

 if (
  !isset($objeto->contentEncoding)
  || !is_string($objeto->contentEncoding)
  || $objeto->contentEncoding === ""
 )
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "La contentEncoding debe ser texto que no esté en blanco.",
   "type" => "/errors/contentencodingincorrecta.html",
  ]);

 if (
  !isset($objeto->endpoint)
  || !is_string($objeto->endpoint)
  || $objeto->endpoint === ""
 )
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "El endpoint debe ser texto que no esté en blanco.",
   "type" => "/errors/endpointincorrecto.html",
  ]);

 if (
  !isset($objeto->publicKey)
  || !is_string($objeto->publicKey)
  || $objeto->publicKey === ""
 )
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "La publicKey debe ser texto que no esté en blanco.",
   "type" => "/errors/publickeyincorrecta.html",
  ]);

 return [
  "SUS_AUT_TOK" => $objeto->authToken,
  "SUS_CONT_ENCOD" => $objeto->contentEncoding,
  "SUS_ENDPOINT" => $objeto->endpoint,
  "SUS_PUB_KEY" => $objeto->publicKey,
 ];
}


E. php / suscripcion-elimina.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveNoContent.php";
require_once  __DIR__ . "/Bd.php";
require_once  __DIR__ . "/recibeSuscripcion.php";
require_once  __DIR__ . "/suscripcionElimina.php";

$modelo = recibeSuscripcion();
suscripcionElimina(Bd::pdo(), $modelo["SUS_ENDPOINT"]);
devuelveNoContent();


F. php / suscripcion-modifica.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/devuelveCreated.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once  __DIR__ . "/Bd.php";
require_once  __DIR__ . "/recibeSuscripcion.php";

$modelo = recibeSuscripcion();

$bd = Bd::pdo();

$stmt =
 $bd->prepare("SELECT * FROM SUSCRIPCION WHERE SUS_ENDPOINT = :SUS_ENDPOINT");
$stmt->execute([":SUS_ENDPOINT" => $modelo["SUS_ENDPOINT"]]);
$anterior = $stmt->fetch(PDO::FETCH_ASSOC);

if ($anterior === false) {

 $stmt = $bd->prepare(
  "INSERT INTO SUSCRIPCION (
    SUS_ENDPOINT, SUS_PUB_KEY, SUS_AUT_TOK, SUS_CONT_ENCOD
   ) values (
    :SUS_ENDPOINT, :SUS_PUB_KEY, :SUS_AUT_TOK, :SUS_CONT_ENCOD
   )"
 );
 $stmt->execute([
  ":SUS_ENDPOINT" => $modelo["SUS_ENDPOINT"],
  ":SUS_PUB_KEY" => $modelo["SUS_PUB_KEY"],
  ":SUS_AUT_TOK" => $modelo["SUS_AUT_TOK"],
  ":SUS_CONT_ENCOD" => $modelo["SUS_CONT_ENCOD"],
 ]);

 devuelveCreated("", $modelo);
} else {

 $stmt = $bd->prepare(
  "UPDATE SUSCRIPCION
   SET
    SUS_PUB_KEY = :SUS_PUB_KEY,
    SUS_AUT_TOK = :SUS_AUT_TOK,
    SUS_CONT_ENCOD = :SUS_CONT_ENCOD
   WHERE
    SUS_ENDPOINT = :SUS_ENDPOINT"
 );
 $stmt->execute([
  ":SUS_PUB_KEY" => $modelo["SUS_PUB_KEY"],
  ":SUS_AUT_TOK" => $modelo["SUS_AUT_TOK"],
  ":SUS_CONT_ENCOD" => $modelo["SUS_CONT_ENCOD"],
  ":SUS_ENDPOINT" => $modelo["SUS_ENDPOINT"],
 ]);

 devuelveJson($modelo);
}


G. php / Suscripcion.php

<?php

require_once __DIR__ . "/../vendor/autoload.php";

use Minishlink\WebPush\SubscriptionInterface;

class Suscripcion implements SubscriptionInterface
{

 public string $SUS_ENDPOINT;
 public string $SUS_PUB_KEY;
 public string $SUS_AUT_TOK;
 public string $SUS_CONT_ENCOD;

 public function __construct(
  string $SUS_ENDPOINT = "",
  string $SUS_PUB_KEY = "",
  string $SUS_AUT_TOK = "",
  string $SUS_CONT_ENCOD = ""
 ) {
  $this->SUS_ENDPOINT = $SUS_ENDPOINT;
  $this->SUS_PUB_KEY = $SUS_PUB_KEY;
  $this->SUS_AUT_TOK = $SUS_AUT_TOK;
  $this->SUS_CONT_ENCOD = $SUS_CONT_ENCOD;
 }

 public function getEndpoint(): string
 {
  return $this->SUS_ENDPOINT;
 }

 public function getPublicKey(): ?string
 {
  return $this->SUS_PUB_KEY;
 }

 public function getAuthToken(): ?string
 {
  return $this->SUS_AUT_TOK;
 }

 public function getContentEncoding(): ?string
 {
  return $this->SUS_CONT_ENCOD;
 }
}


H. php / suscripcionElimina.php

<?php

function suscripcionElimina(\PDO $bd, string $endpoint)
{
 $stmt =
  $bd->prepare("DELETE FROM SUSCRIPCION WHERE SUS_ENDPOINT = :SUS_ENDPOINT");
 $stmt->execute([":SUS_ENDPOINT" => $endpoint]);
}


I. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveCreated.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveCreated($urlDelNuevo, $resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(201);
  header("Location: $urlDelNuevo");
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
}


3. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


4. php / lib / devuelveNoContent.php

<?php

function devuelveNoContent()
{
 http_response_code(204);
}


5. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


6. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

7. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


8. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


9. php / lib / recibeJson.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";

function recibeJson()
{
 $json = json_decode(file_get_contents("php://input"));

 if ($json === null) {

  http_response_code(BAD_REQUEST);
  header("Content-Type: application/problem+json; charset=utf-8");

  echo '{' .
   "status: " . BAD_REQUEST .
   '"title": "Los datos recibidos no están en formato JSON."' .
   '"type": "/errors/datosnojson.html"' .
   '}';

  exit();
 }

 return $json;
}


10. Carpeta « js »

Versión para imprimir.

A. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / activaNotificacionesPush.js

/**
 * @param { string | URL } urlDeServiceWorkerQueRecibeNotificaciones
 */
export async function activaNotificacionesPush(

 urlDeServiceWorkerQueRecibeNotificaciones) {

 // Valida que el navegador soporte notificaciones push.
 if (!('PushManager' in window))
  throw new Error("Este navegador no soporta notificaciones push.")

 // Valida que el navegador soporte notificaciones,
 if (!("Notification" in window))
  throw new Error("Este navegador no soporta notificaciones push.")

 // Valida que el navegador soporte service workers,
 if (!("serviceWorker" in navigator))
  throw new Error("Este navegador no soporta service workers.")

 // Recupera el permiso para usar notificaciones
 let permiso = Notification.permission
 if (permiso === "default") {
  // Permiso no asignado. Pide al usuario su autorización.
  permiso = await Notification.requestPermission()
 }

 // Valida que el usuario haya permitido usar notificaciones..
 if (permiso === "denied")
  throw new Error("Notificaciones bloqueadas.")

 const registro = await navigator.serviceWorker.register(
  urlDeServiceWorkerQueRecibeNotificaciones)
 console.log(urlDeServiceWorkerQueRecibeNotificaciones, "registrado.")
 console.log(registro)

 if (!("showNotification" in registro))
  throw new Error("Este navegador no soporta notificaciones.")
}

2. js / lib / calculaDtoParaSuscripcion.js

/**
 * Devuelve una literal de objeto que se puede usar para enviar
 * en formato JSON al servidor.
 * DTO es un acrónimo para Data Transder Object, u
 * objeto para transferencia de datos.
 * @param { PushSubscription } suscripcion
 */
export function calculaDtoParaSuscripcion(suscripcion) {
 const key = suscripcion.getKey("p256dh")
 const token = suscripcion.getKey("auth")
 const supported = PushManager.supportedContentEncodings
 const encodings = Array.isArray(supported) && supported.length > 0
  ? supported
  : ["aesgcm"]
 const endpoint = suscripcion.endpoint
 const publicKey = key === null
  ? null
  : btoa(String.fromCharCode.apply(null, new Uint8Array(key)))
 const authToken = token === null
  ? null
  : btoa(String.fromCharCode.apply(null, new Uint8Array(token)))
 const contentEncoding = encodings[0]
 return {
  endpoint,
  publicKey,
  authToken,
  contentEncoding
 }
}


3. js / lib / cancelaSuscripcionPush.js

import { getSuscripcionPush } from "./getSuscripcionPush.js"

export async function cancelaSuscripcionPush() {
 const suscripcion = await getSuscripcionPush()
 const resultado = suscripcion === null
  ? false
  : await suscripcion.unsubscribe()
 return resultado === true ? suscripcion : null
}

4. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (contentType === "application/problem+json; charset=utf-8")
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

5. js / lib / descargaVista.js

import { consume } from "./consume.js"
import { muestraObjeto } from "./muestraObjeto.js"
import { recibeJson } from "./recibeJson.js"

/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function descargaVista(url, metodoHttp = "GET") {
 const respuesta = await consume(recibeJson(url, metodoHttp))
 const json = await respuesta.json()
 muestraObjeto(document, json)
 return json
}

6. js / lib / enviaJsonRecibeJson.js


/**
 * @param { string } url
 * @param { Object } body
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function enviaJsonRecibeJson(url, body, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: {
    "Content-Type": "application/json",
    "Accept": "application/json, application/problem+json"
   },
   body: JSON.stringify(body)
  }
 )
}

7. js / lib / getSuscripcionPush.js

export async function getSuscripcionPush() {
 // Recupera el service worker registrado.
 const registro = await navigator.serviceWorker.ready
 return registro.pushManager.getSubscription()
}

8. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


9. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

10. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

11. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

12. js / lib / recibeJson.js


/**
 * @param {string} url
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function recibeJson(url, metodoHttp = "GET") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: { "Accept": "application/json, application/problem+json" }
  }
 )
}

13. js / lib / suscribeAPush.js

/**
 * @param { ArrayBuffer } applicationServerKey
 */
export async function suscribeAPush(applicationServerKey) {
 // Recupera el service worker registrado.
 const registro = await navigator.serviceWorker.ready
 return registro.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey
 })
}

14. js / lib / urlBase64ToUint8Array.js

/**
 * @param { string } base64String
 */
export function urlBase64ToUint8Array(base64String) {
 const padding = "=".repeat((4 - (base64String.length % 4)) % 4)
 const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/')
 const rawData = atob(base64)
 const outputArray = new Uint8Array(rawData.length)
 for (let i = 0; i < rawData.length; ++i) {
  outputArray[i] = rawData.charCodeAt(i)
 }
 return outputArray
}

11. Carpeta « errors »

Versión para imprimir.

A. errors / authtokenincorrecto.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El authToken debe ser texto que no esté en blanco</title>

<body>

 <h1>El authToken debe ser texto que no esté en blanco</h1>

</body>

</html>

B. errors / contentencodingincorrecta.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>La contentEncoding debe ser texto que no esté en blanco</title>

<body>

 <h1>La contentEncoding debe ser texto que no esté en blanco</h1>

</body>

</html>

C. errors / datosnojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Los datos recibidos no están en formato JSON</title>

</head>

<body>

 <h1>Los datos recibidos no están en formato JSON</h1>

</body>

</html>

D. errors / endpointincorrecto.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El endpoint debe ser texto que no esté en blanco</title>

<body>

 <h1>El endpoint debe ser texto que no esté en blanco</h1>

</body>

</html>

E. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

F. errors / publickeyincorrecta.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>La publicKey debe ser texto que no esté en blanco</title>

<body>

 <h1>La publicKey debe ser texto que no esté en blanco</h1>

</body>

</html>

G. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

12. composer.json

{
 "require": {
  "minishlink/web-push": "^10.0.1"
 }
}

13. composer.lock

{
    "_readme": [
        "This file locks the dependencies of your project to a known state",
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
    "content-hash": "5d03d83a0c68b97c1b883f5e5d450861",
    "packages": [
        {
            "name": "brick/math",
            "version": "0.14.1",
            "source": {
                "type": "git",
                "url": "https://github.com/brick/math.git",
                "reference": "f05858549e5f9d7bb45875a75583240a38a281d0"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/brick/math/zipball/f05858549e5f9d7bb45875a75583240a38a281d0",
                "reference": "f05858549e5f9d7bb45875a75583240a38a281d0",
                "shasum": ""
            },
            "require": {
                "php": "^8.2"
            },
            "require-dev": {
                "php-coveralls/php-coveralls": "^2.2",
                "phpstan/phpstan": "2.1.22",
                "phpunit/phpunit": "^11.5"
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "Brick\\Math\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "description": "Arbitrary-precision arithmetic library",
            "keywords": [
                "Arbitrary-precision",
                "BigInteger",
                "BigRational",
                "arithmetic",
                "bigdecimal",
                "bignum",
                "bignumber",
                "brick",
                "decimal",
                "integer",
                "math",
                "mathematics",
                "rational"
            ],
            "support": {
                "issues": "https://github.com/brick/math/issues",
                "source": "https://github.com/brick/math/tree/0.14.1"
            },
            "funding": [
                {
                    "url": "https://github.com/BenMorel",
                    "type": "github"
                }
            ],
            "time": "2025-11-24T14:40:29+00:00"
        },
        {
            "name": "guzzlehttp/guzzle",
            "version": "7.10.0",
            "source": {
                "type": "git",
                "url": "https://github.com/guzzle/guzzle.git",
                "reference": "b51ac707cfa420b7bfd4e4d5e510ba8008e822b4"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/guzzle/guzzle/zipball/b51ac707cfa420b7bfd4e4d5e510ba8008e822b4",
                "reference": "b51ac707cfa420b7bfd4e4d5e510ba8008e822b4",
                "shasum": ""
            },
            "require": {
                "ext-json": "*",
                "guzzlehttp/promises": "^2.3",
                "guzzlehttp/psr7": "^2.8",
                "php": "^7.2.5 || ^8.0",
                "psr/http-client": "^1.0",
                "symfony/deprecation-contracts": "^2.2 || ^3.0"
            },
            "provide": {
                "psr/http-client-implementation": "1.0"
            },
            "require-dev": {
                "bamarni/composer-bin-plugin": "^1.8.2",
                "ext-curl": "*",
                "guzzle/client-integration-tests": "3.0.2",
                "php-http/message-factory": "^1.1",
                "phpunit/phpunit": "^8.5.39 || ^9.6.20",
                "psr/log": "^1.1 || ^2.0 || ^3.0"
            },
            "suggest": {
                "ext-curl": "Required for CURL handler support",
                "ext-intl": "Required for Internationalized Domain Name (IDN) support",
                "psr/log": "Required for using the Log middleware"
            },
            "type": "library",
            "extra": {
                "bamarni-bin": {
                    "bin-links": true,
                    "forward-command": false
                }
            },
            "autoload": {
                "files": [
                    "src/functions_include.php"
                ],
                "psr-4": {
                    "GuzzleHttp\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Graham Campbell",
                    "email": "hello@gjcampbell.co.uk",
                    "homepage": "https://github.com/GrahamCampbell"
                },
                {
                    "name": "Michael Dowling",
                    "email": "mtdowling@gmail.com",
                    "homepage": "https://github.com/mtdowling"
                },
                {
                    "name": "Jeremy Lindblom",
                    "email": "jeremeamia@gmail.com",
                    "homepage": "https://github.com/jeremeamia"
                },
                {
                    "name": "George Mponos",
                    "email": "gmponos@gmail.com",
                    "homepage": "https://github.com/gmponos"
                },
                {
                    "name": "Tobias Nyholm",
                    "email": "tobias.nyholm@gmail.com",
                    "homepage": "https://github.com/Nyholm"
                },
                {
                    "name": "Márk Sági-Kazár",
                    "email": "mark.sagikazar@gmail.com",
                    "homepage": "https://github.com/sagikazarmark"
                },
                {
                    "name": "Tobias Schultze",
                    "email": "webmaster@tubo-world.de",
                    "homepage": "https://github.com/Tobion"
                }
            ],
            "description": "Guzzle is a PHP HTTP client library",
            "keywords": [
                "client",
                "curl",
                "framework",
                "http",
                "http client",
                "psr-18",
                "psr-7",
                "rest",
                "web service"
            ],
            "support": {
                "issues": "https://github.com/guzzle/guzzle/issues",
                "source": "https://github.com/guzzle/guzzle/tree/7.10.0"
            },
            "funding": [
                {
                    "url": "https://github.com/GrahamCampbell",
                    "type": "github"
                },
                {
                    "url": "https://github.com/Nyholm",
                    "type": "github"
                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/guzzle",
                    "type": "tidelift"
                }
            ],
            "time": "2025-08-23T22:36:01+00:00"
        },
        {
            "name": "guzzlehttp/promises",
            "version": "2.3.0",
            "source": {
                "type": "git",
                "url": "https://github.com/guzzle/promises.git",
                "reference": "481557b130ef3790cf82b713667b43030dc9c957"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/guzzle/promises/zipball/481557b130ef3790cf82b713667b43030dc9c957",
                "reference": "481557b130ef3790cf82b713667b43030dc9c957",
                "shasum": ""
            },
            "require": {
                "php": "^7.2.5 || ^8.0"
            },
            "require-dev": {
                "bamarni/composer-bin-plugin": "^1.8.2",
                "phpunit/phpunit": "^8.5.44 || ^9.6.25"
            },
            "type": "library",
            "extra": {
                "bamarni-bin": {
                    "bin-links": true,
                    "forward-command": false
                }
            },
            "autoload": {
                "psr-4": {
                    "GuzzleHttp\\Promise\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Graham Campbell",
                    "email": "hello@gjcampbell.co.uk",
                    "homepage": "https://github.com/GrahamCampbell"
                },
                {
                    "name": "Michael Dowling",
                    "email": "mtdowling@gmail.com",
                    "homepage": "https://github.com/mtdowling"
                },
                {
                    "name": "Tobias Nyholm",
                    "email": "tobias.nyholm@gmail.com",
                    "homepage": "https://github.com/Nyholm"
                },
                {
                    "name": "Tobias Schultze",
                    "email": "webmaster@tubo-world.de",
                    "homepage": "https://github.com/Tobion"
                }
            ],
            "description": "Guzzle promises library",
            "keywords": [
                "promise"
            ],
            "support": {
                "issues": "https://github.com/guzzle/promises/issues",
                "source": "https://github.com/guzzle/promises/tree/2.3.0"
            },
            "funding": [
                {
                    "url": "https://github.com/GrahamCampbell",
                    "type": "github"
                },
                {
                    "url": "https://github.com/Nyholm",
                    "type": "github"
                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/promises",
                    "type": "tidelift"
                }
            ],
            "time": "2025-08-22T14:34:08+00:00"
        },
        {
            "name": "guzzlehttp/psr7",
            "version": "2.8.0",
            "source": {
                "type": "git",
                "url": "https://github.com/guzzle/psr7.git",
                "reference": "21dc724a0583619cd1652f673303492272778051"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/guzzle/psr7/zipball/21dc724a0583619cd1652f673303492272778051",
                "reference": "21dc724a0583619cd1652f673303492272778051",
                "shasum": ""
            },
            "require": {
                "php": "^7.2.5 || ^8.0",
                "psr/http-factory": "^1.0",
                "psr/http-message": "^1.1 || ^2.0",
                "ralouphie/getallheaders": "^3.0"
            },
            "provide": {
                "psr/http-factory-implementation": "1.0",
                "psr/http-message-implementation": "1.0"
            },
            "require-dev": {
                "bamarni/composer-bin-plugin": "^1.8.2",
                "http-interop/http-factory-tests": "0.9.0",
                "phpunit/phpunit": "^8.5.44 || ^9.6.25"
            },
            "suggest": {
                "laminas/laminas-httphandlerrunner": "Emit PSR-7 responses"
            },
            "type": "library",
            "extra": {
                "bamarni-bin": {
                    "bin-links": true,
                    "forward-command": false
                }
            },
            "autoload": {
                "psr-4": {
                    "GuzzleHttp\\Psr7\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Graham Campbell",
                    "email": "hello@gjcampbell.co.uk",
                    "homepage": "https://github.com/GrahamCampbell"
                },
                {
                    "name": "Michael Dowling",
                    "email": "mtdowling@gmail.com",
                    "homepage": "https://github.com/mtdowling"
                },
                {
                    "name": "George Mponos",
                    "email": "gmponos@gmail.com",
                    "homepage": "https://github.com/gmponos"
                },
                {
                    "name": "Tobias Nyholm",
                    "email": "tobias.nyholm@gmail.com",
                    "homepage": "https://github.com/Nyholm"
                },
                {
                    "name": "Márk Sági-Kazár",
                    "email": "mark.sagikazar@gmail.com",
                    "homepage": "https://github.com/sagikazarmark"
                },
                {
                    "name": "Tobias Schultze",
                    "email": "webmaster@tubo-world.de",
                    "homepage": "https://github.com/Tobion"
                },
                {
                    "name": "Márk Sági-Kazár",
                    "email": "mark.sagikazar@gmail.com",
                    "homepage": "https://sagikazarmark.hu"
                }
            ],
            "description": "PSR-7 message implementation that also provides common utility methods",
            "keywords": [
                "http",
                "message",
                "psr-7",
                "request",
                "response",
                "stream",
                "uri",
                "url"
            ],
            "support": {
                "issues": "https://github.com/guzzle/psr7/issues",
                "source": "https://github.com/guzzle/psr7/tree/2.8.0"
            },
            "funding": [
                {
                    "url": "https://github.com/GrahamCampbell",
                    "type": "github"
                },
                {
                    "url": "https://github.com/Nyholm",
                    "type": "github"
                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/psr7",
                    "type": "tidelift"
                }
            ],
            "time": "2025-08-23T21:21:41+00:00"
        },
        {
            "name": "minishlink/web-push",
            "version": "v10.0.1",
            "source": {
                "type": "git",
                "url": "https://github.com/web-push-libs/web-push-php.git",
                "reference": "08463189d3501cbd78a8625c87ab6680a7397aad"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/web-push-libs/web-push-php/zipball/08463189d3501cbd78a8625c87ab6680a7397aad",
                "reference": "08463189d3501cbd78a8625c87ab6680a7397aad",
                "shasum": ""
            },
            "require": {
                "ext-curl": "*",
                "ext-json": "*",
                "ext-mbstring": "*",
                "ext-openssl": "*",
                "guzzlehttp/guzzle": "^7.9.2",
                "php": ">=8.2",
                "spomky-labs/base64url": "^2.0.4",
                "web-token/jwt-library": "^3.4.9|^4.0.6"
            },
            "require-dev": {
                "friendsofphp/php-cs-fixer": "^v3.91.3",
                "phpstan/phpstan": "^2.1.33",
                "phpstan/phpstan-strict-rules": "^2.0",
                "phpunit/phpunit": "^11.5.46|^12.5.2",
                "symfony/polyfill-iconv": "^1.33"
            },
            "suggest": {
                "ext-bcmath": "Optional for performance.",
                "ext-gmp": "Optional for performance."
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "Minishlink\\WebPush\\": "src"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Louis Lagrange",
                    "email": "lagrange.louis@gmail.com",
                    "homepage": "https://github.com/Minishlink"
                }
            ],
            "description": "Web Push library for PHP",
            "homepage": "https://github.com/web-push-libs/web-push-php",
            "keywords": [
                "Push API",
                "WebPush",
                "notifications",
                "push",
                "web"
            ],
            "support": {
                "issues": "https://github.com/web-push-libs/web-push-php/issues",
                "source": "https://github.com/web-push-libs/web-push-php/tree/v10.0.1"
            },
            "time": "2025-12-15T10:04:28+00:00"
        },
        {
            "name": "psr/clock",
            "version": "1.0.0",
            "source": {
                "type": "git",
                "url": "https://github.com/php-fig/clock.git",
                "reference": "e41a24703d4560fd0acb709162f73b8adfc3aa0d"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/php-fig/clock/zipball/e41a24703d4560fd0acb709162f73b8adfc3aa0d",
                "reference": "e41a24703d4560fd0acb709162f73b8adfc3aa0d",
                "shasum": ""
            },
            "require": {
                "php": "^7.0 || ^8.0"
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "Psr\\Clock\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "PHP-FIG",
                    "homepage": "https://www.php-fig.org/"
                }
            ],
            "description": "Common interface for reading the clock.",
            "homepage": "https://github.com/php-fig/clock",
            "keywords": [
                "clock",
                "now",
                "psr",
                "psr-20",
                "time"
            ],
            "support": {
                "issues": "https://github.com/php-fig/clock/issues",
                "source": "https://github.com/php-fig/clock/tree/1.0.0"
            },
            "time": "2022-11-25T14:36:26+00:00"
        },
        {
            "name": "psr/http-client",
            "version": "1.0.3",
            "source": {
                "type": "git",
                "url": "https://github.com/php-fig/http-client.git",
                "reference": "bb5906edc1c324c9a05aa0873d40117941e5fa90"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/php-fig/http-client/zipball/bb5906edc1c324c9a05aa0873d40117941e5fa90",
                "reference": "bb5906edc1c324c9a05aa0873d40117941e5fa90",
                "shasum": ""
            },
            "require": {
                "php": "^7.0 || ^8.0",
                "psr/http-message": "^1.0 || ^2.0"
            },
            "type": "library",
            "extra": {
                "branch-alias": {
                    "dev-master": "1.0.x-dev"
                }
            },
            "autoload": {
                "psr-4": {
                    "Psr\\Http\\Client\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "PHP-FIG",
                    "homepage": "https://www.php-fig.org/"
                }
            ],
            "description": "Common interface for HTTP clients",
            "homepage": "https://github.com/php-fig/http-client",
            "keywords": [
                "http",
                "http-client",
                "psr",
                "psr-18"
            ],
            "support": {
                "source": "https://github.com/php-fig/http-client"
            },
            "time": "2023-09-23T14:17:50+00:00"
        },
        {
            "name": "psr/http-factory",
            "version": "1.1.0",
            "source": {
                "type": "git",
                "url": "https://github.com/php-fig/http-factory.git",
                "reference": "2b4765fddfe3b508ac62f829e852b1501d3f6e8a"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/php-fig/http-factory/zipball/2b4765fddfe3b508ac62f829e852b1501d3f6e8a",
                "reference": "2b4765fddfe3b508ac62f829e852b1501d3f6e8a",
                "shasum": ""
            },
            "require": {
                "php": ">=7.1",
                "psr/http-message": "^1.0 || ^2.0"
            },
            "type": "library",
            "extra": {
                "branch-alias": {
                    "dev-master": "1.0.x-dev"
                }
            },
            "autoload": {
                "psr-4": {
                    "Psr\\Http\\Message\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "PHP-FIG",
                    "homepage": "https://www.php-fig.org/"
                }
            ],
            "description": "PSR-17: Common interfaces for PSR-7 HTTP message factories",
            "keywords": [
                "factory",
                "http",
                "message",
                "psr",
                "psr-17",
                "psr-7",
                "request",
                "response"
            ],
            "support": {
                "source": "https://github.com/php-fig/http-factory"
            },
            "time": "2024-04-15T12:06:14+00:00"
        },
        {
            "name": "psr/http-message",
            "version": "2.0",
            "source": {
                "type": "git",
                "url": "https://github.com/php-fig/http-message.git",
                "reference": "402d35bcb92c70c026d1a6a9883f06b2ead23d71"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/php-fig/http-message/zipball/402d35bcb92c70c026d1a6a9883f06b2ead23d71",
                "reference": "402d35bcb92c70c026d1a6a9883f06b2ead23d71",
                "shasum": ""
            },
            "require": {
                "php": "^7.2 || ^8.0"
            },
            "type": "library",
            "extra": {
                "branch-alias": {
                    "dev-master": "2.0.x-dev"
                }
            },
            "autoload": {
                "psr-4": {
                    "Psr\\Http\\Message\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "PHP-FIG",
                    "homepage": "https://www.php-fig.org/"
                }
            ],
            "description": "Common interface for HTTP messages",
            "homepage": "https://github.com/php-fig/http-message",
            "keywords": [
                "http",
                "http-message",
                "psr",
                "psr-7",
                "request",
                "response"
            ],
            "support": {
                "source": "https://github.com/php-fig/http-message/tree/2.0"
            },
            "time": "2023-04-04T09:54:51+00:00"
        },
        {
            "name": "ralouphie/getallheaders",
            "version": "3.0.3",
            "source": {
                "type": "git",
                "url": "https://github.com/ralouphie/getallheaders.git",
                "reference": "120b605dfeb996808c31b6477290a714d356e822"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/ralouphie/getallheaders/zipball/120b605dfeb996808c31b6477290a714d356e822",
                "reference": "120b605dfeb996808c31b6477290a714d356e822",
                "shasum": ""
            },
            "require": {
                "php": ">=5.6"
            },
            "require-dev": {
                "php-coveralls/php-coveralls": "^2.1",
                "phpunit/phpunit": "^5 || ^6.5"
            },
            "type": "library",
            "autoload": {
                "files": [
                    "src/getallheaders.php"
                ]
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Ralph Khattar",
                    "email": "ralph.khattar@gmail.com"
                }
            ],
            "description": "A polyfill for getallheaders.",
            "support": {
                "issues": "https://github.com/ralouphie/getallheaders/issues",
                "source": "https://github.com/ralouphie/getallheaders/tree/develop"
            },
            "time": "2019-03-08T08:55:37+00:00"
        },
        {
            "name": "spomky-labs/base64url",
            "version": "v2.0.4",
            "source": {
                "type": "git",
                "url": "https://github.com/Spomky-Labs/base64url.git",
                "reference": "7752ce931ec285da4ed1f4c5aa27e45e097be61d"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/Spomky-Labs/base64url/zipball/7752ce931ec285da4ed1f4c5aa27e45e097be61d",
                "reference": "7752ce931ec285da4ed1f4c5aa27e45e097be61d",
                "shasum": ""
            },
            "require": {
                "php": ">=7.1"
            },
            "require-dev": {
                "phpstan/extension-installer": "^1.0",
                "phpstan/phpstan": "^0.11|^0.12",
                "phpstan/phpstan-beberlei-assert": "^0.11|^0.12",
                "phpstan/phpstan-deprecation-rules": "^0.11|^0.12",
                "phpstan/phpstan-phpunit": "^0.11|^0.12",
                "phpstan/phpstan-strict-rules": "^0.11|^0.12"
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "Base64Url\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Florent Morselli",
                    "homepage": "https://github.com/Spomky-Labs/base64url/contributors"
                }
            ],
            "description": "Base 64 URL Safe Encoding/Decoding PHP Library",
            "homepage": "https://github.com/Spomky-Labs/base64url",
            "keywords": [
                "base64",
                "rfc4648",
                "safe",
                "url"
            ],
            "support": {
                "issues": "https://github.com/Spomky-Labs/base64url/issues",
                "source": "https://github.com/Spomky-Labs/base64url/tree/v2.0.4"
            },
            "funding": [
                {
                    "url": "https://github.com/Spomky",
                    "type": "github"
                },
                {
                    "url": "https://www.patreon.com/FlorentMorselli",
                    "type": "patreon"
                }
            ],
            "time": "2020-11-03T09:10:25+00:00"
        },
        {
            "name": "spomky-labs/pki-framework",
            "version": "1.4.1",
            "source": {
                "type": "git",
                "url": "https://github.com/Spomky-Labs/pki-framework.git",
                "reference": "f0e9a548df4e3942886adc9b7830581a46334631"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/Spomky-Labs/pki-framework/zipball/f0e9a548df4e3942886adc9b7830581a46334631",
                "reference": "f0e9a548df4e3942886adc9b7830581a46334631",
                "shasum": ""
            },
            "require": {
                "brick/math": "^0.10|^0.11|^0.12|^0.13|^0.14",
                "ext-mbstring": "*",
                "php": ">=8.1"
            },
            "require-dev": {
                "ekino/phpstan-banned-code": "^1.0|^2.0|^3.0",
                "ext-gmp": "*",
                "ext-openssl": "*",
                "infection/infection": "^0.28|^0.29|^0.31",
                "php-parallel-lint/php-parallel-lint": "^1.3",
                "phpstan/extension-installer": "^1.3|^2.0",
                "phpstan/phpstan": "^1.8|^2.0",
                "phpstan/phpstan-deprecation-rules": "^1.0|^2.0",
                "phpstan/phpstan-phpunit": "^1.1|^2.0",
                "phpstan/phpstan-strict-rules": "^1.3|^2.0",
                "phpunit/phpunit": "^10.1|^11.0|^12.0",
                "rector/rector": "^1.0|^2.0",
                "roave/security-advisories": "dev-latest",
                "symfony/string": "^6.4|^7.0|^8.0",
                "symfony/var-dumper": "^6.4|^7.0|^8.0",
                "symplify/easy-coding-standard": "^12.0"
            },
            "suggest": {
                "ext-bcmath": "For better performance (or GMP)",
                "ext-gmp": "For better performance (or BCMath)",
                "ext-openssl": "For OpenSSL based cyphering"
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "SpomkyLabs\\Pki\\": "src/"
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Joni Eskelinen",
                    "email": "jonieske@gmail.com",
                    "role": "Original developer"
                },
                {
                    "name": "Florent Morselli",
                    "email": "florent.morselli@spomky-labs.com",
                    "role": "Spomky-Labs PKI Framework developer"
                }
            ],
            "description": "A PHP framework for managing Public Key Infrastructures. It comprises X.509 public key certificates, attribute certificates, certification requests and certification path validation.",
            "homepage": "https://github.com/spomky-labs/pki-framework",
            "keywords": [
                "DER",
                "Private Key",
                "ac",
                "algorithm identifier",
                "asn.1",
                "asn1",
                "attribute certificate",
                "certificate",
                "certification request",
                "cryptography",
                "csr",
                "decrypt",
                "ec",
                "encrypt",
                "pem",
                "pkcs",
                "public key",
                "rsa",
                "sign",
                "signature",
                "verify",
                "x.509",
                "x.690",
                "x509",
                "x690"
            ],
            "support": {
                "issues": "https://github.com/Spomky-Labs/pki-framework/issues",
                "source": "https://github.com/Spomky-Labs/pki-framework/tree/1.4.1"
            },
            "funding": [
                {
                    "url": "https://github.com/Spomky",
                    "type": "github"
                },
                {
                    "url": "https://www.patreon.com/FlorentMorselli",
                    "type": "patreon"
                }
            ],
            "time": "2025-12-20T12:57:40+00:00"
        },
        {
            "name": "symfony/deprecation-contracts",
            "version": "v3.6.0",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/deprecation-contracts.git",
                "reference": "63afe740e99a13ba87ec199bb07bbdee937a5b62"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/63afe740e99a13ba87ec199bb07bbdee937a5b62",
                "reference": "63afe740e99a13ba87ec199bb07bbdee937a5b62",
                "shasum": ""
            },
            "require": {
                "php": ">=8.1"
            },
            "type": "library",
            "extra": {
                "thanks": {
                    "url": "https://github.com/symfony/contracts",
                    "name": "symfony/contracts"
                },
                "branch-alias": {
                    "dev-main": "3.6-dev"
                }
            },
            "autoload": {
                "files": [
                    "function.php"
                ]
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Nicolas Grekas",
                    "email": "p@tchwork.com"
                },
                {
                    "name": "Symfony Community",
                    "homepage": "https://symfony.com/contributors"
                }
            ],
            "description": "A generic function and convention to trigger deprecation notices",
            "homepage": "https://symfony.com",
            "support": {
                "source": "https://github.com/symfony/deprecation-contracts/tree/v3.6.0"
            },
            "funding": [
                {
                    "url": "https://symfony.com/sponsor",
                    "type": "custom"
                },
                {
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
            "time": "2024-09-25T14:21:43+00:00"
        },
        {
            "name": "web-token/jwt-library",
            "version": "4.1.3",
            "source": {
                "type": "git",
                "url": "https://github.com/web-token/jwt-library.git",
                "reference": "690d4dd47b78f423cb90457f858e4106e1deb728"
            },
            "dist": {
                "type": "zip",
                "url": "https://api.github.com/repos/web-token/jwt-library/zipball/690d4dd47b78f423cb90457f858e4106e1deb728",
                "reference": "690d4dd47b78f423cb90457f858e4106e1deb728",
                "shasum": ""
            },
            "require": {
                "brick/math": "^0.12|^0.13|^0.14",
                "php": ">=8.2",
                "psr/clock": "^1.0",
                "spomky-labs/pki-framework": "^1.2.1"
            },
            "conflict": {
                "spomky-labs/jose": "*"
            },
            "suggest": {
                "ext-bcmath": "GMP or BCMath is highly recommended to improve the library performance",
                "ext-gmp": "GMP or BCMath is highly recommended to improve the library performance",
                "ext-openssl": "For key management (creation, optimization, etc.) and some algorithms (AES, RSA, ECDSA, etc.)",
                "ext-sodium": "Sodium is required for OKP key creation, EdDSA signature algorithm and ECDH-ES key encryption with OKP keys",
                "paragonie/sodium_compat": "Sodium is required for OKP key creation, EdDSA signature algorithm and ECDH-ES key encryption with OKP keys",
                "spomky-labs/aes-key-wrap": "For all Key Wrapping algorithms (AxxxKW, AxxxGCMKW, PBES2-HSxxx+AyyyKW...)",
                "symfony/console": "Needed to use console commands",
                "symfony/http-client": "To enable JKU/X5U support."
            },
            "type": "library",
            "autoload": {
                "psr-4": {
                    "Jose\\Component\\": ""
                }
            },
            "notification-url": "https://packagist.org/downloads/",
            "license": [
                "MIT"
            ],
            "authors": [
                {
                    "name": "Florent Morselli",
                    "homepage": "https://github.com/Spomky"
                },
                {
                    "name": "All contributors",
                    "homepage": "https://github.com/web-token/jwt-framework/contributors"
                }
            ],
            "description": "JWT library",
            "homepage": "https://github.com/web-token",
            "keywords": [
                "JOSE",
                "JWE",
                "JWK",
                "JWKSet",
                "JWS",
                "Jot",
                "RFC7515",
                "RFC7516",
                "RFC7517",
                "RFC7518",
                "RFC7519",
                "RFC7520",
                "bundle",
                "jwa",
                "jwt",
                "symfony"
            ],
            "support": {
                "issues": "https://github.com/web-token/jwt-library/issues",
                "source": "https://github.com/web-token/jwt-library/tree/4.1.3"
            },
            "funding": [
                {
                    "url": "https://github.com/Spomky",
                    "type": "github"
                },
                {
                    "url": "https://www.patreon.com/FlorentMorselli",
                    "type": "patreon"
                }
            ],
            "time": "2025-12-18T14:27:35+00:00"
        }
    ],
    "packages-dev": [],
    "aliases": [],
    "minimum-stability": "stable",
    "stability-flags": [],
    "prefer-stable": false,
    "prefer-lowest": false,
    "platform": [],
    "platform-dev": [],
    "plugin-api-version": "2.6.0"
}


14. Carpeta « vendor »

Versión para imprimir.

A. vendor / -- No se muestra el contenido de esta carpeta --


1

15. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

16. Resumen

En esta lección se muestró un ejemplo de notificaciones push.

14. PWA con vistas CRUD y Material Design 3 Expressive

Versión para imprimir.

A. Introduccion

En esta lección se presenta una PWA que despliega vistas CRUD y usa Material Design 3 Expressive.
Puedes probar el ejemplo en https://pwacrud.rf.gd/.

B. Referencias

Sitios de Material Design
Material.io: Material Design es una guía de diseño para aplicaciones multiplataforma. La encuentras en https://m3.material.io/.
Herramienta para selección de colores
Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
Adaptación multiplataforma: La forma de adaptar Material Design en distintas plataformas está en https://material.io/design/platform-guidance/cross-platform-adaptation.html

C. Hazlo funcionar (con videos)

Prueba e instala, de preferencia con Chrome, el sitio https://pwacrud.rf.gd/.
Descarga el archivo /src/pwacrud.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Crea los íconos del proyecto con https://www.photopea.com/.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Prueba tu PWA.
Publica tu PWA.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

D. Hazlo funcionar (texto)

Prueba e instala, de preferencia con Chrome, el sitio https://pwacrud.rf.gd/.
Descarga el archivo /src/pwacrud.zip y descompáctalo.
Crea tu proyecto en GitHub pages:
1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
  - Mantén la selección Public.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
5. Entra al repositorio y selecciona ⚙️ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto. Si haces cambios, clic en Save.
6. En la misma pestaña de ⚙️ Settings selecciona ◯ Actions, luego selecciona General y en Actions permissions selecciona el rediobotón Allow xxxx, and select non-xxxx, actions and reusable workflows y abajo la casilla de verificación Allow actions created by GitHub y cliquea el botón Save.
Importa el proyecto de GitHub a Visual Studio Code:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo, excepto el archivo .htaccess.
Edita los archivos que desees.
Crea los íconos del proyecto con https://www.photopea.com/.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.
Haz al menos una captura de la ventana de tu aplicación con orientación vertical y otra con orientación horizontal, todas ellas de 320 px como mínimo y 3,840 px como máximo.
Coloca las capturas en la carpeta img y asegúrate de que estén declaradas en el archivo site.webmanifest.
Cuando desarrolles, es incómodo modificar la versión cada que realizas cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
5. En la Pestaña Aplicación (o Application en inglés) selecciona Archivo de manifiesto (o Manifest file en inglés). Esta herramienta analiza la estructura del archivo de manifiesto y te indica si hay un error.
6. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamiento en caché (o Cache storage en inglés). Aquí puedes revisar si el caché de la aplicación se llenó correctamente. En caso de que esté vacío, es que hubo algún error durante la carga y la app se ejecuta más lenta.
Cuando usas GitHub pages, antes de subir los archivos, no debes modificar el valor de VERSION en el archivo sw.js.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.
Si usas GitHub pages:
1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.
2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.
3. A partir de este momento, espera al menos 11 minutos para modificar el valor de VERSION en el archivo sw.js y volver a subir el proyecto.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de agregar a la pantalla principal que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

E. Archivos

Haz clic en los triángulos para expandir las carpetas

F. index.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">
 <title>PWA con Crud</title>

 <meta name="description" content="Ejemplo de PWA con Formulario">

 <script type="module" src="js/lib/registraServiceWorker.js"></script>
 <script type="module" src="js/lib/manejaErrores.js"></script>

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>
 <script type="module" src="js/nav-tab-fixed.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-tab.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-list.css">
 <link rel="stylesheet" href="css/md-fab-primary.css">

</head>

<body>

 <md-app-bar class="centered" adicional="tab">

  <h1>PWA con Crud</h1>

 </md-app-bar>

 <nav-tab-fixed id="tab"></nav-tab-fixed>

 <section>

  <ul class="md-list">

   <li>
    <a class="md-one-line" href="modifica.html?id=1">
     <span class="headline">
      Fut
     </span>
    </a>
   </li>

   <li>
    <a class="md-one-line" href="modifica.html?id=2">
     <span class="headline">
      Basket
     </span>
    </a>
   </li>

  </ul>

  <a href="agrega.html" class="md-fab-primary" title="Agregar"
    style="position: fixed; bottom: 1rem; right: 1rem;">
   <span class="material-symbols-outlined">add</span>
  </a>

 </section>


</body>

</html>

G. agrega.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">

 <title>Agregar - PWA con Crud</title>

 <meta name="description" content="Ejemplo de PWA con Formulario">

 <script type="module" src="js/lib/registraServiceWorker.js"></script>
 <script type="module" src="js/lib/manejaErrores.js"></script>

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-filled-text-field.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-standard-icon-button.css">

</head>

<body>

 <form id="formulario" novalidate>

  <md-app-bar adicional="tab">

   <a class="md-standard-icon-button" slot="navigation" title="Cancelar"
     href="index.html">
    <span class="material-symbols-outlined">cancel</span></a>

   <h1>Agregar</h1>

   <button type="submit" class="md-standard-icon-button" title="Guardar"
     slot="action">
    <span class="material-symbols-outlined">save</span>
   </button>

  </md-app-bar>

  <section>

   <p>
    <label class="md-filled-text-field">
     <input name="nombre" required placeholder="Nombre*">
     <span>Nombre *</span>
     <small id="supportingNombre">Obligatorio</small>
    </label>
   </p>

  </section>

 </form>

 <script type="module">

  import { muestraTextoDeAyuda } from "./js/lib/muestraTextoDeAyuda.js"

  formulario.nombre.addEventListener("input", copiaMensajes)
  formulario.addEventListener("submit", guardar)

  function copiaMensajes() {
   muestraTextoDeAyuda(formulario.nombre, supportingNombre, "Obligatorio")
  }

  /**
   * @param {SubmitEvent} evt
   */
  function guardar(evt) {
   evt.preventDefault()
   copiaMensajes()
   if (formulario.nombre.validity.valid) {
    location.href = "index.html"
   }
  }

 </script>

</body>

</html>

H. modifica.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">

 <title>Modificar - PWA con Crud</title>

 <meta name="description" content="Ejemplo de PWA con Formulario">

 <script type="module" src="js/lib/registraServiceWorker.js"></script>
 <script type="module" src="js/lib/manejaErrores.js"></script>

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-filled-text-field.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-standard-icon-button.css">

</head>

<body>

 <form id="formulario" novalidate>

  <md-app-bar adicional="tab">

   <a class="md-standard-icon-button" slot="navigation" title="Cancelar"
     href="index.html">
    <span class="material-symbols-outlined">cancel</span></a>

   <h1>Modificar</h1>

   <button type="submit" class="md-standard-icon-button" title="Guardar"
     slot="action">
    <span class="material-symbols-outlined">save</span>
   </button>

   <button id="botonEliminar" type="button" class="md-standard-icon-button"
     title="Eliminar" slot="action">
    <span class="material-symbols-outlined">delete_forever</span>
   </button>

  </md-app-bar>

  <section>

   <p>
    <label class="md-filled-text-field">
     <input name="nombre" required placeholder="Nombre*">
     <span>Nombre *</span>
     <small id="supportingNombre">Obligatorio</small>
    </label>
   </p>

  </section>

 </form>

 <script type="module">
  import { muestraTextoDeAyuda } from "./js/lib/muestraTextoDeAyuda.js"

  formulario.nombre.addEventListener("input", copiaMensajes)
  formulario.addEventListener("submit", guardar)
  botonEliminar.addEventListener("click", eliminar)

  function copiaMensajes() {
   muestraTextoDeAyuda(formulario.nombre, supportingNombre, "Obligatorio")
  }

  /**
   * @param {SubmitEvent} evt
   */
  function guardar(evt) {
   evt.preventDefault()
   copiaMensajes()
   if (formulario.nombre.validity.valid) {
    location.href = "index.html"
   }
  }

  function eliminar() {
   location.href = "index.html"
  }

 </script>

</body>

</html>

I. ayuda.html

<!DOCTYPE html>
<html lang="es" class="light dark">

<head>

 <meta charset="UTF-8">
 <title>Ayuda - PWA con Formulario</title>

 <script type="module" src="js/lib/registraServiceWorker.js"></script>

 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content="#fffbfe">
 <link rel="icon" sizes="32x32" href="favicon.ico">
 <link rel="manifest" href="site.webmanifest">
 <script src="ungap/custom-elements.js"></script>

 <script type="module" src="js/lib/custom/md-app-bar.js"></script>
 <script type="module" src="js/nav-tab-fixed.js"></script>

 <link rel="stylesheet" href="css/estilos.css">
 <link rel="stylesheet" href="css/transicion_pestanas.css">
 <link rel="stylesheet" href="css/md-headline.css">
 <link rel="stylesheet" href="css/md-tab.css">
 <link rel="stylesheet" href="css/material-symbols-outlined.css">
 <link rel="stylesheet" href="css/md-list.css">

</head>

<body>

 <md-app-bar adicional="tab">

  <h1>Ayuda</h1>

 </md-app-bar>

 <nav-tab-fixed id="tab"></nav-tab-fixed>

 <section>

  <ul class="md-list">
   <li class="md-two-line">
    <span class="headline">
     Título
    </span>
    <span class="supporting">
     PWA con Material Design
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Descripción
    </span>
    <span class="supporting">
     Ejemplos de vistas móviles.
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Autor
    </span>
    <span class="supporting">
     Gilberto Pacheco Gallegos
    </span>
   </li>
   <li class="md-two-line">
    <span class="headline">
     Derechos de autor
    </span>
    <span class="supporting">
     © 2025 Gilberto Pacheco Gallegos
    </span>
   </li>
   <li class="md-three-line">
    <span class="headline">
     Este software usa la librería para PWA
    </span>
    <span class="supporting">
     Esta obra de Gilberto Pacheco Gallegos está bajo una
     <a target="_blank" rel="license noreferrer"
       href="http://creativecommons.org/licenses/by/4.0/">
      Licencia Creative Commons Atribución 4.0 Internacional</a></span>
   </li>
   <li>
    <a class="md-three-line" target="_blank" rel=”noreferrer”
      href="https://fonts.google.com/icons">
     <span class="headline">
      También usa Material Symbols
     </span>
     <span class="supporting">
      Desarrollada por Google bajo licencia Apache 2.0
     </span>
    </a>
   </li>
  </ul>

 </section>

 <nav-drw></nav-drw>

</body>

</html>

J. site.webmanifest

Este archivo sirve para configurar los instaladores de la aplicación.

Explicación de las propiedades

short_name

Nombre corto. Normalmente se despliega en dispositivos móviles. Máximo 20 caracteres.

name

Nombre largo. Normalmente se despliega en computadoras de escritorio. Máximo 30 caracteres.

id

Identificador del archivo de instalación. Normalmente es la ruta del archivo inicial de la app.

start_url

Ruta del archivo inicial de la app.

display

Forma de mostrar la app. El término standalone significa que no se muestra la barra de navegación del navegador web.

theme_color

Color de la barra de estado (en dispositivos móviles) o de título (en computadoras de escritorio) de la app.

background_color

Color de fondo de la pantalla desplah en dispositivos móviles.

description

Describe el propósito de la aplicación. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

screenshots

icons

Listado de íconos en distintas resoluciones para los instaladores de la app. Se selecciona el que se vea mejor según las característocas del dispositivo.

src

Url de la imagen dentro de la app.

sizes

Dimensiones en pixeles de la imagen, anchoxalto.

type

Tipo mime de la imagen.

purpose

Forma en que se usa la imagen.

maskable: La imagen puede recortarse de forma segura para tomar distintas formas, como círculos, gotas, cuadrados con esquinas redondeadas, etc. Normalmente se usa para dispositivos móviles.
any: No se puede asegurar nada sobre la imagen. Normalmente se usa para dispositivos de escritorio.

Normalmente debe proporcionarse un juego de íconos con purpose any y otro juego de íconos con purpose maskable.

form_factor

Orientación de una screenshot.

wide: La screenshot tiene una orientación horizontal. Normalmente la creenshot se usa para dispositivos de escritorio.
narrow: La screenshot tiene una orientación vertical. Normalmente la creenshot se usa para dispositivos móviles.

Debes incluir al menos una screenshot con "form_factor": "wide" y otra con "form_factor": "narrow".

label

Descripción de una screenshot. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

{
 "short_name": "Crud PWA",
 "name": "PWA con Crud",
 "id": "/index.html",
 "start_url": "/index.html",
 "display": "standalone",
 "theme_color": "#fffbfe",
 "background_color": "#fffbfe",
 "display_override": [
  "window-controls-overlay"
 ],
 "description": "PWA con Crud.",
 "screenshots": [
  {
   "src": "img/screenshot_horizontal.png",
   "sizes": "661x360",
   "type": "image/png",
   "form_factor": "wide",
   "label": "PWA con Material Design"
  },
  {
   "src": "img/screenshot_vertical.png",
   "sizes": "555x757",
   "type": "image/png",
   "form_factor": "narrow",
   "label": "PWA con Material Design (2)"
  }
 ],
 "icons": [
  {
    "purpose": "maskable",
    "sizes": "3150x3150",
    "src": "img/maskable_icon.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "48x48",
    "src": "img/maskable_icon_x48.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "72x72",
    "src": "img/maskable_icon_x72.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "96x96",
    "src": "img/maskable_icon_x96.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "128x128",
    "src": "img/maskable_icon_x128.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "192x192",
    "src": "img/maskable_icon_x192.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "384x384",
    "src": "img/maskable_icon_x384.png",
    "type": "image/png"
  },
  {
    "purpose": "maskable",
    "sizes": "512x512",
    "src": "img/maskable_icon_x512.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "3150x3150",
    "src": "img/maskable_icon.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "48x48",
    "src": "img/maskable_icon_x48.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "72x72",
    "src": "img/maskable_icon_x72.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "96x96",
    "src": "img/maskable_icon_x96.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "128x128",
    "src": "img/maskable_icon_x128.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "192x192",
    "src": "img/maskable_icon_x192.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "384x384",
    "src": "img/maskable_icon_x384.png",
    "type": "image/png"
  },
  {
    "purpose": "any",
    "sizes": "512x512",
    "src": "img/maskable_icon_x512.png",
    "type": "image/png"
  },
  {
   "purpose": "any",
   "sizes": "2048x2048",
   "src": "img/icono2048.png",
   "type": "image/png"
  }
 ]
}

K. sw.js

/* Este archivo debe estar colocado en la carpeta raíz del sitio.
 * 
 * Cualquier cambio en el contenido de este archivo hace que el service
 * worker se reinstale. */

/**
 * Cambia el número de la versión cuando cambia el contenido de los
 * archivos.
 * 
 * El número a la izquierda del punto (.), en este caso <q>1</q>, se
 * conoce como número mayor y se cambia cuando se realizan
 * modificaciones grandes o importantes.
 * 
 * El número a la derecha del punto (.), en este caso <q>00</q>, se
 * conoce como número menor y se cambia cuando se realizan
 * modificaciones menores.
 */
const VERSION = "1.00"

/**
 * Nombre de la carpeta de caché.
 */
const CACHE = "pwamd"

/**
 * Archivos requeridos para que la aplicación funcione fuera de
 * línea.
 */
const ARCHIVOS = [
 "agrega.html",
 "ayuda.html",
 "favicon.ico",
 "index.html",
 "modifica.html",
 "site.webmanifest",
 "css/baseline.css",
 "css/colors.css",
 "css/elevation.css",
 "css/estilos.css",
 "css/material-symbols-outlined.css",
 "css/md-fab-primary.css",
 "css/md-filled-text-field.css",
 "css/md-headline.css",
 "css/md-list.css",
 "css/md-standard-icon-button.css",
 "css/md-tab.css",
 "css/motion.css",
 "css/palette.css",
 "css/roboto.css",
 "css/shape.css",
 "css/state.css",
 "css/transicion_pestanas.css",
 "css/typography.css",
 "css/theme/dark.css",
 "css/theme/light.css",
 "fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
 "fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
 "fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
 "fonts/roboto-v32-latin-regular.woff2",
 "img/icono2048.png",
 "img/maskable_icon.png",
 "img/maskable_icon_x128.png",
 "img/maskable_icon_x192.png",
 "img/maskable_icon_x384.png",
 "img/maskable_icon_x48.png",
 "img/maskable_icon_x512.png",
 "img/maskable_icon_x72.png",
 "img/maskable_icon_x96.png",
 "img/screenshot_horizontal.png",
 "img/screenshot_vertical.png",
 "js/nav-tab-fixed.js",
 "js/lib/ES_APPLE.js",
 "js/lib/getAttribute.js",
 "js/lib/manejaErrores.js",
 "js/lib/muestraError.js",
 "js/lib/muestraTextoDeAyuda.js",
 "js/lib/ProblemDetailsError.js",
 "js/lib/querySelector.js",
 "js/lib/registraServiceWorker.js",
 "js/lib/resaltaSiEstasEn.js",
 "js/lib/custom/md-app-bar.js",
 "ungap/custom-elements.js",
 "/"
]

// Verifica si el código corre dentro de un service worker.
if (self instanceof ServiceWorkerGlobalScope) {
 // Evento al empezar a instalar el servide worker,
 self.addEventListener("install",
  (/** @type {ExtendableEvent} */ evt) => {
   console.log("El service worker se está instalando.")
   evt.waitUntil(llenaElCache())
  })

 // Evento al solicitar información a la red.
 self.addEventListener("fetch", (/** @type {FetchEvent} */ evt) => {
  if (evt.request.method === "GET") {
   evt.respondWith(buscaLaRespuestaEnElCache(evt))
  }
 })

 // Evento cuando el service worker se vuelve activo.
 self.addEventListener("activate",
  () => console.log("El service worker está activo."))
}

async function llenaElCache() {
 console.log("Intentando cargar caché:", CACHE)
 // Borra todos los cachés.
 const keys = await caches.keys()
 for (const key of keys) {
  await caches.delete(key)
 }
 // Abre el caché de este service worker.
 const cache = await caches.open(CACHE)
 // Carga el listado de ARCHIVOS.
 await cache.addAll(ARCHIVOS)
 console.log("Cache cargado:", CACHE)
 console.log("Versión:", VERSION)
}

/** @param {FetchEvent} evt */
async function buscaLaRespuestaEnElCache(evt) {
 // Abre el caché.
 const cache = await caches.open(CACHE)
 const request = evt.request
 /* Busca la respuesta a la solicitud en el contenido del caché, sin
  * tomar en cuenta la parte después del símbolo "?" en la URL. */
 const response = await cache.match(request, { ignoreSearch: true })
 if (response === undefined) {
  /* Si no la encuentra, empieza a descargar de la red y devuelve
   * la promesa. */
  return fetch(request)
 } else {
  // Si la encuentra, devuelve la respuesta encontrada en el caché.
  return response
 }
}

L. Carpeta « css »

Versión para imprimir.

A. css / baseline.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

@import url(palette.css);
@import url(typography.css);
@import url(colors.css);
@import url(shape.css);
@import url(motion.css);
@import url(state.css);
@import url(elevation.css);
@import url(theme/light.css) screen and (prefers-color-scheme: light);
@import url(theme/dark.css) screen and (prefers-color-scheme: dark);


B. css / colors.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

.primary {
  color: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
.on-primary {
  color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-on-primary);
}
.primary-container {
  color: var(--md-sys-color-on-primary-container);
  background-color: var(--md-sys-color-primary-container);
}
.on-primary-container {
  color: var(--md-sys-color-primary-container);
  background-color: var(--md-sys-color-on-primary-container);
}
.secondary {
  color: var(--md-sys-color-on-secondary);
  background-color: var(--md-sys-color-secondary);
}
.on-secondary {
  color: var(--md-sys-color-secondary);
  background-color: var(--md-sys-color-on-secondary);
}
.secondary-container {
  color: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
.on-secondary-container {
  color: var(--md-sys-color-secondary-container);
  background-color: var(--md-sys-color-on-secondary-container);
}
.tertiary {
  color: var(--md-sys-color-on-tertiary);
  background-color: var(--md-sys-color-tertiary);
}
.on-tertiary {
  color: var(--md-sys-color-tertiary);
  background-color: var(--md-sys-color-on-tertiary);
}
.tertiary-container {
  color: var(--md-sys-color-on-tertiary-container);
  background-color: var(--md-sys-color-tertiary-container);
}
.on-tertiary-container {
  color: var(--md-sys-color-tertiary-container);
  background-color: var(--md-sys-color-on-tertiary-container);
}
.background {
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
}
.surface {
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
}
.surface-variant {
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-variant);
}
.on-surface-variant {
  color: var(--md-sys-color-surface-variant);
  background-color: var(--md-sys-color-on-surface-variant);
}
.outline {
  border: 1px solid var(--md-sys-color-outline);
}
.inverse-surface {
  color: var(--md-sys-color-on-inverse-surface);
  background-color: var(--md-sys-color-inverse-surface);
}
.on-inverse-surface {
  color: var(--md-sys-color-inverse-surface);
  background-color: var(--md-sys-color-on-inverse-surface);
}
.inverse-primary {
  color: var(--md-sys-color-on-inverse-primary);
  background-color: var(--md-sys-color-inverse-primary);
}
.on-inverse-primary {
  color: var(--md-sys-color-inverse-primary);
  background-color: var(--md-sys-color-on-inverse-primary);
}
.surface-tint {
  background-color: var(--md-sys-color-on-surface-tint);
}
.error {
  color: var(--md-sys-color-on-error);
  background-color: var(--md-sys-color-error);
}
.on-error {
  color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-on-error);
}
.error-container {
  color: var(--md-sys-color-on-error-container);
  background-color: var(--md-sys-color-error-container);
}
.on-error-container {
  color: var(--md-sys-color-error-container);
  background-color: var(--md-sys-color-on-error-container);
}
.black {
  background-color: var(--md-ref-palette-black);
}
.black-text {
  color: var(--md-ref-palette-black);
}
.white {
  background-color: var(--md-ref-palette-white);
}
.white-text {
  color: var(--md-ref-palette-white);
}


C. css / elevation.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Surface tint color */
  --md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
  /* +5 */
  --md-sys-elevation-level5-value: 12px;
  --md-sys-elevation-level5-unit: 1px;
  --md-sys-elevation-level5: 12px;
  /* +4 */
  --md-sys-elevation-level4-value: 8px;
  --md-sys-elevation-level4-unit: 1px;
  --md-sys-elevation-level4: 8px;
  /* +3 */
  --md-sys-elevation-level3-value: 6px;
  --md-sys-elevation-level3-unit: 1px;
  --md-sys-elevation-level3: 6px;
  /* +2 */
  --md-sys-elevation-level2-value: 3px;
  --md-sys-elevation-level2-unit: 1px;
  --md-sys-elevation-level2: 3px;
  /* +1 */
  --md-sys-elevation-level1-value: 1px;
  --md-sys-elevation-level1-unit: 1px;
  --md-sys-elevation-level1: 1px;
  /* 0 */
  --md-sys-elevation-level0-value: 0px;
  --md-sys-elevation-level0-unit: 1px;
  --md-sys-elevation-level0: 0px;
}
.elevation-0 {
  box-shadow: var(--md-sys-elevation-level0);
}
.elevation-1 {
  box-shadow: var(--md-sys-elevation-level1);
}
.elevation-2 {
  box-shadow: var(--md-sys-elevation-level2);
}
.elevation-3 {
  box-shadow: var(--md-sys-elevation-level3);
}
.elevation-4 {
  box-shadow: var(--md-sys-elevation-level4);
}
.elevation-5 {
  box-shadow: var(--md-sys-elevation-level5);
}


D. css / estilos.css

/* Definiciones para Material Design 3  */
@import url(baseline.css);
/* Fonts utilizados */
@import url(roboto.css);

html {
 /* Indica los temas del sistema operativo que son soportados. */
 color-scheme: light dark;
 --tabWidth: 3.75rem;
 --anchoNav: 22.5rem;
}

body>section,
form>section {
 max-width: 600px;
 margin-left: auto;
 margin-right: auto;
}

/* Quita un borde rojo que coloca Firefox. */
:-moz-ui-invalid {
 box-shadow: none;
}

body {
 margin: 0;
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 color: var(--md-sys-color-on-background);
 background-color: var(--md-sys-color-background);
 /* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
 + custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
 opacity: 0;
 animation-name: fouc;
 animation-fill-mode: forwards;
 animation-duration: 1.5s;
}

@keyframes fouc {
 to {
  opacity: 1;
 }
}

html {
 --Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
 --colIntIos: white;
 --colIntIosOnBk: #2acc2a;
 --colIntIosOnBkFc: #1bbb1b;
 --colIntIosOffBk: #dbdbdb;
 --colIntIosOffBkFc: #BDBDBD;
 /* Plain typeface */
 --md-ref-typeface-plain: var(--Font);
 /* Brand typeface */
 --md-ref-typeface-brand: var(--Font);
 --md-sys-typescale-label-large-weight-prominent:
  var(--md-ref-typeface-weight-bold);
 --md-box_shadow_level4:
  0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
 --md-box_shadow_level3:
  0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
 --md-box_shadow_level2:
  0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
 --md-box_shadow_level1:
  0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
 --md-box_shadow_level0: none;
 --iconSize: 1.5rem;
 --avatarSize: 2.5rem;
 --imageSize: 3.5rem;
 --videoWidth: 7.125rem;
 --videoHeight: 4rem;
 --scroll-headline-duracion: 2s;
 --md-sys-state-focus-indicator-outer-offset: 0.125rem;
 --md-sys-state-focus-indicator-thickness: 0.1875rem;
 /* Pressed state layer opacity */
 --state-pressed-transparency-percentage: 84%;
 /* Focus state layer opacity */
 --state-focus-transparency-percentage: 88%;
 /* Hover state layer opacity */
 --state-hover-transparency-percentage: 92%;
}

p {
 margin: 1rem;
}

a {
 color: var(--md-sys-color-on-background);
}

@media (prefers-color-scheme: light) {
 html {
  --md-riple-color: #00000020;
 }
}

@media (prefers-color-scheme: dark) {
 html {
  --md-riple-color: #ffffff40;
 }
}

@keyframes md-ripple {

 from {
  background-size: 100%;
 }

 to {
  background-size: 15000%;
 }

}

@keyframes salePorLaIzquierda {
 to {
  translate: -100vw 0;
 }
}

@keyframes entraPorLaDerecha {
 from {
  translate: 100vw 0;
 }
}

E. css / material-symbols-outlined.css

@font-face {
 font-family: 'Material Symbols Outlined';
 font-style: normal;
 src:
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'),
  url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype');
}

.material-symbols-outlined {
 font-family: 'Material Symbols Outlined';
 font-weight: normal;
 font-style: normal;
 font-size: 1.5rem;
 width: 1.5rem;
 height: 1.5rem;
 /* Preferred icon size */
 display: inline-block;
 line-height: 1;
 text-transform: none;
 letter-spacing: normal;
 word-wrap: normal;
 white-space: nowrap;
 direction: ltr;
}

F. css / md-fab-primary.css

.md-fab-primary {
 position: relative;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 border: none;
 width: 3.5rem;
 height: 3.5rem;
 border-radius: var(--md-sys-shape-corner-large-default-size);
 overflow: hidden;
 padding: 0;
 padding-block: 0;
 padding-inline: 0;
 text-decoration: none;
 background-color: var(--md-sys-color-primary-container);
 box-shadow: var(--md-box_shadow_level3);
}

.md-fab-primary[hidden] {
 display: none;
}

/* state layer */
.md-fab-primary::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
}

.md-fab-primary span {
 position: relative;
 color: var(--md-sys-color-on-primary-container);
}

.md-fab-primary:hover {
 box-shadow: var(--md-box_shadow_level4);
}

.md-fab-primary:hover::after {
 background-color: var(--md-sys-color-on-primary-container);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-fab-primary:hover span {
 color: var(--md-sys-color-on-primary-container);
}


.md-fab-primary:focus {
 box-shadow: var(--md-box_shadow_level3);
 outline:none;
 /* outline:
  var(--md-sys-color-secondary) var(--md-sys-state-focus-indicator-thickness);
 outline-offset: var(--md-sys-state-focus-indicator-outer-offset); */
}

.md-fab-primary:focus::after {
 background-color: var(--md-sys-color-on-primary-container);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-fab-primary:focus span {
 color: var(--md-sys-color-on-primary-container);
}

.md-fab-primary:active {
 box-shadow: var(--md-box_shadow_level3);
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
}

.md-fab-primary:active::after {
 background-color: var(--md-sys-color-on-primary-container);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-fab-primary:active span {
 color: var(--md-sys-color-on-primary-container);
}

G. css / md-filled-text-field.css

.md-filled-text-field {
 position: relative;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 padding-top: calc(0.5rem + var(--md-sys-typescale-body-small-line-height));
 border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
 border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
 overflow: hidden;
}

/* container */
.md-filled-text-field::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-surface-container-highest);
}

/* state layer */
.md-filled-text-field::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-filled-text-field span,
.md-filled-text-field label {
 position: absolute;
 top: 0.5rem;
 left: 1rem;
 right: 1rem;
 display: block;
 transform: translateY(1rem);
 transition-property: transform;
 transition-duration: var(--md-sys-motion-duration-300);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 color: var(--md-sys-color-on-surface-variant);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}

.md-filled-text-field :not(:placeholder-shown)+span,
.md-filled-text-field :not(:placeholder-shown)+label,
.md-filled-text-field .populated+span,
.md-filled-text-field .populated+label,
.md-filled-text-field:focus-within span,
.md-filled-text-field:focus-within label,
.md-filled-text-field.float span,
.md-filled-text-field.float label {
 transform: translateY(0);
 font-family: var(--md-sys-typescale-body-small-font);
 font-weight: var(--md-sys-typescale-body-small-weight);
 font-size: var(--md-sys-typescale-body-small-size);
 font-style: var(--md-sys-typescale-body-small-font-style);
 letter-spacing: var(--md-sys-typescale-body-small-tracking);
 line-height: var(--md-sys-typescale-body-small-line-height);
 text-transform: var(--md-sys-typescale-body-small-text-transform);
 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}

.md-filled-text-field :not(label, span, small) {
 position: relative;
 caret-color: var(--md-sys-color-primary);
 min-height: 2rem;
 box-sizing: border-box;
 padding-left: 1rem;
 padding-bottom: 0.5rem;
 padding-right: 1rem;
 border: none;
 resize: none;
 color: var(--md-sys-color-on-surface);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 background-color: transparent;
 outline: none;
 border-bottom-width: 0.0625rem;
 border-bottom-style: solid;
 border-bottom-color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field ::placeholder {
 color: transparent;
}

.md-filled-text-field small {
 display: block;
 color: var(--md-sys-color-on-surface-variant);
 background-color: var(--md-sys-color-background);
 font-family: var(--md-sys-typescale-body-small-font);
 font-weight: var(--md-sys-typescale-body-small-weight);
 font-size: var(--md-sys-typescale-body-small-size);
 font-style: var(--md-sys-typescale-body-small-font-style);
 letter-spacing: var(--md-sys-typescale-body-small-tracking);
 line-height: var(--md-sys-typescale-body-small-line-height);
 text-transform: var(--md-sys-typescale-body-small-text-transform);
 text-decoration: var(--md-sys-typescale-body-small-text-decoration);
 padding: 0.25rem 1rem 0 1rem;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.md-filled-text-field:hover span,
.md-filled-text-field:hover label {
 color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field:hover :not(label, span, small) {
 padding-bottom: 0.5rem;
 border-bottom-width: 0.0625rem;
 border-bottom-color: var(--md-sys-color-on-surface);
}

.md-filled-text-field:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-filled-text-field:hover small {
 color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field:focus-within span,
.md-filled-text-field:focus-within label {
 color: var(--md-sys-color-primary);
}

.md-filled-text-field :focus {
 color: var(--md-sys-color-on-surface);
 outline: none;
 padding-bottom: 0.4375rem;
 border-bottom-width: 0.125rem;
 border-bottom-color: var(--md-sys-color-primary);
}

.md-filled-text-field:hover :focus {
 padding-bottom: 0.4375rem;
 border-bottom-width: 0.125rem;
}

.md-filled-text-field:focus-within small {
 color: var(--md-sys-color-on-surface-variant);
}

.md-filled-text-field :invalid {
 color: var(--md-sys-color-on-surface);
 border-bottom-color: var(--md-sys-color-error);
}

.md-filled-text-field :invalid+span,
.md-filled-text-field :invalid+label {
 color: var(--md-sys-color-error);
}

.md-filled-text-field :invalid~small,
.md-filled-text-field:hover :invalid~small,
.md-filled-text-field:focus-within .input-text:invalid~small {
 color: var(--md-sys-color-error);
}

.md-filled-text-field :invalid:focus {
 caret-color: var(--md-sys-color-error);
 border-bottom-color: var(--md-sys-color-error);
}

.md-filled-text-field:hover :invalid {
 color: var(--md-sys-color-on-surface);
 border-bottom-color: var(--md-sys-color-error);
}

H. css / md-headline.css

.md-headline {
 box-sizing: border-box;
 margin: 0;
 color: var(--md-sys-color-on-surface);
 background-color: var(--md-sys-color-surface);
 transition-property: color;
 transition-duration: var(--md-sys-motion-duration-1000);
 transition-timing-function: ease-in;
}

.md-headline.scroll-adicional {
 color: var(--md-sys-color-surface-container-low);
 background-color: var(--md-sys-color-surface-container-low);
}

.md-headline.scroll {
 color: var(--md-sys-color-surface);
}

.md-headline.headline-small {
 padding: 0 1rem 1.5rem 1rem;
}

.md-headline.headline-medium {
 padding: 0 1rem 1.75rem 1rem;
}

md-app-bar.centered~.md-headline {
 text-align: center;
}

md-app-bar[headline] h1 {
 opacity: 0;
 transition-property: opacity;
 transition-duration: var(--md-sys-motion-duration-1000);
}

md-app-bar[headline].scroll h1 {
 opacity: 1;
 transition-timing-function: ease-in;
}

I. css / md-list.css

.md-list {
 margin: 0.5rem 0;
 padding: 0;
 list-style-type: none;
}

.md-list .md-one-line,
.md-list .md-two-line,
.md-list .md-three-line {
 position: relative;
 display: flex;
 box-sizing: border-box;
}

/* container */
.md-list .md-one-line::before,
.md-list .md-two-line::before,
.md-list .md-three-line::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-surface);
}

/* state layer */
.md-list .md-one-line::after,
.md-list .md-two-line::after,
.md-list .md-three-line::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-list .md-one-line {
 align-items: center;
 gap: 1rem;
 min-height: 3.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-one-line.video,
.md-list .md-two-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-two-line,
.md-list .md-three-line {
 flex-flow: column;
}

.md-list .md-two-line {
 justify-content: center;
 min-height: 4.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video,
.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 display: grid;
 column-gap: 1rem;
 row-gap: 0;
 grid-template-areas:
  "img headline"
  "img supporting";
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video {
 align-content: center;
 grid-template-rows: 1fr 1fr;
}

.md-list .md-two-line.icon,
.md-list .md-three-line.icon {
 grid-template-columns: var(--iconSize) 1fr;
}

.md-list .md-two-line.avatar,
.md-list .md-three-line.avatar {
 grid-template-columns: var(--avatarSize) 1fr;
}

.md-list .md-two-line.image,
.md-list .md-three-line.image {
 grid-template-columns: var(--imageSize) 1fr;
}

.md-list .md-two-line.video,
.md-list .md-three-line.video {
 grid-template-columns: var(--videoWidth) 1fr;
}

.md-list .md-three-line {
 align-content: flex-start;
 min-height: 5.5rem;
 padding: 0.75rem 1.5rem 0.75rem 1rem;
}

.md-list .md-three-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 align-content: start;
 grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr;
}

/* state layer */
.md-list .md-one-line:hover::after,
.md-list .md-two-line:hover::after,
.md-list .md-three-line:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

/* state layer */
.md-list a.md-one-line:focus::after,
.md-list a.md-two-line:focus::after,
.md-list a.md-three-line:focus::after,
.md-list a.md-one-line:focus-visible::after,
.md-list a.md-two-line:focus-visible::after,
.md-list a.md-three-line:focus-visible::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-list a:focus,
.md-list a:focus-visible {
 outline: none;
}

.md-list a:active {
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-list a.md-one-line:active::after,
.md-list a.md-two-line:active::after,
.md-list a.md-three-line:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-list a.md-two-line,
.md-list a.md-three-line {
 text-decoration: none;
}

.md-list a.md-two-line .headline,
.md-list a.md-three-line .headline {
 text-decoration: underline;
}

.md-list .headline {
 grid-area: headline;
 display: block;
 box-sizing: border-box;
 color: var(--md-sys-color-on-surface);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 max-height: var(--md-sys-typescale-body-large-line-height);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.md-list .md-two-line.icon .headline,
.md-list .md-two-line.avatar .headline,
.md-list .md-two-line.image .headline,
.md-list .md-two-line.video .headline,
.md-list .md-three-line.icon .headline,
.md-list .md-three-line.avatar .headline,
.md-list .md-three-line.image .headline,
.md-list .md-three-line.video .headline {
 align-self: end;
}

.md-list .supporting {
 grid-area: supporting;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 box-sizing: border-box;
 align-self: start;
 font-family: var(--md-sys-typescale-body-medium-font);
 font-weight: var(--md-sys-typescale-body-medium-weight);
 font-size: var(--md-sys-typescale-body-medium-size);
 font-style: var(--md-sys-typescale-body-medium-font-style);
 letter-spacing: var(--md-sys-typescale-body-medium-tracking);
 line-height: var(--md-sys-typescale-body-medium-line-height);
 text-transform: var(--md-sys-typescale-body-medium-text-transform);
 text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}

.md-list .md-two-line .supporting {
 max-height: var(--md-sys-typescale-body-medium-line-height);
 line-clamp: 1;
 -webkit-line-clamp: 1;
}

.md-list .md-three-line .supporting {
 max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height));
 line-clamp: 2;
 -webkit-line-clamp: 2;
}

.md-list .avatar img,
.md-list .avatar label,
.md-list .avatar .material-symbols-outlined:first-child {
 flex-shrink: 0;
 background-color: var(--md-sys-color-primary-container);
 color: var(--md-sys-color-on-primary-container);
 border-radius: 50%;
 width: var(--avatarSize);
 height: var(--avatarSize);
}

.md-list .avatar label {
 display: inline-block;
 font-family: var(--md-sys-typescale-title-medium-font);
 font-weight: var(--md-sys-typescale-title-medium-weight);
 font-size: var(--md-sys-typescale-title-medium-size);
 font-style: var(--md-sys-typescale-title-medium-font-style);
 letter-spacing: var(--md-sys-typescale-title-medium-tracking);
 line-height: var(--md-sys-typescale-title-medium-line-height);
 text-transform: var(--md-sys-typescale-title-medium-text-transform);
 text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
 overflow: hidden;
}

.md-list .avatar .material-symbols-outlined:first-child {
 font-size: var(--avatarSize);
}

.md-list .avatar.md-two-line img,
.md-list .avatar.md-two-line label,
.md-list .avatar.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .avatar.md-three-line img,
.md-list .avatar.md-three-line label,
.md-list .avatar.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .icon img,
.md-list .icon .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--iconSize);
 height: var(--iconSize);
}

.md-list .icon .material-symbols-outlined:first-child {
 font-size: var(--iconSize);
}

.md-list .icon.md-two-line img,
.md-list .icon.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .icon.md-three-line img,
.md-list .icon.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .video img {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--videoWidth);
 height: var(--videoHeight);
}

.md-list .video.md-two-line img {
 grid-area: img;
 align-self: center;
}

.md-list .video.md-three-line img {
 grid-area: img;
 align-self: start;
}

.md-list .image img,
.md-list .image .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--imageSize);
 height: var(--imageSize);
}

.md-list .image .material-symbols-outlined:first-child {
 font-size: var(--imageSize);
}

.md-list .image.md-two-line img,
.md-list .image.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .image.md-three-line img,
.md-list .image.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

J. css / md-standard-icon-button.css

.md-standard-icon-button {
 position: relative;
 display: inline-block;
 border: none;
 padding: 0.25rem;
 background-color: transparent;
 text-decoration: none;
 border-radius: 50%;
 overflow: hidden;
}

.md-standard-icon-button[hidden] {
 display: none;
}

/* state layer */
.md-standard-icon-button::after {
 content: "";
 position: absolute;
 top: 0.25rem;
 right: 0.25rem;
 left: 0.25rem;
 bottom: 0.25rem;
 border-radius: 50%;
}

.md-standard-icon-button span {
 position: relative;
 padding: 0.5rem;
 color: var(--md-sys-color-on-surface-variant);
 font-size: 1.5rem;
 width: 1.5rem;
 height: 1.5rem;
}

.md-standard-icon-button.avatar span {
 padding: 0.3125rem;
 font-size: 1.875rem;
 width: 1.875rem;
 height: 1.875rem;
}

.md-standard-icon-button:hover::after {
 background-color: var(--md-sys-color-on-surface-variant);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-standard-icon-button:hover span {
 color: var(--md-sys-color-on-surface-variant);
}

.md-standard-icon-button:focus {
 outline: none;
}

.md-standard-icon-button:focus::after {
 background-color: var(--md-sys-color-on-surface-variant);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-standard-icon-button:focus span {
 color: var(--md-sys-color-on-surface-variant);
}

.md-standard-icon-button:active {
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
}

.md-standard-icon-button:active::after {
 background-color: var(--md-sys-color-on-surface-variant);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-standard-icon-button:active span {
 -color: var(--md-sys-color-on-surface-variant);
}

.md-standard-icon-button:disabled::after {
 background-color: transparent !important;
 opacity: 1;
}

.md-standard-icon-button:disabled span {
 color: var(--md-sys-color-on-surface) !important;
 opacity: 0.38;
}

.md-standard-icon-button:disabled:active {
 background-image: none;
 animation-name: none;
 animation-duration: unset;
}

K. css / md-tab.css

.md-tab {
 display: flex;
 background-color: transparent;
 align-items: stretch;
 flex-wrap: nowrap;
 overflow-x: auto;
 position: sticky;
 z-index: 1;
}

.md-tab.fixed {
 justify-content: center;
}

.md-tab.scrollable {
 padding-left: 2rem;
 gap: 1rem;
}

.md-tab.scroll {
 background-color: var(--md-sys-color-surface-container-low);
}

.md-tab a {
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: start;
 align-items: center;
 color: var(--md-sys-color-on-surface-variant);
 font-family: var(--md-sys-typescale-title-small-font);
 font-weight: var(--md-sys-typescale-title-small-weight);
 font-size: var(--md-sys-typescale-title-small-size);
 font-style: var(--md-sys-typescale-title-small-font-style);
 letter-spacing: var(--md-sys-typescale-title-small-tracking);
 line-height: var(--md-sys-typescale-title-small-line-height);
 text-transform: var(--md-sys-typescale-title-small-text-transform);
 text-decoration: var(--md-sys-typescale-title-small-text-decoration);
 text-align: center;
 box-sizing: border-box;
 border-bottom: 0.1875rem solid var(--md-sys-color-surface);
}

.md-tab.fixed a {
 flex: 0 0 var(--tabWidth);
}

.md-tab.scrollable a {
 flex: 0 0 auto;
}

.md-tab a.active {
 border-bottom-color: var(--md-sys-color-primary);
}

/* state layer */
.md-tab a::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-tab span {
 font-size: var(--iconSize);
 height: var(--iconSize);
 width: var(--iconSize);
 color: var(--md-sys-color-on-surface-variant);
}

.md-tab .active span {
 color: var(--md-sys-color-primary);
}

.md-tab a:hover {
 color: var(--md-sys-color-on-surface);
}

/* state layer */
.md-tab a:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a.active:hover {
 color: var(--md-sys-color-primary);
}

/* state layer */
.md-tab a.active:hover::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a:hover span {
 color: var(--md-sys-color-on-surface);
}

.md-tab a.active:hover span {
 color: var(--md-sys-color-primary);
}

.md-tab a:focus {
 outline: none;
}

/* state layer */
.md-tab a:focus::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

/* state layer */
.md-tab a.active:focus::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

.md-tab a:active {
 background-position: center;
 background-image:
   radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
}

/* state layer */
.md-tab a:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

/* state layer */
.md-tab a.active:active::after {
 background-color: var(--md-sys-color-primary);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

L. css / motion.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Emphasized decelerate easing (out) */
  --md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
  --md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
  --md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
  --md-sys-motion-easing-emphasized-decelerate-y1: 1;
  /* Emphasized accelerate easing (in) */
  --md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
  --md-sys-motion-easing-emphasized-accelerate-y0: 0;
  --md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
  --md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
  /* Standard decelerate easing (out) */
  --md-sys-motion-easing-standard-decelerate-x0: 0;
  --md-sys-motion-easing-standard-decelerate-y0: 0;
  --md-sys-motion-easing-standard-decelerate-x1: 0;
  --md-sys-motion-easing-standard-decelerate-y1: 1;
  /* Standard accelerate easing (in) */
  --md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
  --md-sys-motion-easing-standard-accelerate-y0: 0;
  --md-sys-motion-easing-standard-accelerate-x1: 1;
  --md-sys-motion-easing-standard-accelerate-y1: 1;
  /* Duration 1000ms */
  --md-sys-motion-duration-1000: 1000ms;
  /* Duration 900ms */
  --md-sys-motion-duration-900: 900ms;
  /* Duration 800ms */
  --md-sys-motion-duration-800: 800ms;
  /* Duration 700ms */
  --md-sys-motion-duration-700: 700ms;
  /* Duration 600ms */
  --md-sys-motion-duration-600: 600ms;
  /* Duration 550ms */
  --md-sys-motion-duration-550: 550ms;
  /* Duration 500ms */
  --md-sys-motion-duration-500: 500ms;
  /* Duration 450ms */
  --md-sys-motion-duration-450: 450ms;
  /* Duration 400ms */
  --md-sys-motion-duration-400: 400ms;
  /* Duration 350ms */
  --md-sys-motion-duration-350: 350ms;
  /* Duration 300ms */
  --md-sys-motion-duration-300: 300ms;
  /* Duration 250ms */
  --md-sys-motion-duration-250: 250ms;
  /* Duration 200ms */
  --md-sys-motion-duration-200: 200ms;
  /* Duration 150ms */
  --md-sys-motion-duration-150: 150ms;
  /* Duration 100ms */
  --md-sys-motion-duration-100: 100ms;
  /* Duration 50ms */
  --md-sys-motion-duration-50: 50ms;
  /* Standard easing (in and out) */
  --md-sys-motion-easing-standard-x0: 0.20000000298023224;
  --md-sys-motion-easing-standard-y0: 0;
  --md-sys-motion-easing-standard-x1: 0;
  --md-sys-motion-easing-standard-y1: 1;
  /* Linear easing */
  --md-sys-motion-easing-linear-x0: 0;
  --md-sys-motion-easing-linear-y0: 0;
  --md-sys-motion-easing-linear-x1: 1;
  --md-sys-motion-easing-linear-y1: 1;
  /* Emphasized */
  --md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
  --md-sys-motion-easing-emphasized-y0: 0;
  --md-sys-motion-easing-emphasized-x1: 0;
  --md-sys-motion-easing-emphasized-y1: 1;
  /* Motion path */
  --md-sys-motion-path-standard-path: 1;
}
.duration-50 {
  transition-duration: var(--md-sys-motion-duration-50);
}
.duration-100 {
  transition-duration: var(--md-sys-motion-duration-100);
}
.duration-150 {
  transition-duration: var(--md-sys-motion-duration-150);
}
.duration-200 {
  transition-duration: var(--md-sys-motion-duration-200);
}
.duration-250 {
  transition-duration: var(--md-sys-motion-duration-250);
}
.duration-300 {
  transition-duration: var(--md-sys-motion-duration-300);
}
.duration-350 {
  transition-duration: var(--md-sys-motion-duration-350);
}
.duration-400 {
  transition-duration: var(--md-sys-motion-duration-400);
}
.duration-450 {
  transition-duration: var(--md-sys-motion-duration-450);
}
.duration-500 {
  transition-duration: var(--md-sys-motion-duration-500);
}
.duration-550 {
  transition-duration: var(--md-sys-motion-duration-550);
}
.duration-600 {
  transition-duration: var(--md-sys-motion-duration-600);
}
.duration-700 {
  transition-duration: var(--md-sys-motion-duration-700);
}
.duration-800 {
  transition-duration: var(--md-sys-motion-duration-800);
}
.duration-900 {
  transition-duration: var(--md-sys-motion-duration-900);
}
.duration-1000 {
  transition-duration: var(--md-sys-motion-duration-1000);
}
.easing-standard {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-x0),
    var(--md-sys-motion-easing-standard-y0),
    var(--md-sys-motion-easing-standard-x1),
    var(--md-sys-motion-easing-standard-y1)
  );
}
.easing-linear {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-linear-x0),
    var(--md-sys-motion-easing-linear-y0),
    var(--md-sys-motion-easing-linear-x1),
    var(--md-sys-motion-easing-linear-y1)
  );
}
.easing-standard-accelerate {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-accelerate-x0),
    var(--md-sys-motion-easing-standard-accelerate-y0),
    var(--md-sys-motion-easing-standard-accelerate-x1),
    var(--md-sys-motion-easing-standard-accelerate-y1)
  );
}
.easing-standard-decelerate {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-standard-decelerate-x0),
    var(--md-sys-motion-easing-standard-decelerate-y0),
    var(--md-sys-motion-easing-standard-decelerate-x1),
    var(--md-sys-motion-easing-standard-decelerate-y1)
  );
}
.easing-emphasized {
  transition-timing-function: cubic-bezier(
    var(--md-sys-motion-easing-emphasized-x0),
    var(--md-sys-motion-easing-emphasized-y0),
    var(--md-sys-motion-easing-emphasized-x1),
    var(--md-sys-motion-easing-emphasized-y1)
  );
}


M. css / palette.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Error 0 */
  --md-ref-palette-error0: #000000ff;
  /* Error 10 */
  --md-ref-palette-error10: #410e0bff;
  /* Error 20 */
  --md-ref-palette-error20: #601410ff;
  /* Error 30 */
  --md-ref-palette-error30: #8c1d18ff;
  /* Error 40 */
  --md-ref-palette-error40: #b3261eff;
  /* Error 50 */
  --md-ref-palette-error50: #dc362eff;
  /* Error 60 */
  --md-ref-palette-error60: #e46962ff;
  /* Error 70 */
  --md-ref-palette-error70: #ec928eff;
  /* Error 80 */
  --md-ref-palette-error80: #f2b8b5ff;
  /* Error 90 */
  --md-ref-palette-error90: #f9dedcff;
  /* Error 95 */
  --md-ref-palette-error95: #fceeeeff;
  /* Error 99 */
  --md-ref-palette-error99: #fffbf9ff;
  /* Error 100 */
  --md-ref-palette-error100: #ffffffff;
  /* Tertiary 0 */
  --md-ref-palette-tertiary0: #000000ff;
  /* Tertiary 10 */
  --md-ref-palette-tertiary10: #31111dff;
  /* Tertiary 20 */
  --md-ref-palette-tertiary20: #492532ff;
  /* Tertiary 30 */
  --md-ref-palette-tertiary30: #633b48ff;
  /* Tertiary 40 */
  --md-ref-palette-tertiary40: #7d5260ff;
  /* Tertiary 50 */
  --md-ref-palette-tertiary50: #986977ff;
  /* Tertiary 60 */
  --md-ref-palette-tertiary60: #b58392ff;
  /* Tertiary 70 */
  --md-ref-palette-tertiary70: #d29dacff;
  /* Tertiary 80 */
  --md-ref-palette-tertiary80: #efb8c8ff;
  /* Tertiary 90 */
  --md-ref-palette-tertiary90: #ffd8e4ff;
  /* Tertiary 95 */
  --md-ref-palette-tertiary95: #ffecf1ff;
  /* Tertiary 99 */
  --md-ref-palette-tertiary99: #fffbfaff;
  /* Tertiary 100 */
  --md-ref-palette-tertiary100: #ffffffff;
  /* Secondary 0 */
  --md-ref-palette-secondary0: #000000ff;
  /* Secondary 10 */
  --md-ref-palette-secondary10: #1d192bff;
  /* Secondary 20 */
  --md-ref-palette-secondary20: #332d41ff;
  /* Secondary 30 */
  --md-ref-palette-secondary30: #4a4458ff;
  /* Secondary 40 */
  --md-ref-palette-secondary40: #625b71ff;
  /* Secondary 50 */
  --md-ref-palette-secondary50: #7a7289ff;
  /* Secondary 60 */
  --md-ref-palette-secondary60: #958da5ff;
  /* Secondary 70 */
  --md-ref-palette-secondary70: #b0a7c0ff;
  /* Secondary 80 */
  --md-ref-palette-secondary80: #ccc2dcff;
  /* Secondary 90 */
  --md-ref-palette-secondary90: #e8def8ff;
  /* Secondary 95 */
  --md-ref-palette-secondary95: #f6edffff;
  /* Secondary 99 */
  --md-ref-palette-secondary99: #fffbfeff;
  /* Secondary 100 */
  --md-ref-palette-secondary100: #ffffffff;
  /* Primary 0 */
  --md-ref-palette-primary0: #000000ff;
  /* Primary 10 */
  --md-ref-palette-primary10: #21005dff;
  /* Primary 20 */
  --md-ref-palette-primary20: #381e72ff;
  /* Primary 30 */
  --md-ref-palette-primary30: #4f378bff;
  /* Primary 40 */
  --md-ref-palette-primary40: #6750a4ff;
  /* Primary 50 */
  --md-ref-palette-primary50: #7f67beff;
  /* Primary 60 */
  --md-ref-palette-primary60: #9a82dbff;
  /* Primary 70 */
  --md-ref-palette-primary70: #b69df8ff;
  /* Primary 80 */
  --md-ref-palette-primary80: #d0bcffff;
  /* Primary 90 */
  --md-ref-palette-primary90: #eaddffff;
  /* Primary 95 */
  --md-ref-palette-primary95: #f6edffff;
  /* Primary 99 */
  --md-ref-palette-primary99: #fffbfeff;
  /* Primary 100 */
  --md-ref-palette-primary100: #ffffffff;
  /* Neutral Variant 0 */
  --md-ref-palette-neutral-variant0: #000000ff;
  /* Neutral Variant 10 */
  --md-ref-palette-neutral-variant10: #1d1a22ff;
  /* Neutral Variant 20 */
  --md-ref-palette-neutral-variant20: #322f37ff;
  /* Neutral Variant 30 */
  --md-ref-palette-neutral-variant30: #49454fff;
  /* Neutral Variant 40 */
  --md-ref-palette-neutral-variant40: #605d66ff;
  /* Neutral Variant 50 */
  --md-ref-palette-neutral-variant50: #79747eff;
  /* Neutral Variant 60 */
  --md-ref-palette-neutral-variant60: #938f99ff;
  /* Neutral Variant 70 */
  --md-ref-palette-neutral-variant70: #aea9b4ff;
  /* Neutral Variant 80 */
  --md-ref-palette-neutral-variant80: #cac4d0ff;
  /* Neutral Variant 90 */
  --md-ref-palette-neutral-variant90: #e7e0ecff;
  /* Neutral Variant 95 */
  --md-ref-palette-neutral-variant95: #f5eefaff;
  /* Neutral Variant 99 */
  --md-ref-palette-neutral-variant99: #fffbfeff;
  /* Neutral Variant 100 */
  --md-ref-palette-neutral-variant100: #ffffffff;
  /* Neutral 0 */
  --md-ref-palette-neutral0: #000000ff;
  /* Neutral 10 */
  --md-ref-palette-neutral10: #1c1b1fff;
  /* Neutral 20 */
  --md-ref-palette-neutral20: #313033ff;
  /* Neutral 30 */
  --md-ref-palette-neutral30: #484649ff;
  /* Neutral 40 */
  --md-ref-palette-neutral40: #605d62ff;
  /* Neutral 50 */
  --md-ref-palette-neutral50: #787579ff;
  /* Neutral 60 */
  --md-ref-palette-neutral60: #939094ff;
  /* Neutral 70 */
  --md-ref-palette-neutral70: #aeaaaeff;
  /* Neutral 80 */
  --md-ref-palette-neutral80: #c9c5caff;
  /* Neutral 90 */
  --md-ref-palette-neutral90: #e6e1e5ff;
  /* Neutral 95 */
  --md-ref-palette-neutral95: #f4eff4ff;
  /* Neutral 99 */
  --md-ref-palette-neutral99: #fffbfeff;
  /* Neutral 100 */
  --md-ref-palette-neutral100: #ffffffff;
  /* Black */
  --md-ref-palette-black: #000000ff;
  /* White */
  --md-ref-palette-white: #ffffffff;
}


N. css / roboto.css

/* roboto-regular - latin */
@font-face {
 /* Revisa
  * https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
  * para otras opciones. */
 font-display: swap;
 font-family: 'Roboto';
 font-style: normal;
 font-weight: 400;
 /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2');
}

O. css / shape.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Fully rounded */
  --md-sys-shape-corner-full-family: 3px;
  /* Extra large top rounding */
  --md-sys-shape-corner-extra-large-top-family: 1px;
  --md-sys-shape-corner-extra-large-top-default-size: 0px;
  --md-sys-shape-corner-extra-large-top-top-left: 28px;
  --md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
  --md-sys-shape-corner-extra-large-top-top-right: 28px;
  /* Extra large rounding */
  --md-sys-shape-corner-extra-large-family: 1px;
  --md-sys-shape-corner-extra-large-default-size-unit: 1px;
  --md-sys-shape-corner-extra-large-default-size: 28px;
  /* Large top rounding */
  --md-sys-shape-corner-large-top-family: 1px;
  --md-sys-shape-corner-large-top-default-size-unit: 1px;
  --md-sys-shape-corner-large-top-default-size: 0px;
  --md-sys-shape-corner-large-top-top-left-unit: 1px;
  --md-sys-shape-corner-large-top-top-left: 16px;
  --md-sys-shape-corner-large-top-top-right-unit: 1px;
  --md-sys-shape-corner-large-top-top-right: 16px;
  /* Large end rounding */
  --md-sys-shape-corner-large-end-family: 1px;
  --md-sys-shape-corner-large-end-default-size-unit: 1px;
  --md-sys-shape-corner-large-end-default-size: 0px;
  --md-sys-shape-corner-large-end-top-right-unit: 1px;
  --md-sys-shape-corner-large-end-top-right: 16px;
  --md-sys-shape-corner-large-end-bottom-right-unit: 1px;
  --md-sys-shape-corner-large-end-bottom-right: 16px;
  /* Large rounding */
  --md-sys-shape-corner-large-family: 1px;
  --md-sys-shape-corner-large-default-size-unit: 1px;
  --md-sys-shape-corner-large-default-size: 16px;
  /* Medium rounding */
  --md-sys-shape-corner-medium-family: 1px;
  --md-sys-shape-corner-medium-default-size-unit: 1px;
  --md-sys-shape-corner-medium-default-size: 12px;
  /* Small rounding */
  --md-sys-shape-corner-small-family: 1px;
  --md-sys-shape-corner-small-default-size-unit: 1px;
  --md-sys-shape-corner-small-default-size: 8px;
  /* Extra small top rounding */
  --md-sys-shape-corner-extra-small-top-family: 1px;
  --md-sys-shape-corner-extra-small-top-default-size-unit: 1px;
  --md-sys-shape-corner-extra-small-top-default-size: 0px;
  --md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
  --md-sys-shape-corner-extra-small-top-top-left: 4px;
  --md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
  --md-sys-shape-corner-extra-small-top-top-right: 4px;
  /* Extra small rounding */
  --md-sys-shape-corner-extra-small-family: 1px;
  --md-sys-shape-corner-extra-small-default-size-unit: 1px;
  --md-sys-shape-corner-extra-small-default-size: 4px;
  /* No rounding */
  --md-sys-shape-corner-none-family: 1px;
  --md-sys-shape-corner-none-default-size-unit: 1px;
  --md-sys-shape-corner-none-default-size: 0px;

  --md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);
  --md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);
  --md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);
}

.shape-none {
  border-radius: var(--md-sys-shape-corner-none-default-size);
}
.shape-extra-small {
  border-radius: var(--md-sys-shape-corner-extra-small-default-size);
}
.shape-small {
  border-radius: var(--md-sys-shape-corner-small-default-size);
}
.shape-medium {
  border-radius: var(--md-sys-shape-corner-medium-default-size);
}
.shape-large {
  border-radius: var(--md-sys-shape-corner-large-default-size);
}
.shape-extra-large {
  border-radius: var(--md-sys-shape-corner-extra-large-default-size);
}
.extra-small-top {
  border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
}
.large-end {
  border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right);
  border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right);
}
.large-top {
  border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right);
}
.extra-large-top {
  border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left);
  border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right);
}


P. css / state.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

:root {
  /* Dragged state layer opacity */
  --md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
  /* Pressed state layer opacity */
  --md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
  /* Focus state layer opacity */
  --md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
  /* Hover state layer opacity */
  --md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
}
.hover-state-layer {
  opacity: var(--md-sys-state-hover-state-layer-opacity);
}
.pressed-state-layer {
  opacity: var(--md-sys-state-pressed-state-layer-opacity);
}
.dragged-state-layer {
  opacity: var(--md-sys-state-dragged-state-layer-opacity);
}
.focus-state-layer {
  opacity: var(--md-sys-state-focus-state-layer-opacity);
}


Q. css / transicion_pestanas.css

@view-transition {
 navigation: auto;
}

md-app-bar h1 {
 view-transition-name: encabezado;
}

main {
 view-transition-name: contenido;
}

::view-transition-group(encabezado) {
 animation-duration: var(--md-sys-motion-duration-1000);
}

::view-transition-group(contenido) {
 animation-duration: var(--md-sys-motion-duration-1000);
}

html::view-transition-old(encabezado) {
 animation-name: salePorLaIzquierda;
}

html::view-transition-new(encabezado) {
 animation-name: entraPorLaDerecha;
}

html::view-transition-old(contenido) {
 animation-name: salePorLaIzquierda;
}

html::view-transition-new(contenido) {
 animation-duration: var(--md-sys-motion-duration-700);
 animation-name: entraPorLaDerecha;
}

R. css / typography.css

/*
 Copyright 2016 Google Inc. All rights reserved.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
*/

/* This file is generated */

/* DO NOT EDIT */

:root {
  /* Label Small */
  --md-sys-typescale-label-small-text-transform: unset;
  --md-sys-typescale-label-small-axis-value: unset;
  --md-sys-typescale-label-small-font-style: unset;
  --md-sys-typescale-label-small-text-decoration: unset;
  /* Label Small line height */
  --md-sys-typescale-label-small-line-height-value: 16px;
  --md-sys-typescale-label-small-line-height-unit: 2px;
  --md-sys-typescale-label-small-line-height: 16px;
  /* Label Small font tracking */
  --md-sys-typescale-label-small-tracking-value: 0.5px;
  --md-sys-typescale-label-small-tracking-unit: 2px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  /* Label Small font size */
  --md-sys-typescale-label-small-size-value: 11px;
  --md-sys-typescale-label-small-size-unit: 2px;
  --md-sys-typescale-label-small-size: 11px;
  /* Label Small font weight */
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
  /* Label Small font name */
  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  /* Label Medium */
  --md-sys-typescale-label-medium-axis-value: unset;
  --md-sys-typescale-label-medium-font-style: unset;
  --md-sys-typescale-label-medium-text-decoration: unset;
  /* Label Medium text transform */
  --md-sys-typescale-label-medium-text-transform: 1;
  /* Label Medium line height */
  --md-sys-typescale-label-medium-line-height-value: 16px;
  --md-sys-typescale-label-medium-line-height-unit: 2px;
  --md-sys-typescale-label-medium-line-height: 16px;
  /* Label Medium font tracking */
  --md-sys-typescale-label-medium-tracking-value: 0.5px;
  --md-sys-typescale-label-medium-tracking-unit: 2px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  /* Label Medium font size */
  --md-sys-typescale-label-medium-size-value: 12px;
  --md-sys-typescale-label-medium-size-unit: 2px;
  --md-sys-typescale-label-medium-size: 12px;
  /* Label Medium font weight */
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
  /* Label Medium font name */
  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  /* Label Large */
  --md-sys-typescale-label-large-text-transform: unset;
  --md-sys-typescale-label-large-axis-value: unset;
  --md-sys-typescale-label-large-font-style: unset;
  --md-sys-typescale-label-large-text-decoration: unset;
  /* Label Large line height */
  --md-sys-typescale-label-large-line-height-value: 20px;
  --md-sys-typescale-label-large-line-height-unit: 2px;
  --md-sys-typescale-label-large-line-height: 20px;
  /* Label Large font tracking */
  --md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
  --md-sys-typescale-label-large-tracking-unit: 2px;
  --md-sys-typescale-label-large-tracking: 0.10000000149011612px;
  /* Label Large font size */
  --md-sys-typescale-label-large-size-value: 14px;
  --md-sys-typescale-label-large-size-unit: 2px;
  --md-sys-typescale-label-large-size: 14px;
  /* Label Large font weight */
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
  /* Label Large font name */
  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  /* Body Small */
  --md-sys-typescale-body-small-text-transform: unset;
  --md-sys-typescale-body-small-axis-value: unset;
  --md-sys-typescale-body-small-font-style: unset;
  --md-sys-typescale-body-small-text-decoration: unset;
  /* Body Small line height */
  --md-sys-typescale-body-small-line-height-value: 16px;
  --md-sys-typescale-body-small-line-height-unit: 2px;
  --md-sys-typescale-body-small-line-height: 16px;
  /* Body Small font tracking */
  --md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
  --md-sys-typescale-body-small-tracking-unit: 2px;
  --md-sys-typescale-body-small-tracking: 0.4000000059604645px;
  /* Body Small font size */
  --md-sys-typescale-body-small-size-value: 12px;
  --md-sys-typescale-body-small-size-unit: 2px;
  --md-sys-typescale-body-small-size: 12px;
  /* Body Small font weight */
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  /* Body Small font name */
  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  /* Body Medium */
  --md-sys-typescale-body-medium-text-transform: unset;
  --md-sys-typescale-body-medium-axis-value: unset;
  --md-sys-typescale-body-medium-font-style: unset;
  --md-sys-typescale-body-medium-text-decoration: unset;
  /* Body Medium line height */
  --md-sys-typescale-body-medium-line-height-value: 20px;
  --md-sys-typescale-body-medium-line-height-unit: 2px;
  --md-sys-typescale-body-medium-line-height: 20px;
  /* Body Medium font tracking */
  --md-sys-typescale-body-medium-tracking-value: 0.25px;
  --md-sys-typescale-body-medium-tracking-unit: 2px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  /* Body Medium font size */
  --md-sys-typescale-body-medium-size-value: 14px;
  --md-sys-typescale-body-medium-size-unit: 2px;
  --md-sys-typescale-body-medium-size: 14px;
  /* Body Medium font weight */
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  /* Body Medium font name */
  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  /* Body Large */
  --md-sys-typescale-body-large-text-transform: unset;
  --md-sys-typescale-body-large-axis-value: unset;
  --md-sys-typescale-body-large-font-style: unset;
  --md-sys-typescale-body-large-text-decoration: unset;
  /* Body Large line height */
  --md-sys-typescale-body-large-line-height-value: 24px;
  --md-sys-typescale-body-large-line-height-unit: 2px;
  --md-sys-typescale-body-large-line-height: 24px;
  /* Body Large font tracking */
  --md-sys-typescale-body-large-tracking-value: 0.5px;
  --md-sys-typescale-body-large-tracking-unit: 2px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  /* Body Large font size */
  --md-sys-typescale-body-large-size-value: 16px;
  --md-sys-typescale-body-large-size-unit: 2px;
  --md-sys-typescale-body-large-size: 16px;
  /* Body Large font weight */
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  /* Body Large font name */
  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  /* Title Small */
  --md-sys-typescale-title-small-text-transform: unset;
  --md-sys-typescale-title-small-axis-value: unset;
  --md-sys-typescale-title-small-font-style: unset;
  --md-sys-typescale-title-small-text-decoration: unset;
  /* Title Small line height */
  --md-sys-typescale-title-small-line-height-value: 20px;
  --md-sys-typescale-title-small-line-height-unit: 2px;
  --md-sys-typescale-title-small-line-height: 20px;
  /* Title Small font tracking */
  --md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
  --md-sys-typescale-title-small-tracking-unit: 2px;
  --md-sys-typescale-title-small-tracking: 0.10000000149011612px;
  /* Title Small font size */
  --md-sys-typescale-title-small-size-value: 14px;
  --md-sys-typescale-title-small-size-unit: 2px;
  --md-sys-typescale-title-small-size: 14px;
  /* Title Small font weight */
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
  /* Title Small font name */
  --md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
  /* Title Medium */
  --md-sys-typescale-title-medium-text-transform: unset;
  --md-sys-typescale-title-medium-axis-value: unset;
  --md-sys-typescale-title-medium-font-style: unset;
  --md-sys-typescale-title-medium-text-decoration: unset;
  /* Title Medium line height */
  --md-sys-typescale-title-medium-line-height-value: 24px;
  --md-sys-typescale-title-medium-line-height-unit: 2px;
  --md-sys-typescale-title-medium-line-height: 24px;
  /* Title Medium font tracking */
  --md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
  --md-sys-typescale-title-medium-tracking-unit: 2px;
  --md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
  /* Title Medium font size */
  --md-sys-typescale-title-medium-size-value: 16px;
  --md-sys-typescale-title-medium-size-unit: 2px;
  --md-sys-typescale-title-medium-size: 16px;
  /* Title Medium font weight */
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
  /* Title Medium font name */
  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
  /* Title Large */
  --md-sys-typescale-title-large-text-transform: unset;
  --md-sys-typescale-title-large-axis-value: unset;
  --md-sys-typescale-title-large-font-style: unset;
  --md-sys-typescale-title-large-text-decoration: unset;
  /* Title Large line height */
  --md-sys-typescale-title-large-line-height-value: 28px;
  --md-sys-typescale-title-large-line-height-unit: 2px;
  --md-sys-typescale-title-large-line-height: 28px;
  /* Title Large font tracking */
  --md-sys-typescale-title-large-tracking-value: 0px;
  --md-sys-typescale-title-large-tracking-unit: 2px;
  --md-sys-typescale-title-large-tracking: 0px;
  /* Title Large font size */
  --md-sys-typescale-title-large-size-value: 22px;
  --md-sys-typescale-title-large-size-unit: 2px;
  --md-sys-typescale-title-large-size: 22px;
  /* Title Large font weight */
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
  /* Title Large font name */
  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  /* Headline Small */
  --md-sys-typescale-headline-small-text-transform: unset;
  --md-sys-typescale-headline-small-axis-value: unset;
  --md-sys-typescale-headline-small-font-style: unset;
  --md-sys-typescale-headline-small-text-decoration: unset;
  /* Headline Small line height */
  --md-sys-typescale-headline-small-line-height-value: 32px;
  --md-sys-typescale-headline-small-line-height-unit: 2px;
  --md-sys-typescale-headline-small-line-height: 32px;
  /* Headline Small font tracking */
  --md-sys-typescale-headline-small-tracking-value: 0px;
  --md-sys-typescale-headline-small-tracking-unit: 2px;
  --md-sys-typescale-headline-small-tracking: 0px;
  /* Headline Small font size */
  --md-sys-typescale-headline-small-size-value: 24px;
  --md-sys-typescale-headline-small-size-unit: 2px;
  --md-sys-typescale-headline-small-size: 24px;
  /* Headline Small font weight */
  --md-sys-typescale-headline-small-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Headline Small font name */
  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  /* Headline Medium */
  --md-sys-typescale-headline-medium-text-transform: unset;
  --md-sys-typescale-headline-medium-axis-value: unset;
  --md-sys-typescale-headline-medium-font-style: unset;
  --md-sys-typescale-headline-medium-text-decoration: unset;
  /* Headline Medium line height */
  --md-sys-typescale-headline-medium-line-height-value: 36px;
  --md-sys-typescale-headline-medium-line-height-unit: 2px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  /* Headline Medium font tracking */
  --md-sys-typescale-headline-medium-tracking-value: 0px;
  --md-sys-typescale-headline-medium-tracking-unit: 2px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  /* Headline Medium font size */
  --md-sys-typescale-headline-medium-size-value: 28px;
  --md-sys-typescale-headline-medium-size-unit: 2px;
  --md-sys-typescale-headline-medium-size: 28px;
  /* Headline Medium font weight */
  --md-sys-typescale-headline-medium-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Headline Medium font name */
  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  /* Headline Large */
  --md-sys-typescale-headline-large-text-transform: unset;
  --md-sys-typescale-headline-large-axis-value: unset;
  --md-sys-typescale-headline-large-font-style: unset;
  --md-sys-typescale-headline-large-text-decoration: unset;
  /* Headline Large line height */
  --md-sys-typescale-headline-large-line-height-value: 40px;
  --md-sys-typescale-headline-large-line-height-unit: 2px;
  --md-sys-typescale-headline-large-line-height: 40px;
  /* Headline Large font tracking */
  --md-sys-typescale-headline-large-tracking-value: 0px;
  --md-sys-typescale-headline-large-tracking-unit: 2px;
  --md-sys-typescale-headline-large-tracking: 0px;
  /* Headline Large font size */
  --md-sys-typescale-headline-large-size-value: 32px;
  --md-sys-typescale-headline-large-size-unit: 2px;
  --md-sys-typescale-headline-large-size: 32px;
  /* Headline Large font name */
  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  /* Headline Large font weight */
  --md-sys-typescale-headline-large-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Small */
  --md-sys-typescale-display-small-text-transform: unset;
  --md-sys-typescale-display-small-axis-value: unset;
  --md-sys-typescale-display-small-font-style: unset;
  --md-sys-typescale-display-small-text-decoration: unset;
  /* Display Small line height */
  --md-sys-typescale-display-small-line-height-value: 44px;
  --md-sys-typescale-display-small-line-height-unit: 2px;
  --md-sys-typescale-display-small-line-height: 44px;
  /* Display Small font tracking */
  --md-sys-typescale-display-small-tracking-value: 0px;
  --md-sys-typescale-display-small-tracking-unit: 2px;
  --md-sys-typescale-display-small-tracking: 0px;
  /* Display Small font size */
  --md-sys-typescale-display-small-size-value: 36px;
  --md-sys-typescale-display-small-size-unit: 2px;
  --md-sys-typescale-display-small-size: 36px;
  /* Display Small font weight */
  --md-sys-typescale-display-small-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Small font name */
  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  /* Display Medium */
  --md-sys-typescale-display-medium-text-transform: unset;
  --md-sys-typescale-display-medium-axis-value: unset;
  --md-sys-typescale-display-medium-font-style: unset;
  --md-sys-typescale-display-medium-text-decoration: unset;
  /* Display Medium line height */
  --md-sys-typescale-display-medium-line-height-value: 52px;
  --md-sys-typescale-display-medium-line-height-unit: 2px;
  --md-sys-typescale-display-medium-line-height: 52px;
  /* Display Medium font tracking */
  --md-sys-typescale-display-medium-tracking-value: 0px;
  --md-sys-typescale-display-medium-tracking-unit: 2px;
  --md-sys-typescale-display-medium-tracking: 0px;
  /* Display Medium font size */
  --md-sys-typescale-display-medium-size-value: 45px;
  --md-sys-typescale-display-medium-size-unit: 2px;
  --md-sys-typescale-display-medium-size: 45px;
  /* Display Medium font weight */
  --md-sys-typescale-display-medium-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Medium font name */
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  /* Display Large */
  --md-sys-typescale-display-large-text-transform: unset;
  --md-sys-typescale-display-large-axis-value: unset;
  --md-sys-typescale-display-large-font-style: unset;
  --md-sys-typescale-display-large-text-decoration: unset;
  /* Display Large line height */
  --md-sys-typescale-display-large-line-height-value: 64px;
  --md-sys-typescale-display-large-line-height-unit: 2px;
  --md-sys-typescale-display-large-line-height: 64px;
  /* Display Large font tracking */
  --md-sys-typescale-display-large-tracking-value: -0.25px;
  --md-sys-typescale-display-large-tracking-unit: 2px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  /* Display Large font size */
  --md-sys-typescale-display-large-size-value: 57px;
  --md-sys-typescale-display-large-size-unit: 2px;
  --md-sys-typescale-display-large-size: 57px;
  /* Display Large font weight */
  --md-sys-typescale-display-large-weight: var(
    --md-ref-typeface-weight-regular
  );
  /* Display Large font name */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  /* Plain typeface */
  --md-ref-typeface-plain: Roboto;
  /* Brand typeface */
  --md-ref-typeface-brand: Roboto;
  /* Bold weight */
  --md-ref-typeface-weight-bold: 700;
  /* Medium weight */
  --md-ref-typeface-weight-medium: 500;
  /* Regular weight */
  --md-ref-typeface-weight-regular: 400;
}

/* Label Small */
.label-small {
  font-family: var(--md-sys-typescale-label-small-font);
  font-weight: var(--md-sys-typescale-label-small-weight);
  font-size: var(--md-sys-typescale-label-small-size);
  font-style: var(--md-sys-typescale-label-small-font-style);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  line-height: var(--md-sys-typescale-label-small-line-height);
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}
/* Label Medium */
.label-medium {
  font-family: var(--md-sys-typescale-label-medium-font);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-style: var(--md-sys-typescale-label-medium-font-style);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}
/* Label Large */
.label-large {
  font-family: var(--md-sys-typescale-label-large-font);
  font-weight: var(--md-sys-typescale-label-large-weight);
  font-size: var(--md-sys-typescale-label-large-size);
  font-style: var(--md-sys-typescale-label-large-font-style);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  line-height: var(--md-sys-typescale-label-large-line-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}
/* Body Small */
.body-small {
  font-family: var(--md-sys-typescale-body-small-font);
  font-weight: var(--md-sys-typescale-body-small-weight);
  font-size: var(--md-sys-typescale-body-small-size);
  font-style: var(--md-sys-typescale-body-small-font-style);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}
/* Body Medium */
.body-medium {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-style: var(--md-sys-typescale-body-medium-font-style);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
/* Body Large */
.body-large {
  font-family: var(--md-sys-typescale-body-large-font);
  font-weight: var(--md-sys-typescale-body-large-weight);
  font-size: var(--md-sys-typescale-body-large-size);
  font-style: var(--md-sys-typescale-body-large-font-style);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-line-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}
/* Title Small */
.title-small {
  font-family: var(--md-sys-typescale-title-small-font);
  font-weight: var(--md-sys-typescale-title-small-weight);
  font-size: var(--md-sys-typescale-title-small-size);
  font-style: var(--md-sys-typescale-title-small-font-style);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  line-height: var(--md-sys-typescale-title-small-line-height);
  text-transform: var(--md-sys-typescale-title-small-text-transform);
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}
/* Title Medium */
.title-medium {
  font-family: var(--md-sys-typescale-title-medium-font);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-style: var(--md-sys-typescale-title-medium-font-style);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}
/* Title Large */
.title-large {
  font-family: var(--md-sys-typescale-title-large-font);
  font-weight: var(--md-sys-typescale-title-large-weight);
  font-size: var(--md-sys-typescale-title-large-size);
  font-style: var(--md-sys-typescale-title-large-font-style);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  line-height: var(--md-sys-typescale-title-large-line-height);
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}
/* Headline Small */
.headline-small {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-style: var(--md-sys-typescale-headline-small-font-style);
  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}
/* Headline Medium */
.headline-medium {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  font-size: var(--md-sys-typescale-headline-medium-size);
  font-style: var(--md-sys-typescale-headline-medium-font-style);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}
/* Headline Large */
.headline-large {
  font-family: var(--md-sys-typescale-headline-large-font);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--md-sys-typescale-headline-large-size);
  font-style: var(--md-sys-typescale-headline-large-font-style);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}
/* Display Small */
.display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-weight: var(--md-sys-typescale-display-small-weight);
  font-size: var(--md-sys-typescale-display-small-size);
  font-style: var(--md-sys-typescale-display-small-font-style);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
  line-height: var(--md-sys-typescale-display-small-line-height);
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}
/* Display Medium */
.display-medium {
  font-family: var(--md-sys-typescale-display-medium-font);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  font-size: var(--md-sys-typescale-display-medium-size);
  font-style: var(--md-sys-typescale-display-medium-font-style);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}
/* Display Large */
.display-large {
  font-family: var(--md-sys-typescale-display-large-font);
  font-weight: var(--md-sys-typescale-display-large-weight);
  font-size: var(--md-sys-typescale-display-large-size);
  font-style: var(--md-sys-typescale-display-large-font-style);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
  line-height: var(--md-sys-typescale-display-large-line-height);
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}


S. Carpeta « css / theme »

Versión para imprimir.

1. css / theme / dark.css

.dark {
  --md-sys-color-primary: rgb(170 199 255);
  --md-sys-color-surface-tint: rgb(170 199 255);
  --md-sys-color-on-primary: rgb(10 48 95);
  --md-sys-color-primary-container: rgb(40 71 119);
  --md-sys-color-on-primary-container: rgb(214 227 255);
  --md-sys-color-secondary: rgb(190 198 220);
  --md-sys-color-on-secondary: rgb(40 49 65);
  --md-sys-color-secondary-container: rgb(62 71 89);
  --md-sys-color-on-secondary-container: rgb(218 226 249);
  --md-sys-color-tertiary: rgb(221 188 224);
  --md-sys-color-on-tertiary: rgb(63 40 68);
  --md-sys-color-tertiary-container: rgb(87 62 92);
  --md-sys-color-on-tertiary-container: rgb(250 216 253);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(17 19 24);
  --md-sys-color-on-background: rgb(226 226 233);
  --md-sys-color-surface: rgb(17 19 24);
  --md-sys-color-on-surface: rgb(226 226 233);
  --md-sys-color-surface-variant: rgb(68 71 78);
  --md-sys-color-on-surface-variant: rgb(196 198 208);
  --md-sys-color-outline: rgb(142 144 153);
  --md-sys-color-outline-variant: rgb(68 71 78);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(226 226 233);
  --md-sys-color-inverse-on-surface: rgb(46 48 54);
  --md-sys-color-inverse-primary: rgb(65 95 145);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(17 19 24);
  --md-sys-color-surface-bright: rgb(55 57 62);
  --md-sys-color-surface-container-lowest: rgb(12 14 19);
  --md-sys-color-surface-container-low: rgb(25 28 32);
  --md-sys-color-surface-container: rgb(29 32 36);
  --md-sys-color-surface-container-high: rgb(40 42 47);
  --md-sys-color-surface-container-highest: rgb(51 53 58);
}


2. css / theme / light.css

.light {
  --md-sys-color-primary: rgb(65 95 145);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(214 227 255);
  --md-sys-color-on-primary-container: rgb(40 71 119);
  --md-sys-color-secondary: rgb(86 95 113);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(218 226 249);
  --md-sys-color-on-secondary-container: rgb(62 71 89);
  --md-sys-color-tertiary: rgb(112 85 117);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(250 216 253);
  --md-sys-color-on-tertiary-container: rgb(87 62 92);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(147 0 10);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(25 28 32);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(68 71 78);
  --md-sys-color-outline: rgb(116 119 127);
  --md-sys-color-outline-variant: rgb(196 198 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(46 48 54);
  --md-sys-color-inverse-on-surface: rgb(240 240 247);
  --md-sys-color-inverse-primary: rgb(170 199 255);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(217 217 224);
  --md-sys-color-surface-bright: rgb(249 249 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(243 243 250);
  --md-sys-color-surface-container: rgb(237 237 244);
  --md-sys-color-surface-container-high: rgb(231 232 238);
  --md-sys-color-surface-container-highest: rgb(226 226 233);
}


M. Carpeta « fonts »

Versión para imprimir.

A. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints

Descarga el archivo.

B. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf

Descarga el archivo.

C. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2

Descarga el archivo.

D. fonts / roboto-v32-latin-regular.woff2

Descarga el archivo.

N. Carpeta « img »

Versión para imprimir.

A. img / icono2048.png

B. img / maskable_icon.png

C. img / maskable_icon_x128.png

D. img / maskable_icon_x192.png

E. img / maskable_icon_x384.png

F. img / maskable_icon_x48.png

G. img / maskable_icon_x512.png

H. img / maskable_icon_x72.png

I. img / maskable_icon_x96.png

J. img / screenshot_horizontal.png

K. img / screenshot_vertical.png

O. Carpeta « js »

Versión para imprimir.

A. js / nav-tab-fixed.js

import { resaltaSiEstasEn } from "./lib/resaltaSiEstasEn.js"

export class NavTabFixed extends HTMLElement {

 constructor() {
  super()
  this.creado = false
 }

 connectedCallback() {
  this.classList.add("md-tab", "fixed")

  if (!this.creado) {

   this.innerHTML = /* HTML */`
    <a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
     <span class="material-symbols-outlined">home</span>
     Inicio
    </a>
 
    <a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
     <span class="material-symbols-outlined">help</span>
     Ayuda
    </a>`

   this.creado = true

  }

 }

}

customElements.define("nav-tab-fixed", NavTabFixed)

B. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / ES_APPLE.js


1	export const ES_APPLE = /.(iPad\|iPhone\|iPod\|Mac)./.test(navigator.userAgent)

2. js / lib / getAttribute.js

/**
 * @param {HTMLElement} elementoHtml
 * @param {string} nombre
 * @returns {string}
 */
export function getAttribute(elementoHtml, nombre) {
 const valor = elementoHtml.getAttribute(nombre)
 return valor === null ? "" : valor
}

3. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


4. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

5. js / lib / muestraTextoDeAyuda.js

/**
 * Si un elemento HTML tiene un mensaje de validación, lo
 * muestra en su elemento de ayuda; en caso contrario, muestra
 * un mensaje de ayuda. 
 * @param { {
 *   validity: { valid: boolean };
 *   validationMessage: string
 *  } } elementoHtml elemento que contiene datos de validación.
 * @param { HTMLElement } elementoDeAyuda elemento fonde
 * se muestran los elementos de validación para elementoHtml.
 * @param { string } mensajeDeAyuda mensaje de ayuda cuando el
 *  estado de elementoHtml es válido.
 */
export function muestraTextoDeAyuda(elementoHtml, elementoDeAyuda,
 mensajeDeAyuda) {
 if (elementoHtml.validity.valid) {
  elementoDeAyuda.textContent = mensajeDeAyuda
 } else {
  elementoDeAyuda.textContent = elementoHtml.validationMessage
 }
}

6. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

7. js / lib / querySelector.js

/**
 * @template { HTMLElement } T
 * @param { Document | Element | ShadowRoot } raiz
 * @param { string } query
 * @returns { T }
 */
export function querySelector(raiz, query) {
 /** @type { T | null } */
 const resutado = raiz.querySelector(query)
 if (resutado === null)
  throw new Error(`No se encuentra ${query}.`)
 return resutado
}

8. js / lib / registraServiceWorker.js

const nombreDeServiceWorker = "sw.js"

try {
 navigator.serviceWorker.register(nombreDeServiceWorker)
  .then(registro => {
   console.log(nombreDeServiceWorker, "registrado.")
   console.log(registro)
  })
  .catch(error => console.log(error))
} catch (error) {
 console.log(error)
}

9. js / lib / resaltaSiEstasEn.js

/**
 * @param {string[]} paginas
 */
export function resaltaSiEstasEn(paginas) {

 const pathname = location.pathname

 for (const pagina of paginas) {

  if (pathname === pagina) {
   queueMicrotask(() => {
    const tab = document.querySelector(".active")
    if (tab !== null && tab.closest(".scrollable") !== null) {
     tab.scrollIntoView({ inline: "center", block: "end" })
    }
   })
   return `class="active"`
  }

 }

 return ""

}

10. Carpeta « js / lib / custom »

Versión para imprimir.

A. js / lib / custom / md-app-bar.js

import { ES_APPLE } from "../ES_APPLE.js"
import { getAttribute } from "../getAttribute.js"
import { querySelector } from "../querySelector.js"

class MdAppBar extends HTMLElement {

 getContent() {
  return /* HTML */`
   <style>

    :host {
     display: flex;
     box-sizing: border-box;
     align-items: center;
     padding: 0 0.25rem;
     background-color: var(--md-sys-color-surface);
     position: sticky;
     z-index: 1;
     left: env(titlebar-area-x, 0);
     top: env(titlebar-area-y, 0);
     height: env(titlebar-area-height, 4rem);
     width: env(titlebar-area-width, 100%);
    }
    
    :host(.apple) {
     height: env(titlebar-area-height, 3rem);
    }

    :host(.scroll) {
     background-color: var(--md-sys-color-surface-container-low);
    }

    #navigation {
     flex: 0 0 auto;
     overflow: hidden
    }

    #navigation ::slotted(*) {
     color: var(--md-sys-color-on-surface);
    }

    #acciones {
     margin-left: auto;
     flex: 0 0 auto;
     overflow: hidden
    }

    :host(.centered) #navigation,
    :host(.centered) #acciones {
     flex: 0 0 6rem;
     overflow: hidden
    }

    #headline::slotted(*) {
     -webkit-app-region: drag;
     flex: 1 1 auto;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     font-family: var(--md-sys-typescale-title-large-font);
     font-weight: var(--md-sys-typescale-title-large-weight);
     font-size: var(--md-sys-typescale-title-large-size);
     font-style: var(--md-sys-typescale-title-large-font-style);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     line-height: var(--md-sys-typescale-title-large-line-height);
     text-transform: var(--md-sys-typescale-title-large-text-transform);
     text-decoration: var(--md-sys-typescale-title-large-text-decoration);
     color: var(--md-sys-color-on-surface);
    }

    :host(.centered) #headline::slotted(*) {
     flex: 1 1 auto;
     text-align: center
    }

   </style>

   <span id="navigation">
    <slot name="navigation"></slot>
   </span>
   <slot id="headline"></slot>
   <span id="acciones">
    <slot name="action"></slot>
   </span>`
 }

 constructor() {
  super()
  if (ES_APPLE) {
   document.body.classList.add("apple")
   document.body.classList.remove("material")
  } else {
   document.body.classList.add("material")
   document.body.classList.remove("apple")
  }

  /**
   * @private
   * @readonly
   */
  const shadow = this.attachShadow({ mode: "open" })
  shadow.innerHTML = this.getContent()
  this._configuraAction = this._configuraAction.bind(this)
  /**
   * @private
   * @type {number}
   */
  this._posY = 0
  /**
   * @private
   * @type {boolean}
   */
  this._scrolling = false
  /**
    * @private
    * @type { HTMLSlotElement }
    */
  this._navigation = querySelector(shadow, '[name="navigation"]')
  /**
    * @private
    * @type { HTMLSlotElement }
    */
  this._action = querySelector(shadow, '[name="action"]')
  /**
    * @private
    * @type { HTMLHeadingElement | null }
    */
  this._headline = null
  /**
    * @private
    * @type { HTMLElement | null }
    */
  this._adicional = null
  this._action.addEventListener("slotchange", this._configuraAction)
  addEventListener("scroll", () => this._onScroll())
  addEventListener("load", () => this.configurOtros())
 }

 connectedCallback() {
  this.role = "toolbar"
  this._configuraAction()
 }

 configurOtros() {
  const idHeadline = getAttribute(this, "headline")
  if (idHeadline !== "") {
   const headline = document.getElementById(idHeadline)
   if (headline instanceof HTMLHeadingElement) {
    this._headline = headline
    if (this.classList.contains("apple") || this.classList.contains("medium")) {
     headline.classList.add("md-headline", "headline-small")
    } else {
     headline.classList.add("md-headline", "headline-medium")
    }
   }
  }
  const idAdicional = getAttribute(this, "adicional")
  if (idAdicional !== "") {
   this._adicional = document.getElementById(idAdicional)
   if (this._adicional !== null) {
    if (this.classList.contains("apple")) {
     this._adicional.style.top = "env(titlebar-area-height, 3rem)"
    } else {
     this._adicional.style.top = "env(titlebar-area-height, 4rem)"
    }
   }
  }
 }

 _configuraAction() {
  const assignedElements = this._action.assignedElements()
  if (this.isConnected) {
   if (ES_APPLE) {
    this.classList.add("apple")
    this.classList.remove("material")
   } else {
    this.classList.add("material")
    this.classList.remove("apple")
   }
   if (this.classList.contains("centered")) {
    this.classList.remove("centrado")
    this.classList.remove("justificado")
   } else {
    if (ES_APPLE && assignedElements.length <= 1) {
     this.classList.add("centrado")
     this.classList.remove("justificado")
    } else {
     this.classList.add("justificado")
     this.classList.remove("centrado")
    }
   }
  }
 }

 /** @private */
 _onScroll() {
  this._posY = scrollY
  if (!this._scrolling) {
   requestAnimationFrame(() => this._avanza())
  }
  this._scrolling = true
 }

 /** @private */
 _avanza() {
  if (this._posY === 0) {
   this.classList.remove("scroll")
   if (this._headline !== null) {
    if (this._adicional === null) {
     this._headline.classList.remove("scroll")
    } else {
     this._headline.classList.remove("scroll-adicional")
    }
   }
   if (this._adicional !== null) {
    this._adicional.classList.remove("scroll")
   }
  } else {
   this.classList.add("scroll")
   if (this._headline !== null) {
    if (this._adicional === null) {
     this._headline.classList.add("scroll")
    } else {
     this._headline.classList.add("scroll-adicional")
    }
   }
   if (this._adicional !== null) {
    this._adicional.classList.add("scroll")
   }
  }
  this._scrolling = false
 }

}

customElements.define("md-app-bar", MdAppBar)

P. favicon.ico

Q. .htaccess

Este archivo configura las respuestas del servidor..
Lo utilizan principalmente servidores como Apache o Nginx.
Configura el mime type para el archivo de manifiesto y sedhabilita el uso de la cache general de http..

AddType application/manifest+json .webmanifest

ExpiresActive On

Header set Cache-Control "max-age=1, must-revalidate"


R. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

S. instruccionesListadoSw.txt

Generar el listado de archivos del sw.js desde Visual Studio Code.
1. Abrir una terminal desde el menú 
    Terminal > New Terminal

2. Desde la terminal introducir la orden:
    Get-ChildItem -path . -Recurse | Select Directory,Name | Out-File archivos.txt

3. Abrir el archivo generado, que se llama
    archivos.txt
   y sobre este, realizar los pasos que siguen:

4. Quita del archivo archivos.txt:
    * el encabezado,
    * todas las carpetas,
    * todos los archivos dentro de .vscode como:
       * el archivo .vscode/settings.json,
       * el archivo .vscode/launch.json,
    * el archivo .htaccess,
    * el archivo archivos.txt,
    * este archivo (instruccionesListadoSw.txt),
    * el archivo jsconfig.json,
    * el archivo sw.js,
    * el archivo de la base de datos, que termina en ".db" y
      está en la carpeta php,
    * todos los archivos de php y
    * las líneas en blanco del final

5. Cambia los \ por / desde Visual Studio Code con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece introduce lo siguiente:
    Find:\
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
 
6. Coloca las comillas y coma del final de cada línea desde Visual
   Studio Code con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s*$
    Replace:",

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

7. Marca la carpeta inicial, presiona la combinación de teclas:

    Shift+Ctrl+L

    borra la selección, teclea " y luego ESC

8. Cambia las secuencias de espacios por / con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s+
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

9. Cambia las "/ por " con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, quita la selección del botón
            ".*"
           e introduce lo siguiente:
    Find:"/
    Replace:"

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

10. Copia el texto al archivo
     sw.js
    en el contenido del arreglo llamado ARCHIVOS, pero recuerda
    mantener el último elemento, que dice:
     "/"

T. archivos.txt

"agrega.html",
"ayuda.html",
"favicon.ico",
"index.html",
"modifica.html",
"site.webmanifest",
"css/baseline.css",
"css/colors.css",
"css/elevation.css",
"css/estilos.css",
"css/material-symbols-outlined.css",
"css/md-fab-primary.css",
"css/md-filled-text-field.css",
"css/md-headline.css",
"css/md-list.css",
"css/md-standard-icon-button.css",
"css/md-tab.css",
"css/motion.css",
"css/palette.css",
"css/roboto.css",
"css/shape.css",
"css/state.css",
"css/transicion_pestanas.css",
"css/typography.css",
"css/theme/dark.css",
"css/theme/light.css",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
"fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
"fonts/roboto-v32-latin-regular.woff2",
"img/icono2048.png",
"img/maskable_icon.png",
"img/maskable_icon_x128.png",
"img/maskable_icon_x192.png",
"img/maskable_icon_x384.png",
"img/maskable_icon_x48.png",
"img/maskable_icon_x512.png",
"img/maskable_icon_x72.png",
"img/maskable_icon_x96.png",
"img/screenshot_horizontal.png",
"img/screenshot_vertical.png",
"js/nav-tab-fixed.js",
"js/lib/ES_APPLE.js",
"js/lib/getAttribute.js",
"js/lib/manejaErrores.js",
"js/lib/muestraError.js",
"js/lib/muestraTextoDeAyuda.js",
"js/lib/ProblemDetailsError.js",
"js/lib/querySelector.js",
"js/lib/registraServiceWorker.js",
"js/lib/resaltaSiEstasEn.js",
"js/lib/custom/md-app-bar.js",
"ungap/custom-elements.js",

U. Carpeta « ungap »

Versión para imprimir.

A. ungap / custom-elements.js

Descarga el archivo.

V. Resumen

En esta lección se presentó la estructura básica de una PWA con vistas CRUD y Material Design 3 Expressive.

15. Sincronización

Versión para imprimir.

A. Introducción

En esta lección se muestra un ejemplo de sincronización de bases de datos.
Puedes probar el ejemplo en varios navegadores y dispositivos abriendo la url https://sincro.rf.gd/.
Las modificaciones que realices en dispositivo o navegador se verán reflejados en los otros dispositivos, en un máximo de 20 segundos.
Puedes trabajar sin conexión en algunos dispositivos y con conexión en otros. Si conectas todos los dispositivos, estos mostrarán los mismos datos después de un tiempo.
Comercialmente hay algunos productos como:
Firebase
- https://firebase.google.com/
PouchDb (navegador) + CouchDb (servidor)
- https://pouchdb.com/
- https://couchdb.apache.org/

B. Diagrama entidad relación

C. Diagrama de despliegue

D. Hazlo funcionar (con videos)

Prueba el ejemplo en https://sincro.rf.gd/.
Copia la url de la app y pégala en varios navegadores y dispositivos.
Las modificaciones que realices en dispositivo o navegador se verán reflejados en los otros dispositivos, en un máximo de 20 segundos.
Puedes trabajar sin conexión en algunos dispositivos y con conexión en otros. Si conectas todos los dispositivos, estos mostrarán los mismos datos después de un tiempo.
Descarga el archivo /src/sincro.zip y descompáctalo.
Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
Crea un repositorio nuevo. En el nombre del repositorio debes poner el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
Importa el proyecto de GitHub a Visual Studio Code
Edita los archivos que desees.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Prueba tu sitio localmente.
- En este video se muestra como levantar el servidor de php para correr y depurar localmente.
- En este video se muestra como depurar javascript y php.
Necesitas un hosting. En este ejemplo se muestra como usar el hosting. Si no lo has usado, lo primero que tienes que hacer es entrar a registrar tu email con el botón Registrar. Si ya tienes tu email registrado, omite este paso.
Crea una cuenta. Si ya tienes cuenta, entra a ella y crea un nuevo domino. En este ejemplo no se crean los archivos directamente en el hosting.
Sube tus archivos al hosting usando ftp.
Sube tus archivos a GitHub. En este ejemplo no hay archivo sw.js ni necesitas esperar 11 o más minutos.

E. Hazlo funcionar (texto)

Prueba el ejemplo en https://sincro.rf.gd/.
Copia la url de la app y pégala en varios navegadores y dispositivos.
Las modificaciones que realices en dispositivo o navegador se verán reflejados en los otros dispositivos, en un máximo de 20 segundos.
Puedes trabajar sin conexión en algunos dispositivos y con conexión en otros. Si conectas todos los dispositivos, estos mostrarán los mismos datos después de un tiempo.
Descarga el archivo /src/sincro.zip y descompáctalo.
Crea tu proyecto en GitHub:
1. Crea una cuenta de email, por ejemplo, pepito@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo pepito.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *.
  - Mantén la selección Public para que otros usuarios puedan ver tu proyecto.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo.
Edita los archivos que desees.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Cuando desarrolles, es incómodo modificar la versión cada que realizas cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
5. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamiento en caché (o Cache storage en inglés). Aquí puedes revisar si el caché de la aplicación se llenó correctamente. En caso de que esté vacío, es que hubo algún error durante la carga y la app se ejecuta más lenta.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
3. Selecciona el archivo donde vas a empezar a depurar.
4. Haz clic en el número de la línea donde vas a empezar a depurar.
5. En Visual Studio Code, abre el archivo de PHP donde vas a empezar a depurar.
6. Haz clic en Run and Debug .
7. Si no está configurada la depuración, haz clic en create a launch json file.
8. Haz clic en la flechita RUN AND DEBUG, al lado de la cual debe decir Listen for Xdebug .
9. Aparece un cuadro con los controles de depuración
10. Selecciona otra vez el archivo de PHP y haz clic en el número de la línea donde vas a empezar a depurar.
11. Regresa al navegador, recarga la página de manera normal y empieza a usarla.
12. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Sube el proyecto al hosting que elijas.
1. Crea una nueva carpeta para crear un nuevo proyecto que estará conectado directamente al servidor web por ftp.
2. Abre la nueva carpeta con Visual Studio Code.
3. Tecle al mismo tiempo SFTP: Config. Aparece un archivo de configuración de FTP. Llena los datos con la configuración de FTP de su servidor, excepto la contraseña.
4. Cliquea el botón de SFTP y luego haz clic en la URL de tu servidos. En la barra superior te pide la contraseña y ENTER.
5. Pásate a la parte de archivos y coloca tus archivos.
6. Cliquea con el botón derecho en la sección de archivos y selecciona Sync: Local -> Remote.
Abre un navegador y prueba el proyecto en tu hosting.
En el hosting InfinityFree, la primera vez que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.

F. Archivos

Haz clic en los triángulos para expandir las carpetas

G. index.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">

 <title>Sincronizacion</title>

 <meta name="viewport" content="width=device-width">

 <script type="module" src="js/lib/registraServiceWorker.js"></script>
 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <h1>Sincronizacion</h1>

 <p><a href="agrega.html">Agregar</a></p>

 <ul id="lista">
  <li><progress max="100">Cargando…</progress></li>
 </ul>

 <script type="module">

  import { muestraError } from "./js/lib/muestraError.js"
  import { esperaUnPocoYSincroniza } from "./js/esperaUnPocoYSincroniza.js"
  import {
   pasatiempoConsultaNoEliminados
  } from "./js/pasatiempoConsultaNoEliminados.js"
  import { renderiza } from "./js/renderiza.js"
  import { sincroniza } from "./js/sincroniza.js"

  pasatiempoVistaIndex()

  export async function pasatiempoVistaIndex() {
   try {
    const pasatiempos = await pasatiempoConsultaNoEliminados()
    renderiza(pasatiempos)
    sincroniza()
   } catch (error) {
    muestraError(error)
    esperaUnPocoYSincroniza()
   }
  }

 </script>

</body>

</html>

H. agrega.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Agregar</title>

 <script type="module" src="js/lib/registraServiceWorker.js"></script>
 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Agregar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <p>
   <label>
    Nombre *
    <input name="nombre">
   </label>
  </p>
  <p>* Obligatorio</p>
  <p><button type="submit">Agregar</button></p>

 </form>

 <script type="module">

  import { pasatiempoAgrega } from "./js/pasatiempoAgrega.js"

  formulario.addEventListener("submit", pasatiempoAgrega)

 </script>

</body>

</html>

I. modifica.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Modificar</title>

 <script type="module" src="js/lib/registraServiceWorker.js"></script>
 <script type="module" src="js/lib/manejaErrores.js"></script>

</head>

<body>

 <form id="formulario">

  <h1>Modificar</h1>

  <p><a href="index.html">Cancelar</a></p>

  <p>
   <label>
    Nombre *
    <input name="nombre" value="Cargando…">
   </label>
  </p>

  <p>* Obligatorio</p>

  <p>

   <button type="submit">Guardar</button>

   <button id="botonEliminar" type="button">
    Eliminar
   </button>

  </p>

 </form>

 <script type="module">

  import {
   validaEntidadObligatoria
  } from "./js/lib/validaEntidadObligatoria.js"
  import { muestraObjeto } from "./js/lib/muestraObjeto.js"
  import { pasatiempoBusca } from "./js/pasatiempoBusca.js"
  import { pasatiempoElimina } from "./js/pasatiempoElimina.js"
  import { pasatiempoModifica } from "./js/pasatiempoModifica.js"

  const params = new URL(location.href).searchParams
  const id = params.get("id")

  descargaDatos()

  export async function descargaDatos() {
   if (id !== null && id !== "") {
    let modelo = await pasatiempoBusca(id)
    modelo = validaEntidadObligatoria("Pasatiempo", modelo)
    muestraObjeto(document, { nombre: { value: modelo.PAS_NOMBRE } })
    formulario
     .addEventListener("submit", event => pasatiempoModifica(event, id))
    botonEliminar.addEventListener("click", () => pasatiempoElimina(id))
   }
  }

 </script>

</body>

</html>

J. instruccionesListadoSw.txt

Generar el listado de archivos del sw.js desde Visual Studio Code.
1. Abrir una terminal desde el menú 
    Terminal > New Terminal

2. Desde la terminal introducir la orden:
    Get-ChildItem -path . -Recurse | Select Directory,Name | Out-File archivos.txt

3. Abrir el archivo generado, que se llama
    archivos.txt
   y sobre este, realizar los pasos que siguen:

4. Quita del archivo archivos.txt:
    * el encabezado,
    * todas las carpetas,
    * todos los archivos dentro de .vscode como:
       * el archivo .vscode/settings.json,
       * el archivo .vscode/launch.json,
    * el archivo .htaccess,
    * el archivo archivos.txt,
    * este archivo (instruccionesListadoSw.txt),
    * el archivo jsconfig.json,
    * el archivo sw.js,
    * el archivo de la base de datos, que termina en ".db" y
      está en la carpeta php,
    * todos los archivos de php y
    * las líneas en blanco del final

5. Cambia los \ por / desde Visual Studio Code con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece introduce lo siguiente:
    Find:\
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
 
6. Coloca las comillas y coma del final de cada línea desde Visual
   Studio Code con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s*$
    Replace:",

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

7. Marca la carpeta inicial, presiona la combinación de teclas:

    Shift+Ctrl+L

    borra la selección, teclea " y luego ESC

8. Cambia las secuencias de espacios por / con las siguientes
   combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, selecciona el botón
            ".*"
           e introduce lo siguiente:
    Find:\s+
    Replace:/

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

9. Cambia las "/ por " con las siguientes combinaciones de teclas:

    Ctrl+H En el diálogo que aparece, quita la selección del botón
            ".*"
           e introduce lo siguiente:
    Find:"/
    Replace:"

    Clic en el icono Reemplaza todo o Replace All y luego teclea ESC

10. Copia el texto al archivo
     sw.js
    en el contenido del arreglo llamado ARCHIVOS, pero recuerda
    mantener el último elemento, que dice:
     "/"

K. archivos.txt

"agrega.html",
"index.html",
"modifica.html",
"errors/datosnojson.html",
"errors/eliminadoincorrecto.html",
"errors/errorinterno.html",
"errors/idincorrecto.html",
"errors/modificacionincorrecta.html",
"errors/nombreincorrecto.html",
"errors/resultadonojson.html",
"js/Bd.js",
"js/esperaUnPocoYSincroniza.js",
"js/PASATIEMPO.js",
"js/pasatiempoAgrega.js",
"js/pasatiempoBusca.js",
"js/pasatiempoConsultaNoEliminados.js",
"js/pasatiempoConsultaTodos.js",
"js/pasatiempoElimina.js",
"js/pasatiempoModifica.js",
"js/pasatiemposReemplaza.js",
"js/renderiza.js",
"js/sincroniza.js",
"js/validaPasatiempo.js",
"js/validaPasatiempos.js",
"js/lib/bdConsulta.js",
"js/lib/bdEjecuta.js",
"js/lib/consume.js",
"js/lib/creaIdCliente.js",
"js/lib/enviaJsonRecibeJson.js",
"js/lib/htmlentities.js",
"js/lib/manejaErrores.js",
"js/lib/muestraError.js",
"js/lib/muestraObjeto.js",
"js/lib/ProblemDetailsError.js",
"js/lib/recibeTexto.js",
"js/lib/recibeTextoObligatorio.js",
"js/lib/registraServiceWorker.js",
"js/lib/validaEntidadObligatoria.js",

L. sw.js

/* Este archivo debe estar colocado en la carpeta raíz del sitio.
 * 
 * Cualquier cambio en el contenido de este archivo hace que el service
 * worker se reinstale. */

/**
 * Cambia el número de la versión cuando cambia el contenido de los
 * archivos.
 * 
 * El número a la izquierda del punto (.), en este caso <q>1</q>, se
 * conoce como número mayor y se cambia cuando se realizan
 * modificaciones grandes o importantes.
 * 
 * El número a la derecha del punto (.), en este caso <q>00</q>, se
 * conoce como número menor y se cambia cuando se realizan
 * modificaciones menores.
 */
const VERSION = "1.00"

/**
 * Nombre de la carpeta de caché.
 */
const CACHE = "sincro"

/**
 * Archivos requeridos para que la aplicación funcione fuera de línea.
 */
const ARCHIVOS = [
 "agrega.html",
 "index.html",
 "modifica.html",
 "errors/datosnojson.html",
 "errors/eliminadoincorrecto.html",
 "errors/errorinterno.html",
 "errors/idincorrecto.html",
 "errors/modificacionincorrecta.html",
 "errors/nombreincorrecto.html",
 "errors/resultadonojson.html",
 "js/Bd.js",
 "js/esperaUnPocoYSincroniza.js",
 "js/PASATIEMPO.js",
 "js/pasatiempoAgrega.js",
 "js/pasatiempoBusca.js",
 "js/pasatiempoConsultaNoEliminados.js",
 "js/pasatiempoConsultaTodos.js",
 "js/pasatiempoElimina.js",
 "js/pasatiempoModifica.js",
 "js/pasatiemposReemplaza.js",
 "js/renderiza.js",
 "js/sincroniza.js",
 "js/validaPasatiempo.js",
 "js/validaPasatiempos.js",
 "js/lib/bdConsulta.js",
 "js/lib/bdEjecuta.js",
 "js/lib/consume.js",
 "js/lib/creaIdCliente.js",
 "js/lib/enviaJsonRecibeJson.js",
 "js/lib/htmlentities.js",
 "js/lib/manejaErrores.js",
 "js/lib/muestraError.js",
 "js/lib/muestraObjeto.js",
 "js/lib/ProblemDetailsError.js",
 "js/lib/recibeTexto.js",
 "js/lib/recibeTextoObligatorio.js",
 "js/lib/registraServiceWorker.js",
 "js/lib/validaEntidadObligatoria.js",
 "/"
]

// Verifica si el código corre dentro de un service worker.
if (self instanceof ServiceWorkerGlobalScope) {
 // Evento al empezar a instalar el servide worker,
 self.addEventListener("install",
  (/** @type {ExtendableEvent} */ evt) => {
   console.log("El service worker se está instalando.")
   evt.waitUntil(llenaElCache())
  })

 // Evento al solicitar información a la red.
 self.addEventListener("fetch", (/** @type {FetchEvent} */ evt) => {
  if (evt.request.method === "GET") {
   evt.respondWith(buscaLaRespuestaEnElCache(evt))
  }
 })

 // Evento cuando el service worker se vuelve activo.
 self.addEventListener("activate",
  () => console.log("El service worker está activo."))
}

async function llenaElCache() {
 console.log("Intentando cargar caché:", CACHE)
 // Borra todos los cachés.
 const keys = await caches.keys()
 for (const key of keys) {
  await caches.delete(key)
 }
 // Abre el caché de este service worker.
 const cache = await caches.open(CACHE)
 // Carga el listado de ARCHIVOS.
 await cache.addAll(ARCHIVOS)
 console.log("Cache cargado:", CACHE)
 console.log("Versión:", VERSION)
}

/** @param {FetchEvent} evt */
async function buscaLaRespuestaEnElCache(evt) {
 // Abre el caché.
 const cache = await caches.open(CACHE)
 const request = evt.request
 /* Busca la respuesta a la solicitud en el contenido del caché, sin
  * tomar en cuenta la parte después del símbolo "?" en la URL. */
 const response = await cache.match(request, { ignoreSearch: true })
 if (response === undefined) {
  /* Si no la encuentra, empieza a descargar de la red y devuelve
   * la promesa. */
  return fetch(request)
 } else {
  // Si la encuentra, devuelve la respuesta encontrada en el caché.
  return response
 }
}

M. Carpeta « js »

Versión para imprimir.

A. js / Bd.js

export const ALMACEN_PASATIEMPO = "PASATIEMPO"
export const PAS_ID = "PAS_ID"
export const INDICE_NOMBRE = "INDICE_NOMBRE"
export const PAS_NOMBRE = "PAS_NOMBRE"
const BD_NOMBRE = "sincro"
const BD_VERSION = 1

/** @type { Promise<IDBDatabase> } */
export const Bd = new Promise((resolve, reject) => {

 /* Se solicita abrir la base de datos, indicando nombre y
  * número de versión. */
 const solicitud = indexedDB.open(BD_NOMBRE, BD_VERSION)

 // Si se presenta un error, rechaza la promesa.
 solicitud.onerror = () => reject(solicitud.error)

 // Si se abre con éxito, devuelve una conexión a la base de datos.
 solicitud.onsuccess = () => resolve(solicitud.result)

 // Si es necesario, se inicia una transacción para cambio de versión.
 solicitud.onupgradeneeded = () => {

  const bd = solicitud.result

  // Como hay cambio de versión, borra el almacén si es que existe.
  if (bd.objectStoreNames.contains(ALMACEN_PASATIEMPO)) {
   bd.deleteObjectStore(ALMACEN_PASATIEMPO)
  }

  // Crea el almacén "PASATIEMPO" con el campo llave "PAS_ID".
  const almacenPasatiempo =
   bd.createObjectStore(ALMACEN_PASATIEMPO, { keyPath: PAS_ID })

  // Crea un índice ordenado por el campo PAS_NOMBRE que no acepta duplicados.
  almacenPasatiempo.createIndex(INDICE_NOMBRE, PAS_NOMBRE)
 }

})

B. js / esperaUnPocoYSincroniza.js

import { sincroniza } from "./sincroniza.js"

/**
 * Cada 20 segundos (2000 milisegundos) después de la última
 * sincronización, los datos se envían al servidor para volver a
 * sincronizarse con los datos del servidor.
 */
const MILISEGUNDOS_PARA_VOLVER_A_SINCRONIZAR = 20000

export function esperaUnPocoYSincroniza() {
 setTimeout(() => sincroniza(), MILISEGUNDOS_PARA_VOLVER_A_SINCRONIZAR)
}

C. js / PASATIEMPO.js

/**
 * @typedef {Object} PASATIEMPO
 * @property {string} PAS_ID
 * @property {string} PAS_NOMBRE
 * @property {number} PAS_MODIFICACION
 * @property {number} PAS_ELIMINADO
 */

D. js / pasatiempoAgrega.js

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"
import { bdEjecuta } from "./lib/bdEjecuta.js"
import { creaIdCliente } from "./lib/creaIdCliente.js"
import { recibeTextoObligatorio } from "./lib/recibeTextoObligatorio.js"


/**
 * @param {SubmitEvent} event
 */
export async function pasatiempoAgrega(event) {

 event.preventDefault()
 const target = event.target

 if (!(target instanceof HTMLFormElement))
  throw new Error("target no es de tipo form.")

 const formData = new FormData(target)

 const modelo = {
  PAS_ID: creaIdCliente(Date.now().toString()), // Genera id único en internet.
  PAS_NOMBRE: recibeTextoObligatorio(formData, "nombre"),
  PAS_MODIFICACION: Date.now(),
  PAS_ELIMINADO: 0,
 }

 await bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {
  const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)
  almacenPasatiempo.add(modelo)
 })

 location.href = "index.html"

}

E. js / pasatiempoBusca.js

import { bdConsulta } from "./lib/bdConsulta.js"
import { validaPasatiempo } from "./validaPasatiempo.js"
import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

/**
 * @param {string} id
 */
export async function pasatiempoBusca(id) {

 return bdConsulta(Bd, [ALMACEN_PASATIEMPO],
  /**
   * @param {(resultado: import("./PASATIEMPO.js").PASATIEMPO|undefined)
   *                                                            => any} resolve 
   */
  (transaccion, resolve) => {

   /* Pide el primer objeto de ALMACEN_PASATIEMPO que tenga como llave
    * primaria el valor del parámetro id. */
   const consulta = transaccion.objectStore(ALMACEN_PASATIEMPO).get(id)

   // onsuccess se invoca solo una vez, devolviendo el objeto solicitado.
   consulta.onsuccess = () => {
    /* Se recupera el objeto solicitado usando
     *  consulta.result
     * Si el objeto no se encuentra se recupera undefined. */
    const objeto = consulta.result
    if (objeto !== undefined) {
     const modelo = validaPasatiempo(objeto)
     if (modelo.PAS_ELIMINADO === 0) {
      resolve(modelo)
      return
     }
    }
    resolve(undefined)

   }

  })

}

F. js / pasatiempoConsultaNoEliminados.js

import { ALMACEN_PASATIEMPO, Bd, INDICE_NOMBRE } from "./Bd.js"
import { bdConsulta } from "./lib/bdConsulta.js"
import { validaPasatiempo } from "./validaPasatiempo.js"

export async function pasatiempoConsultaNoEliminados() {

 return bdConsulta(Bd, [ALMACEN_PASATIEMPO],
  /**
   * @param {(resultado: import("./PASATIEMPO.js").PASATIEMPO[])=>void
   *                                                                  } resolve
   */
  (transaccion, resolve) => {

   const resultado = []

   const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)

   // Usa el índice INDICE_NOMBRE para recuperar los datos ordenados.
   const indiceNombre = almacenPasatiempo.index(INDICE_NOMBRE)

   // Pide un cursor para recorrer cada objeto que devuelve la consulta.
   const consulta = indiceNombre.openCursor()

   /* onsuccess se invoca por cada uno de los objetos de la consulta y una vez
    * cuando se acaban dichos objetos. */
   consulta.onsuccess = () => {
    /* El cursor correspondiente al objeto se recupera usando
     *  consulta.result */
    const cursor = consulta.result
    if (cursor === null) {
     /* Si el cursor vale null, ya no hay más objetos que procesar; por lo
      * mismo, se devuelve el resultado con los pasatiempos recuperados, usando
      *  resolve(resultado). */
     resolve(resultado)
    } else {
     /* Si el cursor no vale null y hay más objetos, el siguiente se obtiene con
      *  cursor.value */
     const modelo = validaPasatiempo(cursor.value)
     if (modelo.PAS_ELIMINADO === 0) {
      resultado.push(modelo)
     }
     /* Busca el siguiente objeto de la consulta, que se recupera la siguiente
      * vez que se invoque la función onsuccess. */
     cursor.continue()
    }
   }

  })

}

G. js / pasatiempoConsultaTodos.js

import { bdConsulta } from "./lib/bdConsulta.js"
import { validaPasatiempo } from "./validaPasatiempo.js"
import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

/**
 * Lista todos los objetos, incluyendo los que tienen borrado lógico.
 */
export async function pasatiempoConsultaTodos() {

 return bdConsulta(Bd, [ALMACEN_PASATIEMPO],
  /**
   * @param {(resultado: import("./PASATIEMPO.js").PASATIEMPO[])=>void
   *                                                                  } resolve
   */
  (transaccion, resolve) => {

   const resultado = []

   // Pide un cursor para recorrer cada objeto que devuelve la consulta.
   const consulta = transaccion.objectStore(ALMACEN_PASATIEMPO).openCursor()

   /* onsuccess se invoca por cada uno de los objetos de la consulta y una vez
    * cuando se acaban dichos objetos. */
   consulta.onsuccess = () => {
    /* El cursor correspondiente al objeto se recupera usando
     *  consulta.result */
    const cursor = consulta.result
    if (cursor === null) {
     /* Si el cursor vale null, ya no hay más objetos que procesar; por lo
      * mismo, se devuelve el resultado con los pasatiempos recuperados, usando
      *  resolve(resultado). */
     resolve(resultado)
    } else {
     /* Si el cursor no vale null y hay más objetos, el siguiente se obtiene con
      *  cursor.value*/
     resultado.push(validaPasatiempo(cursor.value))
     /* Busca el siguiente objeto de la consulta, que se recupera la siguiente
      * vez que se invoque la función onsuccess. */
     cursor.continue()
    }
   }

  })

}

H. js / pasatiempoElimina.js

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"
import { bdEjecuta } from "./lib/bdEjecuta.js"
import { pasatiempoBusca } from "./pasatiempoBusca.js"

/**
 * @param { string } id
 */
export async function pasatiempoElimina(id) {

 if (confirm('Confirma la eliminación')) {

  const modelo = await pasatiempoBusca(id)

  if (modelo !== undefined) {

   modelo.PAS_MODIFICACION = Date.now()
   modelo.PAS_ELIMINADO = 1
   await bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {
    const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)
    almacenPasatiempo.put(modelo)
   })

  }

  location.href = "index.html"

 }

}

I. js / pasatiempoModifica.js

import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"
import { bdEjecuta } from "./lib/bdEjecuta.js"
import { recibeTextoObligatorio } from "./lib/recibeTextoObligatorio.js"
import { pasatiempoBusca } from "./pasatiempoBusca.js"

/**
 * @param {SubmitEvent} event
 * @param {string} id
 */
export async function pasatiempoModifica(event, id) {

 event.preventDefault()
 const target = event.target

 if (!(target instanceof HTMLFormElement))
  throw new Error("target no es de tipo form.")

 const formData = new FormData(target)

 const nombre = recibeTextoObligatorio(formData, "nombre")

 const anterior = await pasatiempoBusca(id)

 if (anterior !== undefined) {

  anterior.PAS_NOMBRE = nombre
  anterior.PAS_MODIFICACION = Date.now()

  await bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {
   const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)
   almacenPasatiempo.put(anterior)
  })

 location.href = "index.html"

 }

}

J. js / pasatiemposReemplaza.js

import { bdEjecuta } from "./lib/bdEjecuta.js"
import { ALMACEN_PASATIEMPO, Bd } from "./Bd.js"

/**
 * Borra el contenido del almacén PASATIEMPO y guarda nuevospasatiempos.
 * @param {import("./PASATIEMPO.js").PASATIEMPO[]} nuevosPasatiempos
 */
export async function pasatiemposReemplaza(nuevosPasatiempos) {
 return bdEjecuta(Bd, [ALMACEN_PASATIEMPO], transaccion => {
  const almacenPasatiempo = transaccion.objectStore(ALMACEN_PASATIEMPO)
  almacenPasatiempo.clear()
  for (const objeto of nuevosPasatiempos) {
   almacenPasatiempo.add(objeto)
  }
 })
}

K. js / renderiza.js

import { htmlentities } from "./lib/htmlentities.js"
import { muestraObjeto } from "./lib/muestraObjeto.js"

/**
 * @param {import("./PASATIEMPO.js").PASATIEMPO[]} pasatiempos
 */
export function renderiza(pasatiempos) {
 let render = ""
 for (const modelo of pasatiempos) {
  const nombre = htmlentities(modelo.PAS_NOMBRE)
  const searchParams = new URLSearchParams([["id", modelo.PAS_ID]])
  const params = htmlentities(searchParams.toString())
  render += /* html */
   `<li>
     <p><a href="modifica.html?${params}">${nombre}</a></p>
    </li>`
 }
 muestraObjeto(
  document,
  {
   lista: { innerHTML: render }
  }
 )
}


L. js / sincroniza.js

import { pasatiempoConsultaTodos } from "./pasatiempoConsultaTodos.js"
import { pasatiemposReemplaza } from "./pasatiemposReemplaza.js"
import { esperaUnPocoYSincroniza } from "./esperaUnPocoYSincroniza.js"
import { consume } from "./lib/consume.js"
import { enviaJsonRecibeJson } from "./lib/enviaJsonRecibeJson.js"
import { muestraError } from "./lib/muestraError.js"
import { renderiza } from "./renderiza.js"
import { validaPasatiempos } from "./validaPasatiempos.js"

export async function sincroniza() {

 try {

  if (navigator.onLine) {
   const todos = await pasatiempoConsultaTodos()
   const respuesta =
    await consume(enviaJsonRecibeJson("php/sincroniza.php", todos))
   const pasatiempos = validaPasatiempos(await respuesta.json())
   await pasatiemposReemplaza(pasatiempos)
   renderiza(pasatiempos)
  }

 } catch (error) {

  muestraError(error)

 }

 esperaUnPocoYSincroniza()

}

M. js / validaPasatiempo.js

/**
 * @param { any } objeto
 * @returns {import("./PASATIEMPO.js").PASATIEMPO}
 */
export function validaPasatiempo(objeto) {

 if (typeof objeto.PAS_ELIMINADO !== "number" || isNaN(objeto.PAS_ELIMINADO))
  throw new Error("El campo eliminado debe ser número.")

 if (typeof objeto.PAS_ID !== "string" || objeto.PAS_ID === "")
  throw new Error("El id debe ser texto que no esté en blanco.")

 if (
  typeof objeto.PAS_MODIFICACION !== "number" || isNaN(objeto.PAS_MODIFICACION)
 )
  throw new Error("El campo modificacion debe ser número.")

 if (typeof objeto.PAS_NOMBRE !== "string" || objeto.PAS_ID === "")
  throw new Error("El nombre debe ser texto que no esté en blanco.")

 return objeto

}

N. js / validaPasatiempos.js

import { validaPasatiempo } from "./validaPasatiempo.js"

/**
 * @param { any } objetos
 * @returns {import("./PASATIEMPO.js").PASATIEMPO[]}
 */
export function validaPasatiempos(objetos) {
 if (!Array.isArray(objetos))
  throw new Error("no se recibió un arreglo.")
 /**
  * @type {import("./PASATIEMPO.js").PASATIEMPO[]}
  */
 const arreglo = []
 for (const objeto of objetos) {
  arreglo.push(validaPasatiempo(objeto))
 }
 return arreglo
}

O. Carpeta « js / lib »

Versión para imprimir.

1. js / lib / bdConsulta.js

/**
 * @template T
 * @param {Promise<IDBDatabase>} bd
 * @param {string[]} almacenes
 * @param {(transaccion: IDBTransaction, resolve: (resultado:T)=>void) => any
 *                                                                   } consulta
 * @returns {Promise<T>}
 */
export async function bdConsulta(bd, almacenes, consulta) {

 const base = await bd

 return new Promise((resolve, reject) => {
  // Inicia una transacción de solo lectura.
  const transaccion = base.transaction(almacenes, "readonly")
  // Al terminar con error ejecuta la función reject.
  transaccion.onerror = () => reject(transaccion.error)
  // Estas son las operaciones para realizar la consulta.
  consulta(transaccion, resolve)
 })

}

2. js / lib / bdEjecuta.js

/**
 * @param {Promise<IDBDatabase>} bd
 * @param {string[]} entidades
 * @param {(t:IDBTransaction) => void} operaciones
 */
export async function bdEjecuta(bd, entidades, operaciones) {

 // Espera que se abra la bd
 const base = await bd

 return new Promise(
  (resolve, reject) => {
   // Inicia una transacción de lectura y escritura.
   const transaccion = base.transaction(entidades, "readwrite")
   // Al terminar con éxito, ejecuta la función resolve.
   transaccion.oncomplete = resolve
   // Al terminar con error, ejecuta la función reject.
   transaccion.onerror = () => reject(transaccion.error)
   // Estas son las operaciones de la transacción.
   operaciones(transaccion)
  })

}

3. js / lib / consume.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Espera a que la promesa de un fetch termine. Si
 * hay error, lanza una excepción.
 * 
 * @param {Promise<Response> } servicio
 */
export async function consume(servicio) {
 const respuesta = await servicio
 if (respuesta.ok) {
  return respuesta
 } else {
  const contentType = respuesta.headers.get("Content-Type")
  if (contentType === "application/problem+json; charset=utf-8")
   throw new ProblemDetailsError(await respuesta.json())
  else
   throw new Error(respuesta.statusText)
 }
}

4. js / lib / creaIdCliente.js

/**
 * Añade caracteres al azar a una raíz, para obtener un clientId único.
 * @param {string} raiz 
 */
export function creaIdCliente(raiz) {
 const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
 for (var i = 0; i < 15; i++) {
  raiz += chars.charAt(Math.floor(Math.random() * chars.length))
 }
 return raiz
}

5. js / lib / enviaJsonRecibeJson.js


/**
 * @param { string } url
 * @param { Object } body
 * @param { "GET" | "POST"| "PUT" | "PATCH" | "DELETE" | "TRACE" | "OPTIONS"
 *  | "CONNECT" | "HEAD" } metodoHttp
 */
export async function enviaJsonRecibeJson(url, body, metodoHttp = "POST") {
 return fetch(
  url,
  {
   method: metodoHttp,
   headers: {
    "Content-Type": "application/json",
    "Accept": "application/json, application/problem+json"
   },
   body: JSON.stringify(body)
  }
 )
}

6. js / lib / htmlentities.js

/**
 * Codifica un texto para que cambie los caracteres
 * especiales y no se pueda interpretar como
 * etiiqueta HTML. Esta técnica evita la inyección
 * de código.
 * @param { string } texto
*/
export function htmlentities(texto) {
 return texto.replace(/[<>"']/g, textoDetectado => {
  switch (textoDetectado) {
   case "<": return "<"
   case ">": return ">"
   case '"': return """
   case "'": return "'"
   default: return textoDetectado
  }
 })
}


7. js / lib / manejaErrores.js

import { muestraError } from "./muestraError.js"

/**
 * Intercepta Response.prototype.json para capturar errores de parseo
 * y asegurar que se reporten correctamente en navegadores Chromium.
 */
{
 const originalJson = Response.prototype.json

 Response.prototype.json = function () {
  // Llamamos al método original usando el contexto (this) de la respuesta
  return originalJson.apply(this, arguments)
   .catch((/** @type {any} */ error) => {
    // Corrige un error de Chrome que evita el manejo correcto de errores.
    throw new Error(error)
   })
 }
}

window.onerror = function (
  /** @type {string} */ _message,
  /** @type {string} */ _url,
  /** @type {number} */ _line,
  /** @type {number} */ _column,
  /** @type {Error} */ errorObject
) {
 muestraError(errorObject)
 return true
}

window.addEventListener('unhandledrejection', event => {
 muestraError(event.reason)
 event.preventDefault()
})


8. js / lib / muestraError.js

import { ProblemDetailsError } from "./ProblemDetailsError.js"

/**
 * Muestra los datos de una Error en la consola y en un cuadro de alerta.
 * @param { ProblemDetailsError | Error | null } error descripción del error.
 */
export function muestraError(error) {

 if (error === null) {

  console.error("Error")
  alert("Error")

 } else if (error instanceof ProblemDetailsError) {

  const problemDetails = error.problemDetails

  let mensaje =
   typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
  if (typeof problemDetails["detail"] === "string") {
   if (mensaje !== "") {
    mensaje += "\n\n"
   }
   mensaje += problemDetails["detail"]
  }
  if (mensaje === "") {
   mensaje = "Error"
  }
  console.error(error, problemDetails)
  alert(mensaje)

 } else {

  console.error(error)
  alert(error.message)

 }

}

9. js / lib / muestraObjeto.js

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param { any } objeto
 */
export function muestraObjeto(raizHtml, objeto) {
 for (const [nombre, definiciones] of Object.entries(objeto)) {
  if (Array.isArray(definiciones)) {
   muestraArray(raizHtml, nombre, definiciones)
  } else if (definiciones !== undefined && definiciones !== null) {
   muestraElemento(raizHtml, nombre, definiciones)
  }
 }
}

/**
 * @param { string } nombre
 */
export function selectorDeNombre(nombre) {
 return `[id="${nombre}"],[name="${nombre}"],[data-name="${nombre}"]`
}

/**
 * @param { Document | HTMLElement | ShadowRoot } raizHtml
 * @param { string } propiedad
 * @param {any[]} valores
 */
function muestraArray(raizHtml, propiedad, valores) {
 const conjunto = new Set(valores)
 const elementos = raizHtml.querySelectorAll(selectorDeNombre(propiedad))
 if (elementos.length === 1 && elementos[0] instanceof HTMLSelectElement) {
  muestraOptions(elementos[0], conjunto)
 } else {
  muestraInputs(elementos, conjunto)
 }

}

/**
 * @param {HTMLSelectElement} select
 * @param {Set<any>} conjunto
 */
function muestraOptions(select, conjunto) {
 for (let i = 0, options = select.options, len = options.length; i < len; i++) {
  const option = options[i]
  option.selected = conjunto.has(option.value)
 }
}

/**
 * @param {NodeListOf<Element>} elementos
 * @param {Set<any>} conjunto
 */
function muestraInputs(elementos, conjunto) {
 for (let i = 0, len = elementos.length; i < len; i++) {
  const elemento = elementos[i]
  if (elemento instanceof HTMLInputElement) {
   elemento.checked = conjunto.has(elemento.value)
  }
 }
}

const data_ = "data-"
const data_Length = data_.length

/**
 * @param {Document | HTMLElement | ShadowRoot} raizHtml
 * @param {string} nombre
 * @param {{ [s: string]: any; } } definiciones
 */
function muestraElemento(raizHtml, nombre, definiciones) {
 const elemento = raizHtml.querySelector(selectorDeNombre(nombre))
 if (elemento !== null) {
  for (const [propiedad, valor] of Object.entries(definiciones)) {
   if (propiedad in elemento) {
    elemento[propiedad] = valor
   } else if (
    propiedad.length > data_Length
    && propiedad.startsWith(data_)
    && elemento instanceof HTMLElement
   ) {
    elemento.dataset[propiedad.substring(data_Length)] = valor
   }
  }
 }
}

10. js / lib / ProblemDetailsError.js

export class ProblemDetailsError extends Error {

 /**
  * Detalle de los errores devueltos por un servicio.
  * Crea una instancia de ProblemDetailsError.
  * @param {object} problemDetails Objeto con la descripcipon del error.
  */
 constructor(problemDetails) {

  super(typeof problemDetails["detail"] === "string"
   ? problemDetails["detail"]
   : (typeof problemDetails["title"] === "string"
    ? problemDetails["title"]
    : "Error"))

  this.problemDetails = problemDetails

 }

}

11. js / lib / recibeTexto.js

/**
 * @param {FormData} formData
 * @param {string} parametro
 */
export function recibeTexto(formData, parametro) {
 const valor = formData.get(parametro)
 if (valor !== null && typeof valor !== "string")
  throw new Error(`El valor de ${parametro} debe ser texto.`)
 return valor === null ? undefined : valor
}


12. js / lib / recibeTextoObligatorio.js

import { recibeTexto } from "./recibeTexto.js"

/**
 * @param {FormData} formData
 * @param {string} parametro
 */
export function recibeTextoObligatorio(formData, parametro) {
 const texto = recibeTexto(formData, parametro)
 if (texto === undefined) throw new Error(`Falta el valor de ${parametro}.`)
 const trimTexto = texto.trim()
 if (trimTexto === "") throw new Error(`Campo ${parametro} en blanco.`)
 return trimTexto
}


13. js / lib / registraServiceWorker.js

const nombreDeServiceWorker = "sw.js"

try {
 navigator.serviceWorker.register(nombreDeServiceWorker)
  .then(registro => {
   console.log(nombreDeServiceWorker, "registrado.")
   console.log(registro)
  })
  .catch(error => console.log(error))
} catch (error) {
 console.log(error)
}

14. js / lib / validaEntidadObligatoria.js

/**
 * @template T
 * @param {string} nombre
 * @param {T | undefined} entidad
 */
export function validaEntidadObligatoria(nombre, entidad) {

 if (entidad === undefined)
  throw new Error(`Registro de ${nombre} no encontrado.`)

 return entidad
}


N. Carpeta « php »

Versión para imprimir.

A. php / Bd.php

<?php

class Bd
{

 private static ?PDO $pdo = null;

 static function pdo(): PDO
 {
  if (self::$pdo === null) {
   self::$pdo = new PDO(
    // cadena de conexión
    "sqlite:" . __DIR__ . "/sincro.db",
    // usuario
    null,
    // contraseña
    null,
    // Opciones: pdos no persistentes y lanza excepciones.
    [PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
   );

   self::$pdo->exec(
    'CREATE TABLE IF NOT EXISTS PASATIEMPO (
      PAS_ID TEXT NOT NULL,
      PAS_NOMBRE TEXT NOT NULL,
      PAS_MODIFICACION INTEGER NOT NULL,
      PAS_ELIMINADO INTEGER NOT NULL,
      CONSTRAINT PAS_PK
       PRIMARY KEY(PAS_ID),
      CONSTRAINT PAS_ID_NV
       CHECK(LENGTH(PAS_ID) > 0),
      CONSTRAINT PAS_NOM_NV
       CHECK(LENGTH(PAS_NOMBRE) > 0)
     )'
   );
  }

  return self::$pdo;
 }
}


B. php / pasatiempoAgrega.php

<?php

require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**
 * @param array{
 *   PAS_ID: string,
 *   PAS_NOMBRE: string,
 *   PAS_MODIFICACION: int,
 *   PAS_ELIMINADO: int
 *  } $modelo
 */
function pasatiempoAgrega(array $modelo)
{
 $bd = Bd::pdo();
 $stmt = $bd->prepare(
  "INSERT INTO PASATIEMPO (
    PAS_ID, PAS_NOMBRE, PAS_MODIFICACION, PAS_ELIMINADO
   ) values (
    :PAS_ID, :PAS_NOMBRE, :PAS_MODIFICACION, :PAS_ELIMINADO
   )"
 );
 $stmt->execute([
  ":PAS_ID" => $modelo[PAS_ID],
  ":PAS_NOMBRE" => $modelo[PAS_NOMBRE],
  ":PAS_MODIFICACION" => $modelo[PAS_MODIFICACION],
  ":PAS_ELIMINADO" => $modelo[PAS_ELIMINADO],
 ]);
}


C. php / pasatiempoBusca.php

<?php

require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**
 * @return false | array{
 *   PAS_ID: string,
 *   PAS_NOMBRE: string,
 *   PAS_MODIFICACION: int,
 *   PAS_ELIMINADO: int
 *  }
 */
function pasatiempoBusca(string $id): false|array
{
 $bd = Bd::pdo();
 $stmt = $bd->prepare("SELECT * FROM PASATIEMPO WHERE PAS_ID = :PAS_ID");
 $stmt->execute([":PAS_ID" => $id]);
 $modelo = $stmt->fetch(PDO::FETCH_ASSOC);
 return $modelo;
}


D. php / pasatiempoConsultaNoEliminados.php

<?php

require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**
 * @return array{
 *   PAS_ID: string,
 *   PAS_NOMBRE: string,
 *   PAS_MODIFICACION: int,
 *   PAS_ELIMINADO: int
 *  }[]
 */
function pasatiempoConsultaNoEliminados()
{
 $bd = Bd::pdo();
$stmt = $bd->query(
 "SELECT * FROM PASATIEMPO WHERE PAS_ELIMINADO = 0 ORDER BY PAS_NOMBRE"
);
$lista = $stmt->fetchAll(PDO::FETCH_ASSOC);
return $lista;
}


E. php / pasatiempoModifica.php

<?php

require_once __DIR__ . "/Bd.php";
require_once __DIR__ . "/TABLA_PASATIEMPO.php";

/**
 * @param array{
 *   PAS_ID: string,
 *   PAS_NOMBRE: string,
 *   PAS_MODIFICACION: int,
 *   PAS_ELIMINADO: int
 *  } $modelo
 */
function pasatiempoModifica(array $modelo)
{
 $bd = Bd::pdo();
 $stmt = $bd->prepare(
  "UPDATE PASATIEMPO
   SET
    PAS_NOMBRE = :PAS_NOMBRE,
    PAS_MODIFICACION = :PAS_MODIFICACION,
    PAS_ELIMINADO = :PAS_ELIMINADO
   WHERE
    PAS_ID = :PAS_ID"
 );
 $stmt->execute([
  ":PAS_ID" => $modelo[PAS_ID],
  ":PAS_NOMBRE" => $modelo[PAS_NOMBRE],
  ":PAS_MODIFICACION" => $modelo[PAS_MODIFICACION],
  ":PAS_ELIMINADO" => $modelo[PAS_ELIMINADO],
 ]);
}


F. php / sincroniza.php

<?php

require_once __DIR__ . "/lib/manejaErrores.php";
require_once __DIR__ . "/lib/recibeJson.php";
require_once __DIR__ . "/lib/devuelveJson.php";
require_once __DIR__ . "/TABLA_PASATIEMPO.php";
require_once __DIR__ . "/validaPasatiempo.php";
require_once __DIR__ . "/pasatiempoAgrega.php";
require_once __DIR__ . "/pasatiempoBusca.php";
require_once __DIR__ . "/pasatiempoConsultaNoEliminados.php";
require_once __DIR__ . "/pasatiempoModifica.php";

 $lista = recibeJson();

 if (!is_array($lista)) {
  $lista = [];
 }

 foreach ($lista as $modelo) {
  $modeloEnElCliente = validaPasatiempo($modelo);
  $modeloEnElServidor = pasatiempoBusca($modeloEnElCliente[PAS_ID]);

  if ($modeloEnElServidor === false) {

   /* CONFLICTO: El modelo no ha estado en el servidor.
    * AGREGARLO solamente si no está eliminado. */
   if ($modeloEnElCliente[PAS_ELIMINADO] === 0) {
    pasatiempoAgrega($modeloEnElCliente);
   }
  } elseif (
   $modeloEnElServidor[PAS_ELIMINADO] === 0
   && $modeloEnElCliente[PAS_ELIMINADO] === 1
  ) {

   /* CONFLICTO: El registro está en el servidor, donde no se ha eliminado, pero
    * ha sido eliminado en el cliente.
    * Gana el cliente, porque optamos por no revivir lo eliminado. */
   pasatiempoModifica($modeloEnElCliente);
  } else if (
   $modeloEnElCliente[PAS_ELIMINADO] === 0
   && $modeloEnElServidor[PAS_ELIMINADO] === 0
  ) {

   /* CONFLICTO: Registros en el servidor y en el cliente. Pueden ser
    * diferentes.
    * GANA FECHA MÁS GRANDE. Cuando gana el servidor, no se hace nada. */
   if (
    $modeloEnElCliente[PAS_MODIFICACION] >
    $modeloEnElServidor[PAS_MODIFICACION]
   ) {
    // La versión del cliente es más nueva y prevalece.
    pasatiempoModifica($modeloEnElCliente);
   }
  }
 }

 $lista = pasatiempoConsultaNoEliminados();

 devuelveJson($lista);


G. php / TABLA_PASATIEMPO.php

<?php

const PASATIEMPO = "PASATIEMPO";
const PAS_ID = "PAS_ID";
const PAS_NOMBRE = "PAS_NOMBRE";
const PAS_MODIFICACION = "PAS_MODIFICACION";
const PAS_ELIMINADO = "PAS_ELIMINADO";


H. php / validaPasatiempo.php

<?php

require_once __DIR__ . "/lib/BAD_REQUEST.php";
require_once __DIR__ . "/lib/ProblemDetailsException.php";
require_once __DIR__ . "/TABLA_PASATIEMPO.php";

function validaPasatiempo($objeto)
{
 if (!isset($objeto->PAS_ELIMINADO) || !is_int($objeto->PAS_ELIMINADO))
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "El campo eliminado debe ser entero.",
   "type" => "/errors/eliminadoincorrecto.html",
  ]);

 if (
  !isset($objeto->PAS_ID)
  || !is_string($objeto->PAS_ID)
  || $objeto->PAS_ID === ""
 )
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "El id debe ser texto que no esté en blanco.",
   "type" => "/errors/idincorrecto.html",
  ]);

 if (!isset($objeto->PAS_MODIFICACION) || !is_int($objeto->PAS_MODIFICACION))
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "La modificacion debe ser número.",
   "type" => "/errors/modificacionincorrecta.html",
  ]);

 if (
  !isset($objeto->PAS_NOMBRE)
  || !is_string($objeto->PAS_NOMBRE)
  || $objeto->PAS_NOMBRE === ""
 )
  throw new ProblemDetailsException([
   "status" => BAD_REQUEST,
   "title" => "El nombre debe ser texto que no esté en blanco.",
   "type" => "/errors/nombreincorrecto.html",
  ]);

 return [
  PAS_ELIMINADO => $objeto->PAS_ELIMINADO,
  PAS_ID => $objeto->PAS_ID,
  PAS_NOMBRE => $objeto->PAS_NOMBRE,
  PAS_MODIFICACION => $objeto->PAS_MODIFICACION,
 ];
}


I. Carpeta « php / lib »

Versión para imprimir.

1. php / lib / BAD_REQUEST.php


1	<?php
2
3	const BAD_REQUEST = 400;
4

2. php / lib / devuelveJson.php

<?php

require_once __DIR__ . "/devuelveResultadoNoJson.php";

function devuelveJson($resultado)
{
 $json = json_encode($resultado);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  header("Content-Type: application/json; charset=utf-8");
  echo $json;
 }
 exit();
}


3. php / lib / devuelveResultadoNoJson.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

function devuelveResultadoNoJson()
{
 http_response_code(INTERNAL_SERVER_ERROR);
 header("Content-Type: application/problem+json; charset=utf-8");

 echo '{' .
  "status: " . INTERNAL_SERVER_ERROR .
  '"title": "El resultado no puede representarse como JSON."' .
  '"type": "/errors/resultadonojson.html"' .
  '}';
}


4. php / lib / INTERNAL_SERVER_ERROR.php


1	<?php
2
3	const INTERNAL_SERVER_ERROR = 500;

5. php / lib / manejaErrores.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";
require_once __DIR__ . "/ProblemDetailsException.php";

// Hace que se lance una excepción automáticamente cuando se genere un error.
set_error_handler(function ($severity, $message, $file, $line) {
 throw new ErrorException($message, 0, $severity, $file, $line);
});

// Código cuando una excepción no es atrapada.
set_exception_handler(function (Throwable $excepcion) {
 if ($excepcion instanceof ProblemDetailsException) {
  devuelveProblemDetails($excepcion->problemDetails);
 } else {
  devuelveProblemDetails([
   "status" => INTERNAL_SERVER_ERROR,
   "title" => "Error interno del servidor",
   "detail" => $excepcion->getMessage(),
   "type" => "/errors/errorinterno.html",
  ]);
 }
 exit();
});

function devuelveProblemDetails(array $array)
{
 $json = json_encode($array);
 if ($json === false) {
  devuelveResultadoNoJson();
 } else {
  http_response_code(isset($array["status"]) ? $array["status"] : 500);
  header("Content-Type: application/problem+json; charset=utf-8");
  echo $json;
 }
}


6. php / lib / ProblemDetailsException.php

<?php

require_once __DIR__ . "/INTERNAL_SERVER_ERROR.php";

/**
 * Detalle de los errores devueltos por un servicio.
 */
class ProblemDetailsException extends Exception
{

 public array $problemDetails;

 public function __construct(
  array $problemDetails,
 ) {
  
  parent::__construct(
   isset($problemDetails["detail"])
    ? $problemDetails["detail"]
    : (isset($problemDetails["title"])
     ? $problemDetails["title"]
     : "Error"),
   $problemDetails["status"]
    ? $problemDetails["status"]
    : INTERNAL_SERVER_ERROR
  );

  $this->problemDetails = $problemDetails;
 }
}


7. php / lib / recibeJson.php

<?php

require_once __DIR__ . "/BAD_REQUEST.php";

function recibeJson()
{
 $json = json_decode(file_get_contents("php://input"));

 if ($json === null) {

  http_response_code(BAD_REQUEST);
  header("Content-Type: application/problem+json; charset=utf-8");

  echo '{' .
   "status: " . BAD_REQUEST .
   '"title": "Los datos recibidos no están en formato JSON."' .
   '"type": "/errors/datosnojson.html"' .
   '}';

  exit();
 }

 return $json;
}


O. Carpeta « errors »

Versión para imprimir.

A. errors / datosnojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Los datos recibidos no están en formato JSON</title>

</head>

<body>

 <h1>Los datos recibidos no están en formato JSON</h1>

</body>

</html>

B. errors / eliminadoincorrecto.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El campo eliminado debe ser entero</title>

<body>

 <h1>El campo eliminado debe ser entero</h1>

</body>

</html>

C. errors / errorinterno.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>Error interno del servidor</title>

</head>

<body>

 <h1>Error interno del servidor</h1>

 <p>Se presentó de forma inesperada un error interno del servidor.</p>

</body>

</html>

D. errors / idincorrecto.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El id debe ser texto que no esté en blanco</title>

<body>

 <h1>El id debe ser texto que no esté en blanco</h1>

</body>

</html>

E. errors / modificacionincorrecta.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>La modificacion debe ser número</title>

<body>

 <h1>La modificacion debe ser número</h1>

</body>

</html>

F. errors / nombreincorrecto.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El nombre debe ser texto que no esté en blanco</title>

<body>

 <h1>El nombre debe ser texto que no esté en blanco</h1>

</body>

</html>

G. errors / resultadonojson.html

<!DOCTYPE html>
<html lang="es">

<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width">

 <title>El resultado no puede representarse como JSON</title>

</head>

<body>

 <h1>El resultado no puede representarse como JSON</h1>

 <p>
  Debido a un error interno del servidor, el resultado generado, no se puede
  recuperar.
 </p>

</body>

</html>

P. .htaccess

Este archivo configura las respuestas del servidor..
Lo utilizan principalmente servidores como Apache o Nginx.
Configura el mime type para el archivo de manifiesto y sedhabilita el uso de la cache general de http..

AddType application/manifest+json .webmanifest

ExpiresActive On

Header set Cache-Control "max-age=1, must-revalidate"


Q. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.

{
 "compilerOptions": {
  "checkJs": true,
  "strictNullChecks": true,
  "target": "ES6",
  "module": "Node16",
  "moduleResolution": "Node16",
  "lib": [
   "ES2017",
   "WebWorker",
   "DOM"
  ]
}

R. Resumen

En esta lección se muestra un ejemplo de sincronización de bases de datos.

16. PWA con Material Design (Desactualizado)

Versión para imprimir.

Este ejemplo está desactualizado, pero es un ejemplo de lo que se piede hacer.

1. Introduccion

En esta lección se presenta una PWA con Material Design, explica como construir vistas y usar componentes.
Puedes probar el ejemplo en https://gilpgpwamd.github.io/index.html.
También puedes probar el ejemplo en https://pwamd.rf.gd/.

2. Referencias

Sitios de Material Design
Material.io: Material Design es una guía de diseño para aplicaciones multiplataforma. La encuentras en https://m3.material.io/.
Herramienta para selección de colores
Material Theme Builder: https://m3.material.io/theme-builder/
Adaptación multiplataforma: La forma de adaptar Material Design en distintas plataformas está en https://material.io/design/platform-guidance/cross-platform-adaptation.html

3. Hazlo funcionar

Prueba e instala, de preferencia con Chrome, el sitio https://pwamd.rf.gd/ y en https://gilpgpwamd.github.io/.
Descarga el archivo /src/pwamd.zip y descompáctalo.
Crea tu proyecto en GitHub pages:
1. Crea una cuenta de email con el nombre de tu sitio, por ejemplo, miapp@google.com
2. Crea una cuenta de GitHub usando el email anterior y selecciona el nombre de usuario unsando la parte inicial del correo electrónico, por ejemplo miapp.
3. Crea un repositorio nuevo. En la página principal de GitHub cliquea 📘 New.
4. En la página Create a new repository introduce los siguientes datos:
  - Proporciona el nombre de tu repositorio debajo de donde dice Repository name *. Debes usar el nombre de tu cuenta seguido por .github.io; por ejemplo miapp.github.io
  - Mantén la selección Public.
  - Verifica la casilla Add a README file. En este archivo se muestra información sobre tu proyecto.
  - Cliquea License: None. y selecciona la licencia que consideres más adecuada para tu proyecto.
  - Cliquea Create repository.
5. Entra al repositorio y selecciona ⚙ Settings, luego selecciona 📁 Pages y en la sección Branches selecciona la carpeta donde se ubicará la carpeta. De preferencia selecciona / (root) para que coloques la página en la raíz del proyecto.
Importa el proyecto en GitHub:
1. En la página principal de tu proyecto en GitHub, en la pestaña < > Code, cliquea < > Code y en la sección Branches y copia la dirección que está en HTTPS, debajo de Clone.
2. En Visual Studio Code, usa el botón de la izquierda para Source Control.
3. Cliquea el botón Clone Repository.
4. Pega la url que copiaste anteriormente hasta arriba, donde dice algo como Provide repository URL y presiona la teclea Intro.
5. Selecciona la carpeta donde se guardará la carpeta del proyecto.
6. Abre la carpeta del proyecto importado.
7. Añade el contenido de la carpeta descompactada que contiene el código del ejemplo, excepto el archivo .htaccess.
Edita los archivos que desees.
Crea los íconos del proyecto con https://www.photopea.com/. Este paso se hizo com Microsoft Edge (versión Chromium), pero no funcionó con Google Chrome.
Crea los íconos enmascarables con https://maskable.app/ a partir del archivo «icono2048.png».
Coloca el archivo favicon.ico en la raíz del proyecto.
Coloca los otros íconos en la carpeta img y asegúrate de que estén declarados en el archivo site.webmanifest.
Para cambiar los colores, entra al sitio https://material-foundation.github.io/material-theme-builder/, selecciona los colores de tu aplicación, haz clic en Pick your fonts →. Elige font Roboto, haz clic en Export theme →. Haz clic en Export y selecciona Web (CSS) para descargar el zip que contiene los estilos que generan los colores. Descompacta el zip y copia los archivos de la carpeta css a la carpeta css del proyecto, sobreescribiendo los archivos del ejemplo.
El archivo sw.js tiene una lista de los archivos que se instalan. El archivo instruccionesListadoSw.txt te indica como generarla usando Visual Studio Code.
Cada vez que modifiques los archivos, debes modificar el valor de VERSION en el archivo sw.js para poder ver los cambios en el navegador.
Si tu proyecto no usa backend, haz clic derecho en index.html, selecciona Open with Live Server y se abre el navegador para que puedas probar localmente el ejemplo.
Si tu proyecto usa PHP, haz clic derecho en index.html, selecciona PHP Server: serve project y se abre el navegador para que puedas probar localmente el ejemplo.
Haz al menos una captura de la ventana de tu aplicación con orientación vertical y otra con orientación horizontal, todas ellas de 320 px como mínimo y 3,840 px como máximo.
Coloca las capturas en la carpeta img y asegúrate de que estén declaradas en el archivo site.webmanifest.
Cuando desarrolles, es incómodo modificar la versión cada que realizas cambios; en vez de ello desinstala la app:
1. Abre las herramientas de depuración haciendo clic derecho en la página y selecciona Inspeccionar (o Inspect si aparece en inglés).
2. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamoento (o Storage en inglés). Cliquea Borrar datos del sitio.
3. Recarga la app, de preferencia haciendo clic derecho en el ícono de volver a cargar la página y seleccionando vaciar caché y volver a cargar de manera forzada (o algo parecido). Si no aparece un menú emergente, simplemente cliquea volver a cargar la página . Revisa que no aparezca ningún error ni en la pestañas Consola, ni en Red.
4. Tanbién puedes usar la combinación de teclas Ctrl+Mayúsculas+r para forzar que se actualice temporalmente el navegador en caso de que no se vean los cambios.
5. En la Pestaña Aplicación (o Application en inglés) selecciona Archivo de manifiesto (o Manifest file en inglés). Esta herramienta analiza la estructura del archivo de manifiesto y te indica si hay un error. InfinityFree bloquea el análisis de las imágenes.
6. En la Pestaña Aplicación (o Application en inglés) selecciona Almacenamiento en caché (o Cache storage en inglés). Aquí puedes revisar si el caché de la aplicación se llenó correctamente. En caso de que esté vacío, es que hubo algún error durante la carga y la app se ejecuta más lenta.
Para depurar paso a paso haz lo siguiente:
1. En el navegador, haz clic derecho en la página que deseas depurar y selecciona inspeccionar.
2. Selecciona la pestaña Fuentes (o Sources si tu navegador está en Inglés).
3. Selecciona el archivo donde vas a empezar a depurar.
4. Haz clic en el número de la línea donde vas a empezar a depurar.
5. Recarga la página de manera normal.
6. Empieza a usar tu sitio.
7. Si se ejecuta alguna de las líneas de código seleccionadas, aparece resaltada en la pestaña de fuentes. Usa los controles de depuración para avanzar, como se muestra en este video.
Cuando usas GitHub pages, antes de subir los archivos, no debes modificar el valor de VERSION en el archivo sw.js.
Para subir el código a GitHub, en la sección de SOURCE CONTROL, en Message introduce un mensaje sobre los cambios que hiciste, por ejemplo index.html corregido, selecciona v y luego Commit & Push.
Si usas GitHub pages:
1. Entra a la página de tu repositorio y abajo a la derecha, selecciona el enlace github-pages.
2. Se muestran los despliegues realizados. Recarga la página hasta que apareca el mensaje de tu último push con una palomita dentro de un círculo verde.
3. A partir de este momento, espera al menos 11 minutos para modificar el valor de VERSION en el archivo sw.js y volver a subir el proyecto.
Si no usas GitHub pages:
1. Sube el proyecto al hosting que elijas sin incluir el archivo .htaccess. En algunos casos puedes usar filezilla (https://filezilla-project.org/)
2. En algunos host como InfinityFree, tienes que configurar el certificado SSL.
3. En algunos host, como InfinityFree, debes subir el archivo .htaccess cuando el certificado SSL se ha creado e instalado. Sirve para forzar el uso de https, para eliminar el control de cache, pues ahora lo lleva el service worker y para asignar el mime type correcto para el archivo de manifest.
4. Abre un navegador y prueba el proyecto en tu hosting.
5. En el hosting InfinityFree, la primera ves que corres la página, puede marcar un mensaje de error, pero al recargar funciona correctamente. Puedes evitar este problema usando un dominio propio.
Instala y usa tu PWA en Windows. Aunque en este video se recomienda usar Edge, al momento de actualizar el contenido, la opción más recomendada es Chrome para que te muestre las descripciones y las capturas de pantalla.
Instala y usa tu PWA en Android. Al momento de actualizar las notas, tal vez no te aparezca el botón para instalar y tengas que seleccionar la acción de instalar que aparece en el menú de extensión de Chrome.
Instala y usa tu PWA en iOS (iPhone y iPad).

4. Archivos

Haz clic en los triángulos para expandir las carpetas

5. index.html - Página principal

La página principal de las aplicaciónes móviles incluye una barra de aplicación centrada, cuyo nombre oficial es centered aligned top app bar, que contiene:
- El título de la aplicación, que se muestra centrado,
- al inicio, de manera opcional, un botón de ícono navegación y
- al final, un botón de acción, mostrando un ícono, que puede servir para acceder al perfil del usuario, mostrando su avatar, acceder a la configuración de la app, mostrando un engrane, o alguna otra acción.
Para que el contenido se muestra adecuadamente, se usa el elemento personalizado md-top-app-bar, cuyo comportamiento está definido en la clase MdTopAppBar. Hay que añadirle class="center-aligned"
Para el título, dentro de la la barra de aplicación se usa un elemento de tipo h1.
El botón opcional de navegación debe llevar al atributo slot="navigation".
El botón opcional de acción debe llevar al atributo slot="action". En los ejemplos con pestañas se muestra su uso.
El botón de perfil debe llevar la clase avatar.
Para añadir elementos debajo del título, indica su id con el atributo adicional. Los ejemplos sobre pestañas indican como.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>PWA con MD</title>
8
9	<!-- Resumen para los motores de búsqueda. -->
10	<meta name="description" content="Ejemplo de PWA con Material Design">
11
12	<script src="js/registraServiceWorker.js"></script>
13
14	<meta name="viewport" content="width=device-width">
15
16	<!-- Color de la barra de navegación de Chrome en dispositivos móviles. -->
17	<meta name="theme-color" content="#fffbfe">
18
19	<!-- Ícono para la página web, que normalmente se pone en la raíz del sitio.
20	Puede ser diferente para cada página. -->
21	<link rel="icon" sizes="32x32" href="favicon.ico">
22
23	<!-- Configuración de la PWA para Chrome, Edge y Safari.
24	Debe ponerse en todas las páginas. -->
25	<link rel="manifest" href="site.webmanifest">
26
27	<!-- Permite a los navegadores, que como Safari no soportan el estándar
28	completo de custom elementsm, lo cumplan totalmente. Debe ponerse en todas
29	las páginas. -->
30	<script src="ungap/custom-elements.js"></script>
31
32	<!-- Configuración de todas las páginas con JavaSript. -->
33	<script type="module" src="js/configura.js"></script>
34	<link rel="stylesheet" href="css/estilos.css">
35	<link rel="stylesheet" href="css/transicion_completa.css">
36
37	</head>
38
39	<body>
40
41	<md-top-app-bar class="center-aligned">
42
43	<h1>PWA con MD</h1>
44
45	<button is="md-menu-button" slot="navigation"></button>
46
47	<button type="button" class="md-standard-icon-button avatar" title="Perfil"
48	slot="action">
49	<span class="material-symbols-outlined">account_circle</span>
50	</button>
51
52	</md-top-app-bar>
53
54	<main>
55	<p>
56	Esta es la página principal de la app. Las X que siguen son para que veas
57	como se comporta cuando se hace scroll.
58	</p>
59	<p>x</p>
60	<p>x</p>
61	<p>x</p>
62	<p>x</p>
63	<p>x</p>
64	<p>x</p>
65	<p>x</p>
66	<p>x</p>
67	<p>x</p>
68	<p>x</p>
69	<p>x</p>
70	<p>x</p>
71	<p>x</p>
72	<p>x</p>
73	<p>x</p>
74	<p>x</p>
75	<p>x</p>
76	<p>x</p>
77	<p>x</p>
78	<p>x</p>
79	<p>x</p>
80	<p>x</p>
81	<p>x</p>
82	</main>
83
84	<nav-drw></nav-drw>
85
86	</body>
87
88	</html>

Solo para los más rudos

Las barras de aplicación en Material Design están definidas en https://m3.material.io/components/top-app-bar/overview.

6. secundaria.html - Vista secundaria

Cuando la barra de aplicación no está en la página principal, puede mostrar hasta 3 botones de ícono a la derecha. Deben ser las acciones más usadas.
Cuando hay más de 3 acciones, coloca las menos usadas en el overflow menu, que se despliega cliqueando el botón con el ícono ⋯ en iOS, y el ícono ⁝ en otros sistemas operativos.
Cuando en iOS no hay íconos de acción, el título debe ir centrado.
Para que el contenido se muestra adecuadamente, se usa el elemento personalizado md-top-app-bar, cuyo comportamiento está definido en la clase MdTopAppBar.
El boton de overflow debe ser el último con slot="action". Usa el atributo is="md-overflow-button". Su atributo onclick debe alternar el overflow menu.
El overflow menu, se define con el elemento personalizado mdoverflow-menu, cuyo comportamiento está definido en la clase MdOverflowMenu.
Para el título, dentro de la la barra de aplicación se usa un elemento de tipo h1. El texto debe ser corto y caber en un solo renglón, o de lo conrario se cortará.
Para mostrar un título más largo, hay que poner después de la barra de aplicación otro h1 y ponerle un id. Ese id se pone como valor del atributo headline dentro de la md-top-app-bar. Cuando la página tenga el scroll hasta arriba, se despliega el h1 que está dentro del md-top-app-bar.. Al hacer scroll, este título se compacta y se muestra el título definido con el atributo headline.
Si deseas que la letra del encabezado largo sea más pequeña, usa la clase medium dentro de la md-top-app-bar.
El botón de navegación opcional debe llevar el atributo slot="navigation".
Los botones de acción deben llevar el atributo slot="action".
El overflow menú debe llevar el atributo slot="overflow".
Para añadir elementos debajo del título, usa el atributo slot="adicional".
El botón de ícono para abrir el overflow menu, se coloca dentro de este menú usando el atributo slot="icon".
Los botones de acción se colocan dentro del overflow menu sin ningún atributo slot.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Vista secundaria - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar class="medium" headline="h1Headline">
26
27	<h1>Secundaria</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	<button type="button" class="md-standard-icon-button" title="Agregar"
32	slot="action">
33	<span class="material-symbols-outlined">add</span>
34	</button>
35
36	<button type="button" class="md-standard-icon-button" title="Editar"
37	slot="action">
38	<span class="material-symbols-outlined">edit</span>
39	</button>
40
41	<button is="md-overflow-button" slot="action"
42	onclick="overflow.alterna(this)"></button>
43
44	</md-top-app-bar>
45
46	<h1 id="h1Headline">Página secundaria</h1>
47
48	<main>
49	<p>
50	Esta es una página secundaria de la app. Las X que siguen son para que veas
51	como se comporta cuando se hace scroll.
52	</p>
53	<p>x</p>
54	<p>x</p>
55	<p>x</p>
56	<p>x</p>
57	<p>x</p>
58	<p>x</p>
59	<p>x</p>
60	<p>x</p>
61	<p>x</p>
62	<p>x</p>
63	<p>x</p>
64	<p>x</p>
65	<p>x</p>
66	<p>x</p>
67	<p>x</p>
68	<p>x</p>
69	<p>x</p>
70	<p>x</p>
71	<p>x</p>
72	<p>x</p>
73	<p>x</p>
74	<p>x</p>
75	<p>x</p>
76	</main>
77
78	<md-overflow-menu id="overflow">
79
80	<button type="button">
81	<span class="material-symbols-outlined">star</span>
82	Marcar favorito
83	</button>
84
85	<button type="button">
86	<span class="material-symbols-outlined"> delete</span>
87	Eliminar
88	</button>
89
90	</md-overflow-menu>
91
92	<nav-drw></nav-drw>
93
94	</body>
95
96	</html>

Solo para los más rudos

Las barras de aplicación en Material Design están definidas en https://m3.material.io/components/top-app-bar/overview.
Los menús en Material Design están definidos en https://m3.material.io/components/menus/overview.

7. iconos.html - Íconos oficiales

El sitio oficial de los íconos de Material Design es https://fonts.google.com/icons.
En el sitio oficial te aparecen los íconos en diferentes estilos.
Si seleccionas un ícono y su estilo, te aparecen las instrucciones de como añadirlo a tu código.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Íconos - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26
27	<h1>Íconos</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<main>
34
35	<button type="button" class="md-standard-icon-button">
36	<span class="material-symbols-outlined">favorite</span>
37	</button>
38
39	<button type="button" class="md-standard-icon-button" disabled>
40	<span class="material-symbols-outlined">bolt</span>
41	</button>
42
43	<a class="md-standard-icon-button" target="_blank" rel="noopener noreferrer"
44	href="https://google.com">
45	<span class="material-symbols-outlined">star</span></a>
46
47	<span class="material-symbols-outlined">thumb_up</span>
48
49	<button type="button" class="md-fab-primary"
50	style="position: fixed; bottom: 1rem; right: 1rem;">
51	<span class="material-symbols-outlined">add</span>
52	</button>
53
54	</main>
55
56	<nav-drw></nav-drw>
57
58	</body>
59
60	</html>

Solo para los más rudos

Los botones en Material Design están definidos en https://m3.material.io/components/icon-buttons/overview.
Los botones FAB en Material Design están definidos en https://m3.material.io/components/floating-action-button/overview.

8. botones.html - Botones

Los botones principales deben usar la clase md-filled-button. Solo se pone un botón principal por pagina.
Los botones secundarios deben usar la clase md-outline-button.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Botones - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26
27	<h1>Botones</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<main>
34
35	<p>
36
37	<button class="md-filled-button">
38	Primario
39	</button>
40
41	<button class="md-outline-button">
42	Secundario
43	</button>
44
45	</p>
46
47	</main>
48
49	<nav-drw></nav-drw>
50
51	</body>
52
53	</html>

Solo para los más rudos

Los botones en Material Design están definidos en https://m3.material.io/components/buttons/overview.

9. campos.html - Campos de texto

Se usa una etiqueta flotante que se muestra grande cuando el contenido de campo es una cadena vacía y se muestra pequeña cuando el elemento se está capturando o cuando su contenido no está vacío.
Añade la class md-filled-text-field a un elemento de tipo label, span, p o div
Usa la class float junto a la class md-filled-text-field cuando quieras que la etiqueta esté arriba todo el tiempo. Esto sirve para los output, input type="date" e input type="file" entre otros tipos de elemento.
El rótulo de las etiquetas deben ser span o label y deben colocarse inmediatamente después del elemento que realiza la captura.
Para que la etiquta flote correctamente, el elemento de captura debe repetir el rótulo de la etiqueta en el atributo placeholder.
Los textos de ayuda deben ser elementos de tipo small que se colocan después de la etiqueta.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Campos de texto - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar headline="headline">
26
27	<h1>Texto</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Campos de texto</h1>
34
35	<main>
36
37	<!-- Usa
38	class="float"
39	cuando quieras que la etiqueta esté arriba todo el tiempo. -->
40	<p>
41	<label class="md-filled-text-field float">
42	<output>Saludo</output>
43	<span>Saludo</span>
44	</label>
45	</p>
46
47	<p>
48	<label class="md-filled-text-field">
49	<input required placeholder="Nombre*">
50	<span>Nombre *</span>
51	<small>Obligatorio</small>
52	</label>
53	</p>
54
55	<p>
56	<label class="md-filled-text-field">
57	<input type="email" placeholder="Email">
58	<span accesskey="M">Email</span>
59	</label>
60	</p>
61
62	<p>
63	<label class="md-filled-text-field float">
64	<input type="date" placeholder="Fecha">
65	<span>Fecha</span>
66	</label>
67	</p>
68
69	<p>
70	<label class="md-filled-text-field">
71	<textarea rows="3" placeholder="Dirección"></textarea>
72	<span>Dirección</span>
73	</label>
74	</p>
75
76	</main>
77
78	<nav-drw></nav-drw>
79
80	</body>
81
82	</html>

Solo para los más rudos

Los campos de texto en Material Design están definidos en https://m3.material.io/components/text-fields/overview.
Los menús en Material Design están definidos en https://material.io/components/menus.

10. select.html - Selects

Este control se adapta mejor a Material Designe que el select de HTML.
Usa el elemento personalizado md-select-menu, definido con la clase MdSelectMenu.
Coloca el elemento md-select-menu con slot="input-text", dentro de un <p class="md-filled-text-field">. Usa un span cono etiqueta.
Para asignar un valor inicial, usa el atributo value al md-select-menu.
Para que forzosamente se deba seleccionar una opción, agrega el atributo booleano required al md-select-menu.
Para las opciones usa el elemento personalizado md-options-menu, definido con la clase MdOptionMenu. Dentro de él coloca elementos tipo span que indican el value de la opción con el atributo data-value y cuyo contenido es el texto de la opción.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Select - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<form>
26
27	<md-top-app-bar>
28
29	<h1>Select</h1>
30
31	<button is="md-menu-button" slot="navigation"></button>
32
33	</md-top-app-bar>
34
35	<main>
36
37	<p>
38	<span id="etiquetaGrupo" class="md-filled-text-field" accesskey="G">
39	<md-select-menu name="grupo" required value="IC21"
40	aria-labelledby="etiquetaGrupo"
41	options="opcionesDeGrupo"></md-select-menu>
42	<span>Grupo *</span>
43	<small>Obligatorio</small>
44	</span>
45	</p>
46
47	<p>
48	<button class="md-filled-button" style="width: 100%;">Enviar</button>
49	</p>
50
51	</main>
52
53	<md-options-menu id="opcionesDeGrupo" aria-label="Opciones de grupo">
54	<span data-value="" title="Selecciona opción"></span>
55	<span data-value="IC21">IC-21</span>
56	<span data-value="IC22">IC-22</span>
57	<span data-value="IC23">IC-23</span>
58	</md-options-menu>
59
60	<nav-drw></nav-drw>
61
62	</form>
63
64	</body>
65
66	</html>

Solo para los más rudos

Los campos de texto en Material Design están definidos en https://m3.material.io/components/text-fields/overview.
Los menús en Material Design están definidos en https://m3.material.io/components/menus/overview.

11. interruptor.html - Interruptores

Usa un elemento input con el atribto type="checkbox" y class="md-switch".

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Interruptores - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26
27	<h1>Interruptores</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<main>
34	<p>
35	<label accesskey="R">
36	Muestra resultados
37	<input type="checkbox" class="md-switch">
38	</label>
39	</p>
40	</main>
41
42	<nav-drw></nav-drw>
43
44	</body>
45
46	</html>

Solo para los más rudos

Los interruptores en Material Design están defnidos en https://m3.material.io/components/switch/overview.

12. slider.html

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Sliders - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26
27	<h1>Sliders</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<main>
34
35	<md-slider-field>
36	<label>Rango</label>
37	<input type="range" slot="slider" min="1" max="10">
38	<small slot="supporting">Calcúlalo bien</small>
39	</md-slider-field>
40
41	</main>
42
43	<nav-drw></nav-drw>
44
45	</body>
46
47	</html>

Solo para los más rudos

Los sliders en Material Design están definidos en https://m3.material.io/components/sliders/overview.

13. segmentado.html - Botones segmentados

Permiten selecionar de entre 2 a 5 opciones.
La base es un elemento con class="md-segmented-button".
Puedes usar type="radio" para seleccionar una sola opción para un mismo valor del atributo name.
Puedes usar type="checkbox" para seleccionar varias opciones con un mismo valor del atributo name.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Botón segmentado - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar headline="headline">
26
27	<h1>Segmentado</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Botón segmentado</h1>
34
35	<main>
36
37	<p class="md-segmented-button">
38
39	<input id="bueno" type="radio" name="estado" checked value="2">
40	<label for="bueno">
41	<span class="material-symbols-outlined">done</span>
42	Bueno
43	</label>
44
45	<input id="intermedio" type="radio" name="estado" value="1">
46	<label for="intermedio">
47	<span class="material-symbols-outlined">done</span>
48	Intermedio
49	</label>
50
51	<input id="malo" type="radio" name="estado" value="0">
52	<label for="malo">
53	<span class="material-symbols-outlined">done</span>
54	Malo
55	</label>
56
57	</p>
58
59	</main>
60
61	<nav-drw></nav-drw>
62
63	</body>
64
65	</html>

Solo para los más rudos

Los botones segmentados de Material Design están defnidos en https://m3.material.io/components/segmented-buttons/overview.

14. one-line.html - Listas con elementos one-line

Las listas de Material Design usan un ul con la clase md-list.
Las listas pueden usar li con las clases one-line, two-line o three-line
Si el elemento es un hipervínculo, el elemento li no lleva clases y en su interior se pone una a con la clase one-line, two-line o three-line
Los elementos de la clase one-line, tienen el siguiente contenido:
- Un encabezado con un elemento span class="headline" que muestra texto resaltado truncado a un renglón.
- Opcionalmente muestran una imagen a la izquierda, que puede ser:
  Un pequeño ícono cuadrado
  - Se añade la clase icon junto a la clase one-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase one-line.
  Una imagen cuadrada
  - Se añade la clase image junto a la clase one-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase one-line.
  Una imagen rectangular
  - Se añade la clase video junto a la clase one-line.
  - Se añade un img dentro del elemento con la clase one-line.
  El avatar de un usuario (se muestra dentro de un círculo)
  - Se añade la clase avatar junto a la clase one-line.
  - Se añade un img, un label con las iniciales del usuario o un span class="material-symbols-outlined" dentro del elemento con la clase one-line.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Listas one-line - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar headline="headline">
26
27	<h1>one-line</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Listas one-line</h1>
34
35	<main>
36
37	<ul class="md-list">
38
39	<li class="md-one-line">
40	<span class="headline">
41	Ciudad de México
42	</span>
43	</li>
44
45	<li class="md-one-line">
46	<span class="headline">
47	Lorem ipsum dolor sit amet consectetur adipisicing elit.
48	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
49	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
50	alias!
51	</span>
52	</li>
53
54	<li class="md-one-line icon">
55	<span class="material-symbols-outlined">account_balance</span>
56	<span class="headline">
57	Atenas
58	</span>
59	</li>
60
61	<li class="md-one-line avatar">
62	<img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
63	<span class="headline">
64	Ana
65	</span>
66	</li>
67
68	<li class="md-one-line image">
69	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
70	<span class="headline">
71	Neza
72	</span>
73	</li>
74
75	<li class="md-one-line video">
76	<img alt="Ciudad de San Francisco"
77	src="img/pexels-craig-dennis-3701822.jpg">
78	<span class="headline">
79	San Francisco
80	</span>
81	</li>
82
83	<li class="md-one-line video">
84	<img alt="Ciudad de San Francisco"
85	src="img/pexels-craig-dennis-3701822.jpg">
86	<span class="headline">
87	Lorem ipsum dolor sit amet consectetur adipisicing elit.
88	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
89	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
90	</span>
91	</li>
92
93	<li>
94	<a class="md-one-line image" target="_blank" rel=”noreferrer”
95	href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
96	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
97	<span class="headline">
98	Neza Link
99	</span>
100	</a>
101	</li>
102
103	</ul>
104
105	<footer>
106	<ul>
107	<li>
108	<p>
109	<small>
110	<a target="_blank" rel=”noreferrer”
111	href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
112	La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
113	Haz clic en este hipervínculo para más información.
114	</a>
115	</small>
116	</p>
117	</li>
118	<li>
119	<p>
120	<small>
121	<a target="_blank" rel=”noreferrer”
122	href="https://www.pinterest.com.mx/ludresi/">
123	La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
124	Pinterest. Haz clic en este hipervínculo para más información.
125	</a>
126	</small>
127	</p>
128	</li>
129	<li>
130	<p>
131	<small>
132	<a target="_blank" rel=”noreferrer”
133	href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
134	La foto del puente de San Francisco es de Craig Dennis, publicada en el
135	sitio Pexels. Haz clic en este hipervínculo para más información.
136	</a>
137	</small>
138	</p>
139	</li>
140	</ul>
141	</footer>
142
143	</main>
144
145	<nav-drw></nav-drw>
146
147	</body>
148
149	</html>

Solo para los más rudos

Las listas están definida en https://m3.material.io/components/lists/overview.

15. two-line.html - Listas con elementos two-line

Las listas de Material Design usan un ul con la clase md-list.
Las listas pueden usar li con las clases one-line, two-line o three-line
Si el elemento es un hipervínculo, el elemento li no lleva clases y en su interior se pone una a con la clase one-line, two-line o three-line
Los elementos de la clase two-line, tienen el siguiente contenido:
- Un encabezado con un elemento span class="headline" que muestra texto resaltado truncado a un renglón.
- Un elemento span class="supporting" que muestra texto mas pequeño y truncado a un renglón.
- Opcionalmente muestran una imagen a la izquierda, que puede ser:
  Un pequeño ícono cuadrado
  - Se añade la clase icon junto a la clase two-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase two-line.
  Una imagen cuadrada
  - Se añade la clase image junto a la clase two-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase two-line.
  Una imagen rectangular
  - Se añade la clase video junto a la clase two-line.
  - Se añade un img dentro del elemento con la clase two-line.
  El avatar de un usuario (se muestra dentro de un círculo)
  - Se añade la clase avatar junto a la clase two-line.
  - Se añade un img, un label con las iniciales del usuario o un span class="material-symbols-outlined" dentro del elemento con la clase two-line.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Listas two-line - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar headline="headline">
26
27	<h1>two-line</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Listas two-line</h1>
34
35	<main>
36
37	<ul class="md-list">
38
39	<li class="md-two-line">
40	<span class="headline">
41	Ciudad de México 2
42	</span>
43	<span class="supporting">
44	Lorem ipsum dolor sit amet consectetur adipisicing elit.
45	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
46	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
47	alias!
48	</span>
49	</li>
50
51	<li class="md-two-line icon">
52	<span class="material-symbols-outlined">account_balance</span>
53	<span class="headline">
54	Atenas 2
55	</span>
56	<span class="supporting">
57	Lorem ipsum dolor sit amet consectetur adipisicing elit.
58	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
59	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
60	alias!
61	</span>
62	</li>
63
64	<li class="md-two-line avatar">
65	<img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
66	<span class="headline">
67	Ana 2
68	</span>
69	<span class="supporting">
70	Lorem ipsum dolor sit amet consectetur adipisicing elit.
71	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
72	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
73	alias!
74	</span>
75	</li>
76
77	<li class="md-two-line image">
78	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
79	<span class="headline">
80	Neza 2
81	</span>
82	<span class="supporting">
83	Lorem ipsum dolor sit amet consectetur adipisicing elit.
84	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
85	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
86	alias!
87	</span>
88	</li>
89
90	<li class="md-two-line video">
91	<img alt="Ciudad de San Francisco"
92	src="img/pexels-craig-dennis-3701822.jpg">
93	<span class="headline">
94	San Francisco 2
95	</span>
96	<span class="supporting">
97	Lorem ipsum dolor sit amet consectetur adipisicing elit.
98	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
99	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
100	alias!
101	</span>
102	</li>
103
104	<li>
105	<a class="md-two-line image" target="_blank" rel="noopener noreferrer"
106	href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
107	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
108	<span class="headline">
109	Neza Link 2
110	</span>
111	<span class="supporting">
112	Lorem ipsum dolor sit amet consectetur adipisicing elit.
113	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
114	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
115	alias!
116	</span>
117	</a>
118	</li>
119
120	</ul>
121
122	<footer>
123	<ul>
124	<li>
125	<p>
126	<small>
127	<a target="_blank" rel="noopener noreferrer"
128	href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
129	La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
130	Haz clic en este hipervínculo para más información.
131	</a>
132	</small>
133	</p>
134	</li>
135	<li>
136	<p>
137	<small>
138	<a target="_blank" rel=”noreferrer”
139	href="https://www.pinterest.com.mx/ludresi/">
140	La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
141	Pinterest. Haz clic en este hipervínculo para más información.
142	</a>
143	</small>
144	</p>
145	</li>
146	<li>
147	<p>
148	<small>
149	<a target="_blank" rel=”noreferrer”
150	href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
151	La foto del puente de San Francisco es de Craig Dennis, publicada en el
152	sitio Pexels. Haz clic en este hipervínculo para más información.
153	</a>
154	</small>
155	</p>
156	</li>
157	</ul>
158	</footer>
159
160	</main>
161
162	<nav-drw></nav-drw>
163
164	</body>
165
166	</html>

Solo para los más rudos

Las listas están definida en https://m3.material.io/components/lists/overview.

16. three-line.html - Listas con elementos three-line

Las listas de Material Design usan un ul con la clase md-list.
Las listas pueden usar li con las clases one-line, two-line o three-line
Si el elemento es un hipervínculo, el elemento li no lleva clases y en su interior se pone una a con la clase one-line, two-line o three-line
Los elementos de la clase three-line, tienen el siguiente contenido:
- Un encabezado con un elemento span class="headline" que muestra texto resaltado truncado a un renglón.
- Un elemento span class="supporting" que muestra texto mas pequeño y truncado 2 renglones.
- Opcionalmente muestran una imagen a la izquierda, que puede ser:
  Un pequeño ícono cuadrado
  - Se añade la clase icon junto a la clase three-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase three-line.
  Una imagen cuadrada
  - Se añade la clase image junto a la clase three-line.
  - Se añade un img o un span class="material-symbols-outlined" dentro del elemento con la clase three-line.
  Una imagen rectangular
  - Se añade la clase video junto a la clase three-line.
  - Se añade un img dentro del elemento con la clase three-line.
  El avatar de un usuario (se muestra dentro de un círculo)
  - Se añade la clase avatar junto a la clase three-line.
  - Se añade un img, un label con las iniciales del usuario o un span class="material-symbols-outlined" dentro del elemento con la clase three-line.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Listas tree-line - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar headline="headline">
26
27	<h1>tree-line</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<h1 id="headline">Listas tree-line</h1>
34
35	<main>
36
37	<ul class="md-list">
38
39	<li class="md-three-line">
40	<span class="headline">
41	Ciudad de México 3
42	</span>
43	<span class="supporting">
44	Lorem ipsum dolor sit amet consectetur adipisicing elit.
45	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
46	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
47	alias!
48	</span>
49	</li>
50
51	<li class="md-three-line icon">
52	<span class="material-symbols-outlined">account_balance</span>
53	<span class="headline">
54	Atenas 3
55	</span>
56	<span class="supporting">
57	Lorem ipsum dolor sit amet consectetur adipisicing elit.
58	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
59	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
60	alias!
61	</span>
62	</li>
63
64	<li class="md-three-line avatar">
65	<img alt="Avatar de Ana" src="img/pexels-moises-patrício-10961948.jpg">
66	<span class="headline">
67	Ana 3
68	</span>
69	<span class="supporting">
70	Lorem ipsum dolor sit amet consectetur adipisicing elit.
71	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
72	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
73	alias!
74	</span>
75	</li>
76
77	<li class="md-three-line image">
78	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
79	<span class="headline">
80	Neza 3
81	</span>
82	<span class="supporting">
83	Lorem ipsum dolor sit amet consectetur adipisicing elit.
84	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
85	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
86	alias!
87	</span>
88	</li>
89
90	<li class="md-three-line video">
91	<img alt="Ciudad de San Francisco"
92	src="img/pexels-craig-dennis-3701822.jpg">
93	<span class="headline">
94	San Francisco 3
95	</span>
96	<span class="supporting">
97	Lorem ipsum dolor sit amet consectetur adipisicing elit.
98	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
99	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
100	alias!
101	</span>
102	</li>
103
104	<li>
105	<a class="md-three-line image" target="_blank" rel=”noreferrer”
106	href="https://culturacolectiva.com/historia/ciudad-neza-su-historia-en-fotografias/">
107	<img alt="Coyote de Neza" src="img/Escultura_de_coyote.jpeg">
108	<span class="headline">
109	Neza Link 3
110	</span>
111	<span class="supporting">
112	Lorem ipsum dolor sit amet consectetur adipisicing elit.
113	Laboriosam eaque unde voluptates tempore ad suscipit libero, saepe neque
114	illo amet, eos ea similique quia, maiores tenetur modi nobis expedita
115	alias!
116	</span>
117	</a>
118	</li>
119
120	</ul>
121
122	<footer>
123	<ul>
124	<li>
125	<p>
126	<small>
127	<a target="_blank" rel=”noreferrer”
128	href="https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/">
129	La foto de la niña es de Moises Patrício, publicada en el sitio Pexels.
130	Haz clic en este hipervínculo para más información.
131	</a>
132	</small>
133	</p>
134	</li>
135	<li>
136	<p>
137	<small>
138	<a target="_blank" rel=”noreferrer”
139	href="https://www.pinterest.com.mx/ludresi/">
140	La foto del Coyote de Neza es de Ludres Isan, publicada en el sitio
141	Pinterest. Haz clic en este hipervínculo para más información.
142	</a>
143	</small>
144	</p>
145	</li>
146	<li>
147	<p>
148	<small>
149	<a target="_blank" rel=”noreferrer”
150	href="https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/">
151	La foto del puente de San Francisco es de Craig Dennis, publicada en el
152	sitio Pexels. Haz clic en este hipervínculo para más información.
153	</a>
154	</small>
155	</p>
156	</li>
157	</ul>
158	</footer>
159
160	</main>
161
162	<nav-drw></nav-drw>
163
164	</body>
165
166	</html>

Solo para los más rudos

Las listas están definida en https://m3.material.io/components/lists/overview.

17. tarjetas.html - Tarjetas

Las listas de tarjetas deben usar un div class="md-cards".
Los elementos de la lista de tarjetas pueden ser div, span o a
Pueden llevar multimedia, que debe colocarse dentro de un elemento de tipo figure.
El texto de encabezado se marca con la class headline.
El texto de soporte se marca con la class supporting.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Tarjetas - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26	<h1>Tarjetas</h1>
27
28	<button is="md-menu-button" slot="navigation"></button>
29
30	</md-top-app-bar>
31
32	<div class="md-cards">
33
34	<a target="_blank" rel=”noreferrer”
35	href="https://www.pexels.com/es-es/foto/lobo-blanco-y-negro-397857/">
36	<figure>
37	<img alt="Lobo" src="img/pexels-steve-397857.jpg">
38	</figure>
39	<span class="headline">
40	Lobo
41	</span>
42	<span class="supporting">
43	Foto de Steve en Pexels.
44	</span>
45	</a>
46
47	<a target="_blank" rel=”noreferrer”
48	href="https://www.pexels.com/es-es/foto/foto-de-buho-ural-3732453/">
49	<figure>
50	<img alt="Buho" src="img/pexels-erik-karits-3732453.jpg">
51	</figure>
52	<span class="headline">
53	Buho
54	</span>
55	<span class="supporting">
56	Foto de Erik Karits en Pexels
57	</span>
58	</a>
59
60	<a target="_blank" rel=”noreferrer”
61	href="https://www.pexels.com/es-es/foto/perro-de-pelo-corto-marron-y-blanco-acostado-3978352/">
62	<figure>
63	<img alt="Perro" src="img/pexels-creative-workshop-3978352.jpg">
64	</figure>
65	<span class="headline">
66	Perro
67	</span>
68	<span class="supporting">
69	Foto de Creative Workshop en Pexels
70	</span>
71	</a>
72
73	<a target="_blank" rel=”noreferrer”
74	href="https://www.pexels.com/es-es/foto/gatito-gris-en-bolsa-de-papel-plateada-141496/">
75	<figure>
76	<img alt="Gato" src="img/pexels-vadim-b-141496.jpg">
77	</figure>
78	<span class="headline">
79	Gato
80	</span>
81	<span class="supporting">
82	Foto de Vadim B en Pexels
83	</span>
84	</a>
85
86	<a target="_blank" rel=”noreferrer”
87	href="https://www.pexels.com/es-es/foto/leon-marron-2270848/">
88	<figure>
89	<img alt="León" src="img/pexels-ralph-2270848.jpg">
90	</figure>
91	<span class="headline">
92	León
93	</span>
94	<span class="supporting">
95	Foto de Ralph en Pexels
96	</span>
97	</a>
98
99	<a target="_blank" rel=”noreferrer”
100	href="https://www.pexels.com/es-es/foto/oso-cafe-35435/">
101	<figure>
102	<img alt="Oso" src="img/pexels-rasmus-svinding-35435.jpg">
103	</figure>
104	<span class="headline">
105	Oso
106	</span>
107	<span class="supporting">
108	Foto de Rasmus Svinding en Pexels
109	</span>
110	</a>
111
112	<a target="_blank" rel=”noreferrer”
113	href="https://www.pexels.com/es-es/foto/animal-perro-mono-hierba-10226903/">
114	<figure>
115	<img alt="Coyote" src="img/pexels-esteban-arango-10226903.jpg">
116	</figure>
117	<span class="headline">
118	Coyote
119	</span>
120	<span class="supporting">
121	Foto de Esteban Arango en Pexels
122	</span>
123	</a>
124
125	</div>
126
127	<nav-drw></nav-drw>
128
129	</body>
130
131	</html>

Solo para los más rudos

Las tarjetas están definida en https://m3.material.io/components/cards/specs.

18. Cajón de navegación

Se usa para seleccionar entre 5 o más vistas.
Se usa en:
- Móvil
- Tablet
- Escritorio
Algunos diseñadores prefieren usar pestañas, barras de navegación o navigation rail.
Se crea el elemento personalizado nav-drw. Puedes ver su código en m-js/m-nav-drw-js.html
Coloca el botón is="md-menu-button", dentro del md-top-app-bar con slot="navigation".
Coloca nav-drw hasta el final.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Vista secundaria - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar class="medium" headline="h1Headline">
26
27	<h1>Secundaria</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	<button type="button" class="md-standard-icon-button" title="Agregar"
32	slot="action">
33	<span class="material-symbols-outlined">add</span>
34	</button>
35
36	<button type="button" class="md-standard-icon-button" title="Editar"
37	slot="action">
38	<span class="material-symbols-outlined">edit</span>
39	</button>
40
41	<button is="md-overflow-button" slot="action"
42	onclick="overflow.alterna(this)"></button>
43
44	</md-top-app-bar>
45
46	<h1 id="h1Headline">Página secundaria</h1>
47
48	<main>
49	<p>
50	Esta es una página secundaria de la app. Las X que siguen son para que veas
51	como se comporta cuando se hace scroll.
52	</p>
53	<p>x</p>
54	<p>x</p>
55	<p>x</p>
56	<p>x</p>
57	<p>x</p>
58	<p>x</p>
59	<p>x</p>
60	<p>x</p>
61	<p>x</p>
62	<p>x</p>
63	<p>x</p>
64	<p>x</p>
65	<p>x</p>
66	<p>x</p>
67	<p>x</p>
68	<p>x</p>
69	<p>x</p>
70	<p>x</p>
71	<p>x</p>
72	<p>x</p>
73	<p>x</p>
74	<p>x</p>
75	<p>x</p>
76	</main>
77
78	<md-overflow-menu id="overflow">
79
80	<button type="button">
81	<span class="material-symbols-outlined">star</span>
82	Marcar favorito
83	</button>
84
85	<button type="button">
86	<span class="material-symbols-outlined"> delete</span>
87	Eliminar
88	</button>
89
90	</md-overflow-menu>
91
92	<nav-drw></nav-drw>
93
94	</body>
95
96	</html>

Solo para los más rudos

El cajón de navegación está definido en https://m3.material.io/components/navigation-drawer/overview.
El navigation rail está definido en https://m3.material.io/components/navigation-rail/overview.

19. navtab.html - Navegación con pestañas scrollable

Se usa para seleccionar entre 2 o más vistas.
Se usa en:
- Móvil
- Tablet
- Escritorio
Se crea el elemento personalizado nav-tab-scrollable. Puedes ver su código en m-js/m-nav-tab-scrollable-js.html
Para reducir los problemas de despliegues transitorios conocidos como fuoc, se añade la siguiente línea después de los link para estilos: <link rel="expect" blocking="render" href="#navtab">, donde navtab es el id de cualquier hiperenlace del elemento personalizado nav-tab-scrollable.
Añade al top-app-bar el atributo adicional con el id para nav-tab-scrollable.
Coloca nav-tab-scrollable después de top-app-bar y de h1. Ponle su id.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Pestañas scrollable - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_pestanas.css">
20	<link rel="expect" blocking="render" href="#navtab">
21
22	</head>
23
24	<body>
25
26	<md-top-app-bar adicional="tab" headline="headline">
27
28	<h1>scrollable</h1>
29
30	<button type="button" class="md-standard-icon-button" title="Agregar"
31	slot="action">
32	<span class="material-symbols-outlined">add</span>
33	</button>
34	<button type="button" class="md-standard-icon-button" title="Editar"
35	slot="action">
36	<span class="material-symbols-outlined">edit</span>
37	</button>
38
39	</md-top-app-bar>
40
41	<h1 id="headline">Pestañas scrollable</h1>
42
43	<nav-tab-scrollable id="tab"></nav-tab-scrollable>
44
45	<main>
46	<p>
47	Esta página usa navegación por pestañas fijas. Las X que siguen son para que
48	veas como se comporta cuando se hace scroll.
49	</p>
50	<p>x</p>
51	<p>x</p>
52	<p>x</p>
53	<p>x</p>
54	<p>x</p>
55	<p>x</p>
56	<p>x</p>
57	<p>x</p>
58	<p>x</p>
59	<p>x</p>
60	<p>x</p>
61	<p>x</p>
62	<p>x</p>
63	<p>x</p>
64	<p>x</p>
65	<p>x</p>
66	<p>x</p>
67	<p>x</p>
68	<p>x</p>
69	<p>x</p>
70	<p>x</p>
71	<p>x</p>
72	<p>x</p>
73	</main>
74
75	</body>
76
77	</html>

Solo para los más rudos

Las pestañas están definidas en https://m3.material.io/components/tabs/overview.

20. navTabFixed.html - Navegación con pestañas fijas

Cuando son pocas pestañas, pueden mantenerse fijas.
Se crea el elemento personalizado nav-tab-fixed. Puedes ver su código en m-js/m-nav-tab-fixed-js.html
Para reducir los problemas de despliegues transitorios conocidos como fuoc, se añade la siguiente línea después de los link para estilos: <link rel="expect" blocking="render" href="#navtabfixed">, donde navtabfixed es el id de cualquier hiperenlace del elemento personalizado nav-tab-fixed.
Añade al top-app-bar el atributo adicional con el id para nav-tab-fixed.
Coloca nav-tab-fixed después de top-app-bar y de h1. Ponle su id.
Puedes cambiar el ancho de las pestañas cambiando la definición de --tabWidth en estilos.css. o redefine el valor de --tabWidth en el atributo style de la etiquta nav-tab-fixed.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Pestañas fijas - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_pestanas.css">
20	<link rel="expect" blocking="render" href="#navtabfixed">
21
22	</head>
23
24	<body>
25
26	<md-top-app-bar adicional="tab" headline="headline">
27
28	<h1>fijas</h1>
29
30	<button type="button" class="md-standard-icon-button" title="Agregar"
31	slot="action">
32	<span class="material-symbols-outlined">add</span>
33	</button>
34	<button type="button" class="md-standard-icon-button" title="Editar"
35	slot="action">
36	<span class="material-symbols-outlined">edit</span>
37	</button>
38
39	</md-top-app-bar>
40
41	<h1 id="headline">Pestañas fijas</h1>
42
43	<nav-tab-fixed id="tab"></nav-tab-fixed>
44
45	<main>
46	<p>
47	Esta página usa navegación por pestañas filas. Las X que siguen son para que
48	veas como se comporta cuando se hace scroll.
49	</p>
50	<p>x</p>
51	<p>x</p>
52	<p>x</p>
53	<p>x</p>
54	<p>x</p>
55	<p>x</p>
56	<p>x</p>
57	<p>x</p>
58	<p>x</p>
59	<p>x</p>
60	<p>x</p>
61	<p>x</p>
62	<p>x</p>
63	<p>x</p>
64	<p>x</p>
65	<p>x</p>
66	<p>x</p>
67	<p>x</p>
68	<p>x</p>
69	<p>x</p>
70	<p>x</p>
71	<p>x</p>
72	<p>x</p>
73	</main>
74
75	</body>
76
77	</html>

21. navbar.html - Barra de navegación

Se usa para seleccionar entre 3 a 5 vistas.
Se usa en:
- Móvil
Aunque no lo especifica Material Design, cuando el número de vistas es mayor a 5, algunos diseñadores prefieren seguir usando una barra de navegación y convertir el último botón en un cajón de navegación para las vistas restantes.
En tablet y móvil se convierte en un menú lateral o en un navigation reel.
Se crea el elemento personalizado nav-bar. Usa textos cortos. Puedes ver su código en m-js/m-nav-bar-js.html
Para reducir los problemas de despliegues transitorios conocidos como fuoc, se añade la siguiente línea después de los link para estilos: <link rel="expect" blocking="render" href="#navbar">, donde navbar es el id de cualquier hiperenlace del elemento personalizado nav-bar.
Coloca nav-bar al final de tu forma.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Barra de Navegación - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_pestanas.css">
20	<link rel="expect" blocking="render" href="#navbar">
21
22	</head>
23
24	<body
25	style="padding-bottom: 5rem;">
26
27	<md-top-app-bar headline="headline">
28
29	<h1>navegación</h1>
30
31	<button type="button" class="md-standard-icon-button" title="Agregar"
32	slot="action">
33	<span class="material-symbols-outlined">add</span>
34	</button>
35	<button type="button" class="md-standard-icon-button" title="Editar"
36	slot="action">
37	<span class="material-symbols-outlined">edit</span>
38	</button>
39
40	</md-top-app-bar>
41
42	<h1 id="headline">Barra de navegación</h1>
43
44	<main>
45	<p>
46	Esta página usa barra de navegación. Las X que siguen son para que veas como
47	se comporta cuando se hace scroll.
48	</p>
49	<p>x</p>
50	<p>x</p>
51	<p>x</p>
52	<p>x</p>
53	<p>x</p>
54	<p>x</p>
55	<p>x</p>
56	<p>x</p>
57	<p>x</p>
58	<p>x</p>
59	<p>x</p>
60	<p>x</p>
61	<p>x</p>
62	<p>x</p>
63	<p>x</p>
64	<p>x</p>
65	<p>x</p>
66	<p>x</p>
67	<p>x</p>
68	<p>x</p>
69	<p>x</p>
70	<p>x</p>
71	<p>x</p>
72	</main>
73
74	<nav-bar></nav-bar>
75
76	</body>
77
78	</html>

Solo para los más rudos

La barra de navegación está definida en https://m3.material.io/components/navigation-bar/overview.

22. formulario.html - Formulario típico

Los mensajes de error de un componente, se muestran en otro conocido como texto de ayuda, que normalmente usa un elemento small con el atributo slot="supporting".
La forma usa el atributo novalidate.
En este ejemplo, el campo select-menu con el id selectGenero usa el evento input. para invocar la función copiaMensajes. y copiar los mensajes de error del campo de captura al texto de ayuda.

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Formulario - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<form id="form" novalidate onsubmit="procesa(event)">
26
27	<md-top-app-bar>
28
29	<h1>Formulario</h1>
30
31	<button is="md-menu-button" slot="navigation"></button>
32
33	</md-top-app-bar>
34
35	<main>
36
37	<p>
38	<span class="md-filled-text-field" accesskey="G">
39	<md-select-menu id="selectGenero" required options="opcionesDeGenero"
40	oninput="copiaMensajes()"></md-select-menu>
41	<span>Género *</span>
42	<small id="supportingGenero">Obligatorio</small>
43	</span>
44	</p>
45
46	<p>
47	<button class="md-filled-button" style="width: 100%;">Recomendar</button>
48	</p>
49
50	</main>
51
52	<md-options-menu id="opcionesDeGenero" aria-label="Opciones de género">
53	<span data-value="" title="Selecciona género"></span>
54	<span data-value="pop">Pop</span>
55	<span data-value="reg">Reguetón</span>
56	</md-options-menu>
57
58	<nav-drw></nav-drw>
59
60	</form>
61
62	<script type="module">
63	import { muestraTextoDeAyuda } from "./lib/js/muestraTextoDeAyuda.js"
64	import { exportaAHtml } from "./lib/js/exportaAHtml.js"
65	import { muestraError } from "./lib/js/muestraError.js"
66
67	function copiaMensajes() {
68	muestraTextoDeAyuda(selectGenero, supportingGenero, "Obligatorio")
69	}
70	exportaAHtml(copiaMensajes)
71
72	/**
73	* @param {SubmitEvent} evt
74	*/
75	function procesa(evt) {
76	evt.preventDefault()
77	try {
78	copiaMensajes()
79	if (
80	selectGenero.validity.valid) {
81	const genero = selectGenero.value
82	const resultado = recomienda(genero)
83	alert(resultado)
84	}
85	} catch (e) {
86	muestraError(e)
87	}
88	}
89	exportaAHtml(procesa)
90
91	/** @param {string} genero */
92	function recomienda(genero) {
93	if (genero === "pop") {
94	return "Para el pop te recomiendo a Dua Lipa."
95	} else if (genero === "reg") {
96	return "Para el reguetón te recomiendo a Bad Bunny."
97	}
98	}
99	</script>
100
101	</body>
102
103	</html>

23. ayuda.html - Vista de ayuda

Salida

Ábrelo en otra pestaña.


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Ayuda - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26
27	<h1>Ayuda</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<main>
34
35	<ul class="md-list">
36	<li class="md-two-line">
37	<span class="headline">
38	Título
39	</span>
40	<span class="supporting">
41	PWA con Material Design
42	</span>
43	</li>
44	<li class="md-two-line">
45	<span class="headline">
46	Descripción
47	</span>
48	<span class="supporting">
49	Ejemplos de vistas móviles.
50	</span>
51	</li>
52	<li class="md-two-line">
53	<span class="headline">
54	Autor
55	</span>
56	<span class="supporting">
57	Gilberto Pacheco Gallegos
58	</span>
59	</li>
60	<li class="md-two-line">
61	<span class="headline">
62	Derechos de autor
63	</span>
64	<span class="supporting">
65	© 2024 Gilberto Pacheco Gallegos
66	</span>
67	</li>
68	<li class="md-three-line">
69	<span class="headline">
70	Este software usa la librería para PWA
71	</span>
72	<span class="supporting">
73	Esta obra de Gilberto Pacheco Gallegos está bajo una
74	<a target="_blank" rel="license noreferrer"
75	href="http://creativecommons.org/licenses/by/4.0/">
76	Licencia Creative Commons Atribución 4.0 Internacional</a></span>
77	</li>
78	<li>
79	<a class="md-three-line" target="_blank" rel=”noreferrer”
80	href="https://fonts.google.com/icons">
81	<span class="headline">
82	También usa Material Symbols
83	</span>
84	<span class="supporting">
85	Desarrollada por Google bajo licencia Apache 2.0
86	</span>
87	</a>
88	</li>
89	</ul>
90
91	</main>
92
93	<nav-drw></nav-drw>
94
95	</body>
96
97	</html>

24. Carpeta « js »

Versión para imprimir.

A. js / configura.js


1	/** Barra de navegación. */
2	import "./nav-drw.js"
3	import "./nav-tab-scrollable.js"
4	import "./nav-tab-fixed.js"
5	import "./nav-bar.js"
6	/** Elementos utilizados */
7	import "../lib/js/custom/md-menu-button.js"
8	import "../lib/js/custom/md-options-menu.js"
9	import "../lib/js/custom/md-overflow-button.js"
10	import "../lib/js/custom/md-overflow-menu.js"
11	import "../lib/js/custom/md-select-menu.js"
12	import "../lib/js/custom/md-top-app-bar.js"
13	import "../lib/js/custom/md-slider-field.js"

B. js / nav-bar.js


1	import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2
3	export class NavBar extends HTMLElement {
4
5	connectedCallback() {
6	this.classList.add("md-navigation-bar")
7
8	this.innerHTML = /* HTML */`
9	<a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
10	<span class="material-symbols-outlined">home</span>
11	Inicio
12	</a>
13
14	<a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
15	<span class="material-symbols-outlined">tabs</span>
16	Pestañas
17	</a>
18
19	<a id="navbar" ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
20	<span class="material-symbols-outlined">bottom_navigation</span>
21	Barra
22	</a>
23
24	<a ${resaltaSiEstasEn(["/formulario.html"])} href="formulario.html">
25	<span class="material-symbols-outlined">newspaper</span>
26	Forma
27	</a>`
28
29	}
30
31	}
32
33	customElements.define("nav-bar", NavBar)

C. js / nav-drw.js


1	import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2	import { MdNavigationDrawer } from "../lib/js/custom/MdNavigationDrawer.js"
3
4	export class NavDrw extends MdNavigationDrawer {
5
6	/**
7	* @override
8	*/
9	getHipervinculos() {
10	return /* HTML */`
11	<h1>PWA con MD</h1>
12
13	<a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
14	<span class="material-symbols-outlined">home</span>
15	Inicio
16	</a>
17
18	<a ${resaltaSiEstasEn(["/secundaria.html"])} href="secundaria.html">
19	<span class="material-symbols-outlined">scrollable_header</span>
20	Página secundaria
21	</a>
22
23	<a ${resaltaSiEstasEn(["/iconos.html"])} href="iconos.html">
24	<span class="material-symbols-outlined">sentiment_satisfied</span>
25	Íconos
26	</a>
27
28	<a ${resaltaSiEstasEn(["/botones.html"])} href="botones.html">
29	<span class="material-symbols-outlined">right_click</span>
30	Botones
31	</a>
32
33	<a ${resaltaSiEstasEn(["/campos.html"])} href="campos.html">
34	<span class="material-symbols-outlined">password</span>
35	Campos de texto
36	</a>
37
38	<a ${resaltaSiEstasEn(["/select.html"])} href="select.html">
39	<span class="material-symbols-outlined">bottom_panel_close</span>
40	Select
41	</a>
42
43	<a ${resaltaSiEstasEn(["/interruptor.html"])} href="interruptor.html">
44	<span class="material-symbols-outlined">toggle_on</span>
45	Interruptores
46	</a>
47
48	<a ${resaltaSiEstasEn(["/slider.html"])} href="slider.html">
49	<span class="material-symbols-outlined">linear_scale</span>
50	Sliders
51	</a>
52
53	<a ${resaltaSiEstasEn(["/segmentado.html"])} href="segmentado.html">
54	<span class="material-symbols-outlined">splitscreen_left</span>
55	Botón segmentado
56	</a>
57
58	<a ${resaltaSiEstasEn(["/one-line.html"])} href="one-line.html">
59	<span class="material-symbols-outlined">list</span>
60	Listas one-line
61	</a>
62
63	<a ${resaltaSiEstasEn(["/two-line.html"])} href="two-line.html">
64	<span class="material-symbols-outlined">lists</span>
65	Listas two-line
66	</a>
67
68	<a ${resaltaSiEstasEn(["/three-line.html"])} href="three-line.html">
69	<span class="material-symbols-outlined">receipt_long</span>
70	Listas three-line
71	</a>
72
73	<a ${resaltaSiEstasEn(["/tarjetas.html"])} href="tarjetas.html">
74	<span class="material-symbols-outlined">cards</span>
75	Tarjetas
76	</a>
77
78	<a ${resaltaSiEstasEn(["/navtab.html"])} href="navtab.html">
79	<span class="material-symbols-outlined">swipe_left</span>
80	Pestañas scrollable
81	</a>
82
83	<a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
84	<span class="material-symbols-outlined">tabs</span>
85	Pestañas fijas
86	</a>
87
88	<a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
89	<span class="material-symbols-outlined">bottom_navigation</span>
90	Barra de navegación
91	</a>
92
93	<a ${resaltaSiEstasEn(["/formulario.html"])} href="formulario.html">
94	<span class="material-symbols-outlined">newspaper</span>
95	Formulario
96	</a>
97
98	<a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
99	<span class="material-symbols-outlined">help</span>
100	Ayuda
101	</a>`
102	}
103
104	}
105
106	customElements.define("nav-drw", NavDrw)

D. js / nav-tab-fixed.js


1	import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
2
3	export class NavTabFixed extends HTMLElement {
4
5	connectedCallback() {
6	this.classList.add("md-tab", "fixed")
7
8	this.innerHTML = /* HTML */`
9	<a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
10	<span class="material-symbols-outlined">home</span>
11	Inicio
12	</a>
13
14	<a ${resaltaSiEstasEn(["/navtab.html"])} href="navtab.html">
15	<span class="material-symbols-outlined">swipe_left</span>
16	Pestañas scrollable
17	</a>
18
19	<a id="navtabfixed" ${resaltaSiEstasEn(["/navTabFixed.html"])}
20	href="navTabFixed.html">
21	<span class="material-symbols-outlined">tabs</span>
22	Pestañas fijas
23	</a>
24
25	<a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
26	<span class="material-symbols-outlined">bottom_navigation</span>
27	Barra de navegación
28	</a>`
29	}
30
31	}
32
33	customElements.define("nav-tab-fixed", NavTabFixed)

E. js / nav-tab-scrollable.js


1	import { querySelector } from "../lib/js/querySelector.js"
2	import { resaltaSiEstasEn } from "../lib/js/resaltaSiEstasEn.js"
3
4	export class NavTabScrollable extends HTMLElement {
5
6	connectedCallback() {
7	this.classList.add("md-tab", "scrollable")
8
9	this.innerHTML = /* HTML */`
10	<a ${resaltaSiEstasEn(["/index.html", "", "/"])} href="index.html">
11	<span class="material-symbols-outlined">home</span>
12	Inicio
13	</a>
14
15	<a ${resaltaSiEstasEn(["/secundaria.html"])} href="secundaria.html">
16	<span class="material-symbols-outlined">scrollable_header</span>
17	Página secundaria
18	</a>
19
20	<a ${resaltaSiEstasEn(["/iconos.html"])} href="iconos.html">
21	<span class="material-symbols-outlined">sentiment_satisfied</span>
22	Íconos
23	</a>
24
25	<a ${resaltaSiEstasEn(["/botones.html"])} href="botones.html">
26	<span class="material-symbols-outlined">right_click</span>
27	Botones
28	</a>
29
30	<a ${resaltaSiEstasEn(["/campos.html"])} href="campos.html">
31	<span class="material-symbols-outlined">password</span>
32	Campos de texto
33	</a>
34
35	<a ${resaltaSiEstasEn(["/select.html"])} href="select.html">
36	<span class="material-symbols-outlined">bottom_panel_close</span>
37	Select
38	</a>
39
40	<a ${resaltaSiEstasEn(["/interruptor.html"])} href="interruptor.html">
41	<span class="material-symbols-outlined">toggle_on</span>
42	Interruptores
43	</a>
44
45	<a ${resaltaSiEstasEn(["/slider.html"])} href="slider.html">
46	<span class="material-symbols-outlined">linear_scale</span>
47	Sliders
48	</a>
49
50	<a ${resaltaSiEstasEn(["/segmentado.html"])} href="segmentado.html">
51	<span class="material-symbols-outlined">splitscreen_left</span>
52	Botón segmentado
53	</a>
54
55	<a ${resaltaSiEstasEn(["/one-line.html"])} href="one-line.html">
56	<span class="material-symbols-outlined">list</span>
57	Listas one-line
58	</a>
59
60	<a ${resaltaSiEstasEn(["/two-line.html"])} href="two-line.html">
61	<span class="material-symbols-outlined">lists</span>
62	Listas two-line
63	</a>
64
65	<a ${resaltaSiEstasEn(["/three-line.html"])} href="three-line.html">
66	<span class="material-symbols-outlined">receipt_long</span>
67	Listas three-line
68	</a>
69
70	<a ${resaltaSiEstasEn(["/tarjetas.html"])} href="tarjetas.html">
71	<span class="material-symbols-outlined">cards</span>
72	Tarjetas
73	</a>
74
75	<a id="navtab" ${resaltaSiEstasEn(["/navtab.html"])} href="navtab.html">
76	<span class="material-symbols-outlined">swipe_left</span>
77	Pestañas scrollable
78	</a>
79
80	<a ${resaltaSiEstasEn(["/navTabFixed.html"])} href="navTabFixed.html">
81	<span class="material-symbols-outlined">tabs</span>
82	Pestañas fijas
83	</a>
84
85	<a ${resaltaSiEstasEn(["/navbar.html"])} href="navbar.html">
86	<span class="material-symbols-outlined">bottom_navigation</span>
87	Barra de navegación
88	</a>
89
90	<a ${resaltaSiEstasEn(["/formulario.html"])} href="formulario.html">
91	<span class="material-symbols-outlined">newspaper</span>
92	Formulario
93	</a>
94
95	<a ${resaltaSiEstasEn(["/ayuda.html"])} href="ayuda.html">
96	<span class="material-symbols-outlined">help</span>
97	Ayuda
98	</a>`
99
100	}
101
102	}
103
104	customElements.define("nav-tab-scrollable", NavTabScrollable)

F. js / registraServiceWorker.js


1	"use strict" // usa JavaScript en modo estricto.
2
3	const nombreDeServiceWorker = "sw.js"
4
5	try {
6	navigator.serviceWorker.register(nombreDeServiceWorker)
7	.then(registro => {
8	console.log(nombreDeServiceWorker, "registrado.")
9	console.log(registro)
10	})
11	.catch(error => console.log(error))
12	} catch (error) {
13	console.log(error)
14	}

25. site.webmanifest

Este archivo sirve para configurar los instaladores de la aplicación.

Explicación de las propiedades

short_name

Nombre corto. Normalmente se despliega en dispositivos móviles. Máximo 20 caracteres.

name

Nombre largo. Normalmente se despliega en computadoras de escritorio. Máximo 30 caracteres.

id

Identificador del archivo de instalación. Normalmente es la ruta del archivo inicial de la app.

start_url

Ruta del archivo inicial de la app.

display

Forma de mostrar la app. El término standalone significa que no se muestra la barra de navegación del navegador web.

theme_color

Color de la barra de estado (en dispositivos móviles) o de título (en computadoras de escritorio) de la app.

background_color

Color de fondo de la pantalla desplah en dispositivos móviles.

description

Describe el propósito de la aplicación. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.

screenshots

icons

Listado de íconos en distintas resoluciones para los instaladores de la app. Se selecciona el que se vea mejor según las característocas del dispositivo.

src

Url de la imagen dentro de la app.

sizes

Dimensiones en pixeles de la imagen, anchoxalto.

type

Tipo mime de la imagen.

purpose

Forma en que se usa la imagen.

maskable: La imagen puede recortarse de forma segura para tomar distintas formas, como círculos, gotas, cuadrados con esquinas redondeadas, etc. Normalmente se usa para dispositivos móviles.
any: No se puede asegurar nada sobre la imagen. Normalmente se usa para dispositivos de escritorio.

Normalmente debe proporcionarse un juego de íconos con purpose any y otro juego de íconos con purpose maskable.

form_factor

Orientación de una screenshot.

wide: La screenshot tiene una orientación horizontal. Normalmente la creenshot se usa para dispositivos de escritorio.
narrow: La screenshot tiene una orientación vertical. Normalmente la creenshot se usa para dispositivos móviles.

Debes incluir al menos una screenshot con "form_factor": "wide" y otra con "form_factor": "narrow".

label

Descripción de una screenshot. Aparece en el cuadro de diálogo que muestra el navegador al instalar la app.


1	{
2	"short_name": "PWA con MD",
3	"name": "PWA con Material Design",
4	"id": "/index.html",
5	"start_url": "/index.html",
6	"display": "standalone",
7	"theme_color": "#fffbfe",
8	"background_color": "#fffbfe",
9	"display_override": [
10	"window-controls-overlay"
11	],
12	"description": "PWA con componentes de Material Design.",
13	"screenshots": [
14	{
15	"src": "/img/screenshot_horizontal.png",
16	"sizes": "1257x646",
17	"type": "image/png",
18	"form_factor": "wide",
19	"label": "PWA con Material Design"
20	},
21	{
22	"src": "/img/screenshot_vertical.png",
23	"sizes": "595x644",
24	"type": "image/png",
25	"form_factor": "narrow",
26	"label": "PWA con Material Design (2)"
27	}
28	],
29	"icons": [
30	{
31	"src": "/img/maskable_icon_x48.png",
32	"sizes": "48x48",
33	"type": "image/png",
34	"purpose": "any"
35	},
36	{
37	"src": "/img/maskable_icon_x72.png",
38	"sizes": "72x72",
39	"type": "image/png",
40	"purpose": "any"
41	},
42	{
43	"src": "/img/maskable_icon_x96.png",
44	"sizes": "96x96",
45	"type": "image/png",
46	"purpose": "maskable"
47	},
48	{
49	"src": "/img/maskable_icon_x128.png",
50	"sizes": "128x128",
51	"type": "image/png",
52	"purpose": "any"
53	},
54	{
55	"src": "/img/maskable_icon_x192.png",
56	"sizes": "192x192",
57	"type": "image/png",
58	"purpose": "any"
59	},
60	{
61	"src": "/img/maskable_icon_x384.png",
62	"sizes": "384x384",
63	"type": "image/png",
64	"purpose": "any"
65	},
66	{
67	"src": "/img/maskable_icon_x512.png",
68	"sizes": "512x512",
69	"type": "image/png",
70	"purpose": "any"
71	},
72	{
73	"src": "/img/maskable_icon.png",
74	"sizes": "3413x3413",
75	"type": "image/png",
76	"purpose": "any"
77	},
78	{
79	"src": "/img/icono2048.png",
80	"sizes": "2048x2048",
81	"type": "image/png",
82	"purpose": "any"
83	},
84	{
85	"src": "/img/maskable_icon_x48.png",
86	"sizes": "48x48",
87	"type": "image/png",
88	"purpose": "maskable"
89	},
90	{
91	"src": "/img/maskable_icon_x72.png",
92	"sizes": "72x72",
93	"type": "image/png",
94	"purpose": "maskable"
95	},
96	{
97	"src": "/img/maskable_icon_x96.png",
98	"sizes": "96x96",
99	"type": "image/png",
100	"purpose": "maskable"
101	},
102	{
103	"src": "/img/maskable_icon_x128.png",
104	"sizes": "128x128",
105	"type": "image/png",
106	"purpose": "maskable"
107	},
108	{
109	"src": "/img/maskable_icon_x192.png",
110	"sizes": "192x192",
111	"type": "image/png",
112	"purpose": "maskable"
113	},
114	{
115	"src": "/img/maskable_icon_x384.png",
116	"sizes": "384x384",
117	"type": "image/png",
118	"purpose": "maskable"
119	},
120	{
121	"src": "/img/maskable_icon_x512.png",
122	"sizes": "512x512",
123	"type": "image/png",
124	"purpose": "maskable"
125	},
126	{
127	"src": "/img/maskable_icon.png",
128	"sizes": "3413x3413",
129	"type": "image/png",
130	"purpose": "maskable"
131	}
132	]
133	}

26. instruccionesListadoSw.txt


1	Generar el listado de archivos del sw.js desde Visual Studio Code.
2	1. Abrir una terminal desde el menú
3	Terminal > New Terminal
4
5	2. Desde la terminal introducir la orden:
6	Get-ChildItem -path . -Recurse \| Select Directory,Name \| Out-File archivos.txt
7
8	3. Abrir el archivo generado, que se llama
9	archivos.txt
10	y sobre este, realizar los pasos que siguen:
11
12	4. Quita del archivo archivos.txt:
13	* el encabezado,
14	* todas las carpetas,
15	* el archivo .vscode/settings.json,
16	* el archivo .htaccess,
17	* el archivo archivos.txt,
18	* este archivo (instruccionesListadoSw.txt),
19	* el archivo jsconfig.json,
20	* el archivo sw.js,
21	* el archivo de la base de datos, que termina en ".bd" y
22	está en la carpeta srv,
23	* todos los archivos de php y
24	* las líneas en blanco del final
25
26	5. Cambia los \ por / desde Visual Studio Code con las siguientes
27	combinaciones de teclas:
28
29	Ctrl+H En el diálogo que aparece introduce lo siguiente:
30	Find:\
31	Replace:/
32
33	Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
34
35	6. Coloca las comillas y coma del final de cada línea desde Visual
36	Studio Code con las siguientes combinaciones de teclas:
37
38	Ctrl+H En el diálogo que aparece, selecciona el botón
39	".*"
40	e introduce lo siguiente:
41	Find:\s*$
42	Replace:",
43
44	Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
45
46	7. Marca la carpeta inicial, presiona la combinación de teclas:
47
48	Shift+Ctrl+L
49
50	borra la selección, teclea " y luego ESC
51
52	8. Cambia las secuencias de espacios por / con las siguientes
53	combinaciones de teclas:
54
55	Ctrl+H En el diálogo que aparece, selecciona el botón
56	".*"
57	e introduce lo siguiente:
58	Find:\s+
59	Replace:/
60
61	Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
62
63	9. Cambia las "/ por " con las siguientes combinaciones de teclas:
64
65	Ctrl+H En el diálogo que aparece, quita la selección del botón
66	".*"
67	e introduce lo siguiente:
68	Find:"/
69	Replace:"
70
71	Clic en el icono Reemplaza todo o Replace All y luego teclea ESC
72
73	10. Copia el texto al archivo
74	sw.js
75	en el contenido del arreglo llamado ARCHIVOS, pero recuerda
76	mantener el último elemento, que dice:
77	"/"

27. archivos.txt


1	"ayuda.html",
2	"botones.html",
3	"campos.html",
4	"favicon.ico",
5	"formulario.html",
6	"iconos.html",
7	"index.html",
8	"interruptor.html",
9	"navbar.html",
10	"navtab.html",
11	"navTabFixed.html",
12	"one-line.html",
13	"secundaria.html",
14	"segmentado.html",
15	"select.html",
16	"site.webmanifest",
17	"slider.html",
18	"tarjetas.html",
19	"three-line.html",
20	"two-line.html",
21	"css/dark-hc.css",
22	"css/dark-mc.css",
23	"css/dark.css",
24	"css/estilos.css",
25	"css/light-hc.css",
26	"css/light-mc.css",
27	"css/light.css",
28	"css/transicion_completa.css",
29	"css/transicion_pestanas.css",
30	"img/Escultura_de_coyote.jpeg",
31	"img/icono2048.png",
32	"img/maskable_icon.png",
33	"img/maskable_icon_x128.png",
34	"img/maskable_icon_x192.png",
35	"img/maskable_icon_x384.png",
36	"img/maskable_icon_x48.png",
37	"img/maskable_icon_x512.png",
38	"img/maskable_icon_x72.png",
39	"img/maskable_icon_x96.png",
40	"img/pexels-craig-dennis-3701822.jpg",
41	"img/pexels-creative-workshop-3978352.jpg",
42	"img/pexels-erik-karits-3732453.jpg",
43	"img/pexels-esteban-arango-10226903.jpg",
44	"img/pexels-moises-patrício-10961948.jpg",
45	"img/pexels-ralph-2270848.jpg",
46	"img/pexels-rasmus-svinding-35435.jpg",
47	"img/pexels-steve-397857.jpg",
48	"img/pexels-vadim-b-141496.jpg",
49	"img/screenshot_horizontal.png",
50	"img/screenshot_vertical.png",
51	"js/configura.js",
52	"js/nav-bar.js",
53	"js/nav-drw.js",
54	"js/nav-tab-fixed.js",
55	"js/nav-tab-scrollable.js",
56	"js/registraServiceWorker.js",
57	"lib/css/material-symbols-outlined.css",
58	"lib/css/md-cards.css",
59	"lib/css/md-fab-primary.css",
60	"lib/css/md-filled-button.css",
61	"lib/css/md-filled-text-field.css",
62	"lib/css/md-list.css",
63	"lib/css/md-menu.css",
64	"lib/css/md-navigation-bar.css",
65	"lib/css/md-outline-button.css",
66	"lib/css/md-ripple.css",
67	"lib/css/md-segmented-button.css",
68	"lib/css/md-slider-field.css",
69	"lib/css/md-standard-icon-button.css",
70	"lib/css/md-switch.css",
71	"lib/css/md-tab.css",
72	"lib/css/md-top-app-bar.css",
73	"lib/css/roboto.css",
74	"lib/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
75	"lib/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
76	"lib/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
77	"lib/fonts/roboto-v32-latin-regular.woff2",
78	"lib/js/abreElementoHtml.js",
79	"lib/js/cierraElementoHtmo.js",
80	"lib/js/exportaAHtml.js",
81	"lib/js/getAttribute.js",
82	"lib/js/htmlentities.js",
83	"lib/js/muestraError.js",
84	"lib/js/muestraTextoDeAyuda.js",
85	"lib/js/ProblemDetails.js",
86	"lib/js/querySelector.js",
87	"lib/js/resaltaSiEstasEn.js",
88	"lib/js/const/ES_APPLE.js",
89	"lib/js/custom/md-menu-button.js",
90	"lib/js/custom/md-options-menu.js",
91	"lib/js/custom/md-overflow-button.js",
92	"lib/js/custom/md-overflow-menu.js",
93	"lib/js/custom/md-select-menu.js",
94	"lib/js/custom/md-slider-field.js",
95	"lib/js/custom/md-top-app-bar.js",
96	"lib/js/custom/MdNavigationDrawer.js",
97	"material-tokens/css/baseline.css",
98	"material-tokens/css/colors.css",
99	"material-tokens/css/elevation.css",
100	"material-tokens/css/motion.css",
101	"material-tokens/css/palette.css",
102	"material-tokens/css/shape.css",
103	"material-tokens/css/state.css",
104	"material-tokens/css/typography.css",
105	"material-tokens/css/theme/dark.css",
106	"material-tokens/css/theme/light.css",
107	"ungap/custom-elements.js",

28. sw.js


1	/* Este archivo debe estar colocado en la carpeta raíz del sitio.
2	*
3	* Cualquier cambio en el contenido de este archivo hace que el service
4	* worker se reinstale. */
5
6	/**
7	* Cambia el número de la versión cuando cambia el contenido de los
8	* archivos.
9	*
10	* El número a la izquierda del punto (.), en este caso <q>1</q>, se
11	* conoce como número mayor y se cambia cuando se realizan
12	* modificaciones grandes o importantes.
13	*
14	* El número a la derecha del punto (.), en este caso <q>00</q>, se
15	* conoce como número menor y se cambia cuando se realizan
16	* modificaciones menores.
17	*/
18	const VERSION = "1.00"
19
20	/**
21	* Nombre de la carpeta de caché.
22	*/
23	const CACHE = "pwamd"
24
25	/**
26	* Archivos requeridos para que la aplicación funcione fuera de
27	* línea.
28	*/
29	const ARCHIVOS = [
30	"ayuda.html",
31	"botones.html",
32	"campos.html",
33	"favicon.ico",
34	"formulario.html",
35	"iconos.html",
36	"index.html",
37	"interruptor.html",
38	"navbar.html",
39	"navtab.html",
40	"navTabFixed.html",
41	"one-line.html",
42	"secundaria.html",
43	"segmentado.html",
44	"select.html",
45	"site.webmanifest",
46	"slider.html",
47	"tarjetas.html",
48	"three-line.html",
49	"two-line.html",
50	"css/dark-hc.css",
51	"css/dark-mc.css",
52	"css/dark.css",
53	"css/estilos.css",
54	"css/light-hc.css",
55	"css/light-mc.css",
56	"css/light.css",
57	"css/transicion_completa.css",
58	"css/transicion_pestanas.css",
59	"img/Escultura_de_coyote.jpeg",
60	"img/icono2048.png",
61	"img/maskable_icon.png",
62	"img/maskable_icon_x128.png",
63	"img/maskable_icon_x192.png",
64	"img/maskable_icon_x384.png",
65	"img/maskable_icon_x48.png",
66	"img/maskable_icon_x512.png",
67	"img/maskable_icon_x72.png",
68	"img/maskable_icon_x96.png",
69	"img/pexels-craig-dennis-3701822.jpg",
70	"img/pexels-creative-workshop-3978352.jpg",
71	"img/pexels-erik-karits-3732453.jpg",
72	"img/pexels-esteban-arango-10226903.jpg",
73	"img/pexels-moises-patrício-10961948.jpg",
74	"img/pexels-ralph-2270848.jpg",
75	"img/pexels-rasmus-svinding-35435.jpg",
76	"img/pexels-steve-397857.jpg",
77	"img/pexels-vadim-b-141496.jpg",
78	"img/screenshot_horizontal.png",
79	"img/screenshot_vertical.png",
80	"js/configura.js",
81	"js/nav-bar.js",
82	"js/nav-drw.js",
83	"js/nav-tab-fixed.js",
84	"js/nav-tab-scrollable.js",
85	"js/registraServiceWorker.js",
86	"lib/css/material-symbols-outlined.css",
87	"lib/css/md-cards.css",
88	"lib/css/md-fab-primary.css",
89	"lib/css/md-filled-button.css",
90	"lib/css/md-filled-text-field.css",
91	"lib/css/md-list.css",
92	"lib/css/md-menu.css",
93	"lib/css/md-navigation-bar.css",
94	"lib/css/md-outline-button.css",
95	"lib/css/md-ripple.css",
96	"lib/css/md-segmented-button.css",
97	"lib/css/md-slider-field.css",
98	"lib/css/md-standard-icon-button.css",
99	"lib/css/md-switch.css",
100	"lib/css/md-tab.css",
101	"lib/css/md-top-app-bar.css",
102	"lib/css/roboto.css",
103	"lib/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints",
104	"lib/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf",
105	"lib/fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2",
106	"lib/fonts/roboto-v32-latin-regular.woff2",
107	"lib/js/abreElementoHtml.js",
108	"lib/js/cierraElementoHtmo.js",
109	"lib/js/exportaAHtml.js",
110	"lib/js/getAttribute.js",
111	"lib/js/htmlentities.js",
112	"lib/js/muestraError.js",
113	"lib/js/muestraTextoDeAyuda.js",
114	"lib/js/ProblemDetails.js",
115	"lib/js/querySelector.js",
116	"lib/js/resaltaSiEstasEn.js",
117	"lib/js/const/ES_APPLE.js",
118	"lib/js/custom/md-menu-button.js",
119	"lib/js/custom/md-options-menu.js",
120	"lib/js/custom/md-overflow-button.js",
121	"lib/js/custom/md-overflow-menu.js",
122	"lib/js/custom/md-select-menu.js",
123	"lib/js/custom/md-slider-field.js",
124	"lib/js/custom/md-top-app-bar.js",
125	"lib/js/custom/MdNavigationDrawer.js",
126	"material-tokens/css/baseline.css",
127	"material-tokens/css/colors.css",
128	"material-tokens/css/elevation.css",
129	"material-tokens/css/motion.css",
130	"material-tokens/css/palette.css",
131	"material-tokens/css/shape.css",
132	"material-tokens/css/state.css",
133	"material-tokens/css/typography.css",
134	"material-tokens/css/theme/dark.css",
135	"material-tokens/css/theme/light.css",
136	"ungap/custom-elements.js",
137	"/"
138	]
139
140	// Verifica si el código corre dentro de un service worker.
141	if (self instanceof ServiceWorkerGlobalScope) {
142	// Evento al empezar a instalar el servide worker,
143	self.addEventListener("install",
144	(/** @type {ExtendableEvent} */ evt) => {
145	console.log("El service worker se está instalando.")
146	evt.waitUntil(llenaElCache())
147	})
148
149	// Evento al solicitar información a la red.
150	self.addEventListener("fetch", (/** @type {FetchEvent} */ evt) => {
151	if (evt.request.method === "GET") {
152	evt.respondWith(buscaLaRespuestaEnElCache(evt))
153	}
154	})
155
156	// Evento cuando el service worker se vuelve activo.
157	self.addEventListener("activate",
158	() => console.log("El service worker está activo."))
159	}
160
161	async function llenaElCache() {
162	console.log("Intentando cargar caché:", CACHE)
163	// Borra todos los cachés.
164	const keys = await caches.keys()
165	for (const key of keys) {
166	await caches.delete(key)
167	}
168	// Abre el caché de este service worker.
169	const cache = await caches.open(CACHE)
170	// Carga el listado de ARCHIVOS.
171	await cache.addAll(ARCHIVOS)
172	console.log("Cache cargado:", CACHE)
173	console.log("Versión:", VERSION)
174	}
175
176	/** @param {FetchEvent} evt */
177	async function buscaLaRespuestaEnElCache(evt) {
178	// Abre el caché.
179	const cache = await caches.open(CACHE)
180	const request = evt.request
181	/* Busca la respuesta a la solicitud en el contenido del caché, sin
182	* tomar en cuenta la parte después del símbolo "?" en la URL. */
183	const response = await cache.match(request, { ignoreSearch: true })
184	if (response === undefined) {
185	/* Si no la encuentra, empieza a descargar de la red y devuelve
186	* la promesa. */
187	return fetch(request)
188	} else {
189	// Si la encuentra, devuelve la respuesta encontrada en el caché.
190	return response
191	}
192	}

29. Carpeta « css »

Versión para imprimir.

A. css / dark-hc.css


1	.dark-high-contrast {
2	--md-sys-color-primary: rgb(251 250 255);
3	--md-sys-color-surface-tint: rgb(170 199 255);
4	--md-sys-color-on-primary: rgb(0 0 0);
5	--md-sys-color-primary-container: rgb(177 203 255);
6	--md-sys-color-on-primary-container: rgb(0 0 0);
7	--md-sys-color-secondary: rgb(251 250 255);
8	--md-sys-color-on-secondary: rgb(0 0 0);
9	--md-sys-color-secondary-container: rgb(194 203 224);
10	--md-sys-color-on-secondary-container: rgb(0 0 0);
11	--md-sys-color-tertiary: rgb(255 249 250);
12	--md-sys-color-on-tertiary: rgb(0 0 0);
13	--md-sys-color-tertiary-container: rgb(225 192 229);
14	--md-sys-color-on-tertiary-container: rgb(0 0 0);
15	--md-sys-color-error: rgb(255 249 249);
16	--md-sys-color-on-error: rgb(0 0 0);
17	--md-sys-color-error-container: rgb(255 186 177);
18	--md-sys-color-on-error-container: rgb(0 0 0);
19	--md-sys-color-background: rgb(17 19 24);
20	--md-sys-color-on-background: rgb(226 226 233);
21	--md-sys-color-surface: rgb(17 19 24);
22	--md-sys-color-on-surface: rgb(255 255 255);
23	--md-sys-color-surface-variant: rgb(68 71 78);
24	--md-sys-color-on-surface-variant: rgb(251 250 255);
25	--md-sys-color-outline: rgb(200 202 212);
26	--md-sys-color-outline-variant: rgb(200 202 212);
27	--md-sys-color-shadow: rgb(0 0 0);
28	--md-sys-color-scrim: rgb(0 0 0);
29	--md-sys-color-inverse-surface: rgb(226 226 233);
30	--md-sys-color-inverse-on-surface: rgb(0 0 0);
31	--md-sys-color-inverse-primary: rgb(0 41 89);
32	--md-sys-color-primary-fixed: rgb(221 231 255);
33	--md-sys-color-on-primary-fixed: rgb(0 0 0);
34	--md-sys-color-primary-fixed-dim: rgb(177 203 255);
35	--md-sys-color-on-primary-fixed-variant: rgb(0 22 52);
36	--md-sys-color-secondary-fixed: rgb(222 231 253);
37	--md-sys-color-on-secondary-fixed: rgb(0 0 0);
38	--md-sys-color-secondary-fixed-dim: rgb(194 203 224);
39	--md-sys-color-on-secondary-fixed-variant: rgb(13 22 38);
40	--md-sys-color-tertiary-fixed: rgb(252 221 255);
41	--md-sys-color-on-tertiary-fixed: rgb(0 0 0);
42	--md-sys-color-tertiary-fixed-dim: rgb(225 192 229);
43	--md-sys-color-on-tertiary-fixed-variant: rgb(35 14 41);
44	--md-sys-color-surface-dim: rgb(17 19 24);
45	--md-sys-color-surface-bright: rgb(55 57 62);
46	--md-sys-color-surface-container-lowest: rgb(12 14 19);
47	--md-sys-color-surface-container-low: rgb(25 28 32);
48	--md-sys-color-surface-container: rgb(29 32 36);
49	--md-sys-color-surface-container-high: rgb(40 42 47);
50	--md-sys-color-surface-container-highest: rgb(51 53 58);
51	}
52

B. css / dark-mc.css


1	.dark-medium-contrast {
2	--md-sys-color-primary: rgb(177 203 255);
3	--md-sys-color-surface-tint: rgb(170 199 255);
4	--md-sys-color-on-primary: rgb(0 22 52);
5	--md-sys-color-primary-container: rgb(116 145 199);
6	--md-sys-color-on-primary-container: rgb(0 0 0);
7	--md-sys-color-secondary: rgb(194 203 224);
8	--md-sys-color-on-secondary: rgb(13 22 38);
9	--md-sys-color-secondary-container: rgb(136 145 165);
10	--md-sys-color-on-secondary-container: rgb(0 0 0);
11	--md-sys-color-tertiary: rgb(225 192 229);
12	--md-sys-color-on-tertiary: rgb(35 14 41);
13	--md-sys-color-tertiary-container: rgb(164 135 169);
14	--md-sys-color-on-tertiary-container: rgb(0 0 0);
15	--md-sys-color-error: rgb(255 186 177);
16	--md-sys-color-on-error: rgb(55 0 1);
17	--md-sys-color-error-container: rgb(255 84 73);
18	--md-sys-color-on-error-container: rgb(0 0 0);
19	--md-sys-color-background: rgb(17 19 24);
20	--md-sys-color-on-background: rgb(226 226 233);
21	--md-sys-color-surface: rgb(17 19 24);
22	--md-sys-color-on-surface: rgb(251 250 255);
23	--md-sys-color-surface-variant: rgb(68 71 78);
24	--md-sys-color-on-surface-variant: rgb(200 202 212);
25	--md-sys-color-outline: rgb(160 163 172);
26	--md-sys-color-outline-variant: rgb(128 131 140);
27	--md-sys-color-shadow: rgb(0 0 0);
28	--md-sys-color-scrim: rgb(0 0 0);
29	--md-sys-color-inverse-surface: rgb(226 226 233);
30	--md-sys-color-inverse-on-surface: rgb(40 42 47);
31	--md-sys-color-inverse-primary: rgb(41 72 120);
32	--md-sys-color-primary-fixed: rgb(214 227 255);
33	--md-sys-color-on-primary-fixed: rgb(0 17 43);
34	--md-sys-color-primary-fixed-dim: rgb(170 199 255);
35	--md-sys-color-on-primary-fixed-variant: rgb(19 54 101);
36	--md-sys-color-secondary-fixed: rgb(218 226 249);
37	--md-sys-color-on-secondary-fixed: rgb(8 17 33);
38	--md-sys-color-secondary-fixed-dim: rgb(190 198 220);
39	--md-sys-color-on-secondary-fixed-variant: rgb(46 54 71);
40	--md-sys-color-tertiary-fixed: rgb(250 216 253);
41	--md-sys-color-on-tertiary-fixed: rgb(29 8 35);
42	--md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
43	--md-sys-color-on-tertiary-fixed-variant: rgb(69 46 74);
44	--md-sys-color-surface-dim: rgb(17 19 24);
45	--md-sys-color-surface-bright: rgb(55 57 62);
46	--md-sys-color-surface-container-lowest: rgb(12 14 19);
47	--md-sys-color-surface-container-low: rgb(25 28 32);
48	--md-sys-color-surface-container: rgb(29 32 36);
49	--md-sys-color-surface-container-high: rgb(40 42 47);
50	--md-sys-color-surface-container-highest: rgb(51 53 58);
51	}
52

C. css / dark.css


1	.dark {
2	--md-sys-color-primary: rgb(170 199 255);
3	--md-sys-color-surface-tint: rgb(170 199 255);
4	--md-sys-color-on-primary: rgb(10 48 95);
5	--md-sys-color-primary-container: rgb(40 71 119);
6	--md-sys-color-on-primary-container: rgb(214 227 255);
7	--md-sys-color-secondary: rgb(190 198 220);
8	--md-sys-color-on-secondary: rgb(40 49 65);
9	--md-sys-color-secondary-container: rgb(62 71 89);
10	--md-sys-color-on-secondary-container: rgb(218 226 249);
11	--md-sys-color-tertiary: rgb(221 188 224);
12	--md-sys-color-on-tertiary: rgb(63 40 68);
13	--md-sys-color-tertiary-container: rgb(87 62 92);
14	--md-sys-color-on-tertiary-container: rgb(250 216 253);
15	--md-sys-color-error: rgb(255 180 171);
16	--md-sys-color-on-error: rgb(105 0 5);
17	--md-sys-color-error-container: rgb(147 0 10);
18	--md-sys-color-on-error-container: rgb(255 218 214);
19	--md-sys-color-background: rgb(17 19 24);
20	--md-sys-color-on-background: rgb(226 226 233);
21	--md-sys-color-surface: rgb(17 19 24);
22	--md-sys-color-on-surface: rgb(226 226 233);
23	--md-sys-color-surface-variant: rgb(68 71 78);
24	--md-sys-color-on-surface-variant: rgb(196 198 208);
25	--md-sys-color-outline: rgb(142 144 153);
26	--md-sys-color-outline-variant: rgb(68 71 78);
27	--md-sys-color-shadow: rgb(0 0 0);
28	--md-sys-color-scrim: rgb(0 0 0);
29	--md-sys-color-inverse-surface: rgb(226 226 233);
30	--md-sys-color-inverse-on-surface: rgb(46 48 54);
31	--md-sys-color-inverse-primary: rgb(65 95 145);
32	--md-sys-color-primary-fixed: rgb(214 227 255);
33	--md-sys-color-on-primary-fixed: rgb(0 27 62);
34	--md-sys-color-primary-fixed-dim: rgb(170 199 255);
35	--md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
36	--md-sys-color-secondary-fixed: rgb(218 226 249);
37	--md-sys-color-on-secondary-fixed: rgb(19 28 43);
38	--md-sys-color-secondary-fixed-dim: rgb(190 198 220);
39	--md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
40	--md-sys-color-tertiary-fixed: rgb(250 216 253);
41	--md-sys-color-on-tertiary-fixed: rgb(40 19 46);
42	--md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
43	--md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
44	--md-sys-color-surface-dim: rgb(17 19 24);
45	--md-sys-color-surface-bright: rgb(55 57 62);
46	--md-sys-color-surface-container-lowest: rgb(12 14 19);
47	--md-sys-color-surface-container-low: rgb(25 28 32);
48	--md-sys-color-surface-container: rgb(29 32 36);
49	--md-sys-color-surface-container-high: rgb(40 42 47);
50	--md-sys-color-surface-container-highest: rgb(51 53 58);
51	}
52

D. css / estilos.css


1	/* Selecciona el tema claro para Material Design 3. Puedes elegir
2	* light.css, light-mc.css o light-hc.css */
3	@import url(light.css) screen and (prefers-color-scheme: light);
4	/* Selecciona el tema oscuro para Material Design 3. Puedes elegir
5	* dark.css, dark-mc.css o dark-hc.css */
6	@import url(dark.css) screen and (prefers-color-scheme: dark);
7	/* Definiciones para Material Design 3 */
8	@import url(../material-tokens/css/baseline.css);
9	/* Fonts utilizados */
10	@import url(../lib/css/roboto.css);
11	@import url(../lib/css/material-symbols-outlined.css);
12	/* CSS de elementos utilizados */
13	@import url(../lib/css/md-ripple.css);
14	@import url(../lib/css/md-top-app-bar.css);
15	@import url(../lib/css/md-menu.css);
16	@import url(../lib/css/md-standard-icon-button.css);
17	@import url(../lib/css/md-fab-primary.css);
18	@import url(../lib/css/md-filled-button.css);
19	@import url(../lib/css/md-filled-text-field.css);
20	@import url(../lib/css/md-outline-button.css);
21	@import url(../lib/css/md-switch.css);
22	@import url(../lib/css/md-slider-field.css);
23	@import url(../lib/css/md-segmented-button.css);
24	@import url(../lib/css/md-list.css);
25	@import url(../lib/css/md-cards.css);
26	@import url(../lib/css/md-tab.css);
27	@import url(../lib/css/md-navigation-bar.css);
28
29	html {
30	/* Indica los temas del sistema operativo que son soportados. */
31	color-scheme: light dark;
32	--tabWidth: 3.75rem;
33	--anchoNav: 22.5rem;
34	}
35
36	main {
37	max-width: 600px;
38	margin-left: auto;
39	margin-right: auto;
40	}
41
42	/* Quita un borde rojo que coloca Firefox. */
43	:-moz-ui-invalid {
44	box-shadow: none;
45	}
46
47	body {
48	margin: 0;
49	font-family: var(--md-sys-typescale-body-large-font);
50	font-weight: var(--md-sys-typescale-body-large-weight);
51	font-size: var(--md-sys-typescale-body-large-size);
52	font-style: var(--md-sys-typescale-body-large-font-style);
53	letter-spacing: var(--md-sys-typescale-body-large-tracking);
54	line-height: var(--md-sys-typescale-body-large-line-height);
55	text-transform: var(--md-sys-typescale-body-large-text-transform);
56	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
57	color: var(--md-sys-color-on-background);
58	background-color: var(--md-sys-color-background);
59	/* Las siguientes líneas Evita los cambios de apariencia al cargar estilos y
60	+ custom elements, que son conocidos como Flash Of Unstyled Content (fouc). */
61	opacity: 0;
62	animation-name: fouc;
63	animation-fill-mode: forwards;
64	animation-duration: 1.5s;
65	}
66
67	@keyframes fouc {
68	to {
69	opacity: 1;
70	}
71	}
72
73	html {
74	--Font: -apple-system, BlinkMacSystemFont, roboto, sans-serif;
75	--colIntIos: white;
76	--colIntIosOnBk: #2acc2a;
77	--colIntIosOnBkFc: #1bbb1b;
78	--colIntIosOffBk: #dbdbdb;
79	--colIntIosOffBkFc: #BDBDBD;
80	/* Plain typeface */
81	--md-ref-typeface-plain: var(--Font);
82	/* Brand typeface */
83	--md-ref-typeface-brand: var(--Font);
84	--md-sys-typescale-label-large-weight-prominent:
85	var(--md-ref-typeface-weight-bold);
86	--md-box_shadow_level4:
87	0 var(--md-sys-elevation-level4) var(--md-sys-elevation-level4) var(--md-sys-color-shadow);
88	--md-box_shadow_level3:
89	0 var(--md-sys-elevation-level3) var(--md-sys-elevation-level3) var(--md-sys-color-shadow);
90	--md-box_shadow_level2:
91	0 var(--md-sys-elevation-level2) var(--md-sys-elevation-level2) var(--md-sys-color-shadow);
92	--md-box_shadow_level1:
93	0 var(--md-sys-elevation-level1) var(--md-sys-elevation-level1) var(--md-sys-color-shadow);
94	--md-box_shadow_level0: none;
95	--iconSize: 1.5rem;
96	--avatarSize: 2.5rem;
97	--imageSize: 3.5rem;
98	--videoWidth: 7.125rem;
99	--videoHeight: 4rem;
100	--scroll-headline-duracion: 2s;
101	--md-sys-state-focus-indicator-outer-offset: 0.125rem;
102	--md-sys-state-focus-indicator-thickness: 0.1875rem;
103	/* Pressed state layer opacity */
104	--state-pressed-transparency-percentage: 84%;
105	/* Focus state layer opacity */
106	--state-focus-transparency-percentage: 88%;
107	/* Hover state layer opacity */
108	--state-hover-transparency-percentage: 92%;
109	}
110
111	p {
112	margin: 1rem;
113	}
114
115	a {
116	color: var(--md-sys-color-on-background);
117	}
118
119	@media (prefers-color-scheme: light) {
120	html {
121	--md-riple-color: #00000020;
122	}
123	}
124
125	@media (prefers-color-scheme: dark) {
126	html {
127	--md-riple-color: #ffffff40;
128	}
129	}
130
131	@keyframes salePorLaIzquierda {
132	to {
133	translate: -100vw 0;
134	}
135	}
136
137	@keyframes entraPorLaDerecha {
138	from {
139	translate: 100vw 0;
140	}
141	}
142
143	@keyframes aparece {
144	from {
145	opacity: 0;
146	}
147	}
148
149	@keyframes desvanece {
150	to {
151	opacity: 0;
152	}
153	}

E. css / light-hc.css


1	.light-high-contrast {
2	--md-sys-color-primary: rgb(0 33 74);
3	--md-sys-color-surface-tint: rgb(65 95 145);
4	--md-sys-color-on-primary: rgb(255 255 255);
5	--md-sys-color-primary-container: rgb(35 67 115);
6	--md-sys-color-on-primary-container: rgb(255 255 255);
7	--md-sys-color-secondary: rgb(25 34 50);
8	--md-sys-color-on-secondary: rgb(255 255 255);
9	--md-sys-color-secondary-container: rgb(58 67 84);
10	--md-sys-color-on-secondary-container: rgb(255 255 255);
11	--md-sys-color-tertiary: rgb(48 26 53);
12	--md-sys-color-on-tertiary: rgb(255 255 255);
13	--md-sys-color-tertiary-container: rgb(82 58 88);
14	--md-sys-color-on-tertiary-container: rgb(255 255 255);
15	--md-sys-color-error: rgb(78 0 2);
16	--md-sys-color-on-error: rgb(255 255 255);
17	--md-sys-color-error-container: rgb(140 0 9);
18	--md-sys-color-on-error-container: rgb(255 255 255);
19	--md-sys-color-background: rgb(249 249 255);
20	--md-sys-color-on-background: rgb(25 28 32);
21	--md-sys-color-surface: rgb(249 249 255);
22	--md-sys-color-on-surface: rgb(0 0 0);
23	--md-sys-color-surface-variant: rgb(224 226 236);
24	--md-sys-color-on-surface-variant: rgb(33 36 43);
25	--md-sys-color-outline: rgb(64 67 74);
26	--md-sys-color-outline-variant: rgb(64 67 74);
27	--md-sys-color-shadow: rgb(0 0 0);
28	--md-sys-color-scrim: rgb(0 0 0);
29	--md-sys-color-inverse-surface: rgb(46 48 54);
30	--md-sys-color-inverse-on-surface: rgb(255 255 255);
31	--md-sys-color-inverse-primary: rgb(229 236 255);
32	--md-sys-color-primary-fixed: rgb(35 67 115);
33	--md-sys-color-on-primary-fixed: rgb(255 255 255);
34	--md-sys-color-primary-fixed-dim: rgb(4 44 91);
35	--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36	--md-sys-color-secondary-fixed: rgb(58 67 84);
37	--md-sys-color-on-secondary-fixed: rgb(255 255 255);
38	--md-sys-color-secondary-fixed-dim: rgb(36 45 61);
39	--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40	--md-sys-color-tertiary-fixed: rgb(82 58 88);
41	--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42	--md-sys-color-tertiary-fixed-dim: rgb(59 36 64);
43	--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44	--md-sys-color-surface-dim: rgb(217 217 224);
45	--md-sys-color-surface-bright: rgb(249 249 255);
46	--md-sys-color-surface-container-lowest: rgb(255 255 255);
47	--md-sys-color-surface-container-low: rgb(243 243 250);
48	--md-sys-color-surface-container: rgb(237 237 244);
49	--md-sys-color-surface-container-high: rgb(231 232 238);
50	--md-sys-color-surface-container-highest: rgb(226 226 233);
51	}
52

F. css / light-mc.css


1	.light-medium-contrast {
2	--md-sys-color-primary: rgb(35 67 115);
3	--md-sys-color-surface-tint: rgb(65 95 145);
4	--md-sys-color-on-primary: rgb(255 255 255);
5	--md-sys-color-primary-container: rgb(88 117 168);
6	--md-sys-color-on-primary-container: rgb(255 255 255);
7	--md-sys-color-secondary: rgb(58 67 84);
8	--md-sys-color-on-secondary: rgb(255 255 255);
9	--md-sys-color-secondary-container: rgb(108 117 136);
10	--md-sys-color-on-secondary-container: rgb(255 255 255);
11	--md-sys-color-tertiary: rgb(82 58 88);
12	--md-sys-color-on-tertiary: rgb(255 255 255);
13	--md-sys-color-tertiary-container: rgb(135 107 140);
14	--md-sys-color-on-tertiary-container: rgb(255 255 255);
15	--md-sys-color-error: rgb(140 0 9);
16	--md-sys-color-on-error: rgb(255 255 255);
17	--md-sys-color-error-container: rgb(218 52 46);
18	--md-sys-color-on-error-container: rgb(255 255 255);
19	--md-sys-color-background: rgb(249 249 255);
20	--md-sys-color-on-background: rgb(25 28 32);
21	--md-sys-color-surface: rgb(249 249 255);
22	--md-sys-color-on-surface: rgb(25 28 32);
23	--md-sys-color-surface-variant: rgb(224 226 236);
24	--md-sys-color-on-surface-variant: rgb(64 67 74);
25	--md-sys-color-outline: rgb(92 95 103);
26	--md-sys-color-outline-variant: rgb(120 122 131);
27	--md-sys-color-shadow: rgb(0 0 0);
28	--md-sys-color-scrim: rgb(0 0 0);
29	--md-sys-color-inverse-surface: rgb(46 48 54);
30	--md-sys-color-inverse-on-surface: rgb(240 240 247);
31	--md-sys-color-inverse-primary: rgb(170 199 255);
32	--md-sys-color-primary-fixed: rgb(88 117 168);
33	--md-sys-color-on-primary-fixed: rgb(255 255 255);
34	--md-sys-color-primary-fixed-dim: rgb(62 92 142);
35	--md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
36	--md-sys-color-secondary-fixed: rgb(108 117 136);
37	--md-sys-color-on-secondary-fixed: rgb(255 255 255);
38	--md-sys-color-secondary-fixed-dim: rgb(83 92 111);
39	--md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
40	--md-sys-color-tertiary-fixed: rgb(135 107 140);
41	--md-sys-color-on-tertiary-fixed: rgb(255 255 255);
42	--md-sys-color-tertiary-fixed-dim: rgb(109 83 114);
43	--md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
44	--md-sys-color-surface-dim: rgb(217 217 224);
45	--md-sys-color-surface-bright: rgb(249 249 255);
46	--md-sys-color-surface-container-lowest: rgb(255 255 255);
47	--md-sys-color-surface-container-low: rgb(243 243 250);
48	--md-sys-color-surface-container: rgb(237 237 244);
49	--md-sys-color-surface-container-high: rgb(231 232 238);
50	--md-sys-color-surface-container-highest: rgb(226 226 233);
51	}
52

G. css / light.css


1	.light {
2	--md-sys-color-primary: rgb(65 95 145);
3	--md-sys-color-surface-tint: rgb(65 95 145);
4	--md-sys-color-on-primary: rgb(255 255 255);
5	--md-sys-color-primary-container: rgb(214 227 255);
6	--md-sys-color-on-primary-container: rgb(0 27 62);
7	--md-sys-color-secondary: rgb(86 95 113);
8	--md-sys-color-on-secondary: rgb(255 255 255);
9	--md-sys-color-secondary-container: rgb(218 226 249);
10	--md-sys-color-on-secondary-container: rgb(19 28 43);
11	--md-sys-color-tertiary: rgb(112 85 117);
12	--md-sys-color-on-tertiary: rgb(255 255 255);
13	--md-sys-color-tertiary-container: rgb(250 216 253);
14	--md-sys-color-on-tertiary-container: rgb(40 19 46);
15	--md-sys-color-error: rgb(186 26 26);
16	--md-sys-color-on-error: rgb(255 255 255);
17	--md-sys-color-error-container: rgb(255 218 214);
18	--md-sys-color-on-error-container: rgb(65 0 2);
19	--md-sys-color-background: rgb(249 249 255);
20	--md-sys-color-on-background: rgb(25 28 32);
21	--md-sys-color-surface: rgb(249 249 255);
22	--md-sys-color-on-surface: rgb(25 28 32);
23	--md-sys-color-surface-variant: rgb(224 226 236);
24	--md-sys-color-on-surface-variant: rgb(68 71 78);
25	--md-sys-color-outline: rgb(116 119 127);
26	--md-sys-color-outline-variant: rgb(196 198 208);
27	--md-sys-color-shadow: rgb(0 0 0);
28	--md-sys-color-scrim: rgb(0 0 0);
29	--md-sys-color-inverse-surface: rgb(46 48 54);
30	--md-sys-color-inverse-on-surface: rgb(240 240 247);
31	--md-sys-color-inverse-primary: rgb(170 199 255);
32	--md-sys-color-primary-fixed: rgb(214 227 255);
33	--md-sys-color-on-primary-fixed: rgb(0 27 62);
34	--md-sys-color-primary-fixed-dim: rgb(170 199 255);
35	--md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
36	--md-sys-color-secondary-fixed: rgb(218 226 249);
37	--md-sys-color-on-secondary-fixed: rgb(19 28 43);
38	--md-sys-color-secondary-fixed-dim: rgb(190 198 220);
39	--md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
40	--md-sys-color-tertiary-fixed: rgb(250 216 253);
41	--md-sys-color-on-tertiary-fixed: rgb(40 19 46);
42	--md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
43	--md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
44	--md-sys-color-surface-dim: rgb(217 217 224);
45	--md-sys-color-surface-bright: rgb(249 249 255);
46	--md-sys-color-surface-container-lowest: rgb(255 255 255);
47	--md-sys-color-surface-container-low: rgb(243 243 250);
48	--md-sys-color-surface-container: rgb(237 237 244);
49	--md-sys-color-surface-container-high: rgb(231 232 238);
50	--md-sys-color-surface-container-highest: rgb(226 226 233);
51	}
52

H. css / transicion_completa.css


1
2	@view-transition {
3	navigation: auto;
4	}
5
6	::view-transition-group(root) {
7	animation-duration: var(--md-sys-motion-duration-700);
8	}
9
10	html::view-transition-old(root) {
11	animation-name: desvanece;
12	}
13
14	html::view-transition-new(root) {
15	animation-delay: var(--md-sys-motion-duration-700);
16	animation-name: aparece;
17	}

I. css / transicion_pestanas.css


1	@view-transition {
2	navigation: auto;
3	}
4
5	#headline {
6	view-transition-name: encabezado;
7	}
8
9	main {
10	view-transition-name: contenido;
11	}
12
13	::view-transition-group(encabezado) {
14	animation-duration: var(--md-sys-motion-duration-1000);
15	}
16
17	::view-transition-group(contenido) {
18	animation-duration: var(--md-sys-motion-duration-1000);
19	}
20
21	html::view-transition-old(encabezado) {
22	animation-name: salePorLaIzquierda;
23	}
24
25	html::view-transition-new(encabezado) {
26	animation-name: entraPorLaDerecha;
27	}
28
29	html::view-transition-old(contenido) {
30	animation-name: salePorLaIzquierda;
31	}
32
33	html::view-transition-new(contenido) {
34	animation-duration: var(--md-sys-motion-duration-700);
35	animation-name: entraPorLaDerecha;
36	}

30. favicon.ico

Es el ícono que se muestra en las pestañas del navegador. Normalmente debe ser de 32x32 pixeles y debe colocarse en la carpeta raíz del proyecto.

31. Carpeta « img »

Versión para imprimir.

A. img / Escultura_de_coyote.jpeg

La foto del Coyote de Neza es de Ludres Isan, publicada en Pinterest. Se puede localizar en https://www.pinterest.com.mx/ludresi/

B. img / icono2048.png

C. img / maskable_icon.png

D. img / maskable_icon_x128.png

E. img / maskable_icon_x192.png

F. img / maskable_icon_x384.png

G. img / maskable_icon_x48.png

H. img / maskable_icon_x512.png

I. img / maskable_icon_x72.png

J. img / maskable_icon_x96.png

K. img / pexels-craig-dennis-3701822.jpg

Foto de Craig Dennis en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/puente-golden-gate-san-francisco-california-3701822/

L. img / pexels-creative-workshop-3978352.jpg

Foto de Creative Workshop en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/perro-de-pelo-corto-marron-y-blanco-acostado-3978352/

M. img / pexels-erik-karits-3732453.jpg

Foto de Erik Karits en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/foto-de-buho-ural-3732453/

N. img / pexels-esteban-arango-10226903.jpg

Foto de Esteban Arango en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/animal-perro-mono-hierba-10226903/

O. img / pexels-moises-patrício-10961948.jpg

Foto de Moises Patrício en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/nina-mono-cara-sonriente-10961948/

P. img / pexels-ralph-2270848.jpg

Foto de Ralph en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/leon-marron-2270848/

Q. img / pexels-rasmus-svinding-35435.jpg

Foto de Rasmus Svinding en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/oso-cafe-35435/

R. img / pexels-steve-397857.jpg

Foto de Steve en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/lobo-blanco-y-negro-397857/

S. img / pexels-vadim-b-141496.jpg

Foto de Vadim B en Pexels. Se puede localizar en https://www.pexels.com/es-es/foto/gatito-gris-en-bolsa-de-papel-plateada-141496/

T. img / screenshot_horizontal.png

U. img / screenshot_vertical.png

32. Carpeta « lib »

Versión para imprimir.

A. Carpeta « lib / css »

Versión para imprimir.

1. lib / css / material-symbols-outlined.css


1	@font-face {
2	font-family: 'Material Symbols Outlined';
3	font-style: normal;
4	src:
5	url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].woff2) format('woff2'),
6	url(../fonts/MaterialSymbolsOutlined[FILL\,GRAD\,opsz\,wght].ttf) format('truetype');
7	}
8
9	.material-symbols-outlined {
10	font-family: 'Material Symbols Outlined';
11	font-weight: normal;
12	font-style: normal;
13	font-size: 1.5rem;
14	width: 1.5rem;
15	height: 1.5rem;
16	/* Preferred icon size */
17	display: inline-block;
18	line-height: 1;
19	text-transform: none;
20	letter-spacing: normal;
21	word-wrap: normal;
22	white-space: nowrap;
23	direction: ltr;
24	}

2. lib / css / md-cards.css


1	.md-cards {
2	margin: 0.5rem;
3	gap: 0.5rem;
4	display: grid;
5	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
6	}
7
8	/* container */
9	.md-cards>*::before {
10	content: "";
11	position: absolute;
12	z-index: -2;
13	top: 0;
14	right: 0;
15	left: 0;
16	bottom: 0;
17	background-color: var(--md-sys-color-surface-variant);
18	}
19
20	/* state layer */
21	.md-cards>*::after {
22	content: "";
23	position: absolute;
24	z-index: -1;
25	top: 0;
26	right: 0;
27	left: 0;
28	bottom: 0;
29	background-color: transparent;
30	}
31
32	.md-cards>* {
33	position: relative;
34	display: block;
35	text-decoration: none;
36	color: var(--md-sys-color-on-surface-variant);
37	border-radius: 0.75rem;
38	overflow: hidden;
39	box-shadow: var(--md-box_shadow_level0);
40	}
41
42	/* state layer */
43	.md-cards>:hover::after {
44	background-color: var(--md-sys-color-on-surface-variant);
45	opacity: var(--md-sys-state-hover-state-layer-opacity);
46	}
47
48	.md-cards>a:hover {
49	box-shadow: var(--md-box_shadow_level1);
50	}
51
52	/* state layer */
53	.md-cards>:focus::after {
54	background-color: var(--md-sys-color-on-surface-variant);
55	opacity: var(--md-sys-state-focus-state-layer-opacity);
56	}
57
58	.md-cards>a:focus {
59	outline: none;
60	}
61
62	/* state layer */
63	.md-cards>:active::after {
64	background-color: var(--md-sys-color-on-surface-variant);
65	opacity: var(--md-sys-state-pressed-state-layer-opacity);
66	}
67
68	.md-cards a:active {
69	background-position: center;
70	background-image:
71	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
72	background-size: 100%;
73	animation-name: md-ripple;
74	animation-duration: var(--md-sys-motion-duration-500);
75	box-shadow: var(--md-box_shadow_level0) !important;
76	}
77
78	.md-cards>> {
79	display: block;
80	}
81
82	.md-cards figure {
83	border-radius: 0.75rem;
84	padding: 0;
85	margin: 0;
86	width: 100%;
87	}
88
89	.md-cards figure * {
90	border-radius: 0.75rem;
91	width: 100%;
92	}
93
94	.md-cards .headline {
95	margin: 1rem;
96	font-family: var(--md-sys-typescale-headline-small-font);
97	font-weight: var(--md-sys-typescale-headline-small-weight);
98	font-size: var(--md-sys-typescale-headline-small-size);
99	font-style: var(--md-sys-typescale-headline-small-font-style);
100	letter-spacing: var(--md-sys-typescale-headline-small-tracking);
101	line-height: var(--md-sys-typescale-headline-small-line-height);
102	text-transform: var(--md-sys-typescale-headline-small-text-transform);
103	text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
104	}
105
106	.md-cards a .headline {
107	text-decoration: underline;
108	}
109
110	.md-cards .supporting {
111	margin: 1rem;
112	font-family: var(--md-sys-typescale-body-large-font);
113	font-weight: var(--md-sys-typescale-body-large-weight);
114	font-size: var(--md-sys-typescale-body-large-size);
115	font-style: var(--md-sys-typescale-body-large-font-style);
116	letter-spacing: var(--md-sys-typescale-body-large-tracking);
117	line-height: var(--md-sys-typescale-body-large-line-height);
118	text-transform: var(--md-sys-typescale-body-large-text-transform);
119	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
120	}

3. lib / css / md-fab-primary.css


1	.md-fab-primary {
2	position: relative;
3	display: inline-block;
4	border: none;
5	width: 3.5rem;
6	height: 3.5rem;
7	border-radius: var(--md-sys-shape-corner-large-default-size);
8	overflow: hidden;
9	padding: 0;
10	padding-block: 0;
11	padding-inline: 0;
12	text-decoration: none;
13	background-color: var(--md-sys-color-primary-container);
14	box-shadow: var(--md-box_shadow_level3);
15	}
16
17	.md-fab-primary[hidden] {
18	display: none;
19	}
20
21	/* state layer */
22	.md-fab-primary::after {
23	content: "";
24	position: absolute;
25	top: 0;
26	right: 0;
27	left: 0;
28	bottom: 0;
29	}
30
31	.md-fab-primary span {
32	position: relative;
33	color: var(--md-sys-color-on-primary-container);
34	}
35
36	.md-fab-primary:hover {
37	box-shadow: var(--md-box_shadow_level4);
38	}
39
40	.md-fab-primary:hover::after {
41	background-color: var(--md-sys-color-on-primary-container);
42	opacity: var(--md-sys-state-hover-state-layer-opacity);
43	}
44
45	.md-fab-primary:hover span {
46	color: var(--md-sys-color-on-primary-container);
47	}
48
49
50	.md-fab-primary:focus {
51	box-shadow: var(--md-box_shadow_level3);
52	outline:none;
53	/* outline:
54	var(--md-sys-color-secondary) var(--md-sys-state-focus-indicator-thickness);
55	outline-offset: var(--md-sys-state-focus-indicator-outer-offset); */
56	}
57
58	.md-fab-primary:focus::after {
59	background-color: var(--md-sys-color-on-primary-container);
60	opacity: var(--md-sys-state-focus-state-layer-opacity);
61	}
62
63	.md-fab-primary:focus span {
64	color: var(--md-sys-color-on-primary-container);
65	}
66
67	.md-fab-primary:active {
68	box-shadow: var(--md-box_shadow_level3);
69	background-position: center;
70	background-image:
71	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
72	background-size: 100%;
73	animation-name: md-ripple;
74	animation-duration: var(--md-sys-motion-duration-500);
75	}
76
77	.md-fab-primary:active::after {
78	background-color: var(--md-sys-color-on-primary-container);
79	opacity: var(--md-sys-state-pressed-state-layer-opacity);
80	}
81
82	.md-fab-primary:active span {
83	color: var(--md-sys-color-on-primary-container);
84	}

4. lib / css / md-filled-button.css


1	/* container */
2	.md-filled-button::before {
3	content: "";
4	position: absolute;
5	z-index: -2;
6	top: 0;
7	right: 0;
8	left: 0;
9	bottom: 0;
10	background-color: var(--md-sys-color-primary);
11	}
12
13	/* state layer */
14	.md-filled-button::after {
15	content: "";
16	position: absolute;
17	z-index: -1;
18	top: 0;
19	right: 0;
20	left: 0;
21	bottom: 0;
22	background-color: transparent;
23	}
24
25	/* label, shape */
26	.md-filled-button {
27	position: relative;
28	box-sizing: border-box;
29	border-radius: 1.25rem;
30	height: 2.5rem;
31	line-height: 2.5rem;
32	padding: 0 1.5rem;
33	border: none;
34	background-color: transparent;
35	box-shadow: var(--md-box_shadow_level0);
36	font-family: var(--md-sys-typescale-label-large-font);
37	font-weight: var(--md-sys-typescale-label-large-weight);
38	font-size: var(--md-sys-typescale-label-large-size);
39	font-style: var(--md-sys-typescale-label-large-font-style);
40	letter-spacing: var(--md-sys-typescale-label-large-tracking);
41	text-transform: var(--md-sys-typescale-label-large-text-transform);
42	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
43	color: var(--md-sys-color-on-primary);
44	white-space: nowrap;
45	text-overflow: ellipsis;
46	overflow: hidden;
47	}
48
49	/* label, shape */
50	.md-filled-button:hover {
51	color: var(--md-sys-color-on-primary);
52	box-shadow: var(--md-box_shadow_level1);
53	}
54
55	/* state layer */
56	.md-filled-button:hover::after {
57	background-color: var(--md-sys-color-on-primary);
58	opacity: var(--md-sys-state-hover-state-layer-opacity);
59	}
60
61	/* label, shape */
62	.md-filled-button:focus {
63	outline: none;
64	color: var(--md-sys-color-on-primary);
65	box-shadow: var(--md-box_shadow_level0) !important;
66	}
67
68	/* state layer */
69	.md-filled-button:focus::after {
70	background-color: var(--md-sys-color-on-primary);
71	opacity: var(--md-sys-state-focus-state-layer-opacity);
72	}
73
74	/* label, shape */
75	.md-filled-button:active {
76	color: var(--md-sys-color-on-primary);
77	background-position: center;
78	background-image:
79	radial-gradient(circle, var(--md-sys-color-on-primary-container) 1%, transparent 1%);
80	background-size: 100%;
81	animation-name: md-ripple;
82	animation-duration: var(--md-sys-motion-duration-500);
83	box-shadow: var(--md-box_shadow_level0) !important;
84	}
85
86	/* state layer */
87	.md-filled-button:active::after {
88	background-color: var(--md-sys-color-on-primary);
89	opacity: var(--md-sys-state-pressed-state-layer-opacity);
90	}
91
92	/* label, shape */
93	.md-filled-button:disabled {
94	background-color: transparent !important;
95	color: var(--md-sys-color-on-surface) !important;
96	opacity: 0.38 !important;
97	box-shadow: var(--md-box_shadow_level0) !important;
98	}
99
100	/* container */
101	.md-filled-button:disabled::before {
102	background-color: var(--md-sys-color-on-surface) !important;
103	opacity: 0.12 !important;
104	}
105
106	/* state layer */
107	.md-filled-button:disabled::after {
108	background-color: transparent !important;
109	opacity: 1 !important;
110	}

5. lib / css / md-filled-text-field.css


1	.md-filled-text-field {
2	position: relative;
3	overflow: hidden;
4	display: flex;
5	flex-direction: column;
6	align-items: stretch;
7	padding-top: calc(0.5rem + var(--md-sys-typescale-body-small-line-height));
8	border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
9	border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
10	overflow: hidden;
11	}
12
13	/* container */
14	.md-filled-text-field::before {
15	content: "";
16	position: absolute;
17	z-index: -2;
18	top: 0;
19	right: 0;
20	left: 0;
21	bottom: 0;
22	background-color: var(--md-sys-color-surface-container-highest);
23	}
24
25	/* state layer */
26	.md-filled-text-field::after {
27	content: "";
28	position: absolute;
29	z-index: -1;
30	top: 0;
31	right: 0;
32	left: 0;
33	bottom: 0;
34	background-color: transparent;
35	}
36
37	.md-filled-text-field span,
38	.md-filled-text-field label {
39	position: absolute;
40	top: 0.5rem;
41	left: 1rem;
42	right: 1rem;
43	display: block;
44	transform: translateY(1rem);
45	transition-property: transform;
46	transition-duration: var(--md-sys-motion-duration-300);
47	white-space: nowrap;
48	text-overflow: ellipsis;
49	overflow: hidden;
50	color: var(--md-sys-color-on-surface-variant);
51	font-family: var(--md-sys-typescale-body-large-font);
52	font-weight: var(--md-sys-typescale-body-large-weight);
53	font-size: var(--md-sys-typescale-body-large-size);
54	font-style: var(--md-sys-typescale-body-large-font-style);
55	letter-spacing: var(--md-sys-typescale-body-large-tracking);
56	line-height: var(--md-sys-typescale-body-large-line-height);
57	text-transform: var(--md-sys-typescale-body-large-text-transform);
58	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
59	}
60
61	.md-filled-text-field :not(:placeholder-shown)+span,
62	.md-filled-text-field :not(:placeholder-shown)+label,
63	.md-filled-text-field .populated+span,
64	.md-filled-text-field .populated+label,
65	.md-filled-text-field:focus-within span,
66	.md-filled-text-field:focus-within label,
67	.md-filled-text-field.float span,
68	.md-filled-text-field.float label {
69	transform: translateY(0);
70	font-family: var(--md-sys-typescale-body-small-font);
71	font-weight: var(--md-sys-typescale-body-small-weight);
72	font-size: var(--md-sys-typescale-body-small-size);
73	font-style: var(--md-sys-typescale-body-small-font-style);
74	letter-spacing: var(--md-sys-typescale-body-small-tracking);
75	line-height: var(--md-sys-typescale-body-small-line-height);
76	text-transform: var(--md-sys-typescale-body-small-text-transform);
77	text-decoration: var(--md-sys-typescale-body-small-text-decoration);
78	}
79
80	.md-filled-text-field :not(label, span, small) {
81	position: relative;
82	caret-color: var(--md-sys-color-primary);
83	min-height: 2rem;
84	box-sizing: border-box;
85	padding-left: 1rem;
86	padding-bottom: 0.5rem;
87	padding-right: 1rem;
88	border: none;
89	resize: none;
90	color: var(--md-sys-color-on-surface);
91	font-family: var(--md-sys-typescale-body-large-font);
92	font-weight: var(--md-sys-typescale-body-large-weight);
93	font-size: var(--md-sys-typescale-body-large-size);
94	font-style: var(--md-sys-typescale-body-large-font-style);
95	letter-spacing: var(--md-sys-typescale-body-large-tracking);
96	line-height: var(--md-sys-typescale-body-large-line-height);
97	text-transform: var(--md-sys-typescale-body-large-text-transform);
98	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
99	background-color: transparent;
100	outline: none;
101	border-bottom-width: 0.0625rem;
102	border-bottom-style: solid;
103	border-bottom-color: var(--md-sys-color-on-surface-variant);
104	}
105
106	.md-filled-text-field ::placeholder {
107	color: transparent;
108	}
109
110	.md-filled-text-field small {
111	display: block;
112	color: var(--md-sys-color-on-surface-variant);
113	background-color: var(--md-sys-color-background);
114	font-family: var(--md-sys-typescale-body-small-font);
115	font-weight: var(--md-sys-typescale-body-small-weight);
116	font-size: var(--md-sys-typescale-body-small-size);
117	font-style: var(--md-sys-typescale-body-small-font-style);
118	letter-spacing: var(--md-sys-typescale-body-small-tracking);
119	line-height: var(--md-sys-typescale-body-small-line-height);
120	text-transform: var(--md-sys-typescale-body-small-text-transform);
121	text-decoration: var(--md-sys-typescale-body-small-text-decoration);
122	padding: 0.25rem 1rem 0 1rem;
123	white-space: nowrap;
124	text-overflow: ellipsis;
125	overflow: hidden;
126	}
127
128	.md-filled-text-field:hover span,
129	.md-filled-text-field:hover label {
130	color: var(--md-sys-color-on-surface-variant);
131	}
132
133	.md-filled-text-field:hover :not(label, span, small) {
134	padding-bottom: 0.5rem;
135	border-bottom-width: 0.0625rem;
136	border-bottom-color: var(--md-sys-color-on-surface);
137	}
138
139	.md-filled-text-field:hover::after {
140	background-color: var(--md-sys-color-on-surface);
141	opacity: var(--md-sys-state-hover-state-layer-opacity);
142	}
143
144	.md-filled-text-field:hover small {
145	color: var(--md-sys-color-on-surface-variant);
146	}
147
148	.md-filled-text-field:focus-within span,
149	.md-filled-text-field:focus-within label {
150	color: var(--md-sys-color-primary);
151	}
152
153	.md-filled-text-field :focus {
154	color: var(--md-sys-color-on-surface);
155	outline: none;
156	padding-bottom: 0.4375rem;
157	border-bottom-width: 0.125rem;
158	border-bottom-color: var(--md-sys-color-primary);
159	}
160
161	.md-filled-text-field:hover :focus {
162	padding-bottom: 0.4375rem;
163	border-bottom-width: 0.125rem;
164	}
165
166	.md-filled-text-field:focus-within small {
167	color: var(--md-sys-color-on-surface-variant);
168	}
169
170	.md-filled-text-field :invalid {
171	color: var(--md-sys-color-on-surface);
172	border-bottom-color: var(--md-sys-color-error);
173	}
174
175	.md-filled-text-field :invalid+span,
176	.md-filled-text-field :invalid+label {
177	color: var(--md-sys-color-error);
178	}
179
180	.md-filled-text-field :invalid~small,
181	.md-filled-text-field:hover :invalid~small,
182	.md-filled-text-field:focus-within .input-text:invalid~small {
183	color: var(--md-sys-color-error);
184	}
185
186	.md-filled-text-field :invalid:focus {
187	caret-color: var(--md-sys-color-error);
188	border-bottom-color: var(--md-sys-color-error);
189	}
190
191	.md-filled-text-field:hover :invalid {
192	color: var(--md-sys-color-on-surface);
193	border-bottom-color: var(--md-sys-color-error);
194	}

6. lib / css / md-list.css


1	.md-list {
2	margin: 0.5rem 0;
3	padding: 0;
4	list-style-type: none;
5	}
6
7	.md-list .md-one-line,
8	.md-list .md-two-line,
9	.md-list .md-three-line {
10	position: relative;
11	display: flex;
12	box-sizing: border-box;
13	}
14
15	/* container */
16	.md-list .md-one-line::before,
17	.md-list .md-two-line::before,
18	.md-list .md-three-line::before {
19	content: "";
20	position: absolute;
21	z-index: -2;
22	top: 0;
23	right: 0;
24	left: 0;
25	bottom: 0;
26	background-color: var(--md-sys-color-surface);
27	}
28
29	/* state layer */
30	.md-list .md-one-line::after,
31	.md-list .md-two-line::after,
32	.md-list .md-three-line::after {
33	content: "";
34	position: absolute;
35	z-index: -1;
36	top: 0;
37	right: 0;
38	left: 0;
39	bottom: 0;
40	background-color: transparent;
41	}
42
43	.md-list .md-one-line {
44	align-items: center;
45	gap: 1rem;
46	min-height: 3.5rem;
47	padding: 0.5rem 1.5rem 0.5rem 1rem;
48	}
49
50	.md-list .md-one-line.video,
51	.md-list .md-two-line.video {
52	padding: 0.75rem 1.5rem 0.75rem 0;
53	}
54
55	.md-list .md-two-line,
56	.md-list .md-three-line {
57	flex-flow: column;
58	}
59
60	.md-list .md-two-line {
61	justify-content: center;
62	min-height: 4.5rem;
63	padding: 0.5rem 1.5rem 0.5rem 1rem;
64	}
65
66	.md-list .md-two-line.icon,
67	.md-list .md-two-line.avatar,
68	.md-list .md-two-line.image,
69	.md-list .md-two-line.video,
70	.md-list .md-three-line.icon,
71	.md-list .md-three-line.avatar,
72	.md-list .md-three-line.image,
73	.md-list .md-three-line.video {
74	display: grid;
75	column-gap: 1rem;
76	row-gap: 0;
77	grid-template-areas:
78	"img headline"
79	"img supporting";
80	}
81
82	.md-list .md-two-line.icon,
83	.md-list .md-two-line.avatar,
84	.md-list .md-two-line.image,
85	.md-list .md-two-line.video {
86	align-content: center;
87	grid-template-rows: 1fr 1fr;
88	}
89
90	.md-list .md-two-line.icon,
91	.md-list .md-three-line.icon {
92	grid-template-columns: var(--iconSize) 1fr;
93	}
94
95	.md-list .md-two-line.avatar,
96	.md-list .md-three-line.avatar {
97	grid-template-columns: var(--avatarSize) 1fr;
98	}
99
100	.md-list .md-two-line.image,
101	.md-list .md-three-line.image {
102	grid-template-columns: var(--imageSize) 1fr;
103	}
104
105	.md-list .md-two-line.video,
106	.md-list .md-three-line.video {
107	grid-template-columns: var(--videoWidth) 1fr;
108	}
109
110	.md-list .md-three-line {
111	align-content: flex-start;
112	min-height: 5.5rem;
113	padding: 0.75rem 1.5rem 0.75rem 1rem;
114	}
115
116	.md-list .md-three-line.video {
117	padding: 0.75rem 1.5rem 0.75rem 0;
118	}
119
120	.md-list .md-three-line.icon,
121	.md-list .md-three-line.avatar,
122	.md-list .md-three-line.image,
123	.md-list .md-three-line.video {
124	align-content: start;
125	grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr;
126	}
127
128	/* state layer */
129	.md-list .md-one-line:hover::after,
130	.md-list .md-two-line:hover::after,
131	.md-list .md-three-line:hover::after {
132	background-color: var(--md-sys-color-on-surface);
133	opacity: var(--md-sys-state-hover-state-layer-opacity);
134	}
135
136	/* state layer */
137	.md-list a.md-one-line:focus::after,
138	.md-list a.md-two-line:focus::after,
139	.md-list a.md-three-line:focus::after,
140	.md-list a.md-one-line:focus-visible::after,
141	.md-list a.md-two-line:focus-visible::after,
142	.md-list a.md-three-line:focus-visible::after {
143	background-color: var(--md-sys-color-on-surface);
144	opacity: var(--md-sys-state-focus-state-layer-opacity);
145	}
146
147	.md-list a:focus,
148	.md-list a:focus-visible {
149	outline: none;
150	}
151
152	.md-list a:active {
153	background-position: center;
154	background-image:
155	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
156	background-size: 100%;
157	animation-name: md-ripple;
158	animation-duration: var(--md-sys-motion-duration-500);
159	box-shadow: var(--md-box_shadow_level0) !important;
160	}
161
162	/* state layer */
163	.md-list a.md-one-line:active::after,
164	.md-list a.md-two-line:active::after,
165	.md-list a.md-three-line:active::after {
166	background-color: var(--md-sys-color-on-surface);
167	opacity: var(--md-sys-state-pressed-state-layer-opacity);
168	}
169
170	.md-list a.md-two-line,
171	.md-list a.md-three-line {
172	text-decoration: none;
173	}
174
175	.md-list a.md-two-line .headline,
176	.md-list a.md-three-line .headline {
177	text-decoration: underline;
178	}
179
180	.md-list .headline {
181	grid-area: headline;
182	display: block;
183	box-sizing: border-box;
184	color: var(--md-sys-color-on-surface);
185	font-family: var(--md-sys-typescale-body-large-font);
186	font-weight: var(--md-sys-typescale-body-large-weight);
187	font-size: var(--md-sys-typescale-body-large-size);
188	font-style: var(--md-sys-typescale-body-large-font-style);
189	letter-spacing: var(--md-sys-typescale-body-large-tracking);
190	line-height: var(--md-sys-typescale-body-large-line-height);
191	text-transform: var(--md-sys-typescale-body-large-text-transform);
192	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
193	max-height: var(--md-sys-typescale-body-large-line-height);
194	white-space: nowrap;
195	text-overflow: ellipsis;
196	overflow: hidden;
197	}
198
199	.md-list .md-two-line.icon .headline,
200	.md-list .md-two-line.avatar .headline,
201	.md-list .md-two-line.image .headline,
202	.md-list .md-two-line.video .headline,
203	.md-list .md-three-line.icon .headline,
204	.md-list .md-three-line.avatar .headline,
205	.md-list .md-three-line.image .headline,
206	.md-list .md-three-line.video .headline {
207	align-self: end;
208	}
209
210	.md-list .supporting {
211	grid-area: supporting;
212	display: -webkit-box;
213	-webkit-box-orient: vertical;
214	overflow: hidden;
215	box-sizing: border-box;
216	align-self: start;
217	font-family: var(--md-sys-typescale-body-medium-font);
218	font-weight: var(--md-sys-typescale-body-medium-weight);
219	font-size: var(--md-sys-typescale-body-medium-size);
220	font-style: var(--md-sys-typescale-body-medium-font-style);
221	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
222	line-height: var(--md-sys-typescale-body-medium-line-height);
223	text-transform: var(--md-sys-typescale-body-medium-text-transform);
224	text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
225	}
226
227	.md-list .md-two-line .supporting {
228	max-height: var(--md-sys-typescale-body-medium-line-height);
229	line-clamp: 1;
230	-webkit-line-clamp: 1;
231	}
232
233	.md-list .md-three-line .supporting {
234	max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height));
235	line-clamp: 2;
236	-webkit-line-clamp: 2;
237	}
238
239	.md-list .avatar img,
240	.md-list .avatar label,
241	.md-list .avatar .material-symbols-outlined:first-child {
242	flex-shrink: 0;
243	background-color: var(--md-sys-color-primary-container);
244	color: var(--md-sys-color-on-primary-container);
245	border-radius: 50%;
246	width: var(--avatarSize);
247	height: var(--avatarSize);
248	}
249
250	.md-list .avatar label {
251	display: inline-block;
252	font-family: var(--md-sys-typescale-title-medium-font);
253	font-weight: var(--md-sys-typescale-title-medium-weight);
254	font-size: var(--md-sys-typescale-title-medium-size);
255	font-style: var(--md-sys-typescale-title-medium-font-style);
256	letter-spacing: var(--md-sys-typescale-title-medium-tracking);
257	line-height: var(--md-sys-typescale-title-medium-line-height);
258	text-transform: var(--md-sys-typescale-title-medium-text-transform);
259	text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
260	overflow: hidden;
261	}
262
263	.md-list .avatar .material-symbols-outlined:first-child {
264	font-size: var(--avatarSize);
265	}
266
267	.md-list .avatar.md-two-line img,
268	.md-list .avatar.md-two-line label,
269	.md-list .avatar.md-two-line .material-symbols-outlined:first-child {
270	grid-area: img;
271	align-self: center;
272	}
273
274	.md-list .avatar.md-three-line img,
275	.md-list .avatar.md-three-line label,
276	.md-list .avatar.md-three-line .material-symbols-outlined:first-child {
277	grid-area: img;
278	align-self: start;
279	}
280
281	.md-list .icon img,
282	.md-list .icon .material-symbols-outlined:first-child {
283	flex-shrink: 0;
284	color: var(--md-sys-color-on-surface-variant);
285	width: var(--iconSize);
286	height: var(--iconSize);
287	}
288
289	.md-list .icon .material-symbols-outlined:first-child {
290	font-size: var(--iconSize);
291	}
292
293	.md-list .icon.md-two-line img,
294	.md-list .icon.md-two-line .material-symbols-outlined:first-child {
295	grid-area: img;
296	align-self: center;
297	}
298
299	.md-list .icon.md-three-line img,
300	.md-list .icon.md-three-line .material-symbols-outlined:first-child {
301	grid-area: img;
302	align-self: start;
303	}
304
305	.md-list .video img {
306	flex-shrink: 0;
307	color: var(--md-sys-color-on-surface-variant);
308	width: var(--videoWidth);
309	height: var(--videoHeight);
310	}
311
312	.md-list .video.md-two-line img {
313	grid-area: img;
314	align-self: center;
315	}
316
317	.md-list .video.md-three-line img {
318	grid-area: img;
319	align-self: start;
320	}
321
322	.md-list .image img,
323	.md-list .image .material-symbols-outlined:first-child {
324	flex-shrink: 0;
325	color: var(--md-sys-color-on-surface-variant);
326	width: var(--imageSize);
327	height: var(--imageSize);
328	}
329
330	.md-list .image .material-symbols-outlined:first-child {
331	font-size: var(--imageSize);
332	}
333
334	.md-list .image.md-two-line img,
335	.md-list .image.md-two-line .material-symbols-outlined:first-child {
336	grid-area: img;
337	align-self: center;
338	}
339
340	.md-list .image.md-three-line img,
341	.md-list .image.md-three-line .material-symbols-outlined:first-child {
342	grid-area: img;
343	align-self: start;
344	}

7. lib / css / md-menu.css


1	.md-menu {
2	display: none;
3	z-index: 2;
4	box-sizing: border-box;
5	cursor: default;
6	padding: 0.25rem 0;
7	border-radius:
8	var(--md-sys-shape-corner-extra-small-default-size);
9	background-color: var(--md-sys-color-surface-container-low);
10	box-shadow: var(--md-box_shadow_level2);
11	transform: translateY(-50%) scaleY(0);
12	transition-timing-function:
13	cubic-bezier(var(--md-sys-motion-easing-standard-x0),
14	var(--md-sys-motion-easing-standard-y0),
15	var(--md-sys-motion-easing-standard-x1),
16	var(--md-sys-motion-easing-standard-y1));
17	transition-property: display, transform;
18	transition-behavior: allow-discrete;
19	transition-duration: var(--md-sys-motion-duration-500);
20	}
21
22	.md-menu.open {
23	display: block;
24	transform: translateY(0) scaleY(1);
25	}
26
27	@starting-style {
28	.md-menu.open {
29	display: block;
30	transform: translateY(-50%) scaleY(0);
31	}
32	}
33
34	/* container */
35	.md-menu>*::after {
36	content: "";
37	position: absolute;
38	z-index: -2;
39	top: 0;
40	right: 0;
41	left: 0;
42	bottom: 0;
43	}
44
45	/* container */
46	.md-menu>.selected::after {
47	background-color: var(--md-sys-color-secondary-container);
48	}
49
50	/* label, shape */
51	.md-menu>* {
52	position: relative;
53	display: block;
54	box-sizing: border-box;
55	height: 3rem;
56	line-height: 3rem;
57	padding: 0 0.75rem;
58	color: var(--md-sys-color-on-surface);
59	font-family: var(--md-sys-typescale-label-large-font);
60	font-weight: var(--md-sys-typescale-label-large-weight);
61	font-size: var(--md-sys-typescale-label-large-size);
62	font-style: var(--md-sys-typescale-label-large-font-style);
63	letter-spacing: var(--md-sys-typescale-label-large-tracking);
64	text-transform: var(--md-sys-typescale-label-large-text-transform);
65	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
66	white-space: nowrap;
67	text-overflow: ellipsis;
68	overflow: hidden;
69	}
70
71	/* label, shape */
72	.md-menu>.selected {
73	color: var(--md-sys-color-on-secondary-container);
74	}
75
76	/* state layer */
77	.md-menu>*::before {
78	content: "";
79	position: absolute;
80	z-index: -1;
81	top: 0;
82	right: 0;
83	left: 0;
84	bottom: 0;
85	}
86
87	/* icon */
88	.md-menu>* span {
89	position: relative;
90	margin-right: 0.75rem;
91	vertical-align: middle;
92	color: var(--md-sys-color-on-surface-variant);
93	font-size: 1.5rem;
94	width: 1.5rem;
95	height: 1.5rem;
96	}
97
98	/* icon */
99	.md-menu>.selected span {
100	color: var(--md-sys-color-on-secondary-container);
101	}
102
103	/* state layer */
104	.md-menu>:hover::before {
105	background-color: var(--md-sys-color-on-surface);
106	opacity: var(--md-sys-state-hover-state-layer-opacity);
107	}
108
109	/* label, shape */
110	.md-menu>:hover {
111	color: var(--md-sys-color-on-surface);
112	}
113
114	/* icon */
115	.md-menu>:hover span {
116	color: var(--md-sys-color-on-surface-variant);
117	}
118
119	/* state layer */
120	.md-menu>:focus::before {
121	background-color: var(--md-sys-color-on-surface);
122	opacity: var(--md-sys-state-focus-state-layer-opacity);
123	}
124
125	/* label, shape */
126	.md-menu>:focus {
127	color: var(--md-sys-color-on-surface);
128	outline: none;
129	}
130
131	/* icon */
132	.md-menu>:focus span {
133	color: var(--md-sys-color-on-surface-variant);
134	}
135
136	/* label, shape */
137	.md-menu>:active {
138	background-position: center;
139	background-image:
140	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
141	background-size: 100%;
142	animation-name: md-ripple;
143	animation-duration: var(--md-sys-motion-duration-500);
144	color: var(--md-sys-color-on-surface);
145	}
146
147	/* state layer */
148	.md-menu>:active::before {
149	background-color: var(--md-sys-color-on-surface);
150	opacity: var(--md-sys-state-pressed-state-layer-opacity);
151	}
152
153
154	/* icon */
155	.md-menu>:active span {
156	color: var(--md-sys-color-on-surface-variant);
157	}
158
159	.md-menu input[type="radio"] {
160	appearance: none;
161	transform: scaleX(0);
162	}

8. lib / css / md-navigation-bar.css


1	.md-navigation-bar {
2	display: flex;
3	justify-content: center;
4	align-items: stretch;
5	position: fixed;
6	left: 0;
7	right: 0;
8	bottom: 0;
9	background-color: var(--md-sys-color-surface-container-low);
10	}
11
12	.md-navigation-bar a {
13	position: relative;
14	display: block;
15	flex: 0 1 auto;
16	color: var(--md-sys-color-on-surface-variant);
17	font-family: var(--md-sys-typescale-label-medium-font);
18	font-weight: var(--md-sys-typescale-label-medium-weight);
19	font-size: var(--md-sys-typescale-label-medium-size);
20	font-style: var(--md-sys-typescale-label-medium-font-style);
21	letter-spacing: var(--md-sys-typescale-label-medium-tracking);
22	line-height: var(--md-sys-typescale-label-medium-line-height);
23	text-transform: var(--md-sys-typescale-label-medium-text-transform);
24	text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
25	text-decoration: none;
26	padding-top: 0.75rem;
27	padding-bottom: 1rem;
28	padding-left: 0.25rem;
29	padding-right: 0.25rem;
30	text-align: center;
31	overflow: hidden;
32	box-sizing: border-box;
33	}
34
35	.md-navigation-bar a.active {
36	color: var(--md-sys-color-on-surface);
37	}
38
39	/* state layer */
40	.md-navigation-bar a::after {
41	content: "";
42	position: absolute;
43	z-index: -2;
44	top: 0;
45	right: 0;
46	left: 0;
47	bottom: 0;
48	background-color: transparent;
49	}
50
51	/* state layer */
52	.md-navigation-bar a:hover::after {
53	background-color: var(--md-sys-color-on-surface-variant);
54	opacity: var(--md-sys-state-hover-state-layer-opacity);
55	}
56
57	/* state layer */
58	.md-navigation-bar a.active:hover::after {
59	background-color: var(--md-sys-color-on-surface);
60	}
61
62	.md-navigation-bar a:focus {
63	outline: none;
64	}
65
66	/* state layer */
67	.md-navigation-bar a:focus::after {
68	background-color: var(--md-sys-color-on-surface-variant);
69	opacity: var(--md-sys-state-focus-state-layer-opacity);
70	}
71
72	/* state layer */
73	.md-navigation-bar a.active:focus::after {
74	background-color: var(--md-sys-color-on-surface);
75	}
76
77	.md-navigation-bar a:active {
78	background-position: center;
79	background-image:
80	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
81	background-size: 100%;
82	animation-name: md-ripple;
83	animation-duration: var(--md-sys-motion-duration-500);
84	}
85
86	/* state layer */
87	.md-navigation-bar a:active::after {
88	background-color: var(--md-sys-color-on-surface-variant);
89	opacity: var(--md-sys-state-pressed-state-layer-opacity);
90	}
91
92	/* state layer */
93	.md-navigation-bar a.active:active::after {
94	background-color: var(--md-sys-color-on-surface);
95	}
96
97	.md-navigation-bar span {
98	color: var(--md-sys-color-on-surface-variant);
99	position: relative;
100	display: block;
101	height: 2rem;
102	width: 4rem;
103	line-height: 2rem;
104	margin-bottom: 0.25rem;
105	box-sizing: border-box;
106	margin-left: auto;
107	margin-right: auto;
108	overflow: hidden;
109	}
110
111	.md-navigation-bar a.active span {
112	color: var(--md-sys-color-on-secondary-container);
113	}
114
115	.md-navigation-bar a.active {
116	font-variation-settings: 'FILL'1, 'wght'700, 'GRAD'0, 'opsz'48;
117	}
118
119	.md-navigation-bar span::before {
120	content: "";
121	background-color: var(--md-sys-color-secondary-container);
122	position: absolute;
123	z-index: -1;
124	top: 0;
125	left: 0;
126	height: 2rem;
127	width: 4rem;
128	border-radius: 1rem;
129	box-sizing: border-box;
130	transform: scaleX(0);
131	transition-property: transform;
132	transition-duration: var(--md-sys-motion-duration-500);
133	}
134
135	.md-navigation-bar a.active span::before,
136	.md-navigation-bar a:active span::before {
137	transform: scaleX(1);
138	}

9. lib / css / md-outline-button.css


1	.md-outline-button {
2	position: relative;
3	box-sizing: border-box;
4	border-radius: 1.25rem;
5	height: 2.5rem;
6	padding: 0 1.5rem;
7	border: 0.0625rem solid var(--md-sys-color-outline);
8	background-color: transparent;
9	box-shadow: var(--md-box_shadow_level0);
10	font-family: var(--md-sys-typescale-label-large-font);
11	font-weight: var(--md-sys-typescale-label-large-weight);
12	font-size: var(--md-sys-typescale-label-large-size);
13	font-style: var(--md-sys-typescale-label-large-font-style);
14	letter-spacing: var(--md-sys-typescale-label-large-tracking);
15	text-transform: var(--md-sys-typescale-label-large-text-transform);
16	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
17	color: var(--md-sys-color-primary);
18	white-space: nowrap;
19	text-overflow: ellipsis;
20	overflow: hidden;
21	}
22
23	/* state layer */
24	.md-outline-button::after {
25	content: "";
26	position: absolute;
27	z-index: -1;
28	top: 0;
29	right: 0;
30	left: 0;
31	bottom: 0;
32	background-color: transparent;
33	}
34
35	.md-outline-button:hover {
36	color: var(--md-sys-color-primary);
37	border-color: var(--md-sys-color-outline);
38	}
39
40	/* state layer */
41	.md-outline-button:hover::after {
42	background-color: var(--md-sys-color-primary);
43	opacity: var(--md-sys-state-hover-state-layer-opacity);
44	}
45
46	.md-outline-button:focus {
47	outline: none;
48	color: var(--md-sys-color-primary);
49	border-color: var(--md-sys-color-outline);
50	}
51
52	/* state layer */
53	.md-outline-button:focus::after {
54	background-color: var(--md-sys-color-primary);
55	opacity: var(--md-sys-state-focus-state-layer-opacity);
56	}
57
58	.md-outline-button:active {
59	color: var(--md-sys-color-primary);
60	border-color: var(--md-sys-color-outline);
61	background-position: center;
62	background-image:
63	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
64	background-size: 100%;
65	animation-name: md-ripple;
66	animation-duration: var(--md-sys-motion-duration-500);
67	box-shadow: var(--md-box_shadow_level0) !important;
68	}
69
70	/* state layer */
71	.md-outline-button:active::after {
72	background-color: var(--md-sys-color-primary);
73	opacity: var(--md-sys-state-pressed-state-layer-opacity);
74	}
75
76	.md-outline-button:disabled {
77	background-color: transparent !important;
78	border-color: var(--md-sys-color-on-surface) !important;
79	color: var(--md-sys-color-on-surface) !important;
80	opacity: 0.38 !important;
81	}
82
83	/* container */
84	.md-outline-button:disabled::after {
85	background-color: transparent !important;
86	opacity: 1 !important;
87	}

10. lib / css / md-ripple.css


1	@keyframes md-ripple {
2
3	from {
4	background-size: 100%;
5	}
6
7	to {
8	background-size: 15000%;
9	}
10
11	}

11. lib / css / md-segmented-button.css


1	.md-segmented-button {
2	display: flex;
3	align-items: stretch;
4	box-sizing: border-box;
5	border: 0.0625rem solid var(--md-sys-color-outline);
6	height: 2.5rem;
7	border-radius: 1.25rem;
8	overflow: hidden;
9	}
10
11	.md-segmented-button[hidden] {
12	display: none;
13	}
14
15	.md-segmented-button input {
16	-webkit-appearance: none;
17	appearance: none;
18	flex: 0 1 0.0625rem;
19	width: 0.0625rem;
20	height: 2.375rem;
21	margin: 0;
22	padding: 0;
23	background-color: var(--md-sys-color-outline);
24	}
25
26	.md-segmented-button input:first-of-type {
27	transform: scaleX(0);
28	}
29
30	.md-segmented-button input:focus {
31	outline: none;
32	}
33
34	.md-segmented-button :checked+label {
35	color: var(--md-sys-color-on-secondary-container);
36	}
37
38	.md-segmented-button label {
39	position: relative;
40	flex: 1 1 1.5rem;
41	display: block;
42	box-sizing: border-box;
43	height: 2.375rem;
44	line-height: 2.375rem;
45	text-align: center;
46	color: var(--md-sys-color-on-surface);
47	font-family: var(--md-sys-typescale-label-large-font);
48	font-weight: var(--md-sys-typescale-label-large-weight);
49	font-size: var(--md-sys-typescale-label-large-size);
50	font-style: var(--md-sys-typescale-label-large-font-style);
51	letter-spacing: var(--md-sys-typescale-label-large-tracking);
52	text-transform: var(--md-sys-typescale-label-large-text-transform);
53	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
54	padding: 0 0.75rem;
55	overflow: hidden;
56	white-space: nowrap;
57	text-overflow: ellipsis;
58	overflow: hidden;
59	}
60
61	.md-segmented-button label::before {
62	/* container */
63	content: "";
64	position: absolute;
65	z-index: -2;
66	top: 0;
67	right: 0;
68	left: 0;
69	bottom: 0;
70	}
71
72	.md-segmented-button label::after {
73	/* state layer */
74	content: "";
75	position: absolute;
76	z-index: -1;
77	top: 0;
78	right: 0;
79	left: 0;
80	bottom: 0;
81	background-color: transparent;
82	}
83
84	.md-segmented-button :checked+label::before {
85	/* container */
86	background-color: var(--md-sys-color-secondary-container);
87	}
88
89	.md-segmented-button label span {
90	vertical-align: middle;
91	color: var(--md-sys-color-on-surface);
92	font-size: 1.125rem;
93	width: 1.125rem;
94	height: 1.125rem;
95	margin-right: 0.5rem;
96	}
97
98
99	.md-segmented-button label span:first-child {
100	display: none;
101	}
102
103	.md-segmented-button :checked+label span:first-child {
104	display: inline-block;
105	color: var(--md-sys-color-on-secondary-container);
106	}
107
108	/* state layer */
109	.md-segmented-button label:hover::after {
110	background-color: var(--md-sys-color-on-surface);
111	opacity: var(--md-sys-state-hover-state-layer-opacity);
112	}
113
114	/* state layer */
115	.md-segmented-button :checked+label:hover::after {
116	background-color: var(--md-sys-color-on-secondary-container);
117	}
118
119	/* state layer */
120	.md-segmented-button :focus+label::after {
121	background-color: var(--md-sys-color-on-surface);
122	opacity: var(--md-sys-state-focus-state-layer-opacity);
123	}
124
125	/* state layer */
126	.md-segmented-button :focus:checked+label::after {
127	background-color: var(--md-sys-color-on-secondary-container);
128	}
129
130	.md-segmented-button label:active,
131	.md-segmented-button :active+label {
132	background-position: center;
133	background-image:
134	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
135	background-size: 100%;
136	animation-name: md-ripple;
137	animation-duration: var(--md-sys-motion-duration-500);
138	}
139
140	/* state layer */
141	.md-segmented-button :active+label::after {
142	background-color: var(--md-sys-color-on-surface);
143	opacity: var(--md-sys-state-pressed-state-layer-opacity);
144	}
145
146	/* state layer */
147	.md-segmented-button :active:checked+label::after {
148	background-color: var(--md-sys-color-on-secondary-container);
149	}

12. lib / css / md-slider-field.css


1	md-slider-field input::-webkit-slider-runnable-track {
2	height: 0.25rem;
3	border-radius: 0.125rem;
4	}
5
6	md-slider-field input::-webkit-slider-thumb {
7	-webkit-appearance: none;
8	background-color: var(--md-sys-color-primary);
9	width: 1.25rem;
10	height: 1.25rem;
11	border-radius: 0.625rem;
12	margin-top: -0.5625rem;
13	}
14
15	md-slider-field input:hover::-webkit-slider-thumb {
16	box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-hover-transparency-percentage));
17	}
18
19	md-slider-field input:focus::-webkit-slider-thumb {
20	box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-focus-transparency-percentage));
21	}
22
23	md-slider-field input:active::-webkit-slider-thumb {
24	box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important;
25	background-position: center;
26	background-image:
27	radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%);
28	background-size: 100%;
29	animation-name: md-ripple;
30	animation-duration: var(--md-sys-motion-duration-500);
31	}
32
33	md-slider-field.material::-moz-range-track {
34	height: 0.25rem;
35	border-radius: 0.125rem;
36	}
37
38	md-slider-field input::-moz-range-thumb {
39	-webkit-appearance: none;
40	appearance: none;
41	background-color: var(--md-sys-color-primary);
42	width: 1.25rem;
43	height: 1.25rem;
44	border: none;
45	border-radius: 0.625rem;
46	}
47
48	md-slider-field input:hover::-moz-range-thumb {
49	box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-hover-transparency-percentage));
50	}
51
52	md-slider-field input:focus::-moz-range-thumb {
53	box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-focus-transparency-percentage));
54	}
55
56	md-slider-field input:active::-moz-range-thumb {
57	box-shadow: 0 0 0 0.625rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important;
58	background-position: center;
59	background-image:
60	radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%);
61	background-size: 100%;
62	animation-name: md-ripple;
63	animation-duration: var(--md-sys-motion-duration-500);
64	}

13. lib / css / md-standard-icon-button.css


1	.md-standard-icon-button {
2	position: relative;
3	display: inline-block;
4	border: none;
5	padding: 0.25rem;
6	background-color: transparent;
7	text-decoration: none;
8	border-radius: 50%;
9	overflow: hidden;
10	}
11
12	.md-standard-icon-button[hidden] {
13	display: none;
14	}
15
16	/* state layer */
17	.md-standard-icon-button::after {
18	content: "";
19	position: absolute;
20	top: 0.25rem;
21	right: 0.25rem;
22	left: 0.25rem;
23	bottom: 0.25rem;
24	border-radius: 50%;
25	}
26
27	.md-standard-icon-button span {
28	position: relative;
29	padding: 0.5rem;
30	color: var(--md-sys-color-on-surface-variant);
31	font-size: 1.5rem;
32	width: 1.5rem;
33	height: 1.5rem;
34	}
35
36	.md-standard-icon-button.avatar span {
37	padding: 0.3125rem;
38	font-size: 1.875rem;
39	width: 1.875rem;
40	height: 1.875rem;
41	}
42
43	.md-standard-icon-button:hover::after {
44	background-color: var(--md-sys-color-on-surface-variant);
45	opacity: var(--md-sys-state-hover-state-layer-opacity);
46	}
47
48	.md-standard-icon-button:hover span {
49	color: var(--md-sys-color-on-surface-variant);
50	}
51
52	.md-standard-icon-button:focus {
53	outline: none;
54	}
55
56	.md-standard-icon-button:focus::after {
57	background-color: var(--md-sys-color-on-surface-variant);
58	opacity: var(--md-sys-state-focus-state-layer-opacity);
59	}
60
61	.md-standard-icon-button:focus span {
62	color: var(--md-sys-color-on-surface-variant);
63	}
64
65	.md-standard-icon-button:active {
66	background-position: center;
67	background-image:
68	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
69	background-size: 100%;
70	animation-name: md-ripple;
71	animation-duration: var(--md-sys-motion-duration-500);
72	}
73
74	.md-standard-icon-button:active::after {
75	background-color: var(--md-sys-color-on-surface-variant);
76	opacity: var(--md-sys-state-pressed-state-layer-opacity);
77	}
78
79	.md-standard-icon-button:active span {
80	-color: var(--md-sys-color-on-surface-variant);
81	}
82
83	.md-standard-icon-button:disabled::after {
84	background-color: transparent !important;
85	opacity: 1;
86	}
87
88	.md-standard-icon-button:disabled span {
89	color: var(--md-sys-color-on-surface) !important;
90	opacity: 0.38;
91	}
92
93	.md-standard-icon-button:disabled:active {
94	background-image: none;
95	animation-name: none;
96	animation-duration: unset;
97	}

14. lib / css / md-switch.css


1	.md-switch {
2	-webkit-appearance: none;
3	appearance: none;
4	position: relative;
5	display: inline-block;
6	vertical-align: middle;
7	box-sizing: content-box;
8	padding: 0;
9	padding-block: 0;
10	padding-inline: 0;
11	}
12
13	.md-switch:focus {
14	outline: none;
15	}
16
17	/* Track */
18	body.material .md-switch {
19	width: 3rem;
20	height: 1.75rem;
21	border-radius: 1rem;
22	border: 0.125rem solid var(--md-sys-color-outline);
23	background-color: var(--md-sys-color-surface-container-highest);
24	}
25
26	body.material .md-switch:checked {
27	background-color: var(--md-sys-color-primary);
28	}
29
30	/* State */
31	body.material .md-switch::before {
32	content: "";
33	display: none;
34	position: absolute;
35	height: 2.5rem;
36	width: 2.5rem;
37	border-radius: 1.25rem;
38	top: -0.375rem;
39	left: -0.375rem;
40	}
41
42	body.material .md-switch:checked:before {
43	left: auto;
44	right: -0.375rem;
45	}
46
47	/* Handle */
48	body.material .md-switch::after {
49	content: "";
50	display: inline-block;
51	position: absolute;
52	transition-property: all;
53	transition-duration: var(--md-sys-motion-duration-700);
54	height: 1rem;
55	width: 1rem;
56	border-radius: 0.5rem;
57	top: 0.375rem;
58	left: 0.375rem;
59	background-color: var(--md-sys-color-outline);
60	box-shadow: var(--md-box_shadow_level1);
61	}
62
63	body.material .md-switch:checked:after {
64	height: 1.5rem;
65	width: 1.5rem;
66	border-radius: 0.75rem;
67	top: 0.125rem;
68	left: auto;
69	right: 0.125rem;
70	background-color: var(--md-sys-color-on-primary);
71	}
72
73	body.material .md-switch:hover::before {
74	display: inline-block;
75	background-color: var(--md-sys-color-on-surface);
76	opacity: var(--md-sys-state-hover-state-layer-opacity);
77	}
78
79	body.material .md-switch:checked:hover::before {
80	background-color: var(--md-sys-color-primary);
81	}
82
83	body.material .md-switch:hover::after {
84	background-color: var(--md-sys-color-on-surface-variant);
85	}
86
87	body.material .md-switch:checked:hover::after {
88	background-color: var(--md-sys-color-primary-container);
89	}
90
91	body.material .md-switch:focus::before {
92	display: inline-block;
93	background-color: var(--md-sys-color-on-surface);
94	opacity: var(--md-sys-state-focus-state-layer-opacity);
95	}
96
97	body.material .md-switch:checked:focus::before {
98	background-color: var(--md-sys-color-primary);
99	}
100
101	body.material .md-switch:focus::after {
102	background-color: var(--md-sys-color-on-surface-variant);
103	}
104
105	body.material .md-switch:checked:focus::after {
106	background-color: var(--md-sys-color-primary-container);
107	}
108
109	body.material .md-switch:active::before {
110	display: inline-block;
111	background-color: var(--md-sys-color-on-surface);
112	opacity: var(--md-sys-state-focus-state-layer-opacity);
113	}
114
115
116	body.material .md-switch:checked:active::before {
117	background-color: var(--md-sys-color-primary);
118	}
119
120	body.material .md-switch:active::after {
121	width: 1.75rem;
122	height: 1.75rem;
123	top: 0;
124	left: 0;
125	border-radius: 0.875rem;
126	background-position: center;
127	animation-name: md-ripple;
128	animation-duration: var(--md-sys-motion-duration-500);
129	background-size: 100%;
130	background-color: var(--md-sys-color-on-surface-variant);
131	background-image:
132	radial-gradient(circle, var(--md-sys-color-primary-container) 1%, transparent 1%);
133	box-shadow: var(--md-box_shadow_level1), 0 0 0 0.375rem color-mix(in srgb, var(--md-sys-color-on-surface), transparent var(--state-pressed-transparency-percentage)) !important;
134	}
135
136	body.material .md-switch:checked:active::after {
137	left: auto;
138	right: 0;
139	background-color: var(--md-sys-color-primary-container);
140	background-image:
141	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
142	box-shadow: var(--md-box_shadow_level1), 0 0 0 0.375rem color-mix(in srgb, var(--md-sys-color-primary), transparent var(--state-pressed-transparency-percentage)) !important;
143	}
144
145	body.apple .md-switch {
146	width: 3rem;
147	border-radius: 0.875rem;
148	height: 1.75rem;
149	background-color: var(--colIntIosOffBk);
150	}
151
152	body.apple .md-switch:checked {
153	background-color: var(--colIntIosOnBk);
154	}
155
156	body.apple .md-switch:focus {
157	background-color: var(--colIntIosOffBkFc);
158	}
159
160	body.apple .md-switch:checked:focus {
161	background-color: var(--colIntIosOnBkFc);
162	}
163
164	body.apple .md-switch::after {
165	content: "";
166	display: inline-block;
167	position: absolute;
168	width: 1.5rem;
169	height: 1.5rem;
170	border-radius: 0.75rem;
171	top: 0.125rem;
172	left: 0.125rem;
173	background-color: var(--colIntIos);
174	}
175
176	body.apple .md-switch:checked::after {
177	left: auto;
178	right: 0.125rem;
179	border-color: var(--colIntIosOnBk);
180	}
181
182	body.apple .md-switch:focus::after {
183	border-color: var(--colIntIosOffBkFc);
184	}
185
186	body.apple .md-switch:checked:focus::after {
187	border-color: var(--colIntIosOnBkFc);
188	}

15. lib / css / md-tab.css


1	.md-tab {
2	display: flex;
3	background-color: transparent;
4	align-items: stretch;
5	flex-wrap: nowrap;
6	overflow-x: auto;
7	position: sticky;
8	z-index: 1;
9	}
10
11	.md-tab.fixed {
12	justify-content: center;
13	}
14
15	.md-tab.scrollable {
16	padding-left: 2rem;
17	gap: 1rem;
18	}
19
20	.md-tab.scroll {
21	background-color: var(--md-sys-color-surface-container-low);
22	}
23
24	.md-tab a {
25	position: relative;
26	display: flex;
27	flex-direction: column;
28	justify-content: start;
29	align-items: center;
30	color: var(--md-sys-color-on-surface-variant);
31	font-family: var(--md-sys-typescale-title-small-font);
32	font-weight: var(--md-sys-typescale-title-small-weight);
33	font-size: var(--md-sys-typescale-title-small-size);
34	font-style: var(--md-sys-typescale-title-small-font-style);
35	letter-spacing: var(--md-sys-typescale-title-small-tracking);
36	line-height: var(--md-sys-typescale-title-small-line-height);
37	text-transform: var(--md-sys-typescale-title-small-text-transform);
38	text-decoration: var(--md-sys-typescale-title-small-text-decoration);
39	text-align: center;
40	box-sizing: border-box;
41	border-bottom: 0.1875rem solid var(--md-sys-color-surface);
42	}
43
44	.md-tab.fixed a {
45	flex: 0 0 var(--tabWidth);
46	}
47
48	.md-tab.scrollable a {
49	flex: 0 0 auto;
50	}
51
52	.md-tab a.active {
53	border-bottom-color: var(--md-sys-color-primary);
54	}
55
56	/* state layer */
57	.md-tab a::after {
58	content: "";
59	position: absolute;
60	z-index: -1;
61	top: 0;
62	right: 0;
63	left: 0;
64	bottom: 0;
65	background-color: transparent;
66	}
67
68	.md-tab span {
69	font-size: var(--iconSize);
70	height: var(--iconSize);
71	width: var(--iconSize);
72	color: var(--md-sys-color-on-surface-variant);
73	}
74
75	.md-tab .active span {
76	color: var(--md-sys-color-primary);
77	}
78
79	.md-tab a:hover {
80	color: var(--md-sys-color-on-surface);
81	}
82
83	/* state layer */
84	.md-tab a:hover::after {
85	background-color: var(--md-sys-color-on-surface);
86	opacity: var(--md-sys-state-hover-state-layer-opacity);
87	}
88
89	.md-tab a.active:hover {
90	color: var(--md-sys-color-primary);
91	}
92
93	/* state layer */
94	.md-tab a.active:hover::after {
95	background-color: var(--md-sys-color-primary);
96	opacity: var(--md-sys-state-hover-state-layer-opacity);
97	}
98
99	.md-tab a:hover span {
100	color: var(--md-sys-color-on-surface);
101	}
102
103	.md-tab a.active:hover span {
104	color: var(--md-sys-color-primary);
105	}
106
107	.md-tab a:focus {
108	outline: none;
109	}
110
111	/* state layer */
112	.md-tab a:focus::after {
113	background-color: var(--md-sys-color-on-surface);
114	opacity: var(--md-sys-state-focus-state-layer-opacity);
115	}
116
117	/* state layer */
118	.md-tab a.active:focus::after {
119	background-color: var(--md-sys-color-primary);
120	opacity: var(--md-sys-state-hover-state-layer-opacity);
121	}
122
123	.md-tab a:active {
124	background-position: center;
125	background-image:
126	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
127	background-size: 100%;
128	animation-name: md-ripple;
129	animation-duration: var(--md-sys-motion-duration-500);
130	}
131
132	/* state layer */
133	.md-tab a:active::after {
134	background-color: var(--md-sys-color-on-surface);
135	opacity: var(--md-sys-state-pressed-state-layer-opacity);
136	}
137
138	/* state layer */
139	.md-tab a.active:active::after {
140	background-color: var(--md-sys-color-primary);
141	opacity: var(--md-sys-state-pressed-state-layer-opacity);
142	}

16. lib / css / md-top-app-bar.css


1	.md-headline {
2	box-sizing: border-box;
3	margin: 0;
4	color: var(--md-sys-color-on-surface);
5	background-color: var(--md-sys-color-surface);
6	transition-property: color;
7	transition-duration: var(--md-sys-motion-duration-1000);
8	transition-timing-function: ease-in;
9	}
10
11	.md-headline.scroll-adicional {
12	color: var(--md-sys-color-surface-container-low);
13	background-color: var(--md-sys-color-surface-container-low);
14	}
15
16	.md-headline.scroll {
17	color: var(--md-sys-color-surface);
18	}
19
20	.md-headline.headline-small {
21	padding: 0 1rem 1.5rem 1rem;
22	}
23
24	.md-headline.headline-medium {
25	padding: 0 1rem 1.75rem 1rem;
26	}
27
28	md-top-app-bar[headline] h1 {
29	opacity: 0;
30	transition-property: opacity;
31	transition-duration: var(--md-sys-motion-duration-1000);
32	}
33
34	md-top-app-bar[headline].scroll h1 {
35	opacity: 1;
36	transition-timing-function: ease-in;
37	}

17. lib / css / roboto.css


1	/* roboto-regular - latin */
2	@font-face {
3	/* Revisa
4	* https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
5	* para otras opciones. */
6	font-display: swap;
7	font-family: 'Roboto';
8	font-style: normal;
9	font-weight: 400;
10	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
11	src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2');
12	}

B. Carpeta « lib / fonts »

Versión para imprimir.

1. lib / fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints

Descarga el archivo.

2. lib / fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf

Descarga el archivo.

3. lib / fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2

Descarga el archivo.

4. lib / fonts / roboto-v32-latin-regular.woff2

Descarga el archivo.

C. Carpeta « lib / js »

Versión para imprimir.

1. lib / js / abreElementoHtml.js


1	/**
2	* @param { HTMLElement } elementoHtml
3	*/
4	export function abreElementoHtml(elementoHtml) {
5	elementoHtml.classList.add("open")
6	}

2. lib / js / cierraElementoHtmo.js


1	/**
2	* @param { HTMLElement } elementoHtml
3	*/
4	export function cierraElementoHtmo(elementoHtml) {
5	elementoHtml.classList.remove("open")
6	}
7

3. lib / js / exportaAHtml.js


1	/**
2	* Permite que los eventos de html usen la función.
3	* @param {function} functionInstance
4	*/
5	export function exportaAHtml(functionInstance) {
6	window[nombreDeFuncionParaHtml(functionInstance)] = functionInstance
7	}
8
9	/**
10	* @param {function} valor
11	*/
12	export function nombreDeFuncionParaHtml(valor) {
13	const names = valor.name.split(/\s+/g)
14	return names[names.length - 1]
15	}

4. lib / js / getAttribute.js


1	/**
2	* @param {HTMLElement} elementoHtml
3	* @param {string} nombre
4	* @returns {string}
5	*/
6	export function getAttribute(elementoHtml, nombre) {
7	const valor = elementoHtml.getAttribute(nombre)
8	return valor === null ? "" : valor
9	}

5. lib / js / htmlentities.js


1	/**
2	* Codifica un texto para que cambie los caracteres
3	* especiales y no se pueda interpretar como
4	* etiiqueta HTML. Esta técnica evita la inyección
5	* de código.
6	* @param { string } texto
7	* @returns { string } un texto que no puede
8	* interpretarse como HTML. */
9	export function htmlentities(texto) {
10	return texto.replace(/[<>"']/g, textoDetectado => {
11	switch (textoDetectado) {
12	case "<": return "<"
13	case ">": return ">"
14	case '"': return """
15	case "'": return "'"
16	default: return textoDetectado
17	}
18	})
19	}

6. lib / js / muestraError.js


1	import { exportaAHtml } from "./exportaAHtml.js"
2	import { ProblemDetails } from "./ProblemDetails.js"
3
4	/**
5	* Muestra un error en la consola y en un cuadro de
6	* alerta el mensaje de una excepción.
7	* @param { ProblemDetails \| Error \| null } error descripción del error.
8	*/
9	export function muestraError(error) {
10
11	if (error === null) {
12
13	console.error("Error")
14	alert("Error")
15
16	} else if (error instanceof ProblemDetails) {
17
18	let mensaje = error.title
19	if (error.detail) {
20	mensaje += `\n\n${error.detail}`
21	}
22	mensaje += `\n\nCódigo: ${error.status}`
23	if (error.type) {
24	mensaje += ` ${error.type}`
25	}
26
27	console.error(mensaje)
28	console.error(error)
29	console.error("Headers:")
30	error.headers.forEach((valor, llave) => console.error(llave, "=", valor))
31	alert(mensaje)
32
33	} else {
34
35	console.error(error)
36	alert(error.message)
37
38	}
39
40	}
41
42	exportaAHtml(muestraError)

7. lib / js / muestraTextoDeAyuda.js


1	import { exportaAHtml } from "./exportaAHtml.js"
2
3	/**
4	* Si un elemento HTML tiene un mensaje de validación, lo
5	* muestra en su elemento de ayuda; en caso contrario, muestra
6	* un mensaje de ayuda.
7	* @param { {
8	* validity: { valid: boolean };
9	* validationMessage: string
10	* } } elementoHtml elemento que contiene datos de validación.
11	* @param { HTMLElement } elementoDeAyuda elemento fonde
12	* se muestran los elementos de validación para elementoHtml.
13	* @param { string } mensajeDeAyuda mensaje de ayuda cuando el
14	* estado de elementoHtml es válido.
15	*/
16	export function muestraTextoDeAyuda(elementoHtml, elementoDeAyuda,
17	mensajeDeAyuda) {
18	if (elementoHtml.validity.valid) {
19	elementoDeAyuda.textContent = mensajeDeAyuda
20	} else {
21	elementoDeAyuda.textContent = elementoHtml.validationMessage
22	}
23	}
24
25	exportaAHtml(muestraTextoDeAyuda)

8. lib / js / ProblemDetails.js


1	/**
2	* Detalle de los errores devueltos por un servicio.
3	*/
4	export class ProblemDetails extends Error {
5
6	/**
7	* @param {number} status
8	* @param {Headers} headers
9	* @param {string} title
10	* @param {string} [type]
11	* @param {string} [detail]
12	*/
13	constructor(status, headers, title, type, detail) {
14	super(title)
15	/**
16	* @readonly
17	*/
18	this.status = status
19	/**
20	* @readonly
21	*/
22	this.headers = headers
23	/**
24	* @readonly
25	*/
26	this.type = type
27	/**
28	* @readonly
29	*/
30	this.detail = detail
31	/**
32	* @readonly
33	*/
34	this.title = title
35	}
36
37	}

9. lib / js / querySelector.js


1	/**
2	* @template { HTMLElement } T
3	* @param { Document \| Element \| ShadowRoot } raiz
4	* @param { string } query
5	* @returns { T }
6	*/
7	export function querySelector(raiz, query) {
8	/** @type { T \| null } */
9	const resutado = raiz.querySelector(query)
10	if (resutado === null)
11	throw new Error(`No se encuentra ${query}.`)
12	return resutado
13	}

10. lib / js / resaltaSiEstasEn.js


1	import { querySelector } from "./querySelector.js"
2
3	/**
4	* @param {string[]} paginas
5	*/
6	export function resaltaSiEstasEn(paginas) {
7
8	const pathname = location.pathname
9
10	for (const pagina of paginas) {
11
12	if (pathname === pagina) {
13	setTimeout(() => {
14	const tab = document.querySelector(".active")
15	if (tab !== null && tab.closest(".scrollable") !== null) {
16	tab.scrollIntoView({ inline: "center", block: "end" })
17	}
18	})
19	return `class="active"`
20	}
21
22	}
23
24	return ""
25
26	}

11. Carpeta « lib / js / const »

Versión para imprimir.

A. lib / js / const / ES_APPLE.js


1	export const ES_APPLE = /.(iPad\|iPhone\|iPod\|Mac)./.test(navigator.userAgent)

12. Carpeta « lib / js / custom »

Versión para imprimir.

A. lib / js / custom / md-menu-button.js


1	import { MdNavigationDrawer } from "./MdNavigationDrawer.js"
2
3	export class MdMenuButton extends HTMLButtonElement {
4
5	constructor() {
6	super()
7	this.abreDrawer = this.abreDrawer.bind(this)
8	}
9
10	connectedCallback() {
11	this.type = "button"
12	this.classList.add("md-standard-icon-button")
13	this.innerHTML = /* HTML */
14	`<span class="material-symbols-outlined">menu</span>`
15	this.addEventListener("click", this.abreDrawer)
16	}
17
18	disconnectedCallback() {
19	this.removeEventListener("click", this.abreDrawer)
20	}
21
22	abreDrawer() {
23	const drawer = document.querySelector(".drawer")
24	if (drawer instanceof MdNavigationDrawer) {
25	drawer.abre()
26	}
27	}
28	}
29
30	customElements.define("md-menu-button", MdMenuButton, { extends: "button" })

B. lib / js / custom / md-options-menu.js


1	import { abreElementoHtml } from "../abreElementoHtml.js"
2	import { cierraElementoHtmo } from "../cierraElementoHtmo.js"
3	import { querySelector } from "../querySelector.js"
4
5	export class MdOptionsMenu extends HTMLElement {
6
7	getContent() {
8	return /* HTML */`
9
10	<style>
11
12	:host {
13	position: absolute;
14	}
15
16	</style>
17
18	<slot></slot>`
19	}
20
21	constructor() {
22	super()
23	const shadow = this.attachShadow({ mode: "open" })
24	shadow.innerHTML = this.getContent()
25	this._configuraOpciones = this._configuraOpciones.bind(this)
26
27	/**
28	* @private
29	* @type { HTMLSlotElement }
30	*/
31	this._slot = querySelector(shadow, "slot")
32	/**
33	* @private
34	* @type { HTMLElement[] }
35	*/
36	this._opciones = []
37	this._slot.addEventListener("slotchange", this._configuraOpciones)
38	}
39
40	connectedCallback() {
41	this.classList.add("md-menu")
42	this.role = "listbox"
43	}
44
45	/**
46	* @returns {readonly Readonly<HTMLElement>[]}
47	*/
48	get opciones() {
49	return this._opciones
50	}
51
52	get seleccion() {
53	/** @type { HTMLInputElement \| null } */
54	const seleccionado = this.querySelector(".selected")
55	return seleccionado === null ? "" : seleccionado.value
56	}
57
58	_configuraOpciones() {
59	/**
60	* @type {HTMLElement[]}
61	*/
62	const opciones = []
63	for (const opcion of this._slot.assignedElements()) {
64	opcion.role = "option"
65	if (opcion instanceof HTMLElement) {
66	opciones.push(opcion)
67	}
68	}
69	this._opciones = opciones
70	}
71
72	abre() {
73	abreElementoHtml(this)
74	}
75
76
77	cierra() {
78	cierraElementoHtmo(this)
79	}
80
81	/**
82	* @param {string} value
83	*/
84	muestraValue(value) {
85	let texto = ""
86	for (const opcion of this._opciones) {
87	if (opcion.dataset.value === value) {
88	opcion.classList.add("selected")
89	let textContent = opcion.textContent
90	if (texto === "" && textContent !== null) {
91	textContent = textContent.trim()
92	if (textContent !== "") {
93	texto = textContent
94	}
95	}
96	} else {
97	opcion.classList.remove("selected")
98	}
99	}
100	return texto
101	}
102
103	}
104
105	customElements.define("md-options-menu", MdOptionsMenu)

C. lib / js / custom / md-overflow-button.js


1	import { ES_APPLE } from "../const/ES_APPLE.js"
2
3	export class MdOverflowButton extends HTMLButtonElement {
4
5	connectedCallback() {
6	this.type = "button"
7	this.classList.add("md-standard-icon-button")
8	this.innerHTML = ES_APPLE
9	? /* HTML */
10	`<span style="color: var(--md-sys-color-on-surface-variant)"
11	class="material-symbols-outlined">
12	more_horiz
13	</span>`
14	: /* HTML */
15	`<span style="color: var(--md-sys-color-on-surface-variant)"
16	class="material-symbols-outlined">
17	more_vert
18	</span>`
19	}
20
21	}
22
23	customElements
24	.define("md-overflow-button", MdOverflowButton, { extends: "button" })

D. lib / js / custom / md-overflow-menu.js


1	import { abreElementoHtml } from "../abreElementoHtml.js"
2	import { cierraElementoHtmo } from "../cierraElementoHtmo.js"
3
4	export class MdOverflowMenu extends HTMLElement {
5
6	getContent() {
7	return /* HTML */`
8
9	<style>
10
11	:host {
12	position: fixed;
13	min-width: 7rem;
14	max-width: 280px;
15	}
16
17	::slotted(*) {
18	text-align: start;
19	width: 100%;
20	border: none;
21	background-color: transparent;
22	}
23
24	</style>
25
26	<slot></slot>`
27	}
28
29	constructor() {
30	super()
31	const shadow = this.attachShadow({ mode: "open" })
32	shadow.innerHTML = this.getContent()
33	this.clicCierra = this.clicCierra.bind(this)
34	/**
35	* @private
36	* @type {HTMLButtonElement\| null}
37	*/
38	this._toggleButton = null
39	}
40
41	connectedCallback() {
42	this.classList.add("md-menu")
43	this.role = "menu"
44	}
45
46	/**
47	* @param {HTMLButtonElement} toggleButton
48	*/
49	alterna(toggleButton) {
50	this._toggleButton = toggleButton
51	const top = toggleButton.offsetTop + toggleButton.offsetHeight - 4
52	const right =
53	innerWidth - (toggleButton.offsetLeft + toggleButton.offsetWidth) - 3
54	this.style.top = `${top}px`
55	this.style.right = `${right}px`
56	const list = this.classList
57	if (list.contains("open")) {
58	this.cierra()
59	} else {
60	this.abre()
61	}
62	}
63
64	abre() {
65	document.addEventListener("click", this.clicCierra)
66	abreElementoHtml(this)
67	}
68
69	cierra() {
70	document.removeEventListener("click", this.clicCierra)
71	cierraElementoHtmo(this)
72	}
73
74	/**
75	* @param {Event} evt
76	*/
77	clicCierra(evt) {
78	const target = evt.target
79	if (this.classList.contains("open")
80	&& this._toggleButton !== null
81	&& target instanceof HTMLElement
82	&& !this._toggleButton.contains(target)) {
83	this.cierra()
84	}
85	}
86	}
87
88	customElements.define("md-overflow-menu", MdOverflowMenu)

E. lib / js / custom / md-select-menu.js


1	import { getAttribute } from "../getAttribute.js"
2	import { querySelector } from "../querySelector.js"
3	import { MdOptionsMenu } from "./md-options-menu.js"
4
5	export class MdSelectMenu extends HTMLElement {
6
7	static get observedAttributes() {
8	return ["options", "value", "required"]
9	}
10
11	getContent() {
12	return /* HTML */ `
13	<link rel="stylesheet" href="/lib/css/material-symbols-outlined.css">
14
15	<style>
16	:host {
17	display: block;
18	cursor: default;
19	}
20
21	output {
22	display: block;
23	padding-right: 2rem;
24	white-space: nowrap;
25	text-overflow: ellipsis;
26	overflow: hidden;
27	}
28
29	#up {
30	position: absolute;
31	bottom: 0.5rem;
32	right: 0.75rem;
33	display: none;
34	color: var(--md-sys-color-on-surface-variant);
35	}
36
37	#down {
38	position: absolute;
39	bottom: 0.5rem;
40	right: 0.75rem;
41	color: var(--md-sys-color-on-surface-variant);
42	}
43
44	:host(.open) #up {
45	display: inline-block;
46	}
47
48	:host(.open) #down {
49	display: none;
50	}
51
52	:host(:invalid) #up,
53	:host(:invalid) #down {
54	color: var(--md-sys-color-error);
55	}
56
57	</style>
58	<output></output>
59	<span id="down" class="material-symbols-outlined">
60	arrow_drop_down
61	</span>
62	<span id="up" class="material-symbols-outlined">
63	arrow_drop_up
64	</span>`
65	}
66
67	constructor() {
68	super()
69
70	const shadow = this.attachShadow({ mode: "open" })
71	shadow.innerHTML = this.getContent()
72
73	this._alterna = this._alterna.bind(this)
74	this._onKeyDown = this._onKeyDown.bind(this)
75	this._cierra = this._cierra.bind(this)
76	this._clicEnDialogo = this._clicEnDialogo.bind(this)
77	this.clicExterno = this.clicExterno.bind(this)
78	this.muestraValue = this.muestraValue.bind(this)
79
80	/**
81	* @private
82	* @type {string}
83	*/
84	this._customValidity = ""
85
86	/**
87	* @private
88	* @type { HTMLOutputElement }
89	*/
90	this.output = querySelector(shadow, "output")
91	/**
92	* @private
93	* @type { MdOptionsMenu \| null }
94	*/
95	this._optionsMenu = null
96	/**
97	* @protected
98	* @readonly
99	*/
100	this._internals = this.attachInternals()
101	this._internals.role = "select"
102	addEventListener("load", this.muestraValue)
103	}
104
105	connectedCallback() {
106	this.tabIndex = 0
107	this.role = "combobox"
108	this.ariaHasPopup = "listbox"
109	this.ariaExpanded = "false"
110	this["aria-controls"] = this.options
111	this.addEventListener("keydown", this._onKeyDown)
112	const parentElement = this.parentElement
113	if (parentElement !== null) {
114	parentElement.addEventListener("click", this._alterna)
115	}
116	}
117
118	/**
119	* @param {string} nombreDeAtributo
120	* @param {string} _valorAnterior
121	* @param {string} _nuevoValor
122	*/
123	attributeChangedCallback(nombreDeAtributo, _valorAnterior, _nuevoValor) {
124	switch (nombreDeAtributo) {
125	case "options":
126	this._cambiaOptions()
127	break
128	case "value":
129	this.muestraValue()
130	break
131	case "required":
132	this.checkValidity()
133	break
134	}
135	}
136
137	get options() {
138	return getAttribute(this, "options")
139	}
140
141	set options(options) {
142	this.setAttribute("options", options)
143	}
144
145	_cambiaOptions() {
146	if (this._optionsMenu !== null) {
147	this._optionsMenu = null
148	}
149	this["aria-controls"] = this.options
150	}
151
152	get required() {
153	return this.hasAttribute("required")
154	}
155
156	set required(required) {
157	this.toggleAttribute("required", Boolean(required))
158	}
159
160	get value() {
161	return getAttribute(this, "value")
162	}
163
164	set value(value) {
165	this.setAttribute("value", value)
166	}
167
168	get name() {
169	return getAttribute(this, "name")
170	}
171
172	set name(name) {
173	this.setAttribute("name", name)
174	}
175
176	muestraValue() {
177	const value = this.value
178	this._internals.setFormValue(value)
179
180	// En un futuro se usará esto en vez de la clase populated.
181	// if (value === "") {
182	// this._internals.states.delete("populated")
183	// } else {
184	// this._internals.states.add("populated")
185	// }
186
187	if (this.isConnected) {
188	if (value === "") {
189	this.classList.remove("populated")
190	} else {
191	this.classList.add("populated")
192	}
193	this._checkValidity()
194	const optionsMenu = this.optionsMenu
195	if (optionsMenu !== null) {
196	this.output.value = optionsMenu.muestraValue(value)
197	}
198	}
199	}
200
201	get form() {
202	return this._internals && this._internals.form
203	}
204
205	get willValidate() {
206	return this._internals ? this._internals.willValidate : true
207	}
208
209	/**
210	* @param {string} message
211	*/
212	setCustomValidity(message) {
213	this._customValidity = message
214	this._checkValidity()
215	}
216
217	/**
218	* @returns {ValidityState}
219	*/
220	get validity() {
221	return this._internals.validity
222	}
223
224	checkValidity() {
225	return this._internals.checkValidity()
226	}
227
228	reportValidity() {
229	return this._internals.reportValidity()
230	}
231
232	get validationMessage() {
233	return this._internals.validationMessage
234	}
235	/** @returns {boolean} */
236	_checkValidity() {
237	if (this._customValidity !== "") {
238	this._internals.setValidity({ customError: true }, this._customValidity)
239	return false
240	} else if (this.required && this.value === "") {
241	this._internals.setValidity({ valueMissing: true }, "Seleccione una opción.")
242	return false
243	} else {
244	this._internals.setValidity({})
245	return true
246	}
247	}
248
249	/** @private */
250	_alterna() {
251	if (this.classList.contains("open")) {
252	this._cierra()
253	} else {
254	this._abre()
255	}
256	}
257
258	/** @private */
259	_abre() {
260	this.classList.add("open")
261	const parentElement = this.parentElement
262	if (parentElement !== null) {
263	const optionsMenu = this.optionsMenu
264	if (optionsMenu !== null) {
265	optionsMenu.style.top = `${parentElement.offsetTop + 58}px`
266	optionsMenu.style.left = `${parentElement.offsetLeft}px`
267	optionsMenu.style.width = `${parentElement.offsetWidth}px`
268	optionsMenu.abre()
269	this.focus()
270	optionsMenu.addEventListener("click", this._clicEnDialogo)
271	}
272	this.ariaExpanded = "true"
273	document.addEventListener("click", this.clicExterno)
274	}
275	}
276
277	/** @private */
278	_cierra() {
279	this.classList.remove("open")
280	const optionsMenu = this.optionsMenu
281	if (optionsMenu !== null) {
282	optionsMenu.cierra()
283	optionsMenu.removeEventListener("click", this._clicEnDialogo)
284	}
285	this.ariaExpanded = "false"
286	document.removeEventListener("click", this.clicExterno)
287	this.dispatchEvent(new Event("input", { bubbles: true }))
288	}
289
290	get optionsMenu() {
291	if (this._optionsMenu === null) {
292	if (this.options !== "") {
293	const optionsMenu = document.getElementById(this.options)
294	if (optionsMenu instanceof MdOptionsMenu) {
295	this._optionsMenu = optionsMenu
296	} else {
297	throw new Error(`Valor incorrecto para options: "${this.options}".`)
298	}
299	}
300	}
301	return this._optionsMenu
302	}
303
304	/** @private */
305	_avanzaOpcion() {
306	const i = this._valueIndex
307	if (i > -1) {
308	const optionsMenu = this.optionsMenu
309	if (optionsMenu !== null) {
310	const opciones = optionsMenu.opciones
311	if (i < opciones.length - 1) {
312	this.value = getAttribute(opciones[i + 1], "data-value")
313	}
314	}
315	}
316	}
317
318	/** @private */
319	_retrocedeOpcion() {
320	const i = this._valueIndex
321	if (i > -1) {
322	const optionsMenu = this.optionsMenu
323	if (optionsMenu !== null) {
324	const opciones = optionsMenu.opciones
325	if (i > 0) {
326	this.value = getAttribute(opciones[i - 1], "data-value")
327	}
328	}
329	}
330	}
331
332	/**
333	* @private
334	* @returns {number}
335	*/
336	get _valueIndex() {
337	const value = this.value
338	const optionsMenu = this.optionsMenu
339	return (optionsMenu === null
340	? -1
341	: optionsMenu.opciones.findIndex(opcion => opcion.dataset.value === value))
342	}
343
344	/**
345	* @private
346	* @param {Event} event
347	*/
348	_clicEnDialogo(event) {
349	const target = event.target
350	const optionsMenu = this.optionsMenu
351	let value = ""
352	if (optionsMenu !== null) {
353	for (const opcion of optionsMenu.opciones) {
354	if (opcion === target) {
355	opcion.classList.add("selected")
356	value = getAttribute(opcion, "data-value")
357	} else {
358	opcion.classList.remove("selected")
359	}
360	}
361	}
362	this.value = value
363	this._cierra()
364	this.focus()
365	}
366
367	/**
368	* @param {Event} evt
369	*/
370	clicExterno(evt) {
371	const target = evt.target
372	const parentElement = this.parentElement
373	const optionsMenu = this._optionsMenu
374	if (this.classList.contains("open")
375	&& target instanceof HTMLElement
376	&& parentElement !== null
377	&& !parentElement.contains(target)
378	&& optionsMenu !== null
379	&& !optionsMenu.contains(target)) {
380	this._cierra()
381	}
382	}
383
384	/**
385	* @param { KeyboardEvent } event
386	*/
387	_onKeyDown(event) {
388	const key = event.key
389	const optionsMenu = this._optionsMenu
390	if (optionsMenu !== null) {
391	if (optionsMenu.classList.contains("open")) {
392	if (key === "ArrowDown") {
393	event.preventDefault()
394	this._avanzaOpcion()
395	} else if (key === "ArrowUp") {
396	event.preventDefault()
397	this._retrocedeOpcion()
398	} else if (key === "Escape") {
399	event.preventDefault()
400	this._cierra()
401	} else if (key === " ") {
402	event.preventDefault()
403	this._cierra()
404	} else if (key === "Tab") {
405	this._cierra()
406	} else {
407	event.preventDefault()
408	}
409	} else if (key === " ") {
410	event.preventDefault()
411	this._abre()
412	} else if (key === "Tab") {
413	this._cierra()
414	} else {
415	event.preventDefault()
416	}
417	}
418	}
419
420	}
421
422	MdSelectMenu.formAssociated = true
423
424	customElements.define("md-select-menu", MdSelectMenu)

F. lib / js / custom / md-slider-field.js


1	import { querySelector } from "../querySelector.js"
2
3	export class MdSliderField extends HTMLElement {
4
5	getContent() {
6	return /* HTML */`
7	<style>
8	:host {
9	display: block;
10	margin: 1rem;
11	}
12
13	:host([hidden]) {
14	display: none;
15	}
16
17	#label::slotted(*) {
18	display: block;
19	white-space: nowrap;
20	text-overflow: ellipsis;
21	overflow: hidden;
22	color: var(--md-sys-color-on-surface-variant);
23	font-family: var(--md-sys-typescale-body-small-font);
24	font-weight: var(--md-sys-typescale-body-small-weight);
25	font-size: var(--md-sys-typescale-body-small-size);
26	font-style: var(--md-sys-typescale-body-small-font-style);
27	letter-spacing: var(--md-sys-typescale-body-small-tracking);
28	line-height: var(--md-sys-typescale-body-small-line-height);
29	text-transform: var(--md-sys-typescale-body-small-text-transform);
30	text-decoration: var(--md-sys-typescale-body-small-text-decoration);
31	}
32
33	[name="slider"]::slotted(input) {
34	-webkit-appearance: none;
35	appearance: none;
36	height: 0.25rem;
37	border-radius: 0.125rem;
38	background-image:
39	linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) 50%, var(--md-sys-color-surface-container-highest) 50%, var(--md-sys-color-surface-container-highest) 100%);
40	}
41
42	[name="slider"]::slotted(input:focus) {
43	outline: none;
44	}
45
46	[name="supporting"]::slotted(*) {
47	display: block;
48	color: var(--md-sys-color-on-surface-variant);
49	font-family: var(--md-sys-typescale-body-small-font);
50	font-weight: var(--md-sys-typescale-body-small-weight);
51	font-size: var(--md-sys-typescale-body-small-size);
52	font-style: var(--md-sys-typescale-body-small-font-style);
53	letter-spacing: var(--md-sys-typescale-body-small-tracking);
54	line-height: var(--md-sys-typescale-body-small-line-height);
55	text-transform: var(--md-sys-typescale-body-small-text-transform);
56	text-decoration: var(--md-sys-typescale-body-small-text-decoration);
57	padding-top: 0.5rem;
58	white-space: nowrap;
59	text-overflow: ellipsis;
60	overflow: hidden;
61	}
62	</style>
63	<slot id="label"></slot>
64	<slot name="slider"></slot>
65	<slot name="supporting"></slot>`
66	}
67
68	constructor() {
69	super()
70	const shadow = this.attachShadow({ mode: "open", delegatesFocus: true })
71	shadow.innerHTML = this.getContent()
72	this._configuraSlider = this._configuraSlider.bind(this)
73	this.analiza = this.analiza.bind(this)
74
75	/**
76	* @private
77	* @type {HTMLSlotElement}
78	*/
79	this._slotSlider = querySelector(shadow, '[name="slider"]')
80	/**
81	* @private
82	* @type {HTMLInputElement\|null}
83	*/
84	this._input = null
85	this._slotSlider.addEventListener("slotchange", this._configuraSlider)
86	}
87
88	/** @private */
89	_configuraSlider() {
90	if (this._input !== null) {
91	this._input.removeEventListener("input", this.analiza)
92	this._input = null
93	}
94	for (const input of this._slotSlider.assignedElements()) {
95	if (input instanceof HTMLInputElement) {
96	this._input = input
97	input.addEventListener("input", this.analiza)
98	this.analiza()
99	}
100	}
101	}
102
103	analiza() {
104	const i = this._input
105	if (i !== null) {
106	const v = i.valueAsNumber
107	const min = parseFloat(i.min)
108	const max = parseFloat(i.max)
109	const value = (v - min) / (max - min) * 100
110	i.title = v.toString()
111	i.style.background =
112	`linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${value
113	}%, var(--md-sys-color-surface-container-highest) ${value
114	}%, var(--md-sys-color-surface-container-highest) 100%)`
115	}
116	}
117
118	}
119
120	customElements.define("md-slider-field", MdSliderField)

G. lib / js / custom / md-top-app-bar.js


1	import { ES_APPLE } from "../const/ES_APPLE.js"
2	import { getAttribute } from "../getAttribute.js"
3	import { querySelector } from "../querySelector.js"
4
5	class MdTopAppBar extends HTMLElement {
6
7	getContent() {
8	return /* HTML */`
9	<style>
10
11	:host {
12	display: flex;
13	box-sizing: border-box;
14	align-items: center;
15	padding: 0 0.25rem;
16	background-color: var(--md-sys-color-surface);
17	position: sticky;
18	z-index: 1;
19	left: env(titlebar-area-x, 0);
20	top: env(titlebar-area-y, 0);
21	height: env(titlebar-area-height, 4rem);
22	width: env(titlebar-area-width, 100%);
23	}
24
25	:host(.apple) {
26	height: env(titlebar-area-height, 3rem);
27	}
28
29	:host(.scroll) {
30	background-color: var(--md-sys-color-surface-container-low);
31	}
32
33	#navigation {
34	flex: 0 0 auto;
35	overflow: hidden
36	}
37
38	#navigation ::slotted(*) {
39	color: var(--md-sys-color-on-surface);
40	}
41
42	#acciones {
43	margin-left: auto;
44	flex: 0 0 auto;
45	overflow: hidden
46	}
47
48	:host(.centrado) #acciones,
49	:host(.center-aligned) #acciones {
50	flex: 0 0 3rem;
51	overflow: hidden
52	}
53
54	#headline::slotted(*) {
55	-webkit-app-region: drag;
56	flex: 1 1 auto;
57	white-space: nowrap;
58	text-overflow: ellipsis;
59	overflow: hidden;
60	font-family: var(--md-sys-typescale-title-large-font);
61	font-weight: var(--md-sys-typescale-title-large-weight);
62	font-size: var(--md-sys-typescale-title-large-size);
63	font-style: var(--md-sys-typescale-title-large-font-style);
64	letter-spacing: var(--md-sys-typescale-title-large-tracking);
65	line-height: var(--md-sys-typescale-title-large-line-height);
66	text-transform: var(--md-sys-typescale-title-large-text-transform);
67	text-decoration: var(--md-sys-typescale-title-large-text-decoration);
68	color: var(--md-sys-color-on-surface);
69	}
70
71	:host(.center-aligned) #headline::slotted(*) {
72	flex: 1 1 auto;
73	text-align: center
74	}
75
76	</style>
77
78	<span id="navigation">
79	<slot name="navigation"></slot>
80	</span>
81	<slot id="headline"></slot>
82	<span id="acciones">
83	<slot name="action"></slot>
84	</span>`
85	}
86
87	constructor() {
88	super()
89	if (ES_APPLE) {
90	document.body.classList.add("apple")
91	document.body.classList.remove("material")
92	} else {
93	document.body.classList.add("material")
94	document.body.classList.remove("apple")
95	}
96
97	/**
98	* @private
99	* @readonly
100	*/
101	const shadow = this.attachShadow({ mode: "open" })
102	shadow.innerHTML = this.getContent()
103	this._configuraAction = this._configuraAction.bind(this)
104	/**
105	* @private
106	* @type {number}
107	*/
108	this._posY = 0
109	/**
110	* @private
111	* @type {boolean}
112	*/
113	this._scrolling = false
114	/**
115	* @private
116	* @type { HTMLSlotElement }
117	*/
118	this._navigation = querySelector(shadow, '[name="navigation"]')
119	/**
120	* @private
121	* @type { HTMLSlotElement }
122	*/
123	this._action = querySelector(shadow, '[name="action"]')
124	/**
125	* @private
126	* @type { HTMLHeadingElement \| null }
127	*/
128	this._headline = null
129	/**
130	* @private
131	* @type { HTMLElement \| null }
132	*/
133	this._adicional = null
134	this._action.addEventListener("slotchange", this._configuraAction)
135	addEventListener("scroll", () => this._onScroll())
136	addEventListener("load", () => this.configurOtros())
137	}
138
139	connectedCallback() {
140	this.role = "toolbar"
141	this._configuraAction()
142	}
143
144	configurOtros() {
145	const idHeadline = getAttribute(this, "headline")
146	if (idHeadline !== "") {
147	const headline = document.getElementById(idHeadline)
148	if (headline instanceof HTMLHeadingElement) {
149	this._headline = headline
150	if (this.classList.contains("apple") \|\| this.classList.contains("medium")) {
151	headline.classList.add("md-headline", "headline-small")
152	} else {
153	headline.classList.add("md-headline", "headline-medium")
154	}
155	}
156	}
157	const idAdicional = getAttribute(this, "adicional")
158	if (idAdicional !== "") {
159	this._adicional = document.getElementById(idAdicional)
160	if (this._adicional !== null) {
161	if (this.classList.contains("apple")) {
162	this._adicional.style.top = "env(titlebar-area-height, 3rem)"
163	} else {
164	this._adicional.style.top = "env(titlebar-area-height, 4rem)"
165	}
166	}
167	}
168	}
169
170	_configuraAction() {
171	const assignedElements = this._action.assignedElements()
172	if (this.isConnected) {
173	if (ES_APPLE) {
174	this.classList.add("apple")
175	this.classList.remove("material")
176	} else {
177	this.classList.add("material")
178	this.classList.remove("apple")
179	}
180	if (this.classList.contains("center-aligned")) {
181	this.classList.remove("centrado")
182	this.classList.remove("justificado")
183	} else {
184	if (ES_APPLE && assignedElements.length <= 1) {
185	this.classList.add("centrado")
186	this.classList.remove("justificado")
187	} else {
188	this.classList.add("justificado")
189	this.classList.remove("centrado")
190	}
191	}
192	}
193	}
194
195	/** @private */
196	_onScroll() {
197	this._posY = scrollY
198	if (!this._scrolling) {
199	requestAnimationFrame(() => this._avanza())
200	}
201	this._scrolling = true
202	}
203
204	/** @private */
205	_avanza() {
206	if (this._posY === 0) {
207	this.classList.remove("scroll")
208	if (this._headline !== null) {
209	if (this._adicional === null) {
210	this._headline.classList.remove("scroll")
211	} else {
212	this._headline.classList.remove("scroll-adicional")
213	}
214	}
215	if (this._adicional !== null) {
216	this._adicional.classList.remove("scroll")
217	}
218	} else {
219	this.classList.add("scroll")
220	if (this._headline !== null) {
221	if (this._adicional === null) {
222	this._headline.classList.add("scroll")
223	} else {
224	this._headline.classList.add("scroll-adicional")
225	}
226	}
227	if (this._adicional !== null) {
228	this._adicional.classList.add("scroll")
229	}
230	}
231	this._scrolling = false
232	}
233
234	}
235
236	customElements.define("md-top-app-bar", MdTopAppBar)

H. lib / js / custom / MdNavigationDrawer.js


1	import { abreElementoHtml } from "../abreElementoHtml.js"
2	import { cierraElementoHtmo } from "../cierraElementoHtmo.js"
3	import { querySelector } from "../querySelector.js"
4
5	export class MdNavigationDrawer extends HTMLElement {
6
7	/**
8	* @returns {string}
9	*/
10	getHipervinculos() { throw new Error("abstract") }
11
12	getContent() {
13	return /* HTML */`
14
15	<link rel="stylesheet" href="/lib/css/material-symbols-outlined.css">
16	<link rel="stylesheet" href="/lib/css/md-ripple.css">
17	<link rel="stylesheet" href="/material-tokens/css/shape.css">
18	<link rel="stylesheet" href="/material-tokens/css/motion.css">
19
20	<style>
21
22	:host {
23	display: block;
24	}
25
26	:host([hidden]) {
27	display: none;
28	}
29
30	nav {
31	display: none;
32	flex-direction: column;
33	position: fixed;
34	z-index: 4;
35	box-sizing: border-box;
36	top: 0;
37	left: 0;
38	bottom: 0;
39	width: var(--anchoNav);
40	max-width: 80vw;
41	overflow: hidden;
42	overscroll-behavior: contain;
43	background-color: var(--md-sys-color-surface-container-low);
44	transform: translateX(-100%);
45	transition-property: display, transform;
46	transition-behavior: allow-discrete;
47	}
48
49	nav.open {
50	display: flex;
51	transform: translateX(0);
52	}
53
54	nav>div {
55	flex-grow: 1;
56	overflow: auto;
57	padding: 0.75rem 1rem;
58	}
59
60	h1 {
61	margin: 0;
62	height: 3.5rem;
63	line-height: 3.5rem;
64	padding: 0 0 0 0.75rem;
65	white-space: nowrap;
66	text-overflow: ellipsis;
67	overflow: hidden;
68	color: var(--md-sys-color-on-surface-variant);
69	font-family: var(--md-sys-typescale-title-small-font);
70	font-weight: var(--md-sys-typescale-title-small-weight);
71	font-size: var(--md-sys-typescale-title-small-size);
72	font-style: var(--md-sys-typescale-title-small-font-style);
73	letter-spacing: var(--md-sys-typescale-title-small-tracking);
74	text-transform: var(--md-sys-typescale-title-small-text-transform);
75	text-decoration: var(--md-sys-typescale-title-small-text-decoration);
76	}
77
78	a::after { /* container inactive */
79	content: "";
80	position: absolute;
81	z-index: -2;
82	top: 0;
83	right: 0;
84	left: 0;
85	bottom: 0;
86	}
87
88	a.active::after { /* container */
89	background-color: var(--md-sys-color-secondary-container);
90	}
91
92	a { /* label, shape inactive */
93	position: relative;
94	display: block;
95	box-sizing: border-box;
96	height: 3.5rem;
97	line-height: 3.5rem;
98	padding: 0 0.75rem;
99	border-radius: 1.75rem;
100	color: var(--md-sys-color-on-surface-variant);
101	font-family: var(--md-sys-typescale-label-large-font);
102	font-weight: var(--md-sys-typescale-label-large-weight);
103	font-size: var(--md-sys-typescale-label-large-size);
104	font-style: var(--md-sys-typescale-label-large-font-style);
105	letter-spacing: var(--md-sys-typescale-label-large-tracking);
106	text-transform: var(--md-sys-typescale-label-large-text-transform);
107	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
108	overflow: hidden;
109	white-space: nowrap;
110	text-overflow: ellipsis;
111	}
112
113	a.active { /* label, shape */
114	font-weight: var(--md-sys-typescale-label-large-weight-prominent);
115	color: var(--md-sys-color-on-secondary-container);
116	}
117
118	a::before { /* state layer */
119	content: "";
120	position: absolute;
121	z-index: -1;
122	top: 0;
123	right: 0;
124	left: 0;
125	bottom: 0;
126	}
127
128	a span { /* inactive icon */
129	position: relative;
130	margin-right: 0.75rem;
131	vertical-align: middle;
132	color: var(--md-sys-color-on-surface-variant);
133	font-size: 1.5rem;
134	width: 1.5rem;
135	height: 1.5rem;
136	}
137
138	a.active span { /* icon */
139	color: var(--md-sys-color-on-secondary-container);
140	}
141
142	#scrim {
143	display: none;
144	position: fixed;
145	z-index: 3;
146	top: 0;
147	left: 0;
148	bottom: 0;
149	right: 0;
150	opacity: 0.4;
151	background-color: var(--md-ref-palette-neutral-variant20);
152	transform: translateX(-100%);
153	transition-property: display, transform;
154	transition-behavior: allow-discrete;
155	}
156
157	#scrim.open {
158	display: block;
159	transform: translateX(0);
160	}
161
162	@starting-style {
163	nav.open{
164	display: flex;
165	transform: translateX(-100%);
166	}
167	#scrim.open {
168	display: block;
169	transform: translateX(-100%);
170	}
171	}
172
173	a:hover { /* inactive label, shape */
174	color: var(--md-sys-color-on-surface);
175	}
176
177	a.active:hover { /* active label, shape */
178	color: var(--md-sys-color-on-secondary-container);
179	}
180
181	a:hover::before { /* inactive state layer */
182	background-color: var(--md-sys-color-on-surface);
183	opacity: var(--md-sys-state-hover-state-layer-opacity);
184	}
185
186	a.active:hover::before { /* state layer */
187	background-color: var(--md-sys-color-on-secondary-container);
188	}
189
190	a:hover span { /* inactive icon */
191	color: var(--md-sys-color-on-surface);
192	}
193
194	a.active:hover span { /* icon */
195	color: var(--md-sys-color-on-secondary-container);
196	}
197
198	a:focus { /* inactive label, shape */
199	outline: none;
200	color: var(--md-sys-color-on-surface);
201	}
202
203	a.active:focus { /* label, shape */
204	color: var(--md-sys-color-on-secondary-container);
205	}
206
207	a:focus::before { /* inactive state layer */
208	background-color: var(--md-sys-color-on-surface);
209	opacity: var(--md-sys-state-focus-state-layer-opacity);
210	}
211
212	a.active:focus::before { /* state layer */
213	background-color: var(--md-sys-color-on-secondary-container);
214	}
215
216	a:focus span { /* inactive icon */
217	color: var(--md-sys-color-on-surface);
218	}
219
220	a.active:focus span { /* icon */
221	color: var(--md-sys-color-on-secondary-container);
222	}
223
224	a:active { /* inactive pressed label, shape */
225	background-position: center;
226	background-image:
227	radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
228	background-size: 100%;
229	animation-name: md-ripple;
230	animation-duration: var(--md-sys-motion-duration-500);
231	color: var(--md-sys-color-on-surface);
232	}
233
234	a.active:active { /* active pressed label, shape */
235	color: var(--md-sys-color-on-secondary-container);
236	}
237
238	a:active::before { /* inactive pressed state layer */
239	background-color: var(--md-sys-color-on-surface);
240	opacity: var(--md-sys-state-pressed-state-layer-opacity);
241	}
242
243	a.active:active::before { /* active pressed state layer */
244	background-color: var(--md-sys-color-on-secondary-container);
245	}
246
247	a:active span { /* inactive pressed icon */
248	color: var(--md-sys-color-on-surface);
249	}
250
251	a.active:focus span { /* active pressed icon */
252	color: var(--md-sys-color-on-secondary-container);
253	}
254
255	</style>
256
257	<div id="scrim"class="duration-700 easing-standard"></div>
258	<nav class="large-end duration-700 easing-standard"><div></div></nav>`
259	}
260
261	constructor() {
262	super()
263	const shadow = this.attachShadow({ mode: "open", delegatesFocus: true })
264	shadow.innerHTML = this.getContent()
265	this.cierra = this.cierra.bind(this)
266
267	/** @type {HTMLElement} */
268	this._nav = querySelector(shadow, "nav")
269
270	/** @type {HTMLUListElement} */
271	this._div = querySelector(this._nav, "div")
272
273	/** @type {HTMLUListElement} */
274	this._scrim = querySelector(shadow, "#scrim")
275	this._scrim.addEventListener("click", this.cierra)
276	}
277
278	connectedCallback() {
279	this.classList.add("drawer")
280	this._div.innerHTML = this.getHipervinculos()
281	}
282
283	abre() {
284	abreElementoHtml(this._nav)
285	abreElementoHtml(this._scrim)
286	}
287
288	cierra() {
289	cierraElementoHtmo(this._nav)
290	cierraElementoHtmo(this._scrim)
291	}
292
293	}

33. Carpeta « material-tokens »

Versión para imprimir.

A. Carpeta « material-tokens / css »

Versión para imprimir.

1. material-tokens / css / baseline.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	@import url(palette.css);
18	@import url(typography.css);
19	@import url(colors.css);
20	@import url(shape.css);
21	@import url(motion.css);
22	@import url(state.css);
23	@import url(elevation.css);
24	@import url(theme/light.css) screen and (prefers-color-scheme: light);
25	@import url(theme/dark.css) screen and (prefers-color-scheme: dark);
26

2. material-tokens / css / colors.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	.primary {
18	color: var(--md-sys-color-on-primary);
19	background-color: var(--md-sys-color-primary);
20	}
21	.on-primary {
22	color: var(--md-sys-color-primary);
23	background-color: var(--md-sys-color-on-primary);
24	}
25	.primary-container {
26	color: var(--md-sys-color-on-primary-container);
27	background-color: var(--md-sys-color-primary-container);
28	}
29	.on-primary-container {
30	color: var(--md-sys-color-primary-container);
31	background-color: var(--md-sys-color-on-primary-container);
32	}
33	.secondary {
34	color: var(--md-sys-color-on-secondary);
35	background-color: var(--md-sys-color-secondary);
36	}
37	.on-secondary {
38	color: var(--md-sys-color-secondary);
39	background-color: var(--md-sys-color-on-secondary);
40	}
41	.secondary-container {
42	color: var(--md-sys-color-on-secondary-container);
43	background-color: var(--md-sys-color-secondary-container);
44	}
45	.on-secondary-container {
46	color: var(--md-sys-color-secondary-container);
47	background-color: var(--md-sys-color-on-secondary-container);
48	}
49	.tertiary {
50	color: var(--md-sys-color-on-tertiary);
51	background-color: var(--md-sys-color-tertiary);
52	}
53	.on-tertiary {
54	color: var(--md-sys-color-tertiary);
55	background-color: var(--md-sys-color-on-tertiary);
56	}
57	.tertiary-container {
58	color: var(--md-sys-color-on-tertiary-container);
59	background-color: var(--md-sys-color-tertiary-container);
60	}
61	.on-tertiary-container {
62	color: var(--md-sys-color-tertiary-container);
63	background-color: var(--md-sys-color-on-tertiary-container);
64	}
65	.background {
66	color: var(--md-sys-color-on-background);
67	background-color: var(--md-sys-color-background);
68	}
69	.surface {
70	color: var(--md-sys-color-on-surface);
71	background-color: var(--md-sys-color-surface);
72	}
73	.surface-variant {
74	color: var(--md-sys-color-on-surface-variant);
75	background-color: var(--md-sys-color-surface-variant);
76	}
77	.on-surface-variant {
78	color: var(--md-sys-color-surface-variant);
79	background-color: var(--md-sys-color-on-surface-variant);
80	}
81	.outline {
82	border: 1px solid var(--md-sys-color-outline);
83	}
84	.inverse-surface {
85	color: var(--md-sys-color-on-inverse-surface);
86	background-color: var(--md-sys-color-inverse-surface);
87	}
88	.on-inverse-surface {
89	color: var(--md-sys-color-inverse-surface);
90	background-color: var(--md-sys-color-on-inverse-surface);
91	}
92	.inverse-primary {
93	color: var(--md-sys-color-on-inverse-primary);
94	background-color: var(--md-sys-color-inverse-primary);
95	}
96	.on-inverse-primary {
97	color: var(--md-sys-color-inverse-primary);
98	background-color: var(--md-sys-color-on-inverse-primary);
99	}
100	.surface-tint {
101	background-color: var(--md-sys-color-on-surface-tint);
102	}
103	.error {
104	color: var(--md-sys-color-on-error);
105	background-color: var(--md-sys-color-error);
106	}
107	.on-error {
108	color: var(--md-sys-color-error);
109	background-color: var(--md-sys-color-on-error);
110	}
111	.error-container {
112	color: var(--md-sys-color-on-error-container);
113	background-color: var(--md-sys-color-error-container);
114	}
115	.on-error-container {
116	color: var(--md-sys-color-error-container);
117	background-color: var(--md-sys-color-on-error-container);
118	}
119	.black {
120	background-color: var(--md-ref-palette-black);
121	}
122	.black-text {
123	color: var(--md-ref-palette-black);
124	}
125	.white {
126	background-color: var(--md-ref-palette-white);
127	}
128	.white-text {
129	color: var(--md-ref-palette-white);
130	}
131

3. material-tokens / css / elevation.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	/* Surface tint color */
19	--md-sys-elevation-surface-tint-color: var(--md-sys-color-primary);
20	/* +5 */
21	--md-sys-elevation-level5-value: 12px;
22	--md-sys-elevation-level5-unit: 1px;
23	--md-sys-elevation-level5: 12px;
24	/* +4 */
25	--md-sys-elevation-level4-value: 8px;
26	--md-sys-elevation-level4-unit: 1px;
27	--md-sys-elevation-level4: 8px;
28	/* +3 */
29	--md-sys-elevation-level3-value: 6px;
30	--md-sys-elevation-level3-unit: 1px;
31	--md-sys-elevation-level3: 6px;
32	/* +2 */
33	--md-sys-elevation-level2-value: 3px;
34	--md-sys-elevation-level2-unit: 1px;
35	--md-sys-elevation-level2: 3px;
36	/* +1 */
37	--md-sys-elevation-level1-value: 1px;
38	--md-sys-elevation-level1-unit: 1px;
39	--md-sys-elevation-level1: 1px;
40	/* 0 */
41	--md-sys-elevation-level0-value: 0px;
42	--md-sys-elevation-level0-unit: 1px;
43	--md-sys-elevation-level0: 0px;
44	}
45	.elevation-0 {
46	box-shadow: var(--md-sys-elevation-level0);
47	}
48	.elevation-1 {
49	box-shadow: var(--md-sys-elevation-level1);
50	}
51	.elevation-2 {
52	box-shadow: var(--md-sys-elevation-level2);
53	}
54	.elevation-3 {
55	box-shadow: var(--md-sys-elevation-level3);
56	}
57	.elevation-4 {
58	box-shadow: var(--md-sys-elevation-level4);
59	}
60	.elevation-5 {
61	box-shadow: var(--md-sys-elevation-level5);
62	}
63

4. material-tokens / css / motion.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	/* Emphasized decelerate easing (out) */
19	--md-sys-motion-easing-emphasized-decelerate-x0: 0.05000000074505806;
20	--md-sys-motion-easing-emphasized-decelerate-y0: 0.699999988079071;
21	--md-sys-motion-easing-emphasized-decelerate-x1: 0.10000000149011612;
22	--md-sys-motion-easing-emphasized-decelerate-y1: 1;
23	/* Emphasized accelerate easing (in) */
24	--md-sys-motion-easing-emphasized-accelerate-x0: 0.30000001192092896;
25	--md-sys-motion-easing-emphasized-accelerate-y0: 0;
26	--md-sys-motion-easing-emphasized-accelerate-x1: 0.800000011920929;
27	--md-sys-motion-easing-emphasized-accelerate-y1: 0.15000000596046448;
28	/* Standard decelerate easing (out) */
29	--md-sys-motion-easing-standard-decelerate-x0: 0;
30	--md-sys-motion-easing-standard-decelerate-y0: 0;
31	--md-sys-motion-easing-standard-decelerate-x1: 0;
32	--md-sys-motion-easing-standard-decelerate-y1: 1;
33	/* Standard accelerate easing (in) */
34	--md-sys-motion-easing-standard-accelerate-x0: 0.30000001192092896;
35	--md-sys-motion-easing-standard-accelerate-y0: 0;
36	--md-sys-motion-easing-standard-accelerate-x1: 1;
37	--md-sys-motion-easing-standard-accelerate-y1: 1;
38	/* Duration 1000ms */
39	--md-sys-motion-duration-1000: 1000ms;
40	/* Duration 900ms */
41	--md-sys-motion-duration-900: 900ms;
42	/* Duration 800ms */
43	--md-sys-motion-duration-800: 800ms;
44	/* Duration 700ms */
45	--md-sys-motion-duration-700: 700ms;
46	/* Duration 600ms */
47	--md-sys-motion-duration-600: 600ms;
48	/* Duration 550ms */
49	--md-sys-motion-duration-550: 550ms;
50	/* Duration 500ms */
51	--md-sys-motion-duration-500: 500ms;
52	/* Duration 450ms */
53	--md-sys-motion-duration-450: 450ms;
54	/* Duration 400ms */
55	--md-sys-motion-duration-400: 400ms;
56	/* Duration 350ms */
57	--md-sys-motion-duration-350: 350ms;
58	/* Duration 300ms */
59	--md-sys-motion-duration-300: 300ms;
60	/* Duration 250ms */
61	--md-sys-motion-duration-250: 250ms;
62	/* Duration 200ms */
63	--md-sys-motion-duration-200: 200ms;
64	/* Duration 150ms */
65	--md-sys-motion-duration-150: 150ms;
66	/* Duration 100ms */
67	--md-sys-motion-duration-100: 100ms;
68	/* Duration 50ms */
69	--md-sys-motion-duration-50: 50ms;
70	/* Standard easing (in and out) */
71	--md-sys-motion-easing-standard-x0: 0.20000000298023224;
72	--md-sys-motion-easing-standard-y0: 0;
73	--md-sys-motion-easing-standard-x1: 0;
74	--md-sys-motion-easing-standard-y1: 1;
75	/* Linear easing */
76	--md-sys-motion-easing-linear-x0: 0;
77	--md-sys-motion-easing-linear-y0: 0;
78	--md-sys-motion-easing-linear-x1: 1;
79	--md-sys-motion-easing-linear-y1: 1;
80	/* Emphasized */
81	--md-sys-motion-easing-emphasized-x0: 0.20000000298023224;
82	--md-sys-motion-easing-emphasized-y0: 0;
83	--md-sys-motion-easing-emphasized-x1: 0;
84	--md-sys-motion-easing-emphasized-y1: 1;
85	/* Motion path */
86	--md-sys-motion-path-standard-path: 1;
87	}
88	.duration-50 {
89	transition-duration: var(--md-sys-motion-duration-50);
90	}
91	.duration-100 {
92	transition-duration: var(--md-sys-motion-duration-100);
93	}
94	.duration-150 {
95	transition-duration: var(--md-sys-motion-duration-150);
96	}
97	.duration-200 {
98	transition-duration: var(--md-sys-motion-duration-200);
99	}
100	.duration-250 {
101	transition-duration: var(--md-sys-motion-duration-250);
102	}
103	.duration-300 {
104	transition-duration: var(--md-sys-motion-duration-300);
105	}
106	.duration-350 {
107	transition-duration: var(--md-sys-motion-duration-350);
108	}
109	.duration-400 {
110	transition-duration: var(--md-sys-motion-duration-400);
111	}
112	.duration-450 {
113	transition-duration: var(--md-sys-motion-duration-450);
114	}
115	.duration-500 {
116	transition-duration: var(--md-sys-motion-duration-500);
117	}
118	.duration-550 {
119	transition-duration: var(--md-sys-motion-duration-550);
120	}
121	.duration-600 {
122	transition-duration: var(--md-sys-motion-duration-600);
123	}
124	.duration-700 {
125	transition-duration: var(--md-sys-motion-duration-700);
126	}
127	.duration-800 {
128	transition-duration: var(--md-sys-motion-duration-800);
129	}
130	.duration-900 {
131	transition-duration: var(--md-sys-motion-duration-900);
132	}
133	.duration-1000 {
134	transition-duration: var(--md-sys-motion-duration-1000);
135	}
136	.easing-standard {
137	transition-timing-function: cubic-bezier(
138	var(--md-sys-motion-easing-standard-x0),
139	var(--md-sys-motion-easing-standard-y0),
140	var(--md-sys-motion-easing-standard-x1),
141	var(--md-sys-motion-easing-standard-y1)
142	);
143	}
144	.easing-linear {
145	transition-timing-function: cubic-bezier(
146	var(--md-sys-motion-easing-linear-x0),
147	var(--md-sys-motion-easing-linear-y0),
148	var(--md-sys-motion-easing-linear-x1),
149	var(--md-sys-motion-easing-linear-y1)
150	);
151	}
152	.easing-standard-accelerate {
153	transition-timing-function: cubic-bezier(
154	var(--md-sys-motion-easing-standard-accelerate-x0),
155	var(--md-sys-motion-easing-standard-accelerate-y0),
156	var(--md-sys-motion-easing-standard-accelerate-x1),
157	var(--md-sys-motion-easing-standard-accelerate-y1)
158	);
159	}
160	.easing-standard-decelerate {
161	transition-timing-function: cubic-bezier(
162	var(--md-sys-motion-easing-standard-decelerate-x0),
163	var(--md-sys-motion-easing-standard-decelerate-y0),
164	var(--md-sys-motion-easing-standard-decelerate-x1),
165	var(--md-sys-motion-easing-standard-decelerate-y1)
166	);
167	}
168	.easing-emphasized {
169	transition-timing-function: cubic-bezier(
170	var(--md-sys-motion-easing-emphasized-x0),
171	var(--md-sys-motion-easing-emphasized-y0),
172	var(--md-sys-motion-easing-emphasized-x1),
173	var(--md-sys-motion-easing-emphasized-y1)
174	);
175	}
176

5. material-tokens / css / palette.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	/* Error 0 */
19	--md-ref-palette-error0: #000000ff;
20	/* Error 10 */
21	--md-ref-palette-error10: #410e0bff;
22	/* Error 20 */
23	--md-ref-palette-error20: #601410ff;
24	/* Error 30 */
25	--md-ref-palette-error30: #8c1d18ff;
26	/* Error 40 */
27	--md-ref-palette-error40: #b3261eff;
28	/* Error 50 */
29	--md-ref-palette-error50: #dc362eff;
30	/* Error 60 */
31	--md-ref-palette-error60: #e46962ff;
32	/* Error 70 */
33	--md-ref-palette-error70: #ec928eff;
34	/* Error 80 */
35	--md-ref-palette-error80: #f2b8b5ff;
36	/* Error 90 */
37	--md-ref-palette-error90: #f9dedcff;
38	/* Error 95 */
39	--md-ref-palette-error95: #fceeeeff;
40	/* Error 99 */
41	--md-ref-palette-error99: #fffbf9ff;
42	/* Error 100 */
43	--md-ref-palette-error100: #ffffffff;
44	/* Tertiary 0 */
45	--md-ref-palette-tertiary0: #000000ff;
46	/* Tertiary 10 */
47	--md-ref-palette-tertiary10: #31111dff;
48	/* Tertiary 20 */
49	--md-ref-palette-tertiary20: #492532ff;
50	/* Tertiary 30 */
51	--md-ref-palette-tertiary30: #633b48ff;
52	/* Tertiary 40 */
53	--md-ref-palette-tertiary40: #7d5260ff;
54	/* Tertiary 50 */
55	--md-ref-palette-tertiary50: #986977ff;
56	/* Tertiary 60 */
57	--md-ref-palette-tertiary60: #b58392ff;
58	/* Tertiary 70 */
59	--md-ref-palette-tertiary70: #d29dacff;
60	/* Tertiary 80 */
61	--md-ref-palette-tertiary80: #efb8c8ff;
62	/* Tertiary 90 */
63	--md-ref-palette-tertiary90: #ffd8e4ff;
64	/* Tertiary 95 */
65	--md-ref-palette-tertiary95: #ffecf1ff;
66	/* Tertiary 99 */
67	--md-ref-palette-tertiary99: #fffbfaff;
68	/* Tertiary 100 */
69	--md-ref-palette-tertiary100: #ffffffff;
70	/* Secondary 0 */
71	--md-ref-palette-secondary0: #000000ff;
72	/* Secondary 10 */
73	--md-ref-palette-secondary10: #1d192bff;
74	/* Secondary 20 */
75	--md-ref-palette-secondary20: #332d41ff;
76	/* Secondary 30 */
77	--md-ref-palette-secondary30: #4a4458ff;
78	/* Secondary 40 */
79	--md-ref-palette-secondary40: #625b71ff;
80	/* Secondary 50 */
81	--md-ref-palette-secondary50: #7a7289ff;
82	/* Secondary 60 */
83	--md-ref-palette-secondary60: #958da5ff;
84	/* Secondary 70 */
85	--md-ref-palette-secondary70: #b0a7c0ff;
86	/* Secondary 80 */
87	--md-ref-palette-secondary80: #ccc2dcff;
88	/* Secondary 90 */
89	--md-ref-palette-secondary90: #e8def8ff;
90	/* Secondary 95 */
91	--md-ref-palette-secondary95: #f6edffff;
92	/* Secondary 99 */
93	--md-ref-palette-secondary99: #fffbfeff;
94	/* Secondary 100 */
95	--md-ref-palette-secondary100: #ffffffff;
96	/* Primary 0 */
97	--md-ref-palette-primary0: #000000ff;
98	/* Primary 10 */
99	--md-ref-palette-primary10: #21005dff;
100	/* Primary 20 */
101	--md-ref-palette-primary20: #381e72ff;
102	/* Primary 30 */
103	--md-ref-palette-primary30: #4f378bff;
104	/* Primary 40 */
105	--md-ref-palette-primary40: #6750a4ff;
106	/* Primary 50 */
107	--md-ref-palette-primary50: #7f67beff;
108	/* Primary 60 */
109	--md-ref-palette-primary60: #9a82dbff;
110	/* Primary 70 */
111	--md-ref-palette-primary70: #b69df8ff;
112	/* Primary 80 */
113	--md-ref-palette-primary80: #d0bcffff;
114	/* Primary 90 */
115	--md-ref-palette-primary90: #eaddffff;
116	/* Primary 95 */
117	--md-ref-palette-primary95: #f6edffff;
118	/* Primary 99 */
119	--md-ref-palette-primary99: #fffbfeff;
120	/* Primary 100 */
121	--md-ref-palette-primary100: #ffffffff;
122	/* Neutral Variant 0 */
123	--md-ref-palette-neutral-variant0: #000000ff;
124	/* Neutral Variant 10 */
125	--md-ref-palette-neutral-variant10: #1d1a22ff;
126	/* Neutral Variant 20 */
127	--md-ref-palette-neutral-variant20: #322f37ff;
128	/* Neutral Variant 30 */
129	--md-ref-palette-neutral-variant30: #49454fff;
130	/* Neutral Variant 40 */
131	--md-ref-palette-neutral-variant40: #605d66ff;
132	/* Neutral Variant 50 */
133	--md-ref-palette-neutral-variant50: #79747eff;
134	/* Neutral Variant 60 */
135	--md-ref-palette-neutral-variant60: #938f99ff;
136	/* Neutral Variant 70 */
137	--md-ref-palette-neutral-variant70: #aea9b4ff;
138	/* Neutral Variant 80 */
139	--md-ref-palette-neutral-variant80: #cac4d0ff;
140	/* Neutral Variant 90 */
141	--md-ref-palette-neutral-variant90: #e7e0ecff;
142	/* Neutral Variant 95 */
143	--md-ref-palette-neutral-variant95: #f5eefaff;
144	/* Neutral Variant 99 */
145	--md-ref-palette-neutral-variant99: #fffbfeff;
146	/* Neutral Variant 100 */
147	--md-ref-palette-neutral-variant100: #ffffffff;
148	/* Neutral 0 */
149	--md-ref-palette-neutral0: #000000ff;
150	/* Neutral 10 */
151	--md-ref-palette-neutral10: #1c1b1fff;
152	/* Neutral 20 */
153	--md-ref-palette-neutral20: #313033ff;
154	/* Neutral 30 */
155	--md-ref-palette-neutral30: #484649ff;
156	/* Neutral 40 */
157	--md-ref-palette-neutral40: #605d62ff;
158	/* Neutral 50 */
159	--md-ref-palette-neutral50: #787579ff;
160	/* Neutral 60 */
161	--md-ref-palette-neutral60: #939094ff;
162	/* Neutral 70 */
163	--md-ref-palette-neutral70: #aeaaaeff;
164	/* Neutral 80 */
165	--md-ref-palette-neutral80: #c9c5caff;
166	/* Neutral 90 */
167	--md-ref-palette-neutral90: #e6e1e5ff;
168	/* Neutral 95 */
169	--md-ref-palette-neutral95: #f4eff4ff;
170	/* Neutral 99 */
171	--md-ref-palette-neutral99: #fffbfeff;
172	/* Neutral 100 */
173	--md-ref-palette-neutral100: #ffffffff;
174	/* Black */
175	--md-ref-palette-black: #000000ff;
176	/* White */
177	--md-ref-palette-white: #ffffffff;
178	}
179

6. material-tokens / css / shape.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	/* Fully rounded */
19	--md-sys-shape-corner-full-family: 3px;
20	/* Extra large top rounding */
21	--md-sys-shape-corner-extra-large-top-family: 1px;
22	--md-sys-shape-corner-extra-large-top-default-size: 0px;
23	--md-sys-shape-corner-extra-large-top-top-left: 28px;
24	--md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
25	--md-sys-shape-corner-extra-large-top-top-right: 28px;
26	/* Extra large rounding */
27	--md-sys-shape-corner-extra-large-family: 1px;
28	--md-sys-shape-corner-extra-large-default-size-unit: 1px;
29	--md-sys-shape-corner-extra-large-default-size: 28px;
30	/* Large top rounding */
31	--md-sys-shape-corner-large-top-family: 1px;
32	--md-sys-shape-corner-large-top-default-size-unit: 1px;
33	--md-sys-shape-corner-large-top-default-size: 0px;
34	--md-sys-shape-corner-large-top-top-left-unit: 1px;
35	--md-sys-shape-corner-large-top-top-left: 16px;
36	--md-sys-shape-corner-large-top-top-right-unit: 1px;
37	--md-sys-shape-corner-large-top-top-right: 16px;
38	/* Large end rounding */
39	--md-sys-shape-corner-large-end-family: 1px;
40	--md-sys-shape-corner-large-end-default-size-unit: 1px;
41	--md-sys-shape-corner-large-end-default-size: 0px;
42	--md-sys-shape-corner-large-end-top-right-unit: 1px;
43	--md-sys-shape-corner-large-end-top-right: 16px;
44	--md-sys-shape-corner-large-end-bottom-right-unit: 1px;
45	--md-sys-shape-corner-large-end-bottom-right: 16px;
46	/* Large rounding */
47	--md-sys-shape-corner-large-family: 1px;
48	--md-sys-shape-corner-large-default-size-unit: 1px;
49	--md-sys-shape-corner-large-default-size: 16px;
50	/* Medium rounding */
51	--md-sys-shape-corner-medium-family: 1px;
52	--md-sys-shape-corner-medium-default-size-unit: 1px;
53	--md-sys-shape-corner-medium-default-size: 12px;
54	/* Small rounding */
55	--md-sys-shape-corner-small-family: 1px;
56	--md-sys-shape-corner-small-default-size-unit: 1px;
57	--md-sys-shape-corner-small-default-size: 8px;
58	/* Extra small top rounding */
59	--md-sys-shape-corner-extra-small-top-family: 1px;
60	--md-sys-shape-corner-extra-small-top-default-size-unit: 1px;
61	--md-sys-shape-corner-extra-small-top-default-size: 0px;
62	--md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
63	--md-sys-shape-corner-extra-small-top-top-left: 4px;
64	--md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
65	--md-sys-shape-corner-extra-small-top-top-right: 4px;
66	/* Extra small rounding */
67	--md-sys-shape-corner-extra-small-family: 1px;
68	--md-sys-shape-corner-extra-small-default-size-unit: 1px;
69	--md-sys-shape-corner-extra-small-default-size: 4px;
70	/* No rounding */
71	--md-sys-shape-corner-none-family: 1px;
72	--md-sys-shape-corner-none-default-size-unit: 1px;
73	--md-sys-shape-corner-none-default-size: 0px;
74
75	--md-sys-shape-small: var(--md-sys-shape-corner-small-default-size);
76	--md-sys-shape-medium: var(--md-sys-shape-corner-medium-default-size);
77	--md-sys-shape-large: var(--md-sys-shape-corner-large-default-size);
78	}
79
80	.shape-none {
81	border-radius: var(--md-sys-shape-corner-none-default-size);
82	}
83	.shape-extra-small {
84	border-radius: var(--md-sys-shape-corner-extra-small-default-size);
85	}
86	.shape-small {
87	border-radius: var(--md-sys-shape-corner-small-default-size);
88	}
89	.shape-medium {
90	border-radius: var(--md-sys-shape-corner-medium-default-size);
91	}
92	.shape-large {
93	border-radius: var(--md-sys-shape-corner-large-default-size);
94	}
95	.shape-extra-large {
96	border-radius: var(--md-sys-shape-corner-extra-large-default-size);
97	}
98	.extra-small-top {
99	border-top-left-radius: var(--md-sys-shape-corner-extra-small-top-top-left);
100	border-top-right-radius: var(--md-sys-shape-corner-extra-small-top-top-right);
101	}
102	.large-end {
103	border-top-right-radius: var(--md-sys-shape-corner-large-end-top-right);
104	border-bottom-right-radius: var(--md-sys-shape-corner-large-end-bottom-right);
105	}
106	.large-top {
107	border-top-left-radius: var(--md-sys-shape-corner-large-top-top-left);
108	border-top-right-radius: var(--md-sys-shape-corner-large-top-top-right);
109	}
110	.extra-large-top {
111	border-top-left-radius: var(--md-sys-shape-corner-extra-large-top-top-left);
112	border-top-right-radius: var(--md-sys-shape-corner-extra-large-top-top-right);
113	}
114

7. material-tokens / css / state.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	/* Dragged state layer opacity */
19	--md-sys-state-dragged-state-layer-opacity: 0.1599999964237213;
20	/* Pressed state layer opacity */
21	--md-sys-state-pressed-state-layer-opacity: 0.11999999731779099;
22	/* Focus state layer opacity */
23	--md-sys-state-focus-state-layer-opacity: 0.11999999731779099;
24	/* Hover state layer opacity */
25	--md-sys-state-hover-state-layer-opacity: 0.07999999821186066;
26	}
27	.hover-state-layer {
28	opacity: var(--md-sys-state-hover-state-layer-opacity);
29	}
30	.pressed-state-layer {
31	opacity: var(--md-sys-state-pressed-state-layer-opacity);
32	}
33	.dragged-state-layer {
34	opacity: var(--md-sys-state-dragged-state-layer-opacity);
35	}
36	.focus-state-layer {
37	opacity: var(--md-sys-state-focus-state-layer-opacity);
38	}
39

8. material-tokens / css / typography.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	/* This file is generated */
18
19	/* DO NOT EDIT */
20
21	:root {
22	/* Label Small */
23	--md-sys-typescale-label-small-text-transform: unset;
24	--md-sys-typescale-label-small-axis-value: unset;
25	--md-sys-typescale-label-small-font-style: unset;
26	--md-sys-typescale-label-small-text-decoration: unset;
27	/* Label Small line height */
28	--md-sys-typescale-label-small-line-height-value: 16px;
29	--md-sys-typescale-label-small-line-height-unit: 2px;
30	--md-sys-typescale-label-small-line-height: 16px;
31	/* Label Small font tracking */
32	--md-sys-typescale-label-small-tracking-value: 0.5px;
33	--md-sys-typescale-label-small-tracking-unit: 2px;
34	--md-sys-typescale-label-small-tracking: 0.5px;
35	/* Label Small font size */
36	--md-sys-typescale-label-small-size-value: 11px;
37	--md-sys-typescale-label-small-size-unit: 2px;
38	--md-sys-typescale-label-small-size: 11px;
39	/* Label Small font weight */
40	--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
41	/* Label Small font name */
42	--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
43	/* Label Medium */
44	--md-sys-typescale-label-medium-axis-value: unset;
45	--md-sys-typescale-label-medium-font-style: unset;
46	--md-sys-typescale-label-medium-text-decoration: unset;
47	/* Label Medium text transform */
48	--md-sys-typescale-label-medium-text-transform: 1;
49	/* Label Medium line height */
50	--md-sys-typescale-label-medium-line-height-value: 16px;
51	--md-sys-typescale-label-medium-line-height-unit: 2px;
52	--md-sys-typescale-label-medium-line-height: 16px;
53	/* Label Medium font tracking */
54	--md-sys-typescale-label-medium-tracking-value: 0.5px;
55	--md-sys-typescale-label-medium-tracking-unit: 2px;
56	--md-sys-typescale-label-medium-tracking: 0.5px;
57	/* Label Medium font size */
58	--md-sys-typescale-label-medium-size-value: 12px;
59	--md-sys-typescale-label-medium-size-unit: 2px;
60	--md-sys-typescale-label-medium-size: 12px;
61	/* Label Medium font weight */
62	--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
63	/* Label Medium font name */
64	--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
65	/* Label Large */
66	--md-sys-typescale-label-large-text-transform: unset;
67	--md-sys-typescale-label-large-axis-value: unset;
68	--md-sys-typescale-label-large-font-style: unset;
69	--md-sys-typescale-label-large-text-decoration: unset;
70	/* Label Large line height */
71	--md-sys-typescale-label-large-line-height-value: 20px;
72	--md-sys-typescale-label-large-line-height-unit: 2px;
73	--md-sys-typescale-label-large-line-height: 20px;
74	/* Label Large font tracking */
75	--md-sys-typescale-label-large-tracking-value: 0.10000000149011612px;
76	--md-sys-typescale-label-large-tracking-unit: 2px;
77	--md-sys-typescale-label-large-tracking: 0.10000000149011612px;
78	/* Label Large font size */
79	--md-sys-typescale-label-large-size-value: 14px;
80	--md-sys-typescale-label-large-size-unit: 2px;
81	--md-sys-typescale-label-large-size: 14px;
82	/* Label Large font weight */
83	--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
84	/* Label Large font name */
85	--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
86	/* Body Small */
87	--md-sys-typescale-body-small-text-transform: unset;
88	--md-sys-typescale-body-small-axis-value: unset;
89	--md-sys-typescale-body-small-font-style: unset;
90	--md-sys-typescale-body-small-text-decoration: unset;
91	/* Body Small line height */
92	--md-sys-typescale-body-small-line-height-value: 16px;
93	--md-sys-typescale-body-small-line-height-unit: 2px;
94	--md-sys-typescale-body-small-line-height: 16px;
95	/* Body Small font tracking */
96	--md-sys-typescale-body-small-tracking-value: 0.4000000059604645px;
97	--md-sys-typescale-body-small-tracking-unit: 2px;
98	--md-sys-typescale-body-small-tracking: 0.4000000059604645px;
99	/* Body Small font size */
100	--md-sys-typescale-body-small-size-value: 12px;
101	--md-sys-typescale-body-small-size-unit: 2px;
102	--md-sys-typescale-body-small-size: 12px;
103	/* Body Small font weight */
104	--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
105	/* Body Small font name */
106	--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
107	/* Body Medium */
108	--md-sys-typescale-body-medium-text-transform: unset;
109	--md-sys-typescale-body-medium-axis-value: unset;
110	--md-sys-typescale-body-medium-font-style: unset;
111	--md-sys-typescale-body-medium-text-decoration: unset;
112	/* Body Medium line height */
113	--md-sys-typescale-body-medium-line-height-value: 20px;
114	--md-sys-typescale-body-medium-line-height-unit: 2px;
115	--md-sys-typescale-body-medium-line-height: 20px;
116	/* Body Medium font tracking */
117	--md-sys-typescale-body-medium-tracking-value: 0.25px;
118	--md-sys-typescale-body-medium-tracking-unit: 2px;
119	--md-sys-typescale-body-medium-tracking: 0.25px;
120	/* Body Medium font size */
121	--md-sys-typescale-body-medium-size-value: 14px;
122	--md-sys-typescale-body-medium-size-unit: 2px;
123	--md-sys-typescale-body-medium-size: 14px;
124	/* Body Medium font weight */
125	--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
126	/* Body Medium font name */
127	--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
128	/* Body Large */
129	--md-sys-typescale-body-large-text-transform: unset;
130	--md-sys-typescale-body-large-axis-value: unset;
131	--md-sys-typescale-body-large-font-style: unset;
132	--md-sys-typescale-body-large-text-decoration: unset;
133	/* Body Large line height */
134	--md-sys-typescale-body-large-line-height-value: 24px;
135	--md-sys-typescale-body-large-line-height-unit: 2px;
136	--md-sys-typescale-body-large-line-height: 24px;
137	/* Body Large font tracking */
138	--md-sys-typescale-body-large-tracking-value: 0.5px;
139	--md-sys-typescale-body-large-tracking-unit: 2px;
140	--md-sys-typescale-body-large-tracking: 0.5px;
141	/* Body Large font size */
142	--md-sys-typescale-body-large-size-value: 16px;
143	--md-sys-typescale-body-large-size-unit: 2px;
144	--md-sys-typescale-body-large-size: 16px;
145	/* Body Large font weight */
146	--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
147	/* Body Large font name */
148	--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
149	/* Title Small */
150	--md-sys-typescale-title-small-text-transform: unset;
151	--md-sys-typescale-title-small-axis-value: unset;
152	--md-sys-typescale-title-small-font-style: unset;
153	--md-sys-typescale-title-small-text-decoration: unset;
154	/* Title Small line height */
155	--md-sys-typescale-title-small-line-height-value: 20px;
156	--md-sys-typescale-title-small-line-height-unit: 2px;
157	--md-sys-typescale-title-small-line-height: 20px;
158	/* Title Small font tracking */
159	--md-sys-typescale-title-small-tracking-value: 0.10000000149011612px;
160	--md-sys-typescale-title-small-tracking-unit: 2px;
161	--md-sys-typescale-title-small-tracking: 0.10000000149011612px;
162	/* Title Small font size */
163	--md-sys-typescale-title-small-size-value: 14px;
164	--md-sys-typescale-title-small-size-unit: 2px;
165	--md-sys-typescale-title-small-size: 14px;
166	/* Title Small font weight */
167	--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
168	/* Title Small font name */
169	--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);
170	/* Title Medium */
171	--md-sys-typescale-title-medium-text-transform: unset;
172	--md-sys-typescale-title-medium-axis-value: unset;
173	--md-sys-typescale-title-medium-font-style: unset;
174	--md-sys-typescale-title-medium-text-decoration: unset;
175	/* Title Medium line height */
176	--md-sys-typescale-title-medium-line-height-value: 24px;
177	--md-sys-typescale-title-medium-line-height-unit: 2px;
178	--md-sys-typescale-title-medium-line-height: 24px;
179	/* Title Medium font tracking */
180	--md-sys-typescale-title-medium-tracking-value: 0.15000000596046448px;
181	--md-sys-typescale-title-medium-tracking-unit: 2px;
182	--md-sys-typescale-title-medium-tracking: 0.15000000596046448px;
183	/* Title Medium font size */
184	--md-sys-typescale-title-medium-size-value: 16px;
185	--md-sys-typescale-title-medium-size-unit: 2px;
186	--md-sys-typescale-title-medium-size: 16px;
187	/* Title Medium font weight */
188	--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
189	/* Title Medium font name */
190	--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);
191	/* Title Large */
192	--md-sys-typescale-title-large-text-transform: unset;
193	--md-sys-typescale-title-large-axis-value: unset;
194	--md-sys-typescale-title-large-font-style: unset;
195	--md-sys-typescale-title-large-text-decoration: unset;
196	/* Title Large line height */
197	--md-sys-typescale-title-large-line-height-value: 28px;
198	--md-sys-typescale-title-large-line-height-unit: 2px;
199	--md-sys-typescale-title-large-line-height: 28px;
200	/* Title Large font tracking */
201	--md-sys-typescale-title-large-tracking-value: 0px;
202	--md-sys-typescale-title-large-tracking-unit: 2px;
203	--md-sys-typescale-title-large-tracking: 0px;
204	/* Title Large font size */
205	--md-sys-typescale-title-large-size-value: 22px;
206	--md-sys-typescale-title-large-size-unit: 2px;
207	--md-sys-typescale-title-large-size: 22px;
208	/* Title Large font weight */
209	--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
210	/* Title Large font name */
211	--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
212	/* Headline Small */
213	--md-sys-typescale-headline-small-text-transform: unset;
214	--md-sys-typescale-headline-small-axis-value: unset;
215	--md-sys-typescale-headline-small-font-style: unset;
216	--md-sys-typescale-headline-small-text-decoration: unset;
217	/* Headline Small line height */
218	--md-sys-typescale-headline-small-line-height-value: 32px;
219	--md-sys-typescale-headline-small-line-height-unit: 2px;
220	--md-sys-typescale-headline-small-line-height: 32px;
221	/* Headline Small font tracking */
222	--md-sys-typescale-headline-small-tracking-value: 0px;
223	--md-sys-typescale-headline-small-tracking-unit: 2px;
224	--md-sys-typescale-headline-small-tracking: 0px;
225	/* Headline Small font size */
226	--md-sys-typescale-headline-small-size-value: 24px;
227	--md-sys-typescale-headline-small-size-unit: 2px;
228	--md-sys-typescale-headline-small-size: 24px;
229	/* Headline Small font weight */
230	--md-sys-typescale-headline-small-weight: var(
231	--md-ref-typeface-weight-regular
232	);
233	/* Headline Small font name */
234	--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
235	/* Headline Medium */
236	--md-sys-typescale-headline-medium-text-transform: unset;
237	--md-sys-typescale-headline-medium-axis-value: unset;
238	--md-sys-typescale-headline-medium-font-style: unset;
239	--md-sys-typescale-headline-medium-text-decoration: unset;
240	/* Headline Medium line height */
241	--md-sys-typescale-headline-medium-line-height-value: 36px;
242	--md-sys-typescale-headline-medium-line-height-unit: 2px;
243	--md-sys-typescale-headline-medium-line-height: 36px;
244	/* Headline Medium font tracking */
245	--md-sys-typescale-headline-medium-tracking-value: 0px;
246	--md-sys-typescale-headline-medium-tracking-unit: 2px;
247	--md-sys-typescale-headline-medium-tracking: 0px;
248	/* Headline Medium font size */
249	--md-sys-typescale-headline-medium-size-value: 28px;
250	--md-sys-typescale-headline-medium-size-unit: 2px;
251	--md-sys-typescale-headline-medium-size: 28px;
252	/* Headline Medium font weight */
253	--md-sys-typescale-headline-medium-weight: var(
254	--md-ref-typeface-weight-regular
255	);
256	/* Headline Medium font name */
257	--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
258	/* Headline Large */
259	--md-sys-typescale-headline-large-text-transform: unset;
260	--md-sys-typescale-headline-large-axis-value: unset;
261	--md-sys-typescale-headline-large-font-style: unset;
262	--md-sys-typescale-headline-large-text-decoration: unset;
263	/* Headline Large line height */
264	--md-sys-typescale-headline-large-line-height-value: 40px;
265	--md-sys-typescale-headline-large-line-height-unit: 2px;
266	--md-sys-typescale-headline-large-line-height: 40px;
267	/* Headline Large font tracking */
268	--md-sys-typescale-headline-large-tracking-value: 0px;
269	--md-sys-typescale-headline-large-tracking-unit: 2px;
270	--md-sys-typescale-headline-large-tracking: 0px;
271	/* Headline Large font size */
272	--md-sys-typescale-headline-large-size-value: 32px;
273	--md-sys-typescale-headline-large-size-unit: 2px;
274	--md-sys-typescale-headline-large-size: 32px;
275	/* Headline Large font name */
276	--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
277	/* Headline Large font weight */
278	--md-sys-typescale-headline-large-weight: var(
279	--md-ref-typeface-weight-regular
280	);
281	/* Display Small */
282	--md-sys-typescale-display-small-text-transform: unset;
283	--md-sys-typescale-display-small-axis-value: unset;
284	--md-sys-typescale-display-small-font-style: unset;
285	--md-sys-typescale-display-small-text-decoration: unset;
286	/* Display Small line height */
287	--md-sys-typescale-display-small-line-height-value: 44px;
288	--md-sys-typescale-display-small-line-height-unit: 2px;
289	--md-sys-typescale-display-small-line-height: 44px;
290	/* Display Small font tracking */
291	--md-sys-typescale-display-small-tracking-value: 0px;
292	--md-sys-typescale-display-small-tracking-unit: 2px;
293	--md-sys-typescale-display-small-tracking: 0px;
294	/* Display Small font size */
295	--md-sys-typescale-display-small-size-value: 36px;
296	--md-sys-typescale-display-small-size-unit: 2px;
297	--md-sys-typescale-display-small-size: 36px;
298	/* Display Small font weight */
299	--md-sys-typescale-display-small-weight: var(
300	--md-ref-typeface-weight-regular
301	);
302	/* Display Small font name */
303	--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
304	/* Display Medium */
305	--md-sys-typescale-display-medium-text-transform: unset;
306	--md-sys-typescale-display-medium-axis-value: unset;
307	--md-sys-typescale-display-medium-font-style: unset;
308	--md-sys-typescale-display-medium-text-decoration: unset;
309	/* Display Medium line height */
310	--md-sys-typescale-display-medium-line-height-value: 52px;
311	--md-sys-typescale-display-medium-line-height-unit: 2px;
312	--md-sys-typescale-display-medium-line-height: 52px;
313	/* Display Medium font tracking */
314	--md-sys-typescale-display-medium-tracking-value: 0px;
315	--md-sys-typescale-display-medium-tracking-unit: 2px;
316	--md-sys-typescale-display-medium-tracking: 0px;
317	/* Display Medium font size */
318	--md-sys-typescale-display-medium-size-value: 45px;
319	--md-sys-typescale-display-medium-size-unit: 2px;
320	--md-sys-typescale-display-medium-size: 45px;
321	/* Display Medium font weight */
322	--md-sys-typescale-display-medium-weight: var(
323	--md-ref-typeface-weight-regular
324	);
325	/* Display Medium font name */
326	--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
327	/* Display Large */
328	--md-sys-typescale-display-large-text-transform: unset;
329	--md-sys-typescale-display-large-axis-value: unset;
330	--md-sys-typescale-display-large-font-style: unset;
331	--md-sys-typescale-display-large-text-decoration: unset;
332	/* Display Large line height */
333	--md-sys-typescale-display-large-line-height-value: 64px;
334	--md-sys-typescale-display-large-line-height-unit: 2px;
335	--md-sys-typescale-display-large-line-height: 64px;
336	/* Display Large font tracking */
337	--md-sys-typescale-display-large-tracking-value: -0.25px;
338	--md-sys-typescale-display-large-tracking-unit: 2px;
339	--md-sys-typescale-display-large-tracking: -0.25px;
340	/* Display Large font size */
341	--md-sys-typescale-display-large-size-value: 57px;
342	--md-sys-typescale-display-large-size-unit: 2px;
343	--md-sys-typescale-display-large-size: 57px;
344	/* Display Large font weight */
345	--md-sys-typescale-display-large-weight: var(
346	--md-ref-typeface-weight-regular
347	);
348	/* Display Large font name */
349	--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
350	/* Plain typeface */
351	--md-ref-typeface-plain: Roboto;
352	/* Brand typeface */
353	--md-ref-typeface-brand: Roboto;
354	/* Bold weight */
355	--md-ref-typeface-weight-bold: 700;
356	/* Medium weight */
357	--md-ref-typeface-weight-medium: 500;
358	/* Regular weight */
359	--md-ref-typeface-weight-regular: 400;
360	}
361
362	/* Label Small */
363	.label-small {
364	font-family: var(--md-sys-typescale-label-small-font);
365	font-weight: var(--md-sys-typescale-label-small-weight);
366	font-size: var(--md-sys-typescale-label-small-size);
367	font-style: var(--md-sys-typescale-label-small-font-style);
368	letter-spacing: var(--md-sys-typescale-label-small-tracking);
369	line-height: var(--md-sys-typescale-label-small-line-height);
370	text-transform: var(--md-sys-typescale-label-small-text-transform);
371	text-decoration: var(--md-sys-typescale-label-small-text-decoration);
372	}
373	/* Label Medium */
374	.label-medium {
375	font-family: var(--md-sys-typescale-label-medium-font);
376	font-weight: var(--md-sys-typescale-label-medium-weight);
377	font-size: var(--md-sys-typescale-label-medium-size);
378	font-style: var(--md-sys-typescale-label-medium-font-style);
379	letter-spacing: var(--md-sys-typescale-label-medium-tracking);
380	line-height: var(--md-sys-typescale-label-medium-line-height);
381	text-transform: var(--md-sys-typescale-label-medium-text-transform);
382	text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
383	}
384	/* Label Large */
385	.label-large {
386	font-family: var(--md-sys-typescale-label-large-font);
387	font-weight: var(--md-sys-typescale-label-large-weight);
388	font-size: var(--md-sys-typescale-label-large-size);
389	font-style: var(--md-sys-typescale-label-large-font-style);
390	letter-spacing: var(--md-sys-typescale-label-large-tracking);
391	line-height: var(--md-sys-typescale-label-large-line-height);
392	text-transform: var(--md-sys-typescale-label-large-text-transform);
393	text-decoration: var(--md-sys-typescale-label-large-text-decoration);
394	}
395	/* Body Small */
396	.body-small {
397	font-family: var(--md-sys-typescale-body-small-font);
398	font-weight: var(--md-sys-typescale-body-small-weight);
399	font-size: var(--md-sys-typescale-body-small-size);
400	font-style: var(--md-sys-typescale-body-small-font-style);
401	letter-spacing: var(--md-sys-typescale-body-small-tracking);
402	line-height: var(--md-sys-typescale-body-small-line-height);
403	text-transform: var(--md-sys-typescale-body-small-text-transform);
404	text-decoration: var(--md-sys-typescale-body-small-text-decoration);
405	}
406	/* Body Medium */
407	.body-medium {
408	font-family: var(--md-sys-typescale-body-medium-font);
409	font-weight: var(--md-sys-typescale-body-medium-weight);
410	font-size: var(--md-sys-typescale-body-medium-size);
411	font-style: var(--md-sys-typescale-body-medium-font-style);
412	letter-spacing: var(--md-sys-typescale-body-medium-tracking);
413	line-height: var(--md-sys-typescale-body-medium-line-height);
414	text-transform: var(--md-sys-typescale-body-medium-text-transform);
415	text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
416	}
417	/* Body Large */
418	.body-large {
419	font-family: var(--md-sys-typescale-body-large-font);
420	font-weight: var(--md-sys-typescale-body-large-weight);
421	font-size: var(--md-sys-typescale-body-large-size);
422	font-style: var(--md-sys-typescale-body-large-font-style);
423	letter-spacing: var(--md-sys-typescale-body-large-tracking);
424	line-height: var(--md-sys-typescale-body-large-line-height);
425	text-transform: var(--md-sys-typescale-body-large-text-transform);
426	text-decoration: var(--md-sys-typescale-body-large-text-decoration);
427	}
428	/* Title Small */
429	.title-small {
430	font-family: var(--md-sys-typescale-title-small-font);
431	font-weight: var(--md-sys-typescale-title-small-weight);
432	font-size: var(--md-sys-typescale-title-small-size);
433	font-style: var(--md-sys-typescale-title-small-font-style);
434	letter-spacing: var(--md-sys-typescale-title-small-tracking);
435	line-height: var(--md-sys-typescale-title-small-line-height);
436	text-transform: var(--md-sys-typescale-title-small-text-transform);
437	text-decoration: var(--md-sys-typescale-title-small-text-decoration);
438	}
439	/* Title Medium */
440	.title-medium {
441	font-family: var(--md-sys-typescale-title-medium-font);
442	font-weight: var(--md-sys-typescale-title-medium-weight);
443	font-size: var(--md-sys-typescale-title-medium-size);
444	font-style: var(--md-sys-typescale-title-medium-font-style);
445	letter-spacing: var(--md-sys-typescale-title-medium-tracking);
446	line-height: var(--md-sys-typescale-title-medium-line-height);
447	text-transform: var(--md-sys-typescale-title-medium-text-transform);
448	text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
449	}
450	/* Title Large */
451	.title-large {
452	font-family: var(--md-sys-typescale-title-large-font);
453	font-weight: var(--md-sys-typescale-title-large-weight);
454	font-size: var(--md-sys-typescale-title-large-size);
455	font-style: var(--md-sys-typescale-title-large-font-style);
456	letter-spacing: var(--md-sys-typescale-title-large-tracking);
457	line-height: var(--md-sys-typescale-title-large-line-height);
458	text-transform: var(--md-sys-typescale-title-large-text-transform);
459	text-decoration: var(--md-sys-typescale-title-large-text-decoration);
460	}
461	/* Headline Small */
462	.headline-small {
463	font-family: var(--md-sys-typescale-headline-small-font);
464	font-weight: var(--md-sys-typescale-headline-small-weight);
465	font-size: var(--md-sys-typescale-headline-small-size);
466	font-style: var(--md-sys-typescale-headline-small-font-style);
467	letter-spacing: var(--md-sys-typescale-headline-small-tracking);
468	line-height: var(--md-sys-typescale-headline-small-line-height);
469	text-transform: var(--md-sys-typescale-headline-small-text-transform);
470	text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
471	}
472	/* Headline Medium */
473	.headline-medium {
474	font-family: var(--md-sys-typescale-headline-medium-font);
475	font-weight: var(--md-sys-typescale-headline-medium-weight);
476	font-size: var(--md-sys-typescale-headline-medium-size);
477	font-style: var(--md-sys-typescale-headline-medium-font-style);
478	letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
479	line-height: var(--md-sys-typescale-headline-medium-line-height);
480	text-transform: var(--md-sys-typescale-headline-medium-text-transform);
481	text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
482	}
483	/* Headline Large */
484	.headline-large {
485	font-family: var(--md-sys-typescale-headline-large-font);
486	font-weight: var(--md-sys-typescale-headline-large-weight);
487	font-size: var(--md-sys-typescale-headline-large-size);
488	font-style: var(--md-sys-typescale-headline-large-font-style);
489	letter-spacing: var(--md-sys-typescale-headline-large-tracking);
490	line-height: var(--md-sys-typescale-headline-large-line-height);
491	text-transform: var(--md-sys-typescale-headline-large-text-transform);
492	text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
493	}
494	/* Display Small */
495	.display-small {
496	font-family: var(--md-sys-typescale-display-small-font);
497	font-weight: var(--md-sys-typescale-display-small-weight);
498	font-size: var(--md-sys-typescale-display-small-size);
499	font-style: var(--md-sys-typescale-display-small-font-style);
500	letter-spacing: var(--md-sys-typescale-display-small-tracking);
501	line-height: var(--md-sys-typescale-display-small-line-height);
502	text-transform: var(--md-sys-typescale-display-small-text-transform);
503	text-decoration: var(--md-sys-typescale-display-small-text-decoration);
504	}
505	/* Display Medium */
506	.display-medium {
507	font-family: var(--md-sys-typescale-display-medium-font);
508	font-weight: var(--md-sys-typescale-display-medium-weight);
509	font-size: var(--md-sys-typescale-display-medium-size);
510	font-style: var(--md-sys-typescale-display-medium-font-style);
511	letter-spacing: var(--md-sys-typescale-display-medium-tracking);
512	line-height: var(--md-sys-typescale-display-medium-line-height);
513	text-transform: var(--md-sys-typescale-display-medium-text-transform);
514	text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
515	}
516	/* Display Large */
517	.display-large {
518	font-family: var(--md-sys-typescale-display-large-font);
519	font-weight: var(--md-sys-typescale-display-large-weight);
520	font-size: var(--md-sys-typescale-display-large-size);
521	font-style: var(--md-sys-typescale-display-large-font-style);
522	letter-spacing: var(--md-sys-typescale-display-large-tracking);
523	line-height: var(--md-sys-typescale-display-large-line-height);
524	text-transform: var(--md-sys-typescale-display-large-text-transform);
525	text-decoration: var(--md-sys-typescale-display-large-text-decoration);
526	}
527

9. Carpeta « material-tokens / css / theme »

Versión para imprimir.

A. material-tokens / css / theme / dark.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	color-scheme: dark;
19	/* Surface tint */
20	--md-sys-color-surface-tint: var(--md-sys-color-primary);
21	/* Surface tint color */
22	--md-sys-color-surface-tint-color: var(--md-sys-color-primary);
23	/* On error container */
24	--md-sys-color-on-error-container: var(--md-ref-palette-error80);
25	/* On error */
26	--md-sys-color-on-error: var(--md-ref-palette-error20);
27	/* Error container */
28	--md-sys-color-error-container: var(--md-ref-palette-error30);
29	/* On tertiary container */
30	--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary90);
31	/* On tertiary */
32	--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary20);
33	/* Tertiary container */
34	--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary30);
35	/* Tertiary */
36	--md-sys-color-tertiary: var(--md-ref-palette-tertiary80);
37	/* Shadow */
38	--md-sys-color-shadow: var(--md-ref-palette-neutral0);
39	/* Error */
40	--md-sys-color-error: var(--md-ref-palette-error80);
41	/* Outline */
42	--md-sys-color-outline: var(--md-ref-palette-neutral-variant60);
43	/* On background */
44	--md-sys-color-on-background: var(--md-ref-palette-neutral90);
45	/* Background */
46	--md-sys-color-background: var(--md-ref-palette-neutral10);
47	/* Inverse on surface */
48	--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral20);
49	/* Inverse surface */
50	--md-sys-color-inverse-surface: var(--md-ref-palette-neutral90);
51	/* On surface variant */
52	--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant80);
53	/* On surface */
54	--md-sys-color-on-surface: var(--md-ref-palette-neutral90);
55	/* Surface Variant */
56	--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant30);
57	/* Surface */
58	--md-sys-color-surface: var(--md-ref-palette-neutral10);
59	/* On secondary container */
60	--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary90);
61	/* On secondary */
62	--md-sys-color-on-secondary: var(--md-ref-palette-secondary20);
63	/* Secondary container */
64	--md-sys-color-secondary-container: var(--md-ref-palette-secondary30);
65	/* Secondary */
66	--md-sys-color-secondary: var(--md-ref-palette-secondary80);
67	/* Inverse primary */
68	--md-sys-color-inverse-primary: var(--md-ref-palette-primary40);
69	/* On primary container */
70	--md-sys-color-on-primary-container: var(--md-ref-palette-primary90);
71	/* On primary */
72	--md-sys-color-on-primary: var(--md-ref-palette-primary20);
73	/* Primary container */
74	--md-sys-color-primary-container: var(--md-ref-palette-primary30);
75	/* Primary */
76	--md-sys-color-primary: var(--md-ref-palette-primary80);
77	}
78

B. material-tokens / css / theme / light.css


1	/*
2	Copyright 2016 Google Inc. All rights reserved.
3
4	Licensed under the Apache License, Version 2.0 (the "License");
5	you may not use this file except in compliance with the License.
6	You may obtain a copy of the License at
7
8	http://www.apache.org/licenses/LICENSE-2.0
9
10	Unless required by applicable law or agreed to in writing, software
11	distributed under the License is distributed on an "AS IS" BASIS,
12	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13	See the License for the specific language governing permissions and
14	limitations under the License.
15	*/
16
17	:root {
18	color-scheme: light;
19	/* Surface tint */
20	--md-sys-color-surface-tint: var(--md-sys-color-primary);
21	/* Surface tint color */
22	--md-sys-color-surface-tint-color: var(--md-sys-color-primary);
23	/* On error container */
24	--md-sys-color-on-error-container: var(--md-ref-palette-error10);
25	/* On error */
26	--md-sys-color-on-error: var(--md-ref-palette-error100);
27	/* Error container */
28	--md-sys-color-error-container: var(--md-ref-palette-error90);
29	/* On tertiary container */
30	--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
31	/* On tertiary */
32	--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
33	/* Tertiary container */
34	--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
35	/* Tertiary */
36	--md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
37	/* Shadow */
38	--md-sys-color-shadow: var(--md-ref-palette-neutral0);
39	/* Error */
40	--md-sys-color-error: var(--md-ref-palette-error40);
41	/* Outline */
42	--md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
43	/* On background */
44	--md-sys-color-on-background: var(--md-ref-palette-neutral10);
45	/* Background */
46	--md-sys-color-background: var(--md-ref-palette-neutral99);
47	/* Inverse on surface */
48	--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
49	/* Inverse surface */
50	--md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
51	/* On surface variant */
52	--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
53	/* On surface */
54	--md-sys-color-on-surface: var(--md-ref-palette-neutral10);
55	/* Surface Variant */
56	--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
57	/* Surface */
58	--md-sys-color-surface: var(--md-ref-palette-neutral99);
59	/* On secondary container */
60	--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
61	/* On secondary */
62	--md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
63	/* Secondary container */
64	--md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
65	/* Secondary */
66	--md-sys-color-secondary: var(--md-ref-palette-secondary40);
67	/* Inverse primary */
68	--md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
69	/* On primary container */
70	--md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
71	/* On primary */
72	--md-sys-color-on-primary: var(--md-ref-palette-primary100);
73	/* Primary container */
74	--md-sys-color-primary-container: var(--md-ref-palette-primary90);
75	/* Primary */
76	--md-sys-color-primary: var(--md-ref-palette-primary40);
77	}
78

34. Carpeta « ungap »

Versión para imprimir.

A. ungap / custom-elements.js

Descarga el archivo.

35. jsconfig.json

Este archivo ayuda a detectar errores en los archivos del proyecto.
Lo utiliza principalmente Visual Studio Code.
No se explica aquí su estructura, pero puede encontrarse la explicación de todo en la documentación del sitio de Visual Studio Code.


1	{
2	"compilerOptions": {
3	"checkJs": true,
4	"strictNullChecks": true,
5	"target": "ES6",
6	"module": "Node16",
7	"moduleResolution": "Node16",
8	"lib": [
9	"ES2017",
10	"WebWorker",
11	"DOM"
12	]
13	}
14	}

36. Resumen

En esta lección se presentó una PWA con Material Design que incluye:

Diseño de formularios para móviles.
Elementos de interfaces móviles básicas para Material Design con HTML, CSS y JavaScript.

1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7
8	<title>PWA Básica</title>
9
10	<!-- Resumen para los motores de búsqueda. -->
11	<meta name="description" content="Ejemplo de PWA">
12
13	<script type="module" src="js/lib/registraServiceWorker.js"></script>
14
15	<meta name="viewport" content="width=device-width">
16
17	<!-- Color de la barra de navegación de Chrome en dispositivos móviles. -->
18	<meta name="theme-color" content="#cbc693">
19
20	<!-- Ícono para la página web, que normalmente se pone en la raíz del sitio.
21	Puede ser diferente para cada página. -->
22	<link rel="icon" sizes="32x32" href="favicon.ico">
23
24	<!-- Configuración de la PWA para Chrome, Edge y Safari.
25	Debe ponerse en todas las páginas. -->
26	<link rel="manifest" href="site.webmanifest">
27
28	<link rel="stylesheet" href="css/estilos.css">
29
30	</head>
31
32	<body>
33
34	<h1>PWA Básica</h1>
35
36	<p>Hola mundo.</p>
37
38	</body>
39
40	</html>

1	{
2	"short_name": "PWA",
3	"name": "Ejemplo de PWA",
4	"id": "/index.html",
5	"start_url": "/index.html",
6	"display": "standalone",
7	"theme_color": "#cbc693",
8	"background_color": "#ffffff",
9	"description": "Ejemplos básico de PWA.",
10	"screenshots": [
11	{
12	"src": "/img/screenshot_horizontal.png",
13	"sizes": "1507x777",
14	"type": "image/png",
15	"form_factor": "wide",
16	"label": "PWA Básica"
17	},
18	{
19	"src": "/img/screenshot_vertical.png",
20	"sizes": "591x980",
21	"type": "image/png",
22	"form_factor": "narrow",
23	"label": "PWA Básica (2)"
24	}
25	],
26	"icons": [
27	{
28	"src": "/img/maskable_icon_x48.png",
29	"sizes": "48x48",
30	"type": "image/png",
31	"purpose": "any"
32	},
33	{
34	"src": "/img/maskable_icon_x72.png",
35	"sizes": "72x72",
36	"type": "image/png",
37	"purpose": "any"
38	},
39	{
40	"src": "/img/maskable_icon_x96.png",
41	"sizes": "96x96",
42	"type": "image/png",
43	"purpose": "any"
44	},
45	{
46	"src": "/img/maskable_icon_x128.png",
47	"sizes": "128x128",
48	"type": "image/png",
49	"purpose": "any"
50	},
51	{
52	"src": "/img/maskable_icon_x192.png",
53	"sizes": "192x192",
54	"type": "image/png",
55	"purpose": "any"
56	},
57	{
58	"src": "/img/maskable_icon_x384.png",
59	"sizes": "384x384",
60	"type": "image/png",
61	"purpose": "any"
62	},
63	{
64	"src": "/img/maskable_icon_x512.png",
65	"sizes": "512x512",
66	"type": "image/png",
67	"purpose": "any"
68	},
69	{
70	"src": "/img/maskable_icon.png",
71	"sizes": "2730x2730",
72	"type": "image/png",
73	"purpose": "any"
74	},
75	{
76	"src": "/img/icono2048.png",
77	"sizes": "2048x2048",
78	"type": "image/png",
79	"purpose": "any"
80	},
81	{
82	"src": "/img/maskable_icon_x48.png",
83	"sizes": "48x48",
84	"type": "image/png",
85	"purpose": "maskable"
86	},
87	{
88	"src": "/img/maskable_icon_x72.png",
89	"sizes": "72x72",
90	"type": "image/png",
91	"purpose": "maskable"
92	},
93	{
94	"src": "/img/maskable_icon_x96.png",
95	"sizes": "96x96",
96	"type": "image/png",
97	"purpose": "maskable"
98	},
99	{
100	"src": "/img/maskable_icon_x128.png",
101	"sizes": "128x128",
102	"type": "image/png",
103	"purpose": "maskable"
104	},
105	{
106	"src": "/img/maskable_icon_x192.png",
107	"sizes": "192x192",
108	"type": "image/png",
109	"purpose": "maskable"
110	},
111	{
112	"src": "/img/maskable_icon_x384.png",
113	"sizes": "384x384",
114	"type": "image/png",
115	"purpose": "maskable"
116	},
117	{
118	"src": "/img/maskable_icon_x512.png",
119	"sizes": "512x512",
120	"type": "image/png",
121	"purpose": "maskable"
122	},
123	{
124	"src": "/img/maskable_icon.png",
125	"sizes": "2730x2730",
126	"type": "image/png",
127	"purpose": "maskable"
128	}
129	]
130	}

1	{
2	"short_name": "Lista PWA",
3	"name": "PWA con Lista",
4	"id": "/index.html",
5	"start_url": "/index.html",
6	"display": "standalone",
7	"theme_color": "#fffbfe",
8	"background_color": "#fffbfe",
9	"display_override": [
10	"window-controls-overlay"
11	],
12	"description": "Ejemplos de una lista con Material Design 3.",
13	"screenshots": [
14	{
15	"src": "/img/screenshot_horizontal.png",
16	"sizes": "699x389",
17	"type": "image/png",
18	"form_factor": "wide",
19	"label": "Lista con Material Design 3."
20	},
21	{
22	"src": "/img/screenshot_vertical.png",
23	"sizes": "502x636",
24	"type": "image/png",
25	"form_factor": "narrow",
26	"label": "Lista con Material Design 3. (2)"
27	}
28	],
29	"icons": [
30	{
31	"purpose": "maskable",
32	"sizes": "2730x2730",
33	"src": "img/maskable_icon.png",
34	"type": "image/png"
35	},
36	{
37	"purpose": "maskable",
38	"sizes": "48x48",
39	"src": "img/maskable_icon_x48.png",
40	"type": "image/png"
41	},
42	{
43	"purpose": "maskable",
44	"sizes": "72x72",
45	"src": "img/maskable_icon_x72.png",
46	"type": "image/png"
47	},
48	{
49	"purpose": "maskable",
50	"sizes": "96x96",
51	"src": "img/maskable_icon_x96.png",
52	"type": "image/png"
53	},
54	{
55	"purpose": "maskable",
56	"sizes": "128x128",
57	"src": "img/maskable_icon_x128.png",
58	"type": "image/png"
59	},
60	{
61	"purpose": "maskable",
62	"sizes": "192x192",
63	"src": "img/maskable_icon_x192.png",
64	"type": "image/png"
65	},
66	{
67	"purpose": "maskable",
68	"sizes": "384x384",
69	"src": "img/maskable_icon_x384.png",
70	"type": "image/png"
71	},
72	{
73	"purpose": "maskable",
74	"sizes": "512x512",
75	"src": "img/maskable_icon_x512.png",
76	"type": "image/png"
77	},
78	{
79	"purpose": "any",
80	"sizes": "2730x2730",
81	"src": "img/maskable_icon.png",
82	"type": "image/png"
83	},
84	{
85	"purpose": "any",
86	"sizes": "48x48",
87	"src": "img/maskable_icon_x48.png",
88	"type": "image/png"
89	},
90	{
91	"purpose": "any",
92	"sizes": "72x72",
93	"src": "img/maskable_icon_x72.png",
94	"type": "image/png"
95	},
96	{
97	"purpose": "any",
98	"sizes": "96x96",
99	"src": "img/maskable_icon_x96.png",
100	"type": "image/png"
101	},
102	{
103	"purpose": "any",
104	"sizes": "128x128",
105	"src": "img/maskable_icon_x128.png",
106	"type": "image/png"
107	},
108	{
109	"purpose": "any",
110	"sizes": "192x192",
111	"src": "img/maskable_icon_x192.png",
112	"type": "image/png"
113	},
114	{
115	"purpose": "any",
116	"sizes": "384x384",
117	"src": "img/maskable_icon_x384.png",
118	"type": "image/png"
119	},
120	{
121	"purpose": "any",
122	"sizes": "512x512",
123	"src": "img/maskable_icon_x512.png",
124	"type": "image/png"
125	},
126	{
127	"purpose": "any",
128	"sizes": "2048x2048",
129	"src": "img/icono2048.png",
130	"type": "image/png"
131	}
132	]
133	}

1	{
2	"short_name": "Formulario PWA",
3	"name": "PWA con Formulario",
4	"id": "/index.html",
5	"start_url": "/index.html",
6	"display": "standalone",
7	"theme_color": "#fffbfe",
8	"background_color": "#fffbfe",
9	"display_override": [
10	"window-controls-overlay"
11	],
12	"description": "PWA con componentes de Material Design.",
13	"screenshots": [
14	{
15	"src": "/img/screenshot_horizontal.png",
16	"sizes": "760x384",
17	"type": "image/png",
18	"form_factor": "wide",
19	"label": "PWA con Material Design"
20	},
21	{
22	"src": "/img/screenshot_vertical.png",
23	"sizes": "557x759",
24	"type": "image/png",
25	"form_factor": "narrow",
26	"label": "PWA con Material Design (2)"
27	}
28	],
29	"icons": [
30	{
31	"purpose": "maskable",
32	"sizes": "2730x2730",
33	"src": "img/maskable_icon.png",
34	"type": "image/png"
35	},
36	{
37	"purpose": "maskable",
38	"sizes": "48x48",
39	"src": "img/maskable_icon_x48.png",
40	"type": "image/png"
41	},
42	{
43	"purpose": "maskable",
44	"sizes": "72x72",
45	"src": "img/maskable_icon_x72.png",
46	"type": "image/png"
47	},
48	{
49	"purpose": "maskable",
50	"sizes": "96x96",
51	"src": "img/maskable_icon_x96.png",
52	"type": "image/png"
53	},
54	{
55	"purpose": "maskable",
56	"sizes": "128x128",
57	"src": "img/maskable_icon_x128.png",
58	"type": "image/png"
59	},
60	{
61	"purpose": "maskable",
62	"sizes": "192x192",
63	"src": "img/maskable_icon_x192.png",
64	"type": "image/png"
65	},
66	{
67	"purpose": "maskable",
68	"sizes": "384x384",
69	"src": "img/maskable_icon_x384.png",
70	"type": "image/png"
71	},
72	{
73	"purpose": "maskable",
74	"sizes": "512x512",
75	"src": "img/maskable_icon_x512.png",
76	"type": "image/png"
77	},
78	{
79	"purpose": "any",
80	"sizes": "2730x2730",
81	"src": "img/maskable_icon.png",
82	"type": "image/png"
83	},
84	{
85	"purpose": "any",
86	"sizes": "48x48",
87	"src": "img/maskable_icon_x48.png",
88	"type": "image/png"
89	},
90	{
91	"purpose": "any",
92	"sizes": "72x72",
93	"src": "img/maskable_icon_x72.png",
94	"type": "image/png"
95	},
96	{
97	"purpose": "any",
98	"sizes": "96x96",
99	"src": "img/maskable_icon_x96.png",
100	"type": "image/png"
101	},
102	{
103	"purpose": "any",
104	"sizes": "128x128",
105	"src": "img/maskable_icon_x128.png",
106	"type": "image/png"
107	},
108	{
109	"purpose": "any",
110	"sizes": "192x192",
111	"src": "img/maskable_icon_x192.png",
112	"type": "image/png"
113	},
114	{
115	"purpose": "any",
116	"sizes": "384x384",
117	"src": "img/maskable_icon_x384.png",
118	"type": "image/png"
119	},
120	{
121	"purpose": "any",
122	"sizes": "512x512",
123	"src": "img/maskable_icon_x512.png",
124	"type": "image/png"
125	},
126	{
127	"purpose": "any",
128	"sizes": "2048x2048",
129	"src": "img/icono2048.png",
130	"type": "image/png"
131	}
132	]
133	}

1	import { muestraError } from "./muestraError.js"
2
3	/**
4	* Intercepta Response.prototype.json para capturar errores de parseo
5	* y asegurar que se reporten correctamente en navegadores Chromium.
6	*/
7	{
8	const originalJson = Response.prototype.json
9
10	Response.prototype.json = function () {
11	// Llamamos al método original usando el contexto (this) de la respuesta
12	return originalJson.apply(this, arguments)
13	.catch((/** @type {any} */ error) => {
14	// Corrige un error de Chrome que evita el manejo correcto de errores.
15	throw new Error(error)
16	})
17	}
18	}
19
20	window.onerror = function (
21	/** @type {string} */ _message,
22	/** @type {string} */ _url,
23	/** @type {number} */ _line,
24	/** @type {number} */ _column,
25	/** @type {Error} */ errorObject
26	) {
27	muestraError(errorObject)
28	return true
29	}
30
31	window.addEventListener('unhandledrejection', event => {
32	muestraError(event.reason)
33	event.preventDefault()
34	})
35

1	import { ProblemDetailsError } from "./ProblemDetailsError.js"
2
3	/**
4	* Muestra los datos de una Error en la consola y en un cuadro de alerta.
5	* @param { ProblemDetailsError \| Error \| null } error descripción del error.
6	*/
7	export function muestraError(error) {
8
9	if (error === null) {
10
11	console.error("Error")
12	alert("Error")
13
14	} else if (error instanceof ProblemDetailsError) {
15
16	const problemDetails = error.problemDetails
17
18	let mensaje =
19	typeof problemDetails["title"] === "string" ? problemDetails["title"] : ""
20	if (typeof problemDetails["detail"] === "string") {
21	if (mensaje !== "") {
22	mensaje += "\n\n"
23	}
24	mensaje += problemDetails["detail"]
25	}
26	if (mensaje === "") {
27	mensaje = "Error"
28	}
29	console.error(error, problemDetails)
30	alert(mensaje)
31
32	} else {
33
34	console.error(error)
35	alert(error.message)
36
37	}
38
39	}

1	export class ProblemDetailsError extends Error {
2
3	/**
4	* Detalle de los errores devueltos por un servicio.
5	* Crea una instancia de ProblemDetailsError.
6	* @param {object} problemDetails Objeto con la descripcipon del error.
7	*/
8	constructor(problemDetails) {
9
10	super(typeof problemDetails["detail"] === "string"
11	? problemDetails["detail"]
12	: (typeof problemDetails["title"] === "string"
13	? problemDetails["title"]
14	: "Error"))
15
16	this.problemDetails = problemDetails
17
18	}
19
20	}

1	<!DOCTYPE html>
2	<html>
3
4	<head>
5
6	<meta charset="utf-8">
7	<meta name="viewport"
8	content="width=device-width">
9
10	<title>Cámara</title>
11
12	<style>
13	html {
14	color-scheme: light dark;
15	}
16	</style>
17
18	</head>
19
20	<body>
21
22	<h1>Cámara</h1>
23
24	<p>
25	Para grabar o capturar imagen,
26	cliquea
27	<strong>Inicia</strong>.
28	</p>
29
30	<p>
31	Para grabar por 5 segundos
32	cliquea
33	<strong>Graba</strong>
34	y cliquea
35	<strong>Para</strong> para
36	detener.
37	</p>
38
39	<p>
40	Para capturar una imagen de la
41	cámara, cliquea
42	<strong>Captura</strong>.
43	</p>
44
45	<menu style="display: flex;
46	flex-wrap: wrap;
47	list-style: none;">
48	<li>
49	<button type="button"
50	onclick="inicia()">
51	Inicia
52	</button>
53	</li>
54	<li>
55	<button type="button"
56	onclick="graba()">
57	Graba
58	</button>
59	</li>
60	<li>
61	<button type="button"
62	onclick="para();">
63	Para
64	</button>
65	</li>
66	<li>
67	<button type="button"
68	onclick="captura()">
69	Captura
70	</button>
71	</li>
72	</menu>
73
74	<section
75	style="display: inline-block;
76	vertical-align: top;">
77
78	<h1>Preview</h1>
79
80	<video id="preview" width="160"
81	height="120" autoplay
82	muted></video>
83
84	</section>
85
86	<section
87	style="display: inline-block;
88	vertical-align: top;">
89
90	<h1>Recording</h1>
91
92	<video id="recording" width="160"
93	height="120" controls></video>
94
95	<p>
96	<a id="descarga">Descarga</a>
97	</p>
98
99	<div id="mensajes"></div>
100
101	</section>
102
103	<section
104	style="display: inline-block;
105	vertical-align: top;">
106
107	<h1>Imagen</h1>
108
109	<canvas id="canvas" width="160"
110	height="120"></canvas>
111
112	<p>
113	<a id="descargaImagen">
114	Descarga</a>
115	</p>
116
117	</section>
118
119	<script>
120
121	let stream = null
122
123	let TIEMPO_DE_GRABACION = 5000
124
125	var context =
126	canvas.getContext('2d')
127
128	async function inicia() {
129	try {
130	stream = await navigator
131	.mediaDevices.getUserMedia({
132	video: true,
133	audio: true
134	})
135	preview.srcObject = stream
136	descarga.href = stream
137	preview.captureStream =
138	preview.captureStream
139	\|\| preview.mozCaptureStream
140	await new Promise(
141	resolve =>
142	preview.onplaying = resolve)
143	} catch (e) {
144	log(e.message)
145	}
146	}
147
148	async function graba() {
149	try {
150	const recordedChunks =
151	await grabaClip(stream,
152	TIEMPO_DE_GRABACION)
153	let recordedBlob = new Blob(
154	recordedChunks,
155	{ type: "video/webm" })
156	recording.src =
157	URL.createObjectURL(
158	recordedBlob)
159	descarga.href = recording.src
160	descarga.download =
161	"RecordedVideo.webm"
162
163	log("Exitosamente grabados "
164	+ recordedBlob.size
165	+ " bytes de "
166	+ recordedBlob.type
167	+ " media.")
168	} catch (e) {
169	log(e.message)
170	}
171	}
172
173	function para() {
174	detiene(preview.srcObject)
175	}
176
177	function captura() {
178	context.drawImage(preview,
179	0, 0, 160, 120)
180	descargaImagen.href =
181	canvas.toDataURL('image/jpeg')
182	descargaImagen.download =
183	"imagen.jpg"
184	}
185
186	function grabaClip(stream,
187	milisegundos) {
188	let recorder =
189	new MediaRecorder(stream)
190	let data = []
191	recorder.ondataavailable =
192	event => data.push(event.data)
193	recorder.start()
194	log(recorder.state
195	+ " durante "
196	+ (milisegundos / 1000)
197	+ " segundos…")
198	let detenido = new Promise(
199	(resolve, reject) => {
200	recorder.onstop = resolve
201	recorder.onerror =
202	event => reject(event.name)
203	})
204	let grabado =
205	espera(milisegundos)
206	.then(() => recorder.state
207	=== "recording"
208	&& recorder.stop()
209	)
210
211	return Promise.all([
212	detenido,
213	grabado
214	])
215	.then(() => data)
216	}
217
218	function detiene(stream) {
219	stream.getTracks().forEach(
220	track => track.stop())
221	}
222
223	function log(msg) {
224	mensajes.innerHTML +=
225	msg + "<br>"
226	}
227
228	function espera(milisegundos) {
229	return new Promise(
230	resolve => setTimeout(
231	resolve, milisegundos))
232	}
233
234	</script>
235
236	</body>
237
238	</html>

1	/**
2	* @param {{
3	* errorCode: number,
4	* errorMessage: string
5	* }} responseObject
6	*/
7	export function conexionMqttPerdida(responseObject) {
8	if (responseObject.errorCode !== 0) {
9	const mensaje = "Conexión MQTT terminada " + responseObject.errorMessage
10	console.error(mensaje)
11	alert(mensaje)
12	}
13	}

1	/**
2	* Añade caracteres al azar a una raíz, para obtener un clientId único.
3	* @param {string} raiz
4	*/
5	export function creaIdCliente(raiz) {
6	const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
7	for (var i = 0; i < 15; i++) {
8	raiz += chars.charAt(Math.floor(Math.random() * chars.length))
9	}
10	return raiz
11	}

1	// @ts-nocheck
2	/**
3	* Envá un valor al servidor de MQTT y es reenviado a todos los dispositivos
4	* suscritos al tópico indicado
5	* @param {Paho.MQTT.Client} cliente
6	* @param {string} mensaje
7	* @param {string} topico
8	*/
9	export function enviaMensajeMqtt(cliente, mensaje, topico) {
10	const mensajeMqtt = new Paho.MQTT.Message(mensaje)
11	mensajeMqtt.destinationName = topico
12	cliente.send(mensajeMqtt)
13	}

1	/**
2	* @param {{errorMessage: string}} res
3	*/
4	export function falloEnLaConexionMqtt(res) {
5	const mensaje = "Fallo en conexión MQTT: " + res.errorMessage
6	console.error(mensaje)
7	alert(mensaje)
8	}

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2	<html xmlns="http://www.w3.org/1999/xhtml"><head>
3	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
4	<title>About</title>
5	</head>
6	<body lang="EN-US">
7	<h2>About This Content</h2>
8
9	<p><em>December 9, 2013</em></p>
10	<h3>License</h3>
11
12	<p>The Eclipse Foundation makes available all content in this plug-in ("Content"). Unless otherwise
13	indicated below, the Content is provided to you under the terms and conditions of the
14	Eclipse Public License Version 1.0 ("EPL") and Eclipse Distribution License Version 1.0 ("EDL").
15	A copy of the EPL is available at
16	<a href="http://www.eclipse.org/legal/epl-v10.html">http://www.eclipse.org/legal/epl-v10.html</a>
17	and a copy of the EDL is available at
18	<a href="http://www.eclipse.org/org/documents/edl-v10.php">http://www.eclipse.org/org/documents/edl-v10.php</a>.
19	For purposes of the EPL, "Program" will mean the Content.</p>
20
21	<p>If you did not receive this Content directly from the Eclipse Foundation, the Content is
22	being redistributed by another party ("Redistributor") and different terms and conditions may
23	apply to your use of any object code in the Content. Check the Redistributor's license that was
24	provided with the Content. If no such license exists, contact the Redistributor. Unless otherwise
25	indicated below, the terms and conditions of the EPL still apply to any source code in the Content
26	and such source code may be obtained at <a href="http://www.eclipse.org/">http://www.eclipse.org</a>.</p>
27
28	</body></html>
29

1	# Contributing to Paho
2
3	Thanks for your interest in this project!
4
5	You can contribute bugfixes and new features by sending pull requests through GitHub.
6
7	## Legal
8
9	In order for your contribution to be accepted, it must comply with the Eclipse Foundation IP policy.
10
11	Please read the [Eclipse Foundation policy on accepting contributions via Git](http://wiki.eclipse.org/Development_Resources/Contributing_via_Git).
12
13	1. Sign the [Eclipse CLA](http://www.eclipse.org/legal/CLA.php)
14	1. Register for an Eclipse Foundation User ID. You can register [here](https://dev.eclipse.org/site_login/createaccount.php).
15	2. Log into the [Projects Portal](https://projects.eclipse.org/), and click on the '[Eclipse CLA](https://projects.eclipse.org/user/sign/cla)' link.
16	2. Go to your [account settings](https://dev.eclipse.org/site_login/myaccount.php#open_tab_accountsettings) and add your GitHub username to your account.
17	3. Make sure that you _sign-off_ your Git commits in the following format:
18	``` Signed-off-by: John Smith ``` This is usually at the bottom of the commit message. You can automate this by adding the '-s' flag when you make the commits. e.g. ```git commit -s -m "Adding a cool feature"```
19	4. Ensure that the email address that you make your commits with is the same one you used to sign up to the Eclipse Foundation website with.
20
21	## Contributing a change
22
23	## Contributing a change
24
25	1. [Fork the repository on GitHub](https://github.com/eclipse/paho.mqtt.javascript/fork)
26	2. Clone the forked repository onto your computer: ``` git clone https://github.com//paho.mqtt.javascript.git ```
27	3. Create a new branch from the latest ```develop``` branch with ```git checkout -b YOUR_BRANCH_NAME origin/develop```
28	4. Make your changes
29	5. If developing a new feature, make sure to include JUnit tests.
30	6. Ensure that all new and existing tests pass.
31	7. Commit the changes into the branch: ``` git commit -s ``` Make sure that your commit message is meaningful and describes your changes correctly.
32	8. If you have a lot of commits for the change, squash them into a single / few commits.
33	9. Push the changes in your branch to your forked repository.
34	10. Finally, go to [https://github.com/eclipse/paho.mqtt.javascript](https://github.com/eclipse/paho.mqtt.javascript) and create a pull request from your "YOUR_BRANCH_NAME" branch to the ```develop``` one to request review and merge of the commits in your pushed branch.
35
36
37	What happens next depends on the content of the patch. If it is 100% authored
38	by the contributor and is less than 1000 lines (and meets the needs of the
39	project), then it can be pulled into the main repository. If not, more steps
40	are required. These are detailed in the
41	[legal process poster](http://www.eclipse.org/legal/EclipseLegalProcessPoster.pdf).
42
43
44
45	## Developer resources:
46
47
48	Information regarding source code management, builds, coding standards, and more.
49
50	- [https://projects.eclipse.org/projects/iot.paho/developer](https://projects.eclipse.org/projects/iot.paho/developer)
51
52	Contact:
53	--------
54
55	Contact the project developers via the project's development
56	[mailing list](https://dev.eclipse.org/mailman/listinfo/paho-dev).
57
58	Search for bugs:
59	----------------
60
61	This project uses GitHub Issues here: [github.com/eclipse/paho.mqtt.javascript/issues](https://github.com/eclipse/paho.mqtt.javascript/issues) to track ongoing development and issues.
62
63	Create a new bug:
64	-----------------
65
66	Be sure to search for existing bugs before you create another one. Remember that contributions are always welcome!
67
68	- [Create new Paho bug](https://github.com/eclipse/paho.mqtt.javascript/issues/new)
69

1
2	Eclipse Distribution License - v 1.0
3
4	Copyright (c) 2007, Eclipse Foundation, Inc. and its licensors.
5
6	All rights reserved.
7
8	Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
9
10	Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
11	Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
12	Neither the name of the Eclipse Foundation, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
13
14	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
15
16

1	Eclipse Public License - v 1.0
2
3	THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.
4
5	1. DEFINITIONS
6
7	"Contribution" means:
8
9	a) in the case of the initial Contributor, the initial code and documentation distributed under this Agreement, and
10	b) in the case of each subsequent Contributor:
11	i) changes to the Program, and
12	ii) additions to the Program;
13	where such changes and/or additions to the Program originate from and are distributed by that particular Contributor. A Contribution 'originates' from a Contributor if it was added to the Program by such Contributor itself or anyone acting on such Contributor's behalf. Contributions do not include additions to the Program which: (i) are separate modules of software distributed in conjunction with the Program under their own license agreement, and (ii) are not derivative works of the Program.
14	"Contributor" means any person or entity that distributes the Program.
15
16	"Licensed Patents" mean patent claims licensable by a Contributor which are necessarily infringed by the use or sale of its Contribution alone or when combined with the Program.
17
18	"Program" means the Contributions distributed in accordance with this Agreement.
19
20	"Recipient" means anyone who receives the Program under this Agreement, including all Contributors.
21
22	2. GRANT OF RIGHTS
23
24	a) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free copyright license to reproduce, prepare derivative works of, publicly display, publicly perform, distribute and sublicense the Contribution of such Contributor, if any, and such derivative works, in source code and object code form.
25	b) Subject to the terms of this Agreement, each Contributor hereby grants Recipient a non-exclusive, worldwide, royalty-free patent license under Licensed Patents to make, use, sell, offer to sell, import and otherwise transfer the Contribution of such Contributor, if any, in source code and object code form. This patent license shall apply to the combination of the Contribution and the Program if, at the time the Contribution is added by the Contributor, such addition of the Contribution causes such combination to be covered by the Licensed Patents. The patent license shall not apply to any other combinations which include the Contribution. No hardware per se is licensed hereunder.
26	c) Recipient understands that although each Contributor grants the licenses to its Contributions set forth herein, no assurances are provided by any Contributor that the Program does not infringe the patent or other intellectual property rights of any other entity. Each Contributor disclaims any liability to Recipient for claims brought by any other entity based on infringement of intellectual property rights or otherwise. As a condition to exercising the rights and licenses granted hereunder, each Recipient hereby assumes sole responsibility to secure any other intellectual property rights needed, if any. For example, if a third party patent license is required to allow Recipient to distribute the Program, it is Recipient's responsibility to acquire that license before distributing the Program.
27	d) Each Contributor represents that to its knowledge it has sufficient copyright rights in its Contribution, if any, to grant the copyright license set forth in this Agreement.
28	3. REQUIREMENTS
29
30	A Contributor may choose to distribute the Program in object code form under its own license agreement, provided that:
31
32	a) it complies with the terms and conditions of this Agreement; and
33	b) its license agreement:
34	i) effectively disclaims on behalf of all Contributors all warranties and conditions, express and implied, including warranties or conditions of title and non-infringement, and implied warranties or conditions of merchantability and fitness for a particular purpose;
35	ii) effectively excludes on behalf of all Contributors all liability for damages, including direct, indirect, special, incidental and consequential damages, such as lost profits;
36	iii) states that any provisions which differ from this Agreement are offered by that Contributor alone and not by any other party; and
37	iv) states that source code for the Program is available from such Contributor, and informs licensees how to obtain it in a reasonable manner on or through a medium customarily used for software exchange.
38	When the Program is made available in source code form:
39
40	a) it must be made available under this Agreement; and
41	b) a copy of this Agreement must be included with each copy of the Program.
42	Contributors may not remove or alter any copyright notices contained within the Program.
43
44	Each Contributor must identify itself as the originator of its Contribution, if any, in a manner that reasonably allows subsequent Recipients to identify the originator of the Contribution.
45
46	4. COMMERCIAL DISTRIBUTION
47
48	Commercial distributors of software may accept certain responsibilities with respect to end users, business partners and the like. While this license is intended to facilitate the commercial use of the Program, the Contributor who includes the Program in a commercial product offering should do so in a manner which does not create potential liability for other Contributors. Therefore, if a Contributor includes the Program in a commercial product offering, such Contributor ("Commercial Contributor") hereby agrees to defend and indemnify every other Contributor ("Indemnified Contributor") against any losses, damages and costs (collectively "Losses") arising from claims, lawsuits and other legal actions brought by a third party against the Indemnified Contributor to the extent caused by the acts or omissions of such Commercial Contributor in connection with its distribution of the Program in a commercial product offering. The obligations in this section do not apply to any claims or Losses relating to any actual or alleged intellectual property infringement. In order to qualify, an Indemnified Contributor must: a) promptly notify the Commercial Contributor in writing of such claim, and b) allow the Commercial Contributor to control, and cooperate with the Commercial Contributor in, the defense and any related settlement negotiations. The Indemnified Contributor may participate in any such claim at its own expense.
49
50	For example, a Contributor might include the Program in a commercial product offering, Product X. That Contributor is then a Commercial Contributor. If that Commercial Contributor then makes performance claims, or offers warranties related to Product X, those performance claims and warranties are such Commercial Contributor's responsibility alone. Under this section, the Commercial Contributor would have to defend claims against the other Contributors related to those performance claims and warranties, and if a court requires any other Contributor to pay any damages as a result, the Commercial Contributor must pay those damages.
51
52	5. NO WARRANTY
53
54	EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each Recipient is solely responsible for determining the appropriateness of using and distributing the Program and assumes all risks associated with its exercise of rights under this Agreement , including but not limited to the risks and costs of program errors, compliance with applicable laws, damage to or loss of data, programs or equipment, and unavailability or interruption of operations.
55
56	6. DISCLAIMER OF LIABILITY
57
58	EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
59
60	7. GENERAL
61
62	If any provision of this Agreement is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this Agreement, and without further action by the parties hereto, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
63
64	If Recipient institutes patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Program itself (excluding combinations of the Program with other software or hardware) infringes such Recipient's patent(s), then such Recipient's rights granted under Section 2(b) shall terminate as of the date such litigation is filed.
65
66	All Recipient's rights under this Agreement shall terminate if it fails to comply with any of the material terms or conditions of this Agreement and does not cure such failure in a reasonable period of time after becoming aware of such noncompliance. If all Recipient's rights under this Agreement terminate, Recipient agrees to cease use and distribution of the Program as soon as reasonably practicable. However, Recipient's obligations under this Agreement and any licenses granted by Recipient relating to the Program shall continue and survive.
67
68	Everyone is permitted to copy and distribute copies of this Agreement, but in order to avoid inconsistency the Agreement is copyrighted and may only be modified in the following manner. The Agreement Steward reserves the right to publish new versions (including revisions) of this Agreement from time to time. No one other than the Agreement Steward has the right to modify this Agreement. The Eclipse Foundation is the initial Agreement Steward. The Eclipse Foundation may assign the responsibility to serve as the Agreement Steward to a suitable separate entity. Each new version of the Agreement will be given a distinguishing version number. The Program (including Contributions) may always be distributed subject to the version of the Agreement under which it was received. In addition, after a new version of the Agreement is published, Contributor may elect to distribute the Program (including its Contributions) under the new version. Except as expressly stated in Sections 2(a) and 2(b) above, Recipient receives no rights or licenses to the intellectual property of any Contributor under this Agreement, whether expressly, by implication, estoppel or otherwise. All rights in the Program not expressly granted under this Agreement are reserved.
69
70	This Agreement is governed by the laws of the State of New York and the intellectual property laws of the United States of America. No party to this Agreement will bring a legal action under this Agreement more than one year after the cause of action arose. Each party waives its rights to a jury trial in any resulting litigation.
71

1	/* Este programa es un derivado de
2	ESP8266 Blink by Simon Peter */
3
4	/** Función que se invoca una sola
5	vez al inicio del programa. */
6	void setup() {
7	/* Todas las placas compatibles
8	con Arduino incluyen un led
9	de prueba ligado a un pin
10	cuyo número está definido por
11	la constante LED_BUILTIN.
12	Inicializa el pin para
13	LED_BUILTIN como salida. */
14	pinMode(LED_BUILTIN, OUTPUT);
15	}
16
17	/* Función que se invoca
18	repetidamente mientras el
19	programa esté activo. */
20	void loop() {
21	/* Enciende el LED_BUILTIN (HIGH
22	es el nivel de voltaje). */
23	digitalWrite(LED_BUILTIN, HIGH);
24	delay(1000); // Espera 1 segundo
25	/* Apaga el LED_BUILTIN haciendo
26	que el nivel de voltaje sea
27	LOW. */
28	digitalWrite(LED_BUILTIN, LOW);
29	delay(1000);
30	}
31

1	/* Este es un derivado de Button
2	por DojoDave y Tom Igoe */
3
4	/* Pin para el botón. */
5	const int BOTON = 0;
6
7	int estadoDelBoton = 0;
8
9	void setup() {
10	/* Inicializa el pin para
11	LED_BUILTIN como salida. */
12	pinMode(LED_BUILTIN, OUTPUT);
13	/* Initializa el pin para
14	BOTON como entrada. */
15	pinMode(BOTON, INPUT);
16	}
17
18	void loop() {
19	estadoDelBoton =
20	digitalRead(BOTON);
21	/* Checa si el botón está
22	presionado. Esto es, si
23	estadoDelBotón es LOW. */
24	if (estadoDelBoton == LOW) {
25	// Enciende el LED_BUILTIN.
26	digitalWrite(LED_BUILTIN, HIGH);
27	} else {
28	// Apaga el LED_BUILTIN.
29	digitalWrite(LED_BUILTIN, LOW);
30	}
31	}
32

1	#include "EspMQTTClient.h"
2
3	const char *const SSID =
4	"Galaxy A723C85";
5	const char *const PASS =
6	"bdoi1764";
7	const char *const URL =
8	"test.mosquitto.org";
9	const uint16_t PUERTO =
10	1883;
11	const char *const CLIENT_ID =
12	"gilpgdmIoT-esp32-1";
13	const char *const TOPICO_FOCO =
14	"gilpgdm/IoT/foco";
15
16	EspMQTTClient cliente(
17	SSID,
18	PASS,
19	URL,
20	0, // Usuario opcional
21	0, // Contraseña opcional
22	CLIENT_ID,
23	PUERTO);
24	const int BOTON = 0;
25	bool presionado = false;
26	String valor = "0";
27
28	void recibeMensaje(
29	const String &payload)
30	{
31	valor = payload;
32	digitalWrite(LED_BUILTIN,
33	valor == "1"
34	? HIGH
35	: LOW);
36	}
37
38	void enviaMensajeMqtt(
39	String valorAEnviar,
40	String topico)
41	{
42	cliente.publish(topico,
43	valorAEnviar);
44	}
45
46	void onConnectionEstablished()
47	{
48	cliente.subscribe(
49	TOPICO_FOCO, recibeMensaje);
50	enviaMensajeMqtt(
51	valor, TOPICO_FOCO);
52	}
53
54	void setup()
55	{
56	Serial.begin(115200);
57	pinMode(BOTON, INPUT);
58	pinMode(LED_BUILTIN, OUTPUT);
59	// Funcionalidades opcionaes
60	// Mensajes para depurar conexión
61	cliente.enableDebuggingMessages();
62	cliente.enableHTTPWebUpdater();
63	// Actualizaciones
64	// OTA (Over The Air)
65	cliente.enableOTA();
66	// Mensaje de última voluntad.
67	cliente.enableLastWillMessage(
68	"gilpgdm/IoT/lastwill",
69	"Adios");
70	}
71
72	void loop()
73	{
74	cliente.loop();
75	if (cliente.isConnected())
76	{
77	bool actual =
78	digitalRead(BOTON);
79	if (!presionado &&
80	actual == LOW)
81	{
82	enviaMensajeMqtt(
83	valor == "1" ? "0" : "1",
84	TOPICO_FOCO);
85	}
86	presionado = (actual == LOW);
87	}
88	}
89

1	const URL_SERVIDOR = "https://notipush.rf.gd"
2
3	if (self instanceof ServiceWorkerGlobalScope) {
4
5	// El siguiente código se activa cuando llega una notificación push.
6	self.addEventListener("push", (/** @type {PushEvent} */ event) => {
7	const notificacion = event.data
8	/* Si el navegador tiene permitido mostrar notificaciones push,
9	* nuestra la que se ha recibido. */
10	if (notificacion !== null && self.Notification.permission === 'granted') {
11	event.waitUntil(muestraNotificacion(notificacion))
12	}
13	})
14
15	self.addEventListener("notificationclick",
16	(/** @type {NotificationEvent} */ event) => {
17	event.notification.close()
18	event.waitUntil(muestraVentana())
19	})
20	}
21
22	/**
23	* @param {PushMessageData} notificacion
24	*/
25	async function muestraNotificacion(notificacion) {
26	if (self instanceof ServiceWorkerGlobalScope) {
27	const mensaje = notificacion.text()
28	await self.registration.showNotification(mensaje)
29	}
30	}
31
32	async function muestraVentana() {
33	if (self instanceof ServiceWorkerGlobalScope) {
34	const clientes = await self.clients.matchAll({ type: "window" })
35	for (const cliente of clientes) {
36	if (cliente.url.startsWith(URL_SERVIDOR)) {
37	return cliente.focus()
38	}
39	}
40	return self.clients.openWindow("/")
41	}
42	}

Desarrollo multiplataforma

1. Conocimientos requeridos

2. Instrucciones de navegación

3. Software a instalar

Para la parte web

Para ESP32 (Solo IOT)

4. Introducción a las PWA

A. Introduccion

B. PWA

C. Requerimientos de instalación y uso

D. Navegadores compatibles

E. Herramientas de desarrollo

F. Resumen

5. PWA básica

A. Introduccion

B. Hazlo funcionar (con videos)

C. Hazlo funcionar (texto)

D. Archivos

E. index.html

F. Carpeta « css »

A. css / estilos.css

G. Carpeta « js »

A. Carpeta « js / lib »

1. js / lib / registraServiceWorker.js

H. site.webmanifest

Explicación de las propiedades

I. instruccionesListadoSw.txt

J. archivos.txt

K. sw.js

L. favicon.ico

M. Carpeta « img »

A. img / icono2048.png

B. img / maskable_icon.png

C. img / maskable_icon_x128.png

D. img / maskable_icon_x192.png

E. img / maskable_icon_x384.png

F. img / maskable_icon_x48.png

G. img / maskable_icon_x512.png

H. img / maskable_icon_x72.png

I. img / maskable_icon_x96.png

J. img / screenshot_horizontal.png

K. img / screenshot_vertical.png

N. .htaccess

O. jsconfig.json

P. Resumen

6. PWA con listas y Material Design 3 Expressive

A. Introduccion

B. Referencias

C. Hazlo funcionar (con videos)

D. Hazlo funcionar (texto)

E. Archivos

F. index.html

G. ayuda.html

H. site.webmanifest

Explicación de las propiedades

I. sw.js

J. Carpeta « css »

A. css / baseline.css

B. css / colors.css

C. css / elevation.css

D. css / estilos.css

E. css / material-symbols-outlined.css

F. css / md-headline.css

G. css / md-list.css

H. css / md-tab.css

I. css / motion.css

J. css / palette.css

K. css / roboto.css

L. css / shape.css

M. css / state.css

N. css / transicion_pestanas.css

O. css / typography.css

P. Carpeta « css / theme »

1. css / theme / dark.css

2. css / theme / light.css

K. Carpeta « fonts »

A. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints

B. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf

C. fonts / MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2

D. fonts / roboto-v32-latin-regular.woff2

1	<?php
2
3	class Bd
4	{
5
6	private static ?PDO $pdo = null;
7
8	static function pdo(): PDO
9	{
10	if (self::$pdo === null) {
11
12	self::$pdo = new PDO(
13	// cadena de conexión
14	"sqlite:" . __DIR__ . "/notipush.db",
15	// usuario
16	null,
17	// contraseña
18	null,
19	// Opciones: pdos no persistentes y lanza excepciones.
20	[PDO::ATTR_PERSISTENT => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
21	);
22
23	self::$pdo->exec(
24	'CREATE TABLE IF NOT EXISTS SUSCRIPCION (
25	SUS_ENDPOINT TEXT NOT NULL,
26	SUS_PUB_KEY TEXT NOT NULL,
27	SUS_AUT_TOK TEXT NOT NULL,
28	SUS_CONT_ENCOD TEXT NOT NULL,
29	CONSTRAINT SUS_PK
30	PRIMARY KEY(SUS_ENDPOINT),
31	CONSTRAINT SUS_ENDPNT_NV
32	CHECK(LENGTH(SUS_ENDPOINT) > 0)
33	)'
34	);
35	}
36
37	return self::$pdo;
38	}
39	}
40

1	<?php
2
3	require_once __DIR__ . "/lib/manejaErrores.php";
4	require_once __DIR__ . "/../vendor/autoload.php";
5	require_once __DIR__ . "/lib/devuelveJson.php";
6	require_once __DIR__ . "/Bd.php";
7	require_once __DIR__ . "/Suscripcion.php";
8	require_once __DIR__ . "/suscripcionElimina.php";
9
10	use Minishlink\WebPush\WebPush;
11
12	const AUTH = [
13	"VAPID" => [
14	"subject" => "https://notipush.rf.gd/",
15	"publicKey" => "BMBlr6YznhYMX3NgcWIDRxZXs0sh7tCv7_YCsWcww0ZCv9WGg-tRCXfMEHTiBPCksSqeve1twlbmVAZFv7GSuj0",
16	"privateKey" => "vplfkITvu0cwHqzK9Kj-DYStbCH_9AhGx9LqMyaeI6w"
17	]
18	];
19
20	$webPush = new WebPush(AUTH);
21	$mensaje = "Hola! 👋";
22
23	// Envia el mensaje a todas las suscripciones.
24
25	$bd = Bd::pdo();
26	$stmt = $bd->query("SELECT * FROM SUSCRIPCION");
27	$suscripciones =
28	$stmt->fetchAll(PDO::FETCH_CLASS \| PDO::FETCH_PROPS_LATE, Suscripcion::class);
29
30	foreach ($suscripciones as $suscripcion) {
31	$webPush->queueNotification($suscripcion, $mensaje);
32	}
33	$reportes = $webPush->flush();
34
35	// Genera el reporte de envio a cada suscripcion.
36	$reporteDeEnvios = "";
37	foreach ($reportes as $reporte) {
38	$endpoint = $reporte->getRequest()->getUri();
39	$htmlEndpoint = htmlentities($endpoint);
40	if ($reporte->isSuccess()) {
41	// Reporte de éxito.
42	$reporteDeEnvios .= "<dt>$htmlEndpoint</dt><dd>Éxito</dd>";
43	} else {
44	if ($reporte->isSubscriptionExpired()) {
45	suscripcionElimina($bd, $endpoint);
46	}
47	// Reporte de fallo.
48	$explicacion = htmlentities($reporte->getReason());
49	$reporteDeEnvios .= "<dt>$endpoint</dt><dd>Fallo: $explicacion</dd>";
50	}
51	}
52
53	devuelveJson(["reporte" => ["innerHTML" => $reporteDeEnvios]]);
54

1	<?php
2
3	require_once __DIR__ . "/lib/BAD_REQUEST.php";
4	require_once __DIR__ . "/lib/recibeJson.php";
5	require_once __DIR__ . "/lib/ProblemDetailsException.php";
6
7	function recibeSuscripcion()
8	{
9
10	$objeto = recibeJson();
11
12	if (
13	!isset($objeto->authToken)
14	\|\| !is_string($objeto->authToken)
15	\|\| $objeto->authToken === ""
16	)
17	throw new ProblemDetailsException([
18	"status" => BAD_REQUEST,
19	"title" => "El authToken debe ser texto que no esté en blanco.",
20	"type" => "/errors/authtokenincorrecto.html",
21	]);
22
23	if (
24	!isset($objeto->contentEncoding)
25	\|\| !is_string($objeto->contentEncoding)
26	\|\| $objeto->contentEncoding === ""
27	)
28	throw new ProblemDetailsException([
29	"status" => BAD_REQUEST,
30	"title" => "La contentEncoding debe ser texto que no esté en blanco.",
31	"type" => "/errors/contentencodingincorrecta.html",
32	]);
33
34	if (
35	!isset($objeto->endpoint)
36	\|\| !is_string($objeto->endpoint)
37	\|\| $objeto->endpoint === ""
38	)
39	throw new ProblemDetailsException([
40	"status" => BAD_REQUEST,
41	"title" => "El endpoint debe ser texto que no esté en blanco.",
42	"type" => "/errors/endpointincorrecto.html",
43	]);
44
45	if (
46	!isset($objeto->publicKey)
47	\|\| !is_string($objeto->publicKey)
48	\|\| $objeto->publicKey === ""
49	)
50	throw new ProblemDetailsException([
51	"status" => BAD_REQUEST,
52	"title" => "La publicKey debe ser texto que no esté en blanco.",
53	"type" => "/errors/publickeyincorrecta.html",
54	]);
55
56	return [
57	"SUS_AUT_TOK" => $objeto->authToken,
58	"SUS_CONT_ENCOD" => $objeto->contentEncoding,
59	"SUS_ENDPOINT" => $objeto->endpoint,
60	"SUS_PUB_KEY" => $objeto->publicKey,
61	];
62	}
63

1	<?php
2
3	require_once __DIR__ . "/lib/manejaErrores.php";
4	require_once __DIR__ . "/lib/devuelveNoContent.php";
5	require_once __DIR__ . "/Bd.php";
6	require_once __DIR__ . "/recibeSuscripcion.php";
7	require_once __DIR__ . "/suscripcionElimina.php";
8
9	$modelo = recibeSuscripcion();
10	suscripcionElimina(Bd::pdo(), $modelo["SUS_ENDPOINT"]);
11	devuelveNoContent();
12

1	<?php
2
3	require_once __DIR__ . "/lib/manejaErrores.php";
4	require_once __DIR__ . "/lib/devuelveCreated.php";
5	require_once __DIR__ . "/lib/devuelveJson.php";
6	require_once __DIR__ . "/Bd.php";
7	require_once __DIR__ . "/recibeSuscripcion.php";
8
9	$modelo = recibeSuscripcion();
10
11	$bd = Bd::pdo();
12
13	$stmt =
14	$bd->prepare("SELECT * FROM SUSCRIPCION WHERE SUS_ENDPOINT = :SUS_ENDPOINT");
15	$stmt->execute([":SUS_ENDPOINT" => $modelo["SUS_ENDPOINT"]]);
16	$anterior = $stmt->fetch(PDO::FETCH_ASSOC);
17
18	if ($anterior === false) {
19
20	$stmt = $bd->prepare(
21	"INSERT INTO SUSCRIPCION (
22	SUS_ENDPOINT, SUS_PUB_KEY, SUS_AUT_TOK, SUS_CONT_ENCOD
23	) values (
24	:SUS_ENDPOINT, :SUS_PUB_KEY, :SUS_AUT_TOK, :SUS_CONT_ENCOD
25	)"
26	);
27	$stmt->execute([
28	":SUS_ENDPOINT" => $modelo["SUS_ENDPOINT"],
29	":SUS_PUB_KEY" => $modelo["SUS_PUB_KEY"],
30	":SUS_AUT_TOK" => $modelo["SUS_AUT_TOK"],
31	":SUS_CONT_ENCOD" => $modelo["SUS_CONT_ENCOD"],
32	]);
33
34	devuelveCreated("", $modelo);
35	} else {
36
37	$stmt = $bd->prepare(
38	"UPDATE SUSCRIPCION
39	SET
40	SUS_PUB_KEY = :SUS_PUB_KEY,
41	SUS_AUT_TOK = :SUS_AUT_TOK,
42	SUS_CONT_ENCOD = :SUS_CONT_ENCOD
43	WHERE
44	SUS_ENDPOINT = :SUS_ENDPOINT"
45	);
46	$stmt->execute([
47	":SUS_PUB_KEY" => $modelo["SUS_PUB_KEY"],
48	":SUS_AUT_TOK" => $modelo["SUS_AUT_TOK"],
49	":SUS_CONT_ENCOD" => $modelo["SUS_CONT_ENCOD"],
50	":SUS_ENDPOINT" => $modelo["SUS_ENDPOINT"],
51	]);
52
53	devuelveJson($modelo);
54	}
55

1	<?php
2
3	require_once __DIR__ . "/../vendor/autoload.php";
4
5	use Minishlink\WebPush\SubscriptionInterface;
6
7	class Suscripcion implements SubscriptionInterface
8	{
9
10	public string $SUS_ENDPOINT;
11	public string $SUS_PUB_KEY;
12	public string $SUS_AUT_TOK;
13	public string $SUS_CONT_ENCOD;
14
15	public function __construct(
16	string $SUS_ENDPOINT = "",
17	string $SUS_PUB_KEY = "",
18	string $SUS_AUT_TOK = "",
19	string $SUS_CONT_ENCOD = ""
20	) {
21	$this->SUS_ENDPOINT = $SUS_ENDPOINT;
22	$this->SUS_PUB_KEY = $SUS_PUB_KEY;
23	$this->SUS_AUT_TOK = $SUS_AUT_TOK;
24	$this->SUS_CONT_ENCOD = $SUS_CONT_ENCOD;
25	}
26
27	public function getEndpoint(): string
28	{
29	return $this->SUS_ENDPOINT;
30	}
31
32	public function getPublicKey(): ?string
33	{
34	return $this->SUS_PUB_KEY;
35	}
36
37	public function getAuthToken(): ?string
38	{
39	return $this->SUS_AUT_TOK;
40	}
41
42	public function getContentEncoding(): ?string
43	{
44	return $this->SUS_CONT_ENCOD;
45	}
46	}
47

1	<?php
2
3	function suscripcionElimina(\PDO $bd, string $endpoint)
4	{
5	$stmt =
6	$bd->prepare("DELETE FROM SUSCRIPCION WHERE SUS_ENDPOINT = :SUS_ENDPOINT");
7	$stmt->execute([":SUS_ENDPOINT" => $endpoint]);
8	}
9

1	<?php
2
3	require_once __DIR__ . "/devuelveResultadoNoJson.php";
4
5	function devuelveCreated($urlDelNuevo, $resultado)
6	{
7	$json = json_encode($resultado);
8	if ($json === false) {
9	devuelveResultadoNoJson();
10	} else {
11	http_response_code(201);
12	header("Location: $urlDelNuevo");
13	header("Content-Type: application/json; charset=utf-8");
14	echo $json;
15	}
16	}
17

1	<?php
2
3	require_once __DIR__ . "/devuelveResultadoNoJson.php";
4
5	function devuelveJson($resultado)
6	{
7	$json = json_encode($resultado);
8	if ($json === false) {
9	devuelveResultadoNoJson();
10	} else {
11	header("Content-Type: application/json; charset=utf-8");
12	echo $json;
13	}
14	exit();
15	}
16

1	<?php
2
3	function devuelveNoContent()
4	{
5	http_response_code(204);
6	}
7