Download index.html from Meneman/bdance: direct link, hf CLI and curl.
- Browser
- Download file 72.3 kB
-
https://huggingface.co/spaces/Meneman/bdance/resolve/main/index.html
- Command line
-
hf download hf://spaces/Meneman/bdance/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Meneman/bdance/resolve/main/index.html
72.3 kB
| <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} | |
| /* DESKTOP-FIRST: Full Experience */ | |
| @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} | |
| /* Multi-Layer Background System */ | |
| 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 Effect */ | |
| .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 System - Desktop Only */ | |
| .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) ; | |
| 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)}} | |
| /* Desktop Performance Toggle */ | |
| .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 Settings Panel */ | |
| .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 Selection Grid */ | |
| .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} | |
| /* Performance Modes */ | |
| .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} | |
| /* Floating Elements */ | |
| .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 */ | |
| 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%}} | |
| /* Video Panel */ | |
| .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}} | |
| /* Corner Accents */ | |
| .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 */ | |
| .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 */ | |
| .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)} | |
| /* Volume Button */ | |
| .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 Slider */ | |
| .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 Buttons */ | |
| .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 */ | |
| .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 */ | |
| .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)} | |
| /* Keyboard Shortcuts */ | |
| .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 Section */ | |
| .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 Section */ | |
| .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} | |
| /* Badges - Desktop positioning */ | |
| .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 - Desktop */ | |
| .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)} | |
| /* Particles */ | |
| .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 */ | |
| #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 Text */ | |
| .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 */ | |
| .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)}} | |
| /* ============================================= */ | |
| /* ULTRA-MINIMAL MOBILE MODE - COMPLETELY SEPARATE INTERFACE */ | |
| /* ============================================= */ | |
| @media (max-width:768px) and (orientation:portrait){ | |
| /* DISABLE ALL DESKTOP FEATURES */ | |
| body{cursor:auto ;background:#0a0a1e } | |
| .cursor,.cursor-trail,.aurora,.music-notes,.corner-accent,.panel::before,.panel::after{display:none } | |
| .performance-toggle,.performance-panel{display:none } | |
| body::before{display:none } | |
| #bubbles{display:none } | |
| .welcome-neon{display:none } | |
| /* MOBILE-ONLY: Ultra-Simple Layout */ | |
| 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 ;margin:0;animation:none ; | |
| background:linear-gradient(90deg,#ff6b6b,#4ecdc4) ; | |
| -webkit-background-clip:text ;background-clip:text ;color:transparent } | |
| .sub{font-size:12px;margin:5px 0 0} | |
| .divider{display:none} | |
| /* MOBILE-ONLY: Simplified Video Panel */ | |
| .panel{margin:60px 0 0 0 ;max-width:none ;border-radius:0 ; | |
| aspect-ratio:auto ;position:fixed ;inset:0 ; | |
| height:calc(100vh - 60px) ;border:none ;background:#000 ; | |
| backdrop-filter:none ;box-shadow:none } | |
| .panel:hover{transform:none } | |
| video{border-radius:0 ;filter:none } | |
| /* MOBILE-ONLY: Minimal Controls */ | |
| .control-panel{ | |
| position:fixed ; | |
| bottom:10px ; | |
| left:10px ; | |
| right:10px ; | |
| transform:none ; | |
| gap:8px ; | |
| padding:8px 12px ; | |
| opacity:1 ; | |
| background:rgba(0,0,0,0.95) ; | |
| backdrop-filter:blur(5px) ; | |
| border:1px solid rgba(255,107,107,0.4) ; | |
| z-index:50 ; | |
| border-radius:25px ; | |
| } | |
| .mute-btn{width:36px ;height:36px ;border:1px solid rgba(255,107,107,0.5) ; | |
| backdrop-filter:none } | |
| .mute-icon{font-size:16px } | |
| .volume-slider{width:60px ;height:4px } | |
| .control-btn{width:28px ;height:28px ;font-size:12px ; | |
| backdrop-filter:none } | |
| /* MOBILE-ONLY: Simple Badges */ | |
| .live-badge{top:70px ;left:10px ;font-size:11px ; | |
| padding:6px 10px ;z-index:55 ;backdrop-filter:blur(5px) } | |
| .reactions-badge{bottom:70px ;left:10px ;font-size:11px ; | |
| padding:6px 10px ;z-index:55 ;backdrop-filter:blur(5px) } | |
| /* MOBILE-ONLY: Minimal Quality Indicator */ | |
| .quality-indicator{top:70px ;right:10px ;font-size:10px ; | |
| padding:4px 8px ;z-index:40 ;backdrop-filter:blur(5px) } | |
| /* MOBILE-ONLY: Simple Emoji Panel */ | |
| .emoji-panel{ | |
| position:fixed ; | |
| right:10px ; | |
| top:50% ; | |
| transform:translateY(-50%) ; | |
| gap:8px ; | |
| z-index:45 ; | |
| } | |
| .emoji-btn{width:40px ;height:40px ;font-size:18px ; | |
| border:1px solid rgba(255,255,255,.4) ;backdrop-filter:blur(5px) } | |
| .emoji-count{right:50px ;min-width:40px ;height:24px ; | |
| font-size:10px ;backdrop-filter:blur(5px) } | |
| /* MOBILE-ONLY: Ultra-Simple Schedule */ | |
| .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-ONLY: Tap Indicator */ | |
| .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} | |
| /* MOBILE-ONLY: Hide Desktop Elements */ | |
| .info,.schedule,footer,.shortcuts-overlay,.audio-visualizer{display:none } | |
| /* MOBILE-ONLY: No Effects */ | |
| *{animation:none ;transition:none ;backdrop-filter:none ; | |
| box-shadow:none ;filter:none } | |
| .control-panel,.emoji-btn,.live-badge,.reactions-badge,.quality-indicator{ | |
| backdrop-filter:blur(5px) } | |
| } | |
| /* Hide mobile elements on desktop */ | |
| @media (min-width:769px) { | |
| .mobile-schedule,.mobile-tap-indicator{display:none } | |
| } | |
| /* Disable ALL animations for reduced motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *{animation:none ;animation-iteration-count:1 ;transition:none } | |
| .aurora,.music-notes,.corner-accent{display:none } | |
| } | |
| </style> | |
| </head> | |
| <body class="balanced-mode"> | |
| <div class="aurora"></div> | |
| <div class="cursor" id="cursor"></div> | |
| <div class="music-notes" id="music-notes"></div> | |
| <!-- Desktop Performance Toggle --> | |
| <div class="performance-toggle" id="performance-toggle"> | |
| <span class="mode-icon">⚙️</span> | |
| <span class="mode-text" id="mode-text">Balanced</span> | |
| </div> | |
| <!-- Desktop Performance Panel --> | |
| <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> | |
| <!-- Keyboard Shortcuts Overlay --> | |
| <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> | |
| <!-- MOBILE-ONLY: Ultra-Simple Schedule --> | |
| <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> | |
| /* ULTRA-MOBILE OPTIMIZED: Minimal JavaScript for Mobile */ | |
| let isMobile = false; | |
| let audioEnabled = false; | |
| let isMuted = false; | |
| let currentVolume = 0.5; | |
| /* Detect Mobile Device */ | |
| function detectMobile() { | |
| isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || | |
| (window.innerWidth <= 768 && 'ontouchstart' in window); | |
| return isMobile; | |
| } | |
| /* DESKTOP-ONLY: Full Performance System */ | |
| if (!detectMobile()) { | |
| // Full desktop experience with all features | |
| 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; | |
| /* Performance Monitoring System */ | |
| 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; | |
| } | |
| } | |
| }; | |
| /* Performance Mode Configuration */ | |
| 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 } | |
| }; | |
| /* Performance Mode System */ | |
| 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}`); | |
| } | |
| /* Cursor System */ | |
| 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); | |
| } | |
| /* Floating Elements */ | |
| 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); | |
| } | |
| /* Bubble System */ | |
| 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); | |
| } | |
| // Initialize desktop features | |
| initPerformanceModeSystem(); | |
| initOptimizedCursor(); | |
| // Desktop intervals | |
| 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); | |
| } | |
| /* MOBILE-ONLY: Ultra-Minimal Experience */ | |
| 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; | |
| }); | |
| // Show initial indicator | |
| setTimeout(showMobileIndicator, 1000); | |
| } | |
| /* SHARED: Audio Enable */ | |
| 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; | |
| } | |
| } | |
| /* SHARED: Schedules */ | |
| 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; | |
| /* Utilities */ | |
| 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));} | |
| /* SHARED: Control Functions */ | |
| 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; // Skip for mobile | |
| 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 }; | |
| } | |
| // Cache DOM elements | |
| 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'; | |
| } | |
| }); | |
| /* Live Count System */ | |
| 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()); | |
| /* Reactions System */ | |
| 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; | |
| } | |
| } | |
| /* Particle System */ | |
| 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); | |
| // Initialize everything | |
| 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> |