Hugging Face's logo

Spaces:
JaviA
/
supabase-whiz
Running

App Files Community
JaviA commited on
Commit
2c61d7c
·
verified ·
1 Parent(s): dd89ff9

Quiero crear una app con base de datos de supabase

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +127 -19
  3. supabase_tables.html +118 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Supabase Whiz
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: SupaBase Whiz 🚀
3
+ colorFrom: blue
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,127 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DataWhiz - Modern Database UI</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/7">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
13
+ <script>
14
+ const supabaseUrl = 'YOUR_SUPABASE_URL';
15
+ const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';
16
+ const supabase = supabase.createClient(supabaseUrl, supabaseKey);
17
+ </script>
18
+ <style>
19
+ .vanta-bg {
20
+ position: fixed;
21
+ width: 100%;
22
+ height: 100%;
23
+ z-index: -1;
24
+ }
25
+ .glass-card {
26
+ background: rgba(255, 255, 255, 0.15);
27
+ backdrop-filter: blur(10px);
28
+ border-radius: 20px;
29
+ border: 1px solid rgba(255, 255, 255, 0.18);
30
+ }
31
+ .db-table {
32
+ background: rgba(255, 255, 255, 0.85);
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 text-white">
37
+ <div id="vanta-bg" class="vanta-bg"></div>
38
+
39
+ <header class="container mx-auto px-4 py-6">
40
+ <div class="flex justify-between items-center">
41
+ <div class="flex items-center space-x-2">
42
+ <i data-feather="database" class="w-8 h-8 text-indigo-300"></i>
43
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-300 to-purple-200 bg-clip-text text-transparent">SupaBase Whiz</h1>
44
+ </div>
45
+ <nav>
46
+ <ul class="flex space-x-6">
47
+ <li><a href="#" class="hover:text-indigo-200 transition flex items-center space-x-1"><i data-feather="home" class="w-4 h-4"></i><span>Dashboard</span></a></li>
48
+ <li><a href="#" class="hover:text-indigo-200 transition flex items-center space-x-1"><i data-feather="table" class="w-4 h-4"></i><span>Tables</span></a></li>
49
+ <li><a href="#" class="hover:text-indigo-200 transition flex items-center space-x-1"><i data-feather="settings" class="w-4 h-4"></i><span>Settings</span></a></li>
50
+ </ul>
51
+ </nav>
52
+ </div>
53
+ </header>
54
+
55
+ <main class="container mx-auto px-4 py-8">
56
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
57
+ <!-- Connection Panel -->
58
+ <div class="glass-card p-6 lg:col-span-1">
59
+ <h2 class="text-xl font-semibold mb-4 flex items-center space-x-2">
60
+ <i data-feather="plug" class="w-5 h-5"></i>
61
+ <span>Database Connection</span>
62
+ </h2>
63
+ <form class="space-y-4">
64
+ <div>
65
+ <label class="block text-sm font-medium mb-1">Database Type</label>
66
+ <select class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300">
67
+ <option selected>Supabase</option>
68
+ <option>PostgreSQL</option>
69
+ <option>MySQL</option>
70
+ <option>SQLite</option>
71
+ </select>
72
+ </div>
73
+ <div>
74
+ <label class="block text-sm font-medium mb-1">Project URL</label>
75
+ <input type="text" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300" placeholder="https://your-project.supabase.co">
76
+ </div>
77
+ <div>
78
+ <label class="block text-sm font-medium mb-1">Username</label>
79
+ <input type="text" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300" placeholder="root">
80
+ </div>
81
+ <div>
82
+ <label class="block text-sm font-medium mb-1">Password</label>
83
+ <input type="password" class="w-full bg-white bg-opacity-10 border border-white border-opacity-20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300" placeholder="supabase-anon-key">
84
+ </div>
85
+ <button type="submit" class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-lg transition flex items-center justify-center space-x-2">
86
+ <i data-feather="link" class="w-4 h-4"></i>
87
+ <span>Connect</span>
88
+ </button>
89
+ </form>
90
+ </div>
91
+
92
+ <!-- Database Content -->
93
+ <div class="lg:col-span-2 space-y-6">
94
+ <!-- Sample Table -->
95
+ <div class="glass-card p-6">
96
+ <div class="flex justify-between items-center mb-4">
97
+ <h2 class="text-xl font-semibold flex items-center space-x-2">
98
+ <i data-feather="grid" class="w-5 h-5"></i>
99
+ <span>Sample Database Tables</span>
100
+ </h2>
101
+ <button class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-1 px-3 rounded-lg transition text-sm flex items-center space-x-1">
102
+ <i data-feather="plus" class="w-3 h-3"></i>
103
+ <span>New Table</span>
104
+ </button>
105
+ </div>
106
+
107
+ <div class="overflow-x-auto db-table rounded-lg shadow-lg">
108
+ <table class="min-w-full divide-y divide-gray-200">
109
+ <thead class="bg-gray-50">
110
+ <tr>
111
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Table Name</th>
112
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Records</th>
113
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
114
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
115
+ </tr>
116
+ </thead>
117
+ <tbody class="bg-white divide-y divide-gray-200">
118
+ <tr>
119
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">users</td>
120
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1,245</td>
121
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.4 MB</td>
122
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
123
+ <div class="flex space-x-2">
124
+ <button class="text-indigo-600 hover:text-indigo-900">
125
+ <i data-feather="eye" class="w-4
126
+ </body>
127
+ </html>
supabase_tables.html ADDED
@@ -0,0 +1,118 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SupaBase Tables | SupaBase Whiz</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/7">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
12
+ <style>
13
+ .glass-card {
14
+ background: rgba(255, 255, 255, 0.15);
15
+ backdrop-filter: blur(10px);
16
+ border-radius: 20px;
17
+ border: 1px solid rgba(255, 255, 255, 0.18);
18
+ }
19
+ .db-table {
20
+ background: rgba(255, 255, 255, 0.85);
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="min-h-screen bg-gradient-to-br from-indigo-900 to-purple-800 text-white">
25
+
26
+ <header class="container mx-auto px-4 py-6">
27
+ <div class="flex justify-between items-center">
28
+ <div class="flex items-center space-x-2">
29
+ <i data-feather="database" class="w-8 h-8 text-indigo-300"></i>
30
+ <h1 class="text-2xl font-bold bg-gradient-to-r from-indigo-300 to-purple-200 bg-clip-text text-transparent">SupaBase Whiz</h1>
31
+ </div>
32
+ <nav>
33
+ <ul class="flex space-x-6">
34
+ <li><a href="index.html" class="hover:text-indigo-200 transition flex items-center space-x-1"><i data-feather="home" class="w-4 h-4"></i><span>Dashboard</span></a></li>
35
+ <li><a href="supabase_tables.html" class="hover:text-indigo-200 transition flex items-center space-x-1 text-indigo-200 font-medium"><i data-feather="table" class="w-4 h-4"></i><span>Tables</span></a></li>
36
+ <li><a href="#" class="hover:text-indigo-200 transition flex items-center space-x-1"><i data-feather="settings" class="w-4 h-4"></i><span>Settings</span></a></li>
37
+ </ul>
38
+ </nav>
39
+ </div>
40
+ </header>
41
+
42
+ <main class="container mx-auto px-4 py-8">
43
+ <div class="glass-card p-6">
44
+ <div class="flex justify-between items-center mb-6">
45
+ <h2 class="text-xl font-semibold flex items-center space-x-2">
46
+ <i data-feather="database" class="w-5 h-5"></i>
47
+ <span>Supabase Tables</span>
48
+ </h2>
49
+ <div class="flex space-x-3">
50
+ <button id="refresh-btn" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded-lg transition flex items-center space-x-2">
51
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
52
+ <span>Refresh</span>
53
+ </button>
54
+ <button id="new-table-btn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition flex items-center space-x-2">
55
+ <i data-feather="plus" class="w-4 h-4"></i>
56
+ <span>New Table</span>
57
+ </button>
58
+ </div>
59
+ </div>
60
+
61
+ <div id="tables-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
62
+ <!-- Tables will be loaded here -->
63
+ </div>
64
+ </div>
65
+ </main>
66
+
67
+ <script>
68
+ // Initialize Supabase
69
+ const supabaseUrl = 'YOUR_SUPABASE_URL';
70
+ const supabaseKey = 'YOUR_SUPABASE_ANON_KEY';
71
+ const supabase = supabase.createClient(supabaseUrl, supabaseKey);
72
+
73
+ // Load tables on page load
74
+ document.addEventListener('DOMContentLoaded', async () => {
75
+ await loadTables();
76
+ feather.replace();
77
+ });
78
+
79
+ // Refresh button handler
80
+ document.getElementById('refresh-btn').addEventListener('click', loadTables);
81
+
82
+ // Load tables from Supabase
83
+ async function loadTables() {
84
+ try {
85
+ const { data: tables, error } = await supabase
86
+ .from('pg_tables')
87
+ .select('tablename')
88
+ .ilike('schemaname', 'public');
89
+
90
+ if (error) throw error;
91
+
92
+ const container = document.getElementById('tables-container');
93
+ container.innerHTML = '';
94
+
95
+ tables.forEach(table => {
96
+ const tableCard = document.createElement('div');
97
+ tableCard.className = 'glass-card p-4 hover:bg-white hover:bg-opacity-20 transition cursor-pointer';
98
+ tableCard.innerHTML = `
99
+ <div class="flex items-center space-x-3">
100
+ <i data-feather="grid" class="w-5 h-5 text-indigo-300"></i>
101
+ <h3 class="font-medium">${table.tablename}</h3>
102
+ </div>
103
+ <div class="mt-3 flex justify-between text-xs text-gray-300">
104
+ <span><i data-feather="columns" class="w-3 h-3 inline mr-1"></i> View Columns</span>
105
+ <span><i data-feather="bar-chart-2" class="w-3 h-3 inline mr-1"></i> View Data</span>
106
+ </div>
107
+ `;
108
+ container.appendChild(tableCard);
109
+ });
110
+
111
+ feather.replace();
112
+ } catch (error) {
113
+ console.error('Error loading tables:', error);
114
+ }
115
+ }
116
+ </script>
117
+ </body>
118
+ </html>