src/options.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Leet2Hub Settings</title>
		<script defer src="./Options.js"></script>
		<link rel="stylesheet" href="./output.css" />
	</head>
	<body class="bg-slate-800/90 flex flex-col min-h-screen font-mono">
		<h1 class="text-white text-2xl font-bold text-center py-4">Leet2Hub Settings</h1>
		<div
			class="bg-slate-800 text-white mx-auto w-2/3 lg:w-1/3 rounded-md py-6 px-4 gap-y-4 flex flex-col shadow-md mt-10"
		>
			<div class="flex flex-col gap-y-1">
				<label for="github_pat">GitHub Personal Access Token</label>
				<input
					type="password"
					id="github_pat"
					autocomplete="off"
					spellcheck="false"
					class="outline-none py-2 px-2 rounded-md shadow-sm bg-slate-700"
				/>
			</div>

			<div class="flex flex-col gap-y-1">
				<label for="github_repo">GitHub Repository Link</label>
				<input
					type="text"
					id="github_repo"
					autocomplete="off"
					spellcheck="false"
					class="outline-none py-2 px-2 rounded-md shadow-sm bg-slate-700"
				/>
			</div>

			<button id="save" class="w-fit bg-green-500 mx-auto mt-2 px-4 py-2 rounded-md shadow-sm text-white select-none">
				Save
			</button>
		</div>
		<span
			id="save_status"
			class="text-center left-1/2 bottom-10 fixed hidden text-white w-fit bg-green-600 py-2 px-2 rounded-md shadow-sm"
			>Saved</span
		>
	</body>
</html>