| <!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} |
| 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{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{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(); |
| |
| $p.addEventListener("loadedmetadata",()=>{const r=$p.videoWidth/$p.videoHeight;if(r<1){$p.style.objectFit="contain";$p.style.background="#000";}else{$p.style.objectFit="cover";}}); |
| |
| 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); |
| |
| 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> |
|
|
