Add Tailwind CSS integration and update styles for Home and Error pages

web/package.json

@@ -12,6 +12,9 @@
 	},
 	"devDependencies": {
 		"@preact/preset-vite": "^2.9.3",
+		"autoprefixer": "^10.4.20",
+		"postcss": "^8.4.49",
+		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.2",
 		"vite": "^6.0.4"
 	}

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

web/src/index.tsx

@@ -1,6 +1,7 @@
 import { render } from 'preact';
 import { LocationProvider, Route, Router } from 'preact-iso';
 
+import "./index.css";
 import { NotFound } from './pages/_404.jsx';
 import { Error } from './pages/Error/index.js';
 import { Home } from './pages/Home/index.jsx';
@@ -8,13 +9,13 @@ import { Home } from './pages/Home/index.jsx';
 export function App() {
 	return (
 		<LocationProvider>
-			<main>
+			<div class="bg-black text-green-500 h-screen p-4">
 				<Router>
 					<Route path="/" component={Home} />
 					<Route default component={NotFound} />
 					<Route path="/error" component={Error} />
 				</Router>
-			</main>
+			</div>
 		</LocationProvider>
 	);
 }

web/src/pages/Error/index.tsx

@@ -1,5 +1,7 @@
 export const Error = () => {
     return (
-        <h1 style="font-weight:bold;color:red">Do not mess with me.</h1>
+        <div class="flex w-full h-full justify-center items-center">
+            <h1 class="font-bold text-red-500 text-2xl">nice try.</h1>
+        </div>
     )
 };

web/src/pages/Home/index.tsx

@@ -47,15 +47,32 @@ export const Home = () => {
 	}
 	
 	return (
-		<>
+		<div class="flex flex-col gap-6 w-full h-full justify-center items-center">
-			<h1>???</h1>
+			<h1 class="text-6xl font-bold animate-pulse">???</h1>
-			<div>
+			<div class="flex flex-col justify-center items-center gap-4">
 				<span>
-					Referral: <input type="text" value={referral} onInput={(e) => setReferral(e.currentTarget.value)} />
+					<p class="opacity-100 hover:opacity-75 transition-opacity">
-				</span>
+						Referral:
-				<div>
+					</p>
-					<button onClick={async () => await entry()}>Submit</button>
+					
+				
+					<div class="flex gap-2">
+						<input
+							type="text"
+							value={referral}
+							onInput={(e) => setReferral(e.currentTarget.value)}
+
+							class="bg-black text-green-500 border-green-500 border-2 px-2 hover:bg-green-500 hover:text-black active:bg-green-500 active:text-black transition-colors"
+						/>
+
+						<button
+							onClick={async () => await entry()}
+							class="bg-green-500 text-black hover:bg-black hover:text-green-500 transition-colors px-4"
+						>
+							Submit
+						</button>
 					</div>
+				</span>
 
 				<div>
 					{
@@ -67,7 +84,23 @@ export const Home = () => {
 						)
 					}
 				</div>
+
+				<div class="w-2/3 text-center flex flex-col gap-2">
+					<div>
+						<b>What is this?</b>
+						<p>At exactly 00:00 CET on 1 Jan, the system will choose a random entry. Their referral key shall be publically
+							displayed on this page. The person associated to this referral key shall contact us with their private key.
+							They shall win a little prize. To have one's entry weigh more than the rest, one shall have to spread their
+							referral key amongst the people. Every referral shall increase their chance of getting selected.
+						</p>
+					</div>
+
+					<div>
+						<b>How does one enter?</b>
+						<p>One needs a referral key to enter.</p>
+					</div>
+				</div>
+			</div>
 		</div>
-		</>
 	)
 };

web/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}