index.html

<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<style type="text/css">
  body 
  {
    font-family: 'Iceland', cursive;
    font-size:400px;
    text-align:center;
    background:url('conan.gif');
    color:white;
    padding: 0;
    margin: 0;
  }
  #progress
  {
    position: absolute;
    bottom: -300px;
    left: 0;
    height:300px;
    background:#000 url('fire.gif') repeat-x 50% 100%;
    width: 100%;
  }
  #message {
    display: none;
    color: red;
  }
</style>
<div id="timer"></div>
<div id="progress"><div id="message">OVER!</div></div>
<script>
var timer = document.getElementById('timer'), start
timer.innerText = (start = (window.location.hash.replace(/^#/, "") || "900"))
setInterval(function(){
  timer.innerText = parseInt(timer.innerText)-1
  progress = parseFloat((timer.innerText/start))
  if (progress > 0) { document.getElementById('progress').style.bottom = (-300 * progress)+"px" }
  else { document.getElementById('progress').style.height = "100%"; document.getElementById("message").style.display = "block" }
}, 1000)
</script>