Spaces:

Meneman
/

livedance

Running

App Files Files Community

Meneman commited on Aug 24, 2025

Commit

bb3723c

verified ·

1 Parent(s): 44aa6a5

undefined - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +107 -310

index.html CHANGED Viewed

@@ -5,324 +5,121 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Belly Dance 24/7 (Global UTC)</title>
 <style>
-  :root{
-    --bg1:#1a1a2e; --bg2:#16213e; --bg3:#0f3460;
-    --gold:#f5d76e; --gold-weak:rgba(245,215,110,.8);
-    --panel:rgba(255,255,255,.06); --panel-brd:rgba(255,255,255,.15);
-    --shadow:0 8px 40px rgba(0,0,0,.5);
-  }
-  /* Base */
-  html,body{height:100%}
-  body{
-    margin:0; color:#f8f8f8; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
-    background: radial-gradient(circle at 15% 10%, var(--bg1), var(--bg2) 40%, var(--bg3) 100%);
-    overflow-x:hidden; position:relative;
-  }
-  .wrap{max-width:1080px; margin:0 auto; padding:24px 16px 48px}
-  /* Header */
-  header{text-align:center; padding:24px 0 8px}
-  .title{
-    font-size: clamp(28px, 6vw, 48px);
-    font-weight: 900;
-    background: linear-gradient(90deg, #ffe08a, #ffd166);
-    -webkit-background-clip:text; background-clip:text; color:transparent;
-    margin:0;
-  }
-  .subtitle{margin:6px 0 8px; color:rgba(255,255,255,.85)}
-  .divider{height:4px; width:120px; margin:14px auto 0;
-    background:linear-gradient(90deg, #a78bfa, #facc15); border-radius:999px; opacity:.8}
-  /* Video panel */
-  .panel{
-    position:relative; margin:20px auto 0; max-width:960px; aspect-ratio:16/9;
-    background:var(--panel); border:1px solid var(--panel-brd);
-    border-radius:20px; box-shadow:var(--shadow); backdrop-filter: blur(12px) saturate(120%);
-    overflow:hidden; transition:transform .3s ease;
-  }
-  .panel:hover{transform:scale(1.01)}
-  video{display:block; width:100%; height:100%; object-fit:cover; background:#000}
-  .chip-time{
-    position:absolute; bottom:12px; right:12px; padding:6px 10px; border-radius:6px;
-    background:rgba(0,0,0,.6); font:12px/1.2 monospace; color:#fff
-  }
-  /* Info */
-  .info{text-align:center; margin-top:16px}
-  .v-title{
-    font-size: clamp(18px, 3.5vw, 28px); margin:0;
-    background: linear-gradient(90deg, #fff1a8, #ffd166);
-    -webkit-background-clip:text; background-clip:text; color:transparent;
-    font-weight:700;
-  }
-  .v-meta{margin:6px 0 0; color:rgba(255,255,255,.8); font-size:14px}
-  /* Schedule */
-  .schedule{
-    max-width:640px; margin:22px auto 0; background:rgba(0,0,0,.35);
-    border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; backdrop-filter: blur(6px);
-    box-shadow:0 6px 24px rgba(0,0,0,.35)
-  }
-  .schedule h3{margin:0 0 12px; font-size:18px; color:var(--gold)}
-  .row{display:flex; gap:12px; align-items:flex-start; padding:8px 10px; border-radius:10px; transition:all .25s}
-  .row .time{width:110px; color:#ffd166; font:14px/1.3  ui-monospace, SFMono-Regular, Menlo, monospace}
-  .row .name{flex:1}
-  .row.active{
-    background: linear-gradient(90deg, rgba(255,215,0,.16), rgba(255,255,255,.06));
-    border-left:4px solid #facc15;
-  }
-  /* Footer */
-  footer{color:rgba(255,255,255,.7); text-align:center; font-size:13px; padding:20px 0}
   /* Live badge */
-  .live-badge{
-    position:fixed; top:12px; right:12px; z-index:9999;
-    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
-    background: linear-gradient(135deg, rgba(20,0,35,.75), rgba(75,0,110,.75));
-    border:1px solid rgba(255,215,0,.35); color:var(--gold);
-    font-weight:600; font-size:14px; letter-spacing:.2px; opacity:.8; backdrop-filter: blur(6px);
-    transition:opacity .2s, box-shadow .2s, transform .2s;
-  }
-  .live-badge:hover{opacity:1; box-shadow:0 0 18px rgba(250,204,21,.45), inset 0 0 10px rgba(250,204,21,.15); transform:translateY(-1px)}
-  .dot{width:8px; height:8px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 10px rgba(255,59,59,.8)}
   /* Bubbles */
-  #bubbles{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none}
-  .bubble{
-    position:absolute; bottom:-100px; border-radius:50%; background:rgba(255,255,255,.08);
-    animation:rise linear infinite;
-  }
-  @keyframes rise{
-    0% {transform:translateY(0) scale(1); opacity:.4}
-    50%{opacity:.7}
-    100%{transform:translateY(-110vh) scale(1.2); opacity:0}
-  }
-  /* Utility */
-  .muted{color:rgba(255,255,255,.8); font-size:12px; margin-top:6px}
 </style>
 </head>
 <body>
-  <!-- LIVE viewers badge -->
-  <div class="live-badge" aria-live="polite" title="Live viewers (simüle)">
-    <span class="dot" aria-hidden="true"></span>
-    <span>LIVE:</span>
-    <strong id="live-count" style="margin:0 4px;">—</strong>
-    <span>Watching</span>
-  </div>
-  <!-- Background bubbles -->
-  <div id="bubbles" aria-hidden="true"></div>
-  <div class="wrap">
-    <header>
-      <h1 class="title">Belly Dance 24/7</h1>
-      <div class="subtitle">Global synchronized performances</div>
-      <div id="header-time" class="muted">—</div>
-      <div class="divider"></div>
-    </header>
-    <main>
-      <section class="panel">
-        <video id="player" autoplay muted playsinline></video>
-        <div id="chip-time" class="chip-time"></div>
-      </section>
-      <section class="info">
-        <h2 id="v-title" class="v-title"></h2>
-        <p id="v-meta" class="v-meta"></p>
-      </section>
-      <section class="schedule" aria-label="Global Schedule (UTC)">
-        <h3>✨ Global Schedule (UTC) ✨</h3>
-        <div id="rows">
-          <div class="row"><div class="time">21:00 – 23:35</div><div class="name">Dance in Front of the Library of Alexandria</div></div>
-          <div class="row"><div class="time">23:35 – 01:28</div><div class="name">✨ Belly Dance ✨ - Sensual Dance</div></div>
-          <div class="row"><div class="time">01:28 – 06:09</div><div class="name">✨ Belly Dance ✨ Let My Dance and My Magic Work on You</div></div>
-          <div class="row"><div class="time">06:09 – 21:00</div><div class="name">Feast of Hathor</div></div>
-        </div>
-      </section>
-    </main>
-    <footer>Pre-recorded performances looped 24/7 (Global UTC)</footer>
-  </div>
 <script>
-/* =========================
-   AYARLAR (UTC sabit)
-   ========================= */
-const USE_UTC = true; // Global senkron için true
-// Videolar (tek dosyada gömülü). videos.json kullanıyorsan fetch ile de doldurabilirsin.
-const VIDEOS = [
-  {
-    title: "Dance in Front of the Library of Alexandria",
-    url: "https://www.dropbox.com/scl/fi/cdla6akuljge32vgy07ym/A-dance-in-front-of-the-Library-of-Alexandria.mp4?dl=1",
-    duration: 155, // 2:35
-    start: 21, end: 23.5833 // 23:35
-  },
-  {
-    title: "✨ Belly Dance ✨ - Sensual Dance",
-    url: "https://www.dropbox.com/scl/fi/5y9pie14fgq9h87lqcfgb/Belly-dance-sensual-dance.mp4?dl=1",
-    duration: 113, // 1:53
-    start: 23.5833, end: 1.4667 // 01:28
-  },
-  {
-    title: "✨ Belly Dance ✨ Let My Dance and My Magic Work on You",
-    url: "https://www.dropbox.com/scl/fi/guaawrmicatbah76ot22m/Belly-dance-Let-my-dance-and-my-magic-work-on-you.mp4?dl=1",
-    duration: 281, // 4:41
-    start: 1.4667, end: 6.15 // 06:09
-  },
-  {
-    title: "Feast of Hathor",
-    url: "https://www.dropbox.com/scl/fi/re9c5joysr8vhvqvhll4p/Feast-of-Hathor.mp4?dl=1",
-    duration: 208, // 3:28
-    start: 6.15, end: 21 // 21:00
-  }
 ];
-/* =========================
-   ZAMAN & SEÇİM YARDIMCILARI
-   ========================= */
-function nowHour(){ // float saat
-  const n=new Date();
-  return USE_UTC ? n.getUTCHours()+n.getUTCMinutes()/60 : n.getHours()+n.getMinutes()/60;
-}
-function fmtClockUTC(){
-  const n=new Date();
-  const utc = n.toUTCString().split(' ')[4];
-  return {local:n.toLocaleTimeString(), utc};
-}
-function inRangeWrap(h, start, end){
-  // start<end normal; start>end geceyi aşar
-  if (start<end) return h>=start && h<end;
-  return (h>=start || h<end);
-}
-function currentVideo(){
-  const h=nowHour();
-  for(const v of VIDEOS){ if(inRangeWrap(h, v.start, v.end)) return v; }
-  return VIDEOS[0];
-}
-function secToMinSec(s){const m=Math.floor(s/60), r=s%60; return `${m}:${String(r).padStart(2,'0')}`}
-/* =========================
-   OYNATICI & ÇİZELGE
-   ========================= */
-const $player = document.getElementById('player');
-const $vtitle = document.getElementById('v-title');
-const $vmeta  = document.getElementById('v-meta');
-const $chip   = document.getElementById('chip-time');
-const $rows   = document.querySelectorAll('.schedule .row');
-const $headerTime = document.getElementById('header-time');
-function updateHeaderTimes(){
-  const t = fmtClockUTC();
-  $headerTime.textContent = `Local: ${t.local} | UTC: ${t.utc}`;
-  document.getElementById('chip-time').textContent = `Local: ${t.local}`;
-}
-setInterval(updateHeaderTimes, 1000); updateHeaderTimes();
-function highlightRow(activeIndex){
-  $rows.forEach((el,i)=>{
-    if(i===activeIndex) el.classList.add('active'); else el.classList.remove('active');
-  });
-}
-function indexOfVideo(v){
-  return VIDEOS.findIndex(x=>x.title===v.title && x.start===v.start && x.end===v.end);
-}
-function playScheduled(){
-  const h=nowHour();
-  const v=currentVideo();
-  const idx=indexOfVideo(v);
-  // geçen süre -> videonun kaldığı yeri bul
-  const elapsedSec = ((h - v.start + 24) % 24) * 3600;
-  const position = Math.floor(elapsedSec % v.duration);
-  // kaynak ve bilgiler
-  if ($player.src !== v.url) $player.src = v.url;
-  $player.load();
-  $player.currentTime = position;
-  $player.loop = true;
-  $player.play().catch(()=>{ $player.muted=true; $player.play(); });
-  $vtitle.textContent = v.title;
-  $vmeta.textContent  = `Duration: ${secToMinSec(v.duration)}`;
-  highlightRow(idx);
-  // sıradaki geçiş zamanı
-  const msToNext = ((v.end - h + 24) % 24) * 3600 * 1000;
-  setTimeout(playScheduled, msToNext);
-}
-playScheduled();
-/* =========================
-   BALONCUK ARKA PLAN
-   ========================= */
-const $bubbles = document.getElementById('bubbles');
-function createBubble(){
-  const b=document.createElement('div');
-  const size = 20 + Math.random()*60; // 20..80
-  b.className='bubble';
-  b.style.width=`${size}px`; b.style.height=`${size}px`;
-  b.style.left=`${Math.random()*100}vw`;
-  b.style.animationDuration = `${15 + Math.random()*20}s`;
-  $bubbles.appendChild(b);
-  setTimeout(()=>b.remove(), 40000);
-}
-setInterval(createBubble, 1000);
-/* =========================
-   SAHTE İZLEYİCİ SAYACI (UTC)
-   ========================= */
-// Saat dilimi aralıkları ve min-max izleyici
-const BUCKETS = [
-  { start:0, end:6,   min: 500, max:1500 }, // Gece
-  { start:6, end:12,  min:1000, max:2500 }, // Sabah
-  { start:12,end:18,  min:2000, max:4000 }, // Öğlen
-  { start:18,end:24,  min:3000, max:5000 }  // Akşam
-];
-const $count = document.getElementById('live-count');
-const nf = new Intl.NumberFormat(navigator.language || 'en-US');
-function bucketFor(h){
-  for(const b of BUCKETS){ if(h>=b.start && h<b.end) return b; }
-  return BUCKETS[0];
-}
-function clamp(n,min,max){return Math.max(min, Math.min(max,n));}
-function randStep(){ // ±10..50
-  const mag = 10 + Math.floor(Math.random()*41);
-  return (Math.random()<.5?-1:1)*mag;
-}
-function nextDelay(){ return (5 + Math.random()*5)*1000; }
-let liveCount=null, liveBucket=null, liveTimer=null;
-function initLive(){
-  const h=nowHour(); // UTC çünkü USE_UTC=true
-  liveBucket = bucketFor(h);
-  const span = liveBucket.max - liveBucket.min;
-  liveCount = liveBucket.min + Math.floor(span * (0.30 + Math.random()*0.40)); // %30..%70
-  $count.textContent = nf.format(liveCount);
-}
-function tickLive(){
-  const h=nowHour();
-  const b=bucketFor(h);
-  if(b!==liveBucket){
-    liveBucket=b;
-    liveCount = clamp(liveCount + randStep(), b.min, b.max);
-  }else{
-    liveCount = clamp(liveCount + randStep(), b.min, b.max);
-  }
-  $count.textContent = nf.format(liveCount);
-  liveTimer = setTimeout(tickLive, nextDelay());
-}
-// Sekme görünürlüğü
-document.addEventListener('visibilitychange', ()=>{
-  if(document.hidden){ if(liveTimer){clearTimeout(liveTimer); liveTimer=null;} }
-  else { if(!liveTimer){ liveTimer=setTimeout(tickLive, nextDelay()); } }
-});
-initLive(); liveTimer=setTimeout(tickLive, nextDelay());
 </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Meneman/livedance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Belly Dance 24/7 (Global UTC)</title>
 <style>
+  :root{--bg1:#1a1a2e;--bg2:#16213e;--bg3:#0f3460;--gold:#f5d76e}
+  body{margin:0;color:#f8f8f8;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+    background:radial-gradient(circle at 15% 10%,var(--bg1),var(--bg2) 40%,var(--bg3) 100%);
+    overflow-x:hidden;position:relative;min-height:100vh}
+  header{text-align:center;padding:24px 0 8px}
+  h1{font-size:clamp(28px,6vw,48px);font-weight:900;
+    background:linear-gradient(90deg,#ffe08a,#ffd166);
+    -webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
+  .divider{height:4px;width:120px;margin:14px auto;background:linear-gradient(90deg,#a78bfa,#facc15);border-radius:999px;opacity:.8}
+  .panel{position:relative;margin:20px auto 0;max-width:960px;aspect-ratio:16/9;
+    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
+    border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.5);overflow:hidden}
+  video{width:100%;height:100%;object-fit:cover;background:#000}
+  .chip{position:absolute;bottom:12px;right:12px;padding:6px 10px;border-radius:6px;
+    background:rgba(0,0,0,.6);font:12px/1.2 monospace;color:#fff}
+  .info{text-align:center;margin-top:16px}
+  .info h2{font-size:clamp(18px,3.5vw,28px);margin:0;
+    background:linear-gradient(90deg,#fff1a8,#ffd166);
+    -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
+  .info p{margin:6px 0 0;color:rgba(255,255,255,.8);font-size:14px}
+  .schedule{max-width:640px;margin:22px auto;background:rgba(0,0,0,.35);
+    border-radius:16px;padding:18px}
+  .schedule h3{margin:0 0 12px;font-size:18px;color:var(--gold)}
+  .row{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:10px}
+  .row .time{width:110px;color:#ffd166;font:14px/1.3 monospace}
+  .row.active{background:linear-gradient(90deg,rgba(255,215,0,.16),rgba(255,255,255,.06));
+    border-left:4px solid #facc15}
+  footer{text-align:center;color:rgba(255,255,255,.7);font-size:13px;padding:20px}
   /* Live badge */
+  .live-badge{position:fixed;top:12px;right:12px;z-index:9999;display:inline-flex;align-items:center;gap:8px;
+    padding:8px 12px;border-radius:999px;background:linear-gradient(135deg,rgba(20,0,35,.75),rgba(75,0,110,.75));
+    border:1px solid rgba(255,215,0,.35);color:var(--gold);font-weight:600;font-size:14px;opacity:.8}
+  .live-badge:hover{opacity:1;box-shadow:0 0 18px rgba(250,204,21,.45),inset 0 0 10px rgba(250,204,21,.15)}
+  .dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px rgba(255,59,59,.8)}
   /* Bubbles */
+  #bubbles{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
+  .bubble{position:absolute;bottom:-100px;border-radius:50%;background:rgba(255,255,255,.08);animation:rise linear infinite}
+  @keyframes rise{0%{transform:translateY(0) scale(1);opacity:.4}50%{opacity:.7}100%{transform:translateY(-110vh) scale(1.2);opacity:0}}
 </style>
 </head>
 <body>
+<div class="live-badge"><span class="dot"></span><span>LIVE:</span><strong id="live-count">—</strong><span>Watching</span></div>
+<div id="bubbles"></div>
+<header>
+  <h1>Belly Dance 24/7</h1>
+  <div id="header-time" style="font-size:13px;color:rgba(255,255,255,.8)"></div>
+  <div class="divider"></div>
+</header>
+<main>
+  <section class="panel">
+    <video id="player" autoplay muted playsinline></video>
+    <div id="chip" class="chip"></div>
+  </section>
+  <section class="info">
+    <h2 id="vtitle"></h2>
+    <p id="vmeta"></p>
+  </section>
+  <section class="schedule">
+    <h3>✨ Global Schedule (UTC) ✨</h3>
+    <div id="rows">
+      <div class="row"><div class="time">00:00 – 02:40</div><div>Dance in Front of the Library of Alexandria</div></div>
+      <div class="row"><div class="time">02:40 – 05:20</div><div>✨ Belly dance ✨ - sensual dance</div></div>
+      <div class="row"><div class="time">05:20 – 08:00</div><div>✨Belly dance ✨ Let my dance and my magic work on you</div></div>
+      <div class="row"><div class="time">08:00 – 10:40</div><div>Feast of Hathor</div></div>
+      <div class="row"><div class="time">10:40 – 13:20</div><div>Belly dance - classic dance</div></div>
+      <div class="row"><div class="time">13:20 – 16:00</div><div>Belly dance - christmas gift</div></div>
+      <div class="row"><div class="time">16:00 – 18:40</div><div>Freestyle bellydancing by Lisa Walser</div></div>
+      <div class="row"><div class="time">18:40 – 21:20</div><div>Belly dance - belly waves</div></div>
+      <div class="row"><div class="time">21:20 – 24:00</div><div>Belly dance - calm dance</div></div>
+    </div>
+  </section>
+</main>
+<footer>Pre-recorded performances looped 24/7 (Global UTC)</footer>
 <script>
+const USE_UTC=true;
+const VIDEOS=[
+ {title:"Dance in Front of the Library of Alexandria",url:"https://ik.imagekit.io/plerqlkuh/A%20dance%20in%20front%20of%20the%20Library%20of%20Alexandria.mp4",duration:155,start:0,end:2.667},
+ {title:"✨ Belly dance ✨ - sensual dance",url:"https://ik.imagekit.io/plerqlkuh/%E2%9C%A8%20Belly%20dance%20%E2%9C%A8%20-%20sensual%20dance.mp4",duration:113,start:2.667,end:5.333},
+ {title:"✨Belly dance ✨ Let my dance and my magic work on you",url:"https://ik.imagekit.io/plerqlkuh/%E2%9C%A8Belly%20dance%20%E2%9C%A8%20Let%20my%20dance%20and%20my%20magic%20work%20on%20you.mp4",duration:281,start:5.333,end:8},
+ {title:"Feast of Hathor",url:"https://ik.imagekit.io/hml9etthq/Feast%20of%20Hathor.mp4",duration:208,start:8,end:10.667},
+ {title:"Belly dance - classic dance",url:"https://ik.imagekit.io/vncybr8i6/Belly%20dance%20-%20classic%20dance.mp4?updatedAt=1755894993600",duration:252,start:10.667,end:13.333},
+ {title:"Belly dance - christmas gift",url:"https://ia600904.us.archive.org/28/items/belly-dance-christmas-gift/Belly%20dance%20-%20christmas%20gift.mp4",duration:399,start:13.333,end:16},
+ {title:"Freestyle bellydancing by Lisa Walser",url:"https://ik.imagekit.io/vncybr8i6/Freestyle%20bellydancing%20by%20Lisa%20Walser.mp4",duration:399,start:16,end:18.667},
+ {title:"Belly dance - belly waves",url:"https://ik.imagekit.io/vncybr8i6/Belly%20dance%20-%20belly%20waves.mp4",duration:60,start:18.667,end:21.333},
+ {title:"Belly dance - calm dance",url:"https://ik.imagekit.io/vncybr8i6/Belly%20dance%20-%20calm%20dance.mp4",duration:166,start:21.333,end:24}
 ];
+function nowHour(){const n=new Date();return USE_UTC?n.getUTCHours()+n.getUTCMinutes()/60:n.getHours()+n.getMinutes()/60;}
+function inRange(h,s,e){return h>=s&&h<e;}
+function curVid(){const h=nowHour();for(const v of VIDEOS){if(inRange(h,v.start,v.end))return v;}return VIDEOS[0];}
+function secFmt(s){return `${Math.floor(s/60)}:${String(s%60).padStart(2,"0")}`}
+const $p=document.getElementById("player"),$t=document.getElementById("vtitle"),$m=document.getElementById("vmeta"),$chip=document.getElementById("chip"),$rows=document.querySelectorAll(".row"),$ht=document.getElementById("header-time");
+function updateTimes(){const n=new Date();$ht.textContent=`Local: ${n.toLocaleTimeString()} | UTC: ${n.toUTCString().split(" ")[4]}`;$chip.textContent=`Local: ${n.toLocaleTimeString()}`;}
+setInterval(updateTimes,1000);updateTimes();
+function playVid(){const h=nowHour(),v=curVid();const i=VIDEOS.indexOf(v);const elapsed=((h-v.start+24)%24)*3600;const pos=Math.floor(elapsed%v.duration);
+if($p.src!==v.url){$p.src=v.url;$p.load();}
+$p.currentTime=pos;$p.loop=true;$p.play().catch(()=>{$p.muted=true;$p.play();});$t.textContent=v.title;$m.textContent="Duration: "+secFmt(v.duration);
+$rows.forEach((r,j)=>{r.classList.toggle("active",j===i)});const ms=((v.end-h+24)%24)*3600*1000;setTimeout(playVid,ms);}
+playVid();
+// bubbles
+function bubble(){const b=document.createElement("div");const s=20+Math.random()*60;b.className="bubble";b.style.width=`${s}px`;b.style.height=`${s}px`;b.style.left=`${Math.random()*100}vw`;b.style.animationDuration=`${15+Math.random()*20}s`;document.getElementById("bubbles").appendChild(b);setTimeout(()=>b.remove(),40000);}
+setInterval(bubble,1000);
+// fake viewers
+const $c=document.getElementById("live-count");const BUCKETS=[{start:0,end:6,min:500,max:1500},{start:6,end:12,min:1000,max:2500},{start:12,end:18,min:2000,max:4000},{start:18,end:24,min:3000,max:5000}];
+function bucket(h){return BUCKETS.find(b=>h>=b.start&&h<b.end)||BUCKETS[0];}
+function clamp(n,min,max){return Math.max(min,Math.min(max,n));}
+function randStep(){return(Math.random()<.5?-1:1)*(10+Math.floor(Math.random()*41));}
+function delay(){return(5+Math.random()*5)*1000;}
+let lc,lb,timer;function initCount(){const h=nowHour();lb=bucket(h);lc=lb.min+Math.floor((lb.max-lb.min)*(0.3+Math.random()*0.4));$c.textContent=lc.toLocaleString();}
+function tick(){const h=nowHour(),b=bucket(h);if(b!==lb){lb=b;lc=clamp(lc+randStep(),b.min,b.max);}else{lc=clamp(lc+randStep(),b.min,b.max);} $c.textContent=lc.toLocaleString();timer=setTimeout(tick,delay());}
+document.addEventListener("visibilitychange",()=>{if(document.hidden){if(timer)clearTimeout(timer);}else{if(!timer)timer=setTimeout(tick,delay());}});
+initCount();timer=setTimeout(tick,delay());
 </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Meneman/livedance" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>