2026-02-14 22:21:36 -08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Trip - Rooms</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: var(--wa-font-sans);
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
2026-02-14 22:27:49 -08:00
|
|
|
padding: 0.5rem;
|
2026-02-14 22:21:36 -08:00
|
|
|
opacity: 0;
|
2026-02-14 22:27:49 -08:00
|
|
|
font-size: 0.9rem;
|
2026-02-14 22:21:36 -08:00
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5rem;
|
2026-02-14 22:27:49 -08:00
|
|
|
margin-bottom: 0.75rem;
|
2026-02-14 22:21:36 -08:00
|
|
|
}
|
2026-02-14 22:27:49 -08:00
|
|
|
.header img { width: 32px; height: 32px; border-radius: 50%; }
|
|
|
|
|
.header .spacer { flex: 1; }
|
|
|
|
|
h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; }
|
|
|
|
|
h3 { margin: 0.5rem 0 0.25rem; font-size: 1rem; }
|
|
|
|
|
wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; }
|
|
|
|
|
wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; }
|
|
|
|
|
wa-button[size="small"]::part(base) { font-size: 0.8rem; }
|
|
|
|
|
wa-input::part(base) { min-height: 0; }
|
|
|
|
|
.student-header { display: flex; align-items: center; gap: 0.25rem; }
|
|
|
|
|
.student-header span { flex: 1; font-weight: bold; }
|
|
|
|
|
.parent-row { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; }
|
|
|
|
|
.add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; margin-left: 0.75rem; }
|
|
|
|
|
.add-row wa-input { flex: 1; }
|
|
|
|
|
.add-student { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
|
2026-02-14 22:21:36 -08:00
|
|
|
.add-student wa-input { flex: 1; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="signin" style="display: none; align-items: center; justify-content: center; height: 100vh;"></div>
|
|
|
|
|
<div id="main" style="display: none;">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<img data-bind="picture" alt="Profile">
|
|
|
|
|
<span data-bind="name"></span>
|
|
|
|
|
<span class="spacer"></span>
|
|
|
|
|
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
|
|
|
|
|
</div>
|
|
|
|
|
<h2 id="trip-name"></h2>
|
|
|
|
|
<h3>Add Student</h3>
|
|
|
|
|
<div class="add-student">
|
2026-02-14 22:27:49 -08:00
|
|
|
<wa-input id="new-student-name" placeholder="Name" size="small"></wa-input>
|
|
|
|
|
<wa-input id="new-student-email" placeholder="Email" size="small"></wa-input>
|
|
|
|
|
<wa-button size="small" id="add-student-btn">+</wa-button>
|
2026-02-14 22:21:36 -08:00
|
|
|
</div>
|
|
|
|
|
<h3>Students</h3>
|
|
|
|
|
<div id="students"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="module" src="/trip.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
