Skip to content

Instantly share code, notes, and snippets.

@defeo

defeo/chairman.html

Created July 13, 2016 13:58
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 defeo/ba2192d106801ee34bd5cef26bc1ecb8 to your computer and use it in GitHub Desktop.
Save defeo/ba2192d106801ee34bd5cef26bc1ecb8 to your computer and use it in GitHub Desktop.
Download ZIP
A fullscreen glowing "5 minutes" sign for chairmen
Raw
chairman.html
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes flash {
from { color: #000; background-color: #fff; }
to { color: #444; background-color: #ddd; }
}
html {
font-family: sans-serif;
text-align: center;
animation: 1s ease-in infinite alternate flash;
position: fixed; top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
h1 { display: inline-block; }
small { font-size: 40%; }
</style>
</head>
<body>
<h1><span>5<small> mins</small></span></h1>
<script>
let time = document.querySelector('h1');
let fullscreen = () => {
let hscale = window.innerWidth / time.clientWidth;
let vscale = window.innerHeight / time.clientHeight;
let scale = Math.min(hscale, vscale);
time.style.transform = `translate(0%, -50%) scale(${scale})`;
}
fullscreen();
window.onresize = fullscreen;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment