Tul xxx Tul

Viewing: video.html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Video | Aircan</title>
  <link rel="icon" type="image/x-icon" href="images/ico.ico">
  <link rel="shortcut icon" type="image/x-icon" href="images/ico.ico">
  <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=Poppins:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    :root{
      --gradient-primary: linear-gradient(135deg, #0a0e1a 0%, #1a2332 50%, #0f1622 100%);
      --gradient-accent: linear-gradient(135deg, #00e5ff 0%, #0099ff 100%);
      --gradient-metallic: linear-gradient(135deg, #c0c5ce 0%, #e8eaed 100%);
      --gradient-dark: linear-gradient(135deg, #0b0f14 0%, #151c29 100%);
      --primary:#1a2332;
      --secondary:#00e5ff;
      --accent:#ff6b35;
      --bg:#0a0e1a;
      --bg2:#151c29;
      --light:#f8f9fa;
      --white:#ffffff;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
      color:#e8eef5;
      background: #000;
      min-height:100dvh; display:flex; flex-direction:column;
      position: relative;
      overflow-x: hidden;
    }
    body::before { content: none; }
    header{
      position:sticky; top:0; z-index:100;
      background: #000;
      border-bottom: 1px solid rgba(0,229,255,0.3);
      box-shadow: 0 12px 24px rgba(0,0,0,0.45);
    }
    .bar{ 
      display:flex; align-items:center; justify-content:space-between; 
      gap:12px; padding:16px 24px; max-width:1400px; margin:0 auto;
      position: relative; z-index: 2;
    }
    .brand{ 
      display:flex; align-items:center; gap:12px; 
      color:#dce6ef; text-decoration:none; 
      font-weight:800; letter-spacing:.3px;
      transition: transform 0.3s ease;
    }
    .brand:hover { transform: scale(1.02); }
    .brand img{ 
      height:42px; width:auto;
      filter: drop-shadow(0 4px 12px rgba(0,229,255,0.3));
    }
    .brand span{ color:#f0f7ff; font-size: 1.1rem; }
    .brand span b{ 
      color: var(--secondary);
      background: linear-gradient(135deg, #00e5ff, #0099ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .actions{ display:flex; gap:12px; position: relative; z-index: 2; }
    .btn{ 
      display:inline-flex; align-items:center; gap:10px; 
      padding:12px 18px; border-radius:16px; 
      border:1px solid rgba(0,229,255,0.3); 
      color:#f0f7ff; text-decoration:none; 
      font-weight:600; font-size: 0.95rem;
      transition: all 0.3s ease; 
      background: rgba(0,229,255,0.08);
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
    }
    .btn::before {
      content: '';
      position: absolute;
      top: 0; left: -100%; right: 100%; bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
      transition: left 0.5s ease;
    }
    .btn:hover::before { left: 100%; }
    .btn:hover{ 
      transform: translateY(-3px) scale(1.02); 
      box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 20px rgba(0,229,255,0.2);
      border-color: rgba(0,229,255,0.5);
    }
    .btn.primary{ 
      border-color: rgba(0,229,255,0.4); 
      background: linear-gradient(135deg, rgba(0,229,255,0.12), rgba(52,152,219,0.12));
    }
    .btn.accent{ 
      border-color: rgba(255,107,53,0.4); 
      background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(255,140,66,0.12));
    }
    .btn.accent:hover {
      box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 20px rgba(255,107,53,0.2);
      border-color: rgba(255,107,53,0.6);
    }

    main{ 
      flex:1; display:flex; align-items:center; justify-content:center; 
      padding:40px 24px; position: relative; z-index: 2;
    }
    .player-wrap{ 
      width:100%; max-width:1400px;
      animation: fadeInUp 0.8s ease-out;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .title{ 
      text-align:center; margin:20px auto 32px; 
      color:#f0f7ff; font-weight:800; 
      font-size: 2.2rem; letter-spacing:.4px;
      font-family: 'Playfair Display', serif;
      background: linear-gradient(135deg, #f0f7ff 0%, #00e5ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 4px 20px rgba(0,229,255,0.3);
    }

    .aspect{ 
      position:relative; width:100%; 
      padding-top:56.25%; /* 16:9 */
      border-radius:24px; overflow:hidden; 
      background: linear-gradient(135deg, #000 0%, #0a0e1a 100%);
      box-shadow: 
        0 32px 80px rgba(0,0,0,0.6),
        0 0 0 1px rgba(0,229,255,0.15) inset,
        0 0 40px rgba(0,229,255,0.1);
      position: relative;
    }
    .aspect::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, 
        rgba(0,229,255,0.05) 0%, 
        transparent 30%, 
        transparent 70%, 
        rgba(255,107,53,0.03) 100%);
      pointer-events: none;
      z-index: 1;
    }
    .aspect iframe, .aspect video{ 
      position:absolute; inset:0; width:100%; height:100%; 
      border:0; display:block; background:#000;
      z-index: 2;
    }

    .note{ 
      text-align:center; color:#b8c8d8; 
      margin-top:24px; font-size:1rem;
      font-weight: 500; letter-spacing: 0.2px;
    }
    .note a{ 
      color:#00e5ff; text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    .note a:hover {
      color: #33f0ff;
      text-shadow: 0 0 10px rgba(0,229,255,0.4);
    }

    .hidden{ display:none !important; }

    /* Responsive Design */
    @media (max-width: 900px) {
      .bar { padding: 14px 20px; max-width: 100%; }
      .actions { flex-wrap: wrap; justify-content: center; }
      .btn { min-width: 180px; }
      main { padding: 32px 20px; }
      .player-wrap { max-width: 100%; }
    }

    @media (max-width: 680px) {
      header { position: static; box-shadow: 0 8px 18px rgba(0,0,0,0.35); }
      .bar { 
        flex-direction: column; align-items: stretch; 
        text-align: center; gap: 14px; padding: 16px;
      }
      .brand { justify-content: center; }
      .brand img { height: 34px; }
      .brand span { font-size: 1rem; }
      .actions { 
        width: 100%; justify-content: center; 
        gap: 10px;
      }
      .btn { 
        flex: 1;
        min-width: auto;
        padding: 12px 16px; font-size: 0.9rem;
      }
      .title { 
        font-size: 1.75rem; margin: 6px auto 42px; 
        line-height: 1.2;
      }
      main { padding: 24px 16px; }
      .note { font-size: 0.92rem; margin-top: 18px; }
    }

    @media (max-width: 420px) {
      .bar { padding: 12px 14px; gap: 12px; }
      .brand img { height: 30px; }
      .brand span { font-size: 0.95rem; }
      .actions { gap: 8px; }
      .btn { font-size: 0.85rem; padding: 11px 14px; }
      .title { font-size: 1.5rem; margin: 4px auto 38px; }
      .aspect { border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,229,255,0.12) inset; }
    }

    @media (max-width: 340px) {
      .bar { padding: 10px 12px; }
      .actions { gap: 6px; }
      .btn { font-size: 0.8rem; padding: 10px 12px; }
      .title { font-size: 1.35rem; margin: 2px auto 34px; }
      .note { font-size: 0.85rem; }
    }
  </style>
</head>
<body>
  <header>
    <div class="bar">
      <a class="brand" href="index.html" title="Volver a Aircan">
        <img src="images/Logo.png" alt="Aircan" />
        <span>Aircan <b>Video</b></span>
      </a>
      <div class="actions">
        <a id="open-original" class="btn primary" href="#" target="_blank" rel="noopener"><i class="fa-solid fa-arrow-up-right-from-square"></i> Abrir original</a>
        <a class="btn accent" href="index.html"><i class="fa-solid fa-house"></i> Inicio</a>
      </div>
    </div>
  </header>

  <main>
    <div class="player-wrap">
      <h1 id="video-title" class="title">Reproduciendo video</h1>
      <div class="aspect" id="player"></div>
      <div class="note" id="fallback-note" class="hidden"></div>
    </div>
  </main>

  <script>
    (function(){
      const params = new URLSearchParams(location.search);
      const vid = (params.get('vid') || '').trim();
      const title = (params.get('t') || 'Video').trim();

      const titleEl = document.getElementById('video-title');
      const player = document.getElementById('player');
      const fallback = document.getElementById('fallback-note');
      const openBtn = document.getElementById('open-original');

      document.title = (title ? title + ' | ' : '') + 'Aircan — Video';
      titleEl.textContent = title || 'Video';

      if (!vid || !/^https?:\/\//i.test(vid)) {
        player.innerHTML = '';
        fallback.innerHTML = 'No se pudo cargar el video. <a href="index.html">Volver</a>';
        return;
      }

      // Enlace al original
      openBtn.href = vid;

      // Detectar proveedor/tipo
      function ytId(u){
        try{
          const url = new URL(u);
          if (url.hostname.includes('youtu.be')) {
            return url.pathname.split('/').filter(Boolean)[0] || '';
          }
          if (url.hostname.includes('youtube.com')) {
            // watch?v=, embed/, shorts/
            if (url.searchParams.get('v')) return url.searchParams.get('v');
            const p = url.pathname.split('/').filter(Boolean);
            if (p[0] === 'embed' || p[0] === 'shorts') return p[1] || '';
          }
        }catch(e){}
        return '';
      }
      function vimeoId(u){
        try{
          const url = new URL(u);
          if (url.hostname.includes('vimeo.com')) {
            const m = url.pathname.match(/\/(?:video\/)?(\d+)/);
            return m ? m[1] : '';
          }
        }catch(e){}
        return '';
      }
      function isFile(u){ return /\.(mp4|webm|ogg)(?:[?#].*)?$/i.test(u); }

      const yid = ytId(vid);
      const vidVimeo = vimeoId(vid);

      if (yid) {
        player.innerHTML = `<iframe src="https://www.youtube.com/embed/${yid}?autoplay=1&rel=0&modestbranding=1" title="${title.replace(/"/g,'&quot;')}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen loading="lazy"></iframe>`;
        return;
      }
      if (vidVimeo) {
        player.innerHTML = `<iframe src="https://player.vimeo.com/video/${vidVimeo}?autoplay=1" title="${title.replace(/"/g,'&quot;')}" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>`;
        return;
      }
      if (isFile(vid)) {
        player.innerHTML = `<video src="${vid}" controls autoplay muted playsinline></video>`;
        return;
      }

      // Fallback: no reconocido -> iframe genérico seguro si es https
      player.innerHTML = `<iframe src="${vid}" title="${title.replace(/"/g,'&quot;')}" allow="autoplay; fullscreen; picture-in-picture" loading="lazy"></iframe>`;
      fallback.textContent = '';
    })();
  </script>
</body>
</html>
User / IP	: 216.73.217.33
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