1
0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-11-09 20:00:12 +00:00
jfa-go/index.html
2020-12-12 22:15:43 +00:00

372 lines
15 KiB
HTML

<!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">
<style>
.pageContainer {
margin: 5% 20% 5% 20%;
}
@media (max-width: 1100px) {
.pageContainer {
margin: 2%;
}
}
/*input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}*/
.contactBox {
color: grey;
}
#container {
margin-top: 5%;
margin-bottom: 5%;
}
.tabText {
font-size: 2rem;
}
.mb-1 {
margin-bottom: 1rem;
}
.pb-1 {
padding-bottom: 1rem;
}
.mr-1 {
margin-right: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.inv-codearea {
/*width: 40%;*/
}
.al {
text-align: left;
}
.inline-block {
display: inline-block;
}
.ar {
text-align: right;
}
.monospace {
background-color: inherit;
}
.mt-half {
margin-top: 0.5rem;
}
.table-header {
padding-left: 0.5rem;
padding-bottom: 0.2rem;
}
.inv {
overflow: hidden;
}
.inv-header {
display: flex;
justify-content: space-between;
}
.button-input {
display: flex;
justify-content: space-between;
}
/*.inv-details {
display: flex;
justify-content: space-between;
}*/
/*.invites {
transition: max-height 1s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}*/
.inv-details {
}
.inv-row {
display: flex;
justify-content: space-between;
align-items: top;
}
/*.inv-profilearea {
align-items: top;
}*/
.ib {
display: inline-block;
}
.inv-profileselect {
min-width: 100%;
}
.inv-table {
font-size: 0.8rem;
}
.no-lp {
padding-left: 0px;
}
.block { display: block; }
.hiding {
animation: slide-out 0.1s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;
}
.hidden {
display: none;
}
.visible {
display: block;
/*animation: fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards;*/
}
@keyframes fade-in {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
@keyframes slide-out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.toggle-details {
display: none;
}
.rotated {
transform: rotate(180deg);
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
}
.not-rotated {
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-moz-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
-o-transition: all 0.3s cubic-bezier(0,.89,.27,.92);
transition: all 0.3s cubic-bezier(0,.89,.27,.92); /* easeInOutQuart */
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
margin: 0.5rem;
}
@media screen and (max-width: 400px) {
.row {
flex-direction: column;
}
.col {
flex: 45%;
}
}
.input {
box-sizing: border-box;
}
.button-lg {
height: 3rem;
}
.full-width {
box-sizing: border-box;
width: 100%;
justify-content: center;
}
</style>
<title>{{ .lang.pageTitle }}</title>
</head>
<body class="max-w-full overflow-x-hidden section">
<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">
<span class="tabText portal ~positive active">Invites</span>
<span class="tabText portal">Accounts</span>
<span class="tabText portal">Settings</span>
</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>
</div>
</div>
<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>
</div>
<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>
</div>
</div>
</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" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
<span id="inv-inf-uses" class="button ~neutral !normal" aria-label="Infinite uses"></span>
</div>
<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>
</div>
<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">
<span id="inv-email-enabled" class="button ~neutral !normal" aria-label="Send to enabled"></span>
</div>
<span class="button ~positive !normal supra full-width button-lg">Create</span>
</div>
</div>
</div>
</div>
<script>
const whichTransitionEvent = () => {
const el = document.createElement("fakeElement");
if (el.style["animation"] !== void 0) {
return "animationend";
}
return "webkitAnimationEnd";
}
var transitionEnd = whichTransitionEvent();
const toggles = document.getElementsByClassName('toggle-details');
for (let toggle of toggles) {
console.log(toggle);
toggle.onclick = () => {
const el = toggle.parentElement.parentElement.parentElement.nextElementSibling
const container = toggle.parentElement.parentElement.parentElement.parentElement;
if (el.classList.contains("visible")) {
el.classList.toggle("visible");
//el.classList.toggle("hiding");
//const listenerFunc = function(event) { el.classList.toggle("hidden"); el.classList.toggle("hiding"); el.removeEventListener(transitionEnd, listenerFunc); };
el.classList.toggle("hidden");
// el.addEventListener(transitionEnd, listenerFunc, false);
} else {
el.classList.toggle("hidden");
//const height = parseInt(container.clientHeight, 10);
//const val = `${height + el.getBoundingClientRect().height}px`;
//console.log('showing ', val);
//container.style.height = val;
// let maxHeight = container.style.maxHeight || "0";
// const mheight = parseInt(maxHeight, 10)
// container.style.maxHeight = `${mheight + el.getBoundingClientRect().height}px`;
el.classList.toggle("visible");
}
toggle.previousElementSibling.classList.toggle("rotated");
toggle.previousElementSibling.classList.toggle("not-rotated");
//el.classList.toggle("visible");
//el.classList.toggle("hidden");
};
}
document.getElementById('inv-inf-uses').onclick = function () {
const uses = document.getElementById('inv-uses');
uses.disabled = (this.classList.contains('!normal'));
this.classList.toggle('!normal');
this.classList.toggle('!high');
this.classList.toggle('inf');
};
document.getElementById('inv-email-enabled').onclick = function () {
const uses = document.getElementById('inv-email');
uses.disabled = !(this.classList.contains('!normal'));
this.classList.toggle('!normal');
this.classList.toggle('!high');
this.classList.toggle('enabled');
};
</script>
</body>
</html>