mirror of
https://github.com/MoonTechLab/LunaTV.git
synced 2026-05-21 13:47:31 +08:00
feat: login page dark mode
This commit is contained in:
@@ -3,6 +3,8 @@
|
|||||||
import { useRouter, useSearchParams } from 'next/navigation';
|
import { useRouter, useSearchParams } from 'next/navigation';
|
||||||
import { Suspense, useState } from 'react';
|
import { Suspense, useState } from 'react';
|
||||||
|
|
||||||
|
import { ThemeToggle } from '@/components/ThemeToggle';
|
||||||
|
|
||||||
function LoginPageClient() {
|
function LoginPageClient() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
@@ -45,7 +47,10 @@ function LoginPageClient() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
|
<div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
|
||||||
<div className='relative z-10 w-full max-w-md rounded-3xl bg-gradient-to-b from-white/90 via-white/70 to-white/40 backdrop-blur-xl shadow-2xl p-10'>
|
<div className='absolute top-4 right-4'>
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
<div className='relative z-10 w-full max-w-md rounded-3xl bg-gradient-to-b from-white/90 via-white/70 to-white/40 dark:from-zinc-900/90 dark:via-zinc-900/70 dark:to-zinc-900/40 backdrop-blur-xl shadow-2xl p-10 dark:border dark:border-zinc-800'>
|
||||||
<h1 className='text-green-600 tracking-tight text-center text-3xl font-extrabold mb-8 bg-clip-text drop-shadow-sm'>
|
<h1 className='text-green-600 tracking-tight text-center text-3xl font-extrabold mb-8 bg-clip-text drop-shadow-sm'>
|
||||||
MoonTV
|
MoonTV
|
||||||
</h1>
|
</h1>
|
||||||
@@ -58,14 +63,16 @@ function LoginPageClient() {
|
|||||||
id='password'
|
id='password'
|
||||||
type='password'
|
type='password'
|
||||||
autoComplete='current-password'
|
autoComplete='current-password'
|
||||||
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 shadow-sm ring-1 ring-white/60 placeholder:text-gray-500 focus:ring-2 focus:ring-green-500 focus:outline-none sm:text-base bg-white/60 backdrop-blur'
|
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-green-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
|
||||||
placeholder='输入访问密码'
|
placeholder='输入访问密码'
|
||||||
value={password}
|
value={password}
|
||||||
onChange={(e) => setPassword(e.target.value)}
|
onChange={(e) => setPassword(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && <p className='text-sm text-red-600'>{error}</p>}
|
{error && (
|
||||||
|
<p className='text-sm text-red-600 dark:text-red-400'>{error}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type='submit'
|
type='submit'
|
||||||
|
|||||||
Reference in New Issue
Block a user