🤖 Cannot save fiddle

[amaan02122004-boop]

Error code

ERRW:0.7:PU0.09:SJ0.7:AS

Were you logged in?

Yes

Your username (if logged in)

admin2323

Your HTML

<!-- Corner Logo -->
<img src="https://i.postimg.cc/PCN1J1z3/logo.png" class="cornerLogo">

<!-- Dance Intro -->
<div id="danceIntro"></div>

<!-- Scenes -->
<div id="scene1" class="scene">
    <h1>Do You Remember?</h1>
    <p>The music. The energy. The madness.</p>
</div>

<div id="scene2" class="scene">
  <div class="mediaWrapper">
    <img src="https://i.postimg.cc/gxr3j3qk/image1.jpg" class="media">
    <img src="https://i.postimg.cc/sM15x59M/image2.jpg" class="media">
  </div>
  <p>This was us.</p>
</div>

<div id="scene3" class="scene">
    <h1>Then Everything Paused.</h1>
    <p>Lights off. Silence. Doors closed.</p>
</div>

<div id="scene4" class="scene">
    <h1>But We Never Quit.</h1>
    <p>We rebuilt. We evolved. We prepared.</p>
</div>

<div id="scene5" class="scene">
    <img src="https://i.postimg.cc/PCN1J1z3/logo.png" class="revealLogo">
    <h1>WE. ARE. BACK.</h1>
</div>

<div id="scene6" class="scene">
    <h1>Grand Reopening – 15th March</h1>
    <div class="countdown" id="countdown"></div>
    <p>This invite is exclusively for our special guests.</p>
    <button onclick="joinNow()">I'M IN</button>
    <div class="instagramInfo">
        More info → 
        <a href="https://www.instagram.com/dlife_thedancestudio" target="_blank">@dlife_thedancestudio</a>
    </div>
</div>

Your JavaScript

// Elements
const danceIntro = document.getElementById("danceIntro");
const ambient = new Audio("https://assets.mixkit.co/sfx/preview/mixkit-dark-ambient-1242.mp3"); 
ambient.loop = true;
const whoosh = new Audio("https://assets.mixkit.co/sfx/preview/mixkit-fast-woosh-transition-1318.mp3");
const riser = new Audio("https://assets.mixkit.co/sfx/preview/mixkit-cinematic-riser-1273.mp3");
const boom = new Audio("https://assets.mixkit.co/sfx/preview/mixkit-impact-woosh-1486.mp3");
const clickSound = new Audio("https://assets.mixkit.co/sfx/preview/mixkit-modern-technology-select-3124.mp3");
const popSound = new Audio("https://assets.mixkit.co/sfx/preview/mixkit-fast-pop-2430.mp3");

const introText = "D'Life".split("");
const totalScenes = 6;
let currentScene = 1;

// Create letters for dance intro
introText.forEach((char,i)=>{
    const span = document.createElement("span");
    span.classList.add("letter");
    span.innerText = char;
    danceIntro.appendChild(span);
});

// Animate letters sequentially
function animateIntro(callback){
    const letters = document.querySelectorAll(".letter");
    letters.forEach((el,i)=>{
        setTimeout(()=>{
            el.style.opacity='1';
            el.style.transform='translateY(0) scale(1)';
            el.style.transition='all 0.6s ease';
            popSound.currentTime=0; 
            popSound.play();
        }, i*250);
    });
    setTimeout(callback, letters.length*250 + 800);
}

// Scene transitions
function nextScene(){
    const prev = document.getElementById("scene"+currentScene);
    prev.classList.remove("active");
    currentScene++;
    if(currentScene>totalScenes) return;
    const next = document.getElementById("scene"+currentScene);
    next.classList.add("active");
    const mediaItems = next.querySelectorAll(".media");
    mediaItems.forEach((el,i)=>{
        setTimeout(()=>{el.classList.add("activeMedia");}, i*400);
    });
}

