bricks for first UI proposal
This commit is contained in:
parent
b0acd26a49
commit
4941ce5aaf
4 changed files with 338 additions and 0 deletions
|
|
@ -0,0 +1,3 @@
|
|||
# Who When Where
|
||||
|
||||
Link to [the wiki](https://git.hostux.fr/louis/who-when-where/wiki)
|
||||
110
frontend/index.html
Normal file
110
frontend/index.html
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<!--
|
||||
index.html: Homepage for who-when-where
|
||||
|
||||
If the user is "logged in":
|
||||
* Show active views (favourite ; recent ; "all" i.e. where the user appears)
|
||||
* Show account management options: name, profile picture, logout, removal of all data, private editing ID (to "log in" to another account)
|
||||
|
||||
If the user is not "logged in":
|
||||
* Show onboarding (profile picture+name) = "registration"
|
||||
* Show a small "existing private ID" form to "log in"
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Welcome to 3W - Who When Where?</title>
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
|
||||
<style>
|
||||
body {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
a.call-to-action {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#logout, [data-declineInvite], [data-trustUser] {
|
||||
color: red !important;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
[data-acceptInvite], [data-untrustUser] {
|
||||
color: green !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
|
||||
<a href="view.html" class="call-to-action">Create a Group</a>
|
||||
|
||||
<div>
|
||||
<!-- If pending requests -->
|
||||
<h2>Pending Requests</h2>
|
||||
|
||||
<ul>
|
||||
<!-- For-each -->
|
||||
<li>
|
||||
<strong>Potiron</strong>
|
||||
invited you to join
|
||||
<strong>fake Groupe des abeilles</strong>:
|
||||
<a data-acceptInvite="groupId" href="#accept">Accept</a> | <a data-declineInvite="groupId" href="#decline">Decline</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- If groups -->
|
||||
<h2>My Groups</h2>
|
||||
|
||||
<!-- For-each -->
|
||||
<ul>
|
||||
<li><a href="view.html#abeilles">Groupe des abeilles</a></li>
|
||||
<li><a href="view.html#group2">Groupe 2</a></li>
|
||||
<li><a href="view.html#group3">Super méga groupe</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2>Account Settings</h2>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="account_settings_psychopath"> <label for="account_settings_psychopath">I'm a psychopath</label>
|
||||
|
||||
<!-- Show only if checkbox "account_settings_psychopath" is checked -->
|
||||
<div>
|
||||
<p>
|
||||
Your answers are now private. Only the persons that you approve individually are allowed to see them.
|
||||
</p>
|
||||
<p style="font-style: italic;">
|
||||
As a consequence of your choice, you are not allowed to see answers from non-psychopaths members.<br>
|
||||
If you disable this option, they will reappear after 24 hours.
|
||||
</p>
|
||||
|
||||
<h3>Users in Your Groups That You Do Not Trust (Yet)</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Potiron
|
||||
<a data-trustUser="userId" href="#trust">Trust</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Trusted Users</h3>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Erell
|
||||
<a data-untrustUser="userId" href="#untrust">Untrust</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<a id="exportLoginKey" href="#export-login-key">Export my login key</a> |
|
||||
<a id="logout" href="#logout">Logout</a>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
frontend/main.css
Normal file
45
frontend/main.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
:root {
|
||||
--colour_sand: #e1b382;
|
||||
--colour_sand-shadow: #c89666;
|
||||
--colour_night: #2d545e;
|
||||
--colour_night-shadow: #12343b;
|
||||
--colour_primary: var(--colour_night);
|
||||
--colour_primary_text: #ffffff;
|
||||
|
||||
--colour_lightgrey: #f3f3f3;
|
||||
|
||||
}
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--colour_sand);
|
||||
font-family: sans-serif;
|
||||
min-height: 100vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > * {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--colour_night);
|
||||
}
|
||||
a:visited {
|
||||
color: var(--colour_night-shadow);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
180
frontend/view.html
Normal file
180
frontend/view.html
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
<!--
|
||||
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>
|
||||
Loading…
Reference in a new issue