Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IdeaVault Pro | Premium App Idea Manager</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; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b21a8 0%, #1e40af 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .idea-card { | |
| border-left: 4px solid; | |
| transition: all 0.3s ease; | |
| } | |
| .idea-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .tag-pill { | |
| transition: all 0.2s ease; | |
| } | |
| .tag-pill:hover { | |
| transform: scale(1.05); | |
| } | |
| .sidebar-item { | |
| transition: all 0.2s ease; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 0.5rem; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c7d2fe; | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #a5b4fc; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-purple-300/20"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-lightbulb text-2xl text-yellow-300 mr-2"></i> | |
| <span class="text-xl font-bold tracking-tight">IdeaVault Pro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-6 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium text-white bg-white/10 rounded-lg"> | |
| <i class="fas fa-home mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-inbox mr-3"></i> | |
| All Ideas | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-star mr-3"></i> | |
| Favorites | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-tags mr-3"></i> | |
| Categories | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-3 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Analytics | |
| </a> | |
| </div> | |
| <div class="mt-8"> | |
| <p class="px-4 text-xs font-semibold text-white/50 uppercase tracking-wider">Collections</p> | |
| <div class="mt-2 space-y-1"> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-mobile-alt mr-3"></i> | |
| Mobile Apps | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-globe mr-3"></i> | |
| Web Apps | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-gamepad mr-3"></i> | |
| Games | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium text-white/90 hover:text-white"> | |
| <i class="fas fa-robot mr-3"></i> | |
| AI Projects | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-auto pt-6"> | |
| <div class="px-4 py-3 bg-white/10 rounded-lg"> | |
| <p class="text-sm font-medium text-white">Upgrade to Premium+</p> | |
| <p class="text-xs text-white/70 mt-1">Get advanced features and unlimited storage</p> | |
| <button class="mt-2 w-full bg-gradient-to-r from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-600 text-black text-sm font-semibold py-2 px-4 rounded-lg transition duration-200"> | |
| Upgrade Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <div class="flex items-center justify-between h-16 px-6 border-b bg-white"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden mr-4 text-gray-500"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </div> | |
| <div class="relative"> | |
| <img class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Stats cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Ideas</p> | |
| <p class="mt-1 text-3xl font-semibold text-gray-900">142</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-lightbulb text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-500">+12 this month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">In Progress</p> | |
| <p class="mt-1 text-3xl font-semibold text-gray-900">8</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-spinner text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-500">+2 this month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Completed</p> | |
| <p class="mt-1 text-3xl font-semibold text-gray-900">24</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-500">+5 this month</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Favorites</p> | |
| <p class="mt-1 text-3xl font-semibold text-gray-900">17</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-star text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-500">+3 this month</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick actions --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2> | |
| <button class="text-sm font-medium text-purple-600 hover:text-purple-700">See all</button> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition duration-200"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mb-2"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">New Idea</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition duration-200"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mb-2"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Quick Note</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition duration-200"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mb-2"> | |
| <i class="fas fa-share-alt"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Share</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition duration-200"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mb-2"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">Insights</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent ideas --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Ideas</h2> | |
| <button class="text-sm font-medium text-purple-600 hover:text-purple-700">View all</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Idea Card 1 --> | |
| <div class="idea-card bg-white rounded-xl shadow-sm overflow-hidden border-l-purple-500"> | |
| <div class="p-5"> | |
| <div class="flex items-start justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">AI-Powered Recipe Generator</h3> | |
| <button class="text-gray-400 hover:text-yellow-500"> | |
| <i class="far fa-star"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">An app that generates personalized recipes based on dietary restrictions, available ingredients, and cooking skill level.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-purple-100 text-purple-800">AI</span> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-blue-100 text-blue-800">Food</span> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-green-100 text-green-800">Health</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-500"> | |
| <span>2 days ago</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span class="mr-3">5</span> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>24</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Idea Card 2 --> | |
| <div class="idea-card bg-white rounded-xl shadow-sm overflow-hidden border-l-blue-500"> | |
| <div class="p-5"> | |
| <div class="flex items-start justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Smart Budget Travel Planner</h3> | |
| <button class="text-yellow-500"> | |
| <i class="fas fa-star"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">A travel app that automatically plans budget-friendly itineraries based on flight prices, accommodation deals, and local events.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-blue-100 text-blue-800">Travel</span> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-yellow-100 text-yellow-800">Finance</span> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-red-100 text-red-800">AI</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-500"> | |
| <span>1 week ago</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span class="mr-3">12</span> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>87</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Idea Card 3 --> | |
| <div class="idea-card bg-white rounded-xl shadow-sm overflow-hidden border-l-green-500"> | |
| <div class="p-5"> | |
| <div class="flex items-start justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">AR Home Design Studio</h3> | |
| <button class="text-gray-400 hover:text-yellow-500"> | |
| <i class="far fa-star"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Augmented reality app that lets users visualize furniture and decor in their home before purchasing, with realistic lighting and shadows.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-green-100 text-green-800">AR</span> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-purple-100 text-purple-800">Design</span> | |
| <span class="tag-pill text-xs font-medium px-3 py-1 rounded-full bg-pink-100 text-pink-800">Home</span> | |
| </div> | |
| <div class="flex items-center justify-between text-xs text-gray-500"> | |
| <span>3 weeks ago</span> | |
| <div class="flex items-center"> | |
| <i class="fas fa-comment mr-1"></i> | |
| <span class="mr-3">8</span> | |
| <i class="fas fa-eye mr-1"></i> | |
| <span>56</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity feed --> | |
| <div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> | |
| <button class="text-sm font-medium text-purple-600 hover:text-purple-700">View all</button> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="p-4 hover:bg-gray-50 transition duration-150"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-10 w-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900">You added a new idea</p> | |
| <span class="text-xs text-gray-500">2h ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600">"AI-Powered Recipe Generator" was added to your collection</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="p-4 hover:bg-gray-50 transition duration-150"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-10 w-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-edit"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900">You updated an idea</p> | |
| <span class="text-xs text-gray-500">1d ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600">"Smart Budget Travel Planner" was updated with new details</p> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="p-4 hover:bg-gray-50 transition duration-150"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <div class="h-10 w-10 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <p class="text-sm font-medium text-gray-900">You favorited an idea</p> | |
| <span class="text-xs text-gray-500">2d ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600">"AR Home Design Studio" was added to your favorites</p> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating action button --> | |
| <div class="fixed bottom-6 right-6"> | |
| <button id="newIdeaBtn" class="flex items-center justify-center w-14 h-14 rounded-full bg-gradient-to-r from-purple-600 to-blue-500 text-white shadow-lg hover:shadow-xl transition duration-200"> | |
| <i class="fas fa-plus text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- New Idea Modal --> | |
| <div id="newIdeaModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">New App Idea</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="ideaTitle" class="block text-sm font-medium text-gray-700 mb-1">Title</label> | |
| <input type="text" id="ideaTitle" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" placeholder="Your brilliant app idea"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="ideaDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea id="ideaDescription" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500" placeholder="Describe your idea in detail"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tags</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="tag-pill cursor-pointer text-xs font-medium px-3 py-1 rounded-full bg-purple-100 text-purple-800">Mobile</span> | |
| <span class="tag-pill cursor-pointer text-xs font-medium px-3 py-1 rounded-full bg-blue-100 text-blue-800">Web</span> | |
| <span class="tag-pill cursor-pointer text-xs font-medium px-3 py-1 rounded-full bg-green-100 text-green-800">AI</span> | |
| <span class="tag-pill cursor-pointer text-xs font-medium px-3 py-1 rounded-full bg-yellow-100 text-yellow-800">Finance</span> | |
| <span class="tag-pill cursor-pointer text-xs font-medium px-3 py-1 rounded-full bg-red-100 text-red-800">Health</span> | |
| <span class="tag-pill cursor-pointer text-xs font-medium px-3 py-1 rounded-full bg-pink-100 text-pink-800">Social</span> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio h-4 w-4 text-purple-600" name="priority" checked> | |
| <span class="ml-2 text-gray-700">Low</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio h-4 w-4 text-blue-600" name="priority"> | |
| <span class="ml-2 text-gray-700">Medium</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" class="form-radio h-4 w-4 text-red-600" name="priority"> | |
| <span class="ml-2 text-gray-700">High</span> | |
| </label> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Save Idea | |
| </button> | |
| <button id="cancelModal" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal functionality | |
| const newIdeaBtn = document.getElementById('newIdeaBtn'); | |
| const newIdeaModal = document.getElementById('newIdeaModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const cancelModal = document.getElementById('cancelModal'); | |
| newIdeaBtn.addEventListener('click', () => { | |
| newIdeaModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| newIdeaModal.classList.add('hidden'); | |
| }); | |
| cancelModal.addEventListener('click', () => { | |
| newIdeaModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', (event) => { | |
| if (event.target === newIdeaModal) { | |
| newIdeaModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Tag selection functionality | |
| const tags = document.querySelectorAll('.tag-pill'); | |
| tags.forEach(tag => { | |
| tag.addEventListener('click', () => { | |
| tag.classList.toggle('bg-opacity-100'); | |
| tag.classList.toggle('bg-opacity-40'); | |
| }); | |
| }); | |
| // Star favorite functionality for idea cards | |
| const starButtons = document.querySelectorAll('.idea-card button'); | |
| starButtons.forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| const icon = button.querySelector('i'); | |
| if (icon.classList.contains('far')) { | |
| icon.classList.remove('far'); | |
| icon.classList.add('fas', 'text-yellow-500'); | |
| } else { | |
| icon.classList.remove('fas', 'text-yellow-500'); | |
| icon.classList.add('far'); | |
| } | |
| }); | |
| }); | |
| </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=kevinschmoozer/ideavault" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |