TigreHabibi/sql-empire-builder
0
1 2<!DOCTYPE html>3<html lang="es" class="dark">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Ranking - DB-Manager</title>8 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">9 <link rel="stylesheet" href="style.css">10 <script src="https://cdn.tailwindcss.com"></script>11 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>12 <script src="https://unpkg.com/feather-icons"></script>13 <script>14 tailwind.config = {15 darkMode: 'class',16 theme: {17 extend: {18 colors: {19 primary: '#3B82F6',20 secondary: '#10B981'21 }22 }23 }24 }25 </script>26</head>27<body class="bg-gray-900 text-white min-h-screen flex flex-col">28 <custom-navbar></custom-navbar>29 30 <main class="flex-1 container mx-auto px-4 py-8">31 <div class="max-w-4xl mx-auto">32 <h1 class="text-4xl font-bold mb-8 text-center bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">33 🏆 Ranking de Jugadores34 </h1>35 36 <!-- Ranking Table -->37 <section class="bg-gray-800 rounded-lg p-6 mb-8">38 <h2 class="text-2xl font-bold mb-4 text-primary">Top Jugadores SQL</h2>39 <div class="overflow-x-auto">40 <table class="w-full text-sm">41 <thead>42 <tr class="bg-gray-700">43 <th class="p-3 text-left">Posición</th>44 <th class="p-3 text-left">Jugador</th>45 <th class="p-3 text-left">Puntuación</th>46 <th class="p-3 text-left">Comandos Exitosos</th>47 <th class="p-3 text-left">Nivel</th>48 </tr>49 </thead>50 <tbody id="ranking-table">51 <tr class="border-b border-gray-700">52 <td class="p-3">🥇 1</td>53 <td class="p-3 font-semibold">SQL Master</td>54 <td class="p-3 text-green-400">1,250 pts</td>55 <td class="p-3">89</td>56 <td class="p-3"><span class="bg-purple-600 px-2 py-1 rounded text-xs">Experto</span></td>57 </tr>58 <tr class="border-b border-gray-700">59 <td class="p-3">🥈 2</td>60 <td class="p-3 font-semibold">Data Wizard</td>61 <td class="p-3 text-green-400">980 pts</td>62 <td class="p-3">67</td>63 <td class="p-3"><span class="bg-blue-600 px-2 py-1 rounded text-xs">Avanzado</span></td>64 </tr>65 <tr class="border-b border-gray-700">66 <td class="p-3">🥉 3</td>67 <td class="p-3 font-semibold">Query Queen</td>68 <td class="p-3 text-yellow-400">750 pts</td>69 <td class="p-3">52</td>70 <td class="p-3"><span class="bg-green-600 px-2 py-1 rounded text-xs">Intermedio</span></td>71 </tr>72 <tr class="border-b border-gray-700">73 <td class="p-3">4</td>74 <td class="p-3">Database Ninja</td>75 <td class="p-3 text-yellow-400">620 pts</td>76 <td class="p-3">45</td>77 <td class="p-3"><span class="bg-green-600 px-2 py-1 rounded text-xs">Intermedio</span></td>78 </tr>79 <tr>80 <td class="p-3">5</td>81 <td class="p-3">SQL Novato</td>82 <td class="p-3 text-orange-400">420 pts</td>83 <td class="p-3">31</td>84 <td class="p-3"><span class="bg-orange-600 px-2 py-1 rounded text-xs">Principiante</span></td>85 </tr>86 </tbody>87 </table>88 </div>89 </section>90 91 <!-- Player Stats -->92 <section class="grid md:grid-cols-3 gap-6 mb-8">93 <div class="bg-gray-800 rounded-lg p-6 text-center">94 <i data-feather="award" class="w-12 h-12 text-yellow-400 mx-auto mb-4"></i>95 <h3 class="text-xl font-semibold mb-2">Tu Posición</h3>96 <p class="text-3xl font-bold text-primary">#6</p>97 <p class="text-gray-400 text-sm mt-2">Sigue practicando para subir!</p>98 </div>99 100 <div class="bg-gray-800 rounded-lg p-6 text-center">101 <i data-feather="star" class="w-12 h-12 text-green-400 mx-auto mb-4"></i>102 <h3 class="text-xl font-semibold mb-2">Tu Puntuación</h3>103 <p class="text-3xl font-bold text-secondary">350 pts</p>104 <p class="text-gray-400 text-sm mt-2">+50 pts para el siguiente nivel</p>105 </div>106 107 <div class="bg-gray-800 rounded-lg p-6 text-center">108 <i data-feather="check-circle" class="w-12 h-12 text-blue-400 mx-auto mb-4"></i>109 <h3 class="text-xl font-semibold mb-2">Comandos Exitosos</h3>110 <p class="text-3xl font-bold text-blue-400">28</p>111 <p class="text-gray-400 text-sm mt-2">89% de efectividad</p>112 </div>113 </section>114 115 <!-- Achievements -->116 <section class="bg-gray-800 rounded-lg p-6">117 <h2 class="text-2xl font-bold mb-4 text-primary">🏅 Logros Desbloqueados</h2>118 <div class="grid md:grid-cols-2 gap-4">119 <div class="bg-gray-700 p-4 rounded-lg flex items-center gap-4">120 <i data-feather="check-circle" class="w-8 h-8 text-green-400"></i>121 <div>122 <h4 class="font-semibold">Primer INSERT</h4>123 <p class="text-gray-400 text-sm">Añadiste tu primer producto</p>124 </div>125 </div>126 <div class="bg-gray-700 p-4 rounded-lg flex items-center gap-4">127 <i data-feather="check-circle" class="w-8 h-8 text-green-400"></i>128 <div>129 <h4 class="font-semibold">UPDATE Maestro</h4>130 <p class="text-gray-400 text-sm">10 actualizaciones exitosas</p>131 </div>132 </div>133 <div class="bg-gray-700 p-4 rounded-lg flex items-center gap-4 opacity-50">134 <i data-feather="lock" class="w-8 h-8 text-gray-500"></i>135 <div>136 <h4 class="font-semibold">DELETE Seguro</h4>137 <p class="text-gray-400 text-sm">Elimina 5 clientes sin errores</p>138 </div>139 </div>140 <div class="bg-gray-700 p-4 rounded-lg flex items-center gap-4 opacity-50">141 <i data-feather="lock" class="w-8 h-8 text-gray-500"></i>142 <div>143 <h4 class="font-semibold">SQL Expert</h4>144 <p class="text-gray-400 text-sm">Alcanza 1000 puntos</p>145 </div>146 </div>147 </div>148 </section>149 </div>150 </main>151 152 <custom-footer></custom-footer>153 154 <script src="components/navbar.js"></script>155 <script src="components/footer.js"></script>156 <script>157 feather.replace();158 </script>159</body>160</html>161