Refactor login and signup page layout; enhance styling with Bootstrap
This commit is contained in:
@@ -3,37 +3,42 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Notes Management</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script type="text/javascript" src="https://sdk.userbase.com/2/userbase.js"></script>
|
||||
<title>Login and Signup</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="checkUserLoggedIn()">
|
||||
<div class="container">
|
||||
<h1>Notes Management</h1>
|
||||
<div id="form-container">
|
||||
<form id="signup-form">
|
||||
<h2>Sign Up</h2>
|
||||
<input type="text" id="signup-username" placeholder="Username (Email)" required>
|
||||
<input type="password" id="signup-password" placeholder="Password" required>
|
||||
<button type="submit">Sign Up</button>
|
||||
</form>
|
||||
<form id="login-form">
|
||||
<h2>Login</h2>
|
||||
<input type="text" id="login-username" placeholder="Username (Email)" required>
|
||||
<input type="password" id="login-password" placeholder="Password" required>
|
||||
<button type="submit">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
<div id="note-management" style="display: none;">
|
||||
<h2>Note Management</h2>
|
||||
<input type="text" id="note-input" placeholder="Write your note here..." />
|
||||
<button id="logout-button">Logout</button>
|
||||
<ul id="notes-list" style="margin-top: 20px;"></ul>
|
||||
<div id="cookies-container">
|
||||
<h2>Cookies</h2>
|
||||
<p id="cookies-display"></p>
|
||||
<button id="save-cookies-cloud">Save Cookies to Cloud</button>
|
||||
<button id="load-cookies-cloud">Load Cookies from Cloud</button>
|
||||
<body>
|
||||
<div class="container py-5">
|
||||
<h1 class="text-center mb-4">Userbase Login and Signup</h1>
|
||||
<div id="form-container" class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<form id="signup-form">
|
||||
<h2 class="h5 mb-3">Sign Up</h2>
|
||||
<div class="mb-3">
|
||||
<input type="text" id="signup-username" class="form-control" placeholder="Username (Email)" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="password" id="signup-password" class="form-control" placeholder="Password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Sign Up</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body">
|
||||
<form id="login-form">
|
||||
<h2 class="h5 mb-3">Login</h2>
|
||||
<div class="mb-3">
|
||||
<input type="text" id="login-username" class="form-control" placeholder="Username (Email)" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<input type="password" id="login-password" class="form-control" placeholder="Password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success w-100">Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user