adspace: 30c3-countdown-banner

content/static/script/30c3-countdown-banner.js

@@ -0,0 +1,31 @@
+/**
+ * Original: https://github.com/trailblazr/30c3-countdown-banner-180x270/blob/master/30c3.html
+ * Heavily Modified
+ **/
+$(document).ready(function() {
+    var el = $("<a class='countdown' href='https://events.ccc.de/congress/2013/' title='Click to get teleported to the 30C3 chaos wiki ...'><div class='countdownLine' style='margin-top:70px;'><div class='countdownElement'><span class='days'>0</span><span class='foo'>d </span></div><div class='countdownElement'><span class='hours'>0</span><span class='foo'>h </span></div><div class='countdownElement'><span class='minutes'>0</span><span class='foo'>m </span></div><div class='countdownElement'><span class='seconds'>0</span><span class='foo'>s</span></div></div></a>");
+
+    var padLeft = function(n, l, p) {
+	n = "" + n;
+	while(n.length < l)
+	    n = p + n;
+	return n;
+    };
+    var target = new Date("2013-12-27T10:00:00+01:00").getTime();
+    var updateCountDown = function() {
+        var now = new Date().getTime();
+	var left = (target - now) / 1000;
+
+	var setField = function(id, val) {
+	    el.find(id).text(padLeft(val, 2, "0"));
+	};
+	setField('.days', Math.floor(left / 86400));
+	setField('.hours', Math.floor(left / 3600) % 24);
+	setField('.minutes', Math.floor(left / 60) % 60);
+	setField('.seconds', Math.floor(left) % 60);
+    }
+    
+    setInterval(updateCountDown, 1000);
+    updateCountDown();
+    $('#adspace').empty().append(el);
+});

content/static/style/default.css

@@ -787,3 +787,35 @@ article,aside,details,figcaption,figure,
 footer,header,hgroup,menu,nav,section {
     display: block;
 }
+
+/* -- 30c3-countdown -- */
+.countdown {
+  display: block;
+  width:180px;
+  height:270px;
+  background-image: url('../images/30c3_propaganda_180x270.png');
+  background-size:100%;
+  background-repeat:no-repeat;
+  max-width:180px;
+  margin:auto;
+  text-align: center;
+  color:white !important;
+  font-family:'Source Sans Pro',monospace,Helvetica,Arial,Sans-Serif;
+  font-size:22px;
+  font-weight:300;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  padding:7px;
+  border:none;
+}
+.countdown .countdownElement {
+  display: inline-block;
+}
+.countdown .foo {
+  color:white;
+  font-size:8px;
+  font-weight: 100;
+  white-space: pre;
+}

xsl/header.xsl

@@ -62,6 +62,9 @@
   <xsl:call-template name="make-script-tag">
     <xsl:with-param name="name" select="'bitlove-enclosures'"/>
   </xsl:call-template>
+  <xsl:call-template name="make-script-tag">
+    <xsl:with-param name="name" select="'30c3-countdown-banner'"/>
+  </xsl:call-template>
   
   </xsl:template>