Getafe CF

<div id="gtf-baja">

  <style>
    /* Mismo lenguaje que el aviso de permiso: fondo blanco, el azul del club
       y tipografía del sistema. Es una página de trámite, no de campaña: se
       entra, se lee y se sale. */
    #gtf-baja{
      --b-azul:#0046d5; --b-azul-osc:#0038aa;
      --b-tinta:#1f2937; --b-tinta-2:#4b5563; --b-tinta-3:#6b7280;
      --b-linea:#e5e7eb; --b-fondo:#f6f8fb;
      max-width:680px; margin:0 auto; padding:32px 20px 56px;
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      font-size:16px; line-height:1.5; color:var(--b-tinta);
    }
    #gtf-baja,#gtf-baja *,#gtf-baja *::before,#gtf-baja *::after{box-sizing:border-box}
    #gtf-baja [hidden]{display:none !important}

    #gtf-baja .b-cab{display:flex;align-items:center;gap:16px;margin-bottom:26px}
    #gtf-baja .b-cab img{width:58px;height:58px;object-fit:contain;flex:0 0 auto}
    #gtf-baja h1{margin:0;font-size:26px;line-height:1.2;font-weight:800}
    #gtf-baja .b-sub{margin:6px 0 0;font-size:15px;color:var(--b-tinta-2)}

    #gtf-baja .b-caja{background:#fff;border:1px solid var(--b-linea);border-radius:14px;
      padding:22px;margin-bottom:18px}
    #gtf-baja .b-caja h2{margin:0 0 12px;font-size:17px;font-weight:700}
    #gtf-baja p{margin:0 0 12px}
    #gtf-baja p:last-child{margin-bottom:0}

    #gtf-baja .b-datos{list-style:none;margin:0;padding:0;
      border-top:1px solid var(--b-linea)}
    #gtf-baja .b-datos li{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0;
      border-bottom:1px solid var(--b-linea);font-size:15px}
    #gtf-baja .b-datos b{flex:0 0 190px;font-weight:600;color:var(--b-tinta-2)}
    #gtf-baja .b-datos span{flex:1 1 200px;min-width:0;word-break:break-word}

    #gtf-baja .b-btn{display:inline-flex;align-items:center;justify-content:center;
      appearance:none;border:0;border-radius:10px;padding:14px 22px;font:inherit;
      font-size:16px;font-weight:800;cursor:pointer;text-decoration:none}
    #gtf-baja .b-btn--baja{background:#c0342b;color:#fff;
      box-shadow:0 8px 18px rgba(192,52,43,.26)}
    #gtf-baja .b-btn--baja:hover:not(:disabled){background:#a32c24}
    #gtf-baja .b-btn--sec{background:#fff;color:var(--b-tinta);border:1px solid #cfd8e6;
      font-weight:700}
    #gtf-baja .b-btn:disabled{opacity:.6;cursor:default}

    /* Confirmar la baja. Fondo rojo claro para que se lea como lo que es:
       un punto de no retorno. Los botones, uno al lado del otro y con
       "Cancelar" delante. */
    #gtf-baja .b-confirma{margin-top:20px;padding:18px;border-radius:12px;
      background:#fceae8;border:1px solid #f2c9c4}
    #gtf-baja .b-confirma b{display:block;font-size:16px;color:#a32c24;margin-bottom:6px}
    #gtf-baja .b-confirma p{margin:0 0 16px;font-size:14.5px;color:var(--b-tinta-2);
      line-height:1.5}
    #gtf-baja .b-confirma__btns{display:flex;flex-wrap:wrap;gap:10px}

    #gtf-baja .b-aviso{border-radius:12px;padding:16px 18px;font-size:15px;
      margin-bottom:18px}
    #gtf-baja .b-aviso--ok{background:#e4f5ec;color:#0f6b4a;border:1px solid #bfe6d2}
    #gtf-baja .b-aviso--mal{background:#fceae8;color:#a32c24;border:1px solid #f2c9c4}
    #gtf-baja .b-aviso--info{background:var(--b-fondo);color:var(--b-tinta-2);
      border:1px solid var(--b-linea)}

    #gtf-baja .b-pie{font-size:13.5px;color:var(--b-tinta-3);line-height:1.55;
      border-top:1px solid var(--b-linea);padding-top:18px;margin-top:26px}
    #gtf-baja .b-pie a{color:var(--b-azul)}

    #gtf-baja .b-pasos{margin:0;padding-left:20px}
    #gtf-baja .b-pasos li{margin-bottom:7px}

    @media (max-width:600px){
      #gtf-baja{padding:22px 16px 44px}
      #gtf-baja h1{font-size:22px}
      #gtf-baja .b-cab img{width:46px;height:46px}
      #gtf-baja .b-datos b{flex:1 1 100%}
      #gtf-baja .b-btn{width:100%}
    }
  </style>

  <div class="b-cab">
    <img alt="Getafe CF"
         src="https://statics-maker.llt-services.com/get/images/2023/04/26/optimized/8e52e72f-94c1-4f63-9cbd-fa3bb697628c-942.png">
    <div>
      <h1>Notificaciones del Getafe CF</h1>
      <p class="b-sub">Consulta lo que guardamos de este navegador y date de baja cuando quieras.</p>
    </div>
  </div>

  <div class="b-aviso b-aviso--info" id="b-estado">Comprobando este navegador…</div>

  <div class="b-caja" id="b-suscrito" hidden>
    <h2>Esto es todo lo que tenemos de este navegador</h2>
    <ul class="b-datos" id="b-datos"></ul>
    <p style="margin-top:20px" id="b-accion">
      <button class="b-btn b-btn--baja" type="button" id="b-baja">Darme de baja</button>
    </p>

    <div class="b-confirma" id="b-confirma" hidden>
      <b>¿Estás seguro?</b>
      <p>Si te das de baja, dejarás de recibir las notificaciones del Getafe CF
        en tu navegador.</p>
      <div class="b-confirma__btns">
        <button class="b-btn b-btn--sec" type="button" id="b-cancelar">Cancelar</button>
        <button class="b-btn b-btn--baja" type="button" id="b-confirmar">Confirmar baja</button>
      </div>
    </div>
  </div>

  <div class="b-caja" id="b-nada" hidden>
    <h2 id="b-nada-t">Este navegador no está suscrito</h2>
    <p id="b-nada-p">No estás recibiendo notificaciones del Getafe CF aquí, así que
      no hay nada que dar de baja.</p>
    <p style="font-size:14.5px;color:var(--b-tinta-2)">Si las recibes en otro
      dispositivo o en otro navegador, abre esta misma página allí: la baja se hace
      desde el navegador que las recibe.</p>
  </div>

  <div class="b-caja" id="b-hecho" hidden>
    <h2>Listo, te has dado de baja</h2>
    <p>Hemos borrado de nuestra base de datos todo lo que teníamos asociado a este
      navegador, y ya no vas a recibir más notificaciones del club aquí.</p>
    <p style="font-size:14.5px;color:var(--b-tinta-2)">Si algún día cambias de idea,
      solo tienes que volver a aceptarlas cuando te lo propongamos en la web.</p>
  </div>

  <div class="b-caja" id="b-manual" hidden>
    <h2>Cómo quitarlas desde el propio navegador</h2>
    <p style="font-size:15px;color:var(--b-tinta-2)">También puedes hacerlo tú
      directamente, sin pasar por aquí:</p>
    <ol class="b-pasos" style="font-size:15px;color:var(--b-tinta-2)">
      <li>Pulsa el candado que hay a la izquierda de la dirección web.</li>
      <li>Entra en <b>Configuración de sitios web</b> (o <b>Permisos</b>).</li>
      <li>En <b>Notificaciones</b>, elige <b>Bloquear</b>.</li>
    </ol>
  </div>

  <p class="b-pie">
    ¿Dudas sobre tus datos? Escribe a
    <a href="mailto:dpo@getafecf.com">dpo@getafecf.com</a> o consulta nuestra
    <a href="https://www.getafecf.com/politica-de-privacidad">Política de privacidad</a>.
  </p>

  <script>
  (function () {
    'use strict';

    var FUNCION = 'https://wpummimrkjpxqybeaiap.supabase.co/functions/v1/push-unsubscribe';
    var raiz = document.getElementById('gtf-baja');
    function $(id) { return document.getElementById(id); }
    function ver(id, si) { $(id).hidden = !si; }
    function esc(s) {
      return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
        return { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c];
      });
    }
    function estado(texto, clase) {
      var e = $('b-estado');
      e.textContent = texto;
      e.className = 'b-aviso b-aviso--' + (clase || 'info');
      e.hidden = !texto;
    }

    function fecha(iso) {
      if (!iso) return '—';
      var d = new Date(iso);
      if (isNaN(d.getTime())) return '—';
      return d.toLocaleDateString('es-ES', { day:'numeric', month:'long', year:'numeric' });
    }

    var DISPOSITIVO = { mobile:'Móvil', desktop:'Ordenador', tablet:'Tableta' };

    function pintaDatos(d) {
      var filas = [
        ['Navegador', d.browser],
        ['Sistema', d.os],
        ['Tipo de dispositivo', DISPOSITIVO[d.device_type] || d.device_type],
        ['Idioma', d.language],
        ['Zona horaria', d.timezone],
        ['Te suscribiste el', fecha(d.created_at)],
        ['Última notificación recibida', fecha(d.last_success_at)]
      ];
      $('b-datos').innerHTML = filas.map(function (f) {
        return '<li><b>' + esc(f[0]) + '</b><span>' + esc(f[1] || '—') + '</span></li>';
      }).join('');
    }

    function llama(endpoint, accion) {
      return fetch(FUNCION, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ endpoint: endpoint, accion: accion })
      }).then(function (r) {
        return r.json().then(function (d) { return d; }, function () { return null; })
          .then(function (d) {
            if (d && d.ok) return d;
            throw new Error((d && d.error) || 'No hemos podido completarlo.');
          });
      }, function () {
        throw new Error('No hay conexión. Comprueba internet y vuelve a intentarlo.');
      });
    }

    /* La suscripción se pide al service worker que ya está registrado. NO se
       registra uno nuevo: si alguien llega aquí sin estar suscrito, esta
       página no debe suscribirle sin querer. */
    function suscripcion() {
      if (!('serviceWorker' in navigator) || !('PushManager' in window) || !window.isSecureContext) {
        return Promise.resolve('no-compatible');
      }
      return navigator.serviceWorker.getRegistration('/')
        .then(function (reg) { return reg ? reg.pushManager.getSubscription() : null; })
        .catch(function () { return null; });
    }

    var actual = null;

    function arranca() {
      suscripcion().then(function (sub) {
        if (sub === 'no-compatible') {
          estado('Este navegador no admite las notificaciones web del club, así que ' +
                 'no hay ninguna suscripción que dar de baja.', 'info');
          ver('b-manual', true);
          return;
        }
        if (!sub) {
          estado('', '');
          ver('b-nada', true);
          ver('b-manual', true);
          return;
        }
        actual = sub;
        return llama(sub.endpoint, 'consultar').then(function (r) {
          estado('', '');
          if (!r.encontrada) {
            /* El navegador cree estar suscrito pero nosotros no le tenemos.
               Se limpia por su lado, que es lo que de verdad corta el envío. */
            $('b-nada-t').textContent = 'Ya no estás suscrito';
            $('b-nada-p').textContent = 'No tenemos guardado nada de este navegador. ' +
              'Hemos aprovechado para dejarlo limpio del todo.';
            sub.unsubscribe().catch(function () {});
            ver('b-nada', true);
            ver('b-manual', true);
            return;
          }
          pintaDatos(r.datos);
          ver('b-suscrito', true);
        });
      }).catch(function (e) {
        estado(e.message, 'mal');
        ver('b-manual', true);
      });
    }

    /* Darse de baja no se hace de un clic. La baja borra de verdad, y lo que
       se borra no se recupera: si vuelve a querer las notificaciones tiene
       que aceptarlas otra vez desde cero. */
    $('b-baja').addEventListener('click', function () {
      estado('', '');
      ver('b-accion', false);
      ver('b-confirma', true);
      /* El foco va a "Cancelar". Quien llegue aquí dando al tabulador o al
         Intro no puede borrarse sin querer. */
      $('b-cancelar').focus();
    });

    $('b-cancelar').addEventListener('click', function () {
      ver('b-confirma', false);
      ver('b-accion', true);
      $('b-baja').focus();
    });

    $('b-confirmar').addEventListener('click', function () {
      var boton = this;
      boton.disabled = true;
      $('b-cancelar').disabled = true;
      boton.textContent = 'Dando de baja…';
      estado('', '');

      /* LAS DOS COSAS, Y EN ESTE ORDEN.
         Primero se borra en nuestra base de datos y después en el navegador.
         Al revés no vale: si primero se quita del navegador y luego falla la
         llamada, nos quedamos con su fila y sin forma de volver a
         identificarle, porque el endpoint ya no existiría. */
      llama(actual.endpoint, 'baja')
        .then(function () {
          return actual.unsubscribe().catch(function () { /* ya está borrado donde importa */ });
        })
        .then(function () {
          ver('b-suscrito', false);
          ver('b-hecho', true);
          ver('b-manual', false);
        })
        .catch(function (e) {
          estado(e.message, 'mal');
          boton.disabled = false;
          $('b-cancelar').disabled = false;
          boton.textContent = 'Confirmar baja';
          ver('b-manual', true);
        });
    });

    arranca();
  })();
  </script>
</div>

Baja notificaciones web suscripcion navegador

Facebook

Instagram

Linkedin

Tiktok

Twitter

Weibo

Whatsapp

Youtube