change design login page
This commit is contained in:
Randa Firman Putra
181
app/globals.css
181
app/globals.css
@@ -3,6 +3,37 @@
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/* Custom properties for gradient animation */
|
||||
@property --bg-1-x {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 25;
|
||||
}
|
||||
|
||||
@property --bg-2-x {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 35;
|
||||
}
|
||||
|
||||
@property --bg-2-y {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 40;
|
||||
}
|
||||
|
||||
@property --bg-3-x {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 45;
|
||||
}
|
||||
|
||||
@property --bg-3-y {
|
||||
syntax: "<number>";
|
||||
inherits: true;
|
||||
initial-value: 20;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
@@ -120,3 +151,153 @@
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gradient text animation keyframes */
|
||||
@keyframes gradient-bg-animate {
|
||||
0% {
|
||||
--bg-1-x: 25;
|
||||
--bg-2-y: 40;
|
||||
--bg-2-x: 35;
|
||||
--bg-3-y: 20;
|
||||
--bg-3-x: 45;
|
||||
}
|
||||
|
||||
25% {
|
||||
--bg-1-x: 30;
|
||||
--bg-2-y: 50;
|
||||
--bg-2-x: 80;
|
||||
--bg-3-y: 20;
|
||||
--bg-3-x: 70;
|
||||
}
|
||||
|
||||
50% {
|
||||
--bg-1-x: 10;
|
||||
--bg-2-y: 40;
|
||||
--bg-2-x: 30;
|
||||
--bg-3-y: 80;
|
||||
--bg-3-x: 50;
|
||||
}
|
||||
|
||||
75% {
|
||||
--bg-1-x: 70;
|
||||
--bg-2-y: 10;
|
||||
--bg-2-x: 50;
|
||||
--bg-3-y: 30;
|
||||
--bg-3-x: 40;
|
||||
}
|
||||
|
||||
100% {
|
||||
--bg-1-x: 25;
|
||||
--bg-2-y: 40;
|
||||
--bg-2-x: 35;
|
||||
--bg-3-y: 20;
|
||||
--bg-3-x: 45;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gradient text utility class */
|
||||
.gradient-text-animated {
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
#ffffff 0%,
|
||||
#3b82f6 12%,
|
||||
#10b981 24%,
|
||||
#f59e0b 36%,
|
||||
#ef4444 48%,
|
||||
#8b5cf6 60%,
|
||||
#06b6d4 72%,
|
||||
#ec4899 84%,
|
||||
#ffffff 100%
|
||||
);
|
||||
background-size: 300% 300%;
|
||||
background-position: calc(var(--bg-1-x) * 2%) 50%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: gradient-bg-animate 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* Glass effect with grain texture */
|
||||
.glass-effect {
|
||||
background: rgba(30, 41, 59, 0.7);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(0, 0, 0, 0.37),
|
||||
inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.glass-effect::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
background-size: 200px;
|
||||
opacity: 0.03;
|
||||
pointer-events: none;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* Glass input field */
|
||||
.glass-input {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-input:focus {
|
||||
background: rgba(15, 23, 42, 0.7);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(59, 130, 246, 0.1),
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Glass button */
|
||||
.glass-button {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.8));
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-button:hover:not(:disabled) {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(29, 78, 216, 0.9));
|
||||
box-shadow:
|
||||
0 4px 12px rgba(59, 130, 246, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.glass-button:disabled {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(37, 99, 235, 0.5));
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Glass tab button */
|
||||
.glass-tab {
|
||||
background: rgba(15, 23, 42, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-tab-active {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(37, 99, 235, 0.7));
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
box-shadow:
|
||||
0 2px 8px rgba(59, 130, 246, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
43
app/page.tsx
43
app/page.tsx
@@ -95,7 +95,7 @@ export default function HomePage() {
|
||||
<div className="w-full max-w-sm mx-auto p-4 relative z-10">
|
||||
{/* Header */}
|
||||
<div className="text-center space-y-3 mb-6">
|
||||
<h1 className="text-3xl font-bold text-white">
|
||||
<h1 className="text-2xl md:text-2xl lg:text-3xl font-bold gradient-text-animated leading-tight">
|
||||
Portal Data Informatika
|
||||
</h1>
|
||||
</div>
|
||||
@@ -195,10 +195,7 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-slate-800/95 backdrop-blur-md rounded-xl shadow-xl p-6 w-full border border-slate-600/50 relative">
|
||||
{/* Subtle glow effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 rounded-xl"></div>
|
||||
|
||||
<div className="glass-effect rounded-2xl shadow-2xl p-6 w-full relative overflow-hidden">
|
||||
<div className="relative z-10">
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-xl font-bold text-white mb-1">
|
||||
@@ -210,24 +207,24 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* Tab buttons */}
|
||||
<div className="flex rounded-lg bg-slate-700/50 p-1 border border-slate-600">
|
||||
{/* Tab buttons with glass effect */}
|
||||
<div className="flex rounded-xl glass-tab p-1">
|
||||
<button
|
||||
onClick={() => setActiveTab("ketua")}
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm font-semibold transition-all duration-200 ${
|
||||
activeTab === "ketua"
|
||||
? "bg-blue-600 text-white shadow-md"
|
||||
: "text-slate-300 hover:text-white hover:bg-slate-600/50"
|
||||
? "glass-tab-active text-white"
|
||||
: "text-slate-300 hover:text-white hover:bg-white/5"
|
||||
}`}
|
||||
>
|
||||
Pimpinan
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("admin")}
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-all duration-200 ${
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm font-semibold transition-all duration-200 ${
|
||||
activeTab === "admin"
|
||||
? "bg-blue-600 text-white shadow-md"
|
||||
: "text-slate-300 hover:text-white hover:bg-slate-600/50"
|
||||
? "glass-tab-active text-white"
|
||||
: "text-slate-300 hover:text-white hover:bg-white/5"
|
||||
}`}
|
||||
>
|
||||
Admin
|
||||
@@ -238,7 +235,7 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
{activeTab === "ketua" && (
|
||||
<form onSubmit={handleKetuaLogin} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="nip" className="block text-sm font-medium text-slate-200">
|
||||
<label htmlFor="nip" className="block text-sm font-medium text-white/90">
|
||||
NIP
|
||||
</label>
|
||||
<input
|
||||
@@ -248,11 +245,11 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
value={ketuaForm.nip}
|
||||
onChange={(e) => setKetuaForm({ ...ketuaForm, nip: e.target.value })}
|
||||
required
|
||||
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
className="glass-input w-full px-3 py-2 rounded-lg text-white placeholder-slate-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="ketua-password" className="block text-sm font-medium text-slate-200">
|
||||
<label htmlFor="ketua-password" className="block text-sm font-medium text-white/90">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
@@ -262,13 +259,13 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
value={ketuaForm.password}
|
||||
onChange={(e) => setKetuaForm({ ...ketuaForm, password: e.target.value })}
|
||||
required
|
||||
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
className="glass-input w-full px-3 py-2 rounded-lg text-white placeholder-slate-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 disabled:from-blue-400 disabled:to-blue-500 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 shadow-md"
|
||||
className="glass-button w-full text-white font-medium py-2.5 px-4 rounded-lg"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
@@ -286,7 +283,7 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
{activeTab === "admin" && (
|
||||
<form onSubmit={handleAdminLogin} className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="username" className="block text-sm font-medium text-slate-200">
|
||||
<label htmlFor="username" className="block text-sm font-medium text-white/90">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
@@ -296,11 +293,11 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
value={adminForm.username}
|
||||
onChange={(e) => setAdminForm({ ...adminForm, username: e.target.value })}
|
||||
required
|
||||
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
className="glass-input w-full px-3 py-2 rounded-lg text-white placeholder-slate-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label htmlFor="admin-password" className="block text-sm font-medium text-slate-200">
|
||||
<label htmlFor="admin-password" className="block text-sm font-medium text-white/90">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
@@ -310,13 +307,13 @@ function AutoLoginDialog({ onLoginSuccess }: AutoLoginDialogProps) {
|
||||
value={adminForm.password}
|
||||
onChange={(e) => setAdminForm({ ...adminForm, password: e.target.value })}
|
||||
required
|
||||
className="w-full px-3 py-2 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
className="glass-input w-full px-3 py-2 rounded-lg text-white placeholder-slate-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 disabled:from-blue-400 disabled:to-blue-500 text-white font-medium py-2.5 px-4 rounded-lg transition-all duration-200 shadow-md"
|
||||
className="glass-button w-full text-white font-medium py-2.5 px-4 rounded-lg"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
|
||||
Reference in New Issue
Block a user