ejs login and signup with tailwind

2025-05-02 01:53:47 -07:00
4 changed files with 102 additions and 12 deletions
@@ -9,7 +9,7 @@ const app = express();
 const port = process.env.PORT || 3000;

 app.set('view engine', 'ejs');
-app.set('views',path.join(__dirname, 'views'));
+app.set('views', path.join(__dirname, '/src/views'));

 /*
 ROUTINGS
@@ -2,10 +2,10 @@
  "name": "retirementcalculator",
  "version": "0.1.0",
  "description": "Retirement Calculator",
-  "main": "./src/app.js",
+  "main": "app.js",
  "scripts": {
-    "start": "node ./src/app.js",
-    "dev": "nodemon ./src/app.js"
+    "start": "node app.js",
+    "dev": "nodemon app.js"
  },
  "repository": {
    "type": "git",
@@ -1,12 +1,53 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+
 <head>
-        <title></title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Page</title>
+    <link rel="stylesheet" href="/css/style.css" <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="../public/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.3.2/dist/tailwind.min.css" rel="stylesheet">
 </head>
+
 <body>
-        <h1>Welcome!</h1>
-        <form method="get" action="/signup">
-            <button type="submit">signup</button>
+    <div class="flex justify-center items-center h-screen bg-gray-700">
+        <form action="/login" method="POST">
+            <div class="w-96 p-6 shadow-1g bg-white rounded-md">
+                <h1 class="text-3xl block text-center font-semibold"> Login </h1>
+                <hr class="mt-3">
+                <div class="mt-3">
+                    <label for="email" class="block text-base mb-2">Email</label>
+                    <input type="text" id="email" name="email"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Email" />
+                </div>
+                <div class="mt-3">
+                    <label for="password" class="block text-base mb-2">Password</label>
+                    <input type="password" id="password" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                </div>
+                <div class="text-red-800 font-bold hidden" id="forgor"> Your Password is incorrect...</div>
+                <div class="mt-3 flex justify-between items-center">
+                    <div>
+                        <input type="checkbox">
+                        <label>Remember me</label>
+                    </div>
+                    <div>
+                        <a href="#" class="text-indigo-600 font-semibold">Forgot Password? </a>
+                    </div>
+                </div>
+                <div class="mt-5">
+                    <button type="submit"
+                        class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Login</button>
+                </div>
+            </div>
        </form>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 </body>
+
 </html>
@@ -1,9 +1,58 @@
 <!DOCTYPE html>
-<html>
-    <head>
+<html lang="en">

+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signup</title>
+    <link rel="stylesheet" href="/css/style.css" <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="../public/css/style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
+
 <body>
-        <h1>SIGNUP</h1>
+    <div class="flex justify-center items-center h-screen bg-gray-700">
+        <form action="/login" method="POST">
+            <div class="w-96 p-6 shadow-1g bg-white rounded-md">
+                <h1 class="text-3xl block text-center font-semibold"> Signup </h1>
+                <hr class="mt-3">
+                <div class="mt-3">
+                    <label for="email" class="block text-base mb-2">Email</label>
+                    <input type="text" id="email" name="email"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Email" />
+                </div>
+                <div class="mt-3">
+                    <label for="password" class="block text-base mb-2">Password</label>
+                    <input type="password" id="password" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                    <label for="password" class="block text-base mb-2 mt-3">Re-type Password</label>
+                    <input type="password" id="repassword" name="password"
+                        class="border focus:border-gray-600 w-full text-base px-2 py-1 focus:outline-none focus:ring-0 "
+                        placeholder="Enter Password" />
+                </div>
+                <div class="text-red-800 font-bold hidden" id="forgor"> Your Password is incorrect...</div>
+                <div class="mt-3 flex justify-between items-center">
+                    <div>
+                        <input type="checkbox">
+                        <label>Remember me</label>
+                    </div>
+                    <div>
+                        <a href="#" class="text-indigo-600 font-semibold">Forgot Password? </a>
+                    </div>
+                </div>
+                <div class="mt-5">
+                    <button type="submit"
+                        class="border-2 border-gray-600 bg-blue-600 text-white py-1 w-full rounded-md hover:bg-transparent hover:text-indigo-700 font-semibold">Login</button>
+                </div>
+            </div>
+        </form>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 </body>
+
 </html>