|
|
<!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> |
|
|
|
