d1041211043_randa/portaldata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change design login page

Browse Source
This commit is contained in:
Randa Firman Putra
2025-12-08 17:57:52 +07:00
parent 781a7c1be3
commit e2076ba580
2 changed files with 201 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/page.tsx
View File

@@ -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">