/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function HomeSection({ countdown }) { return (

Gameshow Countdown

{Object.entries(countdown).map(([label, value]) => (

{value} {label}

))}

); } function LiveResultsSection() { const [results, setResults] = useState([ { name: "Rahul Kumar", points: 850, rank: 1 }, { name: "Priya Sharma", points: 725, rank: 2 }, { name: "Amit Patel", points: 680, rank: 3 }, { name: "Sneha Gupta", points: 620, rank: 4 }, { name: "Vikram Singh", points: 590, rank: 5 }, ]); return (

🏆 Live Results

{results.map((result) => (

#{result.rank} {result.name} {result.points} pts

))}

); } function LastWinnersSection() { const [winners, setWinners] = useState([ { season: "Season 2023", winner: "Rahul Kumar", prize: "₹50 Lakh", age: 28, city: "Mumbai", profession: "Software Engineer", profileImage: "https://maxm-imggenurl.web.val.run/indian-male-professional-headshot-28-years-old-tech-professional", }, { season: "Season 2022", winner: "Priya Sharma", prize: "₹40 Lakh", age: 32, city: "Delhi", profession: "Marketing Manager", profileImage: "https://maxm-imggenurl.web.val.run/indian-female-professional-headshot-32-years-old-corporate-leader", }, { season: "Season 2021", winner: "Amit Patel", prize: "₹35 Lakh", age: 25, city: "Ahmedabad", profession: "Entrepreneur", profileImage: "https://maxm-imggenurl.web.val.run/indian-male-entrepreneur-headshot-25-years-old-startup-founder", }, { season: "Season 2020", winner: "Sneha Gupta", prize: "₹30 Lakh", age: 29, city: "Bangalore", profession: "Data Scientist", profileImage: "https://maxm-imggenurl.web.val.run/indian-female-tech-professional-headshot-29-years-old-data-scientist", }, ]); return (

🏅 Past Winners

{winners.map((winner) => (

{winner.season}

{winner.winner}

🎂 {winner.age} years 🏙️ {winner.city} 💼 {winner.profession}

{winner.prize} Prize

))}

); } function App() { const [backgroundVariant, setBackgroundVariant] = useState(0); const [currentSection, setCurrentSection] = useState("home"); const [countdown, setCountdown] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0, }); const gameShowDate = new Date("2024-12-31T00:00:00Z"); useEffect(() => { const backgroundInterval = setInterval(() => { setBackgroundVariant(prev => (prev + 1) % 3); }, 5000); const countdownInterval = setInterval(() => { const now = new Date(); const difference = gameShowDate.getTime() - now.getTime(); const days = Math.floor(difference / (1000 * 60 * 60 * 24)); const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((difference % (1000 * 60)) / 1000); setCountdown({ days, hours, minutes, seconds }); }, 1000); return () => { clearInterval(backgroundInterval); clearInterval(countdownInterval); }; }, []); const renderSection = () => { switch (currentSection) { case "home": return ; case "live-results": return ; case "winners": return ; default: return ; } }; return (

Yeh To Hoga

{renderSection()}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Yeh To Hoga Gameshow

`, { headers: { "content-type": "text/html" }, }, ); } const css = ` :root { --deep-black: #0d0d1a; --electric-blue: #00e5ff; --neon-red: #ff1744; --neon-purple: #7c4dff; --cyber-gradient-1: linear-gradient(45deg, #ff1744, #7c4dff); --cyber-gradient-2: linear-gradient(135deg, #00e5ff, #ff1744); --cyber-gradient-3: linear-gradient(225deg, #7c4dff, #00e5ff); } * { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--neon-red) var(--deep-black); } body { background-color: var(--deep-black); color: #e0e0e0; font-family: 'Space Grotesk', 'Arial', sans-serif; line-height: 1.6; overflow-x: hidden; } .game-show-platform { max-width: 1400px; margin: 0 auto; background: rgba(13,13,26,0.9); border-radius: 20px; box-shadow: 0 15px 35px rgba(255,23,68,0.2), 0 5px 15px rgba(124,77,255,0.1); overflow: hidden; position: relative; transition: background 2s ease; min-height: 100vh; } .game-show-platform.background-variant-0 { background-image: radial-gradient(ellipse at top, rgba(255,23,68,0.1) 0%, transparent 50%), radial-gradient(ellipse at bottom, rgba(124,77,255,0.1) 0%, transparent 50%); } .game-show-platform.background-variant-1 { background-image: radial-gradient(ellipse at top right, rgba(0,229,255,0.1) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(124,77,255,0.1) 0%, transparent 50%); } .game-show-platform.background-variant-2 { background-image: radial-gradient(ellipse at top left, rgba(124,77,255,0.1) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(255,23,68,0.1) 0%, transparent 50%); } header { background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid transparent; border-image: var(--cyber-gradient-2) 1; } .logo { font-size: 2.5em; font-weight: bold; background: var(--cyber-gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(255,23,68,0.5); transition: transform 0.3s ease; } nav { display: flex; gap: 20px; } nav button { background: transparent; border: 2px solid var(--neon-red); color: var(--electric-blue); padding: 12px 25px; border-radius: 12px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: bold; position: relative; overflow: hidden; transition: all 0.3s ease; cursor: pointer; } nav button:hover { background: var(--neon-red); color: white; box-shadow: 0 0 25px var(--neon-red); transform: scale(1.05); } .last-winners-section { padding: 40px; text-align: center; } .last-winners-section h2 { background: var(--cyber-gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 30px; font-size: 2.5em; } .winners-list { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } .winner-profile-card { background: rgba(124,77,255,0.1); border: 2px solid var(--neon-purple); border-radius: 15px; width: 280px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(124,77,255,0.2); } .winner-profile-card:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(124,77,255,0.3); } .winner-profile-header { position: relative; height: 250px; } .winner-season { position: absolute; top: 10px; left: 10px; background: var(--cyber-gradient-2); color: white; padding: 5px 10px; border-radius: 5px; z-index: 10; } .winner-profile-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%) contrast(120%); transition: transform 0.3s ease; } .winner-profile-card:hover .winner-profile-image { transform: scale(1.1); } .winner-profile-details { padding: 20px; background: rgba(0,0,0,0.2); } .winner-name { font-size: 1.8em; margin-bottom: 15px; background: var(--cyber-gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .winner-info { display: flex; justify-content: space-between; margin-bottom: 15px; color: var(--electric-blue); } .winner-info span { display: flex; align-items: center; gap: 5px; } .winner-prize-banner { background: var(--cyber-gradient-2); padding: 10px; border-radius: 5px; text-align: center; } .winner-prize { color: white; font-weight: bold; text-transform: uppercase; } @media (max-width: 768px) { .winners-list { flex-direction: column; align-items: center; } } `;

ssb

Version 2