Tul xxx Tul

Viewing: gift.php

<?php
require_once __DIR__ . '/app/gift_helpers.php';

$token = trim((string) ($_GET['token'] ?? ''));

try {
    $pdo = db(true);
    $gift = gift_by_token($pdo, $token);
} catch (Throwable $exception) {
    http_response_code(500);
    exit('No se pudo cargar el regalo.');
}

if (!$gift) {
    http_response_code(404);
    exit('Regalo no disponible.');
}

$companyName = $gift['company_name'] ?: 'tu marca';
$logoUrl = gift_asset_url($gift['logo_url'] ?: 'assets/img/eComercial.png');
$mediaUrl = gift_base_path() . '/regalo/' . rawurlencode($token) . '/media';
$downloadUrl = gift_base_path() . '/regalo/' . rawurlencode($token) . '/descargar';
$isVideo = gift_is_video($gift);
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tu regalo esta listo - <?= e($companyName) ?></title>
  <link rel="icon" type="image/svg+xml" href="<?= e(gift_asset_url('branding/isotipo.svg')) ?>">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <style>
    :root{--blue:#1a96d3;--blueDark:#12384e;--orange:#ff9e1b;--green:#25D366;--bg:#f5f9fc;--text:#33444f;--shadow:0 20px 50px rgba(18,56,78,.12)}
    *{box-sizing:border-box}body{margin:0;font-family:Jost,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(26,150,211,.12),transparent 24%),radial-gradient(circle at bottom right,rgba(255,158,27,.14),transparent 24%),var(--bg);color:var(--text);overflow-x:hidden}
    a{text-decoration:none}.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:54px 0}.container{width:min(1180px,92%);margin:auto}.gift-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
    .logo{width:190px;max-width:62vw;margin-bottom:24px}.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #dceaf1;box-shadow:var(--shadow);font-weight:800;color:var(--blueDark);margin-bottom:20px}
    h1{font-size:clamp(3rem,8vw,6.8rem);line-height:.92;margin:0 0 22px;color:#202124;font-weight:800;letter-spacing:0}h1 span{color:var(--blue)}
    .description{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.65;margin:0 0 24px;max-width:720px}.message-box{background:#fff;border:1px solid #dceaf1;border-radius:18px;padding:22px;box-shadow:var(--shadow);margin:24px 0}.message-box h3{margin:0 0 8px;color:var(--blueDark);font-size:1.35rem}.mini-row{display:flex;flex-wrap:wrap;gap:12px}.mini-card{background:#fff;border:1px solid #dceaf1;border-radius:999px;padding:10px 14px;font-weight:800;color:var(--blueDark)}
    .player-card{background:#fff;border:1px solid #dceaf1;border-radius:28px;padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}.player-card:before{content:'';position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--blue),var(--orange),var(--green))}
    .player-top{display:flex;gap:18px;align-items:center;margin-bottom:28px}.client-logo-wrap{width:116px;height:116px;border-radius:28px;border:3px solid #dceaf1;background:#f7fafc;display:grid;place-items:center;overflow:hidden;flex-shrink:0}.client-logo{width:100%;height:100%;object-fit:contain;padding:10px}
    .track-info h2{margin:0 0 6px;font-size:2rem;color:#202124}.track-info p{margin:0;color:#61717a;font-size:1rem}.waveform{height:130px;display:flex;gap:8px;align-items:center;justify-content:center;margin:24px 0}.waveform span{width:10px;height:42px;border-radius:999px;background:linear-gradient(180deg,var(--blue),var(--orange));transform:scaleY(.62);opacity:.72;transition:transform .18s ease,opacity .18s ease}.waveform span:nth-child(2n){height:78px;animation-delay:.12s}.waveform span:nth-child(3n){height:104px;animation-delay:.24s}.waveform.playing span{animation:playing 1.05s ease-in-out infinite;opacity:1}
    @keyframes playing{0%,100%{transform:scaleY(.35)}35%{transform:scaleY(1.2)}70%{transform:scaleY(.7)}}
    .media-preview video{width:100%;max-height:420px;border-radius:18px;background:#12384e}.controls{display:flex;align-items:center;gap:18px}.play-btn{width:68px;height:68px;border:0;border-radius:50%;background:var(--blue);color:#fff;font-size:1.8rem;display:grid;place-items:center;box-shadow:0 12px 28px rgba(26,150,211,.28);cursor:pointer}.progress-wrap{flex:1}.time-row{display:flex;justify-content:space-between;font-weight:700;color:#61717a;margin-bottom:8px}.progress{height:10px;border-radius:999px;background:#e8f4fb;overflow:hidden}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));border-radius:999px}.download-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;background:var(--green);color:#fff;border-radius:999px;padding:15px 20px;font-weight:800;box-shadow:0 12px 24px rgba(37,211,102,.25)}.footer-note{text-align:center;color:#61717a;margin-top:14px;font-size:.92rem}
    footer{padding:34px 0}.footer-box{background:#12384e;color:#fff;border-radius:22px;padding:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer-box a{color:#fff;font-weight:800}
    @media(max-width:850px){.hero{padding:34px 0}.gift-grid{grid-template-columns:1fr;gap:28px}.player-card{padding:22px}.player-top{align-items:flex-start}.client-logo-wrap{width:92px;height:92px}h1{font-size:clamp(2.7rem,16vw,5rem)}}
  </style>
</head>
<body>
  <section class="hero">
    <div class="container">
      <div class="gift-grid">
        <div>
          <img class="logo" src="<?= e(gift_asset_url('assets/img/eComercial.png')) ?>" alt="eComercial">
          <div class="badge">Tu regalo exclusivo esta listo</div>
          <h1>Tu marca ya tiene<br><span>identidad sonora</span></h1>
          <p class="description">Hola <strong><?= e($companyName) ?></strong>. Hemos preparado tu pieza exclusiva de <strong>Audio Branding</strong> para que tu marca tenga una identidad memorable, profesional y lista para usar en redes sociales, videos y campanas publicitarias.</p>
          <div class="message-box">
            <h3>Disfrutalo y hazlo sonar</h3>
            <p>Puedes escucharlo directamente desde esta pagina o descargar el archivo original para usarlo en tus Reels, TikToks, anuncios y contenido digital.</p>
          </div>
          <div class="mini-row">
            <div class="mini-card">Uso comercial</div>
            <div class="mini-card">Redes sociales</div>
            <div class="mini-card">Videos y publicidad</div>
          </div>
        </div>
        <div class="player-card">
          <div class="player-top">
            <div class="client-logo-wrap"><img src="<?= e($logoUrl) ?>" alt="<?= e($companyName) ?>" class="client-logo"></div>
            <div class="track-info">
              <h2>Audio Branding</h2>
              <p>Reproduce tu regalo exclusivo y descargalo cuando quieras.</p>
            </div>
          </div>
          <?php if ($isVideo): ?>
            <div class="media-preview"><video id="audio" controls playsinline src="<?= e($mediaUrl) ?>"></video></div>
          <?php else: ?>
            <div class="waveform" id="waveform"><?php for ($i = 0; $i < 10; $i++): ?><span></span><?php endfor; ?></div>
            <div class="controls">
              <button class="play-btn" id="playBtn" type="button" aria-label="Reproducir">▶</button>
              <div class="progress-wrap">
                <div class="time-row"><span id="currentTime">0:00</span><span id="duration">0:00</span></div>
                <div class="progress"><div class="progress-bar" id="progressBar"></div></div>
              </div>
            </div>
            <audio id="audio" src="<?= e($mediaUrl) ?>"></audio>
          <?php endif; ?>
          <a href="<?= e($downloadUrl) ?>" class="download-btn">Descargar archivo original</a>
          <div class="footer-note">Compatible con celulares, computadores y editores de video.</div>
        </div>
      </div>
    </div>
  </section>
  <footer>
    <div class="container">
      <div class="footer-box">
        <strong>eComercial</strong>
        <a href="https://wa.me/573143604300" target="_blank">WhatsApp</a>
        <a href="mailto:ecomercial@emprendo.com.co">ecomercial@emprendo.com.co</a>
      </div>
    </div>
  </footer>
  <script>
    const audio = document.getElementById('audio');
    const playBtn = document.getElementById('playBtn');
    const progressBar = document.getElementById('progressBar');
    const currentTime = document.getElementById('currentTime');
    const duration = document.getElementById('duration');
    const waveform = document.getElementById('waveform');
    let isPlaying = false;
    function formatTime(seconds){const mins=Math.floor(seconds/60||0);const secs=Math.floor(seconds%60||0);return mins+':' + (secs < 10 ? '0' + secs : secs);}
    if (playBtn && audio) {
      playBtn.addEventListener('click', () => isPlaying ? audio.pause() : audio.play());
      audio.addEventListener('play', () => {isPlaying=true;playBtn.innerHTML='❚❚';if(waveform)waveform.classList.add('playing');});
      audio.addEventListener('pause', () => {isPlaying=false;playBtn.innerHTML='▶';if(waveform)waveform.classList.remove('playing');});
      audio.addEventListener('timeupdate', () => {if(audio.duration && progressBar){progressBar.style.width=((audio.currentTime/audio.duration)*100)+'%';}if(currentTime)currentTime.textContent=formatTime(audio.currentTime);});
      audio.addEventListener('loadedmetadata', () => {if(duration)duration.textContent=formatTime(audio.duration);});
      audio.addEventListener('ended', () => {playBtn.innerHTML='▶';if(waveform)waveform.classList.remove('playing');});
    }
  </script>
</body>
</html>
User / IP	: 216.73.216.146
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64