Fireworks Info Message

iFrame content

by Chris Watson

HTML

<table cellpadding="0" cellspacing="5">
    <tr><td colspan="2" class="heading">Keyboard hot-keys</td></tr>
   <tr style="font-weight:bold">
      <td>
         <div>H</div>
      </td>
      <td>show/hide this information</td>
   </tr>
   <tr>
      <td>
         <div>B</div>
      </td>
      <td>set background colour</td>
   </tr>
   <tr>
      <td>
         <div>S</div>
      </td>
      <td>save / export fireworks to PNG</td>
   </tr>
   <tr>
      <td>
         <div><span class="small"><span class="left">Pause</span><span class="right">Break</span></span></div>
         <div>P</div>
      </td>
      <td>play / pause</td>
   </tr>
   <tr>
      <td>
          <div><span class="small">&#8592; Back Space</span></div>
      </td>
      <td>clear newest firework</td>
   </tr>
   <tr>
      <td>
         <div>
             <span class="small">Del</span>
          </div>
      </td>
      <td>clear oldest firework</td>
   </tr>
   <tr>
      <td>
         <div>
             <span class="small">Esc</span>
          </div>
      </td>
      <td>clear all fireworks</td>
   </tr>
   <tr>
      <td>
         <div>
             <span class="small">Space</span>
          </div>
      </td>
      <td>launch one random screeching firework!</td>
   </tr>
   <tr>
      <td>
         <div>A</div>
      </td>
      <td>toggle automatic fireworks</td>
   </tr>
   <tr>
      <td>
         <div>
             <span class="small"><span class="left">Enter</span><span class="right">&#8629;</span></span>
          </div>
          <div>0</div>
      </td>
      <td>launch specified number of fireworks</td>
   </tr>
   <tr>
      <td>
         <div>1</div><div>2</div><div>3</div><br>
         <div>4</div><div>5</div><div>6</div><br>
         <div>7</div><div>8</div><div>9</div>
      </td>
      <td>launch n fireworks</td>
   </tr>
</table>

CSS

body{
    height:100%;
    font-size:1.2em;
    cursor:default;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
table{
    height:100%;
    margin:0 auto;
}
.heading{
    font-weight:bold;
    font-style:italic;
    text-shadow:0 0 20px #fff;
}
table td:nth-child(1){
    text-align:right;
}
table td:nth-child(2){
    background:rgba(255,255,255,0.5);
}
table tr div{
    text-align:left;
    display:inline-block;
    border:0.2em outset #808080;
    box-shadow:0.1em 0.1em 0.2em #404040, -0.1em -0.1em 0.2em #BFBFBF, inset 0 0 10px #E6E6E6;
    text-shadow:0 0 0.1em #ccc;
    background:#fff;
    vertical-align:top;
    min-width:1em;
    min-height:1em;
    padding:0 0.25em;
}
table tr td:nth-child(2){
    font-style:italic;
    padding:0 1em;
}
.small{
    font-size:0.5em;
    padding:0;
}
.right{
    display:block;
    text-align:right;
}
.left{
    display:block;
}

JavaScript

var b = document.documentElement;
b.onclick = function(e){f(e)};
b.oncontextmenu = function(e){f(e); return false};
b.onkeydown = function(e){f(e)};
b.onmousedown = function(){return false};
    
function f(e){
    parent.document.getElementById('infoMsg').style.display = 'none';
    e.preventDefault();
};