Getafe CF

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap" rel="stylesheet">

<style>
/* ── Wrapper principal — todo el layout vive aquí, no en body/html ── */
#gtf-cal-sync {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  background:
    linear-gradient(180deg, rgba(0,30,100,0.55) 0%, rgba(5,10,30,0.80) 100%),
    url('https://statics-maker.llt-services.com/get/images/2026/05/25/original/3340a1e0-10bf-45f9-83fa-11fd916f4bcd-460.jpg') center / cover no-repeat;
  background-color: #0a1128;
  overflow-x: hidden;
}

#gtf-cal-sync *, #gtf-cal-sync *::before, #gtf-cal-sync *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Card ── */
#gtf-cal-sync .card-wrapper {
  width: 100%;
  max-width: 400px;
}

#gtf-cal-sync .card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}

/* ── Banda azul ── */
#gtf-cal-sync .card-header {
  background: linear-gradient(135deg, #003087 0%, #004BB5 50%, #0060E6 100%);
  padding: 28px 24px 0;
  text-align: center;
  position: relative;
}
#gtf-cal-sync .card-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 22px;
  background: #fff;
  border-radius: 22px 22px 0 0;
}

#gtf-cal-sync .logo-circle {
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
}
#gtf-cal-sync .logo-circle img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* ── Título y subtítulo ── */
#gtf-cal-sync .card-top {
  padding: 20px 20px 0;
  text-align: center;
}

#gtf-cal-sync .card-top h1 {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  line-height: 1.25;
  margin-bottom: 12px;
}

#gtf-cal-sync .card-top .subtitle {
  font-size: 13px;
  color: #666;
  line-height: 1.3;
  margin-bottom: 24px;
}
#gtf-cal-sync .card-top .subtitle strong {
  color: #003087;
  font-weight: 700;
}

/* ── Opciones de calendario ── */
#gtf-cal-sync .card-options {
  padding: 0 20px 24px;
}

#gtf-cal-sync .divider {
  height: 1px;
  background: #ececec;
  margin: 0 0 20px;
}

#gtf-cal-sync .section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #aaa;
  text-align: center;
  margin-bottom: 18px;
}

#gtf-cal-sync .calendar-options {
  display: flex;
  justify-content: center;
  gap: 14px;
}

#gtf-cal-sync .cal-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s, transform 0.15s;
}

#gtf-cal-sync .cal-option.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Cuando el checkbox está marcado, activa los botones sin depender de JS */
#gtf-cal-sync:has(#gtf-privacy-cb:checked) .cal-option {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
}

#gtf-cal-sync .cal-option:not(.disabled):active {
  transform: scale(0.93);
}

#gtf-cal-sync .cal-icon-box {
  width: 78px;
  height: 78px;
  border-radius: 18px;
  border: 1.5px solid #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

#gtf-cal-sync .cal-option:not(.disabled):hover .cal-icon-box {
  border-color: #003087;
  box-shadow: 0 4px 16px rgba(0,48,135,0.14);
}

#gtf-cal-sync .cal-icon-box img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

#gtf-cal-sync .cal-label {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

/* ── Footer con checkbox ── */
#gtf-cal-sync .card-footer {
  padding: 16px 24px 20px;
  background: #f8f9fb;
  border-top: 1px solid #ececec;
}

#gtf-cal-sync .privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

#gtf-cal-sync .privacy-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-top: 1px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}

#gtf-cal-sync .privacy-label input[type="checkbox"]:checked {
  background: #003087;
  border-color: #003087;
}

#gtf-cal-sync .privacy-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

#gtf-cal-sync .privacy-label span {
  font-size: 11.5px;
  color: #777;
  line-height: 1.5;
}

#gtf-cal-sync .privacy-label a {
  color: #003087;
  font-weight: 600;
  text-decoration: none;
}
#gtf-cal-sync .privacy-label a:hover {
  text-decoration: underline;
}

/* ── Pantalla de éxito ── */
#gtf-cal-sync-success {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Montserrat', sans-serif;
}
#gtf-cal-sync-success.active { display: flex; }

#gtf-cal-sync-success .success-card {
  background: #fff;
  border-radius: 22px;
  padding: 36px 28px 28px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  animation: gtfCalModalIn 0.35s ease;
}

@keyframes gtfCalModalIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

