Spaces:

tersjdhs
/

palastine-help

Running

App Files Files Community

tersjdhs commited on May 10, 2025

Commit

451432b

verified ·

1 Parent(s): c0bdc99

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +385 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Palastine Help
-emoji: 🐨
-colorFrom: blue
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: palastine-help
+emoji: 🐳
+colorFrom: purple
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,385 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plastine.Help | Support Humanity. Stand for Palestine.</title>
+    <meta name="description" content="Humanitarian platform supporting Palestine through donations, awareness, and volunteer efforts.">
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%2233%22 y=%220%22 fill=%22%23CE1126%22/><rect width=%22100%22 height=%2233%22 y=%2233%22 fill=%22%23FFFFFF%22/><rect width=%22100%22 height=%2233%22 y=%2266%22 fill=%22%23000000%22/><polygon points=%2250,20 60,40 80,40 65,55 75,75 50,60 25,75 35,55 20,40 40,40%22 fill=%22%23218C38%22/></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        palestine: {
+                            green: '#16a34a',
+                            light: '#f5f5f4',
+                            dark: '#1c1917',
+                            accent: '#d1d5db',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                    animation: {
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    }
+                }
+            }
+        }
+    </script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        /* Custom CSS for elements that can't be done with Tailwind */
+        .hero-gradient {
+            background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(245, 245, 244, 1) 100%);
+        }
+        .card-hover-effect {
+            transition: all 0.3s ease;
+        }
+        .card-hover-effect:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .ticker {
+            animation: ticker-scroll 30s linear infinite;
+        }
+        @keyframes ticker-scroll {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .progress-bar {
+            transition: width 1s ease-in-out;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+    </style>
+</head>
+<body class="font-sans bg-palestine-light text-palestine-dark dark:bg-palestine-dark dark:text-palestine-light min-h-screen flex flex-col">
+    <!-- Dark mode toggle -->
+    <button id="darkModeToggle" class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-palestine-green text-white shadow-lg flex items-center justify-center hover:bg-opacity-90 transition-all">
+        <i class="fas fa-moon dark:hidden"></i>
+        <i class="fas fa-sun hidden dark:block"></i>
+    </button>
+    <!-- Navigation -->
+    <header class="sticky top-0 z-40 bg-white/80 dark:bg-stone-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
+        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <a href="#" class="flex items-center space-x-2">
+                        <span class="text-2xl font-bold text-palestine-green">Plastine<span class="text-palestine-dark dark:text-palestine-light">.Help</span></span>
+                    </a>
+                </div>
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#home" class="text-sm font-medium hover:text-palestine-green transition-colors">Home</a>
+                    <a href="#donate" class="text-sm font-medium hover:text-palestine-green transition-colors">Donate</a>
+                    <a href="#alerts" class="text-sm font-medium hover:text-palestine-green transition-colors">Alerts</a>
+                    <a href="#stories" class="text-sm font-medium hover:text-palestine-green transition-colors">Stories</a>
+                    <a href="#volunteer" class="text-sm font-medium hover:text-palestine-green transition-colors">Volunteer</a>
+                    <a href="#resources" class="text-sm font-medium hover:text-palestine-green transition-colors">Resources</a>
+                </div>
+                <div class="flex items-center md:hidden">
+                    <button id="mobileMenuButton" class="text-gray-500 hover:text-palestine-green">
+                        <i class="fas fa-bars text-xl"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+        <!-- Mobile menu -->
+        <div id="mobileMenu" class="hidden md:hidden bg-white dark:bg-stone-900 border-t border-gray-200 dark:border-gray-800">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-stone-800">Home</a>
+                <a href="#donate" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-stone-800">Donate</a>
+                <a href="#alerts" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-stone-800">Alerts</a>
+                <a href="#stories" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-stone-800">Stories</a>
+                <a href="#volunteer" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-stone-800">Volunteer</a>
+                <a href="#resources" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 dark:hover:bg-stone-800">Resources</a>
+            </div>
+        </div>
+    </header>
+    <main class="flex-grow">
+        <!-- Hero Section -->
+        <section id="home" class="hero-gradient py-20 px-4 sm:px-6 lg:px-8">
+            <div class="max-w-7xl mx-auto">
+                <div class="md:flex items-center justify-between">
+                    <div class="md:w-1/2 mb-10 md:mb-0 fade-in">
+                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
+                            Support Humanity.<br>
+                            <span class="text-palestine-green">Stand for Palestine.</span>
+                        </h1>
+                        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8">
+                            Join our humanitarian efforts to provide aid, raise awareness, and advocate for justice in Palestine. Every action counts.
+                        </p>
+                        <div class="flex flex-wrap gap-4">
+                            <a href="#donate" class="px-6 py-3 bg-palestine-green text-white rounded-lg font-medium hover:bg-opacity-90 transition-all shadow-md">
+                                Donate Now
+                            </a>
+                            <a href="#volunteer" class="px-6 py-3 border border-palestine-green text-palestine-green rounded-lg font-medium hover:bg-palestine-green hover:text-white transition-all">
+                                Volunteer
+                            </a>
+                            <a href="#alerts" class="px-6 py-3 bg-white dark:bg-stone-800 text-palestine-green rounded-lg font-medium hover:bg-opacity-80 transition-all flex items-center gap-2">
+                                <i class="fas fa-bell"></i> Live Updates
+                            </a>
+                        </div>
+                    </div>
+                    <div class="md:w-1/2 flex justify-center fade-in">
+                        <div class="relative w-full max-w-md">
+                            <div class="absolute -inset-4 bg-palestine-green rounded-2xl opacity-20 blur-lg"></div>
+                            <div class="relative bg-white dark:bg-stone-800 rounded-2xl overflow-hidden shadow-xl">
+                                <img src="https://images.unsplash.com/photo-1584466977773-e625c37cdd50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
+                                     alt="Palestinian children"
+                                     class="w-full h-auto object-cover rounded-t-2xl">
+                                <div class="p-6">
+                                    <h3 class="text-xl font-bold mb-2">Emergency Relief Needed</h3>
+                                    <p class="text-gray-600 dark:text-gray-300 mb-4">Thousands of families are in urgent need of food, water, and medical supplies.</p>
+                                    <div class="w-full bg-gray-200 dark:bg-stone-700 rounded-full h-2.5">
+                                        <div class="progress-bar bg-palestine-green h-2.5 rounded-full" style="width: 65%"></div>
+                                    </div>
+                                    <div class="flex justify-between mt-2 text-sm">
+                                        <span>$1.2M raised</span>
+                                        <span>of $2M goal</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Live Ticker -->
+        <div class="bg-palestine-green text-white py-3 overflow-hidden">
+            <div class="flex items-center">
+                <div class="px-4 py-1 bg-white text-palestine-green font-bold rounded-r-md">
+                    <i class="fas fa-bolt mr-2"></i>LIVE
+                </div>
+                <div class="flex-1 overflow-hidden">
+                    <div class="ticker flex whitespace-nowrap">
+                        <span class="px-4">🚑 12,000+ medical emergencies reported today</span>
+                        <span class="px-4">💧 45% of Gaza's population lacks clean water</span>
+                        <span class="px-4">🏠 5,200+ homes destroyed in recent attacks</span>
+                        <span class="px-4">🍞 Food insecurity affects 80% of families</span>
+                        <span class="px-4">👩‍⚕️ 30+ hospitals operating at 200% capacity</span>
+                        <span class="px-4">🚑 12,000+ medical emergencies reported today</span>
+                        <span class="px-4">💧 45% of Gaza's population lacks clean water</span>
+                        <span class="px-4">🏠 5,200+ homes destroyed in recent attacks</span>
+                        <span class="px-4">🍞 Food insecurity affects 80% of families</span>
+                        <span class="px-4">👩‍⚕️ 30+ hospitals operating at 200% capacity</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Donation Section -->
+        <section id="donate" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-stone-900">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Your Donation Makes a Difference</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                        Every dollar you contribute goes directly to humanitarian aid for Palestinians in need.
+                        We ensure complete transparency in how funds are allocated.
+                    </p>
+                </div>
+                <div class="grid md:grid-cols-3 gap-8">
+                    <!-- Donation Card 1 -->
+                    <div class="bg-palestine-light dark:bg-stone-800 rounded-xl overflow-hidden shadow-md card-hover-effect">
+                        <div class="h-48 overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Medical aid"
+                                 class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Medical Relief</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-4">Provide life-saving medicines, equipment, and hospital support.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-palestine-green">$50 = Medical Kit</span>
+                                <button class="px-4 py-2 bg-palestine-green text-white rounded-lg hover:bg-opacity-90 transition-all">
+                                    Donate
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Donation Card 2 -->
+                    <div class="bg-palestine-light dark:bg-stone-800 rounded-xl overflow-hidden shadow-md card-hover-effect">
+                        <div class="h-48 overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1606787366850-dee0125b2373?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Food aid"
+                                 class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Food Packages</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-4">Deliver nutritious food to families facing severe hunger.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-palestine-green">$30 = Family Meal</span>
+                                <button class="px-4 py-2 bg-palestine-green text-white rounded-lg hover:bg-opacity-90 transition-all">
+                                    Donate
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Donation Card 3 -->
+                    <div class="bg-palestine-light dark:bg-stone-800 rounded-xl overflow-hidden shadow-md card-hover-effect">
+                        <div class="h-48 overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1508514177221-188e1e464088?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                                 alt="Education"
+                                 class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2">Education Fund</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-4">Support schools and learning programs for Palestinian children.</p>
+                            <div class="flex justify-between items-center">
+                                <span class="font-bold text-palestine-green">$100 = School Kit</span>
+                                <button class="px-4 py-2 bg-palestine-green text-white rounded-lg hover:bg-opacity-90 transition-all">
+                                    Donate
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-16 bg-palestine-light dark:bg-stone-800 rounded-xl p-8 shadow-md">
+                    <h3 class="text-2xl font-bold mb-6">Other Ways to Give</h3>
+                    <div class="grid md:grid-cols-2 gap-8">
+                        <div>
+                            <h4 class="text-lg font-semibold mb-3 flex items-center">
+                                <i class="fas fa-hand-holding-usd text-palestine-green mr-3"></i> Monthly Support
+                            </h4>
+                            <p class="text-gray-600 dark:text-gray-300 mb-4">
+                                Become a sustaining donor and provide reliable, ongoing support for critical programs.
+                            </p>
+                            <button class="px-4 py-2 border border-palestine-green text-palestine-green rounded-lg hover:bg-palestine-green hover:text-white transition-all">
+                                Set Up Recurring Donation
+                            </button>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-semibold mb-3 flex items-center">
+                                <i class="fas fa-bullhorn text-palestine-green mr-3"></i> Fundraise
+                            </h4>
+                            <p class="text-gray-600 dark:text-gray-300 mb-4">
+                                Create your own fundraising campaign to engage your community in supporting Palestine.
+                            </p>
+                            <button class="px-4 py-2 border border-palestine-green text-palestine-green rounded-lg hover:bg-palestine-green hover:text-white transition-all">
+                                Start a Campaign
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Live Alerts Section -->
+        <section id="alerts" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-stone-800">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Live Situation Updates</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                        Real-time information about the humanitarian situation in Palestine. Verified sources only.
+                    </p>
+                </div>
+                <div class="grid md:grid-cols-2 gap-8 mb-12">
+                    <div class="bg-white dark:bg-stone-900 rounded-xl p-6 shadow-md">
+                        <h3 class="text-xl font-bold mb-4 flex items-center">
+                            <i class="fas fa-map-marked-alt text-palestine-green mr-3"></i> Current Crisis Map
+                        </h3>
+                        <div class="bg-gray-100 dark:bg-stone-800 rounded-lg overflow-hidden h-64">
+                            <!-- Placeholder for map -->
+                            <div class="w-full h-full flex items-center justify-center text-gray-500">
+                                <div class="text-center">
+                                    <i class="fas fa-map text-4xl mb-2"></i>
+                                    <p>Interactive map loading...</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
+                            <p>Last updated: <span id="mapUpdateTime">Just now</span></p>
+                        </div>
+                    </div>
+                    <div class="bg-white dark:bg-stone-900 rounded-xl p-6 shadow-md">
+                        <h3 class="text-xl font-bold mb-4 flex items-center">
+                            <i class="fas fa-exclamation-triangle text-palestine-green mr-3"></i> Urgent Alerts
+                        </h3>
+                        <div class="space-y-4 max-h-64 overflow-y-auto pr-2" id="alertsContainer">
+                            <!-- Alerts will be added here by JavaScript -->
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white dark:bg-stone-900 rounded-xl p-6 shadow-md">
+                    <h3 class="text-xl font-bold mb-6">Key Humanitarian Indicators</h3>
+                    <div class="grid md:grid-cols-4 gap-6">
+                        <div class="text-center">
+                            <div class="text-4xl font-bold text-palestine-green mb-2" id="displacedCount">2.1M</div>
+                            <div class="text-gray-600 dark:text-gray-300">Displaced People</div>
+                        </div>
+                        <div class="text-center">
+                            <div class="text-4xl font-bold text-palestine-green mb-2" id="foodInsecureCount">1.8M</div>
+                            <div class="text-gray-600 dark:text-gray-300">Food Insecure</div>
+                        </div>
+                        <div class="text-center">
+                            <div class="text-4xl font-bold text-palestine-green mb-2" id="medicalCount">45K</div>
+                            <div class="text-gray-600 dark:text-gray-300">Medical Cases</div>
+                        </div>
+                        <div class="text-center">
+                            <div class="text-4xl font-bold text-palestine-green mb-2" id="schoolsClosedCount">132</div>
+                            <div class="text-gray-600 dark:text-gray-300">Schools Closed</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Stories Section -->
+        <section id="stories" class="py-20 px-4 sm:px-6 lg:px-8 bg-white dark:bg-stone-900">
+            <div class="max-w-7xl mx-auto">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl md:text-4xl font-bold mb-4">Voices from Palestine</h2>
+                    <p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                        Real stories from people affected by the crisis. Their resilience inspires our work.
+                    </p>
+                </div>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Story 1 -->
+                    <div class="bg-palestine-light dark:bg-stone-800 rounded-xl overflow-hidden shadow-md card-hover-effect">
+                        <div class="h-64 overflow-hidden">
+                            <img src="https://images.unsplash.com/photo-1529333166447-c9b8f0eac864?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80"
+                                 alt="Palestinian doctor"
+                                 class="w-full h-full object-cover">
+                        </div>
+                        <div class="p-6">
+                            <div class="flex items-center mb-3">
+                                <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
+                                    <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Dr. Amina" class="w-full h-full object-cover">
+                                </div>
+                                <div>
+                                    <h4 class="font-bold">Dr. Amina</h4>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400">Gaza City</p>
+                                </div>
+                            </div>
+                            <h3 class="text-xl font-bold mb-2">"We Work With What We Have"</h3>
+                            <p class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
+                                "Every day we face shortages of medicine and equipment, but we never turn away patients.
+                                The children especially give me strength to keep going despite the exhaustion."
+                            </p>
+                            <a href="#" class="text-palestine-green font-medium hover:underline">Read full story →</a>
+                        </div>
+                    </div>
+                    <!--
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Full Prompt — HTML/CSS/JS Website for "Plastine.Help" Create a complete HTML/CSS/JavaScript website called Plastine.Help. The site is a modern, responsive, and humanitarian-focused platform to support Palestine. ✅ Structure: Landing Page (index.html) Donation Page Live Alerts Section Stories Page Volunteer Sign-Up Form Awareness Toolkit Page Footer with links & social ✅ Design Style: Inspired by Meta’s new design and Samsung One UI Full responsive layout (mobile-first) Modern fonts (use Google Fonts: Inter or Rubik) Emotional color palette: black, white, green (#16a34a), and beige Smooth scroll and fade animations (AOS.js or pure CSS transitions) ✅ Features to Include: Hero banner with text: “Support Humanity. Stand for Palestine.” Call to Action buttons: "Donate", "Volunteer", "Live Updates" Live ticker showing real-time stats (simulated) Donation progress bar Embedded map image or placeholder Reusable card component for stories Contact form with basic validation Toggle for dark/light mode ✅ Tech: HTML5 semantic tags Pure CSS with Flexbox/Grid JavaScript for interactivity (navbar toggle, alerts update, form validation) ✅ Deliver a full project folder: index.html styles.css script.js /images/ folder for visuals (or placeholder links) favicon of Palestinian flag 🕊 The site must feel human, fast, hopeful, and dignified — not too heavy or sad. It should empower the user to take action, learn, and share.