-
Notifications
You must be signed in to change notification settings - Fork 0
/
clocks.html
114 lines (105 loc) · 4.97 KB
/
clocks.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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>
Clock Playground
</title>
</head>
<body>
<h1>Clocks</h1>
<div class="clock_tile">
<h2>Plain Text</h2>
<div id="clock_plain">
</div>
</div>
<div class="clock_tile">
<h2>Roman</h2>
<div id="clock_roman">
</div>
</div>
<div class="clock_tile">
<h2>Approximative</h2>
<div id="clock_approximative">
</div>
</div>
<div class="clock_tile">
<h2>Approximative grid</h2>
<div id="clock_approximative_grid">
<span id="clock_approximative_grid_its">It's</span>
<span id="clock_approximative_grid_about">about</span>
<span id="clock_approximative_grid_h0">midnight</span>
<span id="clock_approximative_grid_h1">one</span>
<span id="clock_approximative_grid_h2">two</span>
<span id="clock_approximative_grid_h3">three</span>
<span id="clock_approximative_grid_h4">four</span>
<span id="clock_approximative_grid_h5">five</span>
<span id="clock_approximative_grid_h6">six</span>
<span id="clock_approximative_grid_h7">seven</span>
<span id="clock_approximative_grid_h8">eight</span>
<span id="clock_approximative_grid_h9">nine</span>
<span id="clock_approximative_grid_h10">ten</span>
<span id="clock_approximative_grid_h11">eleven</span>
<span id="clock_approximative_grid_h13">thirteen</span>
<span id="clock_approximative_grid_h14">fourteen</span>
<span id="clock_approximative_grid_h15">fifteen</span>
<span id="clock_approximative_grid_h16">fourteen</span>
<span id="clock_approximative_grid_h17">seventeen</span>
<span id="clock_approximative_grid_h18">eighteen</span>
<span id="clock_approximative_grid_h19">nineteen</span>
<span id="clock_approximative_grid_h20">twenty</span>
<span id="clock_approximative_grid_h21">twenty-one</span>
<span id="clock_approximative_grid_h22">twenty-two</span>
<span id="clock_approximative_grid_h23">twenty-three</span>
<span id="clock_approximative_grid_h25">twenty-five</span>
<span id="clock_approximative_grid_h30">thirty</span>
<span id="clock_approximative_grid_h35">thirty-five</span>
<span id="clock_approximative_grid_h40">fourty</span>
<span id="clock_approximative_grid_h45">fourty-five</span>
<span id="clock_approximative_grid_h50">fifty</span>
<span id="clock_approximative_grid_h55">fifty-five</span>
<span id="clock_approximative_grid_m5">five</span>
<span id="clock_approximative_grid_m10">ten</span>
<span id="clock_approximative_grid_m15">fifteen</span>
<span id="clock_approximative_grid_m20">twenty</span>
<span id="clock_approximative_grid_m25">twenty-five</span>
<span id="clock_approximative_grid_m30">thirty</span>
<span id="clock_approximative_grid_m35">thirty-five</span>
<span id="clock_approximative_grid_m40">fourty</span>
<span id="clock_approximative_grid_m45">fourty-five</span>
<span id="clock_approximative_grid_m50">fifty</span>
<span id="clock_approximative_grid_m55">fifty-five</span>
<span id="clock_approximative_grid_m0">sharp</span>
</div>
</div>
<div class="clock_tile">
<h2>Basic, SVG</h2>
<div id="clock_basic_svg">
<svg height="350" width="200">
<circle id="clock_basic_svg_frame" cx="100" cy="100" r=99></circle>
<line id="clock_basic_svg_hours" ></line>
<line id="clock_basic_svg_minutes" ></line>
<line id="clock_basic_svg_seconds" ></line>
<g transform="rotate(100 200)">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="-20 100 200"
to="-20 100 200"
values="-20 100 200; 20 100 200; -20 100 200"
keyTimes="0.0; 0.5; 1.0"
begin="0s"
dur="2s"
fill="freeze"
repeatCount="indefinite"/>
<line id="clock_basic_svg_pendulum_bar" x1="100" y1="200" x2="100" y2="300"></line>
<circle id="clock_basic_svg_pendulum_weight" cx="100" cy="300" r=25></circle>
</g>
</svg>
</div>
</div>
<script src="clocks.js"
type="text/javascript"></script>
</body>
</html>