SowinskiBraeden/RetirementCalculator
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

ejs login and signup with tailwind

Browse Source
This commit is contained in:
knighthawk4227 committed 2025-05-02 01:53:47 -07:00
1 parent 2bd4b1e16e
commit 44cee349e9
4 files changed
+102 -12
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app.js
+1 -1
View File
@@ -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
package.json
+3 -3
View File
@@ -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",
src/views/index.ejs
+46 -5
View File
@@ -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>
src/views/signup.ejs
+52 -3
View File
@@ -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>