From e2076ba580856a1fa0f4cc64d24ac5c530e7ab10 Mon Sep 17 00:00:00 2001
From: Randa Firman Putra <randafrmn@gmail.com>
Date: Mon, 8 Dec 2025 17:57:52 +0700
Subject: [PATCH] change design login page

---
 app/globals.css | 181 ++++++++++++++++++++++++++++++++++++++++++++++++
 app/page.tsx    |  43 ++++++------
 2 files changed, 201 insertions(+), 23 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 0fe601c..d7231f6 100644
--- a/app/globals.css
+++ b/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);
+}
diff --git a/app/page.tsx b/app/page.tsx
index b13d7c9..53403bc 100644
--- a/app/page.tsx
+++ b/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">