Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IdeaSpark - Share Your Creative Ideas</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .idea-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .idea-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); | |
| } | |
| .tag { | |
| transition: all 0.2s ease; | |
| } | |
| .tag:hover { | |
| transform: scale(1.05); | |
| } | |
| .floating-btn { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-lightbulb text-2xl"></i> | |
| <h1 class="text-2xl font-bold">IdeaSpark</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 font-medium">Explore</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Categories</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Top Ideas</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">About</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Share Your Creative Ideas With The World</h1> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join our community of innovators, thinkers, and creators. Your idea might spark the next big thing!</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition"> | |
| Share Your Idea | |
| </button> | |
| <button class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:text-purple-600 transition"> | |
| Explore Ideas | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <!-- Search and Filter --> | |
| <div class="mb-12"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-1 relative"> | |
| <input type="text" placeholder="Search for ideas..." class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i> | |
| </div> | |
| <select class="border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>All Categories</option> | |
| <option>Technology</option> | |
| <option>Business</option> | |
| <option>Art & Design</option> | |
| <option>Education</option> | |
| <option>Science</option> | |
| </select> | |
| <select class="border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option>Sort By: Newest</option> | |
| <option>Sort By: Most Popular</option> | |
| <option>Sort By: Trending</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Idea Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Idea Card 1 --> | |
| <div class="idea-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Alex Johnson</p> | |
| <p class="text-gray-500 text-sm">2 days ago</p> | |
| </div> | |
| </div> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Technology</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">AI-Powered Personal Shopping Assistant</h3> | |
| <p class="text-gray-600 mb-4">An AI that learns your style preferences and suggests clothing items from multiple retailers that match your taste and budget.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">AI</span> | |
| <span class="tag bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Fashion</span> | |
| <span class="tag bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">E-commerce</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600"> | |
| <i class="far fa-thumbs-up"></i> | |
| <span>42</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600"> | |
| <i class="far fa-comment"></i> | |
| <span>8</span> | |
| </button> | |
| </div> | |
| <button class="text-purple-600 font-medium hover:text-purple-800"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Idea Card 2 --> | |
| <div class="idea-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Maria Garcia</p> | |
| <p class="text-gray-500 text-sm">1 week ago</p> | |
| </div> | |
| </div> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Sustainability</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Community Composting Network</h3> | |
| <p class="text-gray-600 mb-4">A neighborhood-based composting system where residents can drop off food scraps and receive compost for their gardens in return.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Eco-friendly</span> | |
| <span class="tag bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded-full">Community</span> | |
| <span class="tag bg-teal-100 text-teal-800 text-xs px-2 py-1 rounded-full">Gardening</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600"> | |
| <i class="far fa-thumbs-up"></i> | |
| <span>76</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600"> | |
| <i class="far fa-comment"></i> | |
| <span>14</span> | |
| </button> | |
| </div> | |
| <button class="text-purple-600 font-medium hover:text-purple-800"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Idea Card 3 --> | |
| <div class="idea-card bg-white rounded-xl overflow-hidden shadow-md"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-pink-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Sam Wilson</p> | |
| <p class="text-gray-500 text-sm">3 days ago</p> | |
| </div> | |
| </div> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Education</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Interactive History Learning App</h3> | |
| <p class="text-gray-600 mb-4">An AR app that brings historical events to life by overlaying interactive scenes and characters in your current location.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">AR</span> | |
| <span class="tag bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-full">History</span> | |
| <span class="tag bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Mobile</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600"> | |
| <i class="far fa-thumbs-up"></i> | |
| <span>53</span> | |
| </button> | |
| <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600"> | |
| <i class="far fa-comment"></i> | |
| <span>9</span> | |
| </button> | |
| </div> | |
| <button class="text-purple-600 font-medium hover:text-purple-800"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Load More Button --> | |
| <div class="text-center mt-12"> | |
| <button class="bg-white border-2 border-purple-600 text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-purple-50 transition"> | |
| Load More Ideas | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Submit Idea Modal (Hidden by default) --> | |
| <div id="ideaModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Share Your Idea</h2> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <form id="ideaForm" class="space-y-6"> | |
| <div> | |
| <label for="ideaTitle" class="block font-medium mb-2">Title</label> | |
| <input type="text" | |
| </html> |