univers lover

<!doctype html>

<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Universo Lovers — Para mi pareja</title>
  <style>
    :root{
      --bg:#050014;
      --star:#fff6; /* estrella tenue */
      --accent:#ff6b9a; /* rosa corazón */
      --glow: 0 0 30px rgba(255,107,154,0.14);
      --card-bg: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      --glass: rgba(255,255,255,0.04);
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
    body{
      background: radial-gradient(ellipse at 20% 10%, rgba(255,107,154,0.06), transparent 10%),
                  radial-gradient(ellipse at 80% 80%, rgba(108,99,255,0.04), transparent 10%),
                  var(--bg);
      color:#f6f7fb;
      overflow:hidden;
      display:flex;align-items:center;justify-content:center;padding:3rem;
    }

    /* Contenedor central */
    .stage{
      width:min(980px,94vw);
      aspect-ratio:16/9;
      border-radius:20px;
      position:relative;
      overflow:hidden;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      display:grid;place-items:center;padding:2rem;
    }

    /* Estrellas (repetidas por CSS) */
    .starfield{
      position:absolute;inset:0;pointer-events:none;
      background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9) 1px, transparent 1px),
                        radial-gradient(circle at 70% 10%, rgba(255,255,255,0.7) 1px, transparent 1px),
                        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.6) 1px, transparent 1px);
      background-size: 6px 6px, 8px 8px, 5px 5px;
      opacity:0.9;filter:blur(0.2px);
      transform:translateZ(0);
      mix-blend-mode:screen;
    }

    /* Particle stars using pseudo elements */
    .starfield::before, .starfield::after{
      content:"";position:absolute;inset:0;
      background-repeat:repeat;
      background-image:
        radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px);
      background-size: 10px 10px, 18px 18px;
      opacity:0.6;animation: drift 60s linear infinite;
    }
    .starfield::after{opacity:0.25;animation-duration:120s}
    @keyframes drift{from{transform:translateY(0)}to{transform:translateY(-200px)}}

    /* Corazones flotantes */
    .hearts{
      position:absolute;inset:0;pointer-events:none;overflow:hidden;
    }
    .heart{
      position:absolute;left:50%;top:60%;width:36px;height:36px;
      transform-origin:center bottom;opacity:0.95;
      filter:drop-shadow(0 6px 20px rgba(255,107,154,0.12));
      animation: floatUp linear infinite;
    }
    .heart svg{width:100%;height:100%;display:block}
    @keyframes floatUp{
      0%{transform:translate3d(-50%,0,0) scale(0.9) rotate(0deg);opacity:0}
      5%{opacity:1}
      100%{transform:translate3d(calc(-50% + var(--x,0) * 1px),calc(-800px + var(--y,0) * 1px),0) scale(1.12) rotate(20deg);opacity:0}
    }

    /* Mensaje central */
    .card{
      z-index:6;position:relative;width:85%;max-width:820px;padding:2.2rem;border-radius:18px;background:var(--card-bg);backdrop-filter: blur(6px) saturate(120%);
      border:1px solid rgba(255,255,255,0.04);text-align:center;box-shadow:var(--glow);
    }
    .title{
      font-size:clamp(22px,4vw,42px);margin:0 0 0.4rem 0;letter-spacing:0.6px;font-weight:700;color:#fff
    }
    .subtitle{margin:0 0 1.2rem 0;color:rgba(255,255,255,0.78);font-size:clamp(14px,1.6vw,18px)}

    .message{
      font-size:clamp(14px,1.6vw,18px);line-height:1.45;margin:0 0 1.2rem 0;color:rgba(255,255,255,0.92)
    }

    .cta{
      display:inline-grid;grid-auto-flow:column;gap:12px;align-items:center;justify-content:center
    }
    .btn{
      padding:10px 18px;border-radius:999px;border:none;background:linear-gradient(90deg,#ff8bb0,#ff5f9a);color:white;font-weight:600;cursor:pointer;box-shadow:0 6px 22px rgba(255,107,154,0.16);
    }
    .btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff}

    /* Subtle constellation line */
    .constellation{position:absolute;left:8%;top:6%;width:40%;height:40%;opacity:0.06;z-index:2;background-image:linear-gradient(145deg, rgba(255,255,255,0.02), transparent);mix-blend-mode:screen}

    /* Responsive tweaks */
    @media (max-width:580px){
      .stage{padding:1rem;border-radius:12px}
      .card{padding:1.4rem}
    }

  </style>
