297 lines
14 KiB
HTML
297 lines
14 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>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="crossorigin="anonymous"></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">Developer Dashboard</h2>
|
|
<nav>
|
|
<ul class="space-y-2">
|
|
<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="/developer/dashboard">
|
|
<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="/developer/dashboard/games">
|
|
<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>
|
|
Games
|
|
</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">
|
|
Create a Game
|
|
</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 Created
|
|
</h3>
|
|
<p class="text-2xl font-bold text-red-400">
|
|
{{ count }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 p-4 rounded shadow">
|
|
<div class="flex flex-col justify-center items-center">
|
|
<span id="red_message" class="hidden inline-flex items-center mt-4 gap-1 px-2 py-1 rounded-full text-2xl font-medium bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"></span>
|
|
<form id="gamedetails">
|
|
<div id="login_prompt" class="flex flex-col justify-center items-center">
|
|
<h2 class="text-2xl text-black dark:text-white">Enter the Game's Name:</h2>
|
|
<input type="text" id="name" name="name"
|
|
class="text-2xl block text-center px-4 py-2 mt-4 mb-4 bg-white dark:bg-gray-900 text-black dark:text-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent"
|
|
placeholder="Enter the game's name" required />
|
|
</div>
|
|
</form>
|
|
<div id="buttons" class="w-full flex flex-wrap flex-row items-center justify-center gap-3">
|
|
<button id="submit" class="w-50 px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl
|
|
font-medium transition-all duration-300
|
|
hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2
|
|
active:scale-95">
|
|
<span class="flex items-center justify-center gap-2 text-2xl">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M31 15L35.6 19.6C35.9739 19.9665 36.4765 20.1717 37 20.1717C37.5235 20.1717 38.0261 19.9665 38.4 19.6L42.6 15.4C42.9665 15.0261 43.1717 14.5235 43.1717 14C43.1717 13.4765 42.9665 12.9739 42.6 12.6L38 8"
|
|
stroke="currentColor" stroke-width="3" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M41.9998 4L22.7998 23.2" stroke="currentColor" stroke-width="3"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
<path
|
|
d="M15 42C21.0751 42 26 37.0751 26 31C26 24.9249 21.0751 20 15 20C8.92487 20 4 24.9249 4 31C4 37.0751 8.92487 42 15 42Z"
|
|
stroke="currentColor" stroke-width="3" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
Setup!
|
|
</span>
|
|
</button>
|
|
<a href="/developer/dashboard/games" type="button" id="cancel" class="w-50 px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl
|
|
font-medium transition-all duration-300
|
|
hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2
|
|
active:scale-95">
|
|
<span class="flex items-center justify-center gap-2 text-2xl">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
|
|
stroke="currentColor" stroke-width="3" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M9.7998 9.80005L38.1998 38.2001" stroke="currentColor" stroke-width="3"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
Cancel
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loadingOverlay" class="hidden fixed inset-0 bg-black/75 flex justify-center items-center z-50">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript" onload>
|
|
$(`#submit`)[0].addEventListener("click", async function(event) {
|
|
event.preventDefault();
|
|
$(`#red_message`)[0].classList.add("hidden");
|
|
|
|
if ($(`#name`)[0].value.length == 0) {
|
|
$(`#red_message`)[0].classList.remove("hidden");
|
|
$(`#red_message`)[0].textContent = "Please enter a name for the game.";
|
|
return;
|
|
}
|
|
|
|
|
|
$(`#loadingOverlay`)[0].classList.remove("hidden");
|
|
|
|
|
|
response = await fetch(
|
|
"\/developer/register/game", {
|
|
method: "POST",
|
|
body: new FormData($(`#gamedetails`)[0]),
|
|
}
|
|
);
|
|
|
|
|
|
setTimeout(async() => {
|
|
message = await response.text();
|
|
switch (message) {
|
|
|
|
case "OK":
|
|
if ("" != "") {
|
|
window.location.replace("\/developer/dashboard/games");
|
|
} else {
|
|
window.location.replace("\/developer/dashboard/games");
|
|
}
|
|
break;
|
|
|
|
default:
|
|
$(`#loadingOverlay`)[0].classList.add("hidden");
|
|
if (!response.ok) {
|
|
$(`#red_message`)[0].classList.remove("hidden");
|
|
$(`#red_message`)[0].textContent = message;
|
|
} else {
|
|
$(`#info_message`)[0].classList.remove("hidden");
|
|
$(`#info_message`)[0].textContent = message;
|
|
}
|
|
}
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
|
|
</main>
|
|
</div>
|
|
</body>
|
|
</html>
|