Spaces:

Meneman
/

livedance

Running

App Files Files Community

Meneman commited on Aug 22, 2025

Commit

e4e2cd7

verified ·

1 Parent(s): 1c3acec

undefined - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +322 -231

index.html CHANGED Viewed

@@ -1,237 +1,328 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Belly Dance 24/7 (Global UTC)</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    body {
-      background: radial-gradient(circle at top left, #1a1a2e, #16213e 40%, #0f3460 100%);
-      min-height: 100vh;
-      color: #f8f8f8;
-      font-family: 'Segoe UI', sans-serif;
-      overflow-x: hidden;
-      position: relative;
-    }
-    /* Baloncuklar */
-    .bubble {
-      position: absolute;
-      bottom: -100px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.08);
-      animation: rise linear infinite;
-    }
-    @keyframes rise {
-      0% {
-        transform: translateY(0) scale(1);
-        opacity: 0.4;
-      }
-      50% {
-        opacity: 0.7;
-      }
-      100% {
-        transform: translateY(-110vh) scale(1.2);
-        opacity: 0;
-      }
-    }
-    .video-container {
-      aspect-ratio: 16/9;
-      width: 100%;
-      max-width: 960px;
-      margin: 0 auto;
-      backdrop-filter: blur(12px) saturate(120%);
-      background: rgba(255, 255, 255, 0.05);
-      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      border-radius: 20px;
-      overflow: hidden;
-      transition: transform 0.3s ease;
-      z-index: 10;
-      position: relative;
-    }
-    .video-container:hover {
-      transform: scale(1.01);
-    }
-    .user-time-display {
-      position: absolute;
-      bottom: 12px;
-      right: 12px;
-      background: rgba(0,0,0,0.6);
-      padding: 6px 10px;
-      border-radius: 6px;
-      font-size: 12px;
-      font-family: monospace;
-    }
-    .schedule-item {
-      padding: 8px 12px;
-      border-radius: 10px;
-      transition: all 0.3s ease;
-    }
-    .schedule-item.active {
-      background: linear-gradient(90deg, rgba(255,215,0,0.15), rgba(255,255,255,0.05));
-      border-left: 4px solid #facc15;
-    }
-  </style>
 </head>
-<body class="flex flex-col min-h-screen">
-  <!-- Baloncuklar -->
-  <div id="bubbles"></div>
-  <!-- Header -->
-  <header class="py-8 text-center relative z-10">
-    <h1 class="text-5xl font-extrabold bg-gradient-to-r from-yellow-300 to-yellow-500 bg-clip-text text-transparent">
-      Belly Dance 24/7
-    </h1>
-    <p class="mt-2 text-lg text-yellow-200 opacity-90">Global synchronized performances</p>
-    <div id="header-time-display" class="mt-2 text-sm text-yellow-400"></div>
-    <div class="mt-4 h-1 w-28 mx-auto bg-gradient-to-r from-purple-400 to-yellow-400 rounded-full"></div>
-  </header>
-  <!-- Main -->
-  <main class="flex-grow px-4 pb-10 relative z-10">
-    <div class="video-container relative">
-      <video id="bellydance-video" autoplay muted playsinline class="w-full h-full"></video>
-      <div id="user-time-display" class="user-time-display"></div>
-    </div>
-    <!-- Video Info -->
-    <div class="mt-6 text-center">
-      <h2 id="video-title" class="text-2xl md:text-3xl font-semibold bg-gradient-to-r from-yellow-200 to-yellow-400 bg-clip-text text-transparent"></h2>
-      <p id="video-time" class="text-sm text-yellow-300 opacity-90"></p>
-    </div>
-    <!-- Schedule -->
-    <div id="schedule" class="mt-10 max-w-lg mx-auto bg-black/40 backdrop-blur-md p-6 rounded-2xl shadow-lg">
-      <h3 class="text-xl font-bold mb-4 text-yellow-300">✨ Global Schedule (UTC) ✨</h3>
-      <div id="schedule-times" class="space-y-2 text-sm">
-        <div class="schedule-item flex items-start">
-          <div class="w-28 font-mono text-yellow-400">21:00 – 23:35</div>
-          <div class="flex-1">Dance in Front of the Library of Alexandria</div>
-        </div>
-        <div class="schedule-item flex items-start">
-          <div class="w-28 font-mono text-yellow-400">23:35 – 01:28</div>
-          <div class="flex-1">✨ Belly Dance ✨ - Sensual Dance</div>
-        </div>
-        <div class="schedule-item flex items-start">
-          <div class="w-28 font-mono text-yellow-400">01:28 – 06:09</div>
-          <div class="flex-1">✨ Belly Dance ✨ Let My Dance and My Magic Work on You</div>
-        </div>
-        <div class="schedule-item flex items-start">
-          <div class="w-28 font-mono text-yellow-400">06:09 – 21:00</div>
-          <div class="flex-1">Feast of Hathor</div>
         </div>