#gtf-cal-sync-success .success-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #003087, #0060E6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: gtfCalPopIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.1s both;
}
@keyframes gtfCalPopIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
#gtf-cal-sync-success .success-check svg { width: 36px; height: 36px; color: #fff; }

#gtf-cal-sync-success h2 {
  font-size: 22px;
  font-weight: 900;
  color: #111;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#gtf-cal-sync-success .success-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.55;
  margin-bottom: 24px;
}

#gtf-cal-sync-success .success-divider {
  height: 1px;
  background: #eee;
  margin: 0 0 20px;
}

#gtf-cal-sync-success .share-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #aaa;
  margin-bottom: 14px;
}

#gtf-cal-sync-success .share-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#gtf-cal-sync-success .btn-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s;
}
#gtf-cal-sync-success .btn-share:active { opacity: 0.8; }

#gtf-cal-sync-success .btn-whatsapp {
  background: #25D366;
  color: #fff;
}

#gtf-cal-sync-success .btn-close-success {
  background: #f0f0f0;
  color: #555;
  width: 100%;
  margin-top: 6px;
}

/* ── Confeti ── */
@keyframes gtfCalConffetiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
</style>


<div id="gtf-cal-sync">
  <div class="card-wrapper">
    <div class="card">

      
      <div class="card-header">
        <div class="logo-circle">
          <img src="https://statics-maker.llt-services.com/get/images/2025/05/19/original/4fe5f80b-13e9-4dab-ba5d-4c5956003a27-810.png" alt="Getafe CF">
        </div>
      </div>

      
      <div class="card-top">
        <h1>Sincroniza el<br>Calendario de Liga</h1>
        <p class="subtitle">
          Todos los partidos directamente en tu calendario.<br>
          Horarios y resultados se actualizarán<br>
          <strong>automáticamente</strong>
        </p>
      </div>

      
      <div class="card-options">
        <div class="divider"></div>
        <p class="section-label">Elige tu calendario</p>

        <div class="calendar-options">
          <a class="cal-option disabled" id="gtf-btn-google"
             href="https://calendar.google.com/calendar/r?cid=6dab1eed4baa007633e437169c2af80ccb82a0fe6caa74d74ad2375df734caa3%40group.calendar.google.com"
             target="_blank"
             onclick="return gtfCalClick('google');">
            <div class="cal-icon-box">
              <img src="https://statics-maker.llt-services.com/get/images/2026/06/30/original/77cd03da-fc12-4323-953e-aeba01565dfb-836.svg" alt="Google Calendar">
            </div>
            <span class="cal-label">Google</span>
          </a>

          <a class="cal-option disabled" id="gtf-btn-apple"
             href="webcal://vivacious-courtesy-production-0471.up.railway.app/getafe-calendar.ics"
             onclick="return gtfCalClick('apple');">
            <div class="cal-icon-box">
              <img src="https://statics-maker.llt-services.com/get/images/2026/06/30/original/356f67e6-a28b-4f20-a8f2-933167e37ac6-528.png" alt="Apple Calendar">
            </div>
            <span class="cal-label">Apple</span>
          </a>

          <a class="cal-option disabled" id="gtf-btn-outlook"
             href="https://vivacious-courtesy-production-0471.up.railway.app/auth/outlook"
             target="_blank" rel="noopener"
             onclick="return gtfCalClick('outlook');">
            <div class="cal-icon-box">
              <img src="https://statics-maker.llt-services.com/get/images/2026/06/30/original/880ccaff-ab7f-442f-ad84-55a31e235608-257.svg" alt="Outlook">
            </div>
            <span class="cal-label">Outlook</span>
          </a>
        </div>
      </div>

      
      <div class="card-footer">
        <label class="privacy-label">
          <input type="checkbox" id="gtf-privacy-cb" onchange="gtfToggleButtons()">
          <span>
            Acepto la <a href="https://www.getafecf.com/politica-de-privacidad" target="_blank" rel="noopener">política de privacidad</a> del club
          </span>
        </label>
      </div>

    </div>
  </div>
</div>


