Refactor login and signup page layout; enhance styling with Bootstrap

This commit is contained in:
2025-04-04 18:33:47 +00:00
parent 337304b897
commit 727aa9d134
@@ -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>