Ignat2009/sql-jazz-maestro
0
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>Database Tables | SQL Jazz Maestro</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9</head>10<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">11 <header class="py-6 px-4 border-b border-gray-800">12 <div class="container mx-auto flex justify-between items-center">13 <a href="index.html" class="text-2xl font-bold text-primary flex items-center">14 <i data-feather="database" class="mr-2"></i>15 SQL Jazz Maestro16 </a>17 <nav>18 <a href="query.html" class="px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700 transition-colors">19 Query Editor20 </a>21 </nav>22 </div>23 </header>24 25 <main class="flex-grow container mx-auto px-4 py-8">26 <div class="max-w-6xl mx-auto">27 <div class="flex justify-between items-center mb-6">28 <h2 class="text-2xl font-bold text-primary">29 <i data-feather="grid" class="mr-2 inline"></i>30 Database Tables31 </h2>32 <div class="relative">33 <input type="text" placeholder="Search tables..." class="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-primary w-64">34 <i data-feather="search" class="absolute left-3 top-3 text-gray-500 w-4 h-4"></i>35 </div>36 </div>37 38 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">39 <!-- Table Cards -->40 <div class="bg-gray-800/50 rounded-xl p-6 shadow-xl hover:shadow-primary/20 transition-shadow">41 <div class="flex justify-between items-start mb-4">42 <div>43 <h3 class="text-lg font-semibold text-primary mb-1">users</h3>44 <p class="text-sm text-gray-400">Stores user account information</p>45 </div>46 <span class="px-2 py-1 bg-primary/20 text-primary rounded text-xs">12 columns</span>47 </div>48 <div class="text-sm text-gray-300 space-y-2">49 <div class="flex justify-between">50 <span>Records:</span>51 <span class="font-mono">1,234</span>52 </div>53 <div class="flex justify-between">54 <span>Size:</span>55 <span class="font-mono">2.4 MB</span>56 </div>57 </div>58 <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">59 <a href="#" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">60 <i data-feather="eye" class="mr-1 w-4 h-4"></i> View61 </a>62 <a href="query.html" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">63 <i data-feather="edit-3" class="mr-1 w-4 h-4"></i> Query64 </a>65 </div>66 </div>67 68 <div class="bg-gray-800/50 rounded-xl p-6 shadow-xl hover:shadow-primary/20 transition-shadow">69 <div class="flex justify-between items-start mb-4">70 <div>71 <h3 class="text-lg font-semibold text-primary mb-1">products</h3>72 <p class="text-sm text-gray-400">Product catalog</p>73 </div>74 <span class="px-2 py-1 bg-primary/20 text-primary rounded text-xs">9 columns</span>75 </div>76 <div class="text-sm text-gray-300 space-y-2">77 <div class="flex justify-between">78 <span>Records:</span>79 <span class="font-mono">567</span>80 </div>81 <div class="flex justify-between">82 <span>Size:</span>83 <span class="font-mono">1.7 MB</span>84 </div>85 </div>86 <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">87 <a href="#" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">88 <i data-feather="eye" class="mr-1 w-4 h-4"></i> View89 </a>90 <a href="query.html" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">91 <i data-feather="edit-3" class="mr-1 w-4 h-4"></i> Query92 </a>93 </div>94 </div>95 96 <div class="bg-gray-800/50 rounded-xl p-6 shadow-xl hover:shadow-primary/20 transition-shadow">97 <div class="flex justify-between items-start mb-4">98 <div>99 <h3 class="text-lg font-semibold text-primary mb-1">orders</h3>100 <p class="text-sm text-gray-400">Customer orders</p>101 </div>102 <span class="px-2 py-1 bg-primary/20 text-primary rounded text-xs">15 columns</span>103 </div>104 <div class="text-sm text-gray-300 space-y-2">105 <div class="flex justify-between">106 <span>Records:</span>107 <span class="font-mono">8,932</span>108 </div>109 <div class="flex justify-between">110 <span>Size:</span>111 <span class="font-mono">5.1 MB</span>112 </div>113 </div>114 <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">115 <a href="#" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">116 <i data-feather="eye" class="mr-1 w-4 h-4"></i> View117 </a>118 <a href="query.html" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">119 <i data-feather="edit-3" class="mr-1 w-4 h-4"></i> Query120 </a>121 </div>122 </div>123 124 <div class="bg-gray-800/50 rounded-xl p-6 shadow-xl hover:shadow-primary/20 transition-shadow">125 <div class="flex justify-between items-start mb-4">126 <div>127 <h3 class="text-lg font-semibold text-primary mb-1">categories</h3>128 <p class="text-sm text-gray-400">Product categories</p>129 </div>130 <span class="px-2 py-1 bg-primary/20 text-primary rounded text-xs">4 columns</span>131 </div>132 <div class="text-sm text-gray-300 space-y-2">133 <div class="flex justify-between">134 <span>Records:</span>135 <span class="font-mono">24</span>136 </div>137 <div class="flex justify-between">138 <span>Size:</span>139 <span class="font-mono">0.2 MB</span>140 </div>141 </div>142 <div class="mt-4 pt-4 border-t border-gray-700 flex justify-between">143 <a href="#" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">144 <i data-feather="eye" class="mr-1 w-4 h-4"></i> View145 </a>146 <a href="query.html" class="text-secondary hover:text-secondary/80 transition-colors flex items-center text-sm">147 <i data-feather="edit-3" class="mr-1 w-4 h-4"></i> Query148 </a>149 </div>150 </div>151 </div>152 </div>153 </main>154 155 <footer class="py-4 px-4 border-t border-gray-800 text-center text-gray-400 text-sm">156 <p>SQL Jazz Maestro - Play your data like a pro</p>157 </footer>158 159 <script>feather.replace();</script>160</body>161</html>162