import React, { useState } from "react"; // --- THEME --- const theme = { primary: "#6C63FF", primaryDark: "#4b47b7", secondary: "#FF6584", secondaryDark: "#c14461", textPrimary: "#22223b", textSecondary: "#4a4e69", border: "#d1d1e9", bg: "linear-gradient(135deg, #f5f7fa, #c3cfe2)" }; // --- STYLES --- const styles = { app: { minHeight: "100vh", background: theme.bg, display: "flex", flexDirection: "column", alignItems: "center" }, header: { padding: "2rem 1rem 1rem 1rem", textAlign: "center" }, logo: { fontFamily: "'Pacifico', cursive", fontSize: "2.5rem", color: theme.primary, margin: 0 }, tagline: { fontSize: "1.2rem", color: theme.textSecondary, marginTop: "0.5rem" }, inputSection: { margin: "2rem 0", display: "flex", flexDirection: "column", alignItems: "center" }, label: { fontSize: "1.1rem", marginBottom: "0.5rem", color: theme.textPrimary }, input: { padding: "0.5rem 1rem", fontSize: "1rem", border: `1px solid ${theme.border}`, borderRadius: "6px", marginBottom: "1rem" }, button: { background: theme.primary, color: "#fff", border: "none", borderRadius: "6px", padding: "0.7rem 1.5rem", fontSize: "1.1rem", cursor: "pointer", transition: "background 0.2s" }, statsGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "1.5rem", margin: "2rem 0", width: "100%", maxWidth: "900px" }, card: { background: "#fff", borderRadius: "12px", boxShadow: "0 2px 12px rgba(0,0,0,0.07)", padding: "2rem 1.2rem", display: "flex", flexDirection: "column", alignItems: "center", transition: "transform 0.2s" }, icon: { fontSize: "2.5rem", marginBottom: "0.7rem" }, value: { fontSize: "2rem", fontWeight: 700, color: theme.primary }, labelCard: { fontSize: "1.1rem", color: theme.textSecondary, marginTop: "0.3rem" }, restartBtn: { background: theme.secondary, color: "#fff", border: "none", borderRadius: "6px", padding: "0.5rem 1.2rem", fontSize: "1rem", cursor: "pointer", marginTop: "2rem", transition: "background 0.2s" }, footer: { marginTop: "auto", padding: "1rem", opacity: 0.7 } }; // --- LIFE STATS CALC --- function calculateLifeStats(birthdate) { const now = new Date(); const diffMs = now - birthdate; const seconds = Math.floor(diffMs / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); const weeks = Math.floor(days / 7); const years = Math.floor(days / 365.25); return [ { icon: "⏳", value: seconds.toLocaleString(), label: "Seconds Lived" }, { icon: "💓", value: (seconds * 1.2).toLocaleString(), label: "Heartbeats (avg)" }, { icon: "😴", value: Math.floor(days / 3).toLocaleString(), label: "Days Spent Sleeping" }, { icon: "🌍", value: years, label: "Years on Earth" }, { icon: "🎂", value: days, label: "Days Old" }, { icon: "🦶", value: (days * 5000).toLocaleString(), label: "Steps Walked (est.)" } ]; } // --- MAIN APP --- export default function App() { const [birthdate, setBirthdate] = useState(""); const [submitted, setSubmitted] = useState(false); // Handle form submit function handleSubmit(e) { e.preventDefault(); if (birthdate) setSubmitted(true); } // Render stats cards function Stats({ birthdate }) { const stats = calculateLifeStats(new Date(birthdate)); return (
{stats.map((stat) => (
{stat.icon}
{stat.value}
{stat.label}
))}
); } return (
{/* Header */}

peal.fun

Life Stats: See Your Life in Numbers

{/* Input or Stats */} {!submitted ? (
setBirthdate(e.target.value)} required max={new Date().toISOString().split("T")[0]} style={styles.input} />
) : ( )} {/* Footer */}
); }