style(auth): enhance login page UI with improved layout and styling

ZoeyVid · Nov 25, 2024 · 9ec0c76 · 9ec0c76
1 parent ca2f18c
commit 9ec0c76
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/src/public/auth/login/index.php b/src/public/auth/login/index.php
@@ -32,20 +32,25 @@
     <!--<script src="https://js.hcaptcha.com/1/api.js?hl=en&render=onload&recaptchacompat=off" async defer></script>-->
 </head>
 
-<body>
-<div class="content-center flex flex-col items-center justify-center h-screen">
+<body class="text-center font-sans bg-white text-black dark:bg-slate-900 dark:text-white">
+<div class="rounded-3xl absolute p-4 md:px-20 px-8 w-max top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 bg-slate-200 dark:bg-slate-800">
     <?php
     function login($msg): void
     {
         ?>
-    <h1>NPMplus - Login</h1>
-    <form method="post">
-        <label for="email">E-Mail: </label><input type="email" name="email" id="email" maxlength="255" required><br>
-        <label for="pswd">Passwort: </label><input type="password" name="pswd" id="pswd" maxlength="255" required><br>
-        <label for="totp">TOTP: </label><input type="text" name="totp" id="totp" maxlength="6"><br>
-        <!--<div class="h-captcha" data-sitekey="<?php //echo $hcaptcha_key;
-        ?>"></div>-->
-        <input type="submit" value="Login" onClick="this.hidden=true;" class="w-full">
+    <h1 class="text-3xl md:text-6xl font-bold mt-3 mb-6 mx-0">NPMplus - Login</h1>
+    <form method="post" class="grid grid-cols-1 gap-y-4 md:grid-cols-4 md:grid-rows-4">
+        <label for="email" class="mr-2 text-left md:text-right">E-Mail:</label>
+        <input type="email" name="email" id="email" maxlength="255" placeholder="E-Mail" class="h-8 rounded-lg bg-transparent border border-zinc-600 dark:border-zinc-300 outline-none focus:ring-1 ring-offset-1 transition-shadow shadow-black dark:shadow-white ring-zinc-500 dark:ring-zinc-200 py-2 px-3 md:col-span-2" required>
+        <span class="hidden md:block"></span>
+        <label for="pswd" class="mr-2 text-left md:text-right">Password:</label>
+        <input type="password" name="pswd" id="pswd" maxlength="255" placeholder="Password" class="h-8 rounded-lg bg-transparent border border-zinc-600 dark:border-zinc-300 outline-none focus:ring-1 ring-offset-1 transition-shadow shadow-black dark:shadow-white ring-zinc-500 dark:ring-zinc-200 py-2 px-3 md:col-span-2" required>
+        <span class="hidden md:block"></span>
+        <label for="totp" class="mr-2 text-left md:text-right">TOTP:</label>
+        <input type="text" name="totp" id="totp" maxlength="6" placeholder="TOTP" class="h-8 rounded-lg bg-transparent border border-zinc-600 dark:border-zinc-300 outline-none focus:ring-1 ring-offset-1 transition-shadow shadow-black dark:shadow-white ring-zinc-500 dark:ring-zinc-200 py-2 px-3 md:col-span-2">
+        <span class="hidden md:block"></span>
+        <!--<div class="h-captcha" data-sitekey="<?php //echo $hcaptcha_key; ?>"></div>--> 
+        <input type="submit" value="Login" onClick="this.disabled=true;" class="bg-[#296236] hover:bg-[#23552f] text-white font-bold text-xl p-2 px-4 w-full space-y-4 rounded-full disabled:cursor-not-allowed disabled:opacity-75 shadow-md transition-transform transform active:scale-95 col-span-1 md:col-span-4">
     </form>
         <?php
         $msg = match ($msg) {
@@ -55,7 +60,7 @@ function login($msg): void
             "wtotp" => "Wrong TOTP.",
             default => "Please login.",
         };
-        echo "<p><strong>Note: " . $msg . "</strong></p>";
+        echo "<p class='font-bold mt-2'>Note: " . $msg . "</p>";
     }
     if (!array_key_exists("email", $_POST) || !array_key_exists("pswd", $_POST)) {
         login("none");