|
|
<!DOCTYPE html> |
|
|
<html lang="tr"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> |
|
|
<title>✨ Belly Dance 24/7 — Ultimate Optimized Experience ✨</title> |
|
|
<style> |
|
|
:root{ |
|
|
--bg1:#0a0a1e;--bg2:#1a1a3e;--bg3:#2a2a5e;--gold:#f5d76e; |
|
|
--neon-primary:#ff6b6b;--neon-secondary:#4ecdc4;--magic-purple:#9d4edd; |
|
|
--cosmic-blue:#4361ee;--aurora-green:#43aa8b;--sunset-orange:#f77f00; |
|
|
--glass-bg:rgba(255,255,255,0.08);--glass-border:rgba(255,255,255,0.15); |
|
|
--shadow-soft:0 8px 32px rgba(0,0,0,0.12);--shadow-medium:0 12px 48px rgba(0,0,0,0.25); |
|
|
--shadow-strong:0 20px 60px rgba(0,0,0,0.4); |
|
|
} |
|
|
|
|
|
*{box-sizing:border-box} |
|
|
|
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap'); |
|
|
|
|
|
body{margin:0;color:#f8f8f8;font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; |
|
|
background:#0a0a1e;overflow-x:hidden;min-height:100vh;position:relative; |
|
|
cursor:none;font-weight:400;letter-spacing:-0.025em; |
|
|
transform:translate3d(0,0,0);will-change:auto} |
|
|
|
|
|
|
|
|
body::before{content:'';position:fixed;inset:0;z-index:0; |
|
|
background: |
|
|
radial-gradient(ellipse 800px 400px at 20% 30%, rgba(157,78,221,0.15) 0%, transparent 50%), |
|
|
radial-gradient(ellipse 600px 300px at 80% 70%, rgba(67,97,238,0.12) 0%, transparent 50%), |
|
|
radial-gradient(ellipse 400px 200px at 50% 50%, rgba(255,107,107,0.08) 0%, transparent 50%), |
|
|
linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%); |
|
|
animation:breathing 15s ease-in-out infinite;transform:translate3d(0,0,0)} |
|
|
@keyframes breathing{0%,100%{opacity:0.85;transform:translate3d(0,0,0) scale(1)}50%{opacity:1;transform:translate3d(0,0,0) scale(1.02)}} |
|
|
|
|
|
|
|
|
.aurora{position:fixed;inset:0;z-index:1;pointer-events:none; |
|
|
background: |
|
|
linear-gradient(45deg, |
|
|
transparent 0%,rgba(157,78,221,0.1) 20%,transparent 40%, |
|
|
rgba(67,97,238,0.08) 60%,transparent 80%,rgba(78,205,196,0.06) 100%), |
|
|
linear-gradient(-45deg, |
|
|
rgba(255,107,107,0.05) 0%,transparent 30%,rgba(157,78,221,0.07) 70%,transparent 100%); |
|
|
background-size:400% 400%, 300% 300%; |
|
|
animation:aurora 20s ease-in-out infinite, auroraPulse 8s ease-in-out infinite; |
|
|
transform:translate3d(0,0,0);will-change:background-position} |
|
|
@keyframes aurora{0%,100%{background-position:0% 0%, 100% 100%}50%{background-position:100% 100%, 0% 0%}} |
|
|
@keyframes auroraPulse{0%,100%{opacity:0.6}50%{opacity:1}} |
|
|
|
|
|
|
|
|
.cursor{position:fixed;width:20px;height:20px;border-radius:50%; |
|
|
background:radial-gradient(circle,rgba(255,107,107,0.9) 0%,rgba(78,205,196,0.4) 50%,transparent 100%); |
|
|
pointer-events:none;z-index:999999;mix-blend-mode:screen; |
|
|
transition:all 0.12s cubic-bezier(0.4,0,0.2,1);transform:translate3d(0,0,0); |
|
|
left:0;top:0;will-change:transform; |
|
|
box-shadow:0 0 20px rgba(255,107,107,0.6), 0 0 40px rgba(255,107,107,0.3)} |
|
|
.cursor.hover{transform:scale(1.8) !important; |
|
|
background:radial-gradient(circle,rgba(255,107,107,1) 0%,rgba(78,205,196,0.6) 40%,rgba(157,78,221,0.3) 100%); |
|
|
box-shadow:0 0 30px rgba(255,107,107,0.8), 0 0 60px rgba(255,107,107,0.4)} |
|
|
.cursor-trail{position:fixed;width:4px;height:4px;border-radius:50%; |
|
|
background:rgba(255,107,107,0.8);pointer-events:none;z-index:999998; |
|
|
animation:trailFade 0.8s cubic-bezier(0.4,0,0.2,1) forwards} |
|
|
@keyframes trailFade{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.3)}} |
|
|
|
|
|
|
|
|
.performance-toggle{position:fixed;top:20px;right:20px;z-index:10000; |
|
|
display:flex;align-items:center;gap:10px;padding:10px 16px; |
|
|
background:rgba(0,0,0,0.85);backdrop-filter:blur(10px); |
|
|
border-radius:25px;border:1px solid rgba(255,255,255,0.2); |
|
|
box-shadow:var(--shadow-medium);cursor:pointer; |
|
|
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);font-size:12px;font-weight:500; |
|
|
color:rgba(255,255,255,0.9)} |
|
|
.performance-toggle:hover{transform:scale(1.05);border-color:rgba(255,107,107,0.5); |
|
|
box-shadow:var(--shadow-strong)} |
|
|
.performance-toggle .mode-icon{font-size:16px;transition:all 0.3s ease} |
|
|
.performance-toggle .mode-text{font-family:'Inter',sans-serif;letter-spacing:0.3px} |
|
|
|
|
|
|
|
|
.performance-panel{position:fixed;top:70px;right:20px;z-index:9999; |
|
|
background:rgba(0,0,0,0.95);backdrop-filter:blur(15px); |
|
|
border-radius:20px;padding:25px;border:1px solid rgba(255,255,255,0.15); |
|
|
box-shadow:var(--shadow-strong);min-width:320px;max-width:90vw; |
|
|
opacity:0;transform:translateY(-20px) scale(0.95); |
|
|
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);pointer-events:none} |
|
|
.performance-panel.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:all} |
|
|
|
|
|
.performance-panel h3{color:var(--gold);margin:0 0 20px;font-size:18px; |
|
|
font-weight:700;text-align:center;font-family:'Playfair Display',serif} |
|
|
|
|
|
|
|
|
.mode-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px;margin-bottom:20px} |
|
|
.mode-card{padding:12px;border-radius:12px;cursor:pointer; |
|
|
border:2px solid rgba(255,255,255,0.1); |
|
|
background:rgba(255,255,255,0.05); |
|
|
transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center; |
|
|
min-height:80px;display:flex;flex-direction:column;justify-content:center} |
|
|
.mode-card:hover{transform:translateY(-2px);border-color:rgba(255,107,107,0.4)} |
|
|
.mode-card.active{border-color:var(--neon-primary);background:rgba(255,107,107,0.15); |
|
|
box-shadow:0 0 20px rgba(255,107,107,0.3)} |
|
|
.mode-card .mode-emoji{font-size:24px;margin-bottom:8px;display:block} |
|
|
.mode-card .mode-name{font-size:13px;font-weight:600;margin-bottom:4px} |
|
|
.mode-card .mode-desc{font-size:10px;opacity:0.7;line-height:1.3} |
|
|
|
|
|
|
|
|
.ultra-mode{--animation-speed:1;--particle-count:8;--effect-intensity:1} |
|
|
.high-mode{--animation-speed:0.8;--particle-count:6;--effect-intensity:0.8} |
|
|
.balanced-mode{--animation-speed:0.6;--particle-count:4;--effect-intensity:0.6} |
|
|
.performance-mode{--animation-speed:0.4;--particle-count:2;--effect-intensity:0.4} |
|
|
|
|
|
|
|
|
.music-notes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden} |
|
|
.note{position:absolute;font-size:24px;color:rgba(255,215,0,0.3);font-family:'Playfair Display',serif; |
|
|
animation:floatNote 12s linear infinite;transform:translate3d(0,0,0); |
|
|
text-shadow:0 0 10px rgba(255,215,0,0.4)} |
|
|
@keyframes floatNote{ |
|
|
0%{transform:translate3d(0,110vh,0) rotate(0deg);opacity:0} |
|
|
10%{opacity:0.6}90%{opacity:0.6} |
|
|
100%{transform:translate3d(0,-10vh,0) rotate(360deg);opacity:0} |
|
|
} |
|
|
|
|
|
|
|
|
header{text-align:center;padding:30px 0 20px;transition:all 0.6s cubic-bezier(0.4,0,0.2,1); |
|
|
position:relative;z-index:3;transform:translate3d(0,0,0)} |
|
|
h1{font-size:clamp(32px,8vw,64px);font-weight:900;margin:0;font-family:'Playfair Display',serif; |
|
|
background:linear-gradient(135deg,#ff6b6b 0%,#ffd93d 20%,#4ecdc4 40%,#9d4edd 60%,#ff9a9e 80%,#ff6b6b 100%); |
|
|
background-size:400% 400%;-webkit-background-clip:text;background-clip:text;color:transparent; |
|
|
animation:rainbow 8s ease-in-out infinite; |
|
|
filter:drop-shadow(0 0 20px rgba(255,107,107,0.5)); |
|
|
transform:translate3d(0,0,0);will-change:background-position;letter-spacing:-0.02em} |
|
|
h1:hover{transform:translate3d(0,0,0) scale(1.05) rotateX(5deg); |
|
|
transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1)} |
|
|
@keyframes rainbow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} |
|
|
|
|
|
.sub{font-size:16px;color:rgba(255,255,255,.9);margin-top:12px;font-weight:300; |
|
|
text-shadow:0 0 15px rgba(255,255,255,0.3);letter-spacing:0.5px} |
|
|
.divider{height:6px;width:140px;margin:20px auto; |
|
|
background:linear-gradient(90deg,#ff6b6b,#ffd93d,#4ecdc4,#9d4edd,#ff9a9e); |
|
|
background-size:400% 100%;border-radius:999px;opacity:.95; |
|
|
animation:flow 4s ease-in-out infinite; |
|
|
box-shadow:0 0 20px rgba(255,107,107,0.4), 0 4px 15px rgba(0,0,0,0.2);transform:translate3d(0,0,0)} |
|
|
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} |
|
|
|
|
|
|
|
|
.panel{position:relative;margin:20px auto 0;max-width:1000px;aspect-ratio:16/9; |
|
|
background:var(--glass-bg);border-radius:32px;overflow:hidden; |
|
|
box-shadow:var(--shadow-strong);z-index:2; |
|
|
transform:translate3d(0,0,0);transition:all 0.6s cubic-bezier(0.4,0,0.2,1); |
|
|
backdrop-filter:blur(20px);border:1px solid var(--glass-border)} |
|
|
.panel:hover{transform:translate3d(0,0,0) scale(1.02) rotateX(2deg) rotateY(1deg); |
|
|
box-shadow:0 25px 80px rgba(0,0,0,0.5), 0 0 50px rgba(255,107,107,0.2)} |
|
|
|
|
|
.panel::before{content:'';position:absolute;inset:-6px;border-radius:38px; |
|
|
background:conic-gradient(from 0deg,var(--neon-primary) 0%,var(--magic-purple) 25%,var(--cosmic-blue) 50%,var(--aurora-green) 75%,var(--neon-primary) 100%); |
|
|
z-index:-1;animation:holoRotate 12s linear infinite;transform:translate3d(0,0,0); |
|
|
filter:blur(2px);opacity:0.8} |
|
|
.panel::after{content:'';position:absolute;inset:-12px;border-radius:44px; |
|
|
background:radial-gradient(ellipse,rgba(255,107,107,0.2) 0%,rgba(78,205,196,0.1) 50%,transparent 100%); |
|
|
z-index:-2;filter:blur(15px);animation:holoGlow 10s ease-in-out infinite;transform:translate3d(0,0,0)} |
|
|
@keyframes holoRotate{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.02)}100%{transform:rotate(360deg) scale(1)}} |
|
|
@keyframes holoGlow{0%,100%{opacity:0.6}50%{opacity:1}} |
|
|
|
|
|
|
|
|
.panel-accents{position:absolute;inset:0;pointer-events:none;z-index:5} |
|
|
.corner-accent{position:absolute;width:50px;height:50px;border-radius:50%; |
|
|
animation:cornerPulse 4s ease-in-out infinite; |
|
|
filter:blur(1.5px);transform:translate3d(0,0,0)} |
|
|
.corner-accent:nth-child(1){top:-25px;left:-25px;animation-delay:0s; |
|
|
background:radial-gradient(circle,rgba(255,107,107,0.8) 0%,rgba(255,107,107,0.2) 70%,transparent 100%)} |
|
|
.corner-accent:nth-child(2){top:-25px;right:-25px;animation-delay:1s; |
|
|
background:radial-gradient(circle,rgba(78,205,196,0.8) 0%,rgba(78,205,196,0.2) 70%,transparent 100%)} |
|
|
.corner-accent:nth-child(3){bottom:-25px;left:-25px;animation-delay:2s; |
|
|
background:radial-gradient(circle,rgba(157,78,221,0.8) 0%,rgba(157,78,221,0.2) 70%,transparent 100%)} |
|
|
.corner-accent:nth-child(4){bottom:-25px;right:-25px;animation-delay:3s; |
|
|
background:radial-gradient(circle,rgba(255,211,102,0.8) 0%,rgba(255,211,102,0.2) 70%,transparent 100%)} |
|
|
@keyframes cornerPulse{ |
|
|
0%,100%{transform:scale(0.8) rotate(0deg);opacity:0.5} |
|
|
50%{transform:scale(1.4) rotate(180deg);opacity:0.9} |
|
|
} |
|
|
|
|
|
video{width:100%;height:100%;object-fit:cover;background:#000;border-radius:26px; |
|
|
transition:all 0.6s cubic-bezier(0.4,0,0.2,1); |
|
|
filter:contrast(1.08) saturate(1.15) brightness(1.05);transform:translate3d(0,0,0)} |
|
|
|
|
|
.chip{position:absolute;bottom:15px;right:15px;padding:10px 16px;border-radius:16px; |
|
|
background:rgba(0,0,0,0.85);backdrop-filter:blur(10px); |
|
|
font:13px/1.4 'Inter',monospace;color:#fff;z-index:6; |
|
|
border:1px solid rgba(255,107,107,0.4); |
|
|
box-shadow:var(--shadow-medium);transform:translate3d(0,0,0);font-weight:500} |
|
|
|
|
|
|
|
|
.unmute-overlay{position:absolute;top:0;left:0;right:0;bottom:0; |
|
|
background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center; |
|
|
z-index:100;backdrop-filter:blur(25px);border-radius:26px} |
|
|
.unmute-overlay.hidden{display:none} |
|
|
.unmute-btn{background:linear-gradient(135deg,#ff6b6b 0%,#4ecdc4 100%); |
|
|
border:none;color:white;font-size:18px;font-weight:600; |
|
|
padding:18px 32px;border-radius:60px;cursor:pointer; |
|
|
box-shadow:0 12px 40px rgba(255,107,107,0.5); |
|
|
transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); |
|
|
display:flex;align-items:center;gap:12px;font-family:'Inter',sans-serif} |
|
|
.unmute-btn:hover{transform:translateY(-4px) scale(1.05); |
|
|
box-shadow:0 20px 60px rgba(255,107,107,0.7)} |
|
|
.unmute-btn:active{transform:translateY(-2px) scale(1.02)} |
|
|
|
|
|
|
|
|
.control-panel{position:absolute;bottom:20px;left:50%;transform:translateX(-50%); |
|
|
display:flex;align-items:center;gap:16px;padding:16px 28px; |
|
|
background:rgba(0,0,0,0.9);backdrop-filter:blur(15px); |
|
|
border-radius:60px;border:1px solid rgba(255,255,255,0.12); |
|
|
box-shadow:var(--shadow-strong);z-index:10; |
|
|
opacity:0;transform:translateX(-50%) translateY(30px); |
|
|
transition:all 0.6s cubic-bezier(0.4,0,0.2,1)} |
|
|
.panel:hover .control-panel,.control-panel:hover,.control-panel.active{ |
|
|
opacity:1;transform:translateX(-50%) translateY(0)} |
|
|
|
|
|
|
|
|
.mute-btn{width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,0.25); |
|
|
background:linear-gradient(135deg,rgba(255,107,107,0.25),rgba(78,205,196,0.25)); |
|
|
backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center; |
|
|
cursor:pointer;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden} |
|
|
.mute-btn::before{content:'';position:absolute;inset:0;border-radius:50%; |
|
|
background:linear-gradient(45deg,var(--neon-primary),var(--neon-secondary)); |
|
|
opacity:0;transition:all 0.4s cubic-bezier(0.4,0,0.2,1)} |
|
|
.mute-btn:hover{transform:scale(1.15);border-color:rgba(255,107,107,0.6); |
|
|
box-shadow:0 0 25px rgba(255,107,107,0.4)} |
|
|
.mute-btn:hover::before{opacity:0.15} |
|
|
.mute-btn:active{transform:scale(1.05)} |
|
|
|
|
|
.mute-icon{font-size:22px;z-index:1;transition:all 0.4s cubic-bezier(0.4,0,0.2,1); |
|
|
filter:drop-shadow(0 0 12px rgba(255,255,255,0.6))} |
|
|
.mute-btn.muted .mute-icon{color:#ff6b6b;filter:drop-shadow(0 0 15px rgba(255,107,107,0.9))} |
|
|
|
|
|
|
|
|
.volume-control{display:flex;align-items:center;gap:12px} |
|
|
.volume-slider{width:100px;height:6px;background:rgba(255,255,255,0.25); |
|
|
border-radius:3px;position:relative;cursor:pointer;overflow:hidden} |
|
|
.volume-fill{height:100%; |
|
|
background:linear-gradient(90deg,var(--neon-primary) 0%,var(--neon-secondary) 100%); |
|
|
border-radius:3px;width:50%;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative; |
|
|
box-shadow:0 0 12px rgba(255,107,107,0.5)} |
|
|
.volume-fill::after{content:'';position:absolute;right:-8px;top:-6px; |
|
|
width:16px;height:16px;background:#fff;border-radius:50%; |
|
|
box-shadow:0 0 15px rgba(255,255,255,0.6), 0 2px 8px rgba(0,0,0,0.3); |
|
|
transition:all 0.3s cubic-bezier(0.4,0,0.2,1)} |
|
|
.volume-slider:hover .volume-fill::after{transform:scale(1.2)} |
|
|
|
|
|
|
|
|
.control-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,0.2); |
|
|
background:rgba(255,255,255,0.08);backdrop-filter:blur(10px); |
|
|
display:flex;align-items:center;justify-content:center;cursor:pointer; |
|
|
font-size:18px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1); |
|
|
color:rgba(255,255,255,0.85)} |
|
|
.control-btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,107,107,0.5); |
|
|
color:white;transform:scale(1.1) rotateZ(5deg); |
|
|
box-shadow:0 0 20px rgba(255,107,107,0.3)} |
|
|
.control-btn:active{transform:scale(1.05) rotateZ(2deg)} |
|
|
.control-btn.active{background:rgba(255,107,107,0.25);border-color:rgba(255,107,107,0.7); |
|
|
color:#ff6b6b;box-shadow:0 0 25px rgba(255,107,107,0.5)} |
|
|
|
|
|
|
|
|
.progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px; |
|
|
background:rgba(255,255,255,0.15);z-index:8} |
|
|
.progress-fill{height:100%; |
|
|
background:linear-gradient(90deg,var(--neon-primary) 0%,var(--neon-secondary) 100%); |
|
|
width:0%;transition:width 0.6s cubic-bezier(0.4,0,0.2,1); |
|
|
box-shadow:0 0 12px rgba(255,107,107,0.6)} |
|
|
|
|
|
|
|
|
.quality-indicator{position:absolute;top:20px;left:20px; |
|
|
padding:8px 16px;border-radius:25px;font-size:12px;font-weight:600; |
|
|
backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.15);z-index:7; |
|
|
font-family:'Inter',sans-serif} |
|
|
.quality-hd{background:rgba(76,222,128,0.25);color:#4ade80;border-color:rgba(76,222,128,0.4); |
|
|
box-shadow:0 0 20px rgba(76,222,128,0.3)} |
|
|
.quality-sd{background:rgba(251,191,36,0.25);color:#fbbf24;border-color:rgba(251,191,36,0.4); |
|
|
box-shadow:0 0 20px rgba(251,191,36,0.3)} |
|
|
.quality-low{background:rgba(239,68,68,0.25);color:#ef4444;border-color:rgba(239,68,68,0.4); |
|
|
box-shadow:0 0 20px rgba(239,68,68,0.3)} |
|
|
|
|
|
|
|
|
.shortcuts-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%); |
|
|
background:rgba(0,0,0,0.95);backdrop-filter:blur(15px); |
|
|
border-radius:28px;padding:40px;border:1px solid rgba(255,255,255,0.15); |
|
|
z-index:11000;opacity:0;pointer-events:none; |
|
|
transition:all 0.6s cubic-bezier(0.4,0,0.2,1); |
|
|
max-width:450px;width:90%;box-shadow:var(--shadow-strong)} |
|
|
.shortcuts-overlay.visible{opacity:1;pointer-events:all;transform:translate(-50%, -50%) scale(1)} |
|
|
.shortcuts-overlay h3{color:var(--gold);text-align:center;margin:0 0 25px; |
|
|
font-size:22px;font-weight:700;font-family:'Playfair Display',serif} |
|
|
.shortcut-item{display:flex;justify-content:space-between;align-items:center; |
|
|
padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.1); |
|
|
transition:all 0.3s ease} |
|
|
.shortcut-item:hover{background:rgba(255,255,255,0.05);margin:0 -20px;padding:12px 20px;border-radius:12px} |
|
|
.shortcut-key{background:rgba(255,255,255,0.15);padding:6px 12px;border-radius:10px; |
|
|
font:13px/1 'Inter',monospace;color:var(--neon-primary);font-weight:600; |
|
|
box-shadow:0 2px 8px rgba(0,0,0,0.2)} |
|
|
|
|
|
|
|
|
.info{text-align:center;margin-top:25px;padding:0 15px; |
|
|
transition:all 0.6s cubic-bezier(0.4,0,0.2,1);position:relative;z-index:2;transform:translate3d(0,0,0)} |
|
|
.info h2{font-size:clamp(20px,5vw,32px);margin:0;font-family:'Playfair Display',serif; |
|
|
background:linear-gradient(135deg,#fff1a8 0%,#ffd166 50%,#ff9a9e 100%); |
|
|
background-size:300% 300%;-webkit-background-clip:text;background-clip:text;color:transparent; |
|
|
font-weight:700;animation:titleShimmer 6s ease-in-out infinite; |
|
|
text-shadow:0 0 25px rgba(255,209,102,0.4);transform:translate3d(0,0,0)} |
|
|
@keyframes titleShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} |
|
|
.info p{margin:12px 0 0;color:rgba(255,255,255,.9);font-size:15px;font-weight:300; |
|
|
text-shadow:0 0 8px rgba(255,255,255,0.2)} |
|
|
|
|
|
|
|
|
.schedule{max-width:800px;margin:30px auto; |
|
|
background:var(--glass-bg);backdrop-filter:blur(15px); |
|
|
border-radius:28px;padding:30px;transition:all 0.6s cubic-bezier(0.4,0,0.2,1); |
|
|
position:relative;z-index:2;border:1px solid var(--glass-border); |
|
|
box-shadow:var(--shadow-medium);transform:translate3d(0,0,0)} |
|
|
.schedule:hover{transform:translateY(-5px);box-shadow:var(--shadow-strong)} |
|
|
|
|
|
.schedule h3{margin:0 0 20px;font-size:22px;color:var(--gold);text-align:center; |
|
|
text-shadow:0 0 15px rgba(245,215,110,0.6);font-weight:600;font-family:'Playfair Display',serif} |
|
|
|
|
|
.row{display:flex;gap:20px;align-items:flex-start;padding:16px 20px;border-radius:16px; |
|
|
font-size:16px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden; |
|
|
cursor:pointer;transform:translate3d(0,0,0);margin:8px 0} |
|
|
.row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0; |
|
|
background:linear-gradient(90deg,rgba(255,107,107,0.15),rgba(78,205,196,0.15)); |
|
|
transition:all 0.4s cubic-bezier(0.4,0,0.2,1);transform:translate3d(0,0,0)} |
|
|
.row:hover::before{width:100%} |
|
|
.row:hover{transform:translateX(8px) scale(1.02); |
|
|
background:rgba(255,255,255,0.05);box-shadow:var(--shadow-soft)} |
|
|
|
|
|
.row .time{width:140px;color:#ffd166;font:15px/1.5 'Inter',monospace; |
|
|
position:relative;z-index:1;text-shadow:0 0 10px rgba(255,209,102,0.4);font-weight:500} |
|
|
.row .name{position:relative;z-index:1;font-weight:400;color:rgba(255,255,255,0.95)} |
|
|
.row.active{ |
|
|
background:linear-gradient(90deg,rgba(255,107,107,0.15),rgba(78,205,196,0.15)); |
|
|
border-left:5px solid #ff6b6b;box-shadow:var(--shadow-medium); |
|
|
transform:translateX(10px) scale(1.03)} |
|
|
.row.active::after{content:'✨';position:absolute;right:20px;top:50%;transform:translateY(-50%); |
|
|
font-size:18px;animation:sparkle 2s ease-in-out infinite} |
|
|
@keyframes sparkle{0%,100%{opacity:0.7;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.2)}} |
|
|
|
|
|
footer{text-align:center;color:rgba(255,255,255,.8);font-size:14px;padding:30px; |
|
|
position:relative;z-index:2;text-shadow:0 0 8px rgba(255,255,255,0.2);font-weight:300} |
|
|
|
|
|
|
|
|
.live-badge{position:fixed;top:20px;left:20px;z-index:9999;display:inline-flex;align-items:center;gap:10px; |
|
|
padding:12px 20px;border-radius:30px; |
|
|
background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);border:1px solid rgba(255,107,107,.5); |
|
|
color:#ff6b6b;font-weight:600;font-size:15px; |
|
|
box-shadow:var(--shadow-medium); |
|
|
animation:livePulse 3s ease-in-out infinite;transform:translate3d(0,0,0)} |
|
|
@keyframes livePulse{0%,100%{box-shadow:var(--shadow-medium)}50%{box-shadow:0 8px 40px rgba(255,107,107,0.6)}} |
|
|
|
|
|
.dot{width:10px;height:10px;border-radius:50%;background:#ff3b3b; |
|
|
box-shadow:0 0 15px rgba(255,59,59,.9); |
|
|
animation:dotPulse 2s ease-in-out infinite;transform:translate3d(0,0,0)} |
|
|
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}} |
|
|
|
|
|
.reactions-badge{position:fixed;bottom:20px;left:20px;z-index:9999;padding:12px 20px;border-radius:30px; |
|
|
background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);border:1px solid rgba(78,205,196,.5); |
|
|
color:#4ecdc4;font-weight:600;font-size:15px;display:inline-flex;gap:12px;align-items:center; |
|
|
box-shadow:var(--shadow-medium);transform:translate3d(0,0,0)} |
|
|
|
|
|
|
|
|
.emoji-panel{position:absolute;right:20px;bottom:110px;z-index:6;display:flex;flex-direction:column;gap:18px} |
|
|
.emoji-btn{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.35); |
|
|
background:rgba(0,0,0,.7);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center; |
|
|
font-size:26px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1); |
|
|
box-shadow:var(--shadow-soft);transform:translate3d(0,0,0)} |
|
|
.emoji-btn:hover{transform:scale(1.15) rotateZ(10deg); |
|
|
box-shadow:var(--shadow-medium);border-color:rgba(255,107,107,0.6)} |
|
|
.emoji-btn:active{transform:scale(1.05) rotateZ(5deg)} |
|
|
|
|
|
.emoji-count{position:absolute;right:76px;min-width:70px;height:36px;padding:0 16px;border-radius:18px; |
|
|
display:flex;align-items:center;justify-content:center; |
|
|
background:rgba(0,0,0,.8);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25); |
|
|
font:13px/1.4 'Inter',monospace;color:#fff;font-weight:500; |
|
|
box-shadow:var(--shadow-soft);transform:translate3d(0,0,0)} |
|
|
|
|
|
|
|
|
.particle{position:absolute;pointer-events:none;z-index:8;font-size:26px; |
|
|
animation:floatUp 2s cubic-bezier(0.4,0,0.2,1) forwards;transform:translate3d(0,0,0)} |
|
|
@keyframes floatUp{ |
|
|
0%{transform:translate3d(0,0,0) scale(0.8) rotate(0deg);opacity:0} |
|
|
20%{opacity:1} |
|
|
100%{transform:translate3d(0,-200px,0) scale(1.5) rotate(360deg);opacity:0} |
|
|
} |
|
|
|
|
|
.burst{position:absolute;pointer-events:none;z-index:8; |
|
|
animation:burst 1s cubic-bezier(0.4,0,0.2,1) forwards;transform:translate3d(0,0,0)} |
|
|
@keyframes burst{ |
|
|
0%{transform:scale(0.4) rotate(0deg);opacity:0} |
|
|
60%{transform:scale(1.2) rotate(180deg);opacity:1} |
|
|
100%{transform:scale(1.6) rotate(360deg);opacity:0} |
|
|
} |
|
|
|
|
|
|
|
|
#bubbles{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none} |
|
|
.bubble{position:absolute;bottom:-100px;border-radius:50%; |
|
|
background:linear-gradient(45deg,rgba(255,255,255,.12),rgba(255,107,107,.08)); |
|
|
animation:rise linear infinite; |
|
|
box-shadow:inset 0 0 20px rgba(255,255,255,0.15);transform:translate3d(0,0,0)} |
|
|
@keyframes rise{ |
|
|
0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:.5} |
|
|
50%{opacity:.8} |
|
|
100%{transform:translate3d(0,-120vh,0) scale(1.3) rotate(360deg);opacity:0} |
|
|
} |
|
|
|
|
|
|
|
|
.welcome-neon{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%); |
|
|
z-index:10000;font-size:clamp(36px,9vw,72px);font-weight:900;font-family:'Playfair Display',serif; |
|
|
background:linear-gradient(45deg,#ff6b6b,#ffd93d,#6bcf7f,#4d96ff,#9c88ff,#ff6b6b); |
|
|
background-size:500% 500%;-webkit-background-clip:text;background-clip:text;color:transparent; |
|
|
animation:neonFlow 4s ease-in-out, fadeOut 5s ease-in-out forwards; |
|
|
text-shadow:0 0 40px rgba(255,107,107,0.8);pointer-events:none;opacity:1; |
|
|
filter:drop-shadow(0 0 30px rgba(255,107,107,0.5));transform-origin:center} |
|
|
@keyframes neonFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} |
|
|
@keyframes fadeOut{ |
|
|
0%{opacity:1;transform:translate(-50%, -50%) scale(1)} |
|
|
80%{opacity:1;transform:translate(-50%, -50%) scale(1.08)} |
|
|
100%{opacity:0;transform:translate(-50%, -50%) scale(0.85)} |
|
|
} |
|
|
|
|
|
|
|
|
.audio-visualizer{position:absolute;bottom:30px;left:30px;display:flex;gap:4px;z-index:6} |
|
|
.audio-bar{width:5px;border-radius:3px; |
|
|
background:linear-gradient(180deg,#ff6b6b 0%,#4ecdc4 50%,#9d4edd 100%); |
|
|
animation:audioVisualize 1.2s ease-in-out infinite;transform:translate3d(0,0,0); |
|
|
box-shadow:0 0 10px rgba(255,107,107,0.4)} |
|
|
.audio-bar:nth-child(1){height:25px;animation-delay:0s} |
|
|
.audio-bar:nth-child(2){height:35px;animation-delay:0.1s} |
|
|
.audio-bar:nth-child(3){height:45px;animation-delay:0.2s} |
|
|
.audio-bar:nth-child(4){height:55px;animation-delay:0.3s} |
|
|
.audio-bar:nth-child(5){height:45px;animation-delay:0.4s} |
|
|
.audio-bar:nth-child(6){height:35px;animation-delay:0.5s} |
|
|
@keyframes audioVisualize{0%,100%{transform:scaleY(0.4)}50%{transform:scaleY(1.3)}} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width:768px) and (orientation:portrait){ |
|
|
|
|
|
body{cursor:auto !important;background:#0a0a1e !important} |
|
|
.cursor,.cursor-trail,.aurora,.music-notes,.corner-accent,.panel::before,.panel::after{display:none !important} |
|
|
.performance-toggle,.performance-panel{display:none !important} |
|
|
body::before{display:none !important} |
|
|
#bubbles{display:none !important} |
|
|
.welcome-neon{display:none !important} |
|
|
|
|
|
|
|
|
header{padding:10px 0;background:rgba(0,0,0,0.9);position:fixed;top:0;left:0;right:0;z-index:100; |
|
|
border-bottom:1px solid rgba(255,107,107,0.3)} |
|
|
h1{font-size:24px !important;margin:0;animation:none !important; |
|
|
background:linear-gradient(90deg,#ff6b6b,#4ecdc4) !important; |
|
|
-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important} |
|
|
.sub{font-size:12px;margin:5px 0 0} |
|
|
.divider{display:none} |
|
|
|
|
|
|
|
|
.panel{margin:60px 0 0 0 !important;max-width:none !important;border-radius:0 !important; |
|
|
aspect-ratio:auto !important;position:fixed !important;inset:0 !important; |
|
|
height:calc(100vh - 60px) !important;border:none !important;background:#000 !important; |
|
|
backdrop-filter:none !important;box-shadow:none !important} |
|
|
.panel:hover{transform:none !important} |
|
|
video{border-radius:0 !important;filter:none !important} |
|
|
|
|
|
|
|
|
.control-panel{ |
|
|
position:fixed !important; |
|
|
bottom:10px !important; |
|
|
left:10px !important; |
|
|
right:10px !important; |
|
|
transform:none !important; |
|
|
gap:8px !important; |
|
|
padding:8px 12px !important; |
|
|
opacity:1 !important; |
|
|
background:rgba(0,0,0,0.95) !important; |
|
|
backdrop-filter:blur(5px) !important; |
|
|
border:1px solid rgba(255,107,107,0.4) !important; |
|
|
z-index:50 !important; |
|
|
border-radius:25px !important; |
|
|
} |
|
|
.mute-btn{width:36px !important;height:36px !important;border:1px solid rgba(255,107,107,0.5) !important; |
|
|
backdrop-filter:none !important} |
|
|
.mute-icon{font-size:16px !important} |
|
|
.volume-slider{width:60px !important;height:4px !important} |
|
|
.control-btn{width:28px !important;height:28px !important;font-size:12px !important; |
|
|
backdrop-filter:none !important} |
|
|
|
|
|
|
|
|
.live-badge{top:70px !important;left:10px !important;font-size:11px !important; |
|
|
padding:6px 10px !important;z-index:55 !important;backdrop-filter:blur(5px) !important} |
|
|
.reactions-badge{bottom:70px !important;left:10px !important;font-size:11px !important; |
|
|
padding:6px 10px !important;z-index:55 !important;backdrop-filter:blur(5px) !important} |
|
|
|
|
|
|
|
|
.quality-indicator{top:70px !important;right:10px !important;font-size:10px !important; |
|
|
padding:4px 8px !important;z-index:40 !important;backdrop-filter:blur(5px) !important} |
|
|
|
|
|
|
|
|
.emoji-panel{ |
|
|
position:fixed !important; |
|
|
right:10px !important; |
|
|
top:50% !important; |
|
|
transform:translateY(-50%) !important; |
|
|
gap:8px !important; |
|
|
z-index:45 !important; |
|
|
} |
|
|
.emoji-btn{width:40px !important;height:40px !important;font-size:18px !important; |
|
|
border:1px solid rgba(255,255,255,.4) !important;backdrop-filter:blur(5px) !important} |
|
|
.emoji-count{right:50px !important;min-width:40px !important;height:24px !important; |
|
|
font-size:10px !important;backdrop-filter:blur(5px) !important} |
|
|
|
|
|
|
|
|
.mobile-schedule{ |
|
|
position:fixed; |
|
|
bottom:0; |
|
|
left:0; |
|
|
right:0; |
|
|
z-index:60; |
|
|
background:rgba(0,0,0,0.95); |
|
|
border-top:1px solid rgba(255,107,107,0.4); |
|
|
transform:translateY(100%); |
|
|
transition:transform 0.3s ease; |
|
|
max-height:40vh; |
|
|
overflow-y:auto; |
|
|
padding:15px; |
|
|
} |
|
|
.mobile-schedule.visible{transform:translateY(0)} |
|
|
.mobile-schedule h3{color:var(--gold);margin:0 0 15px;font-size:16px;text-align:center} |
|
|
.mobile-schedule .row{padding:8px 12px;margin:4px 0;font-size:14px;border-radius:8px} |
|
|
.mobile-schedule .row .time{width:80px;font-size:12px} |
|
|
.mobile-schedule .row .name{font-size:12px} |
|
|
|
|
|
|
|
|
.mobile-tap-indicator{ |
|
|
position:fixed; |
|
|
bottom:80px; |
|
|
left:50%; |
|
|
transform:translateX(-50%); |
|
|
background:rgba(0,0,0,0.9); |
|
|
color:rgba(255,255,255,0.9); |
|
|
padding:6px 15px; |
|
|
border-radius:15px; |
|
|
font-size:11px; |
|
|
z-index:30; |
|
|
opacity:0; |
|
|
transition:opacity 0.3s ease; |
|
|
backdrop-filter:blur(5px); |
|
|
border:1px solid rgba(255,107,107,0.4); |
|
|
} |
|
|
.mobile-tap-indicator.visible{opacity:1} |
|
|
|
|
|
|
|
|
.info,.schedule,footer,.shortcuts-overlay,.audio-visualizer{display:none !important} |
|
|
|
|
|
|
|
|
*{animation:none !important;transition:none !important;backdrop-filter:none !important; |
|
|
box-shadow:none !important;filter:none !important} |
|
|
.control-panel,.emoji-btn,.live-badge,.reactions-badge,.quality-indicator{ |
|
|
backdrop-filter:blur(5px) !important} |
|
|
} |
|
|
|
|
|
|
|
|
@media (min-width:769px) { |
|
|
.mobile-schedule,.mobile-tap-indicator{display:none !important} |
|
|
} |
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) { |
|
|
*{animation:none !important;animation-iteration-count:1 !important;transition:none !important} |
|
|
.aurora,.music-notes,.corner-accent{display:none !important} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="balanced-mode"> |
|
|
|
|
|
<div class="aurora"></div> |
|
|
<div class="cursor" id="cursor"></div> |
|
|
<div class="music-notes" id="music-notes"></div> |
|
|
|
|
|
|
|
|
<div class="performance-toggle" id="performance-toggle"> |
|
|
<span class="mode-icon">⚙️</span> |
|
|
<span class="mode-text" id="mode-text">Balanced</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="performance-panel" id="performance-panel"> |
|
|
<h3>🎨 Visual Quality & Performance</h3> |
|
|
<div class="mode-grid"> |
|
|
<div class="mode-card" data-mode="ultra"> |
|
|
<span class="mode-emoji">🌟</span> |
|
|
<div class="mode-name">Ultra</div> |
|
|
<div class="mode-desc">Maximum effects & animations</div> |
|
|
</div> |
|
|
<div class="mode-card" data-mode="high"> |
|
|
<span class="mode-emoji">✨</span> |
|
|
<div class="mode-name">High</div> |
|
|
<div class="mode-desc">Rich visuals & smooth animations</div> |
|
|
</div> |
|
|
<div class="mode-card active" data-mode="balanced"> |
|
|
<span class="mode-emoji">⚖️</span> |
|
|
<div class="mode-name">Balanced</div> |
|
|
<div class="mode-desc">Great quality & performance</div> |
|
|
</div> |
|
|
<div class="mode-card" data-mode="performance"> |
|
|
<span class="mode-emoji">🚀</span> |
|
|
<div class="mode-name">Performance</div> |
|
|
<div class="mode-desc">Maximum speed & efficiency</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="live-badge"><span class="dot"></span><span>LIVE:</span><strong id="live-count">—</strong><span>Watching</span></div> |
|
|
<div class="reactions-badge" id="today-reactions">Today ❤️0 🔥0 💃0 ✨0</div> |
|
|
<div id="bubbles"></div> |
|
|
|
|
|
|
|
|
<div class="shortcuts-overlay" id="shortcuts-overlay"> |
|
|
<h3>⌨️ Keyboard Shortcuts</h3> |
|
|
<div class="shortcut-item"> |
|
|
<span>Mute/Unmute</span> |
|
|
<span class="shortcut-key">M</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Volume Up</span> |
|
|
<span class="shortcut-key">↑</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Volume Down</span> |
|
|
<span class="shortcut-key">↓</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Fullscreen</span> |
|
|
<span class="shortcut-key">F</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Theater Mode</span> |
|
|
<span class="shortcut-key">T</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Picture-in-Picture</span> |
|
|
<span class="shortcut-key">P</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Performance Toggle</span> |
|
|
<span class="shortcut-key">Q</span> |
|
|
</div> |
|
|
<div class="shortcut-item"> |
|
|
<span>Show Shortcuts</span> |
|
|
<span class="shortcut-key">?</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="welcome-neon" id="welcome-neon">✨ Welcome to Ultimate Experience ✨</div> |
|
|
|
|
|
<header id="main-header"> |
|
|
<h1>✨ Belly Dance 24/7 ✨</h1> |
|
|
<div id="header-time" class="sub">—</div> |
|
|
<div class="divider"></div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<section class="panel" id="panel"> |
|
|
<canvas id="color-canvas" style="display:none"></canvas> |
|
|
|
|
|
<div class="unmute-overlay" id="unmute-overlay"> |
|
|
<button class="unmute-btn" id="unmute-btn"> |
|
|
<span>🔊</span> |
|
|
<span>Enable Audio</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<video id="player" muted loop playsinline preload="metadata"> |
|
|
<source src="" /> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
|
|
|
<div class="quality-indicator quality-hd" id="quality-indicator">HD</div> |
|
|
|
|
|
<div class="panel-accents"> |
|
|
<div class="corner-accent"></div> |
|
|
<div class="corner-accent"></div> |
|
|
<div class="corner-accent"></div> |
|
|
<div class="corner-accent"></div> |
|
|
</div> |
|
|
|
|
|
<div class="audio-visualizer"> |
|
|
<div class="audio-bar"></div> |
|
|
<div class="audio-bar"></div> |
|
|
<div class="audio-bar"></div> |
|
|
<div class="audio-bar"></div> |
|
|
<div class="audio-bar"></div> |
|
|
<div class="audio-bar"></div> |
|
|
</div> |
|
|
|
|
|
<div class="control-panel" id="control-panel"> |
|
|
<button class="mute-btn" id="mute-btn"> |
|
|
<span class="mute-icon" id="mute-icon">🔊</span> |
|
|
</button> |
|
|
|
|
|
<div class="volume-control"> |
|
|
<div class="volume-slider" id="volume-slider"> |
|
|
<div class="volume-fill" id="volume-fill"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="control-btn" id="theater-btn" title="Theater Mode"> |
|
|
<span>🎭</span> |
|
|
</button> |
|
|
|
|
|
<button class="control-btn" id="fullscreen-btn" title="Fullscreen"> |
|
|
<span>⛶</span> |
|
|
</button> |
|
|
|
|
|
<button class="control-btn" id="pip-btn" title="Picture-in-Picture"> |
|
|
<span>⧉</span> |
|
|
</button> |
|
|
|
|
|
<button class="control-btn" id="shortcuts-btn" title="Keyboard Shortcuts"> |
|
|
<span>⌨</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="progress-bar"> |
|
|
<div class="progress-fill" id="progress-fill"></div> |
|
|
</div> |
|
|
|
|
|
<div class="emoji-panel" id="emoji-panel"> |
|
|
<div class="emoji-btn" data-type="heart" title="Love it!"> |
|
|
<span>❤️</span> |
|
|
<div class="emoji-count" id="count-heart">0</div> |
|
|
</div> |
|
|
|
|
|
<div class="emoji-btn" data-type="fire" title="On Fire!"> |
|
|
<span>🔥</span> |
|
|
<div class="emoji-count" id="count-fire">0</div> |
|
|
</div> |
|
|
|
|
|
<div class="emoji-btn" data-type="dancer" title="Amazing Dance!"> |
|
|
<span>💃</span> |
|
|
<div class="emoji-count" id="count-dancer">0</div> |
|
|
</div> |
|
|
|
|
|
<div class="emoji-btn" data-type="spark" title="Magical!"> |
|
|
<span>✨</span> |
|
|
<div class="emoji-count" id="count-spark">0</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<section class="info" id="main-info"> |
|
|
<h2 id="vtitle">✨ Belly Dance Stream ✨</h2> |
|
|
<p id="vmeta">Loading amazing content...</p> |
|
|
</section> |
|
|
|
|
|
<section class="schedule" id="main-schedule"> |
|
|
<h3 id="schedule-title">✨ Global Schedule (UTC) ✨</h3> |
|
|
<div id="rows"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="mobile-schedule" id="mobile-schedule"> |
|
|
<h3>✨ Today's Schedule ✨</h3> |
|
|
<div id="mobile-rows"></div> |
|
|
</div> |
|
|
|
|
|
<div class="mobile-tap-indicator" id="mobile-tap-indicator"> |
|
|
Double tap to show schedule |
|
|
</div> |
|
|
|
|
|
<footer> |
|
|
<p>✨ Ultimate Belly Dance Experience - Optimized for All Devices ✨</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
let isMobile = false; |
|
|
let audioEnabled = false; |
|
|
let isMuted = false; |
|
|
let currentVolume = 0.5; |
|
|
|
|
|
|
|
|
function detectMobile() { |
|
|
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || |
|
|
(window.innerWidth <= 768 && 'ontouchstart' in window); |
|
|
return isMobile; |
|
|
} |
|
|
|
|
|
|
|
|
if (!detectMobile()) { |
|
|
|
|
|
let frameCount = 0; |
|
|
let currentPerformanceMode = 'balanced'; |
|
|
let maxFloatingElements = 4; |
|
|
let audioContext = null; |
|
|
let analyser = null; |
|
|
let currentDominantColor = '#ff6b6b'; |
|
|
let mouseX = 0, mouseY = 0; |
|
|
let isFullscreen = false; |
|
|
let isPictureInPicture = false; |
|
|
let isTheaterMode = false; |
|
|
let isControlPanelVisible = false; |
|
|
|
|
|
|
|
|
const performanceCheck = { |
|
|
lastTime: performance.now(), |
|
|
frameCount: 0, |
|
|
avgFps: 60, |
|
|
update() { |
|
|
const now = performance.now(); |
|
|
this.frameCount++; |
|
|
|
|
|
if (now - this.lastTime >= 1000) { |
|
|
this.avgFps = Math.round((this.frameCount * 1000) / (now - this.lastTime)); |
|
|
this.frameCount = 0; |
|
|
this.lastTime = now; |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const performanceModes = { |
|
|
'ultra': { name: 'Ultra', icon: '🌟', particles: 8, animationSpeed: 1.0, effectIntensity: 1.0 }, |
|
|
'high': { name: 'High', icon: '✨', particles: 6, animationSpeed: 0.8, effectIntensity: 0.8 }, |
|
|
'balanced': { name: 'Balanced', icon: '⚖️', particles: 4, animationSpeed: 0.6, effectIntensity: 0.6 }, |
|
|
'performance': { name: 'Performance', icon: '🚀', particles: 2, animationSpeed: 0.4, effectIntensity: 0.4 } |
|
|
}; |
|
|
|
|
|
|
|
|
function initPerformanceModeSystem() { |
|
|
const desktopToggle = document.getElementById('performance-toggle'); |
|
|
const desktopPanel = document.getElementById('performance-panel'); |
|
|
|
|
|
let savedMode = localStorage.getItem('performanceMode') || 'balanced'; |
|
|
setPerformanceMode(savedMode); |
|
|
|
|
|
if (desktopToggle) { |
|
|
desktopToggle.addEventListener('click', function() { |
|
|
desktopPanel.classList.toggle('visible'); |
|
|
}); |
|
|
} |
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
const modeCard = e.target.closest('.mode-card'); |
|
|
if (modeCard) { |
|
|
const mode = modeCard.getAttribute('data-mode'); |
|
|
setPerformanceMode(mode); |
|
|
desktopPanel?.classList.remove('visible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (!e.target.closest('.performance-toggle') && !e.target.closest('.performance-panel')) { |
|
|
desktopPanel?.classList.remove('visible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key.toLowerCase() === 'q' && !e.shiftKey) { |
|
|
const modes = Object.keys(performanceModes); |
|
|
const currentIndex = modes.indexOf(currentPerformanceMode); |
|
|
const nextIndex = (currentIndex + 1) % modes.length; |
|
|
setPerformanceMode(modes[nextIndex]); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function setPerformanceMode(mode) { |
|
|
if (!performanceModes[mode]) return; |
|
|
|
|
|
currentPerformanceMode = mode; |
|
|
const config = performanceModes[mode]; |
|
|
|
|
|
document.body.className = document.body.className.replace(/\b\w+-mode\b/g, ''); |
|
|
document.body.classList.add(mode + '-mode'); |
|
|
maxFloatingElements = config.particles; |
|
|
|
|
|
const modeText = document.getElementById('mode-text'); |
|
|
if (modeText) modeText.textContent = config.name; |
|
|
|
|
|
document.querySelectorAll('.mode-card').forEach(card => { |
|
|
card.classList.remove('active'); |
|
|
if (card.getAttribute('data-mode') === mode) { |
|
|
card.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
localStorage.setItem('performanceMode', mode); |
|
|
console.log(`Performance mode set to: ${config.name}`); |
|
|
} |
|
|
|
|
|
|
|
|
let trailCount = 0; |
|
|
const maxTrails = 3; |
|
|
|
|
|
function initOptimizedCursor(){ |
|
|
const cursor = document.getElementById('cursor'); |
|
|
let isMoving = false; |
|
|
let moveTimeout; |
|
|
|
|
|
document.addEventListener('mousemove', function(e) { |
|
|
mouseX = e.clientX; |
|
|
mouseY = e.clientY; |
|
|
cursor.style.transform = `translate3d(${mouseX - 10}px, ${mouseY - 10}px, 0)`; |
|
|
|
|
|
isMoving = true; |
|
|
clearTimeout(moveTimeout); |
|
|
|
|
|
const config = performanceModes[currentPerformanceMode]; |
|
|
const shouldCreateTrail = Math.random() > (0.9 - (config.effectIntensity * 0.1)); |
|
|
|
|
|
if(shouldCreateTrail && trailCount < maxTrails) { |
|
|
trailCount++; |
|
|
const trail = document.createElement('div'); |
|
|
trail.className = 'cursor-trail'; |
|
|
trail.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`; |
|
|
document.body.appendChild(trail); |
|
|
|
|
|
setTimeout(function() { |
|
|
if (trail.parentNode) { |
|
|
trail.remove(); |
|
|
trailCount--; |
|
|
} |
|
|
}, 800); |
|
|
} |
|
|
|
|
|
moveTimeout = setTimeout(() => { isMoving = false; }, 150); |
|
|
}); |
|
|
|
|
|
const interactiveElements = 'button, .control-btn, .emoji-btn, .mute-btn, .row, .shortcut-item, .mode-card, .performance-toggle'; |
|
|
|
|
|
document.addEventListener('mouseenter', function(e) { |
|
|
if (e.target.matches(interactiveElements)) { |
|
|
cursor.classList.add('hover'); |
|
|
} |
|
|
}, true); |
|
|
|
|
|
document.addEventListener('mouseleave', function(e) { |
|
|
if (e.target.matches(interactiveElements)) { |
|
|
cursor.classList.remove('hover'); |
|
|
} |
|
|
}, true); |
|
|
} |
|
|
|
|
|
|
|
|
let activeFloatingElements = 0; |
|
|
|
|
|
function createOptimizedFloatingNote(){ |
|
|
const config = performanceModes[currentPerformanceMode]; |
|
|
if(activeFloatingElements >= config.particles) return; |
|
|
|
|
|
const notes = ['♪', '♫', '♬', '♩', '𝄞', '𝄢']; |
|
|
const note = document.createElement('div'); |
|
|
note.className = 'note'; |
|
|
note.textContent = notes[Math.floor(Math.random() * notes.length)]; |
|
|
note.style.left = Math.random() * 100 + 'vw'; |
|
|
note.style.animationDuration = ((10 + Math.random() * 4) / config.animationSpeed) + 's'; |
|
|
note.style.fontSize = (20 + Math.random() * 8) + 'px'; |
|
|
note.style.opacity = 0.3 * config.effectIntensity; |
|
|
|
|
|
activeFloatingElements++; |
|
|
document.getElementById('music-notes').appendChild(note); |
|
|
|
|
|
setTimeout(function() { |
|
|
if (note.parentNode) { |
|
|
note.remove(); |
|
|
activeFloatingElements--; |
|
|
} |
|
|
}, 12000 / config.animationSpeed); |
|
|
} |
|
|
|
|
|
|
|
|
let activeBubbles = 0; |
|
|
const maxBubbles = 10; |
|
|
|
|
|
function createOptimizedBubble(){ |
|
|
const config = performanceModes[currentPerformanceMode]; |
|
|
if(activeBubbles >= Math.min(maxBubbles, config.particles)) return; |
|
|
|
|
|
const b = document.createElement('div'); |
|
|
b.className = 'bubble'; |
|
|
const s = (25 + Math.random() * 70) * config.effectIntensity; |
|
|
b.style.width = s + 'px'; |
|
|
b.style.height = s + 'px'; |
|
|
b.style.left = (Math.random() * 100) + 'vw'; |
|
|
b.style.animationDuration = ((25 + Math.random() * 25) / config.animationSpeed) + 's'; |
|
|
b.style.opacity = 0.5 * config.effectIntensity; |
|
|
|
|
|
activeBubbles++; |
|
|
document.getElementById('bubbles').appendChild(b); |
|
|
|
|
|
setTimeout(function() { |
|
|
if (b.parentNode) { |
|
|
b.remove(); |
|
|
activeBubbles--; |
|
|
} |
|
|
}, 40000 / config.animationSpeed); |
|
|
} |
|
|
|
|
|
|
|
|
initPerformanceModeSystem(); |
|
|
initOptimizedCursor(); |
|
|
|
|
|
|
|
|
setInterval(function() { |
|
|
const config = performanceModes[currentPerformanceMode]; |
|
|
if(Math.random() > (1 - config.effectIntensity * 0.5)) { |
|
|
createOptimizedFloatingNote(); |
|
|
} |
|
|
}, 4000); |
|
|
|
|
|
setInterval(function() { |
|
|
const config = performanceModes[currentPerformanceMode]; |
|
|
if(Math.random() > (1 - config.effectIntensity * 0.6)) { |
|
|
createOptimizedBubble(); |
|
|
} |
|
|
}, 1500); |
|
|
|
|
|
function optimizedPerformanceMonitor() { |
|
|
frameCount++; |
|
|
if (frameCount % 60 === 0) { |
|
|
performanceCheck.update(); |
|
|
} |
|
|
requestAnimationFrame(optimizedPerformanceMonitor); |
|
|
} |
|
|
requestAnimationFrame(optimizedPerformanceMonitor); |
|
|
} |
|
|
|
|
|
|
|
|
if (detectMobile()) { |
|
|
console.log('Mobile device detected - using ultra-minimal mode'); |
|
|
|
|
|
let isScheduleVisible = false; |
|
|
let autoHideTimer = null; |
|
|
|
|
|
function showMobileSchedule() { |
|
|
const schedule = document.getElementById('mobile-schedule'); |
|
|
const indicator = document.getElementById('mobile-tap-indicator'); |
|
|
|
|
|
schedule.classList.add('visible'); |
|
|
isScheduleVisible = true; |
|
|
|
|
|
if (autoHideTimer) clearTimeout(autoHideTimer); |
|
|
autoHideTimer = setTimeout(function() { |
|
|
schedule.classList.remove('visible'); |
|
|
isScheduleVisible = false; |
|
|
showMobileIndicator(); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
function showMobileIndicator() { |
|
|
const indicator = document.getElementById('mobile-tap-indicator'); |
|
|
indicator.classList.add('visible'); |
|
|
setTimeout(function() { |
|
|
indicator.classList.remove('visible'); |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
let lastClickTime = 0; |
|
|
const doubleClickDelay = 400; |
|
|
|
|
|
document.addEventListener('click', function(e) { |
|
|
if (e.target.closest('.emoji-btn') || e.target.closest('.mobile-schedule') || |
|
|
e.target.closest('.control-panel')) return; |
|
|
|
|
|
const currentTime = new Date().getTime(); |
|
|
const timeDiff = currentTime - lastClickTime; |
|
|
|
|
|
if (timeDiff < doubleClickDelay) { |
|
|
e.preventDefault(); |
|
|
if (!isScheduleVisible) showMobileSchedule(); |
|
|
} |
|
|
lastClickTime = currentTime; |
|
|
}); |
|
|
|
|
|
|
|
|
setTimeout(showMobileIndicator, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
function initSimpleAudioEnable() { |
|
|
const overlay = document.getElementById('unmute-overlay'); |
|
|
const unmuteBtn = document.getElementById('unmute-btn'); |
|
|
const player = document.getElementById('player'); |
|
|
|
|
|
unmuteBtn.addEventListener('click', function() { |
|
|
player.muted = false; |
|
|
audioEnabled = true; |
|
|
isMuted = false; |
|
|
|
|
|
document.getElementById('mute-icon').textContent = '🔊'; |
|
|
document.getElementById('mute-btn').classList.remove('muted'); |
|
|
overlay.classList.add('hidden'); |
|
|
localStorage.setItem('audioEnabled', 'true'); |
|
|
}); |
|
|
|
|
|
if (localStorage.getItem('audioEnabled') === 'true') { |
|
|
overlay.classList.add('hidden'); |
|
|
audioEnabled = true; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const SCHEDULE_A = [ |
|
|
{ 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-%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%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/ef7bcvglu/Belly%20dance%20-%20classic%20dance.mp4", 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/ef7bcvglu/Belly%20dance%20-%20belly%20waves.mp4", duration:60, start:18.667, end:21.333 }, |
|
|
{ title:"Belly dance - calm dance", url:"https://ik.imagekit.io/suedm9ysj/Belly%20dance%20-%20calm%20dance.mp4", duration:166, start:21.333, end:24 } |
|
|
]; |
|
|
|
|
|
const SCHEDULE_B = [ |
|
|
{ title:"✨ Belly dance ✨ - unholy", url:"https://ik.imagekit.io/wgn4o7zwre/%E2%9C%A8%20Belly%20dance%20%E2%9C%A8%20-%20%20unholy.mp4", duration:155, start:0, end:2.667 }, |
|
|
{ title:"Belly dance - Memories of the year 2023", url:"https://ik.imagekit.io/wgn4o7zwre/Belly%20dance%20-%20Memories%20of%20the%20year%202023.mp4", duration:113, start:2.667, end:5.333 }, |
|
|
{ title:"❄️ Belly dance❄️ - 🎁 surprise🎁_ christmas - special part two", url:"https://ia601701.us.archive.org/31/items/belly-dancee-surprises-christmas-special-part-two/%E2%9D%84%EF%B8%8F%20Belly%20dance%E2%9D%84%EF%B8%8F%20%20-%20%20%F0%9F%8E%81%20surprise%F0%9F%8E%81_%20%20%20%20christmas%20-%20special%20part%20two.mp4", duration:281, start:5.333, end:8 }, |
|
|
{ title:"✨Belly dance✨ - Belly dance for Cleopatra⛲🕌🌴", url:"https://ik.imagekit.io/ef7bcvglu/%E2%9C%A8Belly%20dance%E2%9C%A8%20%20-%20%20Belly%20dance%20for%20Cleopatra%E2%9B%B2__.mp4", duration:208, start:8, end:10.667 }, |
|
|
{ title:"Desert wind...", url:"https://ik.imagekit.io/suedm9ysj/Desert%20wind....mp4", duration:252, start:10.667, end:13.333 }, |
|
|
{ title:"✨Belly dance ✨ - summer dance 🏝️🏜️🌅", url:"https://ucarecdn.com/c143859d-b2d6-47f7-b7bc-ccfe80a97574/", duration:399, start:13.333, end:16 }, |
|
|
{ title:"Belly dance with ocean wave - dress 🌊", url:"https://ucarecdn.com/7ccd7db7-6956-46d3-aee3-0a4f216ff2b6/", duration:399, start:16, end:18.667 }, |
|
|
{ title:"Bellydance at new year✨", url:"https://ik.imagekit.io/b3mprpaei/Bellydance%20at%20new%20year%E2%9C%A8.mp4", duration:60, start:18.667, end:21.333 }, |
|
|
{ title:"✨ Belly dance ✨ - secret of the goddess", url:"https://ik.imagekit.io/b3mprpaei/%E2%9C%A8%20Belly%20dance%20%E2%9C%A8%20-%20secret%20of%20the%20goddess.mp4", duration:166, start:21.333, end:24 } |
|
|
]; |
|
|
|
|
|
const SCHEDULE_C = [ |
|
|
{ title:"A mystical moment...", url:"https://ik.imagekit.io/ghfngh/A%20mystical%20moment....mp4", duration:166, start:0, end:2.667 }, |
|
|
{ title:"✨ Belly dance ✨ - Dance of the orient", url:"https://ik.imagekit.io/ghfngh/%E2%9C%A8%20Belly%20dance%20%E2%9C%A8%20-%20Dance%20of%20the%20orient.mp4", duration:129, start:2.667, end:5.333 }, |
|
|
{ title:"A divine journey...", url:"https://11zxtyxcmi.ucarecd.net/e2510b1f-bf6a-46a1-891a-4884cc4581eb/Adivinejourney.mp4", duration:109, start:5.333, end:8 }, |
|
|
{ title:"Afew wise words about fall and a groovy dance 🍂🍁", url:"https://ik.imagekit.io/d8pb0rj9u/Afew%20wise%20words%20about%20fall%20and%20a%20groovy%20dance%20__.mp4", duration:254, start:8, end:10.667 }, |
|
|
{ title:"Belly dance - with Greek music - Part 2", url:"https://ik.imagekit.io/d8pb0rj9u/Belly%20dance%20-%20with%20Greek%20music%20-%20Part%202.mp4", duration:228, start:10.667, end:13.333 }, |
|
|
{ title:"Belly dancing - The dance decides whether i go, heaven or hell...😇😈", url:"https://ucarecdn.com/04ba5f2c-1cbf-4ea4-81c8-01fbda138d98/BellydancingThedancedecideswhetherigoheavenorhell_.mp4", duration:312, start:13.333, end:16 }, |
|
|
{ title:"✨Belly dance✨ - 🌆🏝️one night in Dubai🏝️🌆", url:"https://ik.imagekit.io/1snk7toiq/%E2%9C%A8Belly%20dance%E2%9C%A8%20-%20__%EF%B8%8Fone%20night%20in%20Dubai_%EF%B8%8F_.mp4", duration:122, start:16, end:18.667 }, |
|
|
{ title:"belly dance - Journey back to a forgotten time", url:"https://ik.imagekit.io/1snk7toiq/belly%20dance%20-%20Journey%20back%20to%20a%20forgotten%20time.mp4", duration:210, start:18.667, end:21.333 }, |
|
|
{ title:"✨Fantasy dancing - oriental dance✨", url:"https://ik.imagekit.io/1snk7toiq/%E2%9C%A8Fantasy%20dancing%20-%20oriental%20dance%E2%9C%A8.mp4", duration:64, start:21.333, end:24 } |
|
|
]; |
|
|
|
|
|
const USE_UTC = true; |
|
|
|
|
|
|
|
|
function nowHour(){ |
|
|
const n=new Date(); |
|
|
return USE_UTC ? n.getUTCHours() + n.getUTCMinutes()/60 + n.getUTCSeconds()/3600 |
|
|
: n.getHours() + n.getMinutes()/60 + n.getSeconds()/3600; |
|
|
} |
|
|
function utcDayIndex(){ return (new Date()).getUTCDay(); } |
|
|
function secFmt(s){return `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}`;} |
|
|
function clamp(n,min,max){return Math.max(min,Math.min(max,n));} |
|
|
|
|
|
|
|
|
function initMuteControl() { |
|
|
const muteBtn = document.getElementById('mute-btn'); |
|
|
const muteIcon = document.getElementById('mute-icon'); |
|
|
const player = document.getElementById('player'); |
|
|
|
|
|
muteBtn.addEventListener('click', function() { |
|
|
if (!audioEnabled) { |
|
|
document.getElementById('unmute-overlay').classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
isMuted = !isMuted; |
|
|
player.muted = isMuted; |
|
|
|
|
|
if (isMuted) { |
|
|
muteIcon.textContent = '🔇'; |
|
|
muteBtn.classList.add('muted'); |
|
|
} else { |
|
|
muteIcon.textContent = '🔊'; |
|
|
muteBtn.classList.remove('muted'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function initVolumeControl() { |
|
|
const volumeSlider = document.getElementById('volume-slider'); |
|
|
const volumeFill = document.getElementById('volume-fill'); |
|
|
const player = document.getElementById('player'); |
|
|
|
|
|
volumeSlider.addEventListener('click', function(e) { |
|
|
if (!audioEnabled) { |
|
|
document.getElementById('unmute-overlay').classList.remove('hidden'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const rect = volumeSlider.getBoundingClientRect(); |
|
|
const percent = (e.clientX - rect.left) / rect.width; |
|
|
currentVolume = clamp(percent, 0, 1); |
|
|
|
|
|
player.volume = currentVolume; |
|
|
volumeFill.style.width = (currentVolume * 100) + '%'; |
|
|
|
|
|
if (currentVolume === 0 && !isMuted) { |
|
|
document.getElementById('mute-btn').click(); |
|
|
} else if (currentVolume > 0 && isMuted && audioEnabled) { |
|
|
isMuted = false; |
|
|
player.muted = false; |
|
|
document.getElementById('mute-icon').textContent = '🔊'; |
|
|
document.getElementById('mute-btn').classList.remove('muted'); |
|
|
} |
|
|
}); |
|
|
|
|
|
player.volume = currentVolume; |
|
|
volumeFill.style.width = (currentVolume * 100) + '%'; |
|
|
} |
|
|
|
|
|
function initTheaterMode() { |
|
|
const theaterBtn = document.getElementById('theater-btn'); |
|
|
if (!theaterBtn) return; |
|
|
|
|
|
theaterBtn.addEventListener('click', function() { |
|
|
isTheaterMode = !isTheaterMode; |
|
|
document.body.classList.toggle('theater-mode', isTheaterMode); |
|
|
theaterBtn.classList.toggle('active', isTheaterMode); |
|
|
}); |
|
|
} |
|
|
|
|
|
function initFullscreenControl() { |
|
|
const fullscreenBtn = document.getElementById('fullscreen-btn'); |
|
|
if (!fullscreenBtn) return; |
|
|
|
|
|
const panel = document.getElementById('panel'); |
|
|
|
|
|
fullscreenBtn.addEventListener('click', function() { |
|
|
if (!document.fullscreenElement) { |
|
|
panel.requestFullscreen().then(function() { |
|
|
isFullscreen = true; |
|
|
fullscreenBtn.classList.add('active'); |
|
|
}).catch(console.error); |
|
|
} else { |
|
|
document.exitFullscreen().then(function() { |
|
|
isFullscreen = false; |
|
|
fullscreenBtn.classList.remove('active'); |
|
|
}).catch(console.error); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('fullscreenchange', function() { |
|
|
isFullscreen = !!document.fullscreenElement; |
|
|
document.getElementById('fullscreen-btn').classList.toggle('active', isFullscreen); |
|
|
}); |
|
|
} |
|
|
|
|
|
function initPictureInPictureControl() { |
|
|
const pipBtn = document.getElementById('pip-btn'); |
|
|
if (!pipBtn) return; |
|
|
|
|
|
const player = document.getElementById('player'); |
|
|
|
|
|
pipBtn.addEventListener('click', async function() { |
|
|
try { |
|
|
if (document.pictureInPictureElement) { |
|
|
await document.exitPictureInPicture(); |
|
|
} else { |
|
|
await player.requestPictureInPicture(); |
|
|
} |
|
|
} catch (error) { |
|
|
console.log('Picture-in-Picture not supported'); |
|
|
} |
|
|
}); |
|
|
|
|
|
player.addEventListener('enterpictureinpicture', function() { |
|
|
isPictureInPicture = true; |
|
|
pipBtn.classList.add('active'); |
|
|
}); |
|
|
|
|
|
player.addEventListener('leavepictureinpicture', function() { |
|
|
isPictureInPicture = false; |
|
|
pipBtn.classList.remove('active'); |
|
|
}); |
|
|
} |
|
|
|
|
|
function initKeyboardShortcuts() { |
|
|
const shortcutsBtn = document.getElementById('shortcuts-btn'); |
|
|
const shortcutsOverlay = document.getElementById('shortcuts-overlay'); |
|
|
|
|
|
if (!shortcutsBtn || !shortcutsOverlay) return; |
|
|
|
|
|
shortcutsBtn.addEventListener('click', function() { |
|
|
shortcutsOverlay.classList.toggle('visible'); |
|
|
}); |
|
|
|
|
|
shortcutsOverlay.addEventListener('click', function(e) { |
|
|
if (e.target === shortcutsOverlay) { |
|
|
shortcutsOverlay.classList.remove('visible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
switch(e.key.toLowerCase()) { |
|
|
case 'm': |
|
|
if (!e.shiftKey) document.getElementById('mute-btn').click(); |
|
|
break; |
|
|
case 'f': |
|
|
if (document.getElementById('fullscreen-btn')) document.getElementById('fullscreen-btn').click(); |
|
|
break; |
|
|
case 't': |
|
|
if (document.getElementById('theater-btn')) document.getElementById('theater-btn').click(); |
|
|
break; |
|
|
case 'p': |
|
|
if (document.getElementById('pip-btn')) document.getElementById('pip-btn').click(); |
|
|
break; |
|
|
case 'arrowup': |
|
|
e.preventDefault(); |
|
|
if (audioEnabled) { |
|
|
currentVolume = clamp(currentVolume + 0.1, 0, 1); |
|
|
document.getElementById('player').volume = currentVolume; |
|
|
document.getElementById('volume-fill').style.width = (currentVolume * 100) + '%'; |
|
|
} |
|
|
break; |
|
|
case 'arrowdown': |
|
|
e.preventDefault(); |
|
|
if (audioEnabled) { |
|
|
currentVolume = clamp(currentVolume - 0.1, 0, 1); |
|
|
document.getElementById('player').volume = currentVolume; |
|
|
document.getElementById('volume-fill').style.width = (currentVolume * 100) + '%'; |
|
|
} |
|
|
break; |
|
|
case '?': |
|
|
if (shortcutsOverlay) shortcutsOverlay.classList.toggle('visible'); |
|
|
break; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function initControlPanelVisibility() { |
|
|
if (detectMobile()) return; |
|
|
|
|
|
const panel = document.getElementById('panel'); |
|
|
const controlPanel = document.getElementById('control-panel'); |
|
|
|
|
|
let hideTimer = null; |
|
|
|
|
|
function showControls() { |
|
|
controlPanel.classList.add('active'); |
|
|
isControlPanelVisible = true; |
|
|
|
|
|
if (hideTimer) clearTimeout(hideTimer); |
|
|
hideTimer = setTimeout(function() { |
|
|
if (!controlPanel.matches(':hover')) { |
|
|
controlPanel.classList.remove('active'); |
|
|
isControlPanelVisible = false; |
|
|
} |
|
|
}, 4000); |
|
|
} |
|
|
|
|
|
panel.addEventListener('mousemove', showControls); |
|
|
panel.addEventListener('touchstart', showControls); |
|
|
|
|
|
controlPanel.addEventListener('mouseenter', function() { |
|
|
if (hideTimer) clearTimeout(hideTimer); |
|
|
}); |
|
|
|
|
|
controlPanel.addEventListener('mouseleave', function() { |
|
|
hideTimer = setTimeout(function() { |
|
|
controlPanel.classList.remove('active'); |
|
|
isControlPanelVisible = false; |
|
|
}, 1200); |
|
|
}); |
|
|
} |
|
|
|
|
|
function initProgressBar() { |
|
|
const progressFill = document.getElementById('progress-fill'); |
|
|
const player = document.getElementById('player'); |
|
|
|
|
|
function updateProgress() { |
|
|
if (player.duration) { |
|
|
const progress = (player.currentTime / player.duration) * 100; |
|
|
progressFill.style.width = progress + '%'; |
|
|
} |
|
|
} |
|
|
|
|
|
player.addEventListener('timeupdate', updateProgress); |
|
|
} |
|
|
|
|
|
function initQualityIndicator() { |
|
|
const qualityIndicator = document.getElementById('quality-indicator'); |
|
|
const player = document.getElementById('player'); |
|
|
|
|
|
player.addEventListener('loadedmetadata', function() { |
|
|
const height = player.videoHeight; |
|
|
|
|
|
if (height >= 720) { |
|
|
qualityIndicator.textContent = 'HD'; |
|
|
qualityIndicator.className = 'quality-indicator quality-hd'; |
|
|
} else if (height >= 480) { |
|
|
qualityIndicator.textContent = 'SD'; |
|
|
qualityIndicator.className = 'quality-indicator quality-sd'; |
|
|
} else { |
|
|
qualityIndicator.textContent = 'LOW'; |
|
|
qualityIndicator.className = 'quality-indicator quality-low'; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function todaySchedule(){ |
|
|
const d = utcDayIndex(); |
|
|
if(d===1 || d===2) return { which:'A (Mon-Tue)', list: SCHEDULE_A }; |
|
|
if(d===3 || d===4) return { which:'B (Wed-Thu)', list: SCHEDULE_B }; |
|
|
return { which:'C (Fri-Sat-Sun)', list: SCHEDULE_C }; |
|
|
} |
|
|
|
|
|
|
|
|
const $player = document.getElementById('player'); |
|
|
const $vtitle = document.getElementById('vtitle'); |
|
|
const $vmeta = document.getElementById('vmeta'); |
|
|
const $rows = document.getElementById('rows'); |
|
|
const $mobileRows = document.getElementById('mobile-rows'); |
|
|
const $todayTitle = document.getElementById('schedule-title'); |
|
|
const $liveCount = document.getElementById('live-count'); |
|
|
|
|
|
function renderScheduleUI(){ |
|
|
const sel = todaySchedule(); |
|
|
const list = sel.list; |
|
|
|
|
|
if ($rows) { |
|
|
$rows.innerHTML = ''; |
|
|
list.forEach(function(v, idx) { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'row'; |
|
|
div.innerHTML = '<div class="time">' + formatHourRange(v.start,v.end) + '</div><div class="name">' + v.title + '</div>'; |
|
|
$rows.appendChild(div); |
|
|
}); |
|
|
} |
|
|
|
|
|
if ($mobileRows) { |
|
|
$mobileRows.innerHTML = ''; |
|
|
list.forEach(function(v, idx) { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'row'; |
|
|
div.innerHTML = '<div class="time">' + formatHourRange(v.start,v.end) + '</div><div class="name">' + v.title + '</div>'; |
|
|
$mobileRows.appendChild(div); |
|
|
}); |
|
|
} |
|
|
|
|
|
const dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; |
|
|
const d = utcDayIndex(); |
|
|
if ($todayTitle) { |
|
|
$todayTitle.textContent = '✨ Global Schedule (UTC) — ' + dayNames[d] + ' — Set ' + sel.which; |
|
|
} |
|
|
} |
|
|
|
|
|
function formatHourRange(startH, endH){ |
|
|
function hhmm(h){ |
|
|
const total = Math.floor(h*3600 + 0.5); |
|
|
const hh = Math.floor(total/3600)%24; |
|
|
const mm = Math.floor((total%3600)/60); |
|
|
return String(hh).padStart(2,'0') + ':' + String(mm).padStart(2,'0'); |
|
|
} |
|
|
return hhmm(startH) + ' – ' + hhmm(endH); |
|
|
} |
|
|
renderScheduleUI(); |
|
|
|
|
|
function updateHeader(){ |
|
|
const n = new Date(); |
|
|
const headerTime = document.getElementById('header-time'); |
|
|
if (headerTime) { |
|
|
headerTime.textContent = 'Local: ' + n.toLocaleTimeString() + ' | UTC: ' + n.toUTCString().split(' ')[4]; |
|
|
} |
|
|
} |
|
|
setInterval(updateHeader,1000); |
|
|
updateHeader(); |
|
|
|
|
|
function findCurrentItem(list, h){ |
|
|
for(let i=0;i<list.length;i++){ |
|
|
const s = list[i].start, e = list[i].end; |
|
|
if(s < e){ |
|
|
if(h >= s && h < e) return i; |
|
|
}else{ |
|
|
if(h >= s || h < e) return i; |
|
|
} |
|
|
} |
|
|
return 0; |
|
|
} |
|
|
|
|
|
let playTimer = null; |
|
|
function schedulePlay(){ |
|
|
const sel = todaySchedule(); |
|
|
const list = sel.list; |
|
|
const h = nowHour(); |
|
|
const idx = findCurrentItem(list, h); |
|
|
const v = list[idx]; |
|
|
|
|
|
const elapsedSec = Math.round(((h - v.start + 24) % 24) * 3600); |
|
|
const pos = elapsedSec % v.duration; |
|
|
|
|
|
if($player.src !== v.url){ |
|
|
$player.src = v.url; |
|
|
$player.load(); |
|
|
} |
|
|
|
|
|
try { |
|
|
$player.currentTime = pos; |
|
|
} catch (e) { |
|
|
console.log('Could not set current time'); |
|
|
} |
|
|
|
|
|
$player.loop = true; |
|
|
$player.play().catch(function(error) { |
|
|
console.log('Autoplay prevented (normal behavior)'); |
|
|
}); |
|
|
|
|
|
if ($vtitle) $vtitle.textContent = v.title; |
|
|
if ($vmeta) $vmeta.textContent = 'Duration: ' + secFmt(v.duration); |
|
|
|
|
|
const rowNodes = document.querySelectorAll('#rows .row, #mobile-rows .row'); |
|
|
rowNodes.forEach(function(r,i) { |
|
|
r.classList.toggle('active', (i%list.length)===idx); |
|
|
}); |
|
|
|
|
|
const nowH = h; |
|
|
const msUntilNext = Math.max(1000, Math.round(((v.end - nowH + 24) % 24) * 3600 * 1000)); |
|
|
if(playTimer) clearTimeout(playTimer); |
|
|
playTimer = setTimeout(function() { |
|
|
renderScheduleUI(); |
|
|
schedulePlay(); |
|
|
}, msUntilNext + 200); |
|
|
} |
|
|
|
|
|
$player.addEventListener('loadedmetadata', function(){ |
|
|
const r = $player.videoWidth / $player.videoHeight; |
|
|
if(r < 1){ |
|
|
$player.style.objectFit = 'contain'; |
|
|
$player.style.background = '#000'; |
|
|
} else { |
|
|
$player.style.objectFit = 'cover'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const BUCKETS = [ |
|
|
{start:0,end:6,min:700,max:2000}, |
|
|
{start:6,end:12,min:1400,max:3500}, |
|
|
{start:12,end:18,min:3000,max:6000}, |
|
|
{start:18,end:24,min:4000,max:8000} |
|
|
]; |
|
|
function bucketFor(h){ return BUCKETS.find(function(b) { return h>=b.start && h<b.end; }) || BUCKETS[0]; } |
|
|
function randStep(){ return (Math.random()<0.5?-1:1)*(20 + Math.floor(Math.random()*50)); } |
|
|
function delay(){ return (3 + Math.random() * 5) * 1000; } |
|
|
|
|
|
let liveCount, liveBucket, liveTimer; |
|
|
function initLive(){ |
|
|
const h = nowHour(); |
|
|
liveBucket = bucketFor(h); |
|
|
const span = liveBucket.max - liveBucket.min; |
|
|
liveCount = liveBucket.min + Math.floor(span * (0.3 + Math.random()*0.4)); |
|
|
if ($liveCount) $liveCount.textContent = liveCount.toLocaleString(); |
|
|
} |
|
|
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(), liveBucket.min, liveBucket.max); |
|
|
} |
|
|
if ($liveCount) $liveCount.textContent = liveCount.toLocaleString(); |
|
|
liveTimer = setTimeout(tickLive, delay()); |
|
|
} |
|
|
document.addEventListener('visibilitychange', function(){ |
|
|
if(document.hidden){ if(liveTimer) clearTimeout(liveTimer); liveTimer = null; } |
|
|
else if(!liveTimer) liveTimer = setTimeout(tickLive, delay()); |
|
|
}); |
|
|
initLive(); |
|
|
liveTimer = setTimeout(tickLive, delay()); |
|
|
|
|
|
|
|
|
const EMOJIS = [{key:'heart',sym:'❤️'},{key:'fire',sym:'🔥'},{key:'dancer',sym:'💃'},{key:'spark',sym:'✨'}]; |
|
|
const STORAGE_PREFIX = 'pro-reactions:'; |
|
|
function utcDateKey(){ const d=new Date(); return d.getUTCFullYear() + '-' + String(d.getUTCMonth()+1).padStart(2,'0') + '-' + String(d.getUTCDate()).padStart(2,'0'); } |
|
|
const STORAGE_KEY = STORAGE_PREFIX + utcDateKey(); |
|
|
|
|
|
function dailySeedBase(){ |
|
|
const key = utcDateKey(); |
|
|
let h=0; for(let i=0;i<key.length;i++) h = (h*31 + key.charCodeAt(i)) % 100000; |
|
|
return { heart: 500 + (h%600), fire:400 + ((h>>2)%500), dancer:300 + ((h>>3)%400), spark:220 + ((h>>4)%320) }; |
|
|
} |
|
|
let reactionCounts = { heart:0, fire:0, dancer:0, spark:0 }; |
|
|
function loadReactions(){ |
|
|
const base = dailySeedBase(); |
|
|
try{ |
|
|
const raw = localStorage.getItem(STORAGE_KEY); |
|
|
const local = raw ? JSON.parse(raw) : {}; |
|
|
reactionCounts.heart = base.heart + (local.heart||0); |
|
|
reactionCounts.fire = base.fire + (local.fire||0); |
|
|
reactionCounts.dancer= base.dancer+ (local.dancer||0); |
|
|
reactionCounts.spark = base.spark + (local.spark||0); |
|
|
}catch(e){ |
|
|
reactionCounts = base; |
|
|
} |
|
|
renderReactions(); |
|
|
} |
|
|
function saveLocalInc(type){ |
|
|
try{ |
|
|
const raw = localStorage.getItem(STORAGE_KEY); |
|
|
const obj = raw ? JSON.parse(raw) : { heart:0, fire:0, dancer:0, spark:0 }; |
|
|
obj[type] = (obj[type]||0) + 1; |
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(obj)); |
|
|
}catch(e){} |
|
|
} |
|
|
function renderReactions(){ |
|
|
const elements = { |
|
|
'count-heart': reactionCounts.heart.toLocaleString(), |
|
|
'count-fire': reactionCounts.fire.toLocaleString(), |
|
|
'count-dancer': reactionCounts.dancer.toLocaleString(), |
|
|
'count-spark': reactionCounts.spark.toLocaleString() |
|
|
}; |
|
|
|
|
|
Object.keys(elements).forEach(id => { |
|
|
const el = document.getElementById(id); |
|
|
if (el) el.textContent = elements[id]; |
|
|
}); |
|
|
|
|
|
const todayReactions = document.getElementById('today-reactions'); |
|
|
if (todayReactions) { |
|
|
todayReactions.textContent = |
|
|
'Today ❤️' + reactionCounts.heart + ' 🔥' + reactionCounts.fire + ' 💃' + reactionCounts.dancer + ' ✨' + reactionCounts.spark; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let activeParticles = 0; |
|
|
const maxParticles = detectMobile() ? 3 : 15; |
|
|
|
|
|
function spawnOptimizedParticles(type, x, y){ |
|
|
if(activeParticles > maxParticles) return; |
|
|
|
|
|
const pane = document.getElementById('panel').getBoundingClientRect(); |
|
|
const burst = document.createElement('div'); |
|
|
burst.className='burst'; |
|
|
burst.style.left=(x-pane.left-25)+'px'; |
|
|
burst.style.top=(y-pane.top-25)+'px'; |
|
|
burst.textContent = EMOJIS.find(function(e) { return e.key===type; }).sym; |
|
|
burst.style.fontSize='35px'; |
|
|
document.getElementById('panel').appendChild(burst); |
|
|
activeParticles++; |
|
|
|
|
|
setTimeout(function(){ |
|
|
if (burst.parentNode) { |
|
|
burst.remove(); |
|
|
activeParticles--; |
|
|
} |
|
|
}, 1000); |
|
|
|
|
|
const particleCount = detectMobile() ? 2 : 6; |
|
|
for(let i=0;i<particleCount;i++){ |
|
|
const p = document.createElement('div'); |
|
|
p.className='particle'; |
|
|
p.textContent = EMOJIS.find(function(e) { return e.key===type; }).sym; |
|
|
p.style.left = (x - pane.left + (Math.random()*80-40)) + 'px'; |
|
|
p.style.top = (y - pane.top + (Math.random()*40-20)) + 'px'; |
|
|
p.style.animationDelay = (Math.random()*300) + 'ms'; |
|
|
document.getElementById('panel').appendChild(p); |
|
|
activeParticles++; |
|
|
|
|
|
setTimeout(function(){ |
|
|
if (p.parentNode) { |
|
|
p.remove(); |
|
|
activeParticles--; |
|
|
} |
|
|
}, 2000); |
|
|
} |
|
|
} |
|
|
|
|
|
function setupEmojiClicks(){ |
|
|
const panel = document.getElementById('emoji-panel'); |
|
|
if (!panel) return; |
|
|
|
|
|
panel.addEventListener('click', function(ev){ |
|
|
const btn = ev.target.closest('.emoji-btn'); |
|
|
if(!btn) return; |
|
|
const type = btn.getAttribute('data-type'); |
|
|
const rect = btn.getBoundingClientRect(); |
|
|
const x = rect.left + rect.width/2; |
|
|
const y = rect.top + rect.height/2; |
|
|
reactionCounts[type] = (reactionCounts[type]||0) + 1; |
|
|
saveLocalInc(type); |
|
|
renderReactions(); |
|
|
spawnOptimizedParticles(type, x, y); |
|
|
}); |
|
|
} |
|
|
loadReactions(); |
|
|
setupEmojiClicks(); |
|
|
|
|
|
function msToNextUtcMidnight(){ |
|
|
const now = new Date(); |
|
|
const next = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()+1, 0,0,0)); |
|
|
return next - now; |
|
|
} |
|
|
setTimeout(function() { location.reload(); }, msToNextUtcMidnight()+1500); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
console.log('Initializing ultra-optimized version for:', detectMobile() ? 'Mobile' : 'Desktop'); |
|
|
|
|
|
initSimpleAudioEnable(); |
|
|
initMuteControl(); |
|
|
initVolumeControl(); |
|
|
|
|
|
if (!detectMobile()) { |
|
|
initTheaterMode(); |
|
|
initFullscreenControl(); |
|
|
initPictureInPictureControl(); |
|
|
initKeyboardShortcuts(); |
|
|
initControlPanelVisibility(); |
|
|
} |
|
|
|
|
|
initProgressBar(); |
|
|
initQualityIndicator(); |
|
|
schedulePlay(); |
|
|
}); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
