Hugging Face's logo

Spaces:
designname
/
anycoder-0027b23f
Running

App Files Community
designname commited on
Commit
74ed536
·
verified ·
1 Parent(s): 81e09df

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +534 -19
index.html CHANGED
@@ -1,19 +1,534 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Humanity Counter | Your Place in History</title>
7
+
8
+ <!-- React & ReactDOM -->
9
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
10
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
11
+
12
+ <!-- Babel for JSX -->
13
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
14
+
15
+ <!-- Tailwind CSS -->
16
+ <script src="https://cdn.tailwindcss.com"></script>
17
+
18
+ <!-- Framer Motion -->
19
+ <script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
20
+
21
+ <!-- Lucide Icons -->
22
+ <script src="https://unpkg.com/lucide@latest"></script>
23
+
24
+ <!-- Google Fonts -->
25
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
26
+
27
+ <script>
28
+ tailwind.config = {
29
+ darkMode: 'class',
30
+ theme: {
31
+ extend: {
32
+ fontFamily: {
33
+ sans: ['Space Grotesk', 'sans-serif'],
34
+ },
35
+ colors: {
36
+ cosmic: {
37
+ 900: '#0B0C15',
38
+ 800: '#151725',
39
+ 700: '#1E2238',
40
+ accent: '#6366f1', // Indigo
41
+ glow: '#818cf8'
42
+ }
43
+ },
44
+ animation: {
45
+ 'float': 'float 6s ease-in-out infinite',
46
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
47
+ },
48
+ keyframes: {
49
+ float: {
50
+ '0%, 100%': { transform: 'translateY(0)' },
51
+ '50%': { transform: 'translateY(-20px)' },
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }
57
+ </script>
58
+
59
+ <style>
60
+ body {
61
+ background-color: #050505;
62
+ color: #ffffff;
63
+ overflow-x: hidden;
64
+ }
65
+
66
+ /* Starfield Background */
67
+ .stars {
68
+ position: fixed;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ z-index: -1;
74
+ background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
75
+ overflow: hidden;
76
+ }
77
+
78
+ .star {
79
+ position: absolute;
80
+ background: white;
81
+ border-radius: 50%;
82
+ opacity: 0.8;
83
+ animation: twinkle var(--duration) ease-in-out infinite;
84
+ }
85
+
86
+ @keyframes twinkle {
87
+ 0%, 100% { opacity: 0.2; transform: scale(0.8); }
88
+ 50% { opacity: 1; transform: scale(1.2); }
89
+ }
90
+
91
+ /* Custom Scrollbar */
92
+ ::-webkit-scrollbar {
93
+ width: 8px;
94
+ }
95
+ ::-webkit-scrollbar-track {
96
+ background: #0B0C15;
97
+ }
98
+ ::-webkit-scrollbar-thumb {
99
+ background: #333;
100
+ border-radius: 4px;
101
+ }
102
+
103
+ .glass-panel {
104
+ background: rgba(255, 255, 255, 0.03);
105
+ backdrop-filter: blur(10px);
106
+ border: 1px solid rgba(255, 255, 255, 0.05);
107
+ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
108
+ }
109
+
110
+ .gradient-text {
111
+ background: linear-gradient(to right, #c084fc, #6366f1, #3b82f6);
112
+ -webkit-background-clip: text;
113
+ -webkit-text-fill-color: transparent;
114
+ }
115
+ </style>
116
+ </head>
117
+ <body>
118
+ <div id="root"></div>
119
+
120
+ <script type="text/babel">
121
+ const { useState, useEffect, useMemo, useRef } = React;
122
+ const { motion, AnimatePresence } = window.Motion;
123
+
124
+ // --- Icons ---
125
+ const GlobeIcon = (props) => <i data-lucide="globe" {...props}></i>;
126
+ const UsersIcon = (props) => <i data-lucide="users" {...props}></i>;
127
+ const SparklesIcon = (props) => <i data-lucide="sparkles" {...props}></i>;
128
+ const ShareIcon = (props) => <i data-lucide="share-2" {...props}></i>;
129
+ const CalendarIcon = (props) => <i data-lucide="calendar" {...props}></i>;
130
+ const ArrowRightIcon = (props) => <i data-lucide="arrow-right" {...props}></i>;
131
+ const XIcon = (props) => <i data-lucide="x" {...props}></i>;
132
+
133
+ // --- Data & Logic ---
134
+ // UN World Population Prospects Data (Approximate)
135
+ const POPULATION_DATA = [
136
+ { year: 1950, pop: 2532000000 },
137
+ { year: 1987, pop: 5000000000 },
138
+ { year: 1999, pop: 6000000000 },
139
+ { year: 2011, pop: 7000000000 },
140
+ { year: 2022, pop: 8000000000 },
141
+ { year: 2026, pop: 8300000000 } // Projection
142
+ ];
143
+
144
+ const TOTAL_HUMANS_EVER = 117000000000; // 117 Billion
145
+ const BIRTHS_PER_SECOND = 2.4;
146
+
147
+ // Linear Interpolation Function
148
+ const getPopulationAtYear = (targetDate) => {
149
+ const year = targetDate.getFullYear();
150
+ const month = targetDate.getMonth(); // 0-11
151
+ // Convert to decimal year for smoother interpolation
152
+ const decimalYear = year + (month / 12);
153
+
154
+ // Find surrounding data points
155
+ let lower = POPULATION_DATA[0];
156
+ let upper = POPULATION_DATA[POPULATION_DATA.length - 1];
157
+
158
+ for (let i = 0; i < POPULATION_DATA.length - 1; i++) {
159
+ if (decimalYear >= POPULATION_DATA[i].year && decimalYear <= POPULATION_DATA[i + 1].year) {
160
+ lower = POPULATION_DATA[i];
161
+ upper = POPULATION_DATA[i + 1];
162
+ break;
163
+ }
164
+ }
165
+
166
+ // Calculate slope
167
+ const slope = (upper.pop - lower.pop) / (upper.year - lower.year);
168
+ // Interpolate
169
+ const pop = lower.pop + (slope * (decimalYear - lower.year));
170
+
171
+ return Math.round(pop);
172
+ };
173
+
174
+ const formatNumber = (num) => {
175
+ return new Intl.NumberFormat('en-US').format(num);
176
+ };
177
+
178
+ // --- Components ---
179
+
180
+ const StarBackground = () => {
181
+ useEffect(() => {
182
+ const container = document.querySelector('.stars');
183
+ const starCount = 150;
184
+
185
+ for (let i = 0; i < starCount; i++) {
186
+ const star = document.createElement('div');
187
+ star.className = 'star';
188
+ const xy = Math.random() * 100;
189
+ const duration = Math.random() * 3 + 2;
190
+ const size = Math.random() * 2 + 1;
191
+
192
+ star.style.left = `${Math.random() * 100}%`;
193
+ star.style.top = `${Math.random() * 100}%`;
194
+ star.style.width = `${size}px`;
195
+ star.style.height = `${size}px`;
196
+ star.style.setProperty('--duration', `${duration}s`);
197
+
198
+ container.appendChild(star);
199
+ }
200
+ }, []);
201
+ return <div className="stars"></div>;
202
+ };
203
+
204
+ const TickingCounter = ({ initialValue, rate }) => {
205
+ const [count, setCount] = useState(initialValue);
206
+
207
+ useEffect(() => {
208
+ const interval = setInterval(() => {
209
+ setCount(prev => prev + rate);
210
+ }, 1000);
211
+ return () => clearInterval(interval);
212
+ }, [initialValue, rate]);
213
+
214
+ return <span>{formatNumber(Math.floor(count))}</span>;
215
+ };
216
+
217
+ const StatCard = ({ icon: Icon, label, value, subtext, delay }) => {
218
+ return (
219
+ <motion.div
220
+ initial={{ opacity: 0, y: 20 }}
221
+ animate={{ opacity: 1, y: 0 }}
222
+ transition={{ duration: 0.5, delay: delay }}
223
+ className="glass-panel p-6 rounded-2xl flex flex-col items-center text-center hover:bg-white/5 transition-colors duration-300 group"
224
+ >
225
+ <div className="p-3 rounded-full bg-indigo-500/10 text-indigo-400 mb-4 group-hover:scale-110 transition-transform duration-300">
226
+ <Icon size={24} />
227
+ </div>
228
+ <h3 className="text-sm font-medium text-gray-400 uppercase tracking-wider mb-2">{label}</h3>
229
+ <div className="text-2xl md:text-3xl font-bold text-white mb-1 font-sans tracking-tight">
230
+ {value}
231
+ </div>
232
+ {subtext && <p className="text-xs text-gray-500">{subtext}</p>}
233
+ </motion.div>
234
+ );
235
+ };
236
+
237
+ const IntroView = ({ onComplete }) => {
238
+ const [date, setDate] = useState('');
239
+ const [error, setError] = useState('');
240
+
241
+ const handleSubmit = (e) => {
242
+ e.preventDefault();
243
+ if (!date) {
244
+ setError('Please select your birth date');
245
+ return;
246
+ }
247
+ const birthDate = new Date(date);
248
+ const today = new Date();
249
+ if (birthDate > today) {
250
+ setError('You cannot be born in the future!');
251
+ return;
252
+ }
253
+ if (birthDate.getFullYear() < 1950) {
254
+ setError('Data only available from 1950 onwards.');
255
+ return;
256
+ }
257
+ onComplete(birthDate);
258
+ };
259
+
260
+ return (
261
+ <motion.div
262
+ initial={{ opacity: 0 }}
263
+ animate={{ opacity: 1 }}
264
+ exit={{ opacity: 0, scale: 0.95 }}
265
+ className="flex flex-col items-center justify-center min-h-[80vh] w-full max-w-2xl mx-auto px-4 text-center"
266
+ >
267
+ <motion.div
268
+ initial={{ y: -20, opacity: 0 }}
269
+ animate={{ y: 0, opacity: 1 }}
270
+ transition={{ delay: 0.2 }}
271
+ className="mb-8"
272
+ >
273
+ <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">
274
+ <SparklesIcon size={12} />
275
+ <span>Demographic Intelligence</span>
276
+ </div>
277
+ <h1 className="text-5xl md:text-7xl font-bold mb-4 tracking-tight">
278
+ Humanity <span className="gradient-text">Counter</span>
279
+ </h1>
280
+ <p className="text-gray-400 text-lg md:text-xl max-w-lg mx-auto leading-relaxed">
281
+ Discover your unique statistical footprint in the history of our species.
282
+ </p>
283
+ </motion.div>
284
+
285
+ <motion.form
286
+ initial={{ y: 20, opacity: 0 }}
287
+ animate={{ y: 0, opacity: 1 }}
288
+ transition={{ delay: 0.4 }}
289
+ onSubmit={handleSubmit}
290
+ 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"
291
+ >
292
+ <div className="relative flex-grow">
293
+ <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
294
+ <CalendarIcon size={20} />
295
+ </div>
296
+ <input
297
+ type="date"
298
+ value={date}
299
+ onChange={(e) => {
300
+ setDate(e.target.value);
301
+ setError('');
302
+ }}
303
+ 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"
304
+ max={new Date().toISOString().split('T')[0]}
305
+ min="1950-01-01"
306
+ />
307
+ </div>
308
+ <button
309
+ type="submit"
310
+ 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"
311
+ >
312
+ <span>Calculate</span>
313
+ <ArrowRightIcon size={20} />
314
+ </button>
315
+ </motion.form>
316
+
317
+ {error && (
318
+ <motion.p
319
+ initial={{ opacity: 0 }}
320
+ animate={{ opacity: 1 }}
321
+ className="mt-4 text-red-400 text-sm font-medium"
322
+ >
323
+ {error}
324
+ </motion.p>
325
+ )}
326
+
327
+ <div className="mt-12 grid grid-cols-3 gap-8 text-center opacity-60">
328
+ <div>
329
+ <div className="text-2xl font-bold text-white">117B+</div>
330
+ <div className="text-xs text-gray-400 uppercase tracking-wide">Humans Ever</div>
331
+ </div>
332
+ <div>
333
+ <div className="text-2xl font-bold text-white">8.1B</div>
334
+ <div className="text-xs text-gray-400 uppercase tracking-wide">Alive Today</div>
335
+ </div>
336
+ <div>
337
+ <div className="text-2xl font-bold text-white">2.4</div>
338
+ <div className="text-xs text-gray-400 uppercase tracking-wide">Births / Sec</div>
339
+ </div>
340
+ </div>
341
+ </motion.div>
342
+ );
343
+ };
344
+
345
+ const ResultsView = ({ birthDate, onReset }) => {
346
+ const [popAtBirth, setPopAtBirth] = useState(0);
347
+ const [currentPop, setCurrentPop] = useState(0);
348
+ const [birthRank, setBirthRank] = useState(0);
349
+ const [bornSince, setBornSince] = useState(0);
350
+ const [shareUrl, setShareUrl] = useState('');
351
+
352
+ useEffect(() => {
353
+ // Initialize icons
354
+ lucide.createIcons();
355
+
356
+ // Calculations
357
+ const pAtBirth = getPopulationAtYear(birthDate);
358
+ const now = new Date();
359
+ const pNow = getPopulationAtYear(now);
360
+
361
+ // Adjust current population for real-time ticking (approx 8.1B base + growth since 2024)
362
+ // Using a base of 8.1B for 2024 for better visual "current" feel
363
+ const baseCurrent = 8100000000;
364
+
365
+ // Rank Logic:
366
+ // Total Ever (117B) - (Current Pop - Pop at Birth)
367
+ // This approximates: (Total Dead) + (People alive when you were born)
368
+ const rank = TOTAL_HUMANS_EVER - (baseCurrent - pAtBirth);
369
+
370
+ const since = baseCurrent - pAtBirth;
371
+
372
+ setPopAtBirth(pAtBirth);
373
+ setCurrentPop(baseCurrent);
374
+ setBirthRank(rank);
375
+ setBornSince(since);
376
+ setShareUrl(window.location.href);
377
+
378
+ }, [birthDate]);
379
+
380
+ const handleShare = () => {
381
+ const text = `I am human #${formatNumber(birthRank)}! 🌍 I was born when the population was ${formatNumber(popAtBirth)}. Check your place in history:`;
382
+ const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(shareUrl)}`;
383
+ window.open(url, '_blank');
384
+ };
385
+
386
+ return (
387
+ <motion.div
388
+ initial={{ opacity: 0 }}
389
+ animate={{ opacity: 1 }}
390
+ className="w-full max-w-5xl mx-auto px-4 py-8 md:py-12"
391
+ >
392
+ {/* Header */}
393
+ <div className="flex flex-col md:flex-row justify-between items-center mb-12 gap-6">
394
+ <div>
395
+ <h2 className="text-3xl md:text-4xl font-bold mb-2">Your Cosmic Stats</h2>
396
+ <p className="text-gray-400">Based on birth date: <span className="text-white font-mono">{birthDate.toDateString()}</span></p>
397
+ </div>
398
+ <div className="flex gap-3">
399
+ <button
400
+ onClick={onReset}
401
+ className="px-4 py-2 rounded-lg border border-white/10 hover:bg-white/5 text-sm font-medium transition-colors"
402
+ >
403
+ Start Over
404
+ </button>
405
+ <button
406
+ onClick={handleShare}
407
+ 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"
408
+ >
409
+ <XIcon size={16} />
410
+ Share on X
411
+ </button>
412
+ </div>
413
+ </div>
414
+
415
+ {/* Main Hero Stat */}
416
+ <motion.div
417
+ initial={{ scale: 0.9, opacity: 0 }}
418
+ animate={{ scale: 1, opacity: 1 }}
419
+ transition={{ duration: 0.8, type: "spring" }}
420
+ className="glass-panel rounded-3xl p-8 md:p-12 mb-8 text-center relative overflow-hidden group"
421
+ >
422
+ <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>
423
+ <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>
424
+
425
+ <h3 className="text-gray-400 text-lg md:text-xl uppercase tracking-widest mb-4 font-medium">Your Approximate Birth Number</h3>
426
+ <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">
427
+ #{formatNumber(birthRank)}
428
+ </div>
429
+ <p className="mt-6 text-indigo-300 max-w-2xl mx-auto text-lg">
430
+ Out of roughly <strong>117 Billion</strong> humans who have ever lived, you are one of the very few currently experiencing consciousness.
431
+ </p>
432
+ </motion.div>
433
+
434
+ {/* Grid Stats */}
435
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
436
+ <StatCard
437
+ icon={GlobeIcon}
438
+ label="Population at Birth"
439
+ value={formatNumber(popAtBirth)}
440
+ subtext="People alive on your first day"
441
+ delay={0.2}
442
+ />
443
+ <StatCard
444
+ icon={UsersIcon}
445
+ label="Born Since You"
446
+ value={<TickingCounter initialValue={bornSince} rate={BIRTHS_PER_SECOND} />}
447
+ subtext="And counting..."
448
+ delay={0.3}
449
+ />
450
+ <StatCard
451
+ icon={SparklesIcon}
452
+ label="Current World Population"
453
+ value={<TickingCounter initialValue={currentPop} rate={BIRTHS_PER_SECOND} />}
454
+ subtext="Real-time estimate"
455
+ delay={0.4}
456
+ />
457
+ </div>
458
+
459
+ {/* Context Section */}
460
+ <motion.div
461
+ initial={{ y: 20, opacity: 0 }}
462
+ animate={{ y: 0, opacity: 1 }}
463
+ transition={{ delay: 0.6 }}
464
+ className="glass-panel rounded-2xl p-6 md:p-8 border-l-4 border-l-indigo-500"
465
+ >
466
+ <h4 className="text-xl font-bold mb-4 flex items-center gap-2">
467
+ <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse"></span>
468
+ Did you know?
469
+ </h4>
470
+ <p className="text-gray-300 leading-relaxed">
471
+ 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.
472
+ </p>
473
+ </motion.div>
474
+ </motion.div>
475
+ );
476
+ };
477
+
478
+ const App = () => {
479
+ const [view, setView] = useState('intro'); // 'intro' | 'results'
480
+ const [birthDate, setBirthDate] = useState(null);
481
+
482
+ const handleComplete = (date) => {
483
+ setBirthDate(date);
484
+ setView('results');
485
+ };
486
+
487
+ const handleReset = () => {
488
+ setView('intro');
489
+ setBirthDate(null);
490
+ };
491
+
492
+ return (
493
+ <div className="min-h-screen bg-cosmic-900 text-white font-sans selection:bg-indigo-500/30">
494
+ <StarBackground />
495
+
496
+ {/* Header / Nav */}
497
+ <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">
498
+ <div className="flex items-center gap-2">
499
+ <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>
500
+ <span className="font-bold tracking-tight text-lg hidden md:block">Humanity Counter</span>
501
+ </div>
502
+ <a
503
+ href="https://huggingface.co/spaces/akhaliq/anycoder"
504
+ target="_blank"
505
+ rel="noopener noreferrer"
506
+ className="text-xs text-gray-400 hover:text-white transition-colors flex items-center gap-1"
507
+ >
508
+ Built with anycoder
509
+ <ArrowRightIcon size={12} className="rotate-[-45deg]" />
510
+ </a>
511
+ </header>
512
+
513
+ <main className="relative z-10 pt-20 pb-10">
514
+ <AnimatePresence mode="wait">
515
+ {view === 'intro' ? (
516
+ <IntroView key="intro" onComplete={handleComplete} />
517
+ ) : (
518
+ <ResultsView key="results" birthDate={birthDate} onReset={handleReset} />
519
+ )}
520
+ </AnimatePresence>
521
+ </main>
522
+
523
+ <footer className="relative z-10 text-center py-8 text-gray-600 text-sm">
524
+ <p>© {new Date().getFullYear()} Humanity Counter. Data based on UN World Population Prospects.</p>
525
+ </footer>
526
+ </div>
527
+ );
528
+ };
529
+
530
+ const root = ReactDOM.createRoot(document.getElementById('root'));
531
+ root.render(<App />);
532
+ </script>
533
+ </body>
534
+ </html>