feat: premium polish pass — typing effect, animated counters, ambient orbs, input glow, show/hide password, redesigned settings, Reveal animations
- Add TypewriterText component for hero heading animation - Add AnimatedCounter with scroll-triggered count-up - Add AmbientOrbs with floating gradient orbs in hero - Add input-glow focus effect, btn-shine hover effect CSS - Add show/hide password toggle on login, register, and home login forms - Redesign settings page with premium gradient cards and icon headers - Polish /me dashboard with Reveal animations, btn-shine, input-glow - Add animate-count CSS keyframe
This commit is contained in:
openhands committed
1 parent
5fa342018d
commit
b37b6bc2b9
10 files changed
+569
-150
No files matched your search
@@ -1,8 +1,9 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { updateMotto } from "@/actions/user-settings";
|
||||
import { ContentCard } from "@/components/public/ui";
|
||||
import { Reveal } from "@/components/motion-reveal";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { avatarImageUrl } from "@/lib/format";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
@@ -39,95 +40,233 @@ export default async function SettingsPage() {
|
||||
imagerBase =
|
||||
(await siteSettings.get("habbo_imaging_url", imagerBase)) ?? imagerBase;
|
||||
} catch {
|
||||
// fall back to the default imager base
|
||||
/* fall back to default */
|
||||
}
|
||||
|
||||
const avatar = avatarImageUrl(imagerBase, user.look, { size: "l" });
|
||||
|
||||
return (
|
||||
<main style={{ display: "grid", gap: "1.5rem" }}>
|
||||
<ContentCard
|
||||
icon="⚙️"
|
||||
title={t("accountSettings")}
|
||||
subtitle={t("accountSettingsSubtitle")}
|
||||
/>
|
||||
|
||||
<ContentCard
|
||||
icon="🙂"
|
||||
title={user.username}
|
||||
subtitle={t("publicProfile")}
|
||||
>
|
||||
<div className="flex flex-col gap-6 pb-14">
|
||||
{/* Header */}
|
||||
<Reveal>
|
||||
<div
|
||||
className="relative overflow-hidden rounded-xl border px-5 py-4"
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "1.5rem",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap",
|
||||
background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
||||
backdropFilter: "blur(14px)",
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||
}}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
className="avatar"
|
||||
src={avatar}
|
||||
alt={`${user.username} avatar`}
|
||||
width={100}
|
||||
height={150}
|
||||
/>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
|
||||
{user.motto || <span className="muted">{t("noMotto")}</span>}
|
||||
</p>
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
{user.mail || t("noEmail")}
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
|
||||
>
|
||||
<Image src="/assets/images/icons/navigation/me.png" alt="" width={22} height={22} unoptimized />
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
className="text-lg font-black tracking-tight"
|
||||
style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
|
||||
>
|
||||
{t("accountSettings")}
|
||||
</h1>
|
||||
<p className="text-xs" style={{ color: "var(--color-text-muted)" }}>
|
||||
{t("accountSettingsSubtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentCard>
|
||||
</Reveal>
|
||||
|
||||
<ContentCard
|
||||
icon="✏️"
|
||||
title={t("changeMotto")}
|
||||
subtitle={t("changeMottoSubtitle")}
|
||||
>
|
||||
<form
|
||||
action={updateMotto}
|
||||
{/* Profile card */}
|
||||
<Reveal delay={0.05}>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border card-premium"
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
maxWidth: 520,
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
name="motto"
|
||||
defaultValue={user.motto}
|
||||
maxLength={127}
|
||||
placeholder={t("mottoPlaceholder")}
|
||||
aria-label="Motto"
|
||||
/>
|
||||
<div>
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("saveMotto")}
|
||||
</button>
|
||||
<div
|
||||
className="flex items-center gap-2.5 px-4 py-3"
|
||||
style={{
|
||||
background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
|
||||
}}
|
||||
>
|
||||
<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)" }}>
|
||||
{t("publicProfile")}
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
className="p-5 flex items-center gap-5"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
<div className="shrink-0">
|
||||
<div className="rounded-xl overflow-hidden border" style={{ borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}>
|
||||
<Image
|
||||
src={avatar}
|
||||
alt={`${user.username} avatar`}
|
||||
width={80}
|
||||
height={120}
|
||||
className="block"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-base font-extrabold" style={{ color: "var(--color-text-readable)" }}>
|
||||
{user.username}
|
||||
</h3>
|
||||
<p className="text-sm mt-0.5" style={{ color: "var(--color-text-muted)" }}>
|
||||
{user.motto || <span style={{ fontStyle: "italic", opacity: 0.5 }}>{t("noMotto")}</span>}
|
||||
</p>
|
||||
<p className="text-xs mt-1.5 font-medium" style={{ color: "color-mix(in srgb, var(--color-text-muted) 70%, transparent)" }}>
|
||||
{user.mail || t("noEmail")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ContentCard>
|
||||
|
||||
<div className="card-grid sm-2">
|
||||
<ContentCard
|
||||
icon="🔒"
|
||||
title={t("securityTitle")}
|
||||
subtitle={t("securitySubtitle")}
|
||||
>
|
||||
<p className="muted" style={{ marginTop: 0 }}>
|
||||
{t("securityDescription")}
|
||||
</p>
|
||||
<Link href="/settings/2fa" className="btn btn-outline">
|
||||
{t("twoFactorLink")}
|
||||
</Link>
|
||||
</ContentCard>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</Reveal>
|
||||
|
||||
{/* Motto form */}
|
||||
<Reveal delay={0.1}>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-2.5 px-4 py-3"
|
||||
style={{
|
||||
background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
|
||||
}}
|
||||
>
|
||||
<Image src="/assets/images/icons/star.gif" alt="" width={18} height={18} unoptimized />
|
||||
<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
|
||||
{t("changeMotto")}
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
className="p-5"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
|
||||
{t("changeMottoSubtitle")}
|
||||
</p>
|
||||
<form
|
||||
action={updateMotto}
|
||||
className="flex flex-col gap-3"
|
||||
style={{ maxWidth: 520 }}
|
||||
>
|
||||
<input
|
||||
name="motto"
|
||||
defaultValue={user.motto}
|
||||
maxLength={127}
|
||||
placeholder={t("mottoPlaceholder")}
|
||||
aria-label="Motto"
|
||||
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
||||
style={{
|
||||
backgroundColor: "var(--color-background)",
|
||||
color: "var(--color-text-readable)",
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
|
||||
style={{
|
||||
background: "var(--color-primary)",
|
||||
color: "var(--color-primary-foreground)",
|
||||
boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
||||
}}
|
||||
>
|
||||
{t("saveMotto")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* Security card */}
|
||||
<Reveal delay={0.15}>
|
||||
<div
|
||||
className="overflow-hidden rounded-xl border"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center gap-2.5 px-4 py-3"
|
||||
style={{
|
||||
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 />
|
||||
<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
|
||||
{t("securityTitle")}
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
className="p-5"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
|
||||
{t("securityDescription")}
|
||||
</p>
|
||||
<Link
|
||||
href="/settings/2fa"
|
||||
className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
|
||||
color: "var(--color-text-readable)",
|
||||
background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
|
||||
}}
|
||||
>
|
||||
{t("twoFactorLink")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* Sessions link */}
|
||||
<Reveal delay={0.2}>
|
||||
<Link
|
||||
href="/settings/sessions"
|
||||
className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
|
||||
style={{
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
||||
style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
|
||||
>
|
||||
<Image src="/assets/images/icons/navigation/community.png" alt="" width={20} height={20} unoptimized />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm font-extrabold" style={{ color: "var(--color-text-readable)" }}>
|
||||
Session Management
|
||||
</span>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
|
||||
View active sessions and sign out everywhere
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-lg font-bold" style={{ color: "var(--color-text-muted)" }}>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</Reveal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user