252 lines
10 KiB
HTML
252 lines
10 KiB
HTML
<!doctype html>
|
|
<html class="h-full bg-gray-100 dark:bg-gray-900">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
|
</head>
|
|
<body class="h-full">
|
|
<div class="flex mx-auto w-full h-full">
|
|
<!-- Sidebar -->
|
|
<aside
|
|
class="w-1/6 bg-white text-black dark:text-white dark:bg-gray-800 p-4"
|
|
>
|
|
<h2 class="text-xl font-semibold mb-4">User Dashboard</h2>
|
|
<nav>
|
|
<ul class="space-y-2">
|
|
<li
|
|
class="block bg-red-400 text-white font-bold px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
<a href="#">
|
|
<div class="flex items-center gap-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-layout-dashboard"
|
|
>
|
|
<rect width="7" height="9" x="3" y="3" rx="1" />
|
|
<rect width="7" height="5" x="14" y="3" rx="1" />
|
|
<rect width="7" height="9" x="14" y="12" rx="1" />
|
|
<rect width="7" height="5" x="3" y="16" rx="1" />
|
|
</svg>
|
|
Overview
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
<a href="#">
|
|
<div class="flex items-center gap-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-scroll"
|
|
>
|
|
<path d="M19 17V5a2 2 0 0 0-2-2H4" />
|
|
<path
|
|
d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"
|
|
/>
|
|
</svg>
|
|
Logs
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
<a href="#">
|
|
<div class="flex items-center gap-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-users-round"
|
|
>
|
|
<path d="M18 21a8 8 0 0 0-16 0" />
|
|
<circle cx="10" cy="8" r="5" />
|
|
<path
|
|
d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
|
|
/>
|
|
</svg>
|
|
Accounts
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
<a href="#">
|
|
<div class="flex items-center gap-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-hard-drive"
|
|
>
|
|
<line x1="22" x2="2" y1="12" y2="12" />
|
|
<path
|
|
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
|
|
/>
|
|
<line x1="6" x2="6.01" y1="16" y2="16" />
|
|
<line x1="10" x2="10.01" y1="16" y2="16" />
|
|
</svg>
|
|
Storage
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li
|
|
class="block px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
|
|
>
|
|
<a href="#">
|
|
<div class="flex items-center gap-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-cog"
|
|
>
|
|
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
|
|
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
|
|
<path d="M12 2v2" />
|
|
<path d="M12 22v-2" />
|
|
<path d="m17 20.66-1-1.73" />
|
|
<path d="M11 10.27 7 3.34" />
|
|
<path d="m20.66 17-1.73-1" />
|
|
<path d="m3.34 7 1.73 1" />
|
|
<path d="M14 12h8" />
|
|
<path d="M2 12h2" />
|
|
<path d="m20.66 7-1.73 1" />
|
|
<path d="m3.34 17 1.73-1" />
|
|
<path d="m17 3.34-1 1.73" />
|
|
<path d="m11 13.73-4 6.93" />
|
|
</svg>
|
|
Settings
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 p-6 dark:text-white">
|
|
<!-- Dashboard Header -->
|
|
<div class="mb-6">
|
|
<h1 class="text-3xl font-semibold text-gray-800 dark:text-white">
|
|
Overview
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
|
<div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">
|
|
Total Games Played
|
|
</h3>
|
|
<p class="text-2xl font-bold text-red-400">
|
|
{{ games_played_count }}
|
|
</p>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-white">
|
|
Total Points
|
|
</h3>
|
|
<p class="text-2xl font-bold text-red-400">
|
|
{{ user_stats.points_earned }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
|
|
<h2 class="text-xl font-semibold text-gray-700 dark:text-white mb-4">
|
|
Logs
|
|
</h2>
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="border-b">
|
|
<th
|
|
class="px-4 py-2 text-gray-600 dark:text-white font-semibold"
|
|
>
|
|
Timestamp
|
|
</th>
|
|
<th
|
|
class="px-4 py-2 text-gray-600 dark:text-white font-semibold"
|
|
>
|
|
Class
|
|
</th>
|
|
<th
|
|
class="px-4 py-2 text-gray-600 dark:text-white font-semibold"
|
|
>
|
|
Description
|
|
</th>
|
|
<th
|
|
class="px-4 py-2 text-gray-600 dark:text-white font-semibold"
|
|
>
|
|
Status
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
<td class="px-4 py-2">nil</td>
|
|
<td class="px-4 py-2">Points</td>
|
|
<td class="px-4 py-2">
|
|
Game ID 123 added 5 points to your account!
|
|
</td>
|
|
<td class="px-4 py-2 text-green-600">Transaction Successful</td>
|
|
</tr>
|
|
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
<td class="px-4 py-2">nil</td>
|
|
<td class="px-4 py-2">Points</td>
|
|
<td class="px-4 py-2">
|
|
Game ID 123 removed 5 points from your account!
|
|
</td>
|
|
<td class="px-4 py-2 text-green-600">Transaction Successful</td>
|
|
</tr>
|
|
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
<td class="px-4 py-2">nil</td>
|
|
<td class="px-4 py-2">Game Played</td>
|
|
<td class="px-4 py-2">You've played the game 123 for 4 hours!</td>
|
|
<td class="px-4 py-2 text-yellow-600">nil</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|