79 lines
2.6 KiB
Cheetah
Executable File
79 lines
2.6 KiB
Cheetah
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>inou</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<a href="/" class="logo">inou</a>
|
|
<nav>
|
|
<a href="/dashboard" class="active">Profiles</a>
|
|
<a href="/settings">Settings</a>
|
|
<a href="/help">Help</a>
|
|
<span class="account">{{.Email}}</span>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<h1>Profiles</h1>
|
|
<p class="subtitle">Manage imaging for yourself or family members</p>
|
|
<div class="profiles" id="profiles">
|
|
<div class="card add" onclick="openModal()">
|
|
<div class="plus">+</div>
|
|
<span>Add profile</span>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div class="overlay" id="modal" onclick="closeOutside(event)">
|
|
<div class="modal">
|
|
<h2>Add profile</h2>
|
|
<p class="subtitle">Create a profile to upload and manage exams</p>
|
|
<form hx-post="/api/profiles" hx-target="#profiles" hx-swap="afterbegin" hx-on::after-request="done(event)">
|
|
<div class="field">
|
|
<label for="name">Name</label>
|
|
<input type="text" id="name" name="name" placeholder="e.g. Sophia" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="dob">Date of birth</label>
|
|
<input type="date" id="dob" name="dob" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="sex">Sex at birth</label>
|
|
<select id="sex" name="sex" required>
|
|
<option value="">Select...</option>
|
|
<option value="F">Female</option>
|
|
<option value="M">Male</option>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="species">Species</label>
|
|
<select id="species" name="species" required>
|
|
<option value="human" selected>Human</option>
|
|
<option value="dog">Dog</option>
|
|
<option value="cat">Cat</option>
|
|
<option value="horse">Horse</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="button" class="btn secondary" onclick="closeModal()">Cancel</button>
|
|
<button type="submit" class="btn primary">Create profile</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="toast" id="toast"></div>
|
|
<script>
|
|
function openModal(){document.getElementById('modal').classList.add('active')}
|
|
function closeModal(){document.getElementById('modal').classList.remove('active')}
|
|
function closeOutside(e){if(e.target.id==='modal')closeModal()}
|
|
function done(e){if(e.detail.successful){closeModal();e.target.reset();toast('Profile created')}}
|
|
function toast(m){var t=document.getElementById('toast');t.textContent=m;t.classList.add('show');setTimeout(function(){t.classList.remove('show')},3000)}
|
|
document.addEventListener('keydown',function(e){if(e.key==='Escape')closeModal()})
|
|
</script>
|
|
</body>
|
|
</html>
|