853 lines
36 KiB
HTML
853 lines
36 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
http-equiv="Content-Security-Policy"
|
|
content="default-src 'self'; style-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; font-src https://cdnjs.cloudflare.com; script-src 'self' https://cdn.jsdelivr.net; img-src 'self' data: blob: https: http:;"
|
|
/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Capsule</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
|
|
integrity="sha384-QI8z31KmtR+tk1MYi0DfgxrjYgpTpLLol3bqZA/Q1Y8BvH+6k7/Huoj38gQOaCS7"
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link rel="stylesheet" href="./src/styles.css" />
|
|
</head>
|
|
<body data-shell="login">
|
|
<header class="text-bg-dark">
|
|
<div class="capsule-header p-3">
|
|
<a href="#/" class="capsule-brand text-white text-decoration-none d-flex align-items-center" data-route="home">
|
|
<img id="header-logo" class="capsule-logo" width="40" height="40" alt="" hidden />
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
|
<span class="brand-name">Capsule</span>
|
|
</a>
|
|
|
|
<form id="header-search" class="capsule-search" role="search">
|
|
<fieldset>
|
|
<legend class="visually-hidden">Search the site</legend>
|
|
<label class="visually-hidden" for="search-resource">Search in</label>
|
|
<label class="visually-hidden" for="search-q">Search terms</label>
|
|
<div class="input-group">
|
|
<select class="form-select flex-grow-0 w-auto" name="resource" id="search-resource">
|
|
<option value="all">All</option>
|
|
<option value="posts">Posts</option>
|
|
<option value="pages">Pages</option>
|
|
</select>
|
|
<input
|
|
type="search"
|
|
class="form-control"
|
|
name="q"
|
|
id="search-q"
|
|
placeholder="Search"
|
|
autocomplete="off"
|
|
/>
|
|
<button type="submit" class="btn btn-primary" aria-label="Search">
|
|
<i class="fa fa-fw fa-search" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
<div class="capsule-account">
|
|
<div class="dropdown nav-item mx-2">
|
|
<a
|
|
href="#"
|
|
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
|
id="notificationsDropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
aria-label="Notifications"
|
|
>
|
|
<i class="fa fa-fw fa-bell" aria-hidden="true"></i>
|
|
<span id="notification-badge" class="badge bg-danger rounded-pill">2</span>
|
|
</a>
|
|
<ul
|
|
id="notification-menu"
|
|
class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow"
|
|
data-bs-theme="dark"
|
|
aria-labelledby="notificationsDropdown"
|
|
>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a href="#/notifications" class="dropdown-item text-center" data-route="notifications">
|
|
See All Notifications
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown nav-item mx-2">
|
|
<a
|
|
href="#"
|
|
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
|
id="messagesDropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-expanded="false"
|
|
aria-label="Messages"
|
|
>
|
|
<i class="fa fa-fw fa-envelope" aria-hidden="true"></i>
|
|
<span id="message-badge" class="badge bg-danger rounded-pill">1</span>
|
|
</a>
|
|
<ul
|
|
id="message-menu"
|
|
class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow"
|
|
data-bs-theme="dark"
|
|
aria-labelledby="messagesDropdown"
|
|
>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a href="#/messages" class="dropdown-item text-center" data-route="messages">All messages</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown nav-item mx-2">
|
|
<a
|
|
href="#"
|
|
class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
|
id="userDropdown"
|
|
data-bs-toggle="dropdown"
|
|
aria-label="Account menu"
|
|
aria-expanded="false"
|
|
>
|
|
<img
|
|
id="header-avatar"
|
|
src=""
|
|
alt=""
|
|
width="32"
|
|
height="32"
|
|
class="rounded-circle me-2"
|
|
hidden
|
|
/>
|
|
<i id="header-avatar-fallback" class="fa fa-user me-2" aria-hidden="true"></i>
|
|
<strong id="header-username">Account</strong>
|
|
</a>
|
|
<ul
|
|
class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow"
|
|
data-bs-theme="dark"
|
|
>
|
|
<li>
|
|
<a href="#/profile" class="dropdown-item" data-route="profile">
|
|
<i class="fa fa-fw fa-user"></i> Profile
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/notifications" class="dropdown-item" data-route="notifications">
|
|
<i class="fa fa-fw fa-bell"></i> Notifications
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/messages" class="dropdown-item" data-route="messages">
|
|
<i class="fa fa-fw fa-envelope"></i> Messages
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#/settings" class="dropdown-item" data-route="settings">
|
|
<i class="fa fa-fw fa-gear"></i> Settings
|
|
</a>
|
|
</li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<a id="link-email" class="dropdown-item" href="#" target="_blank" rel="noreferrer">
|
|
<i class="fa fa-fw fa-envelope"></i> Change email
|
|
<i class="fa fa-fw fa-external-link ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a id="link-password" class="dropdown-item" href="#" target="_blank" rel="noreferrer">
|
|
<i class="fa fa-fw fa-lock"></i> Change password
|
|
<i class="fa fa-fw fa-external-link ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a id="link-phone" class="dropdown-item" href="#" target="_blank" rel="noreferrer">
|
|
<i class="fa fa-fw fa-phone"></i> Phone
|
|
<i class="fa fa-fw fa-external-link ms-1"></i>
|
|
</a>
|
|
</li>
|
|
<li><hr class="dropdown-divider" /></li>
|
|
<li>
|
|
<button id="logout-button" type="button" class="dropdown-item">
|
|
<i class="fa fa-fw fa-power-off"></i> Log Out
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="capsule-mainnav" aria-label="Main">
|
|
<ul class="capsule-mainnav-list">
|
|
<li><a href="#/game" data-nav="game">Game</a></li>
|
|
<li><a href="#/friends" data-nav="friends">Friends</a></li>
|
|
<li><a href="#/cabal" data-nav="cabal">Cabal</a></li>
|
|
<li><a href="#/hiscores" data-nav="hiscores">HiScores</a></li>
|
|
<li><a href="#/shop" data-nav="shop">Shop</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section id="view-login" class="view" hidden>
|
|
<div class="container pt-4">
|
|
<div class="mx-auto p-4 rounded context-main-bg capsule-login-card">
|
|
<h1 class="h3 mb-3 text-center">Connect a site</h1>
|
|
<p class="text-muted text-center mb-4">
|
|
Sign in to any Tempus Project install. Capsule talks to that site?s API and keeps
|
|
the session on this machine.
|
|
</p>
|
|
<form id="login-form">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="login-site">Site URL</label>
|
|
<input
|
|
id="login-site"
|
|
class="form-control"
|
|
name="siteUrl"
|
|
type="url"
|
|
autocomplete="url"
|
|
placeholder="https://example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="login-username">Username</label>
|
|
<input
|
|
id="login-username"
|
|
class="form-control"
|
|
name="username"
|
|
type="text"
|
|
autocomplete="username"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="login-password">Password</label>
|
|
<input
|
|
id="login-password"
|
|
class="form-control"
|
|
name="password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
</div>
|
|
<p id="login-error" class="text-danger" hidden></p>
|
|
<button id="login-submit" class="btn btn-primary w-100" type="submit">
|
|
<i class="fa fa-fw fa-right-to-bracket"></i> Sign in
|
|
</button>
|
|
</form>
|
|
<details id="token-panel" class="mt-4">
|
|
<summary>Use an API token instead</summary>
|
|
<form id="token-form" class="mt-3">
|
|
<p class="small text-muted">
|
|
Paste a personal or app token from Admin ? Tokens. Username is optional until the
|
|
API can identify you.
|
|
</p>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="token-site">Site URL</label>
|
|
<input
|
|
id="token-site"
|
|
class="form-control"
|
|
name="siteUrl"
|
|
type="url"
|
|
autocomplete="url"
|
|
placeholder="https://example.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="token-value">API token</label>
|
|
<input id="token-value" class="form-control" name="token" type="password" autocomplete="off" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="token-username">Username <span class="text-muted">(optional)</span></label>
|
|
<input id="token-username" class="form-control" name="username" type="text" autocomplete="username" />
|
|
</div>
|
|
<p id="token-error" class="text-danger" hidden></p>
|
|
<button id="token-submit" class="btn btn-outline-primary w-100" type="submit">
|
|
Connect with token
|
|
</button>
|
|
</form>
|
|
</details>
|
|
<p class="text-center mt-4 mb-0">
|
|
<button id="preview-shell" type="button" class="btn btn-link">
|
|
Preview the desktop chrome
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-mfa" class="view" hidden>
|
|
<div class="container pt-4">
|
|
<div class="mx-auto p-4 rounded context-main-bg capsule-login-card">
|
|
<h1 class="h3 mb-3 text-center">Verify it's you</h1>
|
|
<p id="mfa-prompt" class="text-muted text-center mb-4">
|
|
Choose how you want to authenticate.
|
|
</p>
|
|
<form id="mfa-method-form" hidden>
|
|
<fieldset>
|
|
<legend class="visually-hidden">Authentication method</legend>
|
|
<div id="mfa-methods" class="mb-3"></div>
|
|
</fieldset>
|
|
<p id="mfa-method-error" class="text-danger" hidden></p>
|
|
<button id="mfa-method-submit" class="btn btn-primary w-100" type="submit">
|
|
Continue
|
|
</button>
|
|
</form>
|
|
<form id="mfa-code-form" hidden>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="mfa-code">Authentication code</label>
|
|
<input
|
|
id="mfa-code"
|
|
class="form-control"
|
|
name="authCode"
|
|
type="text"
|
|
inputmode="numeric"
|
|
autocomplete="one-time-code"
|
|
maxlength="8"
|
|
required
|
|
/>
|
|
</div>
|
|
<p id="mfa-code-error" class="text-danger" hidden></p>
|
|
<button id="mfa-code-submit" class="btn btn-primary w-100" type="submit">
|
|
Continue
|
|
</button>
|
|
<button id="mfa-reset" class="btn btn-link w-100 mt-2" type="button" hidden>
|
|
Choose another method
|
|
</button>
|
|
</form>
|
|
<p class="text-center mt-4 mb-0">
|
|
<button id="mfa-cancel" type="button" class="btn btn-link">Cancel</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-stub" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="col-12 col-lg-10 mx-auto p-4 rounded shadow-sm context-main-bg">
|
|
<h1 class="h3" id="stub-title"></h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-home" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="col-12 col-lg-10 mx-auto p-4 rounded shadow-sm context-main-bg">
|
|
<h1 class="h3">Dashboard</h1>
|
|
<p class="text-muted" id="home-note"></p>
|
|
<p class="mb-0">
|
|
Connected to <a id="home-site" href="#" target="_blank" rel="noreferrer"></a>
|
|
as <strong id="home-username"></strong>.
|
|
</p>
|
|
<p id="home-plugins" class="small text-muted mb-0"></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-contact" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="context-main-bg container py-2 my-2 py-lg-4 my-lg-4">
|
|
<h1 class="h2 text-center mb-4">Contact Us</h1>
|
|
<p id="contact-unavailable" class="text-muted text-center" hidden></p>
|
|
<div id="contact-body">
|
|
<div class="col-12 col-lg-6 offset-lg-3">
|
|
<p class="text-center text-lg-start">
|
|
Here at <strong id="contact-sitename">this site</strong>, we highly value your
|
|
feedback. We constantly strive to provide our users with the highest level of
|
|
quality in everything we do.
|
|
</p>
|
|
<p class="text-center text-lg-start">
|
|
If you would like to provide any suggestions or comments on our service, we ask
|
|
that you please fill out the quick form below and let us know what's on your mind.
|
|
</p>
|
|
</div>
|
|
<form id="contact-form">
|
|
<div class="mb-3 row">
|
|
<label for="contact-name" class="col-lg-3 col-form-label text-lg-end">Name:</label>
|
|
<div class="col-lg-6">
|
|
<input
|
|
id="contact-name"
|
|
class="form-control"
|
|
name="name"
|
|
type="text"
|
|
required
|
|
autocomplete="name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="contact-email" class="col-lg-3 col-form-label text-lg-end">
|
|
E-mail: (optional)
|
|
</label>
|
|
<div class="col-lg-6">
|
|
<input
|
|
id="contact-email"
|
|
class="form-control"
|
|
name="email"
|
|
type="email"
|
|
autocomplete="email"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3 row">
|
|
<label for="contact-entry" class="col-lg-3 col-form-label text-lg-end">Feedback:</label>
|
|
<div class="col-lg-6">
|
|
<textarea
|
|
id="contact-entry"
|
|
class="form-control"
|
|
name="entry"
|
|
rows="6"
|
|
maxlength="2000"
|
|
required
|
|
></textarea>
|
|
<small class="form-text text-muted">Max: 2000 characters</small>
|
|
</div>
|
|
</div>
|
|
<p id="contact-status" class="small text-center" hidden></p>
|
|
<div class="text-center">
|
|
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-bugreport" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="col-12 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
|
|
<h1 class="h2 text-center mb-4">Report a Bug</h1>
|
|
<hr />
|
|
<p id="bug-unavailable" class="text-muted text-center" hidden></p>
|
|
<div id="bug-body">
|
|
<p class="text-center text-sm-start">
|
|
Thank you for visiting our bug reporting page. We value our users' input highly and
|
|
in an effort to better serve your needs, please fill out the form below to help us
|
|
address this issue.
|
|
</p>
|
|
<p class="text-center text-sm-start">
|
|
We read each and every bug report submitted, and by submitting this form you allow
|
|
us to send you a follow-up email.
|
|
</p>
|
|
<form id="bugreport-form">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="bug-url">Page you were trying to reach:</label>
|
|
<input
|
|
id="bug-url"
|
|
class="form-control"
|
|
name="url"
|
|
type="url"
|
|
aria-describedby="bug-url-help"
|
|
required
|
|
/>
|
|
<small id="bug-url-help" class="form-text text-muted">
|
|
This is the URL of the page you actually received the error.
|
|
</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="bug-ourl">Page you were on:</label>
|
|
<input
|
|
id="bug-ourl"
|
|
class="form-control"
|
|
name="ourl"
|
|
type="url"
|
|
aria-describedby="bug-ourl-help"
|
|
/>
|
|
<small id="bug-ourl-help" class="form-text text-muted">
|
|
This is the URL of the page you were on before you received the error.
|
|
</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<p class="form-label">*Has this happened more than once?</p>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="repeat"
|
|
id="bug-repeat-no"
|
|
value="false"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="bug-repeat-no">No</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="repeat"
|
|
id="bug-repeat-yes"
|
|
value="true"
|
|
/>
|
|
<label class="form-check-label" for="bug-repeat-yes">Yes</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="bug-entry">Describe the error you received:</label>
|
|
<textarea
|
|
id="bug-entry"
|
|
class="form-control"
|
|
name="entry"
|
|
rows="6"
|
|
maxlength="2000"
|
|
aria-describedby="bug-entry-help"
|
|
required
|
|
></textarea>
|
|
<small id="bug-entry-help" class="form-text text-muted">(max: 2000 characters)</small>
|
|
</div>
|
|
<p id="bug-status" class="small text-center" hidden></p>
|
|
<div class="text-center">
|
|
<button class="btn btn-primary btn-lg" type="submit">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-search" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="col-12 col-lg-10 mx-auto p-4 rounded shadow-sm context-main-bg">
|
|
<h1 class="h3">Search</h1>
|
|
<p class="text-muted" id="search-summary"></p>
|
|
<p id="search-error" class="text-danger" hidden></p>
|
|
<div id="search-results" class="list-group mb-3"></div>
|
|
<nav id="search-pager" class="d-flex gap-2" hidden>
|
|
<button id="search-prev" type="button" class="btn btn-sm btn-outline-primary">Previous</button>
|
|
<span id="search-page-label" class="align-self-center small text-muted"></span>
|
|
<button id="search-next" type="button" class="btn btn-sm btn-outline-primary">Next</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-notifications" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="col-12 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
|
|
<h1 class="h3 text-center">Notifications</h1>
|
|
<p id="notifications-empty" class="text-muted text-center" hidden></p>
|
|
<table class="table">
|
|
<tbody id="notification-list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-messages" class="view" hidden>
|
|
<div class="m-2 m-lg-4">
|
|
<div class="col-12 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
|
|
<div id="messages-inbox">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h1 class="h3 mb-0">Messages</h1>
|
|
<a href="#/messages/new" class="btn btn-sm btn-primary" id="messages-new">
|
|
<i class="fa fa-fw fa-pen"></i> New message
|
|
</a>
|
|
</div>
|
|
<p id="messages-empty" class="text-muted" hidden></p>
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>With</th>
|
|
<th>Last message</th>
|
|
<th>Updated</th>
|
|
<th class="visually-hidden">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="message-list"></tbody>
|
|
</table>
|
|
</div>
|
|
<div id="messages-compose" hidden>
|
|
<h1 class="h3">New message</h1>
|
|
<form id="compose-form">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="compose-to">Username</label>
|
|
<input id="compose-to" class="form-control" name="toUser" type="text" autocomplete="username" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="compose-body">Message</label>
|
|
<textarea id="compose-body" class="form-control" name="message" rows="4" required></textarea>
|
|
</div>
|
|
<p id="compose-error" class="text-danger" hidden></p>
|
|
<button class="btn btn-primary" type="submit">Send</button>
|
|
<a href="#/messages" class="btn btn-link">Cancel</a>
|
|
</form>
|
|
</div>
|
|
<div id="messages-thread" hidden>
|
|
<button id="thread-back" type="button" class="btn btn-link px-0 mb-2">
|
|
<i class="fa fa-fw fa-arrow-left"></i> Inbox
|
|
</button>
|
|
<h1 class="h3" id="thread-title"></h1>
|
|
<p id="thread-error" class="text-danger" hidden></p>
|
|
<div id="thread-lines" class="capsule-thread mb-3"></div>
|
|
<form id="thread-reply">
|
|
<label class="form-label" for="thread-body">Reply</label>
|
|
<textarea id="thread-body" class="form-control mb-2" rows="3" required></textarea>
|
|
<button class="btn btn-primary" type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-profile" class="view" hidden>
|
|
<div class="container p-4 context-main-bg mb-4 text-center">
|
|
<h1 class="h3 mb-4">Profile</h1>
|
|
<hr />
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card shadow">
|
|
<div class="card-header text-center bg-dark text-white">
|
|
<h2 class="h3 card-title mb-0" id="profile-name"></h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-4 text-center">
|
|
<img
|
|
id="profile-avatar"
|
|
src=""
|
|
alt="User Pic"
|
|
class="rounded-circle img-fluid"
|
|
style="max-width: 150px"
|
|
/>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<table class="table table-borderless text-start">
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Registered:</th>
|
|
<td id="profile-registered"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Last Seen:</th>
|
|
<td id="profile-last-login"></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Gender:</th>
|
|
<td id="profile-gender"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<a href="#/settings" class="btn btn-primary btn-sm" data-route="settings">
|
|
<i class="fa fa-fw fa-pencil"></i> Edit profile
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="view-settings" class="view" hidden>
|
|
<div class="container p-4 context-main-bg mb-4">
|
|
<h1 class="h3 mb-4 text-center">Settings</h1>
|
|
<hr />
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<form id="settings-form">
|
|
<fieldset>
|
|
<legend class="visually-hidden">Preferences</legend>
|
|
<div class="mb-3 text-center">
|
|
<img
|
|
id="settings-avatar"
|
|
src=""
|
|
alt="Avatar"
|
|
class="rounded-circle img-fluid mb-2"
|
|
style="max-width: 125px"
|
|
/>
|
|
<label class="form-label d-block" for="settings-avatar-file">Avatar</label>
|
|
<input id="settings-avatar-file" class="form-control" type="file" accept="image/*" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="settings-name">Display name</label>
|
|
<input id="settings-name" class="form-control" name="name" type="text" autocomplete="name" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="settings-gender">Gender</label>
|
|
<select id="settings-gender" class="form-select" name="gender">
|
|
<option value="unspecified">unspecified</option>
|
|
<option value="male">male</option>
|
|
<option value="female">female</option>
|
|
<option value="other">other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="settings-newsletter" />
|
|
<label class="form-check-label" for="settings-newsletter">Receive our Newsletter?</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="settings-timezone">Timezone</label>
|
|
<select id="settings-timezone" class="form-select" name="timezone"></select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="settings-date">Date Format</label>
|
|
<select id="settings-date" class="form-select" name="dateFormat"></select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="settings-time">Time Format</label>
|
|
<select id="settings-time" class="form-select" name="timeFormat"></select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="settings-limit">Items Displayed Per Page</label>
|
|
<select id="settings-limit" class="form-select" name="pageLimit"></select>
|
|
</div>
|
|
<div class="form-check form-switch mb-4">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="settings-dark" />
|
|
<label class="form-check-label" for="settings-dark">Enable Dark-Mode viewing</label>
|
|
</div>
|
|
<p id="settings-note" class="small text-muted">
|
|
Email, password, and phone stay on the site.
|
|
</p>
|
|
<p id="settings-status" class="text-success" hidden></p>
|
|
<p id="settings-error" class="text-danger" hidden></p>
|
|
<button class="btn btn-lg btn-primary w-100" type="submit">Update</button>
|
|
</fieldset>
|
|
</form>
|
|
<div class="alert alert-info mt-4 mb-0">
|
|
Email, password, and phone stay on the site.
|
|
<div class="d-flex flex-wrap gap-2 mt-2">
|
|
<a id="settings-link-email" class="btn btn-sm btn-outline-primary" href="#" target="_blank" rel="noreferrer">
|
|
Change email <i class="fa fa-fw fa-external-link"></i>
|
|
</a>
|
|
<a id="settings-link-password" class="btn btn-sm btn-outline-primary" href="#" target="_blank" rel="noreferrer">
|
|
Change password <i class="fa fa-fw fa-external-link"></i>
|
|
</a>
|
|
<a id="settings-link-phone" class="btn btn-sm btn-outline-primary" href="#" target="_blank" rel="noreferrer">
|
|
Phone <i class="fa fa-fw fa-external-link"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div class="container mt-auto">
|
|
<footer class="pt-4">
|
|
<div class="text-center border-top context-main-border">
|
|
<button
|
|
class="d-md-none my-3 btn btn-lg context-main context-main-border"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#footerMenu"
|
|
aria-controls="footerMenu"
|
|
aria-expanded="false"
|
|
aria-label="Toggle footer navigation"
|
|
>
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="collapse d-md-block my-4" id="footerMenu">
|
|
<div class="row">
|
|
<div id="footer-contact-col" class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3 text-center">
|
|
<h2 class="h5">Contact Us</h2>
|
|
<ul class="nav flex-column">
|
|
<li id="footer-link-contact" class="nav-item mb-2">
|
|
<a href="#/contact" class="nav-link p-0 text-muted">Contact</a>
|
|
</li>
|
|
<li id="footer-link-bug" class="nav-item mb-2">
|
|
<a href="#/bugreport" class="nav-link p-0 text-muted">Report a Bug</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3 text-center">
|
|
<h2 class="h5">More Info</h2>
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item mb-2">
|
|
<a
|
|
id="footer-privacy"
|
|
href="#"
|
|
class="nav-link p-0 text-muted"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
data-footer-path="home/privacy"
|
|
>Privacy Policy</a>
|
|
</li>
|
|
<li class="nav-item mb-2">
|
|
<a
|
|
id="footer-terms"
|
|
href="#"
|
|
class="nav-link p-0 text-muted"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
data-footer-path="home/terms"
|
|
>Terms of Service</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-3 col-lg-2 mb-3 text-center">
|
|
<h2 class="h5">Dark Mode</h2>
|
|
<div class="material-switch px-4 mt-2">
|
|
<input name="dark-mode-toggle" type="checkbox" id="dark-mode-toggle" class="form-check-input" />
|
|
<label for="dark-mode-toggle" class="label-default"><span class="visually-hidden">Dark mode</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column flex-md-row justify-content-md-between py-3 border-top context-main-border">
|
|
<div class="d-flex justify-content-center justify-content-md-start text-center text-md-start">
|
|
<span>
|
|
© <span id="footer-year"></span>
|
|
<span id="footer-sitename">Capsule</span>, Powered by
|
|
<a
|
|
href="https://thetempusproject.com"
|
|
class="text-decoration-none"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>The Tempus Project</a>
|
|
</span>
|
|
</div>
|
|
<div class="d-flex justify-content-center justify-content-md-end mt-3 mt-md-0">
|
|
<ul class="list-unstyled d-flex mb-0">
|
|
<li class="ms-3">
|
|
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="fb" aria-label="Facebook">
|
|
<span class="fa-brands fa-fw fa-facebook" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="ms-3">
|
|
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="twitter" aria-label="X (Twitter)">
|
|
<span class="fa-brands fa-fw fa-twitter" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="ms-3">
|
|
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="in" aria-label="LinkedIn">
|
|
<span class="fa-brands fa-fw fa-linkedin" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="ms-3">
|
|
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="youtube" aria-label="YouTube">
|
|
<span class="fa-brands fa-fw fa-youtube" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
<li class="ms-3">
|
|
<a class="context-main" href="#" target="_blank" rel="noreferrer" data-footer-path="git" aria-label="GitHub">
|
|
<span class="fa-brands fa-fw fa-github" aria-hidden="true"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script type="module" src="./src/main.js"></script>
|
|
</body>
|
|
</html>
|