design: security level indicator

color coded for your protection

Here's an example of what it looks like. It took countless hours by numberless intelligence operatives to come up with raw data that was then boiled down by computers so secret and powerful that you would not recognize them as machines. Finally, after much trial and frustration, literally minutes of programming, the compact client-side security level indicator was born. Here's how to get it running on your site.

load the javascript

Security through JavaScript, ironic, no? All the jolly security goodfullness lives in the file dhs.js. Wonder what DHS stands for, don't you? Here's how to load the file on the page:

<script type="text/javascript" src="dhs.js"></script>

what's in the data

The dhs.js file above creates two arrays. One, called colors, contains HTML colors in both machine and security-aware-human-readable forms. The other array, called recs, contains recommendations for calm yet vigilant behavior. These are ordered in a secret encrypted numbering system that starts at zero and goes up to, well, whatever it goes up to.

how's it work?

When the page loads, it calls a JavaScript function from the dhs.js script that initiates the security evaluation process. You can place this in an onload script, or in a script block at the bottom of the page (so that it only executes after the page renders). Here's what the script block on this page looks like:

<script type="text/javascript">
  displayCrucialSecurityBaloneySauce();
</script>

Here's what this function looks like. Psst, top secret, pass it on...

// top secret security clearance required
function displayCrucialSecurityBaloneySauce() {
  var color = colors[Math.floor(Math.random() * colors.length)];
  var rec = recs[Math.floor(Math.random() * recs.length)];
  var colorBlock = document.getElementById("seccolor");
  var colorName = document.getElementById("seccolorname");
  var comment = document.getElementById("seccomment");
  if (colorBlock) {colorBlock.style.backgroundColor = color[0];}
  if (colorName)  {colorName.firstChild.nodeValue = color[1];}
  if (comment)    {comment.firstChild.nodeValue = rec;}
}

What happens here is an item is selected from each of the arrays, and then the appropriate action taken. Ooh, that just sounds so security-ish, doesn't it? Three elements are selected from the page using the document.getElementById() function, and then certain attributes of those element references are modified using values from the arrays. The colorBlock variable refers to the div element that shows the security indication color. The style.backgroundColor property of that element is set with the color array value. The text of the colorName and comment elements is reset from array values using the firstChild.nodeValue attribute. When using this notation, be careful not to introduce other HTML elements within the div tag being modified.

HTML source

The HTML source is pretty simple, since the indicator doesn't actually do anything. Well, yes, it does keep you on your toes, but then that's the point, right? Here's what it looks like:

<div id="security">
  <div id="secheader">Security Level</div>
  <div id="seccolor"></div>
  <div id="seccolorname">Lavender Blush</div>
  <div id="secrec">Recommendation:</div>
  <div id="seccomment">Hide under the bed.</div>
</div>

As with other code on the site, we provide default values in content manipulated through scripts so that users with JavaScript disabled can still see something.

styling the security level indicator

Now a handful of div tags all by themselves don't look like much. So we style them. Here's what we use on the deep gray sea personality of the site:

/* security level */
#security {float: left;
  width: 190px;
  border: 1px solid #0D2D40;
  margin: 20px 20px 10px 0;
  background-color: #eee;
  text-align: center;}
#secheader {text-align: center;
  color: #B10042;
  font-size: 135%;
  letter-spacing: 0.1em;
  font-weight: bold;
  margin: 10px 0;}
#seccolor {margin: auto;
  width: 130px !important;
  height: 130px !important;
  border: 1px solid #0D2D40;
  background-color: #fff0f5;}
#seccolorname {text-align: center;
  font-size: 110%;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin: 10px;}
#secrec {text-align: center;
  margin: 10px 10px 0 10px;
  font-weight: bold;
  font-style: italic;}  
#seccomment {text-align: center;
  margin: 5px 10px 20px 10px;}

You may recognize some of the id values from the earlier script listing. Some of the background properties we change are initially defined in the stylesheet.

be calm, but vigilant

I hope the security level indicator helps provide you and your family with increased peace of mind, a sense of serene alertness, and maybe maybe some new color ideas when it comes time to paint the den.