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