Created
March 25, 2020 10:21
-
-
Save margani/c82dcca7b06f228864f62201cd3b3497 to your computer and use it in GitHub Desktop.
Page with JavaScript refresh timer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
<title>Down For Maintenance</title> | |
<style> | |
body { background: #fff; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 0; } | |
img { border: 0; } | |
.wrapper { width: 500px; margin: 0 auto; } | |
.logo { margin: 20px 0 0; } | |
.maintenance { border: 1px solid #000; color: #fff; margin: 50px 0 0; padding: 25px 20px; position: relative; height: 80px; | |
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; | |
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); | |
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); | |
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); | |
background: #202329; | |
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzNjNhNDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWIxZDIyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); | |
background: -moz-radial-gradient(center, ellipse cover, #363a43 0%, #1b1d22 100%); | |
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#363a43), color-stop(100%,#1b1d22)); | |
background: -webkit-radial-gradient(center, ellipse cover, #363a43 0%,#1b1d22 100%); | |
background: -o-radial-gradient(center, ellipse cover, #363a43 0%,#1b1d22 100%); | |
background: -ms-radial-gradient(center, ellipse cover, #363a43 0%,#1b1d22 100%); | |
background: radial-gradient(center, ellipse cover, #363a43 0%,#1b1d22 100%); | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363a43', endColorstr='#1b1d22',GradientType=1 ); | |
} | |
.time { color: #8e9197; position: absolute; bottom: 25px; left: 20px; } | |
.time span { color: #fff; } | |
.footer { color: #fff; font-size: 12px; margin: 40px 0 0; text-align: center; } | |
h1 { font-size: 24px; margin: 0 0 10px; } | |
h2 { color: #8e9197; font-size: 16px; } | |
p { font-size: 11px; } | |
#refreshTime { position: absolute; bottom: 0; right: 15px; } | |
</style> | |
<!--[if gte IE 9]> | |
<style type="text/css"> | |
.gradient { filter: none; } | |
</style> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="maintenance gradient"> | |
<h1>Test Page</h1> | |
<p id='refreshTime'></p> | |
</div> | |
</div> <!-- end .wrapper --> | |
<script> | |
var date = new Date(); | |
var refreshInterval = 10 * 1000; // 10 seconds | |
var updateInterval = 1000; // 1 second | |
function dateToString(d) { | |
return | |
("0" + d.getDate()).slice(-2) + "/" + | |
("0" + (d.getMonth() + 1)).slice(-2) + "/" + | |
d.getFullYear() + " " + | |
("0" + d.getHours()).slice(-2) + ":" + | |
("0" + d.getMinutes()).slice(-2) + ":" + | |
("0" + d.getSeconds()).slice(-2); | |
} | |
function updateDate() { | |
var refreshIn = refreshInterval - (new Date() - date); | |
document.querySelector('#refreshTime').innerHTML = | |
'will refresh in ' + Math.round(refreshIn / 1000) + ' seconds'; | |
} | |
function update() { | |
updateDate(); | |
if(new Date().getTime() - date.getTime() >= refreshInterval) | |
window.location.reload(true); | |
else | |
setTimeout(update, updateInterval); | |
} | |
updateDate(); | |
setTimeout(update, updateInterval); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment