Skip to content

Instantly share code, notes, and snippets.

@dylancwood

dylancwood/informed_redirect.html

Created November 21, 2013 03:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dylancwood/7575857 to your computer and use it in GitHub Desktop.
Save dylancwood/7575857 to your computer and use it in GitHub Desktop.
Download ZIP
Simple webpage to inform users that a resource has changed locations, and redirect after 10 seconds. Has some cute graphics that are pure CSS: no images for the fastest possible loading times.
Raw
informed_redirect.html
<!DOCTYPE html>
<html>
<head>
<script>
;{
var render_timer, initialize_page
, old_app_name = 'Self Assessment'
, new_app_name = 'Participant Portal'
, old_app_url = 'http://chronus.mrn.org/self'
, new_app_url = 'http://coins.mrn.org/p2';
document.addEventListener('DOMContentLoaded'
, function (e) {
"use strict";
initialize_page();
var redirect_timeout = 10000 //ms
,start_time = (new Date()).getTime();
//setup cross-vendor requestAnimationFrame
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.cancelRedirect = false;
window.requestAnimationFrame(function(){render_timer(start_time, redirect_timeout)});
});
var render_timer = function (start_time, redirect_timeout) {
"use strict";
var curr_time = (new Date()).getTime()
, time_elapsed = curr_time - start_time
, time_remaining = redirect_timeout - time_elapsed
, time_remaining_s = Math.ceil(time_remaining / 1000);
if (time_remaining > 0){
document.getElementById('timer').innerHTML = time_remaining_s;
if(!window.cancelTimer){
window.requestAnimationFrame(function(){render_timer(start_time, redirect_timeout)});
}
return time_remaining_s;
}
else {
document.getElementById('timer').innerHTML = '0';
window.location.replace("http://coins.mrn.org/p2");
}
};
var initialize_page = function(){
"use strict";
var i, elements = document.getElementsByClassName('old-app-name')
, button = document.getElementById('cancel_button');
for (i = 0; i < elements.length; i ++) {
elements[i].innerHTML = old_app_name;
}
elements = document.getElementsByClassName('new-app-name');
for (i = 0; i < elements.length; i ++) {
elements[i].innerHTML = new_app_name;
}
elements = document.getElementsByClassName('old-app-url');
for (i = 0; i < elements.length; i ++) {
elements[i].innerHTML = old_app_url;
elements[i].setAttribute('href', old_app_url);
}
elements = document.getElementsByClassName('new-app-url');
for (i = 0; i < elements.length; i ++) {
elements[i].innerHTML = new_app_url;
elements[i].setAttribute('href', new_app_url);
}
document.getElementById('container').style.display = 'block';
button.addEventListener('click'
, function () {
window.cancelTimer = true;
button.style.backgroundColor = "#666";
}
);
}
}
</script>
<style>
body{
background-color:orangered;
font-family:Tahoma;
}
#container {
width:80%;
min-height:300px;
display:none;
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:30px;
border-radius:30px;
background-color:beige;
box-shadow: 0 0 30px;
text-align:center;
}
.house {
width:50px;
height:50px;
background-color:black;
display:block;
content:"";
position:relative;
float:right;
}
.house:after {
top: -30px;
left: -10px;
display: block;
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 30px solid black;
content: "";
position: absolute;
}
.house:before {
bottom: 0px;
left: 50%;
display: block;
width: 15px;
height: 30px;
content: "";
position: absolute;
background-color:red;
}
road {
height:100px;
border:none;
border-bottom:dotted 10px;
display:inline-block;
position:relative;
flex:1;
margin-bottom:100px;
}
road:last-of-type {
border:none;
border-bottom:dotted 10px;
border-left:dotted 10px;
margin-bottom:0px;
}
.land {
display:inline-block;
position:relative;
text-align:center;
}
.land:first-child {
margin-bottom:100px;
}
.land:last-child .house {
float:left;
}
.address, .address a{
background-color:#666;
padding:0.2em;
font-size:15px;
color:white;
text-decoration:none;
width:auto;
display:block;
}
.address:last:child{
float:right;
margin-right:10%;
}
.graphic-container {
margin:0px;
padding:0px;
position:relative;
margin-left:auto;
margin-right:auto;
padding:20px;
display:flex;
align-items:flex-end;
}
#timer {
font-size:5em;
color:orangered;
}
.house-title {
margin-bottom:30px;
font-weight:bold;
}
#cancel_button{
background-color: red;
border: none;
padding: 10px;
color: white;
text-align: center;
cursor: pointer;
font-weight: bold;
}
#cancel_button:hover{
background-color:darkred;
}
</style>
</head>
<body>
<div id="container">
<h1><font class="old-app-name"></font> has moved</h1>
<h3>Please update your bookmarks to <font class="new-app-url" style="color:orangered"></font></h3>
<h2>Automatically redirecting in</h3>
<div id="timer"></div>
<input type="button" value="STOP" id="cancel_button"></input>
<div class="graphic-container">
<div class="land">
<div class="house-title old-app-name"></div>
<div class="house"></div>
<div class="address"><a class="old-app-url" href=""></a></div>
</div>
<road></road>
<road></road>
<div class="land">
<div class="house-title new-app-name"></div>
<div class="house"></div>
<div class="address"><a class="new-app-url" href=""></a></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment