chore(web): init web project

2026-03-10 11:00:14 +08:00
parent 4fce1c6bdd
commit 4d43ebd21e
18 changed files with 355 additions and 4 deletions
--- a/apps/web/app/favicon.ico
+++ b/apps/web/app/favicon.ico
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -0,0 +1,91 @@
+@import "tailwindcss";
+@import "@heroui/styles";
+
+/*
+ * HeroUI Theme Customization
+ * Add this to your global.css after importing @heroui/styles
+ * Only includes base variables from variables.css
+ * @see https://v3.heroui.com/docs/react/getting-started/theming
+ */
+
+:root,
+.light,
+.default,
+[data-theme="light"],
+[data-theme="default"] {
+  /* Theme Colors (Light Mode) */
+  --accent: oklch(62.04% 0.1951 253.83);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(97.02% 0.0069 253.83);
+  --border: oklch(90.00% 0.0069 253.83);
+  --danger: oklch(65.32% 0.2360 25.74);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(94.00% 0.0069 253.83);
+  --default-foreground: oklch(21.03% 0.0059 253.83);
+  --field-background: oklch(100.00% 0.0034 253.83);
+  --field-foreground: oklch(21.03% 0.0069 253.83);
+  --field-placeholder: oklch(55.17% 0.0138 253.83);
+  --focus: oklch(62.04% 0.1951 253.83);
+  --foreground: oklch(21.03% 0.0069 253.83);
+  --muted: oklch(55.17% 0.0138 253.83);
+  --overlay: oklch(100.00% 0.0021 253.83);
+  --overlay-foreground: oklch(21.03% 0.0069 253.83);
+  --scrollbar: oklch(87.10% 0.0069 253.83);
+  --segment: oklch(100.00% 0.0069 253.83);
+  --segment-foreground: oklch(21.03% 0.0069 253.83);
+  --separator: oklch(92.00% 0.0069 253.83);
+  --success: oklch(73.29% 0.1962 150.81);
+  --success-foreground: oklch(21.03% 0.0059 150.81);
+  --surface: oklch(100.00% 0.0034 253.83);
+  --surface-foreground: oklch(21.03% 0.0069 253.83);
+  --surface-secondary: oklch(95.24% 0.0055 253.83);
+  --surface-secondary-foreground: oklch(21.03% 0.0069 253.83);
+  --surface-tertiary: oklch(93.73% 0.0055 253.83);
+  --surface-tertiary-foreground: oklch(21.03% 0.0069 253.83);
+  --warning: oklch(78.19% 0.1607 72.33);
+  --warning-foreground: oklch(21.03% 0.0059 72.33);
+
+  /* Border Radius */
+  --radius: 0.25rem;
+  --field-radius: 0.5rem;
+
+  /* Font Family */
+  /* Make sure to load Saira font in your app */
+  --font-sans: "Saira", sans-serif;
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  /* Theme Colors (Dark Mode) */
+  --accent: oklch(62.04% 0.1951 253.83);
+  --accent-foreground: oklch(99.11% 0 0);
+  --background: oklch(12.00% 0.0069 253.83);
+  --border: oklch(28.00% 0.0069 253.83);
+  --danger: oklch(59.40% 0.1994 24.63);
+  --danger-foreground: oklch(99.11% 0 0);
+  --default: oklch(27.40% 0.0069 253.83);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0138 253.83);
+  --field-foreground: oklch(99.11% 0.0069 253.83);
+  --field-placeholder: oklch(70.50% 0.0138 253.83);
+  --focus: oklch(62.04% 0.1951 253.83);
+  --foreground: oklch(99.11% 0.0069 253.83);
+  --muted: oklch(70.50% 0.0138 253.83);
+  --overlay: oklch(21.03% 0.0138 253.83);
+  --overlay-foreground: oklch(99.11% 0.0069 253.83);
+  --scrollbar: oklch(70.50% 0.0069 253.83);
+  --segment: oklch(39.64% 0.0069 253.83);
+  --segment-foreground: oklch(99.11% 0.0069 253.83);
+  --separator: oklch(25.00% 0.0069 253.83);
+  --success: oklch(73.29% 0.1962 150.81);
+  --success-foreground: oklch(21.03% 0.0059 150.81);
+  --surface: oklch(21.03% 0.0138 253.83);
+  --surface-foreground: oklch(99.11% 0.0069 253.83);
+  --surface-secondary: oklch(25.70% 0.0103 253.83);
+  --surface-secondary-foreground: oklch(99.11% 0.0069 253.83);
+  --surface-tertiary: oklch(27.21% 0.0103 253.83);
+  --surface-tertiary-foreground: oklch(99.11% 0.0069 253.83);
+  --warning: oklch(82.03% 0.1407 76.34);
+  --warning-foreground: oklch(21.03% 0.0059 76.34);
+}
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono, Noto_Sans, Saira } from "next/font/google";
+import "./globals.css";
+
+const fontSaira = Saira({
+  variable: "--font-saira",
+  subsets: ["latin"],
+})
+
+const fontNotoSans = Noto_Sans({
+  variable: "--font-noto-sans",
+  subsets: ["latin"],
+})
+
+const fontMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Helios EVCS",
+  description: "A modern EV charging station management system built with Next.js, Drizzle ORM, and OCPP.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${fontSaira.variable} ${fontNotoSans.variable} ${fontMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -0,0 +1,67 @@
+import { Button } from "@heroui/react";
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+          <Button>Hello</Button>
+        </div>
+      </main>
+    </div>
+  );
+}