165 lines
10 KiB
TypeScript
165 lines
10 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { Button } from '@/components/ui/button';
|
|||
|
|
import { Input } from '@/components/ui/input';
|
|||
|
|
import { Label } from '@/components/ui/label';
|
|||
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
import Image from 'next/image';
|
|||
|
|
import { useSearchParams } from 'next/navigation';
|
|||
|
|
|
|||
|
|
export default function RegisterPage() {
|
|||
|
|
const searchParams = useSearchParams();
|
|||
|
|
const callbackUrl = searchParams.get('callbackUrl') || '/';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-900 dark:to-gray-800 relative overflow-hidden pb-8">
|
|||
|
|
{/* 背景装饰元素 - 渐变模糊效果 */}
|
|||
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|||
|
|
<div className="absolute -top-20 -right-20 w-80 h-80 bg-emerald-400/20 rounded-full blur-3xl"></div>
|
|||
|
|
<div className="absolute -bottom-20 -left-20 w-96 h-96 bg-teal-500/20 rounded-full blur-3xl"></div>
|
|||
|
|
<div className="absolute top-1/3 left-1/4 w-64 h-64 bg-emerald-300/10 rounded-full blur-3xl"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 主要内容区域 */}
|
|||
|
|
<div className="relative z-10 flex flex-col items-center justify-center min-h-screen px-4 py-12">
|
|||
|
|
<div className="w-full max-w-md">
|
|||
|
|
{/* 装饰性头部 */}
|
|||
|
|
<div className="text-center mb-8 sm:mb-10">
|
|||
|
|
<div className="flex justify-center mb-6">
|
|||
|
|
<div className="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-emerald-600 rounded-2xl transform -rotate-6 shadow-lg transition-all duration-500 hover:rotate-0">
|
|||
|
|
<div className="w-12 h-12 sm:w-14 sm:h-14 bg-white rounded-xl transform rotate-6 flex items-center justify-center transition-all duration-500 hover:rotate-0">
|
|||
|
|
<Image
|
|||
|
|
src="/images/mc-favicon.ico"
|
|||
|
|
alt="Logo"
|
|||
|
|
width={40}
|
|||
|
|
height={40}
|
|||
|
|
className="rounded-xl w-8 h-8"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-white mb-3 tracking-tight">
|
|||
|
|
欢迎加入
|
|||
|
|
<span className="text-emerald-600 dark:text-emerald-400"> HITWH</span>
|
|||
|
|
社区
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed max-w-sm mx-auto">
|
|||
|
|
创建你的账户，开始创作和分享独特的Minecraft皮肤
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 注册卡片 */}
|
|||
|
|
<div className="relative group">
|
|||
|
|
{/* 卡片阴影装饰 */}
|
|||
|
|
<div className="absolute inset-0 bg-emerald-500 rounded-2xl transform rotate-2 opacity-20 transition-all duration-500 group-hover:rotate-1 group-hover:scale-102"></div>
|
|||
|
|
<div className="absolute inset-0 bg-teal-400 rounded-2xl transform -rotate-1 opacity-15 transition-all duration-500 group-hover:-rotate-0.5 group-hover:scale-101"></div>
|
|||
|
|
|
|||
|
|
<Card className="relative bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm border border-emerald-200 dark:border-emerald-900/50 shadow-xl rounded-2xl overflow-hidden">
|
|||
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 to-teal-500"></div>
|
|||
|
|
|
|||
|
|
<CardHeader className="text-center pb-6 pt-8">
|
|||
|
|
<CardTitle className="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white">
|
|||
|
|
🎮 创建新账户
|
|||
|
|
</CardTitle>
|
|||
|
|
<div className="w-16 h-1 bg-gradient-to-r from-emerald-500 to-teal-500 mx-auto mt-2 rounded-full"></div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-6 px-6 pb-8">
|
|||
|
|
<form action="/api/auth/signup" method="post">
|
|||
|
|
<input type="hidden" name="callbackUrl" value={callbackUrl} />
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label htmlFor="username" className="text-gray-700 dark:text-gray-300">用户名</Label>
|
|||
|
|
<Input
|
|||
|
|
id="username"
|
|||
|
|
name="username"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="请输入用户名"
|
|||
|
|
required
|
|||
|
|
className="border-emerald-200 dark:border-emerald-900/30 focus:border-emerald-500 dark:focus:border-emerald-400 transition-all rounded-xl"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label htmlFor="email" className="text-gray-700 dark:text-gray-300">邮箱</Label>
|
|||
|
|
<Input
|
|||
|
|
id="email"
|
|||
|
|
name="email"
|
|||
|
|
type="email"
|
|||
|
|
placeholder="请输入您的邮箱"
|
|||
|
|
required
|
|||
|
|
className="border-emerald-200 dark:border-emerald-900/30 focus:border-emerald-500 dark:focus:border-emerald-400 transition-all rounded-xl"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label htmlFor="password" className="text-gray-700 dark:text-gray-300">密码</Label>
|
|||
|
|
<Input
|
|||
|
|
id="password"
|
|||
|
|
name="password"
|
|||
|
|
type="password"
|
|||
|
|
placeholder="请输入密码"
|
|||
|
|
required
|
|||
|
|
className="border-emerald-200 dark:border-emerald-900/30 focus:border-emerald-500 dark:focus:border-emerald-400 transition-all rounded-xl"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
type="submit"
|
|||
|
|
className="w-full mt-6 bg-emerald-600 hover:bg-emerald-700 text-white transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-lg rounded-xl py-6"
|
|||
|
|
>
|
|||
|
|
注册
|
|||
|
|
</Button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
{/* 分割线 */}
|
|||
|
|
<div className="relative my-6">
|
|||
|
|
<div className="absolute inset-0 flex items-center">
|
|||
|
|
<div className="w-full border-t border-gray-200 dark:border-gray-700"></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="relative flex justify-center text-sm">
|
|||
|
|
<span className="px-3 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-full">或者</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 登录链接 */}
|
|||
|
|
<div className="text-center space-y-4">
|
|||
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|||
|
|
已有账号？直接登录开始游戏！
|
|||
|
|
</p>
|
|||
|
|
<Button asChild variant="outline" className="w-full border-emerald-600 text-emerald-600 hover:bg-emerald-50 dark:border-emerald-400 dark:text-emerald-400 dark:hover:bg-emerald-900/20 rounded-xl py-6 transition-all duration-300 transform hover:-translate-y-1">
|
|||
|
|
<Link href={`/login?callbackUrl=${encodeURIComponent(callbackUrl)}`}>
|
|||
|
|
🎮 登录现有账户
|
|||
|
|
</Link>
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 底部装饰 */}
|
|||
|
|
<div className="text-center mt-8 sm:mt-10">
|
|||
|
|
<div className="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs sm:text-sm text-gray-500 dark:text-gray-400">
|
|||
|
|
<span>🎨 皮肤创作</span>
|
|||
|
|
<span>•</span>
|
|||
|
|
<span>🌍 社区分享</span>
|
|||
|
|
<span>•</span>
|
|||
|
|
<span>⚡ 快速上传</span>
|
|||
|
|
<span>•</span>
|
|||
|
|
<span>👥 角色中心</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 浮动装饰元素 */}
|
|||
|
|
<div className="absolute bottom-8 left-8 text-emerald-600 opacity-20 dark:opacity-10">
|
|||
|
|
<div className="text-4xl">🎨</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="absolute top-8 right-8 text-teal-500 opacity-20 dark:opacity-10">
|
|||
|
|
<div className="text-4xl">🌟</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|