Filck18/codesizer-pro
0
1```html2<!DOCTYPE html>3<html lang="cs">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Admin Dashboard | CodeSizer Pro</title>8 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .gradient-text {13 background: linear-gradient(90deg, #3b82f6, #8b5cf6);14 -webkit-background-clip: text;15 background-clip: text;16 color: transparent;17 }18 .sidebar {19 transition: all 0.3s ease;20 }21 .sidebar-link:hover {22 background-color: rgba(59, 130, 246, 0.1);23 }24 .sidebar-link.active {25 background-color: rgba(59, 130, 246, 0.2);26 border-left: 3px solid #3b82f6;27 }28 .card-stat {29 transition: transform 0.3s ease;30 }31 .card-stat:hover {32 transform: translateY(-3px);33 }34 </style>35</head>36<body class="bg-gray-50 text-gray-800 min-h-screen">37 <div class="flex h-screen">38 <!-- Sidebar -->39 <div class="sidebar w-64 bg-white shadow-md">40 <div class="p-4 border-b border-gray-200">41 <div class="flex items-center space-x-2">42 <i data-feather="code" class="text-blue-400" width="28" height="28"></i>43 <h1 class="text-xl font-bold">44 <span class="gradient-text">CodeSizer</span> Admin45 </h1>46 </div>47 </div>48 <nav class="p-4">49 <ul class="space-y-2">50 <li>51 <a href="#dashboard" class="sidebar-link active flex items-center space-x-3 p-3 rounded-lg">52 <i data-feather="home" class="text-gray-600"></i>53 <span>Přehled</span>54 </a>55 </li>56 <li>57 <a href="#users" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg">58 <i data-feather="users" class="text-gray-600"></i>59 <span>Správa uživatelů</span>60 </a>61 </li>62 <li>63 <a href="#projects" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg">64 <i data-feather="folder" class="text-gray-600"></i>65 <span>Správa projektů</span>66 </a>67 </li>68 <li>69 <a href="#settings" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg">70 <i data-feather="settings" class="text-gray-600"></i>71 <span>Nastavení</span>72 </a>73 </li>74 </ul>75 </nav>76 <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">77 <div class="flex items-center space-x-3">78 <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">79 <i data-feather="user" class="text-blue-500 w-4 h-4"></i>80 </div>81 <div>82 <p class="text-sm font-medium">Admin</p>83 <p class="text-xs text-gray-500">Administrátor</p>84 </div>85 </div>86 </div>87 </div>88 89 <!-- Main Content -->90 <div class="flex-1 overflow-y-auto">91 <!-- Header -->92 <header class="bg-white shadow-sm p-4">93 <div class="flex justify-between items-center">94 <h2 class="text-xl font-semibold">Přehled</h2>95 <div class="flex items-center space-x-4">96 <button class="p-2 rounded-full hover:bg-gray-100">97 <i data-feather="bell" class="text-gray-600"></i>98 </button>99 <button class="p-2 rounded-full hover:bg-gray-100">100 <i data-feather="help-circle" class="text-gray-600"></i>101 </button>102 </div>103 </div>104 </header>105 106 <!-- Dashboard Content -->107 <main class="p-6">108 <!-- Stats Cards -->109 <section id="dashboard" class="mb-8">110 <h3 class="text-lg font-semibold mb-4">Statistiky</h3>111 <div class="grid grid-cols-1 md:grid-cols-4 gap-4">112 <div class="card-stat bg-white p-4 rounded-lg shadow-sm border border-gray-100">113 <div class="flex justify-between items-start">114 <div>115 <p class="text-sm text-gray-500">Celkem uživatelů</p>116 <p class="text-2xl font-bold">42</p>117 </div>118 <div class="p-2 rounded-lg bg-blue-50 text-blue-500">119 <i data-feather="users"></i>120 </div>121 </div>122 <p class="text-xs text-gray-500 mt-2"><span class="text-green-500">+3</span> tento měsíc</p>123 </div>124 <div class="card-stat bg-white p-4 rounded-lg shadow-sm border border-gray-100">125 <div class="flex justify-between items-start">126 <div>127 <p class="text-sm text-gray-500">Aktivní projekty</p>128 <p class="text-2xl font-bold">18</p>129 </div>130 <div class="p-2 rounded-lg bg-green-50 text-green-500">131 <i data-feather="folder"></i>132 </div>133 </div>134 <p class="text-xs text-gray-500 mt-2"><span class="text-green-500">+5</span> tento měsíc</p>135 </div>136 <div class="card-stat bg-white p-4 rounded-lg shadow-sm border border-gray-100">137 <div class="flex justify-between items-start">138 <div>139 <p class="text-sm text-gray-500">UCP výpočty</p>140 <p class="text-2xl font-bold">127</p>141 </div>142 <div class="p-2 rounded-lg bg-purple-50 text-purple-500">143 <i data-feather="cpu"></i>144 </div>145 </div>146 <p class="text-xs text-gray-500 mt-2"><span class="text-green-500">+12</span> tento měsíc</p>147 </div>148 <div class="card-stat bg-white p-4 rounded-lg shadow-sm border border-gray-100">149 <div class="flex justify-between items-start">150 <div>151 <p class="text-sm text-gray-500">COCOMO výpočty</p>152 <p class="text-2xl font-bold">89</p>153 </div>154 <div class="p-2 rounded-lg bg-yellow-50 text-yellow-500">155 <i data-feather="box"></i>156 </div>157 </div>158 <p class="text-xs text-gray-500 mt-2"><span class="text-green-500">+7</span> tento měsíc</p>159 </div>160 </div>161 </section>162 163 <!-- Recent Activity -->164 <section class="mb-8">165 <h3 class="text-lg font-semibold mb-4">Nedávná aktivita</h3>166 <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">167 <table class="min-w-full divide-y divide-gray-200">168 <thead class="bg-gray-50">169 <tr>170 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Uživatel</th>171 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Akce</th>172 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projekt</th>173 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Čas</th>174 </tr>175 </thead>176 <tbody class="bg-white divide-y divide-gray-200">177 <tr>178 <td class="px-6 py-4 whitespace-nowrap">179 <div class="flex items-center">180 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">181 <i data-feather="user" class="text-blue-500"></i>182 </div>183 <div class="ml-4">184 <div class="text-sm font-medium text-gray-900">Jan Novák</div>185 <div class="text-sm text-gray-500">jan.novak@example.com</div>186 </div>187 </div>188 </td>189 <td class="px-6 py-4 whitespace-nowrap">190 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">191 Vytvořil projekt192 </span>193 </td>194 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">E-shop platforma</td>195 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Před 2 hodinami</td>196 </tr>197 <tr>198 <td class="px-6 py-4 whitespace-nowrap">199 <div class="flex items-center">200 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">201 <i data-feather="user" class="text-purple-500"></i>202 </div>203 <div class="ml-4">204 <div class="text-sm font-medium text-gray-900">Petra Dvořáková</div>205 <div class="text-sm text-gray-500">petra.dvorakova@example.com</div>206 </div>207 </div>208 </td>209 <td class="px-6 py-4 whitespace-nowrap">210 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">211 Dokončil UCP212 </span>213 </td>214 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CRM systém</td>215 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Před 5 hodinami</td>216 </tr>217 </tbody>218 </table>219 </div>220 </section>221 222 <!-- User Management Section -->223 <section id="users" class="mb-8 hidden">224 <div class="flex justify-between items-center mb-4">225 <h3 class="text-lg font-semibold">Správa uživatelů</h3>226 <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center">227 <i data-feather="plus" class="mr-2"></i> Nový uživatel228 </button>229 </div>230 <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">231 <table class="min-w-full divide-y divide-gray-200">232 <thead class="bg-gray-50">233 <tr>234 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jméno</th>235 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>236 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th>237 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>238 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Akce</th>239 </tr>240 </thead>241 <tbody class="bg-white divide-y divide-gray-200">242 <tr>243 <td class="px-6 py-4 whitespace-nowrap">244 <div class="flex items-center">245 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">246 <i data-feather="user" class="text-blue-500"></i>247 </div>248 <div class="ml-4">249 <div class="text-sm font-medium text-gray-900">Jan Novák</div>250 </div>251 </div>252 </td>253 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">jan.novak@example.com</td>254 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Uživatel</td>255 <td class="px-6 py-4 whitespace-nowrap">256 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">257 Aktivní258 </span>259 </td>260 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">261 <button class="text-blue-600 hover:text-blue-900 mr-3">Upravit</button>262 <button class="text-red-600 hover:text-red-900">Smazat</button>263 </td>264 </tr>265 <tr>266 <td class="px-6 py-4 whitespace-nowrap">267 <div class="flex items-center">268 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">269 <i data-feather="user" class="text-purple-500"></i>270 </div>271 <div class="ml-4">272 <div class="text-sm font-medium text-gray-900">Petra Dvořáková</div>273 </div>274 </div>275 </td>276 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">petra.dvorakova@example.com</td>277 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Admin</td>278 <td class="px-6 py-4 whitespace-nowrap">279 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">280 Aktivní281 </span>282 </td>283 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">284 <button class="text-blue-600 hover:text-blue-900 mr-3">Upravit</button>285 <button class="text-red-600 hover:text-red-900">Smazat</button>286 </td>287 </tr>288 </tbody>289 </table>290 </div>291 </section>292 293 <!-- Project Management Section -->294 <section id="projects" class="mb-8 hidden">295 <div class="flex justify-between items-center mb-4">296 <h3 class="text-lg font-semibold">Správa projektů</h3>297 <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center">298 <i data-feather="plus" class="mr-2"></i> Nový projekt299 </button>300 </div>301 <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">302 <table class="min-w-full divide-y divide-gray-200">303 <thead class="bg-gray-50">304 <tr>305 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Název projektu</th>306 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Přiřazený uživatel</th>307 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metoda</th>308 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>309 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Akce</th>310 </tr>311 </thead>312 <tbody class="bg-white divide-y divide-gray-200">313 <tr>314 <td class="px-6 py-4 whitespace-nowrap">315 <div class="text-sm font-medium text-gray-900">E-shop platforma</div>316 <div class="text-sm text-gray-500">Webová aplikace</div>317 </td>318 <td class="px-6 py-4 whitespace-nowrap">319 <div class="flex items-center">320 <div class="flex-shrink-0 h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">321 <i data-feather="user" class="text-blue-500 w-4 h-4"></i>322 </div>323 <div class="ml-2">324 <div class="text-sm font-medium text-gray-900">Jan Novák</div>325 </div>326 </div>327 </td>328 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">UCP</td>329 <td class="px-6 py-4 whitespace-nowrap">330 <span class="px-2 inline-flex text-xs leading-5 font-semibol331___METADATA_START___332{"repoId":"Filck18/codesizer-pro","isNew":false,"userName":"Filck18"}333___METADATA_END___