Getafe CF

<div id="getafe-bday-widget"></div>
<script>
(() => {
  const HERO_IMG = 'https://statics-maker.llt-services.com/get/images/2025/10/27/original/564b5e7f-311c-4a0f-be8b-8d12704590d4-682.png';

  const mountPoint = document.getElementById('getafe-bday-widget') || document.currentScript.parentElement;
  const host = document.createElement('div');
  host.setAttribute('role','region');
  host.setAttribute('aria-label','Cumpleaños Getafe CF');
  mountPoint.appendChild(host);
  const root = host.attachShadow({ mode: 'open' });

  root.innerHTML = `
    <style>
      :host { all: initial; }
      :root {
        --getafe-blue: #0046b7;
        --getafe-blue-700: #0a2f74;
        --getafe-blue-900: #071d49;
        --ink-900: #0f1b3a;
        --ink-600: #384766;
        --accent-red: #e52e2e;
        --accent-yellow: #ffd453;
        --card: #ffffff;
        --border: #e6eaf2;
        --radius: 22px;
        --shadow-lg: 0 18px 55px rgba(3,16,40,.12);
      }
      *, *::before, *::after { box-sizing: border-box; }
      .wrap { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial; color: var(--ink-900); padding: clamp(16px, 4vw, 40px); background: transparent; }
      .shell { width: min(1100px, 100%); margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-lg); overflow: clip; }
      .grid { display: grid; grid-template-columns: 1fr; }
      @media (min-width: 960px) { .grid { grid-template-columns: 1.05fr 0.95fr; } }

      /* HERO */
      .hero { position: relative; min-height: 280px; display: grid; place-items: end start; background: #eef3ff; isolation: isolate; }
      .hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.25)); pointer-events: none; }
      .hero-badge { position: absolute; left: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
      .hero-title { margin: 0 0 2px; font-weight: 900; letter-spacing: .2px; font-size: clamp(22px, 3.2vw, 32px); color: var(--getafe-blue-900); }
      .hero-sub { margin: 0; font-size: clamp(13px, 1.6vw, 14px); color: var(--ink-600); }

      .content { padding: clamp(18px, 4vw, 38px); display: grid; gap: clamp(16px, 2.4vw, 26px); }
      .intro h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.1; margin: 0 0 6px; color: var(--getafe-blue-900); }
      .intro p { margin: 0; font-size: clamp(14px, 1.6vw, 16px); color: var(--ink-600); }

      .scratch-wrap { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }

      /* Tarjeta premio */
      .scratch-card { position: relative; width: 100%; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(180deg, #ffffff, #fcfdff); overflow: hidden; }
      .prize { padding: clamp(20px, 3.2vw, 28px); text-align: center; }
      .prize h3 { margin: 0 0 6px; font-size: clamp(20px, 2.2vw, 26px); color: var(--getafe-blue-900); }
      .prize p { margin: 0; font-size: clamp(15px, 1.6vw, 18px); }
      .tag { display:inline-block; background: var(--getafe-blue); color:#fff; padding:6px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; letter-spacing:.35px; margin-bottom: 8px; }

      .canvas-wrap { position:absolute; inset:0; }
      canvas { display:block; width: 100%; height: 100%; }

      /* Nueva animación shimmer sutil (no rotación constante) */
      .foil-shimmer { position: absolute; inset: 0; pointer-events: none; opacity: .65; background: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 80%), radial-gradient(1200px 400px at 10% -20%, rgba(185,197,221,.5), transparent 60%), radial-gradient(1200px 400px at 110% 120%, rgba(170,181,201,.35), transparent 60%); background-size: 200% 100%, 100% 100%, 100% 100%; animation: shimmer 5.5s ease-in-out infinite; }
      @keyframes shimmer { 0%, 20% { background-position: -200% 0, 0 0, 0 0; } 45% { background-position: 0% 0, 0 0, 0 0; } 100% { background-position: 200% 0, 0 0, 0 0; } }
      @media (prefers-reduced-motion: reduce) { .foil-shimmer { animation: none; } }

      .legal { font-size: 12px; color:#6b7280; line-height: 1.45; background:#f9fafb; padding: 14px 18px; border-top: 1px solid var(--border); }

      /* Confetti */
      .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
      .confetti i { position: absolute; width:12px; height:8px; opacity:.95; transform: translate3d(0,0,0) rotate(0deg); will-change: transform; border-radius: 2px; }
    </style>

    <div class="wrap">
      <div class="shell" id="card">
        <div class="grid">
          <div class="hero" aria-hidden="true">
            <img src="${HERO_IMG}" alt="Celebración Getafe CF" loading="eager"/>
            <div class="hero-badge">
              <div class="hero-title">ES UN DÍA ESPECIAL</div>
              <p class="hero-sub">Rasca y descubre el regalo que hemos preparado para ti</p>
            </div>
          </div>
          <div class="content">
            <div class="intro">
              <h2>Tu regalo te espera</h2>
              <p>Consigue tu beneficio exclusivo de cumpleaños. Rasca la tarjeta para revelar los detalles.</p>
            </div>

            <div class="scratch-card" aria-live="polite">
              <div class="prize" id="prize">
                <span class="tag">Regalo de cumpleaños</span>
                <h3>🎉 10% de descuento en tienda física</h3>
                <p>Presenta tu <strong>DNI</strong> y <strong>abono</strong> en la tienda oficial para aplicarlo.</p>
              </div>
              <div class="canvas-wrap">
                <canvas id="scratch"></canvas>
                <div class="foil-shimmer"></div>
              </div>
              <div class="confetti" id="confetti" aria-hidden="true"></div>
            </div>

            <div class="legal">
              Promoción válida solo abonados, en la <strong>tienda física oficial del Getafe CF</strong>. Imprescindible presentar <strong>DNI</strong> y <strong>abono</strong> en vigor. No acumulable a otras ofertas. Válido únicamente en los 30 días naturales siguientes al día del cumpleaños.
            </div>
          </div>
        </div>
      </div>
    </div>
  `;

  // ---------- Scratch Card Logic (mejor fluidez) ----------
  const canvas = root.getElementById('scratch');
  const ctx = canvas.getContext('2d');
  const confettiEl = root.getElementById('confetti');
  const card = root.getElementById('card');

  let drawing = false;
  let cleared = false;
  let moveCount = 0;
  let last = null;

  function resizeCanvas() {
    const rect = canvas.parentElement.getBoundingClientRect();
    const dpr = Math.max(1, Math.floor(window.devicePixelRatio || 1));
    canvas.width = Math.floor(rect.width * dpr);
    canvas.height = Math.floor(rect.height * dpr);
    canvas.style.width = rect.width + 'px';
    canvas.style.height = rect.height + 'px';
    ctx.setTransform(1,0,0,1,0,0);
    ctx.scale(dpr, dpr);
    paintCover();
  }

  function paintCover() {
    const { width, height } = canvas.getBoundingClientRect();
    ctx.globalCompositeOperation = 'source-over';

    // Capa foil estática base
    const grad1 = ctx.createLinearGradient(0, 0, width, height);
    grad1.addColorStop(0, '#c7cfdd');
    grad1.addColorStop(0.5, '#e9eef7');
    grad1.addColorStop(1, '#aab5c9');
    ctx.fillStyle = grad1;
    ctx.fillRect(0, 0, width, height);

    // Líneas sutiles
    ctx.fillStyle = 'rgba(255,255,255,.14)';
    for (let y = 0; y < height; y += 12) ctx.fillRect(0, y, width, 4);

    // Texto
    ctx.fillStyle = 'rgba(0,0,0,.45)';
    ctx.font = '800 16px Inter, system-ui, -apple-system, Segoe UI, Roboto';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('RASCA CON TU DEDO ESTA TARJETA', width / 2, height / 2);

    cleared = false;
  }

  // Pincel más "lleno" y fluido
  function scratchPath(from, to) {
    const w = canvas.getBoundingClientRect().width;
    const r = Math.max(22, Math.floor(w / 10)); // antes /18 -> ahora /10 (más grande)
    ctx.globalCompositeOperation = 'destination-out';

    // Trazo continuo redondeado
    ctx.beginPath();
    ctx.moveTo(from.x, from.y);
    ctx.lineTo(to.x, to.y);
    ctx.lineWidth = r * 2; // grosor generoso
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.stroke();

    // Relleno radial en el punto final para asegurar transparencia completa
    const g = ctx.createRadialGradient(to.x, to.y, 0, to.x, to.y, r);
    g.addColorStop(0, 'rgba(0,0,0,1)');
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(to.x, to.y, r, 0, Math.PI * 2);
    ctx.fill();
  }

  function getPointerPos(e) {
    const rect = canvas.getBoundingClientRect();
    const isTouch = e.touches && e.touches.length;
    const px = isTouch ? e.touches[0].clientX : (e.clientX ?? e.pageX);
    const py = isTouch ? e.touches[0].clientY : (e.clientY ?? e.pageY);
    return { x: px - rect.left, y: py - rect.top };
  }

  function percentCleared(sampleStep = 8) {
    const w = canvas.width, h = canvas.height;
    const data = ctx.getImageData(0, 0, w, h).data;
    let clearedCount = 0, total = 0;
    for (let y = 0; y < h; y += sampleStep) {
      for (let x = 0; x < w; x += sampleStep) {
        const a = data[(y * w + x) * 4 + 3];
        if (a < 12) clearedCount++;
        total++;
      }
    }
    return clearedCount / total;
  }

  function celebrate() {
    const colors = ['#ffffff', '#ffd453', '#e52e2e', '#0ea5ff', '#0046b7'];
    const N = 130;
    const box = confettiEl.getBoundingClientRect();
    for (let i = 0; i < N; i++) {
      const p = document.createElement('i');
      p.style.left = (Math.random() * 100) + '%';
      p.style.top = '-20px';
      p.style.background = colors[Math.floor(Math.random() * colors.length)];
      p.style.transform = `translate3d(0,0,0) rotate(${Math.random()*180}deg)`;
      const duration = 6.5 + Math.random() * 3.5;
      const delay = Math.random() * .6;
      const tx = (Math.random() * box.width - box.width/2) * (Math.random()>.5?1:-1);
      p.animate([
        { transform: `translate3d(0, -40px, 0) rotate(0deg)`, opacity: .98 },
        { transform: `translate3d(${tx}px, ${box.height + 40}px, 0) rotate(${360 + Math.random()*360}deg)`, opacity: 0.9 }
      ], { duration: duration*1000, delay: delay*1000, easing: 'cubic-bezier(.2,.7,.2,1)', fill: 'forwards' });
      confettiEl.appendChild(p);
      setTimeout(() => p.remove(), (duration+1)*1000);
    }
    card.animate([
      { boxShadow: '0 18px 55px rgba(3,16,40,.12)' },
      { boxShadow: '0 18px 55px rgba(3,16,40,.12), 0 0 0 10px rgba(0,70,183,.10)' },
      { boxShadow: '0 18px 55px rgba(3,16,40,.12)' }
    ], { duration: 900, easing: 'ease-out' });
  }

  function revealAll(withCelebration = true) {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0,0,0,1)';
    ctx.fillRect(0,0,canvas.width, canvas.height);
    if (!cleared && withCelebration) celebrate();
    cleared = true;
  }

  function start(e) { drawing = true; last = getPointerPos(e); e.preventDefault(); }
  function move(e) {
    if (!drawing) return;
    const pos = getPointerPos(e);
    scratchPath(last, pos);
    last = pos;
    moveCount++;
    if (moveCount % 6 === 0 && !cleared) { // chequeo más frecuente
      const p = percentCleared();
      if (p > 0.58) { revealAll(true); }
    }
    e.preventDefault();
  }
  function end(){ drawing = false; last = null; }

  canvas.addEventListener('pointerdown', start);
  canvas.addEventListener('pointermove', move);
  window.addEventListener('pointerup', end);
  canvas.addEventListener('touchstart', start, {passive:false});
  canvas.addEventListener('touchmove', move, {passive:false});
  canvas.addEventListener('touchend', end);

  window.addEventListener('resize', () => resizeCanvas());

  // Kickoff
  resizeCanvas();
})();
</script>

Feliz Cumpleaños Abonado Azulón - Rasca y gana

Facebook

Instagram

Linkedin

Tiktok

Twitter

Weibo

Whatsapp

Youtube