// Countdown
const countdownEl = document.getElementById("countdown");
const eventDate = new Date("March 15, 2026 00:00:00").getTime();
setInterval(()=>{
    const now = new Date().getTime();
    const gap = eventDate - now;
    if(gap<0){countdownEl.innerHTML = "Event Started!"; return;}
    const days = Math.floor(gap / (1000*60*60*24));
    const hours = Math.floor((gap % (1000*60*60*24))/(1000*60*60));
    const mins = Math.floor((gap % (1000*60*60))/(1000*60));
    const secs = Math.floor((gap % (1000*60))/1000);
    countdownEl.innerHTML = `${days}D : ${hours}H : ${mins}M : ${secs}S`;
},1000);

// Start experience on first click
document.body.addEventListener("click", function startExperience(){
    ambient.play();
    animateIntro(()=>{
        danceIntro.style.display='none';
        document.getElementById("scene1").classList.add("active");
        // Scene timeline chained
        setTimeout(()=>{ whoosh.play(); nextScene(); }, 4000);
        setTimeout(()=>{ whoosh.play(); nextScene(); }, 9000);
        setTimeout(()=>{ whoosh.play(); nextScene(); }, 13000);
        setTimeout(()=>{ riser.play(); nextScene(); }, 17000);
        setTimeout(()=>{ boom.play(); nextScene(); }, 21000);
    });
    document.body.removeEventListener("click", startExperience);
});

// Join button
function joinNow(){
    clickSound.play();
    setTimeout(()=>{ 
        window.location.href="https://wa.me/919156379706?text=I%20am%20in%20for%20DLife%20Grand%20Reopening%20on%2015th%20March!"; 
    },400);
}

Your CSS

*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif;}
body{background:black;color:white;overflow:hidden;text-align:center;}
.cornerLogo{position:fixed;top:15px;left:15px;width:70px;opacity:0.85;z-index:1000;transition: transform 0.6s ease;}
.cornerLogo:hover{transform: scale(1.1);}

/* Dance Intro */
#danceIntro{
    position:absolute;top:0;left:0;width:100%;height:100vh;
    display:flex;justify-content:center;align-items:center;gap:10px;
    background:black;z-index:1000;flex-wrap:wrap;
}
.letter{
    font-size:60px;font-weight:900;color:#25D366;opacity:0;display:inline-block;
    text-shadow:0 0 10px #25D366,0 0 20px #25D366,0 0 40px #25D366;
    transform: translateY(120px) scale(0.5);
}

/* Scenes */
.scene{
    position:absolute;width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:20px;opacity:0;transform: translateY(50px);transition: all 1s ease;
}
.active{opacity:1;transform: translateY(0);}
h1{font-size:34px;font-weight:900;margin-bottom:15px;text-transform: uppercase;letter-spacing:1px;}
p{font-size:16px;opacity:.85;max-width:90%;line-height:1.4;position:relative; z-index:10;text-align:center;}
.mediaWrapper{position: relative;display: flex;flex-direction: column;align-items: center;z-index:1;}
.media{width:95%;max-width:350px;margin-bottom:20px;border-radius:12px;opacity:0;transform: scale(0.95);transition: all 1.2s ease;}
.media.activeMedia{opacity:1;transform: scale(1);}
.revealLogo{width:150px;margin-bottom:30px;opacity:0;transform: translateY(-30px);transition: all 1s ease;}
.countdown{font-size:22px;letter-spacing:2px;margin:15px 0 20px 0;font-weight:700;}
button{margin-top:15px;padding:14px 30px;font-weight:800;border:none;cursor:pointer;background:#25D366;color:white;font-size:16px;animation:pulse 2s infinite;border-radius:8px;transition: transform 0.3s ease, box-shadow 0.3s ease;}
button:hover{transform: scale(1.05);box-shadow: 0 0 12px #25D366;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 20px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.instagramInfo{position:relative;margin-top:12px;font-size:12px;color:#25D366;text-shadow:0 0 6px #25D366;opacity:0.9;}
.instagramInfo a{color:#25D366;text-decoration:none;font-weight:700;}

/* Mobile tweaks */
@media(max-width:480px){
    h1{font-size:28px;}
    p{font-size:14px;line-height:1.3;}
    .letter{font-size:45px;}
    .media{max-width:90%;}
    .revealLogo{width:120px;}
    .cornerLogo{width:60px;top:10px;left:10px;}
    button{padding:12px 24px;font-size:14px;}
    .countdown{font-size:18px;}
}