Premium polish: enhanced toolbar, glass cards, Habbo bg panels, animations
This commit is contained in:
1 parent
7aec61d1a5
commit
782271a31b
3 files changed
+119
-49
No files matched your search
@@ -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">
|
||||||
|
|||||||
+45
-18
@@ -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
|
||||||
|
|||||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user