<div id="gtf-cal-sync-success">
  <div class="success-card">
    <div class="success-check">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    </div>
    <h2>¡Listo!</h2>
    <p class="success-desc">
      Los partidos del Getafe CF ya están en tu calendario. Fechas, horarios y resultados se actualizarán automáticamente.
    </p>
    <div class="success-divider"></div>
    <p class="share-label">¿Lo compartimos con otros azulones?</p>
    <div class="share-buttons">
      <a id="gtf-btn-whatsapp-share" class="btn-share btn-whatsapp" href="#" target="_blank" rel="noopener">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M11.999 2.002C6.477 2.002 2 6.479 2 12.001c0 1.761.459 3.417 1.265 4.855L2 22l5.293-1.243C8.72 21.567 10.33 22 12 22c5.522 0 10-4.477 10-9.999 0-5.521-4.478-9.999-10.001-9.999z"/></svg>
        Compartir por WhatsApp
      </a>
      <button class="btn-share btn-close-success" onclick="gtfCloseSuccess()">Cerrar</button>
    </div>
  </div>
</div>

<script>
var _gtfSyncBase    = 'https://vivacious-courtesy-production-0471.up.railway.app';
var _gtfCalClicked  = false;
var _gtfClickTime   = 0;

function gtfToggleButtons() {
  var checked = document.getElementById('gtf-privacy-cb').checked;
  document.querySelectorAll('#gtf-cal-sync .cal-option').forEach(function(btn) {
    btn.classList.toggle('disabled', !checked);
  });
}

function gtfCalClick(type) {
  if (!document.getElementById('gtf-privacy-cb').checked) return false;
  fetch(_gtfSyncBase + '/track?type=' + type).catch(function(){});
  _gtfCalClicked = true;
  _gtfClickTime  = Date.now();
  return true;
}

function gtfCloseSuccess() {
  document.getElementById('gtf-cal-sync-success').classList.remove('active');
}

function gtfShowSuccess() {
  var pageUrl = 'http://www.getafecf.com/sincronizar-calendario-20262027?utm_source=CRM&utm_medium=WHATSAPP&utm_campaign=202607_SINCRO_CALENDAR_2627_GET_VIS_ONESHOT_GNR&utm_content=ONESHOT&utm_term=GENERAL';
  var msg = '¡Ya tengo los partidos del Getafe CF 26/27 en mi calendario! '
          + 'Fechas, horarios y resultados se actualizan solos. '
          + '¡Tú también puedes añadirlo! '
          + pageUrl;
  document.getElementById('gtf-btn-whatsapp-share').href =
    'https://wa.me/?text=' + encodeURIComponent(msg);
  document.getElementById('gtf-cal-sync-success').classList.add('active');
  gtfLaunchConfetti();
}

function gtfLaunchConfetti() {
  var colors = ['#003087','#0060E6','#FFD700','#ffffff','#4CAF50','#FF5252'];
  for (var i = 0; i < 90; i++) {
    (function(i) {
      setTimeout(function() {
        var el = document.createElement('div');
        var size = Math.random() * 8 + 4;
        el.style.cssText = [
          'position:fixed',
          'top:-12px',
          'left:' + (Math.random() * 100) + 'vw',
          'width:' + size + 'px',
          'height:' + size + 'px',
          'background:' + colors[Math.floor(Math.random() * colors.length)],
          'border-radius:' + (Math.random() > 0.4 ? '50%' : '2px'),
          'z-index:9999',
          'pointer-events:none',
          'animation:gtfCalConffetiFall ' + (Math.random() * 2 + 1.5) + 's ease-in forwards'
        ].join(';');
        document.body.appendChild(el);
        setTimeout(function() { if (el.parentNode) el.remove(); }, 4000);
      }, i * 20);
    })(i);
  }
}

function _gtfCheckReturn() {
  if (_gtfCalClicked) {
    var elapsed = Date.now() - _gtfClickTime;
    if (elapsed > 1500) {
      _gtfCalClicked = false;
      gtfShowSuccess();
    }
  }
}

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') _gtfCheckReturn();
});

window.addEventListener('focus', function() {
  _gtfCheckReturn();
});

window.addEventListener('message', function(e) {
  if (e.data === 'gtf-google-success') {
    _gtfCalClicked = false;
    gtfShowSuccess();
  }
});

(function() {
  try {
    var params = new URLSearchParams(window.location.search);
    if (params.get('success') === 'google') {
      history.replaceState(null, '', window.location.pathname);
      setTimeout(gtfShowSuccess, 300);
    }
  } catch(e) {}
})();

</script>

Sincronizar Calendario 2026/2027

Facebook

Instagram

Linkedin

Tiktok

Twitter

Weibo

Whatsapp

Youtube