60 lines
2.8 KiB
Cheetah
60 lines
2.8 KiB
Cheetah
{{define "onboard"}}
|
|
<div class="sg-container" style="justify-content: center;">
|
|
|
|
<div style="flex: 1; display: flex; align-items: flex-start; padding-top: 10vh; justify-content: center;">
|
|
<div class="data-card" style="padding: 48px; max-width: 400px; width: 100%;">
|
|
<div style="text-align: center; margin-bottom: 24px; font-size: 1.5rem;"><span style="font-weight: 700; color: var(--accent);">inou</span> <span style="font-weight: 400; color: var(--text-muted);">health</span></div>
|
|
<h1 style="font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 8px;">{{.T.create_dossier}}</h1>
|
|
<p style="text-align: center; color: var(--text-muted); font-weight: 300; margin-bottom: 32px;">{{.T.tell_us}}</p>
|
|
|
|
{{if .Error}}
|
|
<div class="error">{{.Error}}</div>
|
|
{{end}}
|
|
|
|
<form action="/onboard" method="POST" id="onboardForm">
|
|
<div class="form-group">
|
|
<label>{{.T.name}}</label>
|
|
<input type="text" name="name" required value="{{.Name}}" placeholder="First Last" autofocus tabindex="1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{.T.date_of_birth}}</label>
|
|
<input type="date" id="dob" name="dob" required value="{{.DOB}}" min="1900-01-01" max="2008-01-04" tabindex="2">
|
|
<div id="dobError" class="field-error" style="display:none; color: var(--danger); font-size: 0.85rem; margin-top: 4px;"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>{{.T.sex_at_birth}}</label>
|
|
<div class="radio-group">
|
|
<label class="radio-pill"><input type="radio" name="sex" value="F" required tabindex="3"{{if eq .Sex "F"}} checked{{end}}> {{.T.female}}</label>
|
|
<label class="radio-pill"><input type="radio" name="sex" value="M" required tabindex="4"{{if eq .Sex "M"}} checked{{end}}> {{.T.male}}</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-full" tabindex="5">{{.T.get_started}}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "footer"}}
|
|
|
|
</div>
|
|
<script>
|
|
var maxDate = new Date(); maxDate.setFullYear(maxDate.getFullYear() - 18);
|
|
var maxStr = maxDate.toISOString().split('T')[0];
|
|
document.getElementById('dob').max = maxStr;
|
|
document.getElementById('dob').addEventListener('change', function() {
|
|
var val = this.value;
|
|
var err = document.getElementById('dobError');
|
|
if (val < '1900-01-01') {
|
|
err.textContent = 'Date must be after 1900';
|
|
err.style.display = 'block';
|
|
this.setCustomValidity('Invalid date');
|
|
} else if (val > maxStr) {
|
|
err.textContent = 'You must be at least 18 years old';
|
|
err.style.display = 'block';
|
|
this.setCustomValidity('Invalid date');
|
|
} else {
|
|
err.style.display = 'none';
|
|
this.setCustomValidity('');
|
|
}
|
|
});
|
|
</script>
|
|
{{end}} |