"
Template:Kyoto/small countdown
From 2014.igem.org
(Difference between revisions)
| Line 1: | Line 1: | ||
| + | <!-- http://github.com/iGEMKyoto/wiki_freeze_alert --> | ||
| + | <div id="kyoto-alert"> | ||
| + | <div id="kyoto-alert-display">count down</div> | ||
| + | <div id="kyoto-alert-popup">{{{popup|}}}</div> | ||
| + | </div> | ||
<html> | <html> | ||
| - | |||
| - | |||
| - | |||
| - | |||
<style type="text/css"> | <style type="text/css"> | ||
| - | # | + | #kyoto-alert { |
position: fixed; | position: fixed; | ||
top: 30px; | top: 30px; | ||
| Line 13: | Line 14: | ||
padding: 30px 10px; | padding: 30px 10px; | ||
display: none; | display: none; | ||
| - | |||
/* text */ | /* text */ | ||
| Line 26: | Line 26: | ||
border: 4px solid #888; | border: 4px solid #888; | ||
color: #eee; | color: #eee; | ||
| - | |||
/* box sizing */ | /* box sizing */ | ||
| Line 43: | Line 42: | ||
-moz-user-select: none; | -moz-user-select: none; | ||
-khtml-user-select: none; | -khtml-user-select: none; | ||
| + | } | ||
| + | #kyoto-alert-display { | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | } | ||
| + | #kyoto-alert-popup { | ||
| + | position: relative; | ||
| + | top: 35px; | ||
| + | color: #000; | ||
| + | |||
| + | /* text-shadow */ | ||
| + | -webkit-text-shadow: 0px 0px 6px #fff; | ||
| + | -moz-text-shadow: 0px 0px 6px #fff; | ||
| + | text-shadow: 0px 0px 6px #fff; | ||
| + | |||
| + | display: none; | ||
| + | } | ||
| + | #kyoto-alert:hover #kyoto-alert-popup { | ||
| + | display: block; | ||
} | } | ||
</style> | </style> | ||
| Line 50: | Line 68: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
//<![CDATA[ | //<![CDATA[ | ||
| - | |||
$(function(){ | $(function(){ | ||
| Line 96: | Line 113: | ||
var timer = setInterval(function() { | var timer = setInterval(function() { | ||
| - | + | var $countdown = $("#kyoto-alert"); | |
| - | var $ | + | var $display = $("#kyoto-alert-display"); |
var current_utc = get_current_utc(); | var current_utc = get_current_utc(); | ||
var interval = (freeze - current_utc)/1000; | var interval = (freeze - current_utc)/1000; | ||
if (interval < 0) { | if (interval < 0) { | ||
| - | $ | + | $display.hide(); |
} else if (interval < 4 * 24 * 3600) { | } else if (interval < 4 * 24 * 3600) { | ||
if (interval < 1 * 3600) | if (interval < 1 * 3600) | ||
| - | $ | + | $display.css("color", "#f00"); |
else if (interval < 24 * 3600) | else if (interval < 24 * 3600) | ||
| - | $ | + | $display.css("color", "#ff0"); |
var time = []; | var time = []; | ||
| Line 114: | Line 131: | ||
time.push(itos(minute_qr[1], 2) + 'm'); | time.push(itos(minute_qr[1], 2) + 'm'); | ||
time.push(itos(minute_qr[0], 2) + 'h'); | time.push(itos(minute_qr[0], 2) + 'h'); | ||
| - | $ | + | $display.text(time.reverse().join(' : ')); |
$countdown.show(); | $countdown.show(); | ||
} else { | } else { | ||
| Line 124: | Line 141: | ||
time.push(itos(hour_qr[1], 2) + 'h'); | time.push(itos(hour_qr[1], 2) + 'h'); | ||
time.push(itos(hour_qr[0], 3) + 'd'); | time.push(itos(hour_qr[0], 3) + 'd'); | ||
| - | $ | + | $display.text(time.reverse().join(' : ')); |
$countdown.show(); | $countdown.show(); | ||
} | } | ||
}, 200); | }, 200); | ||
| - | $("# | + | $("#kyoto-alert").draggable(); |
}); | }); | ||
| - | |||
//]]> | //]]> | ||
</script> | </script> | ||
</html> | </html> | ||
Revision as of 05:20, 16 September 2014
count down
