From 4941ce5aaff2a0439cc1ecfc2a4216ec34619028 Mon Sep 17 00:00:00 2001
From: lgpilot <lgpilot@hostux.fr>
Date: Tue, 2 Jan 2024 22:49:27 +0100
Subject: [PATCH] bricks for first UI proposal

---
 README.md           |   3 +
 frontend/index.html | 110 +++++++++++++++++++++++++++
 frontend/main.css   |  45 +++++++++++
 frontend/view.html  | 180 ++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 338 insertions(+)
 create mode 100644 frontend/index.html
 create mode 100644 frontend/main.css
 create mode 100644 frontend/view.html
diff --git a/README.md b/README.md
index e69de29..b006dee 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+# Who When Where
+
+Link to [the wiki](https://git.hostux.fr/louis/who-when-where/wiki)
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..ad2a7a7
--- /dev/null
+++ b/frontend/index.html
@@ -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>
\ No newline at end of file
diff --git a/frontend/main.css b/frontend/main.css
new file mode 100644
index 0000000..e52606a
--- /dev/null
+++ b/frontend/main.css
@@ -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;
+}
\ No newline at end of file
diff --git a/frontend/view.html b/frontend/view.html
new file mode 100644
index 0000000..64f6d23
--- /dev/null
+++ b/frontend/view.html
@@ -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>
\ No newline at end of file

+ + Les abeilles en test +	Alice	Moi (Loulou)	Bob
+ Date #1 + + 🇸🇪 2 + 🗼 1 +	+ + 🗼 + +	+ + 🇸🇪 + 🚅 + +	+ + 🥨 + 🏠 + 🚅 + +
+ + 3 group members +