From 54990970258af8b3eb921ee2c4fbcbaf23ea4a66 Mon Sep 17 00:00:00 2001
From: Neko-Life <nekolife123579@gmail.com>
Date: Sat, 15 Jul 2023 09:57:55 +0700
Subject: [PATCH] initial rules page

---
 client/src/routes/+page.svelte       | 12 +++++------
 client/src/routes/rules/+page.svelte | 30 ++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 client/src/routes/rules/+page.svelte

diff --git a/client/src/routes/+page.svelte b/client/src/routes/+page.svelte
index dc20eac..7a84c19 100644
--- a/client/src/routes/+page.svelte
+++ b/client/src/routes/+page.svelte
@@ -44,7 +44,7 @@
             <p>Play with 2 devices, even across the ocean.</p>
         </a>
     </div>
-    <div class="rules" in:fly={{ delay: duration, duration, opacity: 0, y: 100, easing: quadOut }}>
+    <a href="/rules" class="rules" in:fly={{ delay: duration, duration, opacity: 0, y: 100, easing: quadOut }}>
         <div class="icon">
             <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                 width="800px" height="800px" viewBox="0 0 973.1 973.1" xml:space="preserve"
@@ -65,7 +65,7 @@
             <h1>Rules</h1>
             <p>How do I play the game?</p>
         </div>
-    </div>
+    </a>
     <div class="darkmode">
         <button on:click={toggleDarkmode} in:fly={{ delay: duration * 1.5, duration, opacity: 0, y: 100, easing: quadOut }}>
             <DarkmodeIcon />
@@ -130,13 +130,13 @@
         @apply bg-white/10;
     }
     .rules {
-        @apply cursor-not-allowed text-gray-500 flex justify-center items-center w-full my-8 p-4 border rounded-lg border-gray-400 border-solid;
+        @apply text-gray-500 flex justify-center items-center w-full my-8 p-4 border rounded-lg border-gray-400 border-solid;
     }
     .rules:hover {
-        @apply bg-red-500/3;
+        @apply bg-black/10;
     }
-    .rules:active {
-        @apply bg-red-500/10;
+    :global(.dark) .rules:hover {
+        @apply bg-white/10;
     }
     .icon {
         @apply h-20 w-20 mr-4;
diff --git a/client/src/routes/rules/+page.svelte b/client/src/routes/rules/+page.svelte
new file mode 100644
index 0000000..26955d1
--- /dev/null
+++ b/client/src/routes/rules/+page.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import BackButton from '$lib/backButton.svelte';
+</script>
+
+<svelte:head>
+	<title>Ultimate tictactoe</title>
+</svelte:head>
+
+<BackButton href="/" />
+
+<main class="flex items-center h-screen justify-center flex-col">
+	<div class="container">
+		<h1 class="text-4xl font-bold text-center">Rules</h1>
+
+		<div class="content">
+			<p>Content</p>
+		</div>
+	</div>
+</main>
+
+<style>
+	.container {
+		@apply w-full;
+		max-width: 1024px;
+	}
+
+	.content {
+		font-size: 24px;
+	}
+</style>
\ No newline at end of file