added files for v1.5.1
This commit is contained in:
commit
d842baa667
|
|
@ -0,0 +1,5 @@
|
|||
AddType text/cache-manifest .appcache
|
||||
<Files *.appcache>
|
||||
ExpiresActive On
|
||||
ExpiresDefault "access"
|
||||
</Files>
|
||||
Binary file not shown.
|
|
@ -0,0 +1,176 @@
|
|||
<!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.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 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() {
|
||||
$('input[name=theme]').on('click', function() {
|
||||
switchTheme(this);
|
||||
});
|
||||
startClock();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,15 @@
|
|||
CACHE MANIFEST
|
||||
# 1.5.1
|
||||
|
||||
index.html
|
||||
jquery-2.0.3.min.js
|
||||
uhr.css
|
||||
uhr.js
|
||||
uhr.woff
|
||||
uhr-black.css
|
||||
uhr-blue.css
|
||||
uhr-green.css
|
||||
uhr-idle-dark.css
|
||||
uhr-idle-light.css
|
||||
uhr-red.css
|
||||
uhr-white.css
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import url("uhr-idle-light.css");
|
||||
#uhr {
|
||||
background-color: #111;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
background-color: #111;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import url("uhr-idle-light.css");
|
||||
#uhr {
|
||||
background-color: #00a;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
background-color: #00a;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import url("uhr-idle-dark.css");
|
||||
#uhr {
|
||||
background-color: #0c0;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
background-color: #0c0;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.dot {
|
||||
border-color: rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 0.1em rgba(0,0,0,0.1);
|
||||
}
|
||||
.letter {
|
||||
color: rgba(0,0,0,0.1);
|
||||
text-shadow: 0 0 0.1em rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.dot {
|
||||
border-color: rgba(255,255,255,0.1);
|
||||
box-shadow: 0 0 0.1em rgba(255,255,255,0.1);
|
||||
}
|
||||
.letter {
|
||||
color: rgba(255,255,255,0.1);
|
||||
text-shadow: 0 0 0.1em rgba(255,255,255,0.1);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import url("uhr-idle-light.css");
|
||||
#uhr {
|
||||
background-color: #700;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
background-color: #700;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
@import url("uhr-idle-dark.css");
|
||||
#uhr {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.dot.active{
|
||||
border-color: #fff !important;
|
||||
box-shadow: 0 0 0.1em #fff !important;
|
||||
}
|
||||
.letter.active{
|
||||
color: #fff !important;
|
||||
text-shadow: 0 0 0.1em #fff !important;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
@font-face {
|
||||
font-family: 'Uhrenfont';
|
||||
src: url('uhr.woff') format('woff');
|
||||
}
|
||||
body {
|
||||
font-family: 'Uhrenfont', sans-serif;
|
||||
}
|
||||
#uhr {
|
||||
display: inline-block;
|
||||
padding: 3em;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 40em;
|
||||
height: 40em;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
#reflection {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: radial-gradient(225em 45em at 160% 0, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0) 40%) no-repeat scroll;
|
||||
display: block;
|
||||
margin: 0.15em;
|
||||
}
|
||||
#themeswitcher {
|
||||
}
|
||||
.textarea {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5em;
|
||||
bottom: 5em;
|
||||
left: 5em;
|
||||
right: 5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item {
|
||||
transition: box-shadow 0.5s, text-shadow 0.5s, border-color 0.5s, color 0.5s;
|
||||
}
|
||||
.dot {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 0.2em solid;
|
||||
border-radius: 1em;
|
||||
}
|
||||
.dot.active {
|
||||
border-color: #eee;
|
||||
box-shadow: 0 0 0.2em #eee;
|
||||
}
|
||||
#dot1 {
|
||||
top: 1.5em;
|
||||
left: 1.5em;
|
||||
}
|
||||
#dot2 {
|
||||
top: 1.5em;
|
||||
right: 1.5em;
|
||||
}
|
||||
#dot3 {
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
}
|
||||
#dot4 {
|
||||
bottom: 1.5em;
|
||||
left: 1.5em;
|
||||
}
|
||||
.letter {
|
||||
height: 10%;
|
||||
width: 9.0909%;
|
||||
padding: 0;
|
||||
margin: 0 -4px 0 0;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 2.2em;
|
||||
line-height: 160%;
|
||||
}
|
||||
.letter.active {
|
||||
color: #eee;
|
||||
text-shadow: 0 0 0.2em #eee;
|
||||
}
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
width: 86px;
|
||||
margin: 1em;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border: 2px solid #999;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.onoffswitch-inner {
|
||||
width: 200%;
|
||||
margin-left: -100%;
|
||||
-moz-transition: margin 0.3s ease-in 0s;
|
||||
-webkit-transition: margin 0.3s ease-in 0s;
|
||||
-o-transition: margin 0.3s ease-in 0s;
|
||||
transition: margin 0.3s ease-in 0s;
|
||||
}
|
||||
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.onoffswitch-inner:before {
|
||||
content: "EIN";
|
||||
padding-left: 12px;
|
||||
color: #eee;
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
.onoffswitch-inner:after {
|
||||
content: "AUS";
|
||||
padding-right: 12px;
|
||||
background-color: #eee;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.onoffswitch-switch {
|
||||
width: 30px;
|
||||
margin: -3px;
|
||||
background: #fff;
|
||||
border: 2px solid #999;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 58px;
|
||||
-moz-transition: all 0.3s ease-in 0s;
|
||||
-webkit-transition: all 0.3s ease-in 0s;
|
||||
-o-transition: all 0.3s ease-in 0s;
|
||||
transition: all 0.3s ease-in 0s;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
|
||||
right: 0px;
|
||||
}
|
||||
#disclaimer {
|
||||
font-size: 0.5em;
|
||||
}
|
||||
#disclaimer a {
|
||||
color: #444;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
var clock = null;
|
||||
var currentMinute = -1;
|
||||
|
||||
function highlightCurrentTime() {
|
||||
var now = new Date();
|
||||
var hour = now.getHours();
|
||||
var minute = now.getMinutes();
|
||||
if (minute == currentMinute) {
|
||||
return;
|
||||
}
|
||||
currentMinute = minute;
|
||||
resetItems();
|
||||
var dotMinute = minute % 5;
|
||||
var coarseMinute = minute - dotMinute;
|
||||
for (var i = 1; i <= dotMinute; i++) {
|
||||
highlight('dot' + i);
|
||||
}
|
||||
highlight('minute' + coarseMinute);
|
||||
if (coarseMinute >= 25) {
|
||||
hour++;
|
||||
}
|
||||
hour = normalizeHour(hour);
|
||||
highlight('hour'+hour);
|
||||
}
|
||||
|
||||
function clearDisplay() {
|
||||
$('.item').removeClass('active');
|
||||
}
|
||||
function resetItems() {
|
||||
clearDisplay()
|
||||
highlight('es');
|
||||
highlight('isch');
|
||||
}
|
||||
|
||||
function highlight(itemClass) {
|
||||
$('.item.' + itemClass).addClass('active');
|
||||
}
|
||||
|
||||
function normalizeHour(hour) {
|
||||
if (hour > 12) {
|
||||
hour %= 12;
|
||||
}
|
||||
if (hour == 0) {
|
||||
return 12;
|
||||
}
|
||||
return hour;
|
||||
}
|
||||
|
||||
function startClock() {
|
||||
if (clock == null) {
|
||||
clock = window.setInterval(highlightCurrentTime, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function stopClock() {
|
||||
if (clock != null) {
|
||||
window.clearInterval(clock);
|
||||
clock = null;
|
||||
currentMinute = -1;
|
||||
clearDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
function updateClockState() {
|
||||
if ($('#onoffswitch').is(':checked')) {
|
||||
startClock();
|
||||
} else {
|
||||
stopClock();
|
||||
}
|
||||
}
|
||||
function switchTheme(element) {
|
||||
var theme = $(element).val()
|
||||
$('#theme').attr('href', 'uhr-' + theme + '.css');
|
||||
}
|
||||
Loading…
Reference in New Issue