</head>
<body>
  <div class="stage" role="main" aria-labelledby="titulo">
    <div class="starfield" aria-hidden="true"></div>
    <div class="constellation" aria-hidden="true"></div>

    <div class="hearts" id="hearts"></div>

    <div class="card" id="card">
      <h1 class="title" id="titulo">Universo Lovers</h1>
      <p class="subtitle">Un universo entero sólo para nosotros</p>
      <p class="message" id="mensaje">Bajo las mismas estrellas encontré tu luz. Gracias por hacer mi mundo más brillante — para siempre tuyo/a ❤️</p>

      <div class="cta">
        <button class="btn" id="btnSurprise">Sorpresa cósmica</button>
        <button class="btn secondary" id="btnCopy">Copiar dedicatoria</button>
      </div>

      <div style="margin-top:12px;font-size:12px;color:rgba(255,255,255,0.5)">Abre en VS Code y presiona <strong>Live Server</strong> para ver animaciones suaves.</div>
    </div>

    
    <audio id="audio" preload="none">
      <source src="cancion.mp3" type="audio/mpeg">
      Tu navegador no soporta audio.
    </audio>
  </div>

  <script>
    // Generar corazones aleatorios
    const heartsContainer = document.getElementById('hearts');
    function spawnHeart(){
      const el = document.createElement('div');
      el.className = 'heart';
      const size = Math.random()*30 + 24; // 24 - 54px
      el.style.width = size + 'px';
      el.style.height = size + 'px';
      // random horizontal position
      const x = Math.random() * (window.innerWidth * 0.9) - (window.innerWidth * 0.45);
      const y = Math.random() * 200;
      el.style.setProperty('--x', (Math.random()*300 - 150).toFixed(0));
      el.style.setProperty('--y', (Math.random()*200 + 80).toFixed(0));
      el.style.left = (Math.random() * 100) + '%';
      el.style.top = (60 + Math.random() * 30) + '%';
      el.style.animationDuration = (6 + Math.random()*6) + 's';
      el.style.opacity = 0;
      // SVG corazón (inline para facilidad)
      el.innerHTML = `<svg viewBox="0 0 32 29" xmlns="http://www.w3.org/2000/svg"><path fill="url(#g)" d="M23.6 0c-2.9 0-5.4 1.6-6.6 4C15.8 1.6 13.3 0 10.4 0 4.6 0 0 4.8 0 10.6 0 20.2 16 29 16 29s16-8.8 16-18.4C32 4.8 27.4 0 21.6 0z"/><defs><linearGradient id="g" x1="0" x2="1"><stop offset="0%" stop-color="#ff93b5"/><stop offset="100%" stop-color="#ff5f9a"/></linearGradient></defs></svg>`;
      heartsContainer.appendChild(el);
      // Remove after animation
      setTimeout(()=>{el.remove()}, 12000);
    }
    // Spawn a few immediately
    for(let i=0;i<7;i++) spawnHeart();
    // Then spawn randomly
    setInterval(spawnHeart, 900);

    // Button interactions
    const btnSurprise = document.getElementById('btnSurprise');
    const audio = document.getElementById('audio');
    const mensaje = document.getElementById('mensaje');
    btnSurprise.addEventListener('click', ()=>{
      // trigger a little constellation burst + play audio if available
      for(let i=0;i<18;i++) spawnHeart();
      if(audio && audio.querySelector('source') && audio.querySelector('source').src.includes('cancion.mp3')){
        try{audio.currentTime=0;audio.play()}catch(e){console.warn('No se pudo reproducir el audio automáticamente.')}
      } else {
        // If no audio file, briefly change message
        const prev = mensaje.textContent;
        mensaje.textContent = '✨ Sorpresa: te amo hasta las estrellas ✨';
        setTimeout(()=>mensaje.textContent = prev, 3400);
      }
    });

    // Copy dedication
    document.getElementById('btnCopy').addEventListener('click', async ()=>{
      try{
        await navigator.clipboard.writeText(mensaje.textContent);
        const txt = document.createElement('div');
        txt.textContent = 'Dedicatoria copiada ✓';
        txt.style.position='fixed';txt.style.left='50%';txt.style.bottom='6%';txt.style.transform='translateX(-50%)';
        txt.style.padding='8px 12px';txt.style.borderRadius='10px';txt.style.background='rgba(0,0,0,0.5)';txt.style.color='#fff';txt.style.zIndex=30;
        document.body.appendChild(txt);
        setTimeout(()=>txt.remove(),1700);
      }catch(e){alert('Tu navegador no permite copiar al portapapeles automáticamente.')}
    });

    // Small parallax mouse effect
    const stage = document.querySelector('.stage');
    window.addEventListener('mousemove', (e)=>{
      const x = (e.clientX / window.innerWidth - 0.5) * 12;
      const y = (e.clientY / window.innerHeight - 0.5) * 8;
      stage.style.transform = `translate3d(${x}px, ${y}px, 0)`;
    });

    // Accessibility: prefers-reduced-motion
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
    if(reduce.matches){
      document.querySelectorAll('.heart').forEach(h=>{h.style.animation='none'});
      document.querySelector('.starfield').style.animation='none';
      stage.style.transition='none';
    }

    // Allow customizing text by pressing 'e'
    window.addEventListener('keydown', (ev)=>{
      if(ev.key.toLowerCase()==='e'){
        const nuevo = prompt('Escribe la dedicatoria que quieras mostrar:', mensaje.textContent);
        if(nuevo!==null) mensaje.textContent = nuevo;
      }
    });

  </script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

univers lover #149

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

univers lover #149

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions