110 lines
No EOL
3.4 KiB
HTML
110 lines
No EOL
3.4 KiB
HTML
<!--
|
|
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> |