All but the final page
This commit is contained in:
John Shaver
parent
27ae2aeb48
commit
137bf18c4e
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
.spinner .spinner-ball {
|
||||
animation: pulsing 2s ease infinite;
|
||||
}
|
||||
|
||||
.spinner .spinner-ball:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.spinner .spinner-ball:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
@keyframes pulsing {
|
||||
0% {transform: scale(1);}
|
||||
35% {transform: scale(1);}
|
||||
60% {transform: scale(1.3);}
|
||||
75% {transform: scale(1.3);}
|
||||
100% {transform: scale(1);}
|
||||
}
|
||||
|
|
@ -12,9 +12,12 @@ body {
|
|||
font-family: Source Sans Pro, sans-serif;
|
||||
font-size: 18px;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: -0.022222222em;
|
||||
line-height: 1.33;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg.icon-computer {width: 4em;fill: #1a1a1a;}
|
||||
svg.icon-computer {width: 4em;height: 4em;}
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
|
|
@ -53,8 +56,6 @@ svg.icon-computer {width: 4em;fill: #1a1a1a;}
|
|||
background: #DDDDDD;
|
||||
}
|
||||
.checkbox-array .icon-checked-box, .checkbox-array .icon-unchecked-box {
|
||||
width: 1.333333333em;
|
||||
fill: #1a1a1a;
|
||||
margin-right: 0.666666667em;
|
||||
}
|
||||
|
||||
|
|
@ -91,8 +92,111 @@ button:disabled {
|
|||
|
||||
h1.logo {
|
||||
font-size: 1.555555556em;
|
||||
margin-bottom: 1.777777778em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.777777778em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.333333333em;
|
||||
height: 1.333333333em;
|
||||
fill: #1a1a1a;
|
||||
}
|
||||
|
||||
svg.authorized-check {
|
||||
fill: #63f794;
|
||||
margin-right: 0.666666667em;
|
||||
}
|
||||
|
||||
.progress .row {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin: 0.6666em 0;
|
||||
}
|
||||
|
||||
.spinner-ball {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 5px;
|
||||
background: #1a1a1a;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
span.spinner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 0.666666667em;
|
||||
}
|
||||
|
||||
.important-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress {
|
||||
padding: 0.666666667em 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.debugging-info-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
|
||||
.debugging-info-container pre {
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.debugging-info {
|
||||
max-width: 65em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
span.debugging.button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
span.js-debugging-button.debugging-button {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.debugging-button {
|
||||
display: inline-flex;
|
||||
padding: 0.5em;
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.debugging-info-container.visible .debugging-button svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.debugging-button svg {transition: transform 0.3s;}
|
||||
|
||||
.debug-drawer {
|
||||
/* position: relative; */
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s;
|
||||
padding: 0.1em 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.debugging-info-container.visible .debug-drawer {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.debugging-info-container {
|
||||
padding-top: 3em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>Telebit - Pair Device</title>
|
||||
<link href="./css/main.css" rel="stylesheet">
|
||||
<link href="./css/animations.css" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Source Sans Pro';
|
||||
|
|
@ -32,8 +33,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<script>document.body.hidden = true;</script>
|
||||
<!-- let's define our SVG that we will reuse -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 24 24">
|
||||
<!-- let's define our SVG that we will use later -->
|
||||
<svg width="0" height="0" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<g id="svg-check">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
|
|
@ -55,6 +56,14 @@
|
|||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"/>
|
||||
</g>
|
||||
<g id="svg-circle-check">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</g>
|
||||
<g id="svg-arrow-down">
|
||||
<path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/>
|
||||
<path fill="none" d="M0,0h24v24H0V0z"/>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
|
|
@ -66,30 +75,30 @@
|
|||
</div>
|
||||
<div class="container js-magic" hidden><form class="js-submit">
|
||||
<h1 class="logo">Telebit</h1>
|
||||
<svg class="icon-computer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="icon-computer" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-computer"></use>
|
||||
</svg>
|
||||
<h2>Pair <span class="js-hostname">Device</span></h1>
|
||||
<label>Enter your device pairing code:
|
||||
<input type="text" name="pair-code" placeholder="ex: 0000">
|
||||
<input type="text" name="pair-code" placeholder="ex: 0000" autofocus>
|
||||
</label>
|
||||
<div class="checkbox-array">
|
||||
<label>
|
||||
<input name="telebit-agree" type="checkbox" required>
|
||||
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="icon-checked-box" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-checked"></use>
|
||||
</svg>
|
||||
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="icon-unchecked-box" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-unchecked"></use>
|
||||
</svg>
|
||||
Agree to  <a target="_blank" href="/legal/">Telebit™ Terms of Service</a>?
|
||||
</label>
|
||||
<label>
|
||||
<input name="letsencrypt-agree" type="checkbox" required>
|
||||
<svg class="icon-checked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="icon-checked-box" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-checked"></use>
|
||||
</svg>
|
||||
<svg class="icon-unchecked-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="icon-unchecked-box" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-unchecked"></use>
|
||||
</svg>
|
||||
Agree to Let's Encrypt™ Terms of Service
|
||||
|
|
@ -99,33 +108,61 @@
|
|||
<button type="submit" disabled>Claim Device</button>
|
||||
</div>
|
||||
</form></div>
|
||||
<div class="js-authz" hidden>
|
||||
|
||||
<div class="container js-authz" hidden>
|
||||
<h1 class="logo">Telebit</h1>
|
||||
<svg class="icon-computer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<svg class="icon-computer" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-computer"></use>
|
||||
</svg>
|
||||
|
||||
<ul>
|
||||
<li><label><input type="checkbox" checked disabled> Authorized</label></li>
|
||||
<li><label><input type="checkbox" checked disabled>
|
||||
Generated <span class="js-domainname">xxx-xxx-xxx.example.com</span> just for you</label></li>
|
||||
<li><label><input type="checkbox" disabled> Waiting for your device to pair</label></li>
|
||||
<li><label><input type="checkbox" disabled>
|
||||
Securing your new domain</label></li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Check the command line on your device to finish pairing.</strong></p>
|
||||
|
||||
<h2>Debug Info</h2>
|
||||
<h2>Pair <span class="js-hostname">Device</span></h1>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="row">
|
||||
<svg class="authorized-check" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-circle-check"></use>
|
||||
</svg>
|
||||
Authorized
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="spinner">
|
||||
<div class="spinner-ball ball-1"></div>
|
||||
<div class="spinner-ball ball-1"></div>
|
||||
<div class="spinner-ball ball-1"></div>
|
||||
</span>
|
||||
Waiting for device to pair
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="important-text">
|
||||
Check the command line on your device to finish pairing.
|
||||
</div>
|
||||
</div>
|
||||
<div class="js-debug-container debugging-info-container" hidden>
|
||||
<div class="debug-drawer">
|
||||
<span class="js-debug-button debugging-button">
|
||||
Debugging info <svg class="debugging-arrow" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-arrow-down"></use>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="js-debug-info debugging-info">
|
||||
<p><a class="js-new-href">{{js-new-href}}</a></p>
|
||||
<p class="js-serviceport">xxxxx</p>
|
||||
|
||||
<p><small>Authorization Token:
|
||||
<pre><code class="js-token">{{js-token}}</code></pre></small></p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container js-finish" hidden>
|
||||
<h1 class="logo">Telebit</h1>
|
||||
<svg class="icon-computer" viewBox="0 0 24 24">
|
||||
<use xlink:href="#svg-computer"></use>
|
||||
</svg>
|
||||
<h2>Success!</h1>
|
||||
<div>You've successfully paired
|
||||
<span class="js-hostname">your devied</span>
|
||||
with Telebit.
|
||||
</div>
|
||||
<button class="js-finish-button">Finish</button>
|
||||
<script src="js/app.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ function checkStatus() {
|
|||
return;
|
||||
}
|
||||
if ('complete' === data.status) {
|
||||
successScreen();
|
||||
setTimeout(function () {
|
||||
//window.document.body.innerHTML += ('<img src="https://' + domainname + '/_apis/telebit.cloud/clear.gif">');
|
||||
// TODO once this is loaded (even error) Let's Encrypt is done,
|
||||
|
|
@ -33,6 +34,15 @@ function checkStatus() {
|
|||
});
|
||||
}
|
||||
|
||||
function successScreen() {
|
||||
document.querySelector('.js-authz').hidden = true;
|
||||
document.querySelector('.js-finish-button').addEventListener('click', function(e) {
|
||||
window.location.href='https://' + domainname;
|
||||
});
|
||||
document.querySelector('.js-finish').hidden = false;
|
||||
|
||||
}
|
||||
|
||||
function submitCode(pair) {
|
||||
// TODO use Location or Link
|
||||
document.querySelector('.js-magic').hidden = true;
|
||||
|
|
@ -63,6 +73,7 @@ function submitCode(pair) {
|
|||
setTimeout(checkStatus, 0);
|
||||
|
||||
document.querySelector('.js-authz').hidden = false;
|
||||
document.querySelector('.js-debug-container').hidden = false;
|
||||
|
||||
/*
|
||||
document.querySelectorAll('.js-token-data').forEach(function ($el) {
|
||||
|
|
@ -113,7 +124,9 @@ function init() {
|
|||
return;
|
||||
}
|
||||
document.querySelector('.js-magic').hidden = false;
|
||||
document.querySelector('.js-hostname').innerText = data.hostname || 'Device';
|
||||
document.querySelectorAll('.js-hostname').forEach(function(ele) {
|
||||
ele.innerText = data.hostname || 'Device';
|
||||
});
|
||||
//document.querySelector('.js-token-data').innerText = JSON.stringify(data, null, 2);
|
||||
});
|
||||
});
|
||||
|
|
@ -143,6 +156,11 @@ function init() {
|
|||
}
|
||||
});
|
||||
};
|
||||
document.querySelector('.js-debug-button').addEventListener("click", function(e) {
|
||||
//var info = document.querySelector('.js-debug-info');
|
||||
//info.hidden = !info.hidden;
|
||||
document.querySelector('.js-debug-container').classList.toggle("visible");
|
||||
})
|
||||
}
|
||||
|
||||
window.fetch('https://' + location.hostname + '/_apis/telebit.cloud/index.json', {
|
||||
|
|
|
|||
Loading…
Reference in New Issue