Skip to content

Instantly share code, notes, and snippets.

@ramons03

ramons03/helloworld.html

Created February 11, 2012 22:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ramons03/1804701 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ramons03/1804701 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Hola mundo
Raw
helloworld.html
<!DOCTYPE html>
<html>
<head>
<title>Hola mundo desde el titulo</title>
</head>
<body>
<h1>Hola Mundo</h1>
<br />
<h1>HTML Hypertext Markup Language</h1>
<h2>Elementos</h2>
<ul>
<li>Etiquetas que abren y cierran &lt foo &gt &lt /foo &gt </li>
<li>Tienen atributos: &lt img src="imagen.jpg"&gt &lt /img &gt </li>
</ul>
<h2>Entidades</h2>
<ul>
<li>Esto es un ampersand &amp </li>
<li>Esto es un underbraket &lt </li>
<li>Esto es un otrobraket &gt </li>
</ul>
</body>
</html>
@haziel77
Copy link

haziel77 commented Mar 16, 2025

4w6xs2cfryfvr your api key

@23m2026y
Copy link

23m2026y commented Mar 11, 2026

<title>Mensaje en una Botella</title> <style> :root { --sky-top: #0a0a1a; --sky-bottom: #1a1a3a; --ocean-deep: #0d1b2a; --ocean-mid: #1b3a4b; --ocean-light: #2d5a6b; --moon-glow: #f4e9d8; --moon-reflect: rgba(244, 233, 216, 0.3); --parchment: #f5e6c8; --parchment-dark: #d4c4a8; --ink: #2c1810; --cork: #8b6914; } 
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'Cormorant Garamond', serif;
        overflow: hidden;
        background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 40%, var(--ocean-deep) 100%);
        min-height: 100vh;
    }

    .scene {
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    /* STARS */
    .stars {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 50%;
        pointer-events: none;
    }

    .star {
        position: absolute;
        background: var(--moon-glow);
        border-radius: 50%;
        animation: twinkle var(--duration, 3s) ease-in-out infinite;
        animation-delay: var(--delay, 0s);
    }

    @keyframes twinkle {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.2); }
    }

    /* MOON */
    .moon {
        position: absolute;
        top: 8%; left: 15%;
        width: 80px; height: 80px;
        background: radial-gradient(circle at 30% 30%, #fff 0%, var(--moon-glow) 50%, #d4c4a8 100%);
        border-radius: 50%;
        box-shadow: 0 0 60px 20px rgba(244, 233, 216, 0.3), 0 0 100px 40px rgba(244, 233, 216, 0.15);
        animation: moonGlow 8s ease-in-out infinite;
        transition: transform 0.3s ease;
    }

    .moon::before {
        content: '';
        position: absolute;
        width: 20px; height: 20px;
        background: rgba(150, 140, 120, 0.3);
        border-radius: 50%;
        top: 20%; left: 25%;
    }

    @keyframes moonGlow {
        0%, 100% { box-shadow: 0 0 60px 20px rgba(244, 233, 216, 0.3), 0 0 100px 40px rgba(244, 233, 216, 0.15); }
        50% { box-shadow: 0 0 80px 30px rgba(244, 233, 216, 0.4), 0 0 120px 50px rgba(244, 233, 216, 0.2); }
    }

    .moon-reflection {
        position: absolute;
        top: 45%; left: 15%;
        width: 60px; height: 200px;
        background: linear-gradient(180deg, var(--moon-reflect) 0%, transparent 100%);
        border-radius: 50%;
        filter: blur(8px);
        opacity: 0.5;
        animation: reflectionShimmer 4s ease-in-out infinite;
    }

    @keyframes reflectionShimmer {
        0%, 100% { transform: scaleX(1) scaleY(1); opacity: 0.5; }
        50% { transform: scaleX(1.2) scaleY(1.1); opacity: 0.7; }
    }

    /* OCEAN */
    .ocean {
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 55%;
    }

    .wave {
        position: absolute;
        width: 200%; height: 100%;
        left: -50%;
        animation: wave var(--speed, 8s) ease-in-out infinite;
        transition: transform 0.2s ease;
    }

    .wave-back { --speed: 12s; opacity: 0.6; }
    .wave-mid { --speed: 8s; opacity: 0.8; }
    .wave-front { --speed: 6s; }

    .wave svg { position: absolute; bottom: 0; width: 100%; height: auto; }

    @keyframes wave {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(2%); }
    }

    .foam-container {
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 55%;
        pointer-events: none;
    }

    .foam {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        filter: blur(2px);
        animation: foamFloat var(--float-duration, 6s) ease-in-out infinite;
    }

    @keyframes foamFloat {
        0%, 100% { transform: translateY(0) translateX(0); }
        25% { transform: translateY(-5px) translateX(10px); }
        75% { transform: translateY(3px) translateX(-5px); }
    }

    /* BOTTLE */
    .bottle-container {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        z-index: 10;
        transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .bottle-container:hover { transform: translate(-50%, -50%) scale(1.05); }

    .bottle-container.opened {
        transform: translate(-50%, -50%) scale(1.3) translateY(-50px);
        pointer-events: none;
    }

    .bottle {
        position: relative;
        width: 100px; height: 200px;
        animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(-3deg); }
        50% { transform: translateY(-15px) rotate(3deg); }
    }

    .bottle-body {
        position: absolute;
        bottom: 0; left: 50%;
        transform: translateX(-50%);
        width: 70px; height: 140px;
        background: linear-gradient(90deg, rgba(150, 180, 200, 0.1) 0%, rgba(200, 220, 240, 0.25) 30%, rgba(255, 255, 255, 0.35) 50%, rgba(200, 220, 240, 0.25) 70%, rgba(150, 180, 200, 0.1) 100%);
        border-radius: 10px 10px 25px 25px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: inset 5px 0 20px rgba(255, 255, 255, 0.2), inset -5px 0 15px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .bottle-neck {
        position: absolute;
        bottom: 135px; left: 50%;
        transform: translateX(-50%);
        width: 28px; height: 40px;
        background: linear-gradient(90deg, rgba(150, 180, 200, 0.1) 0%, rgba(200, 220, 240, 0.25) 50%, rgba(150, 180, 200, 0.1) 100%);
        border-radius: 3px 3px 0 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: none;
    }

    .bottle-lip {
        position: absolute;
        bottom: 172px; left: 50%;
        transform: translateX(-50%);
        width: 34px; height: 10px;
        background: linear-gradient(90deg, rgba(150, 180, 200, 0.15) 0%, rgba(200, 220, 240, 0.3) 50%, rgba(150, 180, 200, 0.15) 100%);
        border-radius: 3px 3px 0 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .cork {
        position: absolute;
        bottom: 175px; left: 50%;
        transform: translateX(-50%);
        width: 26px; height: 25px;
        background: linear-gradient(180deg, #a67c00 0%, var(--cork) 30%, #6b4e00 100%);
        border-radius: 3px 3px 5px 5px;
        box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.3), inset -2px -2px 5px rgba(0, 0, 0, 0.3);
        transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        z-index: 5;
    }

    .cork.pop {
        transform: translateX(-50%) translateY(-100px) rotate(45deg);
        opacity: 0;
    }

    .scroll-preview {
        position: absolute;
        bottom: 30px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 60px;
        background: linear-gradient(90deg, var(--parchment-dark) 0%, var(--parchment) 50%, var(--parchment-dark) 100%);
        border-radius: 3px;
        opacity: 0.8;
    }

    .water-drop {
        position: absolute;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(200, 220, 240, 0.3));
        border-radius: 50%;
        animation: dropSlide var(--slide-duration, 5s) ease-in-out infinite;
    }

    @keyframes dropSlide {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(5px); }
    }

    .click-hint {
        position: absolute;
        bottom: -40px; left: 50%;
        transform: translateX(-50%);
        color: var(--moon-glow);
        font-size: 14px;
        animation: pulse 2s ease-in-out infinite;
        white-space: nowrap;
    }

    @keyframes pulse {
        0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
        50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
    }

    /* PARCHMENT */
    .parchment-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        pointer-events: none;
        opacity: 0;
        transition: background 0.5s ease;
    }

    .parchment-overlay.active {
        background: rgba(0, 0, 0, 0.6);
        pointer-events: auto;
        opacity: 1;
    }

    .parchment {
        position: relative;
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        background: linear-gradient(135deg, transparent 0%, rgba(139, 119, 101, 0.1) 100%), linear-gradient(90deg, var(--parchment-dark) 0%, var(--parchment) 10%, var(--parchment) 90%, var(--parchment-dark) 100%);
        border-radius: 5px;
        padding: 50px 40px 40px;
        transform: translateY(100vh) rotate(-5deg) scale(0.5);
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
    }

    .parchment-overlay.active .parchment {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }

    .parchment-content { position: relative; z-index: 1; }

    .parchment-title {
        font-family: 'Caveat', cursive;
        font-size: 32px;
        color: var(--ink);
        text-align: center;
        margin-bottom: 25px;
        line-height: 1.3;
    }

    .parchment-message {
        font-family: 'Cormorant Garamond', serif;
        font-size: 20px;
        line-height: 1.8;
        color: var(--ink);
        text-align: center;
        margin-bottom: 30px;
        font-style: italic;
    }

    .parchment-signature {
        font-family: 'Caveat', cursive;
        font-size: 26px;
        color: var(--ink);
        text-align: center;
        margin-top: 20px;
    }

    .parchment-date {
        font-family: 'Cormorant Garamond', serif;
        font-size: 14px;
        color: rgba(44, 24, 16, 0.6);
        text-align: center;
        margin-top: 15px;
    }

    .close-btn {
        position: absolute;
        top: 15px; right: 15px;
        width: 30px; height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--ink);
        opacity: 0.5;
        transition: all 0.3s ease;
    }

    .close-btn:hover { opacity: 1; transform: rotate(90deg); }
    .close-btn svg { width: 100%; height: 100%; }

    .decorative-line {
        width: 60%; height: 1px;
        background: linear-gradient(90deg, transparent, var(--ink), transparent);
        margin: 20px auto;
        opacity: 0.3;
    }

    /* MUSIC BUTTON */
    .music-btn {
        position: fixed;
        bottom: 25px; right: 25px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 24px;
        background: rgba(244, 233, 216, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(244, 233, 216, 0.4);
        border-radius: 50px;
        color: var(--moon-glow);
        cursor: pointer;
        font-family: 'Cormorant Garamond', serif;
        font-size: 18px;
        font-weight: 600;
        transition: all 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }

    .music-btn:hover {
        background: rgba(244, 233, 216, 0.35);
        transform: scale(1.05);
    }

    .music-btn.playing {
        background: rgba(244, 233, 216, 0.4);
        box-shadow: 0 0 30px rgba(244, 233, 216, 0.5);
    }

    .music-icon { width: 26px; height: 26px; }
    .music-btn.playing .music-icon { animation: musicPulse 0.8s ease-in-out infinite; }

    @keyframes musicPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.15); }
    }

    .visualizer { display: flex; align-items: center; gap: 3px; height: 24px; }

    .visualizer-bar {
        width: 4px;
        background: var(--moon-glow);
        border-radius: 2px;
        animation: visualize 0.5s ease-in-out infinite paused;
    }

    .music-btn.playing .visualizer-bar { animation-play-state: running; }

    .visualizer-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
    .visualizer-bar:nth-child(2) { height: 18px; animation-delay: 0.1s; }
    .visualizer-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
    .visualizer-bar:nth-child(4) { height: 22px; animation-delay: 0.15s; }
    .visualizer-bar:nth-child(5) { height: 16px; animation-delay: 0.25s; }

    @keyframes visualize {
        0%, 100% { transform: scaleY(0.4); }
        50% { transform: scaleY(1); }
    }

    .music-text { letter-spacing: 1px; min-width: 60px; }

    /* RESPONSIVE */
    @media (max-width: 640px) {
        .moon { width: 60px; height: 60px; top: 5%; left: 10%; }
        .moon-reflection { top: 42%; left: 10%; width: 45px; height: 150px; }
        .bottle { width: 80px; height: 160px; }
        .bottle-body { width: 56px; height: 112px; }
        .bottle-neck { bottom: 108px; width: 22px; height: 32px; }
        .bottle-lip { bottom: 138px; width: 27px; height: 8px; }
        .cork { bottom: 140px; width: 21px; height: 20px; }
        .scroll-preview { width: 32px; height: 48px; }
        .parchment { padding: 40px 25px 30px; }
        .parchment-title { font-size: 26px; }
        .parchment-message { font-size: 18px; }
        .music-btn { bottom: 15px; right: 15px; padding: 12px 18px; font-size: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
</style>

<div class="scene">
    <div class="stars" id="stars"></div>
    <div class="moon" id="moon"></div>
    <div class="moon-reflection" id="moonReflection"></div>

    <div class="ocean">
        <div class="wave wave-back">
            <svg viewBox="0 0 1440 320" preserveAspectRatio="none">
                <path fill="rgba(13, 27, 42, 0.8)" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,149.3C672,149,768,203,864,208C960,213,1056,171,1152,154.7C1248,139,1344,149,1392,154.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
        </div>
        <div class="wave wave-mid">
            <svg viewBox="0 0 1440 320" preserveAspectRatio="none">
                <path fill="rgba(27, 58, 75, 0.9)" d="M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,117.3C672,117,768,171,864,181.3C960,192,1056,160,1152,144C1248,128,1344,128,1392,128L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
        </div>
        <div class="wave wave-front">
            <svg viewBox="0 0 1440 320" preserveAspectRatio="none">
                <path fill="rgba(45, 90, 107, 0.95)" d="M0,224L48,218.7C96,213,192,203,288,218.7C384,235,480,277,576,272C672,267,768,213,864,197.3C960,181,1056,203,1152,218.7C1248,235,1344,245,1392,250.7L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
            </svg>
        </div>
    </div>

    <div class="foam-container" id="foam"></div>

    <div class="bottle-container" id="bottleContainer" role="button" aria-label="Abrir botella" tabindex="0">
        <div class="bottle" id="bottle">
            <div class="bottle-lip"></div>
            <div class="bottle-neck"></div>
            <div class="bottle-body">
                <div class="water-drop" style="top: 20%; left: 15%; width: 6px; height: 8px; --slide-duration: 4s;"></div>
                <div class="water-drop" style="top: 45%; right: 20%; width: 4px; height: 5px; --slide-duration: 6s;"></div>
            </div>
            <div class="scroll-preview"></div>
            <div class="cork" id="cork"></div>
        </div>
        <span class="click-hint">Haz clic para abrir</span>
    </div>

    <div class="parchment-overlay" id="parchmentOverlay" role="dialog" aria-modal="true">
        <div class="parchment">
            <button class="close-btn" id="closeBtn" aria-label="Cerrar">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
            <div class="parchment-content">
                <!-- MENSAJE ACTUALIZADO -->
                <h2 class="parchment-title">Te amo inmensamente,<br>ahora, mañana y siempre</h2>
                <div class="decorative-line"></div>
                <p class="parchment-message">
                    Empecé a soñar desde que empecé a amar.<br><br>
                    Eres un sueño hecho realidad para mí.<br><br>
                    Eres todo lo que siempre soñé, bonita y más.
                </p>
                <div class="decorative-line"></div>
                <p class="parchment-signature">Gracias por cada día a tu lado</p>
                <p class="parchment-date" id="parchmentDate"></p>
            </div>
        </div>
    </div>
</div>

<button class="music-btn" id="musicBtn" aria-label="Reproducir música">
    <svg class="music-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M9 18V5l12-2v13"/>
        <circle cx="6" cy="18" r="3"/>
        <circle cx="18" cy="16" r="3"/>
    </svg>
    <span class="music-text">Play</span>
</button>

<script>
    // === ELEMENTOS ===
    const starsContainer = document.getElementById('stars');
    const foamContainer = document.getElementById('foam');
    const bottleContainer = document.getElementById('bottleContainer');
    const bottle = document.getElementById('bottle');
    const cork = document.getElementById('cork');
    const parchmentOverlay = document.getElementById('parchmentOverlay');
    const closeBtn = document.getElementById('closeBtn');
    const parchmentDate = document.getElementById('parchmentDate');
    const moon = document.getElementById('moon');
    const moonReflection = document.getElementById('moonReflection');
    const musicBtn = document.getElementById('musicBtn');
    const bgMusic = document.getElementById('bgMusic');

    // Fecha
    parchmentDate.textContent = new Date().toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' });

    // === GENERADORES ===
    function createStars() {
        const count = window.innerWidth < 640 ? 60 : 100;
        starsContainer.innerHTML = '';
        for (let i = 0; i < count; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.cssText = `
                width: ${Math.max(1, Math.random() * 3)}px;
                height: ${Math.max(1, Math.random() * 3)}px;
                left: ${Math.random() * 100}%; top: ${Math.random() * 100}%;
                --duration: ${2 + Math.random() * 4}s; --delay: ${Math.random() * 3}s;
            `;
            starsContainer.appendChild(star);
        }
    }

    function createFoam() {
        const count = window.innerWidth < 640 ? 15 : 25;
        foamContainer.innerHTML = '';
        for (let i = 0; i < count; i++) {
            const foam = document.createElement('div');
            foam.className = 'foam';
            foam.style.cssText = `
                width: ${Math.max(3, Math.random() * 8)}px;
                height: ${Math.max(3, Math.random() * 8)}px;
                left: ${Math.random() * 100}%; top: ${40 + Math.random() * 20}%;
                --float-duration: ${4 + Math.random() * 4}s; animation-delay: ${Math.random() * 2}s;
            `;
            foamContainer.appendChild(foam);
        }
    }

    // === BOTELLA ===
    function openBottle() {
        if (bottleContainer.classList.contains('opened')) return;
        bottleContainer.classList.add('opened');
        bottle.style.animation = 'none';
        setTimeout(() => cork.classList.add('pop'), 300);
        setTimeout(() => parchmentOverlay.classList.add('active'), 800);
    }

    function closeParchment() {
        parchmentOverlay.classList.remove('active');
        setTimeout(() => {
            bottleContainer.classList.remove('opened');
            cork.classList.remove('pop');
            bottle.style.animation = '';
        }, 500);
    }

    bottleContainer.addEventListener('click', openBottle);
    bottleContainer.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openBottle(); } });
    closeBtn.addEventListener('click', closeParchment);
    parchmentOverlay.addEventListener('click', (e) => { if (e.target === parchmentOverlay) closeParchment(); });
    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && parchmentOverlay.classList.contains('active')) closeParchment(); });

    // === PARALLAX ===
    const waves = document.querySelectorAll('.wave');
    document.addEventListener('mousemove', (e) => {
        const x = (e.clientX - window.innerWidth / 2);
        const y = (e.clientY - window.innerHeight / 2);
        moon.style.transform = `translate(${x * 0.01}px, ${y * 0.01}px)`;
        moonReflection.style.transform = `translate(${x * 0.005}px, ${y * 0.005}px)`;
        waves.forEach((wave, i) => wave.style.transform = `translateX(${x * 0.005 * (i + 1)}px)`);
    });

    // === MÚSICA ===
    let isPlaying = false;
    bgMusic.volume = 1.0;

    function createVisualizer() {
        const visualizer = document.createElement('div');
        visualizer.className = 'visualizer';
        for (let i = 0; i < 5; i++) {
            const bar = document.createElement('div');
            bar.className = 'visualizer-bar';
            visualizer.appendChild(bar);
        }
        return visualizer;
    }

    function toggleMusic() {
        if (isPlaying) {
            bgMusic.pause();
            musicBtn.classList.remove('playing');
            musicBtn.innerHTML = `<svg class="music-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg><span class="music-text">Play</span>`;
            isPlaying = false;
        } else {
            bgMusic.play().then(() => {
                musicBtn.classList.add('playing');
                musicBtn.innerHTML = '';
                musicBtn.appendChild(createVisualizer());
                const span = document.createElement('span');
                span.className = 'music-text';
                span.textContent = ' Pausar';
                musicBtn.appendChild(span);
                isPlaying = true;
            }).catch(err => {
                alert("Haz clic en algún lugar de la página primero, y luego presiona el botón de música.");
            });
        }
    }

    musicBtn.addEventListener('click', toggleMusic);

    // === INIT ===
    createStars();
    createFoam();
    window.addEventListener('resize', () => { createStars(); createFoam(); });
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment