Spaces:
Running
Running
Redesign a modern, professional homepage for Wikipedia — the world’s free knowledge encyclopedia. Scene 1 – Hero Section: full-width background showing a clean abstract globe or knowledge tree animation, overlaid with a glassmorphic search bar (“Search 60M+ articles”) at the center, multilingual dropdown selector to the right, and minimalist nav bar with “Articles, Topics, Languages, Community, Donate.” Scene 2 – Featured Language Cards: a responsive grid of animated language cards (English, Español, Deutsch, etc.), each with flag icon, language name, article count, and hover animation revealing “Start Reading.” Scene 3 – Knowledge by Topic: dynamic section showing categories like “History, Science, Technology, Arts, Health,” each in a colored tile with icons, short description, and “Explore” CTA; smooth parallax scroll on hover. Scene 4 – Explore Today Module: carousel or horizontal scroll with “Featured Article, In the News, Did You Know?, On this Day” — each as card with title, image thumbnail, excerpt, and fade-in micro-interactions. Scene 5 – Community & Contributors: split-section showing global contributor count (animated counter: “100,000+ active editors”), with map-style pins and a testimonial slider of community members. Scene 6 – Donation Call-to-Action: horizontal ribbon banner with clean UI encouraging donation (“Support free knowledge”), with PayPal/Credit Card buttons, minimal but emotionally resonant. Scene 7 – Footer & Mobile: glassmorphic footer with Wikipedia and Wikimedia badges, language switcher, CC license, quick links to Privacy, About, Help; mobile sticky footer with icons for Home, Topics, Search, Profile, and Donate. Use a neutral and elegant color palette: off-white, light gray, soft blue accents, subtle iconography, modern sans-serif fonts, and smooth scroll-based transitions. Design should be clean, accessible (WCAG compliant), and fully responsive for desktop and mobile. - Initial Deployment
7638c58 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wikipedia - The Free Encyclopedia</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .glassmorphism { | |
| background: rgba(255, 255, 255, 0.8); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-radius: 10px; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .hero-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/><path d="M50,10 L50,90 M10,50 L90,50" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/></svg>'); | |
| background-size: 100px 100px; | |
| opacity: 0.5; | |
| } | |
| .language-card { | |
| transition: all 0.3s ease; | |
| } | |
| .language-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .topic-card { | |
| transition: all 0.3s ease; | |
| } | |
| .topic-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .featured-card { | |
| transition: all 0.3s ease; | |
| } | |
| .featured-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .testimonial-slide { | |
| transition: opacity 0.5s ease; | |
| } | |
| .donation-ribbon { | |
| background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-sticky-footer { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 50; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div 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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <span class="text-2xl font-bold text-gray-800">W</span> | |
| <span class="ml-1 text-2xl font-bold text-blue-600">ikipedia</span> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:space-x-8"> | |
| <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Articles</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Topics</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Languages</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Community</a> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Donate</button> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> | |
| <span class="sr-only">Open main menu</span> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="hidden md:hidden" id="mobile-menu"> | |
| <div class="pt-2 pb-3 space-y-1"> | |
| <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Articles</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Topics</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Languages</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Community</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Donate</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg py-20 md:py-32 relative"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">The Free Encyclopedia</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-10">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world.</p> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="glassmorphism p-1 rounded-lg shadow-lg"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Search 60M+ articles..." class="w-full px-5 py-3 text-gray-700 bg-white rounded-lg focus:outline-none"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg ml-2"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="relative"> | |
| <select class="appearance-none bg-white border border-gray-300 rounded-md pl-3 pr-8 py-2 text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>English</option> | |
| <option>Español</option> | |
| <option>Deutsch</option> | |
| <option>Français</option> | |
| <option>Italiano</option> | |
| <option>Português</option> | |
| <option>Русский</option> | |
| <option>中文</option> | |
| <option>日本語</option> | |
| <option>العربية</option> | |
| </select> | |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"> | |
| <i class="fas fa-chevron-down text-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Language Cards --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Explore Wikipedia in your language</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6"> | |
| <!-- English --> | |
| <div class="language-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer"> | |
| <div class="p-6 text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <span class="text-4xl">🇬🇧</span> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">English</h3> | |
| <p class="text-gray-500 text-sm mb-4">6.5M+ articles</p> | |
| <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Start Reading</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Español --> | |
| <div class="language-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer"> | |
| <div class="p-6 text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <span class="text-4xl">🇪🇸</span> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Español</h3> | |
| <p class="text-gray-500 text-sm mb-4">1.8M+ articles</p> | |
| <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Start Reading</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Deutsch --> | |
| <div class="language-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer"> | |
| <div class="p-6 text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <span class="text-4xl">🇩🇪</span> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Deutsch</h3> | |
| <p class="text-gray-500 text-sm mb-4">2.7M+ articles</p> | |
| <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Start Reading</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Français --> | |
| <div class="language-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer"> | |
| <div class="p-6 text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <span class="text-4xl">🇫🇷</span> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">Français</h3> | |
| <p class="text-gray-500 text-sm mb-4">2.4M+ articles</p> | |
| <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Start Reading</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 中文 --> | |
| <div class="language-card bg-white rounded-lg shadow-md overflow-hidden cursor-pointer"> | |
| <div class="p-6 text-center"> | |
| <div class="flex justify-center mb-4"> | |
| <span class="text-4xl">🇨🇳</span> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-1">中文</h3> | |
| <p class="text-gray-500 text-sm mb-4">1.3M+ articles</p> | |
| <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Start Reading</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium">View all 300+ languages →</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Knowledge by Topic --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Knowledge by Topic</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- History --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-landmark text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">History</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Explore the past through articles on events, people, and civilizations that shaped our world.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Explore History | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Science --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-atom text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Science</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Discover the natural world through physics, chemistry, biology, and other scientific disciplines.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Explore Science | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Technology --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full"> | |
| <i class="fas fa-laptop-code text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Technology</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Learn about innovations, inventions, and the latest developments in the tech industry.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Explore Technology | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Arts --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full"> | |
| <i class="fas fa-palette text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Arts</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Immerse yourself in visual arts, literature, music, theater, and other creative expressions.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Explore Arts | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Health --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full"> | |
| <i class="fas fa-heartbeat text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Health</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Find reliable information about medicine, nutrition, fitness, and mental well-being.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Explore Health | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Geography --> | |
| <div class="topic-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full"> | |
| <i class="fas fa-globe-americas text-indigo-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold ml-3">Geography</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Travel the world through articles on countries, cities, landscapes, and natural wonders.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium flex items-center"> | |
| Explore Geography | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Explore Today Module --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Explore Today</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Featured Article --> | |
| <div class="featured-card bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0 md:w-1/3"> | |
| <img class="h-48 w-full object-cover md:h-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Michelangelo%27s_David_-_right_view_2.jpg/640px-Michelangelo%27s_David_-_right_view_2.jpg" alt="David by Michelangelo"> | |
| </div> | |
| <div class="p-6 md:w-2/3"> | |
| <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold mb-1">Featured Article</div> | |
| <h3 class="text-xl font-semibold mb-2">David (Michelangelo)</h3> | |
| <p class="text-gray-600 mb-4">David is a masterpiece of Renaissance sculpture created in marble between 1501 and 1504 by the Italian artist Michelangelo. The statue represents the Biblical hero David, a favored subject in Florence.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium">Read Full Article →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- In the News --> | |
| <div class="featured-card bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:flex-shrink-0 md:w-1/3"> | |
| <img class="h-48 w-full object-cover md:h-full" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" alt="Earth from space"> | |
| </div> | |
| <div class="p-6 md:w-2/3"> | |
| <div class="uppercase tracking-wide text-sm text-green-600 font-semibold mb-1">In the News</div> | |
| <h3 class="text-xl font-semibold mb-2">Climate Change Summit</h3> | |
| <p class="text-gray-600 mb-4">World leaders gather for the annual Climate Change Summit to discuss new policies and commitments to reduce carbon emissions and combat global warming.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium">Read More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Did You Know? --> | |
| <div class="featured-card bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm text-purple-600 font-semibold mb-1">Did You Know?</div> | |
| <h3 class="text-xl font-semibold mb-2">The shortest war in history lasted only 38 minutes</h3> | |
| <p class="text-gray-600 mb-4">The Anglo-Zanzibar War was fought between the United Kingdom and the Zanzibar Sultanate on 27 August 1896. The conflict lasted between 38 and 45 minutes, marking it as the shortest recorded war in history.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| <!-- On This Day --> | |
| <div class="featured-card bg-white rounded-lg shadow-lg overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="uppercase tracking-wide text-sm text-red-600 font-semibold mb-1">On This Day</div> | |
| <h3 class="text-xl font-semibold mb-2">July 20: First Moon Landing</h3> | |
| <p class="text-gray-600 mb-4">On July 20, 1969, Apollo 11 astronauts Neil Armstrong and Buzz Aldrin became the first humans to land on the Moon, while Michael Collins remained in lunar orbit in the command module.</p> | |
| <button class="text-blue-600 hover:text-blue-800 font-medium">Explore History →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Community & Contributors --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-10 lg:mb-0"> | |
| <h2 class="text-3xl font-bold mb-6">Join Our Global Community</h2> | |
| <p class="text-gray-600 mb-6">Wikipedia is created by volunteers from around the world who share a passion for free knowledge.</p> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="text-4xl font-bold text-blue-600" id="contributor-count">0</div> | |
| <div class="text-gray-600">Active Editors Worldwide</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">Anyone can edit Wikipedia. Our community ensures accuracy, neutrality, and reliability through collaboration.</p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md text-sm font-medium">Learn How to Contribute</button> | |
| </div> | |
| <div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-xl font-semibold mb-6 text-center">What Our Community Says</h3> | |
| <div class="relative h-64 overflow-hidden"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-slide absolute inset-0 p-4 opacity-100" id="testimonial-1"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J."> | |
| <div class="ml-4"> | |
| <div class="font-semibold">Sarah J.</div> | |
| <div class="text-gray-500 text-sm">Editor since 2015</div> | |
| </div> | |
| </div> | |
| <blockquote class="text-gray-600 italic"> | |
| "Editing Wikipedia has been one of the most rewarding experiences of my life. I love sharing knowledge and learning from other editors around the world." | |
| </blockquote> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-slide absolute inset-0 p-4 opacity-0" id="testimonial-2"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos M."> | |
| <div class="ml-4"> | |
| <div class="font-semibold">Carlos M.</div> | |
| <div class="text-gray-500 text-sm">Editor since 2012</div> | |
| </div> | |
| </div> | |
| <blockquote class="text-gray-600 italic"> | |
| "As a teacher, I encourage my students to contribute to Wikipedia. It's a powerful way to develop research skills while giving back to the global community." | |
| </blockquote> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-slide absolute inset-0 p-4 opacity-0" id="testimonial-3"> | |
| <div class="flex items-center mb-4"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Aisha K."> | |
| <div class="ml-4"> | |
| <div class="font-semibold">Aisha K.</div> | |
| <div class="text-gray-500 text-sm">Editor since 2018</div> | |
| </div> | |
| </div> | |
| <blockquote class="text-gray-600 italic"> | |
| "Wikipedia breaks down barriers to knowledge. I'm proud to help expand coverage of women scientists and underrepresented topics." | |
| </blockquote> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-6"> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-blue-600 mx-1" data-testimonial="1"></button> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-gray-300 mx-1" data-testimonial="2"></button> | |
| <button class="testimonial-dot w-3 h-3 rounded-full bg-gray-300 mx-1" data-testimonial="3"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Donation Call-to-Action --> | |
| <section class="donation-ribbon py-12 text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center"> | |
| <div class="mb-8 lg:mb-0"> | |
| <h2 class="text-3xl font-bold mb-4">Support Free Knowledge</h2> | |
| <p class="text-blue-100 mb-6">Wikipedia is a non-profit organization funded primarily through donations. Your gift helps us keep knowledge free and accessible for everyone.</p> | |
| <p class="text-blue-100">The average donation is $15. Every dollar helps.</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-lg p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Make a Donation</h3> | |
| <div class="grid grid-cols-3 gap-2 mb-6"> | |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded">$5</button> | |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded">$15</button> | |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded">$25</button> | |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded">$50</button> | |
| <button class="bg-blue-100 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded">$100</button> | |
| <input type="text" placeholder="Other" class="border border-gray-300 rounded px-3 py-2 text-center"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600"> | |
| <span class="ml-2 text-gray-700">Make this a monthly donation</span> | |
| </label> | |
| </div> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md flex-1 text-center"> | |
| <i class="fab fa-paypal mr-2"></i> Donate with PayPal | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-md flex-1 text-center"> | |
| <i class="far fa-credit-card mr-2"></i> Credit/Debit Card | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-100 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <span class="text-2xl font-bold text-gray-800">W</span> | |
| <span class="ml-1 text-2xl font-bold text-blue-600">ikipedia</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Wikipedia</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">About Wikipedia</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Community portal</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Recent changes</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Contact page</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Contribute</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Help</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Learn to edit</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Community portal</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Upload file</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Tools</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">What links here</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Related changes</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Special pages</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-blue-600">Printable version</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-200"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Wikimedia_Foundation_logo.svg/320px-Wikimedia_Foundation_logo.svg.png" alt="Wikimedia Foundation" class="h-8 mr-4"> | |
| <p class="text-gray-500 text-sm">Wikipedia is a project of the Wikimedia Foundation, a 501(c)(3) non-profit.</p> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| <p>Text is available under the <a href="#" class="text-blue-600 hover:text-blue-800">Creative Commons Attribution-ShareAlike License</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Sticky Footer --> | |
| <div class="md:hidden mobile-sticky-footer bg-white shadow-lg"> | |
| <div class="flex justify-around items-center py-3"> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xs">Home</span> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-th-large text-xl mb-1"></i> | |
| <span class="text-xs">Topics</span> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-search text-xl mb-1"></i> | |
| <span class="text-xs">Search</span> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-user text-xl mb-1"></i> | |
| <span class="text-xs">Profile</span> | |
| </a> | |
| <a href="#" class="text-blue-600 flex flex-col items-center"> | |
| <i class="fas fa-heart text-xl mb-1"></i> | |
| <span class="text-xs">Donate</span> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Animated counter for contributors | |
| function animateCounter(elementId, target, duration = 2000) { | |
| const element = document.getElementById(elementId); | |
| const start = 0; | |
| const increment = target / (duration / 16); | |
| let current = start; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| clearInterval(timer); | |
| current = target; | |
| } | |
| element.textContent = Math.floor(current).toLocaleString() + '+'; | |
| }, 16); | |
| } | |
| // Start counter when section is in view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounter('contributor-count', 100000); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, {threshold: 0.5}); | |
| const communitySection = document.querySelector('#community-section'); | |
| if (communitySection) { | |
| observer.observe(communitySection); | |
| } | |
| // Testimonial slider | |
| let currentTestimonial = 1; | |
| const totalTestimonials = 3; | |
| function showTestimonial(n) { | |
| // Hide all testimonials | |
| for (let i = 1; i <= totalTestimonials; i++) { | |
| document.getElementById(`testimonial-${i}`).classList.add('opacity-0'); | |
| document.querySelector(`.testimonial-dot[data-testimonial="${i}"]`).classList.remove('bg-blue-600'); | |
| document.querySelector(`.testimonial-dot[data-testimonial="${i}"]`).classList.add('bg-gray-300'); | |
| } | |
| // Show selected testimonial | |
| document.getElementById(`testimonial-${n}`).classList.remove('opacity-0'); | |
| document.querySelector(`.testimonial-dot[data-testimonial="${n}"]`).classList.remove('bg-gray-300'); | |
| document.querySelector(`.testimonial-dot[data-testimonial="${n}"]`).classList.add('bg-blue-600'); | |
| currentTestimonial = n; | |
| } | |
| // Add click event to dots | |
| document.querySelectorAll('.testimonial-dot').forEach(dot => { | |
| dot.addEventListener('click', function() { | |
| showTestimonial(parseInt(this.getAttribute('data-testimonial'))); | |
| }); | |
| }); | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| currentTestimonial = currentTestimonial % totalTestimonials + 1; | |
| showTestimonial(currentTestimonial); | |
| }, 5000); | |
| // Initialize first testimonial | |
| showTestimonial(1); | |
| // Start counter immediately (fallback if IntersectionObserver not supported) | |
| animateCounter('contributor-count', 100000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aniket2025/fourth-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |