202 lines
7.7 KiB
HTML
202 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Register — Clinical Insight Pro</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
/* ------------------------------------------------------------------
|
|
Auth background. Put your picture at Frontend/images/bg1.jpg — the
|
|
gradient underneath is a fallback so the page still looks right if
|
|
the file is missing or still loading.
|
|
------------------------------------------------------------------ */
|
|
body.auth-page {
|
|
min-height: 100vh;
|
|
background-image:
|
|
linear-gradient(rgba(8, 46, 46, .58), rgba(8, 46, 46, .68)),
|
|
url('images/bg1.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-color: #0a4f4f;
|
|
}
|
|
|
|
/* The navbar is a direct child of <body>, so the centring happens on the
|
|
wrapper — otherwise the top bar would get centred too. */
|
|
body.auth-page > .auth-wrap {
|
|
min-height: calc(100vh - 62px); /* viewport minus the navbar */
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 1.25rem 1rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
The card is wider and two-column so all eight fields sit above the
|
|
fold — the old single 560px column pushed the button (and the
|
|
sign-in link under it) off screen.
|
|
------------------------------------------------------------------ */
|
|
.register-card {
|
|
width: 100%;
|
|
max-width: 780px;
|
|
padding: 1.5rem 1.75rem 1.6rem;
|
|
background: #fff;
|
|
border: none;
|
|
border-radius: 16px;
|
|
box-shadow: 0 18px 48px rgba(4, 30, 30, .32);
|
|
}
|
|
|
|
/* Title left, sign-in link right — visible the moment the page loads. */
|
|
.register-head {
|
|
margin-bottom: 1rem;
|
|
padding-bottom: .85rem; border-bottom: 1px solid #eef3f3;
|
|
}
|
|
.register-head h4 { margin: .4rem 0 0; font-weight: 700; font-size: 1.35rem; }
|
|
.register-head p { margin: .15rem 0 0; font-size: .84rem; color: #5f7373; }
|
|
/* Sign-in link inside the panel, under the button. */
|
|
.register-signin {
|
|
text-align: center; margin: .35rem 0 0;
|
|
font-size: .88rem; color: #5f7373;
|
|
}
|
|
.register-signin a { font-weight: 600; text-decoration: none; color: #0f6e6e; }
|
|
.register-signin a:hover { text-decoration: underline; }
|
|
|
|
/* Compact fields so the whole form fits. */
|
|
.register-card .form-label {
|
|
font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
|
|
font-weight: 600; color: #5f7373; margin-bottom: .2rem;
|
|
}
|
|
.register-card .form-control,
|
|
.register-card .form-select {
|
|
padding: .45rem .7rem; border-radius: 9px;
|
|
border-color: #dfe7e7; font-size: .92rem;
|
|
}
|
|
.register-card .form-control:focus,
|
|
.register-card .form-select:focus {
|
|
border-color: #0f6e6e; box-shadow: 0 0 0 .16rem rgba(15, 110, 110, .15);
|
|
}
|
|
.register-card .form-text { font-size: .74rem; margin-top: .1rem; }
|
|
.register-card .alert { font-size: .88rem; padding: .5rem .75rem; }
|
|
.register-card .btn-ci-primary { padding: .6rem; border-radius: 9px; font-size: .98rem; }
|
|
|
|
.status-row { display: flex; align-items: center; gap: 1.25rem; padding-top: .45rem; }
|
|
|
|
/* Short laptop screens: tighten further rather than forcing a page scroll. */
|
|
@media (max-height: 720px) {
|
|
.register-card { padding: 1.1rem 1.35rem 1.2rem; }
|
|
.register-head { margin-bottom: .7rem; padding-bottom: .6rem; }
|
|
.register-head h4 { font-size: 1.15rem; }
|
|
.register-head p { display: none; }
|
|
.register-card .form-control,
|
|
.register-card .form-select { padding: .35rem .65rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="auth-page">
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-ci">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.html">🩺 Clinical Insight Pro</a>
|
|
<span class="navbar-text ms-auto">Register</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container auth-wrap">
|
|
<div class="card-ci register-card">
|
|
|
|
<!-- The sign-in link lives in the header rather than under the button,
|
|
so it never falls below the fold. -->
|
|
<div class="register-head">
|
|
<div>
|
|
<span class="badge-fhir">New User</span>
|
|
<h4>Create your account</h4>
|
|
<p>Saved to the Users table in PostgreSQL.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="registerError" class="alert alert-danger d-none mb-2"></div>
|
|
<div id="registerSuccess" class="alert alert-success d-none mb-2"></div>
|
|
|
|
<form id="registerForm">
|
|
<div class="row g-2 g-md-3">
|
|
|
|
<!-- Row 1 — name -->
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_firstName">First name</label>
|
|
<input type="text" class="form-control" id="reg_firstName" placeholder="Jane" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_lastName">Last name</label>
|
|
<input type="text" class="form-control" id="reg_lastName" placeholder="Doe" required>
|
|
</div>
|
|
|
|
<!-- Row 2 — contact -->
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_email">Email</label>
|
|
<input type="email" class="form-control" id="reg_email" placeholder="jane.doe@example.com" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_mobile">Phone number</label>
|
|
<input type="tel" class="form-control" id="reg_mobile" placeholder="9876543210" required>
|
|
</div>
|
|
|
|
<!-- Row 3 — gender and status -->
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_gender">Gender</label>
|
|
<select class="form-select" id="reg_gender" required>
|
|
<option value="" disabled selected>Select gender</option>
|
|
<option value="female">Female</option>
|
|
<option value="male">Male</option>
|
|
<option value="other">Other</option>
|
|
<option value="unknown">Prefer not to say</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label d-block">Status</label>
|
|
<div class="status-row">
|
|
<div class="form-check mb-0">
|
|
<input class="form-check-input" type="radio" name="reg_status" id="reg_active" value="active" checked>
|
|
<label class="form-check-label" for="reg_active">Active</label>
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<input class="form-check-input" type="radio" name="reg_status" id="reg_inactive" value="inactive">
|
|
<label class="form-check-label" for="reg_inactive">Inactive</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 4 — credentials -->
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_username">Username</label>
|
|
<input type="text" class="form-control" id="reg_username" placeholder="jane.doe" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="form-label" for="reg_password">Password</label>
|
|
<input type="password" class="form-control" id="reg_password" placeholder="••••••••" minlength="6" required>
|
|
<div class="form-text">At least 6 characters.</div>
|
|
</div>
|
|
|
|
<div class="col-12 mt-3">
|
|
<button type="submit" class="btn btn-ci-primary w-100 fw-semibold" id="registerBtn">Register</button>
|
|
</div>
|
|
|
|
<!-- Sign-in link sits inside the panel, right under the button. The
|
|
form is only four rows now, so it's on screen without scrolling. -->
|
|
<div class="col-12">
|
|
<p class="register-signin">
|
|
Already registered?
|
|
<a href="login.html">Sign in →</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/config.js"></script>
|
|
<script src="js/register.js"></script>
|
|
</body>
|
|
</html>
|