remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Polish home, register, and login pages
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m49s
Details

Browse Source 
- Add pixel font to headings across all pages
- Improve stats icons (online-friends.png, friends.png)
- Fix features icons (star.gif → navigation/me.png)
- Replace top bar logo with lighthouse.png
- Add read-more arrow overlay on news cards
- Add Nitro client CTA section
- Add Discord link in top bar
- Add view-all link to online users section
- Add Reveal scroll animations to register/login
- Add Habbo gradient headers to register/login sidebars
- Add gradient headers to register/login form boxes
- Switch start script to standalone server
- Add postbuild script to copy static files
This commit is contained in:
openhands committed 2026-07-23 18:17:16 +02:00
1 parent a82cf7d2a1
commit 83356b9a9c
4 files changed
+235 -155
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+2 -1
View File
@@ -9,7 +9,8 @@
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "postbuild": "mkdir -p .next/standalone/.next/static && cp -r .next/static/* .next/standalone/.next/static/ 2>/dev/null; true",
"start": "node .next/standalone/server.js",
"prisma:generate": "prisma generate", "prisma:generate": "prisma generate",
"typecheck": "tsc --noEmit --incremental false", "typecheck": "tsc --noEmit --incremental false",
"biome:check": "biome check --write .", "biome:check": "biome check --write .",
src/app/(site)/login/page.tsx
+88 -75
View File
@@ -11,17 +11,19 @@ import { resolveHotelName } from "@/lib/hotel-name";
import { siteSettings } from "@/lib/services/site-settings"; import { siteSettings } from "@/lib/services/site-settings";
import { ThemeSwitcher } from "@/components/theme-switcher"; import { ThemeSwitcher } from "@/components/theme-switcher";
import { LanguageSwitcher } from "@/components/language-switcher"; import { LanguageSwitcher } from "@/components/language-switcher";
import { Reveal } from "@/components/motion-reveal";
export default async function LoginPage() { export default async function LoginPage() {
const t = await getTranslations("pages.login"); const t = await getTranslations("pages.login");
const th = await getTranslations("header"); const th = await getTranslations("header");
const [hotelName, imagerRaw, cfg] = await Promise.all([ const [hotelName, imagerRaw, cfg, discordUrl] = await Promise.all([
resolveHotelName(), resolveHotelName(),
siteSettings.get( siteSettings.get(
"habbo_imaging_url", "habbo_imaging_url",
"https://www.habbo.com/habbo-imaging/avatarimage", "https://www.habbo.com/habbo-imaging/avatarimage",
), ),
captchaConfig(), captchaConfig(),
siteSettings.get("radio_social_discord", ""),
]); ]);
const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage"; const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
const nonce = (await headers()).get("x-nonce") ?? undefined; const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -47,31 +49,41 @@ export default async function LoginPage() {
]); ]);
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-10 pb-14">
<div className="relative"> {/* ── Top Bar ── */}
<div <Reveal>
className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]" <div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
style={{ background: "var(--color-primary)" }} background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
/> backdropFilter: "blur(14px)",
<div WebkitBackdropFilter: "blur(14px)",
className="relative flex items-center justify-between rounded-2xl border px-5 py-3" borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
style={{ }}>
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)", <div className="flex items-center gap-3">
backdropFilter: "blur(12px)", <Image
WebkitBackdropFilter: "blur(12px)", src="/assets/images/icons/lighthouse.png"
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", alt={hotelName}
}} width={28}
> height={28}
<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}> className="shrink-0"
{hotelName} unoptimized
</span> />
<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
{hotelName}
</span>
</div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{discordUrl && (
<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
</Link>
)}
<LanguageSwitcher /> <LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} /> <div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher /> <ThemeSwitcher />
</div> </div>
</div> </div>
</div> </Reveal>
<Reveal>
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
{/* Left panel */} {/* Left panel */}
<div className="lg:w-80 shrink-0 space-y-4"> <div className="lg:w-80 shrink-0 space-y-4">
@@ -114,7 +126,7 @@ export default async function LoginPage() {
</div> </div>
<h1 <h1
className="text-xl font-black" className="text-xl font-black"
style={{ color: "var(--color-text-readable)" }} style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
> >
{t("welcomeBack")} {t("welcomeBack")}
</h1> </h1>
@@ -129,21 +141,21 @@ export default async function LoginPage() {
{recentUsers.length > 0 && ( {recentUsers.length > 0 && (
<div <div
className="rounded-2xl border p-4" className="overflow-hidden rounded-xl border"
style={{ style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
> >
<h3 <div
className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2" className="flex items-center gap-2.5 px-4 py-3"
style={{ color: "var(--color-text-muted)" }} style={{
background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
}}
> >
<span className="w-2 h-2 rounded-full bg-green-500" /> <Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
{th("online", { count: online, hotel: "" }).trim()} <h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
</h3> {th("online", { count: online, hotel: "" }).trim()}
</h3>
</div>
<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
<div className="grid grid-cols-4 gap-1.5"> <div className="grid grid-cols-4 gap-1.5">
{recentUsers.map((u) => ( {recentUsers.map((u) => (
<div <div
@@ -170,25 +182,27 @@ export default async function LoginPage() {
</div> </div>
))} ))}
</div> </div>
</div>
</div> </div>
)} )}
{latestUsers.length > 0 && ( {latestUsers.length > 0 && (
<div <div
className="rounded-2xl border p-4" className="overflow-hidden rounded-xl border"
style={{ style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
> >
<h3 <div
className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2" className="flex items-center gap-2.5 px-4 py-3"
style={{ color: "var(--color-text-muted)" }} style={{
background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
}}
> >
✨ Newest citizens <Image src="/assets/images/icons/friends.png" alt="" width={18} height={18} unoptimized />
</h3> <h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
Newest citizens
</h3>
</div>
<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
<div className="grid grid-cols-4 gap-1.5"> <div className="grid grid-cols-4 gap-1.5">
{latestUsers.map((u) => ( {latestUsers.map((u) => (
<div <div
@@ -215,6 +229,7 @@ export default async function LoginPage() {
</div> </div>
))} ))}
</div> </div>
</div>
</div> </div>
)} )}
@@ -232,40 +247,38 @@ export default async function LoginPage() {
{/* Right: form */} {/* Right: form */}
<div className="flex-1"> <div className="flex-1">
<div <div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
className="rounded-2xl border p-6" <div
style={{ className="flex items-center gap-2.5 px-4 py-3"
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)", style={{
backdropFilter: "blur(8px)", background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
WebkitBackdropFilter: "blur(8px)", }}
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", >
}} <Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
> <h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
<div className="mb-6">
<h2
className="text-2xl font-black tracking-tight"
style={{ color: "var(--color-text-readable)" }}
>
{t("title")} {t("title")}
</h2> </h2>
<p
className="text-sm mt-0.5"
style={{ color: "var(--color-text-muted)" }}
>
{t("subtitle")}
</p>
</div> </div>
<LoginForm <div className="p-6" style={{ backgroundColor: "var(--color-surface)" }}>
captcha={{ <p
provider: cfg.provider, className="text-sm mb-6"
siteKey: cfg.siteKey || undefined, style={{ color: "var(--color-text-muted)" }}
field: cfg.field || undefined, >
}} {t("subtitle")}
nonce={nonce} </p>
/> <LoginForm
</div> captcha={{
provider: cfg.provider,
siteKey: cfg.siteKey || undefined,
field: cfg.field || undefined,
}}
nonce={nonce}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</Reveal>
</div>
); );
} }
src/app/(site)/page.tsx
+69 -16
View File
@@ -57,7 +57,9 @@ async function getHotelData() {
.catch(() => []), .catch(() => []),
]); ]);
return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers }; const discordUrl = await siteSettings.get("radio_social_discord", "");
return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl };
} }
export default async function Home() { export default async function Home() {
@@ -66,7 +68,7 @@ export default async function Home() {
const tp = await getTranslations("pages.home"); const tp = await getTranslations("pages.home");
const th = await getTranslations("header"); const th = await getTranslations("header");
const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers } = await getHotelData(); const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl } = await getHotelData();
const captcha = await captchaConfig(); const captcha = await captchaConfig();
const nonce = (await headers()).get("x-nonce") ?? undefined; const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -84,7 +86,7 @@ export default async function Home() {
}}> }}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Image <Image
src="/assets/images/icons/navigation/home.png" src="/assets/images/icons/lighthouse.png"
alt={hotelName} alt={hotelName}
width={28} width={28}
height={28} height={28}
@@ -96,6 +98,11 @@ export default async function Home() {
</span> </span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{discordUrl && (
<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
</Link>
)}
<LanguageSwitcher /> <LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} /> <div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher /> <ThemeSwitcher />
@@ -137,7 +144,7 @@ export default async function Home() {
</div> </div>
<h1 <h1
className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3" className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
style={{ color: "var(--color-text-readable)" }} style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
> >
{tp("welcome", { hotelName })} {tp("welcome", { hotelName })}
</h1> </h1>
@@ -196,8 +203,8 @@ export default async function Home() {
<Reveal> <Reveal>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
{[ {[
{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/navigation/home.png" }, { value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/navigation/me.png" }, { value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" }, { value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
].map((s) => ( ].map((s) => (
<div <div
@@ -264,7 +271,7 @@ export default async function Home() {
<div className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}> <div className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
<Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized /> <Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized />
</div> </div>
<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white text-shadow" style={{ marginLeft: "18px" }}> <span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-pixel)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
{tp("register")} {tp("register")}
</span> </span>
</Link> </Link>
@@ -331,7 +338,7 @@ export default async function Home() {
<Link <Link
key={a.slug} key={a.slug}
href={`/news/${a.slug}`} href={`/news/${a.slug}`}
className="group relative w-full overflow-hidden rounded-lg transition-all duration-200" className="group relative w-full overflow-hidden rounded-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
style={{ style={{
height: "200px", height: "200px",
backgroundColor: "var(--color-background)", backgroundColor: "var(--color-background)",
@@ -346,6 +353,11 @@ export default async function Home() {
className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105" className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
unoptimized unoptimized
/> />
<div
className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300 opacity-0 group-hover:opacity-100 translate-x-1 group-hover:translate-x-0"
>
<span className="text-white text-sm font-bold">→</span>
</div>
<div <div
className="absolute left-0 w-full p-2.5" className="absolute left-0 w-full p-2.5"
style={{ style={{
@@ -390,14 +402,14 @@ export default async function Home() {
</div> </div>
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px p-4" style={{ background: "color-mix(in srgb, var(--color-text-muted) 6%, transparent)" }}> <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px p-4" style={{ background: "color-mix(in srgb, var(--color-text-muted) 6%, transparent)" }}>
{[ {[
{ img: "/assets/images/icons/star.gif", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") }, { img: "/assets/images/icons/navigation/me.png", title: tp("featuresAvatar"), desc: tp("featuresAvatarDesc") },
{ img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") }, { img: "/assets/images/icons/catalog.png", title: tp("featuresFurniture"), desc: tp("featuresFurnitureDesc") },
{ img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") }, { img: "/assets/images/icons/navigation/community.png", title: tp("featuresCommunity"), desc: tp("featuresCommunityDesc") },
{ img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") }, { img: "/assets/images/icons/navigation/bb.png", title: tp("featuresGames"), desc: tp("featuresGamesDesc") },
].map((f) => ( ].map((f) => (
<div <div
key={f.title} key={f.title}
className="rounded-lg p-4 transition-all duration-200 hover:-translate-y-0.5" className="rounded-lg p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
style={{ background: "var(--color-surface)" }} style={{ background: "var(--color-surface)" }}
> >
<div <div
@@ -418,20 +430,61 @@ export default async function Home() {
</div> </div>
</Reveal> </Reveal>
{/* ── Client / Play ── */}
<Reveal>
<div className="relative overflow-hidden rounded-xl border" style={{
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 1%, var(--color-surface)))",
}}>
<div className="flex flex-col md:flex-row items-center gap-6 px-6 py-7">
<div className="shrink-0">
<div className="w-14 h-14 rounded-2xl flex items-center justify-center" style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}>
<Image src="/assets/images/icons/navigation/shop.png" alt="" width={28} height={28} unoptimized />
</div>
</div>
<div className="flex-1 text-center md:text-left">
<h3 className="text-lg font-extrabold mb-0.5" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
{th("nitroClient")}
</h3>
<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
{tp("welcomeBody")}
</p>
</div>
<Link
href="/client"
className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0"
style={{
background: "var(--color-primary)",
color: "var(--color-primary-foreground)",
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
}}
>
<Image src="/assets/images/EnterHubbly.png" alt="" width={18} height={18} unoptimized />
{th("nitroClient")}
</Link>
</div>
</div>
</Reveal>
{/* ── Online users ── */} {/* ── Online users ── */}
{recentUsers.length > 0 && ( {recentUsers.length > 0 && (
<Reveal> <Reveal>
<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}> <div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
<div <div
className="flex items-center gap-2.5 px-4 py-3" className="flex items-center justify-between px-4 py-3"
style={{ style={{
background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)", background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
}} }}
> >
<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized /> <div className="flex items-center gap-2.5">
<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}> <Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
{tp("recentUsers")} <h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
</h3> {tp("recentUsers")}
</h3>
</div>
<Link href="/community" className="text-xs font-bold text-white/80 hover:text-white hover:underline">
{tp("allNews")}
</Link>
</div> </div>
<div className="p-4"> <div className="p-4">
<div className="flex flex-wrap justify-center gap-2"> <div className="flex flex-wrap justify-center gap-2">
@@ -469,7 +522,7 @@ export default async function Home() {
borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
}} }}
> >
<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)" }}> <h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
{tp("joinNow", { hotelName })} {tp("joinNow", { hotelName })}
</h2> </h2>
<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}> <p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
src/app/(site)/register/page.tsx
+76 -63
View File
@@ -11,17 +11,19 @@ import { resolveHotelName } from "@/lib/hotel-name";
import { siteSettings } from "@/lib/services/site-settings"; import { siteSettings } from "@/lib/services/site-settings";
import { ThemeSwitcher } from "@/components/theme-switcher"; import { ThemeSwitcher } from "@/components/theme-switcher";
import { LanguageSwitcher } from "@/components/language-switcher"; import { LanguageSwitcher } from "@/components/language-switcher";
import { Reveal } from "@/components/motion-reveal";
export default async function RegisterPage() { export default async function RegisterPage() {
const th = await getTranslations("header"); const th = await getTranslations("header");
const tpr = await getTranslations("pages.register"); const tpr = await getTranslations("pages.register");
const [hotelName, imagerRaw, cfg] = await Promise.all([ const [hotelName, imagerRaw, cfg, discordUrl] = await Promise.all([
resolveHotelName(), resolveHotelName(),
siteSettings.get( siteSettings.get(
"habbo_imaging_url", "habbo_imaging_url",
"https://www.habbo.com/habbo-imaging/avatarimage", "https://www.habbo.com/habbo-imaging/avatarimage",
), ),
captchaConfig(), captchaConfig(),
siteSettings.get("radio_social_discord", ""),
]); ]);
const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage"; const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
const nonce = (await headers()).get("x-nonce") ?? undefined; const nonce = (await headers()).get("x-nonce") ?? undefined;
@@ -47,31 +49,41 @@ export default async function RegisterPage() {
]); ]);
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-10 pb-14">
<div className="relative"> {/* ── Top Bar ── */}
<div <Reveal>
className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]" <div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
style={{ background: "var(--color-primary)" }} background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
/> backdropFilter: "blur(14px)",
<div WebkitBackdropFilter: "blur(14px)",
className="relative flex items-center justify-between rounded-2xl border px-5 py-3" borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
style={{ }}>
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)", <div className="flex items-center gap-3">
backdropFilter: "blur(12px)", <Image
WebkitBackdropFilter: "blur(12px)", src="/assets/images/icons/lighthouse.png"
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", alt={hotelName}
}} width={28}
> height={28}
<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}> className="shrink-0"
{hotelName} unoptimized
</span> />
<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
{hotelName}
</span>
</div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{discordUrl && (
<Link href={discordUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded-lg transition-all duration-200 hover:scale-110" style={{ background: "color-mix(in srgb, #5865F2 12%, transparent)" }}>
<Image src="/assets/images/icons/discord.png" alt="Discord" width={18} height={18} unoptimized />
</Link>
)}
<LanguageSwitcher /> <LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} /> <div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher /> <ThemeSwitcher />
</div> </div>
</div> </div>
</div> </Reveal>
<Reveal>
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
{/* Left panel */} {/* Left panel */}
<div className="lg:w-80 shrink-0 space-y-4"> <div className="lg:w-80 shrink-0 space-y-4">
@@ -113,7 +125,7 @@ export default async function RegisterPage() {
</div> </div>
<h1 <h1
className="text-xl font-black" className="text-xl font-black"
style={{ color: "var(--color-text-readable)" }} style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
> >
{tpr("title")} — {hotelName} {tpr("title")} — {hotelName}
</h1> </h1>
@@ -128,21 +140,21 @@ export default async function RegisterPage() {
{recentUsers.length > 0 && ( {recentUsers.length > 0 && (
<div <div
className="rounded-2xl border p-4" className="overflow-hidden rounded-xl border"
style={{ style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
> >
<h3 <div
className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2" className="flex items-center gap-2.5 px-4 py-3"
style={{ color: "var(--color-text-muted)" }} style={{
background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
}}
> >
<span className="w-2 h-2 rounded-full bg-green-500" /> <Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
{tpr("whoIsOnline")} <h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
</h3> {tpr("whoIsOnline")}
</h3>
</div>
<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
<div className="grid grid-cols-4 gap-1.5"> <div className="grid grid-cols-4 gap-1.5">
{recentUsers.map((u) => ( {recentUsers.map((u) => (
<div <div
@@ -174,25 +186,27 @@ export default async function RegisterPage() {
</div> </div>
))} ))}
</div> </div>
</div>
</div> </div>
)} )}
{latestUsers.length > 0 && ( {latestUsers.length > 0 && (
<div <div
className="rounded-2xl border p-4" className="overflow-hidden rounded-xl border"
style={{ style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
> >
<h3 <div
className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2" className="flex items-center gap-2.5 px-4 py-3"
style={{ color: "var(--color-text-muted)" }} style={{
background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
}}
> >
✨ Newest citizens <Image src="/assets/images/icons/friends.png" alt="" width={18} height={18} unoptimized />
</h3> <h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
Newest citizens
</h3>
</div>
<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
<div className="grid grid-cols-4 gap-1.5"> <div className="grid grid-cols-4 gap-1.5">
{latestUsers.map((u) => ( {latestUsers.map((u) => (
<div <div
@@ -219,6 +233,7 @@ export default async function RegisterPage() {
</div> </div>
))} ))}
</div> </div>
</div>
</div> </div>
)} )}
@@ -241,29 +256,25 @@ export default async function RegisterPage() {
{/* Right: form */} {/* Right: form */}
<div className="flex-1"> <div className="flex-1">
<div <div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
className="rounded-2xl border p-6" <div
style={{ className="flex items-center gap-2.5 px-4 py-3"
background: "color-mix(in srgb, var(--color-surface) 70%, transparent)", style={{
backdropFilter: "blur(8px)", background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
WebkitBackdropFilter: "blur(8px)", }}
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
>
<div className="mb-6">
<h2
className="text-2xl font-black tracking-tight"
style={{ color: "var(--color-text-readable)" }}
> >
{tpr("title")} <Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
</h2> <h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
{tpr("title")}
</h2>
</div>
<div className="p-6" style={{ backgroundColor: "var(--color-surface)" }}>
<p <p
className="text-sm mt-0.5" className="text-sm mb-6"
style={{ color: "var(--color-text-muted)" }} style={{ color: "var(--color-text-muted)" }}
> >
{tpr("subtitle")} {tpr("subtitle")}
</p> </p>
</div>
<RegisterForm <RegisterForm
hotelName={hotelName} hotelName={hotelName}
captcha={{ captcha={{
@@ -274,7 +285,9 @@ export default async function RegisterPage() {
/> />
</div> </div>
</div> </div>
</div>
</div> </div>
</Reveal>
</div> </div>
); );
} }