Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>🇺🇸 USA Audience Dashboard</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap'); | |
| *{margin:0;padding:0;box-sizing:border-box;} | |
| body{ | |
| min-height:100vh; | |
| background:#020408; | |
| font-family:'Inter',sans-serif; | |
| overflow-x:hidden; | |
| color:#fff; | |
| } | |
| /* Aurora animated background */ | |
| .aurora{ | |
| position:fixed; | |
| inset:0; | |
| z-index:0; | |
| overflow:hidden; | |
| } | |
| .aurora::before{ | |
| content:''; | |
| position:absolute; | |
| width:160%;height:160%; | |
| top:-30%;left:-30%; | |
| background: | |
| radial-gradient(ellipse 60% 40% at 20% 30%, rgba(0,180,255,0.18) 0%, transparent 70%), | |
| radial-gradient(ellipse 50% 35% at 75% 20%, rgba(120,0,255,0.15) 0%, transparent 70%), | |
| radial-gradient(ellipse 55% 40% at 50% 80%, rgba(255,0,120,0.12) 0%, transparent 70%), | |
| radial-gradient(ellipse 40% 30% at 85% 70%, rgba(0,255,180,0.1) 0%, transparent 70%); | |
| animation:auroraMove 12s ease-in-out infinite alternate; | |
| } | |
| @keyframes auroraMove{ | |
| 0%{transform:translate(0,0) scale(1);} | |
| 100%{transform:translate(3%,2%) scale(1.05);} | |
| } | |
| /* Grid dots */ | |
| .grid-bg{ | |
| position:fixed; | |
| inset:0; | |
| z-index:0; | |
| background-image: | |
| radial-gradient(circle,rgba(255,255,255,0.06) 1px,transparent 1px); | |
| background-size:40px 40px; | |
| } | |
| .wrapper{ | |
| position:relative; | |
| z-index:1; | |
| max-width:1100px; | |
| margin:0 auto; | |
| padding:30px 20px 50px; | |
| } | |
| /* Header */ | |
| .header{ | |
| text-align:center; | |
| margin-bottom:40px; | |
| } | |
| .header-tag{ | |
| display:inline-block; | |
| font-size:11px; | |
| letter-spacing:4px; | |
| text-transform:uppercase; | |
| color:rgba(0,200,255,0.7); | |
| border:1px solid rgba(0,200,255,0.25); | |
| padding:5px 18px; | |
| border-radius:100px; | |
| margin-bottom:16px; | |
| font-family:'Inter',sans-serif; | |
| font-weight:500; | |
| } | |
| .title{ | |
| font-family:'Orbitron',monospace; | |
| font-size:clamp(22px,5vw,48px); | |
| font-weight:900; | |
| background:linear-gradient(90deg,#00c8ff,#a855f7,#ff2d78,#ff9500,#00c8ff); | |
| background-size:300%; | |
| -webkit-background-clip:text; | |
| -webkit-text-fill-color:transparent; | |
| animation:gradFlow 5s linear infinite; | |
| letter-spacing:2px; | |
| } | |
| @keyframes gradFlow{ | |
| 0%{background-position:0%;} | |
| 100%{background-position:300%;} | |
| } | |
| .subtitle{ | |
| font-size:13px; | |
| color:rgba(255,255,255,0.4); | |
| margin-top:8px; | |
| letter-spacing:1px; | |
| } | |
| /* Live indicator */ | |
| .live-bar{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| gap:10px; | |
| margin:18px 0 30px; | |
| } | |
| .live-dot{ | |
| width:10px;height:10px; | |
| border-radius:50%; | |
| background:#00ff88; | |
| box-shadow:0 0 10px #00ff88; | |
| animation:pulse 1.4s ease-in-out infinite; | |
| } | |
| @keyframes pulse{ | |
| 0%,100%{transform:scale(1);opacity:1;} | |
| 50%{transform:scale(1.5);opacity:0.6;} | |
| } | |
| .live-text{ | |
| font-size:12px; | |
| color:#00ff88; | |
| letter-spacing:3px; | |
| font-weight:600; | |
| font-family:'Orbitron',monospace; | |
| } | |
| /* Cards grid */ | |
| .grid{ | |
| display:grid; | |
| grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); | |
| gap:20px; | |
| margin-bottom:30px; | |
| } | |
| /* Zone card */ | |
| .card{ | |
| background:rgba(255,255,255,0.04); | |
| border:1px solid rgba(255,255,255,0.1); | |
| border-radius:24px; | |
| padding:28px 22px; | |
| position:relative; | |
| overflow:hidden; | |
| backdrop-filter:blur(20px); | |
| transition:transform 0.3s, box-shadow 0.3s; | |
| cursor:default; | |
| } | |
| .card::before{ | |
| content:''; | |
| position:absolute; | |
| inset:0; | |
| border-radius:24px; | |
| padding:1px; | |
| background:var(--card-grad); | |
| -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); | |
| -webkit-mask-composite:xor; | |
| mask-composite:exclude; | |
| opacity:0.6; | |
| } | |
| .card:hover{ | |
| transform:translateY(-4px); | |
| box-shadow:0 20px 60px rgba(0,0,0,0.5); | |
| } | |
| .card-glow{ | |
| position:absolute; | |
| top:-40px;right:-40px; | |
| width:150px;height:150px; | |
| border-radius:50%; | |
| background:var(--glow-color); | |
| opacity:0.12; | |
| filter:blur(40px); | |
| pointer-events:none; | |
| } | |
| .zone-emoji{font-size:28px;margin-bottom:8px;display:block;} | |
| .zone-name{ | |
| font-family:'Orbitron',monospace; | |
| font-size:14px; | |
| font-weight:700; | |
| color:rgba(255,255,255,0.9); | |
| letter-spacing:1.5px; | |
| margin-bottom:16px; | |
| } | |
| .clock{ | |
| font-family:'Orbitron',monospace; | |
| font-size:clamp(24px,4vw,34px); | |
| font-weight:900; | |
| background:var(--time-grad); | |
| background-size:200%; | |
| -webkit-background-clip:text; | |
| -webkit-text-fill-color:transparent; | |
| animation:gradFlow 3s linear infinite; | |
| line-height:1; | |
| margin-bottom:6px; | |
| } | |
| .date-str{ | |
| font-size:11px; | |
| color:rgba(255,255,255,0.35); | |
| letter-spacing:0.5px; | |
| margin-bottom:18px; | |
| } | |
| /* Activity badge */ | |
| .badge{ | |
| display:inline-flex; | |
| align-items:center; | |
| gap:7px; | |
| padding:7px 15px; | |
| border-radius:100px; | |
| font-size:12px; | |
| font-weight:700; | |
| letter-spacing:1px; | |
| font-family:'Orbitron',monospace; | |
| border:1px solid var(--badge-border); | |
| background:var(--badge-bg); | |
| color:var(--badge-color); | |
| box-shadow:0 0 20px var(--badge-glow); | |
| } | |
| .badge-dot{ | |
| width:7px;height:7px; | |
| border-radius:50%; | |
| background:var(--badge-color); | |
| animation:pulse 1.4s infinite; | |
| } | |
| /* Activity colours */ | |
| .peak{--badge-color:#ff00cc;--badge-border:rgba(255,0,204,0.4);--badge-bg:rgba(255,0,204,0.1);--badge-glow:rgba(255,0,204,0.3);} | |
| .veryhigh{--badge-color:#00ff88;--badge-border:rgba(0,255,136,0.4);--badge-bg:rgba(0,255,136,0.1);--badge-glow:rgba(0,255,136,0.3);} | |
| .high{--badge-color:#00c8ff;--badge-border:rgba(0,200,255,0.4);--badge-bg:rgba(0,200,255,0.1);--badge-glow:rgba(0,200,255,0.3);} | |
| .medium{--badge-color:#ffd500;--badge-border:rgba(255,213,0,0.4);--badge-bg:rgba(255,213,0,0.1);--badge-glow:rgba(255,213,0,0.3);} | |
| .low{--badge-color:#ff4455;--badge-border:rgba(255,68,85,0.4);--badge-bg:rgba(255,68,85,0.1);--badge-glow:rgba(255,68,85,0.3);} | |
| /* Best post time */ | |
| .best-time{ | |
| margin-top:14px; | |
| font-size:11px; | |
| color:rgba(255,255,255,0.4); | |
| } | |
| .best-time span{ | |
| color:rgba(255,255,255,0.8); | |
| font-weight:600; | |
| } | |
| /* Activity bar */ | |
| .bar-wrap{margin-top:14px;} | |
| .bar-label{font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1px;margin-bottom:5px;} | |
| .bar-track{ | |
| height:4px; | |
| background:rgba(255,255,255,0.08); | |
| border-radius:10px; | |
| overflow:hidden; | |
| } | |
| .bar-fill{ | |
| height:100%; | |
| border-radius:10px; | |
| background:var(--badge-color); | |
| box-shadow:0 0 8px var(--badge-color); | |
| transition:width 1s ease; | |
| } | |
| /* Bottom panel */ | |
| .bottom-panel{ | |
| display:grid; | |
| grid-template-columns:1fr 1fr; | |
| gap:20px; | |
| } | |
| @media(max-width:600px){.bottom-panel{grid-template-columns:1fr;}} | |
| .panel{ | |
| background:rgba(255,255,255,0.04); | |
| border:1px solid rgba(255,255,255,0.1); | |
| border-radius:20px; | |
| padding:24px; | |
| backdrop-filter:blur(20px); | |
| } | |
| .panel-title{ | |
| font-family:'Orbitron',monospace; | |
| font-size:12px; | |
| letter-spacing:2px; | |
| color:rgba(255,255,255,0.5); | |
| margin-bottom:16px; | |
| text-transform:uppercase; | |
| } | |
| /* Timeline chart */ | |
| .timeline{display:flex;align-items:flex-end;gap:4px;height:60px;} | |
| .bar-col{ | |
| flex:1; | |
| border-radius:4px 4px 0 0; | |
| background:rgba(255,255,255,0.1); | |
| position:relative; | |
| cursor:default; | |
| transition:background 0.3s; | |
| } | |
| .bar-col.active{background:linear-gradient(180deg,#a855f7,#00c8ff);} | |
| .bar-col.now{background:linear-gradient(180deg,#ff00cc,#ff9500);box-shadow:0 0 12px rgba(255,0,204,0.5);} | |
| .bar-col:hover .tooltip{opacity:1;} | |
| .tooltip{ | |
| position:absolute; | |
| bottom:calc(100% + 6px); | |
| left:50%;transform:translateX(-50%); | |
| background:rgba(0,0,0,0.85); | |
| border:1px solid rgba(255,255,255,0.15); | |
| border-radius:8px; | |
| padding:4px 8px; | |
| font-size:10px; | |
| white-space:nowrap; | |
| color:#fff; | |
| opacity:0; | |
| pointer-events:none; | |
| transition:opacity 0.2s; | |
| z-index:10; | |
| } | |
| .hour-labels{ | |
| display:flex; | |
| gap:4px; | |
| margin-top:6px; | |
| } | |
| .hour-labels span{ | |
| flex:1; | |
| font-size:8px; | |
| color:rgba(255,255,255,0.25); | |
| text-align:center; | |
| } | |
| /* Best window list */ | |
| .window-list{display:flex;flex-direction:column;gap:10px;} | |
| .window-item{ | |
| display:flex; | |
| align-items:center; | |
| gap:12px; | |
| padding:10px 14px; | |
| background:rgba(255,255,255,0.04); | |
| border-radius:12px; | |
| border:1px solid rgba(255,255,255,0.07); | |
| } | |
| .window-icon{font-size:20px;} | |
| .window-info{flex:1;} | |
| .window-time{font-size:13px;font-weight:600;color:#fff;} | |
| .window-desc{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;} | |
| .window-badge{ | |
| font-size:10px; | |
| padding:3px 10px; | |
| border-radius:100px; | |
| font-weight:700; | |
| font-family:'Orbitron',monospace; | |
| } | |
| .wb-peak{background:rgba(255,0,204,0.15);color:#ff00cc;border:1px solid rgba(255,0,204,0.3);} | |
| .wb-high{background:rgba(0,255,136,0.1);color:#00ff88;border:1px solid rgba(0,255,136,0.3);} | |
| .wb-med{background:rgba(255,213,0,0.1);color:#ffd500;border:1px solid rgba(255,213,0,0.3);} | |
| /* Footer */ | |
| .footer{ | |
| text-align:center; | |
| margin-top:40px; | |
| font-size:11px; | |
| color:rgba(255,255,255,0.2); | |
| letter-spacing:1px; | |
| } | |
| .footer span{color:rgba(0,200,255,0.5);} | |
| /* Card color themes */ | |
| .c-ny{--card-grad:linear-gradient(135deg,rgba(0,200,255,0.4),rgba(168,85,247,0.4));--glow-color:#00c8ff;--time-grad:linear-gradient(90deg,#00c8ff,#a855f7,#00c8ff);} | |
| .c-tx{--card-grad:linear-gradient(135deg,rgba(255,149,0,0.4),rgba(255,45,120,0.4));--glow-color:#ff9500;--time-grad:linear-gradient(90deg,#ff9500,#ff2d78,#ff9500);} | |
| .c-co{--card-grad:linear-gradient(135deg,rgba(0,255,136,0.4),rgba(0,200,255,0.4));--glow-color:#00ff88;--time-grad:linear-gradient(90deg,#00ff88,#00c8ff,#00ff88);} | |
| .c-ca{--card-grad:linear-gradient(135deg,rgba(255,0,204,0.4),rgba(255,149,0,0.4));--glow-color:#ff00cc;--time-grad:linear-gradient(90deg,#ff00cc,#ff9500,#ff00cc);} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="aurora"></div> | |
| <div class="grid-bg"></div> | |
| <div class="wrapper"> | |
| <div class="header"> | |
| <div class="header-tag">⚡ ROWDYHIKE COMMAND CENTER</div> | |
| <div class="title">🇺🇸 USA LIVE AUDIENCE</div> | |
| <div class="subtitle">Real-time zone activity · Updated every second</div> | |
| </div> | |
| <div class="live-bar"> | |
| <div class="live-dot"></div> | |
| <div class="live-text">LIVE</div> | |
| <div class="live-dot"></div> | |
| </div> | |
| <div class="grid" id="cards"></div> | |
| <div class="bottom-panel"> | |
| <div class="panel"> | |
| <div class="panel-title">📊 New York — 24hr Activity</div> | |
| <div class="timeline" id="timeline"></div> | |
| <div class="hour-labels" id="hlabels"></div> | |
| </div> | |
| <div class="panel"> | |
| <div class="panel-title">🎯 Best Upload Windows (ET)</div> | |
| <div class="window-list"> | |
| <div class="window-item"> | |
| <div class="window-icon">🔥</div> | |
| <div class="window-info"> | |
| <div class="window-time">5:00 PM – 9:00 PM</div> | |
| <div class="window-desc">Evening prime — max engagement</div> | |
| </div> | |
| <div class="window-badge wb-peak">PEAK</div> | |
| </div> | |
| <div class="window-item"> | |
| <div class="window-icon">🚀</div> | |
| <div class="window-info"> | |
| <div class="window-time">12:00 PM – 3:00 PM</div> | |
| <div class="window-desc">Lunch scroll — very high reach</div> | |
| </div> | |
| <div class="window-badge wb-high">HIGH</div> | |
| </div> | |
| <div class="window-item"> | |
| <div class="window-icon">☀️</div> | |
| <div class="window-info"> | |
| <div class="window-time">7:00 AM – 9:00 AM</div> | |
| <div class="window-desc">Morning commute — good CPM</div> | |
| </div> | |
| <div class="window-badge wb-med">MEDIUM</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer">Made with ❤️ by <span>Deepu</span> · @RowdyHike</div> | |
| </div> | |
| <script> | |
| const zones=[ | |
| {name:"NEW YORK",tz:"America/New_York",emoji:"🗽",cls:"c-ny",key:"ny"}, | |
| {name:"TEXAS",tz:"America/Chicago",emoji:"🤠",cls:"c-tx",key:"tx"}, | |
| {name:"DENVER",tz:"America/Denver",emoji:"🏔️",cls:"c-co",key:"co"}, | |
| {name:"CALIFORNIA",tz:"America/Los_Angeles",emoji:"🌴",cls:"c-ca",key:"ca"} | |
| ]; | |
| const HOUR_DATA=[ | |
| // 0-23 activity level 0-100 | |
| 10,5,5,5,5,10,25,55,75,85,90,88, | |
| 92,95,90,85,95,98,100,95,85,70,50,25 | |
| ]; | |
| const HOUR_LABELS=["12a","2a","4a","6a","8a","10a","12p","2p","4p","6p","8p","10p"]; | |
| function activity(h){ | |
| if(h>=17&&h<22) return {label:"🔥 PEAK",cls:"peak",pct:100}; | |
| if(h>=12&&h<17) return {label:"★ VERY HIGH",cls:"veryhigh",pct:85}; | |
| if(h>=9&&h<12) return {label:"▲ HIGH",cls:"high",pct:70}; | |
| if(h>=6&&h<9) return {label:"◆ MEDIUM",cls:"medium",pct:50}; | |
| if(h>=22||h<1) return {label:"◆ MEDIUM",cls:"medium",pct:45}; | |
| return {label:"▼ LOW",cls:"low",pct:20}; | |
| } | |
| function bestPost(zone){ | |
| if(zone==="ny") return "Post at 5–9 PM ET"; | |
| if(zone==="tx") return "Post at 4–8 PM CT"; | |
| if(zone==="co") return "Post at 3–7 PM MT"; | |
| return "Post at 2–6 PM PT"; | |
| } | |
| function getHour(tz){ | |
| return parseInt(new Date().toLocaleString("en-US",{timeZone:tz,hour:"numeric",hour12:false})); | |
| } | |
| function renderCards(){ | |
| const container=document.getElementById("cards"); | |
| const t=Date.now(); | |
| let html=""; | |
| zones.forEach(z=>{ | |
| const now=new Date(); | |
| const time=now.toLocaleTimeString("en-US",{timeZone:z.tz,hour12:true}); | |
| const date=now.toLocaleDateString("en-US",{timeZone:z.tz,weekday:"short",month:"short",day:"numeric"}); | |
| const h=getHour(z.tz); | |
| const act=activity(h); | |
| html+=` | |
| <div class="card ${z.cls} ${act.cls}"> | |
| <div class="card-glow"></div> | |
| <span class="zone-emoji">${z.emoji}</span> | |
| <div class="zone-name">${z.name}</div> | |
| <div class="clock">${time}</div> | |
| <div class="date-str">${date}</div> | |
| <div class="badge ${act.cls}"> | |
| <div class="badge-dot"></div> | |
| ${act.label} | |
| </div> | |
| <div class="bar-wrap"> | |
| <div class="bar-label">ACTIVITY LEVEL</div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" style="width:${act.pct}%"></div> | |
| </div> | |
| </div> | |
| <div class="best-time">🎯 Tip: <span>${bestPost(z.key)}</span></div> | |
| </div>`; | |
| }); | |
| container.innerHTML=html; | |
| } | |
| function renderTimeline(){ | |
| const nyHour=getHour("America/New_York"); | |
| const tmpl=document.getElementById("timeline"); | |
| const hl=document.getElementById("hlabels"); | |
| // Show every 2 hours = 12 columns | |
| let bars="",labels=""; | |
| for(let i=0;i<12;i++){ | |
| const h=i*2; | |
| const pct=HOUR_DATA[h]; | |
| const isNow=(nyHour>=h&&nyHour<h+2); | |
| const isPast=nyHour>h+1; | |
| let cls=isNow?"now":isPast?"active":""; | |
| bars+=`<div class="bar-col ${cls}" style="height:${pct}%" title="${h===0?12:h>12?h-12:h}${h<12?'am':'pm'} – ${Math.round(pct)}% activity"> | |
| <div class="tooltip">${h===0?'12am':h>=12?(h===12?'12pm':(h-12)+'pm'):h+'am'} · ${Math.round(pct)}%</div> | |
| </div>`; | |
| labels+=`<span>${HOUR_LABELS[i]}</span>`; | |
| } | |
| tmpl.innerHTML=bars; | |
| hl.innerHTML=labels; | |
| } | |
| function update(){renderCards();renderTimeline();} | |
| setInterval(update,1000); | |
| update(); | |
| </script> | |
| </body> | |
| </html> | |