-      </div>
-    </div>
-  </main>
-  <!-- Footer -->
-  <footer class="py-6 text-center text-yellow-300 text-sm opacity-70 relative z-10">
-    Pre-recorded performances looped 24/7 (Global UTC)
-  </footer>
-  <script>
-    const videoElement = document.getElementById('bellydance-video');
-    const videoTitle = document.getElementById('video-title');
-    const videoTime = document.getElementById('video-time');
-    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
-      },
-      {
-        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
-      },
-      {
-        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
-      },
-      {
-        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
-      }
-    ];
-    function updateTimeDisplays() {
-      const now = new Date();
-      document.getElementById('header-time-display').textContent =
-        now.toDateString() + " | Local: " + now.toLocaleTimeString() +
-        " | UTC: " + now.toUTCString().split(' ')[4];
-      document.getElementById('user-time-display').textContent =
-        "Local: " + now.toLocaleTimeString();
-    }
-    setInterval(updateTimeDisplays, 1000);
-    updateTimeDisplays();
-    function getCurrentVideo() {
-      const now = new Date();
-      const hour = now.getUTCHours() + now.getUTCMinutes() / 60; // UTC saat
-      for (let v of videos) {
-        if (v.start < v.end) {
-          if (hour >= v.start && hour < v.end) return v;
-        } else {
-          if (hour >= v.start || hour < v.end) return v;
-        }
-      }
-      return videos[0];
-    }
-    function playVideo() {
-      const now = new Date();
-      const hour = now.getUTCHours() + now.getUTCMinutes() / 60;
-      const video = getCurrentVideo();
-      const elapsed = ((hour - video.start + 24) % 24) * 3600;
-      const position = elapsed % video.duration;
-      videoElement.src = video.url;
-      videoElement.load();
-      videoElement.currentTime = position;
-      videoElement.loop = true;
-      videoElement.play().catch(()=>{ videoElement.muted = true; videoElement.play(); });
-      videoTitle.textContent = video.title;
-      videoTime.textContent = "Duration: " + Math.floor(video.duration/60) + ":" +
-        (video.duration%60).toString().padStart(2,'0');
-      // aktif satırı highlight et
-      document.querySelectorAll(".schedule-item").forEach((el, i) => {
-        el.classList.remove("active");
-        if (videos[i] === video) el.classList.add("active");
-      });
-      const msUntilNext = ((video.end - hour + 24) % 24) * 3600 * 1000;
-      setTimeout(playVideo, msUntilNext);
-    }
-    playVideo();
-    // Baloncuk oluşturma
-    function createBubble() {
-      const bubble = document.createElement("div");
-      const size = Math.random() * 60 + 20;
-      bubble.classList.add("bubble");
-      bubble.style.width = `${size}px`;
-      bubble.style.height = `${size}px`;
-      bubble.style.left = `${Math.random() * 100}vw`;
-      bubble.style.animationDuration = `${Math.random() * 20 + 15}s`;
-      document.getElementById("bubbles").appendChild(bubble);
-      setTimeout(()=> bubble.remove(), 40000);
-    }
-    setInterval(createBubble, 1000);
-  </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>

 <!DOCTYPE html>
+<html lang="tr">
 <head>
+<meta charset="utf-8" />
+<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>