120 lines
7.3 KiB
TypeScript
120 lines
7.3 KiB
TypeScript
'use client';
|
||
|
||
import AuthForm from '@/components/auth/AuthForm';
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
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">
|
||
{/* 使用统一的认证表单组件 */}
|
||
<AuthForm type="register" />
|
||
|
||
{/* 分割线 */}
|
||
<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>
|
||
);
|
||
}
|