main: vibe coded app to feel like paper

Signed-off-by: nfel <nfilsaraee@gmail.com>
This commit is contained in:
2025-12-30 00:00:16 +03:30
parent acbaebb947
commit 91c149e92e
27 changed files with 901 additions and 8696 deletions
+16 -16
View File
@@ -26,28 +26,28 @@ export default function AdminLoginPage() {
};
return (
<div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-primary-900 via-primary-800 to-primary-900">
<div className="min-h-screen flex items-center justify-center p-4 bg-paper-light">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="w-full max-w-md"
>
<div className="glass-effect rounded-2xl p-8 border border-white/10">
<div className="paper-card p-8 border-2 border-paper-dark shadow-paper-lg">
{/* Header */}
<div className="text-center mb-8">
<div className="inline-block p-4 bg-accent-cyan/20 rounded-full mb-4">
<FaLock className="text-4xl text-accent-cyan" />
<div className="inline-block p-4 bg-paper-brown/20 border-2 border-paper-brown mb-4">
<FaLock className="text-4xl text-paper-brown" />
</div>
<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-accent-cyan to-accent-orange mb-2">
<h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
Admin Panel
</h1>
<p className="text-gray-400">Sign in to manage your music store</p>
<p className="text-paper-gray mt-4">Sign in to manage your music store</p>
</div>
{/* Login Form */}
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<label className="block text-sm font-medium text-paper-dark mb-2">
<FaUser className="inline mr-2" />
Username
</label>
@@ -56,13 +56,13 @@ export default function AdminLoginPage() {
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="admin"
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:border-accent-cyan focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 text-white placeholder-gray-500"
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
required
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
<label className="block text-sm font-medium text-paper-dark mb-2">
<FaLock className="inline mr-2" />
Password
</label>
@@ -71,7 +71,7 @@ export default function AdminLoginPage() {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-lg focus:border-accent-cyan focus:outline-none focus:ring-2 focus:ring-accent-cyan/50 text-white placeholder-gray-500"
className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
required
/>
</div>
@@ -80,7 +80,7 @@ export default function AdminLoginPage() {
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-300 text-sm"
className="p-3 bg-red-100 border-2 border-red-400 text-red-700 text-sm"
>
{error}
</motion.div>
@@ -88,18 +88,18 @@ export default function AdminLoginPage() {
<button
type="submit"
className="w-full py-3 bg-gradient-to-r from-accent-cyan to-accent-cyan/80 hover:from-accent-cyan/90 hover:to-accent-cyan/70 rounded-lg font-semibold text-white transition-all glow-cyan"
className="w-full py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg"
>
Sign In
</button>
</form>
{/* Demo Credentials */}
<div className="mt-6 p-4 bg-white/5 rounded-lg">
<p className="text-xs text-gray-400 text-center">
<div className="mt-6 p-4 bg-paper-brown/10 border-2 border-paper-brown">
<p className="text-xs text-paper-dark text-center">
Demo Credentials:<br />
<span className="text-accent-cyan">Username: admin</span><br />
<span className="text-accent-cyan">Password: admin123</span>
<span className="text-paper-brown font-semibold">Username: admin</span><br />
<span className="text-paper-brown font-semibold">Password: admin123</span>
</p>
</div>
</div>