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

Premium polish: enhanced toolbar, glass cards, Habbo bg panels, animations
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m48s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-22 19:30:54 +02:00
1 parent 7aec61d1a5
commit 782271a31b
3 files changed
+119 -49
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/(site)/login/page.tsx
+24 -12
View File
@@ -48,17 +48,29 @@ export default async function LoginPage() {
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div <div className="relative">
className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5" <div
style={{ className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)", style={{ background: "var(--color-primary)" }}
backdropFilter: "blur(8px)", />
WebkitBackdropFilter: "blur(8px)", <div
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
}} style={{
> background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
<LanguageSwitcher /> backdropFilter: "blur(12px)",
<ThemeSwitcher /> WebkitBackdropFilter: "blur(12px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
>
<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
{hotelName}
</span>
<div className="flex items-center gap-1">
<LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher />
</div>
</div>
</div> </div>
<div className="flex flex-col lg:flex-row gap-10"> <div className="flex flex-col lg:flex-row gap-10">
{/* Left panel */} {/* Left panel */}
@@ -73,7 +85,7 @@ export default async function LoginPage() {
<div <div
className="absolute inset-0" className="absolute inset-0"
style={{ style={{
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 50%, transparent) 100%)", background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
}} }}
/> />
<div className="relative"> <div className="relative">
src/app/(site)/page.tsx
+45 -18
View File
@@ -86,18 +86,39 @@ export default async function Home() {
return ( return (
<div className="flex flex-col gap-14 pb-14"> <div className="flex flex-col gap-14 pb-14">
<style>{`
@keyframes hero-glow {
0%, 100% { opacity: 0.08; transform: scale(1); }
50% { opacity: 0.15; transform: scale(1.05); }
}
.hero-glow {
animation: hero-glow 6s ease-in-out infinite;
}
`}</style>
{/* ── Toolbar ── */} {/* ── Toolbar ── */}
<div <div className="relative">
className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5" <div
style={{ className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)", style={{ background: "var(--color-primary)" }}
backdropFilter: "blur(8px)", />
WebkitBackdropFilter: "blur(8px)", <div
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
}} style={{
> background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
<LanguageSwitcher /> backdropFilter: "blur(12px)",
<ThemeSwitcher /> WebkitBackdropFilter: "blur(12px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
>
<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
{hotelName}
</span>
<div className="flex items-center gap-1">
<LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher />
</div>
</div>
</div> </div>
{/* ── 1. Hero ── */} {/* ── 1. Hero ── */}
<div <div
@@ -107,13 +128,19 @@ export default async function Home() {
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}} }}
> >
<div <div
className="absolute inset-0" className="absolute inset-0 hero-glow"
style={{ style={{
background: background: "radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--color-primary) 20%, transparent) 0%, transparent 60%)",
"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 20%, transparent) 100%)", }}
}} />
/> <div
className="absolute inset-0"
style={{
background:
"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 50%, color-mix(in srgb, var(--color-surface) 15%, transparent) 100%)",
}}
/>
<div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14"> <div className="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-14">
<div className="flex-1 text-center lg:text-left"> <div className="flex-1 text-center lg:text-left">
<div <div
src/app/(site)/register/page.tsx
+50 -19
View File
@@ -48,29 +48,47 @@ export default async function RegisterPage() {
return ( return (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<div <div className="relative">
className="flex items-center justify-end gap-2 rounded-2xl border px-4 py-2.5" <div
style={{ className="absolute -inset-6 rounded-full opacity-[0.06] blur-[40px]"
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)", style={{ background: "var(--color-primary)" }}
backdropFilter: "blur(8px)", />
WebkitBackdropFilter: "blur(8px)", <div
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)", className="relative flex items-center justify-between rounded-2xl border px-5 py-3"
}} style={{
> background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
<LanguageSwitcher /> backdropFilter: "blur(12px)",
<ThemeSwitcher /> WebkitBackdropFilter: "blur(12px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}}
>
<span className="text-xs font-bold uppercase tracking-[0.15em] opacity-40" style={{ color: "var(--color-text-muted)" }}>
{hotelName}
</span>
<div className="flex items-center gap-1">
<LanguageSwitcher />
<div className="w-px h-5 mx-1" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
<ThemeSwitcher />
</div>
</div>
</div> </div>
<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">
<div <div
className="rounded-2xl border p-6 text-center" className="relative overflow-hidden rounded-2xl border p-6 text-center"
style={{ style={{
borderColor: borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
"color-mix(in srgb, var(--color-primary) 20%, transparent)", background: `url(/assets/images/background.png) center/cover no-repeat`,
background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface))`,
}} }}
> >
<div
className="absolute inset-0"
style={{
background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
}}
/>
<div className="relative">
<Image <Image
src="/assets/images/FrankwithBag.gif" src="/assets/images/FrankwithBag.gif"
alt="Frank" alt="Frank"
@@ -106,20 +124,23 @@ export default async function RegisterPage() {
{th("tagline")} {th("tagline")}
</p> </p>
</div> </div>
</div>
{recentUsers.length > 0 && ( {recentUsers.length > 0 && (
<div <div
className="rounded-2xl border p-4" className="rounded-2xl border p-4"
style={{ style={{
background: "var(--color-surface)", background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
borderColor: backdropFilter: "blur(8px)",
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)", WebkitBackdropFilter: "blur(8px)",
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
}} }}
> >
<h3 <h3
className="text-xs font-bold uppercase tracking-widest mb-3" className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
style={{ color: "var(--color-text-muted)" }} style={{ color: "var(--color-text-muted)" }}
> >
<span className="w-2 h-2 rounded-full bg-green-500" />
{tpr("whoIsOnline")} {tpr("whoIsOnline")}
</h3> </h3>
<div className="grid grid-cols-4 gap-1.5"> <div className="grid grid-cols-4 gap-1.5">
@@ -220,6 +241,15 @@ export default async function RegisterPage() {
{/* Right: form */} {/* Right: form */}
<div className="flex-1"> <div className="flex-1">
<div
className="rounded-2xl border p-6"
style={{
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)",
}}
>
<div className="mb-6"> <div className="mb-6">
<h2 <h2
className="text-2xl font-black tracking-tight" className="text-2xl font-black tracking-tight"
@@ -245,5 +275,6 @@ export default async function RegisterPage() {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }