Port AtomCMS atom theme faithfully (Tailwind v4 + real CSS/assets + shell)

Make the template match the atom theme, not just approximate it: - Add Tailwind v4 (+forms/typography plugins, postcss) and port the real atom CSS (global.css + atom app.css) into globals.css: nav-item underline, currency + navigation icon classes, site-bg, card-base/hover-lift, text utils — asset paths adapted to /assets. - Copy the real theme assets (backgrounds, icons/currency/navigation, profile, leaderboards) into public/assets. - Rebuild the shell 1:1 from the atom Blade: TopHeader (currency pills + user/admin dropdowns, auth-only), SiteHeader (header image + black/50 overlay, logo+online+Nitro client / guest Login+Create-account CTA), Navigation (white bar, nav-item + Community/Assistance dropdowns), Footer. ThemeVars injects the DB-driven CSS custom properties into :root like app.blade.php. Layout uses the atom body/site-bg + grid-cols-12 max-w-7xl content wrapper. Verified: tsc 0, next build exit 0; curl confirms the atom markup, compiled CSS references the assets, and background-light.jpg + currency/navigation icons all serve 200.
2026-06-28 14:50:09 +02:00
1 parent e668fa85ec
commit e19debb795
@@ -0,0 +1,94 @@
+import Link from "next/link";
+import { auth } from "@/lib/auth";
+
+export async function Navigation() {
+  const session = await auth();
+  const isStaff = (session?.user?.rank ?? 0) >= 7;
+
+  return (
+    <nav className="relative shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
+      <div className="max-w-7xl min-h-[60px] px-4 flex items-center gap-x-6 md:gap-x-8 mx-auto flex-wrap">
+        <Link href="/" className="nav-item">
+          <i className="navigation-icon home mr-1 hidden lg:inline-flex" />
+          Home
+        </Link>
+
+        <details className="relative">
+          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+            <i className="navigation-icon community mr-1 hidden lg:inline-flex" />
+            Community
+          </summary>
+          <div
+            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
+            style={{ backgroundColor: "var(--color-dropdown)" }}
+          >
+            <Link href="/news" className="dropdown-item">
+              Articles
+            </Link>
+            <Link href="/photos" className="dropdown-item">
+              Photos
+            </Link>
+            <Link href="/staff" className="dropdown-item">
+              Staff
+            </Link>
+            <Link href="/rankings" className="dropdown-item">
+              Rankings
+            </Link>
+            <Link href="/guilds" className="dropdown-item">
+              Guilds
+            </Link>
+          </div>
+        </details>
+
+        <Link href="/leaderboard" className="nav-item">
+          <i className="navigation-icon leaderboards mr-1 hidden lg:inline-flex" />
+          Leaderboards
+        </Link>
+        <Link href="/rares" className="nav-item">
+          Rare values
+        </Link>
+        <Link href="/shop" className="nav-item">
+          <i className="navigation-icon shop mr-1 hidden lg:inline-flex" />
+          Shop
+        </Link>
+        <Link href="/marketplace" className="nav-item">
+          Market
+        </Link>
+
+        <details className="relative">
+          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+            <i className="navigation-icon rules mr-1 hidden lg:inline-flex" />
+            Assistance
+          </summary>
+          <div
+            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
+            style={{ backgroundColor: "var(--color-dropdown)" }}
+          >
+            <Link href="/help" className="dropdown-item">
+              Help center
+            </Link>
+            {session?.user ? (
+              <Link href="/help/tickets" className="dropdown-item">
+                My tickets
+              </Link>
+            ) : null}
+            <Link href="/badges" className="dropdown-item">
+              Badges
+            </Link>
+          </div>
+        </details>
+
+        {session?.user ? (
+          <Link href="/friends" className="nav-item">
+            Friends
+          </Link>
+        ) : null}
+        {isStaff ? (
+          <Link href="/admin" className="nav-item">
+            Admin
+          </Link>
+        ) : null}
+      </div>
+    </nav>
+  );
+}
@@ -5,13 +5,12 @@ export async function SiteFooter() {
  const year = new Date().getFullYear();

  return (
-    <footer className="site-footer">
-      <div className="inner">
-        <span>
-          © {year} {hotelName}
-        </span>
-        <span className="spacer" />
-        <span className="muted">AtomCMS → Next.js conversion</span>
+    <footer
+      className="mt-auto flex h-14 w-full flex-col items-center justify-center text-sm md:flex-row md:px-8"
+      style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text-muted)" }}
+    >
+      <div className="md:font-semibold text-[12px] md:text-[14px]">
+        © {year} - {hotelName} is a not for profit educational project
      </div>
    </footer>
  );
