164 lines
5.1 KiB
HTML
164 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Login – Journey Mapper</title>
|
||
|
||
<!-- Open Props CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
|
||
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
|
||
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
||
<!-- Google Fonts -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Responsive Design -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: var(--font-sans);
|
||
background: var(--gray-0);
|
||
color: var(--gray-9);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
padding: var(--size-4);
|
||
}
|
||
|
||
.login-container {
|
||
max-width: 400px;
|
||
width: 100%;
|
||
background: var(--surface-1);
|
||
border-radius: var(--radius-3);
|
||
padding: var(--size-6);
|
||
box-shadow: var(--shadow-4);
|
||
}
|
||
|
||
.login-header {
|
||
text-align: center;
|
||
margin-bottom: var(--size-6);
|
||
}
|
||
|
||
.login-header h1 {
|
||
color: var(--indigo-8);
|
||
margin: 0;
|
||
font-size: var(--font-size-5);
|
||
}
|
||
|
||
.auth-tabs {
|
||
display: flex;
|
||
gap: var(--size-2);
|
||
border-bottom: 1px solid var(--surface-4);
|
||
margin-bottom: var(--size-4);
|
||
}
|
||
.auth-tab {
|
||
padding: var(--size-2) var(--size-4);
|
||
cursor: pointer;
|
||
background: none;
|
||
border: none;
|
||
font-size: var(--font-size-2);
|
||
font-weight: var(--font-weight-5);
|
||
color: var(--gray-6);
|
||
transition: all 0.2s;
|
||
}
|
||
.auth-tab.active {
|
||
color: var(--indigo-7);
|
||
border-bottom: 2px solid var(--indigo-7);
|
||
}
|
||
.auth-form {
|
||
display: none;
|
||
}
|
||
.auth-form.active {
|
||
display: block;
|
||
}
|
||
.form-group {
|
||
margin-bottom: var(--size-4);
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: var(--size-1);
|
||
font-weight: var(--font-weight-5);
|
||
}
|
||
input {
|
||
width: 100%;
|
||
padding: var(--size-2) var(--size-3);
|
||
border: 1px solid var(--surface-4);
|
||
border-radius: var(--radius-2);
|
||
background: var(--surface-2);
|
||
font-size: var(--font-size-2);
|
||
}
|
||
.btn {
|
||
width: 100%;
|
||
padding: var(--size-2);
|
||
border: none;
|
||
border-radius: var(--radius-2);
|
||
background: var(--indigo-7);
|
||
color: white;
|
||
font-size: var(--font-size-2);
|
||
font-weight: var(--font-weight-5);
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.btn:hover {
|
||
background: var(--indigo-8);
|
||
}
|
||
.toast {
|
||
position: fixed;
|
||
bottom: var(--size-4);
|
||
right: var(--size-4);
|
||
background: var(--green-7);
|
||
color: white;
|
||
padding: var(--size-2) var(--size-4);
|
||
border-radius: var(--radius-2);
|
||
display: none;
|
||
z-index: 1100;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-container">
|
||
<div class="login-header">
|
||
<h1><i class="fas fa-map-marked-alt"></i> Journey Mapper</h1>
|
||
<p>Sign in to continue</p>
|
||
</div>
|
||
<div class="auth-tabs">
|
||
<button class="auth-tab active" data-tab="login">Login</button>
|
||
<button class="auth-tab" data-tab="register">Register</button>
|
||
</div>
|
||
<div id="login-form" class="auth-form active">
|
||
<div class="form-group">
|
||
<label>Username</label>
|
||
<input type="text" id="login-username" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Password</label>
|
||
<input type="password" id="login-password" required>
|
||
</div>
|
||
<button id="login-submit" class="btn">Login</button>
|
||
</div>
|
||
<div id="register-form" class="auth-form">
|
||
<div class="form-group">
|
||
<label>Username</label>
|
||
<input type="text" id="register-username" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Password</label>
|
||
<input type="password" id="register-password" required>
|
||
</div>
|
||
<button id="register-submit" class="btn">Register</button>
|
||
</div>
|
||
</div>
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<script src="js/auth.js"></script>
|
||
<script src="js/login.js"></script>
|
||
</body>
|
||
</html>
|