export function createRegistrationFormHTML(): string {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background: #f8fafc;
padding: 20px;
}
.form-card {
max-width: 420px;
margin: 0 auto;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
padding: 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
h1 {
font-size: 26px;
font-weight: 600;
color: #0f172a;
text-align: center;
}
.field {
display: flex;
flex-direction: column;
gap: 8px;
}
label {
font-size: 14px;
font-weight: 600;
color: #334155;
}
input {
padding: 12px;
border-radius: 10px;
border: 1px solid #cbd5f5;
font-size: 15px;
}
input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
button {
padding: 12px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: #ffffff;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(99, 102, 241, 0.25);
}
.hint {
font-size: 13px;
color: #64748b;
text-align: center;
}
.status {
font-size: 14px;
color: #047857;
text-align: center;
display: none;
}
</style>
</head>
<body>
<form class="form-card" id="registration-form">
<h1>Create your account</h1>
<div class="field">
<label for="fullName">Full name</label>
<input id="fullName" name="fullName" type="text" autocomplete="name" placeholder="Alex Johnson" required />
</div>
<div class="field">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" placeholder="alex@example.com" required />
</div>
<div class="field">
<label for="password">Password</label>
<input id="password" name="password" type="password" autocomplete="new-password" placeholder="••••••••" required />
</div>
<button type="submit">Submit</button>
<p class="hint">We'll connect this form to our API soon.</p>
<p class="status" id="form-status" role="status">Thanks! We'll be in touch shortly.</p>
</form>
<script>
const form = document.getElementById('registration-form');
const statusMessage = document.getElementById('form-status');
form?.addEventListener('submit', (event) => {
event.preventDefault();
statusMessage.style.display = 'block';
});
</script>
</body>
</html>`;
}