Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Humanity Counter | Your Place in History</title> | |
| <!-- React & ReactDOM --> | |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> | |
| <!-- Babel for JSX --> | |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Framer Motion --> | |
| <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| sans: ['Space Grotesk', 'sans-serif'], | |
| }, | |
| colors: { | |
| cosmic: { | |
| 900: '#0B0C15', | |
| 800: '#151725', | |
| 700: '#1E2238', | |
| accent: '#6366f1', // Indigo | |
| glow: '#818cf8' | |
| } | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #050505; | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| } | |
| /* Starfield Background */ | |
| .stars { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); | |
| overflow: hidden; | |
| } | |
| .star { | |
| position: absolute; | |
| background: white; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| animation: twinkle var(--duration) ease-in-out infinite; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { opacity: 0.2; transform: scale(0.8); } | |
| 50% { opacity: 1; transform: scale(1.2); } | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0B0C15; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #333; | |
| border-radius: 4px; | |
| } | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(to right, #c084fc, #6366f1, #3b82f6); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect, useMemo, useRef } = React; | |
| const { motion, AnimatePresence } = window.Motion; | |
| // --- Icons --- | |
| const GlobeIcon = (props) => <i data-lucide="globe" {...props}></i>; | |
| const UsersIcon = (props) => <i data-lucide="users" {...props}></i>; | |
| const SparklesIcon = (props) => <i data-lucide="sparkles" {...props}></i>; | |
| const ShareIcon = (props) => <i data-lucide="share-2" {...props}></i>; | |
| const CalendarIcon = (props) => <i data-lucide="calendar" {...props}></i>; | |
| const ArrowRightIcon = (props) => <i data-lucide="arrow-right" {...props}></i>; | |
| const XIcon = (props) => <i data-lucide="x" {...props}></i>; | |
| // --- Data & Logic --- | |
| // UN World Population Prospects Data (Approximate) | |
| const POPULATION_DATA = [ | |
| { year: 1950, pop: 2532000000 }, | |
| { year: 1987, pop: 5000000000 }, | |
| { year: 1999, pop: 6000000000 }, | |
| { year: 2011, pop: 7000000000 }, | |
| { year: 2022, pop: 8000000000 }, | |
| { year: 2026, pop: 8300000000 } // Projection | |
| ]; | |
| const TOTAL_HUMANS_EVER = 117000000000; // 117 Billion | |
| const BIRTHS_PER_SECOND = 2.4; | |
| // Linear Interpolation Function | |
| const getPopulationAtYear = (targetDate) => { | |
| const year = targetDate.getFullYear(); | |
| const month = targetDate.getMonth(); // 0-11 | |
| // Convert to decimal year for smoother interpolation | |
| const decimalYear = year + (month / 12); | |
| // Find surrounding data points | |
| let lower = POPULATION_DATA[0]; | |
| let upper = POPULATION_DATA[POPULATION_DATA.length - 1]; | |
| for (let i = 0; i < POPULATION_DATA.length - 1; i++) { | |
| if (decimalYear >= POPULATION_DATA[i].year && decimalYear <= POPULATION_DATA[i + 1].year) { | |
| lower = POPULATION_DATA[i]; | |
| upper = POPULATION_DATA[i + 1]; | |
| break; | |
| } | |
| } | |
| // Calculate slope | |
| const slope = (upper.pop - lower.pop) / (upper.year - lower.year); | |
| // Interpolate | |
| const pop = lower.pop + (slope * (decimalYear - lower.year)); | |
| return Math.round(pop); | |
| }; | |
| const formatNumber = (num) => { | |
| return new Intl.NumberFormat('en-US').format(num); | |
| }; | |
| // --- Components --- | |
| const StarBackground = () => { | |
| useEffect(() => { | |
| const container = document.querySelector('.stars'); | |
| const starCount = 150; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.className = 'star'; | |
| const xy = Math.random() * 100; | |
| const duration = Math.random() * 3 + 2; | |
| const size = Math.random() * 2 + 1; | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| star.style.setProperty('--duration', `${duration}s`); | |
| container.appendChild(star); | |
| } | |
| }, []); | |
| return <div className="stars"></div>; | |
| }; | |
| const TickingCounter = ({ initialValue, rate }) => { | |
| const [count, setCount] = useState(initialValue); | |
| useEffect(() => { | |
| const interval = setInterval(() => { | |
| setCount(prev => prev + rate); | |
| }, 1000); | |
| return () => clearInterval(interval); | |
| }, [initialValue, rate]); | |
| return <span>{formatNumber(Math.floor(count))}</span>; | |
| }; | |
| const StatCard = ({ icon: Icon, label, value, subtext, delay }) => { | |
| return ( | |
| <motion.div | |
| initial={{ opacity: 0, y: 20 }} | |
| animate={{ opacity: 1, y: 0 }} | |
| transition={{ duration: 0.5, delay: delay }} | |
| className="glass-panel p-6 rounded-2xl flex flex-col items-center text-center hover:bg-white/5 transition-colors duration-300 group" | |
| > | |
| <div className="p-3 rounded-full bg-indigo-500/10 text-indigo-400 mb-4 group-hover:scale-110 transition-transform duration-300"> | |
| <Icon size={24} /> | |
| </div> | |
| <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-2">{label}</h3> | |
| <div className="text-2xl md:text-3xl font-bold text-white mb-1 font-sans tracking-tight"> | |
| {value} | |
| </div> | |
| {subtext && <p className="text-xs text-gray-500">{subtext}</p>} | |
| </motion.div> | |
| ); | |
| }; | |
| const IntroView = ({ onComplete }) => { | |
| const [date, setDate] = useState(''); | |
| const [error, setError] = useState(''); | |
| const handleSubmit = (e) => { | |
| e.preventDefault(); | |
| if (!date) { | |
| setError('Please select your birth date'); | |
| return; | |
| } | |
| const birthDate = new Date(date); | |
| const today = new Date(); | |
| if (birthDate > today) { | |
| setError('You cannot be born in the future!'); | |
| return; | |
| } | |
| if (birthDate.getFullYear() < 1950) { | |
| setError('Data only available from 1950 onwards.'); | |
| return; | |
| } | |
| onComplete(birthDate); | |
| }; | |
| return ( | |
| <motion.div | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| exit={{ opacity: 0, scale: 0.95 }} | |
| className="flex flex-col items-center justify-center min-h-[80vh] w-full max-w-2xl mx-auto px-4 text-center" | |
| > | |
| <motion.div | |
| initial={{ y: -20, opacity: 0 }} | |
| animate={{ y: 0, opacity: 1 }} | |
| transition={{ delay: 0.2 }} | |
| className="mb-8" | |
| > | |
| <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-xs font-medium mb-4"> | |
| <SparklesIcon size={12} /> | |
| <span>Demographic Intelligence</span> | |
| </div> | |
| <h1 className="text-5xl md:text-7xl font-bold mb-4 tracking-tight"> | |
| Humanity <span className="gradient-text">Counter</span> | |
| </h1> | |
| <p className="text-gray-400 text-lg md:text-xl max-w-lg mx-auto leading-relaxed"> | |
| Discover your unique statistical footprint in the history of our species. | |
| </p> | |
| </motion.div> | |
| <motion.form | |
| initial={{ y: 20, opacity: 0 }} | |
| animate={{ y: 0, opacity: 1 }} | |
| transition={{ delay: 0.4 }} | |
| onSubmit={handleSubmit} | |
| className="w-full max-w-md bg-white/5 p-2 rounded-2xl border border-white/10 flex flex-col md:flex-row gap-2 shadow-2xl shadow-indigo-500/10" | |
| > | |
| <div className="relative flex-grow"> | |
| <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400"> | |
| <CalendarIcon size={20} /> | |
| </div> | |
| <input | |
| type="date" | |
| value={date} | |
| onChange={(e) => { | |
| setDate(e.target.value); | |
| setError(''); | |
| }} | |
| className="w-full bg-cosmic-800 text-white pl-10 pr-4 py-4 rounded-xl border border-transparent focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all placeholder-gray-500" | |
| max={new Date().toISOString().split('T')[0]} | |
| min="1950-01-01" | |
| /> | |
| </div> | |
| <button | |
| type="submit" | |
| className="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-4 px-8 rounded-xl transition-all duration-300 flex items-center justify-center gap-2 shadow-lg shadow-indigo-600/30 hover:shadow-indigo-600/50 active:scale-95" | |
| > | |
| <span>Calculate</span> | |
| <ArrowRightIcon size={20} /> | |
| </button> | |
| </motion.form> | |
| {error && ( | |
| <motion.p | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| className="mt-4 text-red-400 text-sm font-medium" | |
| > | |
| {error} | |
| </motion.p> | |
| )} | |
| <div className="mt-12 grid grid-cols-3 gap-8 text-center opacity-60"> | |
| <div> | |
| <div className="text-2xl font-bold text-white">117B+</div> | |
| <div className="text-xs text-gray-400 uppercase tracking-wide">Humans Ever</div> | |
| </div> | |
| <div> | |
| <div className="text-2xl font-bold text-white">8.1B</div> | |
| <div className="text-xs text-gray-400 uppercase tracking-wide">Alive Today</div> | |
| </div> | |
| <div> | |
| <div className="text-2xl font-bold text-white">2.4</div> | |
| <div className="text-xs text-gray-400 uppercase tracking-wide">Births / Sec</div> | |
| </div> | |
| </div> | |
| </motion.div> | |
| ); | |
| }; | |
| const ResultsView = ({ birthDate, onReset }) => { | |
| const [popAtBirth, setPopAtBirth] = useState(0); | |
| const [currentPop, setCurrentPop] = useState(0); | |
| const [birthRank, setBirthRank] = useState(0); | |
| const [bornSince, setBornSince] = useState(0); | |
| const [shareUrl, setShareUrl] = useState(''); | |
| useEffect(() => { | |
| // Initialize icons | |
| lucide.createIcons(); | |
| // Calculations | |
| const pAtBirth = getPopulationAtYear(birthDate); | |
| const now = new Date(); | |
| const pNow = getPopulationAtYear(now); | |
| // Adjust current population for real-time ticking (approx 8.1B base + growth since 2024) | |
| // Using a base of 8.1B for 2024 for better visual "current" feel | |
| const baseCurrent = 8100000000; | |
| // Rank Logic: | |
| // Total Ever (117B) - (Current Pop - Pop at Birth) | |
| // This approximates: (Total Dead) + (People alive when you were born) | |
| const rank = TOTAL_HUMANS_EVER - (baseCurrent - pAtBirth); | |
| const since = baseCurrent - pAtBirth; | |
| setPopAtBirth(pAtBirth); | |
| setCurrentPop(baseCurrent); | |
| setBirthRank(rank); | |
| setBornSince(since); | |
| setShareUrl(window.location.href); | |
| }, [birthDate]); | |
| const handleShare = () => { | |
| const text = `I am human #${formatNumber(birthRank)}! 🌍 I was born when the population was ${formatNumber(popAtBirth)}. Check your place in history:`; | |
| const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(shareUrl)}`; | |
| window.open(url, '_blank'); | |
| }; | |
| return ( | |
| <motion.div | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| className="w-full max-w-5xl mx-auto px-4 py-8 md:py-12" | |
| > | |
| {/* Header */} | |
| <div className="flex flex-col md:flex-row justify-between items-center mb-12 gap-6"> | |
| <div> | |
| <h2 className="text-3xl md:text-4xl font-bold mb-2">Your Cosmic Stats</h2> | |
| <p className="text-gray-400">Based on birth date: <span className="text-white font-mono">{birthDate.toDateString()}</span></p> | |
| </div> | |
| <div className="flex gap-3"> | |
| <button | |
| onClick={onReset} | |
| className="px-4 py-2 rounded-lg border border-white/10 hover:bg-white/5 text-sm font-medium transition-colors" | |
| > | |
| Start Over | |
| </button> | |
| <button | |
| onClick={handleShare} | |
| className="px-4 py-2 rounded-lg bg-[#1DA1F2] hover:bg-[#1a91da] text-white text-sm font-medium flex items-center gap-2 transition-colors shadow-lg shadow-blue-500/20" | |
| > | |
| <XIcon size={16} /> | |
| Share on X | |
| </button> | |
| </div> | |
| </div> | |
| {/* Main Hero Stat */} | |
| <motion.div | |
| initial={{ scale: 0.9, opacity: 0 }} | |
| animate={{ scale: 1, opacity: 1 }} | |
| transition={{ duration: 0.8, type: "spring" }} | |
| className="glass-panel rounded-3xl p-8 md:p-12 mb-8 text-center relative overflow-hidden group" | |
| > | |
| <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-indigo-500 to-transparent opacity-50"></div> | |
| <div className="absolute -top-20 -right-20 w-64 h-64 bg-indigo-600/20 rounded-full blur-3xl group-hover:bg-indigo-600/30 transition-all duration-700"></div> | |
| <h3 className="text-gray-400 text-lg md:text-xl uppercase tracking-widest mb-4 font-medium">Your Approximate Birth Number</h3> | |
| <div className="text-6xl md:text-8xl lg:text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-400 tracking-tighter drop-shadow-2xl"> | |
| #{formatNumber(birthRank)} | |
| </div> | |
| <p className="mt-6 text-indigo-300 max-w-2xl mx-auto text-lg"> | |
| Out of roughly <strong>117 Billion</strong> humans who have ever lived, you are one of the very few currently experiencing consciousness. | |
| </p> | |
| </motion.div> | |
| {/* Grid Stats */} | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> | |
| <StatCard | |
| icon={GlobeIcon} | |
| label="Population at Birth" | |
| value={formatNumber(popAtBirth)} | |
| subtext="People alive on your first day" | |
| delay={0.2} | |
| /> | |
| <StatCard | |
| icon={UsersIcon} | |
| label="Born Since You" | |
| value={<TickingCounter initialValue={bornSince} rate={BIRTHS_PER_SECOND} />} | |
| subtext="And counting..." | |
| delay={0.3} | |
| /> | |
| <StatCard | |
| icon={SparklesIcon} | |
| label="Current World Population" | |
| value={<TickingCounter initialValue={currentPop} rate={BIRTHS_PER_SECOND} />} | |
| subtext="Real-time estimate" | |
| delay={0.4} | |
| /> | |
| </div> | |
| {/* Context Section */} | |
| <motion.div | |
| initial={{ y: 20, opacity: 0 }} | |
| animate={{ y: 0, opacity: 1 }} | |
| transition={{ delay: 0.6 }} | |
| className="glass-panel rounded-2xl p-6 md:p-8 border-l-4 border-l-indigo-500" | |
| > | |
| <h4 className="text-xl font-bold mb-4 flex items-center gap-2"> | |
| <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span> | |
| Did you know? | |
| </h4> | |
| <p className="text-gray-300 leading-relaxed"> | |
| While it took all of human history until <strong>1804</strong> to reach the first 1 billion people, we added the last billion in just <strong>12 years</strong> (2011-2022). Your birth number places you in the most populous era of human existence. | |
| </p> | |
| </motion.div> | |
| </motion.div> | |
| ); | |
| }; | |
| const App = () => { | |
| const [view, setView] = useState('intro'); // 'intro' | 'results' | |
| const [birthDate, setBirthDate] = useState(null); | |
| const handleComplete = (date) => { | |
| setBirthDate(date); | |
| setView('results'); | |
| }; | |
| const handleReset = () => { | |
| setView('intro'); | |
| setBirthDate(null); | |
| }; | |
| return ( | |
| <div className="min-h-screen bg-cosmic-900 text-white font-sans selection:bg-indigo-500/30"> | |
| <StarBackground /> | |
| {/* Header / Nav */} | |
| <header className="fixed top-0 w-full z-50 px-6 py-4 flex justify-between items-center backdrop-blur-sm bg-cosmic-900/50 border-b border-white/5"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm">H</div> | |
| <span className="font-bold tracking-tight text-lg hidden md:block">Humanity Counter</span> | |
| </div> | |
| <a | |
| href="https://huggingface.co/spaces/akhaliq/anycoder" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="text-xs text-gray-400 hover:text-white transition-colors flex items-center gap-1" | |
| > | |
| Built with anycoder | |
| <ArrowRightIcon size={12} className="rotate-[-45deg]" /> | |
| </a> | |
| </header> | |
| <main className="relative z-10 pt-20 pb-10"> | |
| <AnimatePresence mode="wait"> | |
| {view === 'intro' ? ( | |
| <IntroView key="intro" onComplete={handleComplete} /> | |
| ) : ( | |
| <ResultsView key="results" birthDate={birthDate} onReset={handleReset} /> | |
| )} | |
| </AnimatePresence> | |
| </main> | |
| <footer className="relative z-10 text-center py-8 text-gray-600 text-sm"> | |
| <p>© {new Date().getFullYear()} Humanity Counter. Data based on UN World Population Prospects.</p> | |
| </footer> | |
| </div> | |
| ); | |
| }; | |
| const root = ReactDOM.createRoot(document.getElementById('root')); | |
| root.render(<App />); | |
| </script> | |
| </body> | |
| </html> |