-
- Vite + Svelte + Go
-
-
-
-
-
- Check out SvelteKit, the official Svelte app framework powered by Vite!
+ Username: {$meAccount.username}, ID: {$meAccount.id}
-
- {#if account}
-
- Username: {account.username}, ID: {account.id}
-
- {/if}
-
- Click on the Vite and Svelte logos to learn more
-
-
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 9e908b9..b5c61c9 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,80 +1,3 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-text-size-adjust: 100%;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-.card {
- padding: 2em;
-}
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/src/lib/store.ts b/frontend/src/lib/store.ts
new file mode 100644
index 0000000..5ec9571
--- /dev/null
+++ b/frontend/src/lib/store.ts
@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+import type { MeAccount } from "./api/account";
+
+export const meAccount = writable(
+ JSON.parse(document.getElementById("accountData").innerHTML) as MeAccount,
+);
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..1e2cfea
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,73 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.{svelte,js,ts,jsx,tsx}"],
+ theme: {
+ extend: {
+ colors: {
+ textDark: "#ffffff",
+ textLight: "#000000",
+ background: {
+ 50: "#fefefe",
+ 100: "#fdfdfd",
+ 200: "#fbfbfb",
+ 300: "#f9f9f9",
+ 400: "#f7f7f7",
+ 500: "#f5f5f5",
+ 600: "#c4c4c4",
+ 700: "#939393",
+ 800: "#626262",
+ 900: "#313131",
+ },
+ primary: {
+ 50: "#e6f2f3",
+ 100: "#cee5e8",
+ 200: "#9ccbd1",
+ 300: "#6bb2b9",
+ 400: "#3998a2",
+ 500: "#087e8b",
+ 600: "#06656f",
+ 700: "#054c53",
+ 800: "#033238",
+ 900: "#02191c",
+ },
+ secondary: {
+ 50: "#f2f2f3",
+ 100: "#e5e5e7",
+ 200: "#cbccce",
+ 300: "#b0b2b6",
+ 400: "#96999d",
+ 500: "#7c7f85",
+ 600: "#63666a",
+ 700: "#4a4c50",
+ 800: "#323335",
+ 900: "#19191b",
+ },
+ danger: {
+ 50: "#ffefef",
+ 100: "#ffdedf",
+ 200: "#ffbdbf",
+ 300: "#ff9c9f",
+ 400: "#ff7b7f",
+ 500: "#ff5a5f",
+ 600: "#cc484c",
+ 700: "#993639",
+ 800: "#662426",
+ 900: "#331213",
+ },
+ success: {
+ 50: "#edf6f0",
+ 100: "#dbece1",
+ 200: "#b8d9c2",
+ 300: "#94c7a4",
+ 400: "#71b485",
+ 500: "#4da167",
+ 600: "#3e8152",
+ 700: "#2e613e",
+ 800: "#1f4029",
+ 900: "#0f2015",
+ },
+ },
+ },
+ },
+ plugins: [],
+};
diff --git a/package.json b/package.json
index 7613555..aa5cbdc 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,14 @@
"description": "",
"main": "index.js",
"scripts": {
- "watch:style": "sass -I . -w assets/scss/:web/frontend/assets/css/ --style compressed"
+ "watch:style": "sass -I . -w assets/scss/:web/frontend/assets/css/ --style compressed",
+ "dev": "concurrently \"pnpm watch:style\" \"cd frontend && pnpm dev\" \"air\""
},
"keywords": [],
"author": "sam