Starting to gain some semblance of a working frontend.

2025-04-22 22:42:08 -07:00 · 2025-04-22 22:42:08 -07:00 · d8e7e34b83
commit d8e7e34b83
parent 9cc1aa180d
20 changed files with 1374 additions and 194 deletions
--- a/index.html
+++ b/index.html
@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/public/css/main.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,8 @@
      "name": "cpularp-manager-frontend",
      "version": "0.0.0",
      "dependencies": {
+        "@tailwindcss/vite": "^4.1.4",
+        "tailwindcss": "^4.1.4",
        "vue": "^3.5.13",
        "vue-router": "^4.5.0"
      },
@ -506,7 +508,6 @@
      "cpu": [
        "ppc64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -523,7 +524,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -540,7 +540,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -557,7 +556,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -574,7 +572,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -591,7 +588,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -608,7 +604,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -625,7 +620,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -642,7 +636,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -659,7 +652,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -676,7 +668,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -693,7 +684,6 @@
      "cpu": [
        "loong64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -710,7 +700,6 @@
      "cpu": [
        "mips64el"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -727,7 +716,6 @@
      "cpu": [
        "ppc64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -744,7 +732,6 @@
      "cpu": [
        "riscv64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -761,7 +748,6 @@
      "cpu": [
        "s390x"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -778,7 +764,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -795,7 +780,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -812,7 +796,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -829,7 +812,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -846,7 +828,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -863,7 +844,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -880,7 +860,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -897,7 +876,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -914,7 +892,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1329,7 +1306,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1343,7 +1319,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1357,7 +1332,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1371,7 +1345,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1385,7 +1358,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1399,7 +1371,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1413,7 +1384,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1427,7 +1397,6 @@
      "cpu": [
        "arm"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1441,7 +1410,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1455,7 +1423,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1469,7 +1436,6 @@
      "cpu": [
        "loong64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1483,7 +1449,6 @@
      "cpu": [
        "ppc64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1497,7 +1462,6 @@
      "cpu": [
        "riscv64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1511,7 +1475,6 @@
      "cpu": [
        "riscv64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1525,7 +1488,6 @@
      "cpu": [
        "s390x"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1539,7 +1501,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1553,7 +1514,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1567,7 +1527,6 @@
      "cpu": [
        "arm64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1581,7 +1540,6 @@
      "cpu": [
        "ia32"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1595,7 +1553,6 @@
      "cpu": [
        "x64"
      ],
-      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@ -1622,6 +1579,260 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.4.tgz",
+      "integrity": "sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==",
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.29.2",
+        "tailwindcss": "4.1.4"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.4.tgz",
+      "integrity": "sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.4",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.4",
+        "@tailwindcss/oxide-darwin-x64": "4.1.4",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.4",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.4",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.4",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.4",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.4",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.4",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.4",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.4",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.4"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.4.tgz",
+      "integrity": "sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.4.tgz",
+      "integrity": "sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.4.tgz",
+      "integrity": "sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.4.tgz",
+      "integrity": "sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.4.tgz",
+      "integrity": "sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.4.tgz",
+      "integrity": "sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.4.tgz",
+      "integrity": "sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.4.tgz",
+      "integrity": "sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.4.tgz",
+      "integrity": "sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.4.tgz",
+      "integrity": "sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.0",
+        "@emnapi/runtime": "^1.4.0",
+        "@emnapi/wasi-threads": "^1.0.1",
+        "@napi-rs/wasm-runtime": "^0.2.8",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.4.tgz",
+      "integrity": "sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.4.tgz",
+      "integrity": "sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.4.tgz",
+      "integrity": "sha512-4UQeMrONbvrsXKXXp/uxmdEN5JIJ9RkH7YVzs6AMxC/KC1+Np7WZBaNIco7TEjlkthqxZbt8pU/ipD+hKjm80A==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.4",
+        "@tailwindcss/oxide": "4.1.4",
+        "tailwindcss": "4.1.4"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
    "node_modules/@tsconfig/node22": {
      "version": "22.0.1",
      "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.1.tgz",
@ -1633,7 +1844,6 @@
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/@types/json-schema": {
@ -1647,7 +1857,7 @@
      "version": "22.14.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.14.1.tgz",
      "integrity": "sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "undici-types": "~6.21.0"
@ -2612,6 +2822,15 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.140",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.140.tgz",
@ -2619,6 +2838,19 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -2645,7 +2877,6 @@
      "version": "0.25.2",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
      "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "bin": {
@ -3189,7 +3420,6 @@
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@ -3254,7 +3484,6 @@
      "version": "4.2.11",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
      "license": "ISC"
    },
    "node_modules/graphemer": {
@ -3485,7 +3714,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
-      "dev": true,
      "license": "MIT",
      "bin": {
        "jiti": "lib/jiti-cli.mjs"
@ -3612,6 +3840,234 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -4234,7 +4690,6 @@
      "version": "4.40.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
      "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@types/estree": "1.0.7"
@ -4469,11 +4924,25 @@
        "url": "https://opencollective.com/synckit"
      }
    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",
+      "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.13",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fdir": "^6.4.4",
@ -4490,7 +4959,6 @@
      "version": "6.4.4",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
      "license": "MIT",
      "peerDependencies": {
        "picomatch": "^3 || ^4"
@ -4505,7 +4973,6 @@
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
@ -4554,7 +5021,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
+      "devOptional": true,
      "license": "0BSD"
    },
    "node_modules/type-check": {
@ -4611,7 +5078,7 @@
      "version": "6.21.0",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/unicorn-magic": {
@ -4689,7 +5156,6 @@
      "version": "6.3.2",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.2.tgz",
      "integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "esbuild": "^0.25.0",
@ -4852,7 +5318,6 @@
      "version": "6.4.4",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
      "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
      "license": "MIT",
      "peerDependencies": {
        "picomatch": "^3 || ^4"
@ -4867,7 +5332,6 @@
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=12"
--- a/package.json
+++ b/package.json
@ -13,6 +13,8 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
+    "@tailwindcss/vite": "^4.1.4",
+    "tailwindcss": "^4.1.4",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
--- a/public/css/main.css
+++ b/public/css/main.css
@ -0,0 +1,613 @@
+/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-xs: 20rem;
+    --container-3xl: 48rem;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --radius-sm: 0.25rem;
+    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-primary: oklch(0.1 0 0);
+    --color-secondary: oklch(0.85 0.1733 93.56);
+    --color-accent: oklch(0.6 0.1556 246.71);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .fixed {
+    position: fixed;
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-auto {
+    margin: auto;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .flex {
+    display: flex;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .max-h-32 {
+    max-height: calc(var(--spacing) * 32);
+  }
+  .max-h-\[96px\] {
+    max-height: 96px;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
+  .max-w-\[96px\] {
+    max-width: 96px;
+  }
+  .min-w-xs {
+    min-width: var(--container-xs);
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-8 {
+    border-style: var(--tw-border-style);
+    border-width: 8px;
+  }
+  .border-accent {
+    border-color: var(--color-accent);
+  }
+  .bg-black {
+    background-color: var(--color-black);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
+  .mask-clip-border {
+    mask-clip: border-box;
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-accent {
+    color: var(--color-accent);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-primary\/80 {
+    --tw-ring-color: color-mix(in srgb, oklch(0.1 0 0) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+    }
+  }
+  .ring-secondary\/80 {
+    --tw-ring-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+    }
+  }
+  .drop-shadow-md {
+    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
+    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .drop-shadow-accent {
+    --tw-drop-shadow-color: oklch(0.6 0.1556 246.71);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-drop-shadow-color: color-mix(in oklab, var(--color-accent) var(--tw-drop-shadow-alpha), transparent);
+    }
+    --tw-drop-shadow: var(--tw-drop-shadow-size);
+  }
+  .hover\:bg-secondary\/50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(0.85 0.1733 93.56) 50%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
+  .md\:max-h-\[128px\] {
+    @media (width >= 48rem) {
+      max-height: 128px;
+    }
+  }
+  .md\:max-h-fit {
+    @media (width >= 48rem) {
+      max-height: fit-content;
+    }
+  }
+  .md\:min-h-fit {
+    @media (width >= 48rem) {
+      min-height: fit-content;
+    }
+  }
+  .md\:max-w-\[128px\] {
+    @media (width >= 48rem) {
+      max-width: 128px;
+    }
+  }
+  .md\:max-w-fit {
+    @media (width >= 48rem) {
+      max-width: fit-content;
+    }
+  }
+  .md\:min-w-fit {
+    @media (width >= 48rem) {
+      min-width: fit-content;
+    }
+  }
+  .md\:space-y-4 {
+    @media (width >= 48rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-y-reverse: 0;
+        margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+        margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+      }
+    }
+  }
+  .md\:p-4 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+  .md\:text-2xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .md\:text-3xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .md\:text-xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -1,85 +1,18 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
-import HelloWorld from './components/HelloWorld.vue'
 </script>

 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <nav>
+    <RouterLink to="/">
+      <div
+        class="flex w-full p-2 font-mono text-lg md:p-4 md:text-2xl bg-secondary ring-2 ring-secondary/80 h-fit0 hover:bg-secondary/50"
+      >
+        <div class="w-full h-full text-center bg-primary text-white">
+          <p class="drop-shadow-accent drop-shadow-md">Home</p>
+        </div>
+      </div>
+    </RouterLink>
+  </nav>
+  <RouterView></RouterView>
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
-</style>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@ -1,35 +1,6 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+@import 'tailwindcss' source('../');
+@theme {
+  --color-primary: oklch(0.1 0 0);
+  --color-secondary: oklch(0.85 0.1733 93.56);
+  --color-accent: oklch(0.6 0.1556 246.71);
 }
--- a/src/components/BasePage.vue
+++ b/src/components/BasePage.vue
@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+  <body>
+    <div class="bg-black">
+      <div class="min-h-screen p-2 md:p-4">
+        <div
+          class="container max-w-3xl p-4 mx-auto space-y-2 font-mono text-white bg-primary min-w-xs md:space-y-4"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </div>
+  </body>
+</template>
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@ -0,0 +1,21 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+    <div class="bg-primary ring-2 ring-primary/80">
+      <div
+        class="flex flex-col w-full h-full p-2 space-x-4 rounded-sm space-2 drop-shadow-md drop-shadow-accent"
+      >
+        <h1 class="text-md md:text-xl">> ACCESS RESTRICTED</h1>
+      </div>
+    </div>
+  </div>
+  <a
+    class="flex w-full p-2 font-mono text-lg md:p-4 md:text-2xl bg-secondary ring-2 ring-secondary/80 h-fit0 hover:bg-secondary/50"
+    href="http://localhost:31337/login"
+  >
+    <div class="w-full h-full text-center bg-primary">
+      <p class="drop-shadow-accent drop-shadow-md">Login with Discord</p>
+    </div>
+  </a>
+</template>
--- a/src/components/LoginRedirect.vue
+++ b/src/components/LoginRedirect.vue
--- a/src/components/StandardHead.vue
+++ b/src/components/StandardHead.vue
@ -0,0 +1,10 @@
+<template>
+  <head>
+    <title><slot name="title"></slot></title>
+    <slot name="description"></slot>
+    <meta charset="UTF-8" />
+    <meta name="keywords" content="HTML, CSS, JavaScript" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/public/css/main.css" />
+  </head>
+</template>
--- a/src/components/UserInfo.vue
+++ b/src/components/UserInfo.vue
@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { user_store } from '@/ts/user_info'
+</script>
+
+<template>
+  <div class="bg-primary ring-2 ring-primary/80">
+    <div class="flex flex-row w-full h-full p-4 space-x-4 rounded-sm">
+      <div class="md:min-w-fit md:min-h-fit md:max-w-fit md:max-h-fit max-w-32 max-h-32">
+        <img
+          class="fixed z-1 max-w-[96px] max-h-[96px] md:max-w-[128px] md:max-h-[128px]"
+          :src="user_store.Avatar_Decoration"
+        />
+        <img
+          class="max-w-[96px] max-h-[96px] mask-clip-border rounded-full md:max-w-[128px] md:max-h-[128px] drop-shadow-accent drop-shadow-md border-8 border-accent"
+          :src="user_store.Avatar"
+        />
+      </div>
+      <div class="w-full m-auto drop-shadow-md drop-shadow-accent text-accent">
+        <p class="text-xl md:text-3xl">
+          {{ user_store.Global_Name }}
+        </p>
+        <a
+          class="ml-2 text-white text-md md:text-xl hover:text-gray-300"
+          :href="user_store.Id"
+          target="_blank"
+        >
+          @{{ user_store.Username }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
--- a/src/components/badrequest.html
+++ b/src/components/badrequest.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Bad Request!</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="Bad request trying to authenticate Discord oauth">
+    <meta name="keywords" content="HTML, CSS, JavaScript">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/public/css/style.css" />
+</head>
+
+<body>
+    <div class="bg-gray-200">
+        <div class="min-h-screen">
+            <div class="container max-w-3xl pt-4 pb-4 space-y-4">
+                <h1 class="text-left">Oops!</h1>
+                <p class="text-lg">There was some problem with the authentication process...</p>
+                <p>{{ .message }}</p>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/src/components/infoblock.html
+++ b/src/components/infoblock.html
--- a/src/components/internalservererror.html
+++ b/src/components/internalservererror.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Internal Server Error!</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="Bad request trying to authenticate Discord oauth">
+    <meta name="keywords" content="HTML, CSS, JavaScript">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/public/css/style.css" />
+</head>
+
+<body>
+    <div class="bg-gray-200">
+        <div class="min-h-screen">
+            <div class="container max-w-3xl pt-4 pb-4 space-y-4">
+                <h1 class="text-left">Oops!</h1>
+                <p class="text-lg">We experienced some kind of server error...</p>
+                <p>{{ .message }}</p>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '@/views/HomeView.vue'
+import UserDashboard from '@/views/UserDashboard.vue'

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@ -10,12 +11,9 @@ const router = createRouter({
      component: HomeView,
    },
    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
+      path: '/dashboard',
+      name: 'user-dashboard',
+      component: UserDashboard,
    },
  ],
 })
--- a/src/ts/user_info.ts
+++ b/src/ts/user_info.ts
@ -0,0 +1,28 @@
+import { reactive } from 'vue'
+
+export const user_store = reactive({
+  Avatar_Decoration: '',
+  Avatar: '',
+  Id: '',
+  Global_Name: '',
+  Username: '',
+})
+
+export function update_info() {
+  fetch('http://localhost:31337/dashboard', {
+    credentials: 'include',
+  }).then((res) => {
+    res.json().then((userjson) => {
+      console.log(userjson)
+      user_store.Avatar_Decoration =
+        'https://cdn.discordapp.com/avatar-decoration-presets/' +
+        userjson.Avatar_Decoration_Data.Asset +
+        '.png'
+      user_store.Avatar =
+        'https://cdn.discordapp.com/avatars/' + userjson.Id + '/' + userjson.Avatar + '.png'
+      user_store.Id = 'https://discord.com/users/' + userjson.Id
+      user_store.Global_Name = userjson.Global_Name
+      user_store.Username = userjson.Username
+    })
+  })
+}
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -1,9 +1,12 @@
 <script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
+import BasePage from '@/components/BasePage.vue'
+import HomePage from '@/components/HomePage.vue'
 </script>

 <template>
-  <main>
-    <TheWelcome />
-  </main>
+  <BasePage>
+    <template #content>
+      <HomePage></HomePage>
+    </template>
+  </BasePage>
 </template>
--- a/src/views/UserDashboard.vue
+++ b/src/views/UserDashboard.vue
@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import UserInfo from '@/components/UserInfo.vue'
+import { onMounted } from 'vue'
+import { update_info } from '@/ts/user_info'
+
+onMounted(update_info)
+</script>
+
+<template>
+  <div class="bg-black">
+    <div class="min-h-screen p-2 md:p-4">
+      <div
+        class="container max-w-3xl p-4 mx-auto space-y-2 font-mono text-white bg-primary min-w-xs md:space-y-4"
+      >
+        <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+          <div class="bg-primary ring-2 ring-primary/80">
+            <div
+              class="flex flex-col w-full h-full p-2 space-x-4 rounded-sm space-2 drop-shadow-md drop-shadow-accent"
+            >
+              <h1 class="text-md md:text-xl">> USER AUTHENTICATED</h1>
+            </div>
+          </div>
+        </div>
+        <div class="p-2 bg-secondary md:p-4 ring-2 ring-secondary/80">
+          <UserInfo></UserInfo>
+        </div>
+        <a
+          class="flex w-full p-2 font-mono text-lg md:p-4 md:text-2xl bg-secondary ring-2 ring-secondary/80 h-fit0 hover:bg-secondary/50"
+          href="logout"
+        >
+          <div class="w-full h-full text-center bg-primary">
+            <p class="drop-shadow-accent drop-shadow-md">Logout</p>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
--- a/tailwindcss.config.js
+++ b/tailwindcss.config.js
--- a/vite.config.ts
+++ b/vite.config.ts
@ -4,17 +4,18 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import tailwindcss from '@tailwindcss/vite'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueJsx(),
-    vueDevTools(),
-  ],
+  server: {
+    host: '0.0.0.0',
+    port: 15995,
+  },
+  plugins: [vue(), vueJsx(), vueDevTools(), tailwindcss()],
  resolve: {
    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
 })