Tab Timer

one of the chrome extentions

by secretgspot

HTML

<!-- {{{ -->
  <div id='stripBg1'></div>
  <div id='stripBg2'></div>

  <div id='middle'>
    <table id='inputs'>
      <!-- {{{ -->

      <tr class='first'>
        <td>
        <form id="timerForm">
          <input id='h2' type='tel' autocomplete="off" spellcheck=false min='0'           value="0"  /><span class='inputSep'></span>
          <input id='m2' type='tel' autocomplete="off" spellcheck=false min='0'           value="10" /><span class='inputSep s'></span>
          <input id='s2' type='tel' autocomplete="off" spellcheck=false min='0' class="s" value="0"  />
        </form>
        </td>

        <td>
        <form id="alarmForm">
          <input id='h1' type='tel' autocomplete="off" spellcheck=false min='0' max='23' maxlength=2 /><span class='inputSep'></span>
          <input id='m1' type='tel' autocomplete="off" spellcheck=false min='0' max='59' maxlength=2 /><span class='inputSep s'></span>
          <input id='s1' type='tel' autocomplete="off" spellcheck=false min='0' max='59' maxlength=2 class="s" value="0"/>
        </form>
        </td>

        <td>
        <form id='stopwForm'></form>
        </td>
      </tr>
      <tr>
        <td><button form='timerForm' id='timerButton' tabindex='-1' type='submit'><span>timer</span></button></td>
        <td><button form='alarmForm' id='alarmButton' tabindex='-1' type='submit'><span>alarm</span></button></td>
        <td><button form='stopwForm' id='stopwButton'               type='submit'><span>stopwatch</span></button></td>
      </tr>
      <!-- }}} -->
    </table>

    <table id='vertical' style='margin-left: 600px'>
      <!-- {{{ -->
      <tr><td id='time' style='opacity:0'></td></tr>
      <tr><td id='inputOverlap'></td></tr>
      <!--<tr><td id='counter'><span id='cTime'>00</span><span id='ms'>000</span></td></tr>-->
      <tr><td id='counter'></td></tr>
      <tr><td><button type='button' tabindex='-1' id='pause' class='runing'></button></tr></td>
      <tr><td id='iframe_td'><iframe...

CSS

/* notes
{{{
-intial values of transitioned properties must be written inline otherwise a transition will be triggered on page load
}}}
*/

/*activate the GPU for compositing each page => made my old OS crash
html
{
  -webkit-transform: translate3d(0, 0, 0);
}
*/

/* structure */
/* {{{ */
/* strips -- outer structure -- CORE: most critical CSS*/
/* {{{ */
/* everything absolute positioning expect #middle */
#stripBg1,
#stripBg2,
#inputs,
#vertical
{
  position: absolute;
}
#inputs,
#stripBg1,
#stripBg2
{
  margin-top: 50px;
  height: 150px;
}
body
{
  margin:0;
}
#inputs,
#stripBg1,
#stripBg2,
#middle
{
  width: 900px;
}
/*only used to middle content -- no other way found to middle content: left:50%;margin-left:width/2; doesn't do if window's width < content's width */
#middle
{
  margin: auto;
}
#vertical
{
  height: 100%; /*for tables height is a min-height */
  display: table;
}
#stripBg1,
#stripBg2
{
  min-width: 100%;
}
#vertical,
#inputs td
{
  width: 300px;
}
html.alarm #vertical
{
  margin-left: 300px !important;
}
html.timer #vertical
{
  margin-left: 0px !important;
}
/* }}} */

/* strips -- inner structure */
/* {{{ */
/* vertical strip */
/* {{{ */
#vertical td
{
  padding:0;
}
#top
{
  vertical-align: bottom;
}
#time
{
  vertical-align: top;
  padding-top: 5px !important;
  height: 45px;
}
#counter
{
  font-size: 105px;
  /*line-height: 140px;*/
  padding-top: 40px !important;
  line-height: 100px;
  padding-top: 15px;
  width: 300px;
}
#counter.tiny
{
  font-size: 65px;
}
#inputOverlap
{
  height: 150px;
}
#top
{
  font-size: 14px;
  padding-bottom: 7px !important;
}
#iframe_td
{
  line-height: 0px;
  font-size: 0px;
}
#iframe
{
  height: 180px;
}
#iframe
{
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0px 1px 0px 1px;
          box-sizing: border-box;/*supported everywhere expect IE7*/
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* }}} */
/* horizontal strip */
/* {{{ */
#inputs
{
  font-size:...

JavaScript

var g = void 0,
  m = !0,
  n = null,
  p = !1;
if ("." === location.hostname[location.hostname.length - 1]) location.hostname = location.hostname.substr(0, location.hostname.length - 1);
var q;
(function () {
  function w(a) {
    return 10 > a ? "0" + a : "" + a
  }
  var x = document.createElement("div");
  x.style.cssText = "background-color:rgba(150,255,150,.5)";
  if (-1 !== window.navigator.userAgent.indexOf("MSIE") && -1 === x.style.backgroundColor.indexOf("rgba") && -1 === location.href.indexOf("passtest")) document.body.innerHTML = "<style>*{font-size:20px !important;text-align:center}</style><div style='padding: 30px;'>You seem to use an old version of Internet Explorer.<br>Please upgrade to Internet Explorer 9.</div>", q = g;
  else {
    q = {};
    if (document.getElementsByTagName) document.head = document.head || document.getElementsByTagName("head")[0], document.body = document.body || document.getElementsByTagName("body")[0], document.j = document.documentElement;
    Date.prototype.s = function (a) {
      var b = this.getHours();
      a && (b %= 12, 0 == b && (b = 12));
      return w(b)
    };
    Date.prototype.t = function () {
      return w(this.getMinutes())
    };
    Date.prototype.add = function (a, b, d, e) {
      e === g && (e = 0);
      e = this.getMilliseconds() + e;
      d = this.getSeconds() + d + e / 1E3;
      b = this.getMinutes() + b + d / 60;
      a = this.getHours() + a + b / 60;
      this.setHours(a % 24, b % 60, d % 60, e % 1E3);
      this.setUTCDate(this.getUTCDate() + a / 24);
      return this
    };
    if (!String.prototype.splice) String.prototype.splice = function (a, b, d, e) {
      q.a(!e, "implement it");
      for (var e = [], c = 0; c < this.length; c++) e.push(this[c]);
      d ? e.splice(a, b, d) : e.splice(a, b);
      a = "";
      for (c = 0; c < e.length; c++) a += e[c];
      return a
    };
    q.indexOf = function (a, b) {
      q.a(a.constructor === NodeList || q.e().n && a.constructor ===...