|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" /> |
|
|
<title>EMMYS Portal</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script defer src="https://unpkg.com/lucide@latest"></script> |
|
|
<script src="https://unpkg.com/@motionone/dom"></script> |
|
|
<style> |
|
|
body{ |
|
|
min-height:100vh; |
|
|
background: |
|
|
linear-gradient(rgba(5,5,5,.82), rgba(5,5,5,.82)), |
|
|
url('https://wallpapercave.com/wp/wp2186661.jpg') center/cover fixed no-repeat; |
|
|
} |
|
|
.glass{ background: linear-gradient(135deg, rgba(20,17,15,0.85), rgba(20,17,15,0.35)); } |
|
|
.border-gold{ border-color: rgba(234,179,8,.22) } |
|
|
.pill{ padding:.25rem .7rem; border-radius:9999px; font-size:.72rem; border:1px solid rgba(234,179,8,.35); background: rgba(234,179,8,.08); color:#fde68a; } |
|
|
.ticker > div { animation: ticker 24s linear infinite; } |
|
|
@keyframes ticker { from {transform: translateX(0);} to {transform: translateX(-50%);} } |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-yellow-50 relative"> |
|
|
<div class="max-w-6xl mx-auto p-6 relative"> |
|
|
|
|
|
<header class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-3"> |
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-yellow-300 via-yellow-500 to-amber-600 flex items-center justify-center shadow-md"> |
|
|
<i data-lucide="sparkles" class="w-5 h-5 text-black"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-xs uppercase tracking-widest text-yellow-300/80">AI WEEK</p> |
|
|
<h1 class="text-2xl md:text-3xl font-black text-yellow-200">Emmys Portal</h1> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center gap-3"> |
|
|
<div id="avatar" class="w-10 h-10 rounded-full bg-yellow-500/20 ring-2 ring-yellow-400/60 flex items-center justify-center text-yellow-200 font-semibold">U</div> |
|
|
<div class="text-right"> |
|
|
<div id="user" class="text-sm text-yellow-100/90">Guest</div> |
|
|
<div class="text-xs text-emerald-300 flex items-center gap-1"><i data-lucide="shield-check" class="w-4 h-4"></i> Access Granted</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="mt-8 rounded-3xl overflow-hidden border border-gold glass p-8 md:p-12"> |
|
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
|
<div class="flex-1"> |
|
|
<div class="flex items-center gap-2 mb-3 text-xs"> |
|
|
<span class="pill">Official</span> |
|
|
<span class="pill">Access Level: Gold</span> |
|
|
<span id="scorePill" class="pill hidden"></span> |
|
|
</div> |
|
|
<h2 class="text-3xl md:text-4xl font-black text-yellow-200">Welcome to the Emmys, <span id="user2">Guest</span>.</h2> |
|
|
<p class="mt-3 text-yellow-100/70 max-w-prose">Explore nominees, watch the ceremony, and trigger your team’s automations. This is your protected area.</p> |
|
|
|
|
|
<div class="mt-6 flex flex-wrap gap-3"> |
|
|
<a href="#schedule" data-raise class="px-4 py-2 rounded-xl bg-yellow-400 text-black font-semibold flex items-center gap-2 shadow"> |
|
|
<i data-lucide="clock-5" class="w-4 h-4"></i> View Schedule |
|
|
</a> |
|
|
<a href="#live" data-raise class="px-4 py-2 rounded-xl bg-yellow-50/10 text-yellow-200 border border-yellow-200/20 flex items-center gap-2"> |
|
|
<i data-lucide="radio" class="w-4 h-4"></i> Live Stream |
|
|
</a> |
|
|
<a href="category-1.html" data-raise class="px-4 py-2 rounded-xl bg-yellow-50/10 text-yellow-200 border border-yellow-200/20 flex items-center gap-2"> |
|
|
<i data-lucide="trophy" class="w-4 h-4"></i> Browse Categories |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 w-full rounded-2xl border border-gold bg-yellow-50/[0.04] p-6"> |
|
|
<div class="text-yellow-200/80 text-sm mb-2">Ceremony starts in</div> |
|
|
<div id="countdown" class="text-3xl font-black text-yellow-300 tracking-wide">00:00:00</div> |
|
|
<div class="text-xs text-yellow-100/60 mt-2">Tonight • 20:00 (Local)</div> |
|
|
<div class="mt-4 grid grid-cols-3 gap-2 text-xs"> |
|
|
<div class="rounded-xl bg-yellow-50/[0.05] border border-gold p-3 text-center"> |
|
|
<div class="text-yellow-100/70">Doors</div><div class="font-semibold text-yellow-100">19:00</div> |
|
|
</div> |
|
|
<div class="rounded-xl bg-yellow-50/[0.05] border border-gold p-3 text-center"> |
|
|
<div class="text-yellow-100/70">Live</div><div class="font-semibold text-yellow-100">20:00</div> |
|
|
</div> |
|
|
<div class="rounded-xl bg-yellow-50/[0.05] border border-gold p-3 text-center"> |
|
|
<div class="text-yellow-100/70">After</div><div class="font-semibold text-yellow-100">23:30</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mt-6 rounded-2xl border border-gold bg-yellow-50/[0.05] overflow-hidden"> |
|
|
<div class="flex items-center gap-2 px-4 py-2 text-yellow-200 border-b border-gold"> |
|
|
<i data-lucide="megaphone" class="w-4 h-4"></i> |
|
|
<span class="text-xs uppercase tracking-widest">Winners Ticker</span> |
|
|
</div> |
|
|
<div class="ticker whitespace-nowrap flex"> |
|
|
<div class="flex gap-8 px-4 py-3 text-sm text-yellow-100/90"> |
|
|
<span>⭐ Outstanding Drama • “Succession”</span> |
|
|
<span>⭐ Lead Actress • Zendaya</span> |
|
|
<span>⭐ Lead Actor • Jeremy Allen White</span> |
|
|
<span>⭐ Supporting Actress • Hannah Waddingham</span> |
|
|
<span>⭐ Comedy Series • “The Bear”</span> |
|
|
<span>⭐ Directing • Hiro Murai</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex gap-8 px-4 py-3 text-sm text-yellow-100/90" aria-hidden="true"> |
|
|
<span>⭐ Outstanding Drama • “Succession”</span> |
|
|
<span>⭐ Lead Actress • Zendaya</span> |
|
|
<span>⭐ Lead Actor • Jeremy Allen White</span> |
|
|
<span>⭐ Supporting Actress • Hannah Waddingham</span> |
|
|
<span>⭐ Comedy Series • “The Bear”</span> |
|
|
<span>⭐ Directing • Hiro Murai</span> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="live" class="mt-8 grid md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="rounded-3xl border border-gold bg-yellow-50/[0.04] p-6 md:col-span-2"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center gap-2"> |
|
|
<i data-lucide="radio" class="w-5 h-5 text-yellow-300"></i> |
|
|
<h3 class="text-yellow-100 font-semibold">Live Stream</h3> |
|
|
</div> |
|
|
<a class="px-3 py-2 rounded-xl bg-yellow-400 text-black text-sm font-semibold shadow" href="#" onclick="alert('Connect your stream URL'); return false;">Watch</a> |
|
|
</div> |
|
|
<p class="text-yellow-100/70 text-sm mt-2">Connect your RTMP or embed link here. For the hackathon demo, this button can open a recorded clip.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="rounded-3xl border border-gold bg-yellow-50/[0.04] p-6"> |
|
|
<h3 class="text-yellow-100 font-semibold mb-3">Presenters</h3> |
|
|
<div class="flex flex-wrap gap-2 text-sm"> |
|
|
<span class="pill">Pedro Pascal</span> |
|
|
<span class="pill">Aubrey Plaza</span> |
|
|
<span class="pill">Quinta Brunson</span> |
|
|
<span class="pill">Ben Stiller</span> |
|
|
<span class="pill">Rhea Seehorn</span> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="schedule" class="mt-8 rounded-3xl border border-gold bg-yellow-50/[0.04] p-6"> |
|
|
<div class="flex items-center gap-2 mb-3"> |
|
|
<i data-lucide="calendar-days" class="w-5 h-5 text-yellow-300"></i> |
|
|
<h3 class="text-yellow-100 font-semibold">Ceremony Schedule</h3> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 gap-4"> |
|
|
<div class="rounded-2xl border border-gold p-4 bg-black/30"> |
|
|
<div class="text-yellow-200 font-medium">Red Carpet & Doors</div> |
|
|
<div class="text-yellow-100/70 text-sm">19:00 – 19:45</div> |
|
|
<p class="text-yellow-100/70 text-sm mt-2">Check-in, photo ops, press line opens.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-gold p-4 bg-black/30"> |
|
|
<div class="text-yellow-200 font-medium">Opening & Monologue</div> |
|
|
<div class="text-yellow-100/70 text-sm">20:00 – 20:10</div> |
|
|
<p class="text-yellow-100/70 text-sm mt-2">Live broadcast kicks off.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-gold p-4 bg-black/30"> |
|
|
<div class="text-yellow-200 font-medium">Awards Block I</div> |
|
|
<div class="text-yellow-100/70 text-sm">20:10 – 20:45</div> |
|
|
<p class="text-yellow-100/70 text-sm mt-2">Comedy & supporting categories.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-gold p-4 bg-black/30"> |
|
|
<div class="text-yellow-200 font-medium">Performance & Montage</div> |
|
|
<div class="text-yellow-100/70 text-sm">20:45 – 21:00</div> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-gold p-4 bg-black/30"> |
|
|
<div class="text-yellow-200 font-medium">Awards Block II</div> |
|
|
<div class="text-yellow-100/70 text-sm">21:00 – 21:40</div> |
|
|
<p class="text-yellow-100/70 text-sm mt-2">Drama, limited series.</p> |
|
|
</div> |
|
|
<div class="rounded-2xl border border-gold p-4 bg-black/30"> |
|
|
<div class="text-yellow-200 font-medium">Grand Finale</div> |
|
|
<div class="text-yellow-100/70 text-sm">21:40 – 22:00</div> |
|
|
<p class="text-yellow-100/70 text-sm mt-2">Top categories & closing remarks.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button id="addCal" class="px-3 py-2 rounded-xl bg-yellow-400 text-black text-sm font-semibold shadow"> |
|
|
<i data-lucide="plus" class="inline w-4 h-4 mr-1"></i> Add to Calendar (.ics) |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mt-8"> |
|
|
<h3 class="text-yellow-100 font-semibold mb-3">Categories</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> |
|
|
<a href="category-1.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Outstanding Drama Series</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-2.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Outstanding Comedy Series</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-3.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Outstanding Limited or Anthology Series</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-4.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Lead Actor in a Drama</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-5.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Lead Actress in a Drama</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-6.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Lead Actor in a Comedy</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-7.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Lead Actress in a Comedy</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-8.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Supporting Actor (All Genres)</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-9.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Supporting Actress (All Genres)</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
<a href="category-10.html" data-raise class="rounded-2xl p-4 bg-yellow-50/[0.05] hover:bg-yellow-50/[0.09] border border-gold shadow-inner flex items-center justify-between"><span class="text-yellow-100 font-medium">Outstanding Directing</span><i data-lucide="arrow-right" class="w-4 h-4 text-yellow-200"></i></a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer class="mt-12 py-6 text-center text-[11px] text-yellow-100/50">© AI WEEK • Emmys Portal (demo)</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const q = new URLSearchParams(location.search); |
|
|
const user = q.get('user') || 'Guest'; |
|
|
const score = q.get('score'); |
|
|
document.querySelectorAll('#user,#user2').forEach(el=>el.textContent=user); |
|
|
const av = document.getElementById('avatar'); |
|
|
if (av) av.textContent = (user.split(' ').map(s=>s[0]).slice(0,2).join('') || 'U').toUpperCase(); |
|
|
const sp = document.getElementById('scorePill'); if (sp && score){ sp.textContent = `Score: ${Number(score).toFixed(3)}`; sp.classList.remove('hidden'); } |
|
|
lucide.createIcons(); |
|
|
document.querySelectorAll('[data-raise]').forEach(el=>{ |
|
|
el.addEventListener('mouseenter',()=>window.motion.animate(el,{y:-4,scale:1.02},{duration:.25})); |
|
|
el.addEventListener('mouseleave',()=>window.motion.animate(el,{y:0,scale:1},{duration:.25})); |
|
|
}); |
|
|
|
|
|
|
|
|
function nextShowtime() { |
|
|
const t = new Date(); |
|
|
const show = new Date(); |
|
|
show.setHours(20,0,0,0); |
|
|
if (t > show) show.setDate(show.getDate()+1); |
|
|
return show; |
|
|
} |
|
|
const target = nextShowtime(); |
|
|
const el = document.getElementById('countdown'); |
|
|
function tick(){ |
|
|
const now = new Date(); |
|
|
let ms = target - now; |
|
|
if (ms < 0) { el.textContent = "LIVE"; return; } |
|
|
const h = Math.floor(ms/3_600_000); |
|
|
ms -= h*3_600_000; |
|
|
const m = Math.floor(ms/60_000); |
|
|
ms -= m*60_000; |
|
|
const s = Math.floor(ms/1000); |
|
|
el.textContent = `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`; |
|
|
requestAnimationFrame(()=>setTimeout(tick, 250)); |
|
|
} |
|
|
tick(); |
|
|
|
|
|
|
|
|
document.getElementById('addCal').addEventListener('click', () => { |
|
|
const start = target.toISOString().replace(/[-:]/g,'').split('.')[0] + 'Z'; |
|
|
const endDt = new Date(target.getTime()+2*60*60*1000); |
|
|
const end = endDt.toISOString().replace(/[-:]/g,'').split('.')[0] + 'Z'; |
|
|
const ics = `BEGIN:VCALENDAR |
|
|
VERSION:2.0 |
|
|
PRODID:-//AI WEEK//EMMYS//EN |
|
|
BEGIN:VEVENT |
|
|
UID:${Date.now()}@ai-week-emmys |
|
|
DTSTAMP:${start} |
|
|
DTSTART:${start} |
|
|
DTEND:${end} |
|
|
SUMMARY:Emmys Live Ceremony |
|
|
DESCRIPTION:AI WEEK Emmys live broadcast. |
|
|
END:VEVENT |
|
|
END:VCALENDAR`.replace(/\\n/g, '\n'); |
|
|
const blob = new Blob([ics], {type:'text/calendar'}); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); a.href = url; a.download = 'emmys.ics'; a.click(); |
|
|
URL.revokeObjectURL(url); |
|
|
}); |
|
|
|
|
|
<script type="module" src="./chat.js"></script> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
