Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SupaConnect - Supabase Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/@supabase/supabase-js@2"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 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); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="database" class="w-8 h-8"></i> | |
| <h1 class="text-3xl font-bold">SupaConnect</h1> | |
| </div> | |
| <button id="authButton" class="bg-white text-indigo-600 px-6 py-2 rounded-full font-medium hover:bg-gray-100 transition"> | |
| Sign In | |
| </button> | |
| </header> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <div> | |
| <h2 class="text-4xl font-bold mb-4">Supabase Magic at Your Fingertips</h2> | |
| <p class="text-xl mb-6 opacity-90">Connect, manage, and visualize your Supabase data with this powerful dashboard.</p> | |
| <div class="flex space-x-4"> | |
| <button id="getStartedBtn" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition"> | |
| Get Started | |
| </button> | |
| <button class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition"> | |
| Documentation | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-2xl backdrop-blur-md border border-white border-opacity-20 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold">Quick Connect</h3> | |
| <i data-feather="zap" class="w-5 h-5"></i> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-white bg-opacity-5 p-4 rounded-lg"> | |
| <label class="block text-sm mb-1 opacity-80">Project URL</label> | |
| <input type="text" id="supabaseUrl" placeholder="https://yourproject.supabase.co" class="w-full bg-transparent border-b border-white border-opacity-30 py-2 focus:outline-none focus:border-opacity-100"> | |
| </div> | |
| <div class="bg-white bg-opacity-5 p-4 rounded-lg"> | |
| <label class="block text-sm mb-1 opacity-80">API Key</label> | |
| <input type="password" id="supabaseKey" placeholder="your-anon-key" class="w-full bg-transparent border-b border-white border-opacity-30 py-2 focus:outline-none focus:border-opacity-100"> | |
| </div> | |
| <button id="connectBtn" class="w-full bg-white text-indigo-600 py-3 rounded-lg font-medium hover:bg-gray-100 transition flex items-center justify-center"> | |
| <i data-feather="link" class="w-4 h-4 mr-2"></i> | |
| Connect to Supabase | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-16"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">Supabase Features Made Simple</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Manage your database, authentication, storage, and more through our intuitive interface.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <div class="bg-white p-8 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="database" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Database Explorer</h3> | |
| <p class="text-gray-600 mb-4">Browse, query, and manage your Postgres tables with a beautiful interface.</p> | |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> | |
| Try it now <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="users" class="text-pink-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">User Management</h3> | |
| <p class="text-gray-600 mb-4">View and manage your Supabase Auth users with advanced filtering options.</p> | |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> | |
| Try it now <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md card-hover"> | |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="hard-drive" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Storage Browser</h3> | |
| <p class="text-gray-600 mb-4">Upload, organize, and manage your files in Supabase Storage buckets.</p> | |
| <a href="#" class="text-indigo-600 font-medium inline-flex items-center"> | |
| Try it now <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-8 mb-16"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-4">Ready to connect your Supabase project?</h3> | |
| <p class="text-gray-600 mb-6">Get started in seconds and unlock the full potential of your Supabase backend.</p> | |
| <button id="connectCtaBtn" class="bg-indigo-600 text-white px-8 py-3 rounded-full font-bold hover:bg-indigo-700 transition flex items-center"> | |
| <i data-feather="database" class="w-5 h-5 mr-2"></i> | |
| Connect Now | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="bg-white p-6 rounded-xl shadow-md max-w-md w-full"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <div class="flex-1"></div> | |
| <i data-feather="maximize-2" class="text-gray-400 w-4 h-4"></i> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto"> | |
| <code class="text-sm text-gray-800"> | |
| // Initialize Supabase client<br> | |
| const supabase = createClient(<br> | |
| 'https://yourproject.supabase.co',<br> | |
| 'your-anon-key'<br> | |
| );<br><br> | |
| // Example query<br> | |
| const { data, error } = await supabase<br> | |
| .from('todos')<br> | |
| .select('*')<br> | |
| .limit(10); | |
| </code> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-100 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <i data-feather="database" class="text-indigo-600 w-6 h-6"></i> | |
| <span class="font-bold text-gray-800">SupaConnect</span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Docs</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">GitHub</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Twitter</a> | |
| <a href="#" class="text-gray-600 hover:text-indigo-600 transition">Terms</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 SupaConnect. Not affiliated with Supabase.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Supabase client | |
| const supabase = createClient( | |
| 'https://yourproject.supabase.co', | |
| 'your-anon-key' | |
| ); | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| // Connect button functionality | |
| document.getElementById('connectBtn').addEventListener('click', () => { | |
| const supabaseUrl = document.getElementById('supabaseUrl').value; | |
| const supabaseKey = document.getElementById('supabaseKey').value; | |
| if (supabaseUrl && supabaseKey) { | |
| try { | |
| // Initialize client with user's credentials | |
| const supabase = createClient(supabaseUrl, supabaseKey); | |
| localStorage.setItem('supabaseUrl', supabaseUrl); | |
| localStorage.setItem('supabaseKey', supabaseKey); | |
| // Show success message | |
| alert('Successfully connected to Supabase!'); | |
| // Redirect to dashboard (would be implemented in a real app) | |
| // window.location.href = 'dashboard.html'; | |
| } catch (error) { | |
| console.error('Error connecting to Supabase:', error); | |
| alert('Failed to connect. Please check your URL and API key.'); | |
| } | |
| } else { | |
| alert('Please enter both your Supabase URL and API key.'); | |
| } | |
| }); | |
| // Get started and CTA buttons | |
| const ctaButtons = ['getStartedBtn', 'connectCtaBtn']; | |
| ctaButtons.forEach(btnId => { | |
| document.getElementById(btnId).addEventListener('click', () => { | |
| document.getElementById('supabaseUrl').focus(); | |
| }); | |
| }); | |
| // Check for stored credentials | |
| const storedUrl = localStorage.getItem('supabaseUrl'); | |
| const storedKey = localStorage.getItem('supabaseKey'); | |
| if (storedUrl && storedKey) { | |
| document.getElementById('supabaseUrl').value = storedUrl; | |
| document.getElementById('supabaseKey').value = storedKey; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |