180 lines
No EOL
4.7 KiB
HTML
180 lines
No EOL
4.7 KiB
HTML
<!--
|
|
view.html: "View" page for who-when-where
|
|
|
|
For each users listed under the view, display:
|
|
* Name and profile picture
|
|
* Location (emoji)
|
|
* Availability (green-yellow-red)
|
|
for a certain time period (customisable via the interface).
|
|
|
|
Also displays a summary for each day, per location.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>3W - Who When Where?</title>
|
|
|
|
<link rel="stylesheet" href="main.css">
|
|
|
|
<style>
|
|
table#view_table {
|
|
border-collapse: collapse;
|
|
}
|
|
table#view_table th, table#view_table td {
|
|
padding: 1em 1.2em;
|
|
font-weight: normal;
|
|
}
|
|
table#view_table th:first-child {
|
|
text-align: right;
|
|
}
|
|
|
|
table#view_table thead tr, table#view_table tfoot tr {
|
|
background-color: var(--colour_primary);
|
|
color: var(--colour_primary_text);
|
|
text-align: left;
|
|
}
|
|
table#view_table thead th {
|
|
text-align: center;
|
|
}
|
|
table#view_table thead th:first-child {
|
|
font-weight: bold;
|
|
}
|
|
table#view_table thead th.me {
|
|
font-weight: bold;
|
|
}
|
|
|
|
table#view_table tbody tr {
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
table#view_table tbody th {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
table#view_table tbody th span {
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
}
|
|
table#view_table tbody tr:nth-of-type(odd) {
|
|
background-color: var(--colour_lightgrey);
|
|
}
|
|
table#view_table tbody tr:nth-of-type(even) {
|
|
background-color: #ffffff;
|
|
}
|
|
table#view_table tbody td.me {
|
|
cursor: pointer;
|
|
}
|
|
|
|
table#view_table tbody td {
|
|
text-align: center;
|
|
}
|
|
|
|
table#view_table td .where {
|
|
font-size: 2.5em;
|
|
position: relative;
|
|
}
|
|
table#view_table td:has(.modifier) {
|
|
padding-right: 1.55em;
|
|
}
|
|
|
|
|
|
i.modifier {
|
|
font-style: normal;
|
|
font-size: 0.33em;
|
|
width: 0.33em;
|
|
position: absolute;
|
|
right: 0.33em;
|
|
}
|
|
i.modifier-top {
|
|
top: -0em;
|
|
}
|
|
i.modifier-bottom {
|
|
bottom: -0em;
|
|
}
|
|
i.modifier-cross::before {
|
|
display: block;
|
|
width: 1em;
|
|
position: absolute;
|
|
top: -0.25em;
|
|
text-align: center;
|
|
|
|
font-size: 1.5em;
|
|
content: "✗";
|
|
color: rgba(255, 0, 0, 0.7);
|
|
}
|
|
|
|
|
|
table#view_table tfoot {
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table id="view_table">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<!-- Group name -->
|
|
Les abeilles en test
|
|
</th>
|
|
<!-- For-each group member -->
|
|
<th>Alice</th>
|
|
<th class="me">Moi (Loulou)</th>
|
|
<th>Bob</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- For-each date -->
|
|
<tr>
|
|
<th>
|
|
Date #1
|
|
<br>
|
|
<span title="1🏠 + 1🚅">🇸🇪 2</span>
|
|
<span title="1🏠">🗼 1</span>
|
|
</th>
|
|
<!-- For-each group member -->
|
|
<td>
|
|
<span class="where">
|
|
🗼
|
|
</span>
|
|
</td>
|
|
|
|
<td class="me">
|
|
<span class="where">
|
|
🇸🇪
|
|
<i class="modifier modifier-bottom modifier-cross">🚅</i>
|
|
</span>
|
|
</td>
|
|
|
|
<td>
|
|
<span class="where">
|
|
🥨
|
|
<i class="modifier modifier-top modifier-cross">🏠</i>
|
|
<i class="modifier modifier-bottom modifier-cross">🚅</i>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th>
|
|
<!-- Total -->
|
|
3 group members
|
|
</th>
|
|
|
|
<!-- Colspan = number of members -->
|
|
<th colspan="3"></th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
<p>
|
|
So far, this group has planned between 2022-08-01 and 2024-11-25.
|
|
</p>
|
|
|
|
<p>
|
|
<a href="index.html">Take me home!</a>
|
|
</p>
|
|
</body>
|
|
</html> |