Difference between revisions of "Template:Freiburg/Home"

(Replaced content with "<html> <body> <p style="text-align: center"> <a href="https://2016.igem.org/Team:Freiburg"> <img src="https://static.igem.org/mediawiki/2016/8/84/T--Freiburg--Logo.pn...")
Line 1: Line 1:
 
<html>
 
<html>
 +
<head>
 +
<!-- styles for countdown -->
 +
    <style>
 +
        body {
 +
            text-align: right;
 +
/*            background: #00ECB9;*/
 +
            font-family: sans-serif;
 +
            font-weight: 100;
 +
        }
 +
 +
        h1 {
 +
            color: #396;
 +
            font-weight: 0;
 +
            font-size: 10px;
 +
/*            margin: 20px 0px 10px;*/
 +
        }
 +
 +
        #clockdiv {
 +
            font-family: sans-serif;
 +
            color: #fff;
 +
            display: inline-block;
 +
            font-weight: 10;
 +
            text-align: center;
 +
            font-size: 10px;
 +
        }
 +
 +
        #clockdiv>div {
 +
            padding: 5px;
 +
            border-radius: 3px;
 +
/*            background: #00BF96;*/
 +
            display: inline-block;
 +
        }
 +
 +
        #clockdiv div>span {
 +
            padding: 5px;
 +
            border-radius: 3px;
 +
            background: black;
 +
            display: inline-block;
 +
        }
 +
 +
        .smalltext {
 +
            color: black;
 +
            padding-top: 5px;
 +
            font-size: 10px;
 +
        }
 +
    </style>
 +
    <!-- end of style for countdown -->
 +
</head>
 +
 
<body>
 
<body>
 +
<h1>Wiki Freeze Countdown</h1>
 +
    <div id="clockdiv">
 +
        <div>
 +
            <span class="days"></span>
 +
            <div class="smalltext">Days</div>
 +
        </div>
 +
        <div>
 +
            <span class="hours"></span>
 +
            <div class="smalltext">Hours</div>
 +
        </div>
 +
        <div>
 +
            <span class="minutes"></span>
 +
            <div class="smalltext">Minutes</div>
 +
        </div>
 +
        <div>
 +
            <span class="seconds"></span>
 +
            <div class="smalltext">Seconds</div>
 +
        </div>
 +
    </div>
 +
 +
 
<p style="text-align: center">
 
<p style="text-align: center">
 
     <a href="https://2016.igem.org/Team:Freiburg">
 
     <a href="https://2016.igem.org/Team:Freiburg">
Line 6: Line 76:
 
     </a>
 
     </a>
 
</p>
 
</p>
 +
 +
 +
  <script>
 +
        console.log("hello js");
 +
 +
        function getTimeRemaining(endtime) {
 +
            var t = Date.parse(endtime) - Date.parse(new Date());
 +
            var seconds = Math.floor((t / 1000) % 60);
 +
            var minutes = Math.floor((t / 1000 / 60) % 60);
 +
            var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
 +
            var days = Math.floor(t / (1000 * 60 * 60 * 24));
 +
            return {
 +
                'total': t,
 +
                'days': days,
 +
                'hours': hours,
 +
                'minutes': minutes,
 +
                'seconds': seconds
 +
            };
 +
        }
 +
 +
        function initializeClock(id, endtime) {
 +
            var clock = document.getElementById(id);
 +
            var daysSpan = clock.querySelector('.days');
 +
            var hoursSpan = clock.querySelector('.hours');
 +
            var minutesSpan = clock.querySelector('.minutes');
 +
            var secondsSpan = clock.querySelector('.seconds');
 +
 +
            function updateClock() {
 +
                var t = getTimeRemaining(endtime);
 +
 +
                daysSpan.innerHTML = t.days;
 +
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
 +
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
 +
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
 +
 +
                if (t.total <= 0) {
 +
                    clearInterval(timeinterval);
 +
                }
 +
            }
 +
 +
            updateClock();
 +
            var timeinterval = setInterval(updateClock, 1000);
 +
        }
 +
 +
//        var deadline = new Date(Date.parse(new Date()) + 31 * 24 * 60 * 60 * 1000);
 +
        var deadline = new Date(2016,9,19,0,0,0,0)
 +
 +
        initializeClock('clockdiv', deadline);
 +
    </script>
 +
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 06:02, 18 September 2016

Wiki Freeze Countdown

Days
Hours
Minutes
Seconds