create index page

4 files changed, 89 insertions, 9 deletions

diff --git a/src/app.css b/src/app.css
index a77dddd..154cdc0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -127,7 +127,8 @@ main {
 
 /* base styles for inputs */
 input[type='text'],
-input[type='submit'] {
+input[type='submit'],
+button {
 	-webkit-appearance: none;
 	background-color: transparent;
 	color: var(--theme-darker-text);
@@ -152,13 +153,15 @@ input[type='text']:focus {
 }
 
 /* base styles for buttons */
-input[type='submit'] {
+input[type='submit'],
+button {
 	margin-left: 0.2em;
 	cursor: pointer;
 }
 
 /* Hovering over a button */
-input[type='submit']:hover {
+input[type='submit']:hover,
+button:hover {
 	/* make the text lighter */
 	color: var(--theme-main-text);
 }
diff --git a/src/donators.txt b/src/donators.txt
new file mode 100644
index 0000000..37fe2ba
--- /dev/null
+++ b/src/donators.txt
@@ -0,0 +1,10 @@
+951801c9765944bbbd1adf22cc90294e oxnan
+c558970dca7343a79083825bacfa65c7 FingaMan
+1915444928b64d8b8973df8044f8cdb7 LeaPhant
+585b739ac76d40a8a95604ea052930c7 Canadas
+7e534bf90cc24b4689e9ab380aab9877 CalebDavisPvP
+64e5da31f6ae40caa6e77cebd7694df8 ImEvoke
+26398ec782e5440cbcbb94c58b8b60a2 coydog
+a7b317669c3945a380cd96d1f516b858 nullDorito
+25e670e88a104f96bbe6f5545170682f RunicYoungDragon
+4c6beeff830e4bc1b9bc876e9ee8f357 ItzMonday
\ No newline at end of file
diff --git a/src/lib/SearchUser.svelte b/src/lib/SearchUser.svelte
index 3c841ce..886afe1 100644
--- a/src/lib/SearchUser.svelte
+++ b/src/lib/SearchUser.svelte
@@ -22,6 +22,8 @@
 		autocapitalize="off"
 		spellcheck="false"
 		aria-label="Enter username"
+		required
 		bind:value
 	/>
+	<slot />
 </form>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index b90528a..46d8940 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,15 +1,80 @@
-<script context="module" lang="ts">
-	import Header from '$lib/Header.svelte'
+<script lang="ts">
+	import Username from '$lib/minecraft/Username.svelte'
+	import SearchUser from '$lib/SearchUser.svelte'
+	import type { CleanUser } from '$lib/APITypes'
+	import donators from '../_donators.json'
 
 	export const prerender = true
+	export const hydrate = false
 </script>
 
 <svelte:head>
 	<title>SkyBlock Stats</title>
 </svelte:head>
 
-<Header />
+<main>
+	<section class="title-section">
+		<h1>SkyBlock Stats</h1>
+		<SearchUser>
+			<button>View Profiles</button>
+		</SearchUser>
+	</section>
 
-<section>
-	<h1>SkyBlock Stats</h1>
-</section>
+	<hr style="margin: 25vh 0 2em 0" />
+
+	<section>
+		<h3>Other SkyBlock tools</h3>
+		<ul>
+			<li><a>Auction prices (coming soon)</a></li>
+			<li><a href="/leaderboards">Leaderboards</a></li>
+			<li><a>Bazaar (coming soon)</a></li>
+			<li><a href="/chat">Fake chat generator</a></li>
+			<li><a href="https://skyblock-npcs.matdoes.dev">NPC Skin Stealer</a></li>
+			<li><a href="/election">Mayor Election Status</a></li>
+		</ul>
+	</section>
+
+	<section id="donators">
+		<h2>Donators</h2>
+		<p>
+			Thank you to these people for
+			<a href="https://ko-fi.com/matdoesdev" target="_blank">donating</a>.
+		</p>
+		<ul>
+			{#each donators as donator}
+				<li><Username player={donator} headType="2d" hyperlinkToProfile /></li>
+			{/each}
+		</ul>
+	</section>
+	<section>
+		<h2>Info</h2>
+		<p>Website made by <a href="https://matdoes.dev">mat</a>.</p>
+		<p>Join the <a href="https://discord.gg/nWQKpzPCPJ">Forum Sweats</a> Discord server.</p>
+		<p>
+			Resource packs: <a href="//packshq.com">PacksHQ</a> (default),
+			<a href="//hypixel.net/threads/2138599">Furfsky</a>,
+			<a href="//furfsky.net">Furfsky Reborn</a>,
+			<a href="//hypixel.net/threads/2239953">Ectoplasm</a>,
+			<a href="//hypixel.net/threads/3470904">RNBW</a>,
+			<a href="//hypixel.net/threads/4174260">Hypixel+</a>,
+			<a href="//hypixel.net/threads/3597207">Worlds and Beyond</a>.
+		</p>
+		<p>
+			Minecraft skin APIs: <a href="//mc-heads.net">mc-heads.net</a> for 3d renders and
+			<a href="//mc-crafatar.com">crafatar.com</a> for 2d heads.
+		</p>
+		<p>Emojis: <a href="https://twemoji.twitter.com/">Twemoji</a></p>
+		<p>Font: <a href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a></p>
+	</section>
+</main>
+
+<style>
+	.title-section {
+		margin: 0 auto;
+		width: fit-content;
+	}
+
+	#donators p {
+		margin: 0;
+	}
+</style>