|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Sign Up - AI Coach</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Roboto', Arial, sans-serif; |
|
|
background: linear-gradient(135deg, #f0f2f5 0%, #e9ecef 100%); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
height: 100vh; |
|
|
margin: 0; |
|
|
color: #2d3748; |
|
|
} |
|
|
.signup-container { |
|
|
background-color: #fff; |
|
|
padding: 40px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
|
width: 100%; |
|
|
max-width: 400px; |
|
|
text-align: center; |
|
|
} |
|
|
h2 { |
|
|
margin-bottom: 30px; |
|
|
color: #1a3c7a; |
|
|
font-size: 24px; |
|
|
font-weight: 700; |
|
|
} |
|
|
.form-group { |
|
|
margin-bottom: 20px; |
|
|
text-align: left; |
|
|
} |
|
|
label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-size: 14px; |
|
|
font-weight: 500; |
|
|
color: #4a5568; |
|
|
} |
|
|
input { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
border: 2px solid #e2e8f0; |
|
|
border-radius: 8px; |
|
|
font-size: 16px; |
|
|
box-sizing: border-box; |
|
|
transition: border-color 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
input:focus { |
|
|
border-color: #ed8936; |
|
|
outline: none; |
|
|
box-shadow: 0 0 8px rgba(237, 137, 54, 0.3); |
|
|
} |
|
|
button { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
background: linear-gradient(to right, #f6ad55, #ed8936); |
|
|
color: #fff; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
font-size: 16px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: background 0.3s ease, transform 0.1s ease; |
|
|
} |
|
|
button:hover { |
|
|
background: linear-gradient(to right, #ed8936, #dd6b20); |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.error, .success { |
|
|
margin-bottom: 20px; |
|
|
padding: 10px; |
|
|
border-radius: 8px; |
|
|
font-size: 14px; |
|
|
} |
|
|
.error { |
|
|
background-color: #f56565; |
|
|
color: #fff; |
|
|
} |
|
|
.success { |
|
|
background-color: #48bb78; |
|
|
color: #fff; |
|
|
} |
|
|
.link { |
|
|
margin-top: 20px; |
|
|
font-size: 14px; |
|
|
color: #4a5568; |
|
|
} |
|
|
.link a { |
|
|
color: #ed8936; |
|
|
text-decoration: none; |
|
|
font-weight: 500; |
|
|
} |
|
|
.link a:hover { |
|
|
text-decoration: underline; |
|
|
} |
|
|
@media (max-width: 500px) { |
|
|
.signup-container { |
|
|
padding: 20px; |
|
|
margin: 20px; |
|
|
} |
|
|
h2 { |
|
|
font-size: 20px; |
|
|
} |
|
|
input, button { |
|
|
font-size: 14px; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body> |
|
|
<div class="signup-container"> |
|
|
<h2>Sign Up for AI Coach</h2> |
|
|
<div id="error" class="error" style="display: none;"></div> |
|
|
<div id="success" class="success" style="display: none;"></div> |
|
|
<form id="signup-form"> |
|
|
<div class="form-group"> |
|
|
<label for="supervisor_id">Supervisor ID</label> |
|
|
<input type="text" id="supervisor_id" name="supervisor_id" placeholder="Enter Supervisor ID" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="password">Password</label> |
|
|
<input type="password" id="password" name="password" placeholder="Enter password" required> |
|
|
</div> |
|
|
<button type="submit">Sign Up</button> |
|
|
</form> |
|
|
<div class="link"> |
|
|
Already have an account? <a href="/login">Login</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function showMessage(type, message) { |
|
|
const element = document.getElementById(type); |
|
|
element.textContent = message; |
|
|
element.style.display = 'block'; |
|
|
setTimeout(() => { |
|
|
element.style.display = 'none'; |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
document.getElementById('signup-form').addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
const supervisor_id = document.getElementById('supervisor_id').value.trim(); |
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/signup', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ supervisor_id, password }) |
|
|
}); |
|
|
const result = await response.json(); |
|
|
if (result.status === 'success') { |
|
|
showMessage('success', result.message); |
|
|
setTimeout(() => { |
|
|
window.location.href = '/'; |
|
|
}, 1000); |
|
|
} else { |
|
|
showMessage('error', result.message); |
|
|
} |
|
|
} catch (error) { |
|
|
showMessage('error', 'Error during signup: ' + error.message); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
