1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-29 12:30:11 +00:00
jfa-go/index.html

324 lines
19 KiB
HTML
Raw Normal View History

2020-12-12 22:15:43 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="node_modules/a17t/dist/a17t.css">
<link rel="stylesheet" type="text/css" href="node_modules/icons.css/dist/icons.css">
<link rel="stylesheet" type="text/css" href="base.css">
<title>jfa-no</title>
2020-12-12 22:15:43 +00:00
</head>
<body class="max-w-full overflow-x-hidden section">
<div id="modal-login" class="modal">
<form class="modal-content card" id="form-login" href="">
<span class="heading">Login</span>
<input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="login-user">
<input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="login-password">
2020-12-23 01:34:22 +00:00
<input type="submit" class="button ~positive !normal full-width center supra submit" value="Login">
</form>
</div>
<div id="modal-add-user" class="modal">
<form class="modal-content card" id="form-add-user" href="">
<span class="heading">New User <span class="modal-close">&times;</span></span>
<input type="text" class="field input ~neutral !high mt-half mb-1" placeholder="username" id="add-user-user">
<input type="password" class="field input ~neutral !high mb-1" placeholder="password" id="add-user-password">
2020-12-23 01:34:22 +00:00
<input type="submit" class="button ~positive !normal full-width center supra submit" value="Create">
</form>
</div>
<div id="modal-about" class="modal">
<div class="modal-content content card">
<span class="heading">About <span class="modal-close">&times;</span></span>
<img src="images/banner.svg" class="mt-1" alt="jfa-go banner">
<p><a href="https://github.com/hrfee/jfa-go/tree/a17t-redesign">Github (ICON)</a></p>
<p>Version <span class="code monospace">a17t-redesign</span></p>
<p>Commit <span class="code monospace">cb28097</span></p>
<p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
</div>
</div>
2020-12-23 01:34:22 +00:00
<div id="modal-modify-user" class="modal">
<form class="modal-content card" id="form-modify-user" href="">
<span class="heading"><span id="header-modify-user">Modify Settings</span> <span class="modal-close">&times;</span></span>
<p class="content">Apply settings from an existing profile, or source them directly from a user.</p>
<div class="flex-row mb-1">
<label class="fw-group mr-1">
<input type="radio" name="modify-user-source" class="hidden" id="radio-use-profile" checked>
<span class="button ~neutral !high supra full-width center">Profile</span>
</label>
<label class="fw-group ml-1">
<input type="radio" name="modify-user-source" class="hidden" id="radio-use-user">
<span class="button ~neutral !normal supra full-width center">User</span>
</label>
</div>
<div id="modify-user-profiles" class="select ~neutral !normal mb-1">
<select>
<option>Friends</option>
<option>Family</option>
<option>Default</option>
</select>
</div>
<div id="modify-user-users" class="select ~neutral !normal mb-1 hidden">
<select>
<option>Person</option>
<option>Other person</option>
</select>
</div>
<label class="switch mb-1">
<input type="checkbox" id="modify-user-homescreen" checked>
<span>Apply homescreen layout</span>
</label>
<input type="submit" class="button ~positive !normal full-width center supra submit" value="Apply">
</form>
</div>
<div id="modal-delete-user" class="modal">
<form class="modal-content card" id="form-delete-user" href="">
<span class="heading"><span id="header-delete-user">Delete User</span> <span class="modal-close">&times;</span></span>
<div class="content mt-half">
<label class="switch mb-1">
<input type="checkbox" id="delete-user-notify" checked>
<span>Send notification email</span>
</label>
<textarea id="textarea-delete-user" class="textarea full-width ~neutral !normal mb-1" placeholder="Your account has been deleted."></textarea>
<input type="submit" class="button ~positive !normal full-width center supra submit" value="Apply">
</div>
</form>
</div>
<div id="modal-restart" class="modal">
<div class="modal-content card ~critical !normal">
<span class="heading">Restart needed <span class="modal-close">&times;</span></span>
<p class="content pb-1">A restart is needed to apply some settings you changed. Do it now or later?</p>
<div class="fr">
<span class="button ~info !normal">Apply, restart later</span>
<span class="button ~critical !normal">Apply &amp; restart</span>
</div>
</div>
</div>
<div id="modal-refresh" class="modal">
<div class="modal-content card ~positive !normal">
<span class="heading">Settings applied.</span>
<p class="content">Refresh the page in a few seconds.</p>
</div>
</div>
<div id="modal-ombi-defaults" class="modal">
<form class="modal-content card" id="form-ombi-defaults" href="">
<span class="heading">Ombi user defaults <span class="modal-close">&times;</span></span>
<p class="content">Create an Ombi user and configure it, then select it here. It's settings/permissions will be stored and applied to new ombi users created by jfa-go.</p>
<div class="select ~neutral !normal mb-1">
<select>
<option>Person</option>
<option>Other person</option>
</select>
</div>
<input type="submit" class="button ~positive !normal full-width center supra submit" value="Submit">
</form>
</div>
2020-12-12 22:15:43 +00:00
<div class="pageContainer max-w-screen-lg px-6 py-4 mx-auto lg:mx-auto md:py-8">
<div class="relative mb-1">
<header class="flex flex-wrap items-center justify-between">
<div class="text-neutral-700">
2020-12-14 21:40:25 +00:00
<span id="invitesTab-button" class="tabText portal ~positive active">Invites</span>
<span id="accountsTab-button" class="tabText portal">Accounts</span>
<span id="settingsTab-button" class="tabText portal">Settings</span>
2020-12-12 22:15:43 +00:00
</div>
</header>
</div>
<div class="relative mb-1">
<div class="text-neutral-700">
<span class="button ~critical !normal mb-1">Logout</span>
<span class="button ~neutral !normal mb-1">Theme</span>
<span id="modalButton" class="button ~neutral !normal mb-1">Trigger Login</span>
2020-12-12 22:15:43 +00:00
</div>
</div>
2020-12-23 01:34:22 +00:00
<div id="invitesTab">
2020-12-13 22:00:44 +00:00
<div class="card ~neutral !high invites mb-1">
<span class="heading">Invites</span>
<div class="inv">
<div class="card ~neutral !normal inv-header mt-half">
<div class="inv-codearea">
<a href="#" class="code monospace mr-1">ZD8ZeC55Jcpmbtv54FuVM3</a>
<span class="button ~info !normal">Copy</span>
</div>
<div class="inv-infoarea">
<span class="inv-expiry mr-1">Expires in 30m</span>
<span class="button ~critical !normal">Delete</span>
<label>
<i class="icon icon-arrow-down not-rotated"></i>
<input type="checkbox" class="toggle-details">
</label>
</div>
2020-12-12 22:15:43 +00:00
</div>
2020-12-13 22:00:44 +00:00
<div class="card ~neutral !normal mt-half inv-details mt-half hidden">
<div class="inv-row">
<div class="inv-profilearea">
<p class="supra mb-1">Profile</p>
<div class="select ~neutral !normal inv-profileselect ib">
<select>
<option>Friends</option>
<option>Family</option>
<option>No Profile</option>
</select>
</div>
<p class="label supra">Notify on:</p>
<label class="switch block">
<input type="checkbox" class="inv-notify-expiry">
<span>On expiry</span>
</label>
<label class="switch block">
<input type="checkbox" class="inv-notify-creation">
<span>On user creation</span>
</label>
</div>
<div class="block">
<p class="supra mb-1">Created <strong class="inv-created">10/12/20 18:46</strong></p>
<p class="supra mb-1">Remaining uses <strong class="inv-remaining">8</strong></p>
</div>
<div class="card ~neutral !low">
<strong class="supra table-header">Created users</strong>
<table class="table inv-table">
<thead>
<tr>
<th>Name</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>jeff</td>
<td>10/12/20 19:00</td>
</tr>
</tbody>
</table>
</div>
</div>
2020-12-12 22:15:43 +00:00
</div>
</div>
2020-12-13 22:00:44 +00:00
</div>
<div class="card ~neutral !high create-inv">
<span class="heading">Create</span>
<div class="row">
<div class="card ~neutral !low col">
<label class="label supra" for="inv-days">Days</label>
<div class="select ~neutral !normal mb-1">
<select id="inv-days">
<option>0</option>
</select>
</div>
<label class="label supra" for="inv-hours">Hours</label>
<div class="select ~neutral !normal mb-1">
<select id="inv-hours">
<option>0</option>
</select>
</div>
<label class="label supra" for="inv-minutes">Minutes</label>
<div class="select ~neutral !normal mb-1">
<select id="inv-minutes">
<option>0</option>
</select>
</div>
</div>
<div class="card ~neutral !low col">
<label class="label supra" for="inv-uses">Number of uses</label>
<div class="button-input mb-1">
<input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
<label for="inv-inf-uses" class="button ~neutral !normal">
<span></span>
<input type="checkbox" class="unfocused" id="inv-inf-uses" aria-label="Set uses to infinite">
2020-12-12 22:15:43 +00:00
</label>
</div>
2020-12-13 22:00:44 +00:00
<label class="label supra">Profile</label>
<div class="select ~neutral !normal mb-1" id="inv-profile">
<select>
<option>Friends</option>
<option>Family</option>
<option>No Profile</option>
</select>
2020-12-12 22:15:43 +00:00
</div>
2020-12-13 22:00:44 +00:00
<label class="label supra">Send to</label>
<div class="button-input mb-1">
<input type="text" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
<label for="inv-email-enabled" class="button ~neutral !normal">
<input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
</label>
2020-12-12 22:15:43 +00:00
</div>
2020-12-23 01:34:22 +00:00
<span class="button ~positive !normal supra full-width center button-lg">Create</span>
2020-12-12 22:15:43 +00:00
</div>
</div>
</div>
</div>
2020-12-14 21:40:25 +00:00
<div id="accountsTab" class="unfocused">
2020-12-13 22:00:44 +00:00
<div class="card ~neutral !high accounts mb-1">
<span class="heading">Accounts</span>
2020-12-14 21:40:25 +00:00
<div class="fr">
<span class="button ~neutral !normal" id="accounts-add-user">Add User</span>
<span class="button ~positive !normal" id="accounts-modify-user">Modify Settings</span>
2020-12-23 01:34:22 +00:00
<span class="button ~critical !normal" id="accounts-delete-user">Delete User</span>
2020-12-14 21:40:25 +00:00
</div>
2020-12-13 22:00:44 +00:00
<div class="card ~neutral !normal accounts-header mt-half">
<table class="table">
<thead>
<tr>
<th><input type="checkbox" value="" id="accounts-select-all"></th>
<th>Username</th>
<th>Email Address</th>
<th>Last Active</th>
</tr>
</thead>
<tbody id="accounts-list">
<tr>
<td><input type="checkbox" value=""></td>
<td>Person <span class="chip ~info ml-1">Admin</span></td>
<td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
<td>13/12/20 00:39</td>
</tr>
2020-12-14 21:40:25 +00:00
<tr>
<td><input type="checkbox" value=""></td>
<td>Other person</td>
<td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="eee@ma.il" readonly></td>
<td>12/12/20 17:46</td>
</tr>
2020-12-13 22:00:44 +00:00
</tbody>
</table>
2020-12-12 22:15:43 +00:00
</div>
</div>
2020-12-14 21:40:25 +00:00
</div>
2020-12-23 01:34:22 +00:00
<div id="settingsTab" class="unfocused">
2020-12-14 21:40:25 +00:00
<div class="card ~neutral !high settings">
<span class="heading">Settings</span>
2020-12-23 01:34:22 +00:00
<div class="fr">
<span class="button ~neutral !normal" id="accounts-add-user">Save</span>
</div>
2020-12-14 21:40:25 +00:00
<div class="row">
<div class="card ~neutral !normal col">
<aside class="aside small ~info mb-half">Note: <sup class="text-critical">*</sup> indicates a required field, <sup class="text-critical">R</sup> indicates changes require a restart.</aside>
<span class="button ~neutral !normal settings-section-button mb-half" id="setting-about">About</span>
2020-12-14 21:40:25 +00:00
<span class="button ~neutral !normal settings-section-button mb-half selected">User Profiles</span>
</div>
<div class="card ~neutral !low col">
<div class="settings-section">
<p class="support large mb-half">Settings section description.</p>
<div class="setting">
<label class="label" for="settings-select">Select <sup class="text-critical">R</sup></label>
<div class="select ~neutral !normal mt-half">
<select id="settings-select">
<option>Option 1</option>
</select>
</div>
</div>
<div class="setting">
<label class="label" for="settings-input">Input <sup class="text-critical">*</sup></label>
<input type="text" class="input ~neutral !normal mt-half" placeholder="Value">
</div>
<div class="setting">
<label class="switch settings">
<input type="checkbox" id="settings-check">
<span>Checkbox <sup class="text-critical">R</sup></span>
</label>
</div>
</div>
</div>
</div>
</div>
2020-12-12 22:15:43 +00:00
</div>
</div>
<script src="modal.js"></script>
<script src="main.js"></script>
2020-12-12 22:15:43 +00:00
</body>
</html>