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; }
|
2026-02-15 17:40:39 -08:00
|
|
|
h2 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; color: var(--wa-color-brand-60); }
|
|
|
|
|
wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; --border-width: 0; --border-radius: 0.5rem; }
|
|
|
|
|
wa-card::part(base) { background: var(--wa-color-neutral-50); }
|
2026-02-14 22:27:49 -08:00
|
|
|
wa-input::part(base) { min-height: 0; }
|
2026-02-15 17:40:39 -08:00
|
|
|
wa-details { margin-top: 0.5rem; font-size: 1rem; --spacing: 0.6rem; }
|
|
|
|
|
wa-card wa-details { font-size: 0.8rem; }
|
|
|
|
|
wa-details::part(summary) { font-weight: bold; }
|
|
|
|
|
wa-details::part(content) { padding-top: 0.2rem; }
|
|
|
|
|
.student-name { font-weight: bold; display: block; margin-bottom: 0.3rem; }
|
|
|
|
|
.tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.3rem; }
|
|
|
|
|
wa-tag { transition: opacity var(--wa-transition-normal); }
|
|
|
|
|
wa-input.email { max-width: 20rem; }
|
|
|
|
|
.add-form { display: flex; flex-direction: column; gap: 0.3rem; max-width: 20rem; }
|
|
|
|
|
.add-form wa-button { align-self: flex-start; }
|
|
|
|
|
.close-btn {
|
|
|
|
|
all: unset;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
padding: 0 0.3rem;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
}
|
|
|
|
|
wa-card:hover .close-btn { opacity: 0.25; }
|
|
|
|
|
.close-btn:hover { opacity: 1 !important; color: var(--wa-color-danger-50, #dc3545); }
|
|
|
|
|
.input-action {
|
|
|
|
|
background: none;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
padding: 0 0.2rem;
|
|
|
|
|
}
|
|
|
|
|
.input-action:hover { opacity: 1; }
|
2026-02-14 22:21:36 -08:00
|
|
|
</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>
|
|
|
|
|
<div id="students"></div>
|
2026-02-15 17:40:39 -08:00
|
|
|
<wa-details summary="Add Student">
|
|
|
|
|
<div class="add-form">
|
|
|
|
|
<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">Add Student</wa-button>
|
|
|
|
|
</div>
|
|
|
|
|
</wa-details>
|
2026-02-14 22:21:36 -08:00
|
|
|
</div>
|
|
|
|
|
<script type="module" src="/trip.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
