Skip to content

Commit

Permalink
updating pause design (#53)
Browse files Browse the repository at this point in the history 
Co-authored-by: Nick Grato <[email protected]>
  • Loading branch information
@nickgrato
nickgrato and Nick Grato authored Oct 23, 2023
1 parent e32a538 commit 968dce8
Showing 1 changed file with 217 additions and 88 deletions.
305 changes: 217 additions & 88 deletions ita/_statics/pausing.html
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,239 @@

<!DOCTYPE html>
<html>

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;700&display=swap"
rel="stylesheet">
<style>
body {
background-color: black;
color: white;
background: linear-gradient(107.97deg,
#489cbe 6.73%,
#5427c9 39.4%,
#a8527c 77.18%,
#a67878 104.75%);
font-family: 'Inter', sans-serif;
font-family: 'Space Grotesk', sans-serif;
font-size: 18px;
margin: 0;
padding: 0;
position: relative;
}


h1 {
padding: 0;
margin: 0 0 12px 0;
}

p {
margin: 0;
}

.contents {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
padding: 0 20px;
}
#pic {

.logo {
width: 200px;
height: 200px;
position: absolute;
left: 20px;
top: 20px;
}

.card {
background: #fff;
border-radius: 20px;
color: #000;
padding: 20px;
text-align: center;
max-width: 560px;
}


.loader {
display: flex;
justify-content: center;
margin-top: 40px;
}

.dot_pulse_wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
width: 50px;
height: 20px;
}

/**
* ==============================================
* Dot Pulse
* ==============================================
*/

.dot_pulse {
position: relative;
left: -9999px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #3624c2;
color: #3624c2;
box-shadow: 9999px 0 0 -5px #3624c2;
animation: dotPulse 4s infinite linear;
animation-delay: 0.25s;

}

.dot_pulse::before,
.dot_pulse::after {
content: '';
display: inline-block;
position: absolute;
top: 0;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #1700c7;
color: #1700c7;
left: -1px;
}

.dot_pulse::before {
box-shadow: 9984px 0 0 -5px #1700c7;
animation: dotPulseBefore 4s infinite linear;
animation-delay: 0s;
}

.dot_pulse::after {
box-shadow: 10014px 0 0 -5px #5749be;
animation: dotPulseAfter 4s infinite linear;
animation-delay: 0.5s;
}


@keyframes dotPulseBefore {
0% {
box-shadow: 9984px 0 0 -5px #1700c7;
}

30% {
box-shadow: 9984px 0 0 2px #1700c7;
}

60%,
100% {
box-shadow: 9984px 0 0 -5px #1700c7;
}
}

@keyframes dotPulse {
0% {
box-shadow: 9999px 0 0 -5px #3624c2;
}

30% {
box-shadow: 9999px 0 0 2px #3624c2;
}

60%,
100% {
box-shadow: 9999px 0 0 -5px #3624c2;
}
}

@keyframes dotPulseAfter {
0% {
box-shadow: 10014px 0 0 -5px #5749be;
}

30% {
box-shadow: 10014px 0 0 2px #5749be;
}

60%,
100% {
box-shadow: 10014px 0 0 -5px #5749be;
}
}
</style>
</head>
<body>
<img id="duckPic" src="https://storage.googleapis.com/turkey-assets/logos/hubsduck.png"/>
<div id="msg_line0">this hubs' paused due to inactivity</div>
<div id="msg_line1"></div>
<div id="msg_line2">[ . ]</div>
<div id="msg_line3"></div>

<body>
<img id="logo" class="logo" src="https://storage.googleapis.com/turkey-assets/logos/logos_hubs-dark-logo.png" />
<div class="contents">
<div class="card">
<h1>Reactivating Your Hub</h1>
<p>Your hub was paused to do inactivity. Please give us a moment to reactivate, estimate time for reactivation is 3 to 5 minuts.</p>
<div class="loader">
<div class="dot_pulse_wrapper">
<div class="dot_pulse"></div>
</div>
</div>
</div>
</div>
<script>
var socket = new WebSocket("wss://" + window.location.host+"/websocket")
var countdown=10;
var state=0;

updateDuckRotation(countdown)

socket.onmessage = function (event) {
if (event.data=="hi"){
state=1
}
if (event.data=="_refresh_"){
state=2
document.getElementById('msg_line1').innerText = "waiting for ingress update"
document.getElementById('msg_line2').innerText = "[ infra components may take a few more minutes to fully sync ]"

setInterval(async function() {
const timeout = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, false);
})
const readinessCheck = Promise.all([
fetch("https://"+window.location.host+"/manifest.webmanifest").then(response => response.status),
fetch("https://"+window.location.host+"/api/v1/media/search?source=rooms&filter=public&cursor=0").then(response => response.status)
]).then(([status1, status2]) => status1 === 200 && status2 === 200);
const ready=await Promise.race([timeout, readinessCheck])
console.log("ready: ", ready)
if (ready) {
location.reload();
}
}, 10000);
return
}
document.getElementById('msg_line2').innerText = "[ "+event.data+" ]"
};
socket.onopen = function (event) {
socket.send("hi")
};
window.addEventListener('keypress', function (event) {
socket.send("keyCode:"+event.keyCode)
});

unpausingLoop = setInterval(async function() {
switch(state) {
case 1:
if (!document.hidden){
countdown--;
updateDuckRotation(countdown)
document.getElementById('msg_line2').innerText = "[ unpausing start in: " + countdown + " sec ]";
}
if (countdown <= 0 || countdown > 20) {
socket.send("_r_: 1")
document.getElementById('msg_line1').innerText = "unpausing"
state=2
clearInterval(unpausingLoop);
}
break;
}
}, 1000);

document.getElementById('duckPic').addEventListener('click', function() {
countdown++;
updateDuckRotation(countdown)
if (state==2){
return
}
document.getElementById('msg_line2').innerText = "[ unpausing start in: " + countdown + "/20 clicks ]";
});
var socket = new WebSocket("wss://" + window.location.host + "/websocket")
var countdown = 10;
var state = 0;


/**
Watch for ready
**/
socket.onmessage = function (event) {
if (event.data == "_refresh_") {
setInterval(async function () {
const timeout = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, false);
})
const readinessCheck = Promise.all([
fetch("https://" + window.location.host + "/manifest.webmanifest").then(response => response.status),
fetch("https://" + window.location.host + "/api/v1/media/search?source=rooms&filter=public&cursor=0").then(response => response.status)
]).then(([status1, status2]) => status1 === 200 && status2 === 200);
const ready = await Promise.race([timeout, readinessCheck])
console.log("ready: ", ready)
if (ready) {
location.reload();
}
}, 10000);
return
}

};

function updateDuckRotation(countdown){
document.getElementById('duckPic').style.transform='rotate(' + (countdown * 18).toString() + 'deg)';
}
socket.onopen = function (event) {
socket.send("hi")
};

// async function checkEndpoint(ep) {
// var resp
// resp = await fetch(ep)
// console.log(resp.status, ep)
// return resp.status == 200
// }
window.addEventListener('keypress', function (event) {
socket.send("keyCode:" + event.keyCode)
});

unpausingLoop = setInterval(async function () {
switch (state) {
case 1:
if (!document.hidden) {
countdown--;
}
if (countdown <= 0 || countdown > 20) {
socket.send("_r_: 1")
state = 2
clearInterval(unpausingLoop);
}
break;
}
}, 1000);

</script>
</body>
</html>

</html>

0 comments on commit 968dce8

Please sign in to comment.