@@ -1,136 +1,114 @@
 import Link from "next/link";
-import { auth, signOut } from "@/lib/auth";
+import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";

 export async function SiteHeader() {
-  const [hotelName, session] = await Promise.all([
-    siteSettings.get("hotel_name", "Atom"),
+  const [session, hotelName, header, logo] = await Promise.all([
    auth(),
+    siteSettings.get("hotel_name", "Atom"),
+    siteSettings.get("cms_header", "/assets/images/background.png"),
+    siteSettings.get("cms_logo", ""),
  ]);

-  let credits = 0;
-  let duckets = 0;
-  let diamonds = 0;
-  if (session?.user?.id) {
-    try {
-      const id = Number(session.user.id);
-      const [user, currencies] = await Promise.all([
-        prisma.user.findUnique({ where: { id }, select: { credits: true } }),
-        prisma.usersCurrency.findMany({ where: { userId: id } }),
-      ]);
-      credits = user?.credits ?? 0;
-      for (const c of currencies) {
-        if (c.type === 0) duckets = c.amount;
-        if (c.type === 5) diamonds = c.amount;
-      }
-    } catch {
-      // DB unavailable — render the header without live balances.
-    }
+  let online = 0;
+  try {
+    online = await prisma.user.count({ where: { online: "1" } });
+  } catch {
+    online = 0;
  }

-  const isStaff = (session?.user?.rank ?? 0) >= 7;
-
  return (
-    <header className="site-header">
-      <div className="bar">
-        <Link href="/" className="brand">
-          <span className="dot" />
-          {hotelName}
-        </Link>
-        <nav className="nav">
-          <Link className="nav-item" href="/">
-            Home
-          </Link>
-          <Link className="nav-item" href="/news">
-            News
-          </Link>
-          <Link className="nav-item" href="/shop">
-            Shop
-          </Link>
-          <Link className="nav-item" href="/marketplace">
-            Market
-          </Link>
-          <Link className="nav-item" href="/community">
-            Community
-          </Link>
-          <Link className="nav-item" href="/photos">
-            Photos
-          </Link>
-          <Link className="nav-item" href="/leaderboard">
-            Leaderboard
-          </Link>
-          <Link className="nav-item" href="/guilds">
-            Guilds
-          </Link>
-          <Link className="nav-item" href="/rares">
-            Rares
-          </Link>
-          <Link className="nav-item" href="/help">
-            Help
-          </Link>
-          {session?.user ? (
-            <Link className="nav-item" href="/client">
-              Hotel
+    <div
+      className="relative flex min-h-[13rem] h-52 w-full items-center justify-center"
+      style={{ background: `url(${header})`, backgroundSize: "cover", backgroundPosition: "center" }}
+    >
+      <div className="absolute h-full w-full bg-black/50" />
+
+      {session?.user ? (
+        <div className="relative flex h-full w-full max-w-7xl items-center justify-center pr-10 md:justify-between">
+          <div className="flex items-center gap-x-4">
+            <Link href="/" className="ml-7">
+              {logo ? (
+                // biome-ignore lint/performance/noImgElement: external/CDN logo
+                <img
+                  className="transition duration-300 ease-in-out hover:scale-105"
+                  src={logo}
+                  alt="Hotel logo"
+                />
+              ) : (
+                <span className="text-3xl font-extrabold text-white text-shadow">{hotelName}</span>
+              )}
            </Link>
-          ) : null}
-          {isStaff ? (
-            <Link className="nav-item" href="/admin">
-              Admin
-            </Link>
-          ) : null}
-        </nav>
-        <span className="spacer" />
-        {session?.user ? (
-          <>
-            <div className="currencies">
-              <span className="currency">
-                <span className="coin credits">cr</span>
-                {credits}
-              </span>
-              <span className="currency">
-                <span className="coin duckets">d</span>
-                {duckets}
-              </span>
-              <span className="currency">
-                <span className="coin diamonds">◆</span>
-                {diamonds}
+
+            <div
+              className="hidden md:flex items-center px-4 rounded-md relative h-[50px]"
+              style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
+            >
+              <div
+                className="absolute -left-1 h-6 w-6 rotate-45"
+                style={{ backgroundColor: "var(--color-surface)" }}
+              />
+              <span className="relative">
+                {online} {hotelName} online
              </span>
            </div>
-            <Link className="nav-item" href="/friends">
-              Friends
-            </Link>
-            <Link className="nav-item" href="/redeem">
-              Redeem
-            </Link>
-            <Link className="nav-item" href="/settings">
-              Settings
-            </Link>
-            <Link className="nav-item" href={`/u/${session.user.name}`}>
-              {session.user.name}
-            </Link>
-            <form
-              action={async () => {
-                "use server";
-                await signOut({ redirectTo: "/" });
-              }}
-            >
-              <button type="submit" className="btn btn-outline">
-                Logout
+          </div>
+
+          <div className="flex flex-col gap-y-2 md:flex-row md:gap-x-4">
+            <Link href="/client">
+              <button
+                type="button"
+                className="font-bold py-3 px-6 rounded-xl shadow-xl border-2 transition-all duration-300 hover:scale-110 hover:shadow-2xl text-base tracking-wide"
+                style={{
+                  backgroundColor: "var(--button-color)",
+                  color: "var(--button-text-color)",
+                  borderColor: "rgba(255,255,255,0.3)",
+                }}
+              >
+                Nitro client
              </button>
-            </form>
-          </>
-        ) : (
-          <>
-            <Link className="nav-item" href="/register">
-              Register
            </Link>
-            <Link className="btn btn-outline" href="/login">
-              Login
-            </Link>
-          </>
-        )}
-      </div>
-    </header>
+          </div>
+        </div>
+      ) : (
+        <div className="relative flex justify-center px-4">
+          <div
+            className="font-semibold flex flex-col items-center md:w-[600px]"
+            style={{ color: "#ffffff", textShadow: "0 1px 4px rgba(0,0,0,0.7)" }}
+          >
+            <p className="hidden text-center text-xl md:block">
+              An online virtual world where you can create your own avatar, make friends, chat,
+              create rooms and much more!
+            </p>
+            <div className="flex flex-col items-center justify-center gap-x-6 gap-y-4 md:mt-6 md:flex-row md:gap-y-0">
+              <Link href="/login">
+                <button
+                  type="button"
+                  className="rounded-full border-2 px-8 py-2 uppercase transition duration-200 ease-in-out"
+                  style={{
+                    borderColor: "var(--color-primary)",
+                    backgroundColor: "var(--color-primary)",
+                    color: "var(--button-text-color)",
+                  }}
+                >
+                  Login
+                </button>
+              </Link>
+              <p className="text-sm uppercase">Or</p>
+              <Link href="/register">
+                <button
+                  type="button"
+                  className="uppercase px-8 py-2.5 rounded-full transition ease-in-out duration-200"
+                  style={{ backgroundColor: "var(--color-accent)", color: "#ffffff" }}
+                >
+                  Create an account
+                </button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
  );
 }
@@ -0,0 +1,58 @@
+import { siteSettings } from "@/lib/services/site-settings";
+
+// Injects the DB-driven CSS custom properties into :root, exactly like
+// AtomCMS's app.blade.php. Falls back to the atom defaults when no DB.
+export async function ThemeVars() {
+  const g = (k: string, d: string) => siteSettings.get(k, d);
+  const [
+    primary,
+    background,
+    surface,
+    dropdown,
+    navbar,
+    navbarText,
+    text,
+    textMuted,
+    accent,
+    buttonColor,
+    buttonText,
+    borderColor,
+    borderRadius,
+  ] = await Promise.all([
+    g("color_primary", "#f59e0b"),
+    g("color_background", "#f8fafc"),
+    g("color_surface", "#ffffff"),
+    g("color_dropdown", "#ffffff"),
+    g("color_navbar", "#ffffff"),
+    g("color_navbar_text", "#1e293b"),
+    g("color_text", "#0f172a"),
+    g("color_text_muted", "#64748b"),
+    g("color_accent", "#10b981"),
+    g("button_primary_color", "#f59e0b"),
+    g("button_text_color", "#1e293b"),
+    g("border_color", "#eeb425"),
+    g("border_radius", "12"),
+  ]);
+
+  // Only hex/keyword color values are admin-controlled — sanitize defensively.
+  const safe = (v: string | null, d: string) => (v && /^[#a-zA-Z0-9(),.\s%-]+$/.test(v) ? v : d);
+
+  const css = `:root{
+--color-primary:${safe(primary, "#f59e0b")};
+--color-background:${safe(background, "#f8fafc")};
+--color-surface:${safe(surface, "#ffffff")};
+--color-dropdown:${safe(dropdown, "#ffffff")};
+--color-navbar:${safe(navbar, "#ffffff")};
+--color-navbar-text:${safe(navbarText, "#1e293b")};
+--color-text:${safe(text, "#0f172a")};
+--color-text-muted:${safe(textMuted, "#64748b")};
+--color-accent:${safe(accent, "#10b981")};
+--button-color:${safe(buttonColor, "#f59e0b")};
+--button-text-color:${safe(buttonText, "#1e293b")};
+--border-color:${safe(borderColor, "#eeb425")};
+--border-radius:${/^\d+$/.test(borderRadius ?? "") ? borderRadius : "12"}px;
+}`;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: server-built CSS from sanitized admin settings
+  return <style dangerouslySetInnerHTML={{ __html: css }} />;
+}
@@ -0,0 +1,128 @@
+import Link from "next/link";
+import { auth, signOut } from "@/lib/auth";
+import { avatarImageUrl } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+function Currency({ icon, amount, label }: { icon: string; amount: number; label: string }) {
+  return (
+    <div className="flex gap-x-3 sm:gap-x-2 items-center">
+      <div className={`h-[25px] w-[25px] rounded-full outline-offset-[3px] ${icon}`} />
+      <div style={{ color: "var(--color-text-muted)" }}>
+        <span className="font-semibold" style={{ color: "var(--color-text)" }}>
+          {amount.toLocaleString()}
+        </span>{" "}
+        <span>{label}</span>
+      </div>
+    </div>
+  );
+}
+
+export async function TopHeader() {
+  const session = await auth();
+  if (!session?.user?.id) return null;
+  const id = Number(session.user.id);
+
+  let credits = 0;
+  let duckets = 0;
+  let diamonds = 0;
+  let look = "";
+  try {
+    const [user, currencies] = await Promise.all([
+      prisma.user.findUnique({ where: { id }, select: { credits: true, look: true } }),
+      prisma.usersCurrency.findMany({ where: { userId: id } }),
+    ]);
+    credits = user?.credits ?? 0;
+    look = user?.look ?? "";
+    for (const c of currencies) {
+      if (c.type === 0) duckets = c.amount;
+      if (c.type === 5) diamonds = c.amount;
+    }
+  } catch {
+    // render without live balances
+  }
+
+  const imager =
+    (await siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage")) ??
+    "";
+  const avatar = avatarImageUrl(imager, look, { headOnly: true, direction: 2 });
+  const isStaff = (session.user.rank ?? 0) >= 7;
+
+  return (
+    <div style={{ backgroundColor: "var(--color-surface)" }}>
+      <div className="max-w-7xl min-h-[60px] px-4 flex items-center justify-between mx-auto">
+        <div className="flex gap-x-6">
+          <Currency icon="nav-credit-icon" amount={credits} label="Credits" />
+          <Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
+          <Currency icon="nav-diamond-icon" amount={diamonds} label="Diamonds" />
+        </div>
+
+        <div className="flex items-center gap-x-3">
+          {isStaff ? (
+            <details className="relative">
+              <summary
+                className="list-none cursor-pointer font-semibold [&::-webkit-details-marker]:hidden"
+                style={{ color: "var(--color-text)" }}
+              >
+                Administration
+              </summary>
+              <div
+                className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
+                style={{ backgroundColor: "var(--color-dropdown)" }}
+              >
+                <Link href="/admin" className="dropdown-item">
+                  Admin panel
+                </Link>
+                <Link href="/admin/commandocentrum" className="dropdown-item">
+                  Commandocentrum
+                </Link>
+                <Link href="/admin/logs" className="dropdown-item">
+                  Logs
+                </Link>
+              </div>
+            </details>
+          ) : null}
+
+          <details className="relative">
+            <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
+              {/* biome-ignore lint/performance/noImgElement: external imager */}
+              <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
+              <span className="-ml-2 font-semibold">{session.user.name}</span>
+            </summary>
+            <div
+              className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
+              style={{ backgroundColor: "var(--color-dropdown)" }}
+            >
+              <Link href={`/u/${session.user.name}`} className="dropdown-item">
+                My profile
+              </Link>
+              <Link href="/settings" className="dropdown-item">
+                User settings
+              </Link>
+              <Link href="/settings/2fa" className="dropdown-item">
+                Two-factor
+              </Link>
+              <form
+                action={async () => {
+                  "use server";
+                  await signOut({ redirectTo: "/" });
+                }}
+              >
+                <button
+                  type="submit"
+                  className="dropdown-item w-full text-center"
+                  style={{
+                    backgroundColor: "var(--button-danger-color)",
+                    color: "var(--button-danger-text-color)",
+                  }}
+                >
+                  Logout
+                </button>
+              </form>
+            </div>
+          </details>
+        </div>
+      </div>
+    </div>
+  );
+}