/
index.html
72 lines (60 loc) · 2.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Treachery of Images</title>
<meta charset="utf-8"/>
<style type="text/css" id="xmljellysandwich_css">
a { color: darkgreen; text-decoration: none }
a:hover { text-decoration: underline }
td { border: medium solid lightgreen; border-radius: 45%; background-color: cornsilk; width: 1.5em; height: 1.5em }
#page_body { border-top: medium groove black; padding-top: 1em; padding-bottom: 1em }
#page_footer { border-top: medium groove black; margin-top:1m; padding-top: 1em }
#page_footer > * { margin: 0.5em 0em }
#time-setting { display: none }
h1#page_title { font-size: 140%; margin-top: 1em }
h1 small { font-size: 60% }
#clock { height: 67% }
.timeView { display: none }
.timeView.opened { display: block }
</style>
<script type="text/javascript"
src="../lib/Saxon-JS-1.2.0/SaxonJS.min.js"><!-- parsers are so easily confused --></script>
<script>
/* http://www.saxonica.com/saxon-js/documentation/index.html#!api/transform */
window.onload = initiate()
function initiate() {
SaxonJS.transform(
{ stylesheetLocation: "die_uhr.sef",
initialTemplate: "tell",
stylesheetParams: {
clockSet: nanjikan()
} } );
}
function nanjikan() {
var now = new Date();
var hh = now.getHours(); var hh = (hh > 9) ? ''+hh : '0'+hh;
var mm = now.getMinutes(); var mm = (mm > 9) ? ''+mm : '0'+mm;
var ss = now.getSeconds(); var ss = (ss > 9) ? ''+ss : '0'+ss;
return (hh + ':' + mm + ':' + ss);
}
</script>
</head>
<body>
<div id="page_header">
<h1 id="page_title">The Treachery of Images <small>(after Magritte)</small></h1>
</div>
<div id="dashboard" style="position: absolute; right: 5%; top: 5%">
<button id="noon-reset_button">Noon</button>
<!--<button id="local-reset_button">Page load time</button>-->
<button id="system-reset-button" onclick="initiate();">System</button>
<button id="view-toggle">Literal</button>
<!--<button id="standard-reset_button">NIST clock</button>-->
</div>
<div id="page_body">
<svg id="clock" xmlns="http://www.w3.org/2000/svg">
<!--<rect width="100%" height="100%" fill="lemonchiffon"/>-->
<text x="10" y="50" font-size="3vw" font-style="italic">Ist das nicht eine Uhr?</text>
<!-- <xsl:result-document href="#xmljellysandwich_body"> .... </xsl:result-document> -->
</svg>
</div>
</body>
</html>