first commit
This commit is contained in:
Daniil
172
app/(auth)/login/page.tsx
Normal file
172
app/(auth)/login/page.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import Link from "next/link"
|
||||
import { Eye, EyeOff } from "lucide-react"
|
||||
|
||||
export default function LoginPage() {
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [formData, setFormData] = useState({
|
||||
username: "",
|
||||
password: ""
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// Здесь будет логика авторизации
|
||||
console.log("Login attempt:", formData)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0a0e1a] flex items-center justify-center p-6">
|
||||
{/* Background grid */}
|
||||
<div
|
||||
className="fixed inset-0 pointer-events-none -z-10"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '50px 50px'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Glowing effects */}
|
||||
<div className="fixed top-20 left-20 w-96 h-96 bg-cyan-500/10 rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="fixed bottom-20 right-20 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-pulse" />
|
||||
|
||||
<Card className="w-full max-w-md bg-[#0d1117] border-2 border-cyan-500/40 shadow-[0_0_50px_rgba(6,182,212,0.2)] relative overflow-hidden">
|
||||
{/* Top accent line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent" />
|
||||
|
||||
<div className="p-8">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-cyan-400 font-mono mb-2">
|
||||
Login
|
||||
</h1>
|
||||
<p className="text-cyan-400/50 font-mono text-sm">
|
||||
Access your learning dashboard
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="username"
|
||||
className="text-cyan-400 font-mono text-sm"
|
||||
>
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
id="username"
|
||||
type="text"
|
||||
placeholder="Enter your username"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData({...formData, username: e.target.value})}
|
||||
className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="password"
|
||||
className="text-cyan-400 font-mono text-sm"
|
||||
>
|
||||
Password
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Enter your password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData({...formData, password: e.target.value})}
|
||||
className="bg-[#0a0e1a] border-cyan-500/30 text-cyan-400 placeholder:text-cyan-400/30 font-mono focus:border-cyan-400 focus:ring-cyan-400/20 pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-cyan-400/50 hover:text-cyan-400 transition-colors"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="w-4 h-4" />
|
||||
) : (
|
||||
<Eye className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<label className="flex items-center gap-2 cursor-pointer group">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-4 h-4 rounded border-cyan-500/30 bg-[#0a0e1a] text-cyan-400 focus:ring-cyan-400/20"
|
||||
/>
|
||||
<span className="text-cyan-400/60 group-hover:text-cyan-400/80 font-mono transition-colors">
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
<Link
|
||||
href="/reset-password"
|
||||
className="text-cyan-400/60 hover:text-cyan-400 font-mono transition-colors"
|
||||
>
|
||||
Forgot password?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-bold font-mono tracking-wider py-6 text-base shadow-[0_0_30px_rgba(6,182,212,0.3)] hover:shadow-[0_0_50px_rgba(6,182,212,0.5)] transition-all"
|
||||
>
|
||||
LOGIN
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Footer Links */}
|
||||
<div className="mt-8 text-center space-y-4">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-cyan-500/20"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs">
|
||||
<span className="bg-[#0d1117] px-4 text-cyan-400/40 font-mono">
|
||||
OR
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-cyan-400/60 font-mono text-sm">
|
||||
Don't have an account?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-cyan-400 hover:text-cyan-300 font-bold transition-colors"
|
||||
>
|
||||
Sign up
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block text-cyan-400/50 hover:text-cyan-400 font-mono text-xs transition-colors"
|
||||
>
|
||||
← Back to home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Corner decorations */}
|
||||
<div className="absolute top-2 left-2 w-4 h-4 border-t-2 border-l-2 border-cyan-500/30"></div>
|
||||
<div className="absolute top-2 right-2 w-4 h-4 border-t-2 border-r-2 border-cyan-500/30"></div>
|
||||
<div className="absolute bottom-2 left-2 w-4 h-4 border-b-2 border-l-2 border-cyan-500/30"></div>
|
||||
<div className="absolute bottom-2 right-2 w-4 h-4 border-b-2 border-r-2 border-cyan-500/30"></div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user