<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<title>Die Zeit als Wort - in HTML, CSS und JS</title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="uhr-de_CH.js"></script>
<script type="text/javascript" src="uhr.js"></script>
<link rel="stylesheet" type="text/css" href="uhr.css" />
<link rel="stylesheet" type="text/css" href="uhr-black.css" id="theme" />
</head>
<body>
<div id="uhr">
<span class="item dot dot1" id="dot1"></span>
<span class="item dot dot2" id="dot2"></span>
<span class="item dot dot3" id="dot3"></span>
<span class="item dot dot4" id="dot4"></span>
<!-- <div id="renderarea"></div> -->
<div class="textarea">
<!-- line 1: ESkISCHaFÜF -->
<span class="item letter es">E</span>
<span class="item letter es">S</span>
<span class="item letter">K</span>
<span class="item letter isch">I</span>
<span class="item letter isch">S</span>
<span class="item letter isch">C</span>
<span class="item letter isch">H</span>
<span class="item letter">A</span>
<span class="item letter minute5 minute25 minute35 minute55">F</span>
<span class="item letter minute5 minute25 minute35 minute55">Ü</span>
<span class="item letter minute5 minute25 minute35 minute55">F</span>
<br/>
<!-- line 2: VIERTUbfZÄÄ -->
<span class="item letter minute15 minute45">V</span>
<span class="item letter minute15 minute45">I</span>
<span class="item letter minute15 minute45">E</span>
<span class="item letter minute15 minute45">R</span>
<span class="item letter minute15 minute45">T</span>
<span class="item letter minute15 minute45">U</span>
<span class="item letter">B</span>
<span class="item letter">F</span>
<span class="item letter minute10 minute50">Z</span>
<span class="item letter minute10 minute50">Ä</span>
<span class="item letter minute10 minute50">Ä</span>
<br/>
<!-- line 3: ZWÄNZGsiVOR -->
<span class="item letter minute20 minute40">Z</span>
<span class="item letter minute20 minute40">W</span>
<span class="item letter minute20 minute40">Ä</span>
<span class="item letter minute20 minute40">N</span>
<span class="item letter minute20 minute40">Z</span>
<span class="item letter minute20 minute40">G</span>
<span class="item letter">S</span>
<span class="item letter">I</span>
<span class="item letter minute25 minute40 minute45 minute50 minute55">V</span>
<span class="item letter minute25 minute40 minute45 minute50 minute55">O</span>
<span class="item letter minute25 minute40 minute45 minute50 minute55">R</span>
<br/>
<!-- line 4: ABoHAUBIege -->
<span class="item letter minute5 minute10 minute15 minute20 minute35">A</span>
<span class="item letter minute5 minute10 minute15 minute20 minute35">B</span>
<span class="item letter">O</span>
<span class="item letter minute25 minute30 minute35">H</span>
<span class="item letter minute25 minute30 minute35">A</span>
<span class="item letter minute25 minute30 minute35">U</span>
<span class="item letter minute25 minute30 minute35">B</span>
<span class="item letter minute25 minute30 minute35">I</span>
<span class="item letter">E</span>
<span class="item letter">G</span>
<span class="item letter">E</span>
<br/>
<!-- line 5: EISZWÖIsDRÜ -->
<span class="item letter hour1">E</span>
<span class="item letter hour1">I</span>
<span class="item letter hour1">S</span>
<span class="item letter hour2">Z</span>
<span class="item letter hour2">W</span>
<span class="item letter hour2">Ö</span>
<span class="item letter hour2">I</span>
<span class="item letter">S</span>
<span class="item letter hour3">D</span>
<span class="item letter hour3">R</span>
<span class="item letter hour3">Ü</span>
<br/>
<!-- line 6: VIERIFÜFIqt -->
<span class="item letter hour4">V</span>
<span class="item letter hour4">I</span>
<span class="item letter hour4">E</span>
<span class="item letter hour4">R</span>
<span class="item letter hour4">I</span>
<span class="item letter hour5">F</span>
<span class="item letter hour5">Ü</span>
<span class="item letter hour5">F</span>
<span class="item letter hour5">I</span>
<span class="item letter">Q</span>
<span class="item letter">T</span>
<br/>
<!-- line 7: SÄCHSISIBNI -->
<span class="item letter hour6">S</span>
<span class="item letter hour6">Ä</span>
<span class="item letter hour6">C</span>
<span class="item letter hour6">H</span>
<span class="item letter hour6">S</span>
<span class="item letter hour6">I</span>
<span class="item letter hour7">S</span>
<span class="item letter hour7">I</span>
<span class="item letter hour7">B</span>
<span class="item letter hour7">N</span>
<span class="item letter hour7">I</span>
<br/>
<!-- line 8: ACHTINÜNIel -->
<span class="item letter hour8">A</span>
<span class="item letter hour8">C</span>
<span class="item letter hour8">H</span>
<span class="item letter hour8">T</span>
<span class="item letter hour8">I</span>
<span class="item letter hour9">N</span>
<span class="item letter hour9">Ü</span>
<span class="item letter hour9">N</span>
<span class="item letter hour9">I</span>
<span class="item letter">E</span>
<span class="item letter">L</span>
<br/>
<!-- line 8: ZÄNIerbEUFI -->
<span class="item letter hour10">Z</span>
<span class="item letter hour10">Ä</span>
<span class="item letter hour10">N</span>
<span class="item letter hour10">I</span>
<span class="item letter">E</span>
<span class="item letter">R</span>
<span class="item letter">B</span>
<span class="item letter hour11">E</span>
<span class="item letter hour11">U</span>
<span class="item letter hour11">F</span>
<span class="item letter hour11">I</span>
<br/>
<!-- line 9: ZWÖUFInauhr -->
<span class="item letter hour12">Z</span>
<span class="item letter hour12">W</span>
<span class="item letter hour12">Ö</span>
<span class="item letter hour12">U</span>
<span class="item letter hour12">F</span>
<span class="item letter hour12">I</span>
<span class="item letter">N</span>
<span class="item letter">A</span>
<span class="item letter">U</span>
<span class="item letter">H</span>
<span class="item letter">R</span>
<br/>
</div>
<!-- glossy reflection -->
<span id="reflection"></span>
</div>
<div id="themeswitcher">
<input type="radio" name="theme" id="theme-black" value="black" checked="checked" /><label for="theme-black">BLACK</label>
<input type="radio" name="theme" id="theme-red" value="red" /><label for="theme-red">RED</label>
<input type="radio" name="theme" id="theme-blue" value="blue" /><label for="theme-blue">BLUE</label>
<input type="radio" name="theme" id="theme-green" value="green" /><label for="theme-green">GREEN</label>
<input type="radio" name="theme" id="theme-white" value="white" /><label for="theme-white">WHITE</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" checked="checked" onclick="updateClockState()" />
<label class="onoffswitch-label" for="onoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
<p id="disclaimer">Created by fritteli, inspired by <a href="http://www.qlocktwo.com/">QLOCKTWO</a>.
<script type="text/javascript">
$(document).ready(function() {
render(layout, '#renderarea');
$('input[name=theme]').on('click', function() {
switchTheme(this);
});
startClock();
});
</script>
</body>
</html>