-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·109 lines (97 loc) · 4.29 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>the CLOCK</title>
<link rel="license" href="LICENSE.md">
<meta name="application-name" content="the CLOCK">
<link rel="icon" sizes="16x16" href="icons/icon16x16.png">
<link rel="icon" sizes="48x48" href="icons/icon48x48.png">
<link rel="icon" sizes="60x60" href="icons/icon60x60.png">
<link rel="icon" sizes="128x128" href="icons/icon128x128.png">
<script type="text/javascript" src="js/app.js" charset="utf-8"></script>
<style type="text/css">
body { overflow: hidden }
svg { height: 96vh }
html { height: 100% }
body { min-height: 100% }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
baseProfile="full"
width="100%"
height="100%"
viewBox="0 0 200 200">
<defs>
<!-- three hour stroke (DIN 41091.1) -->
<symbol id="threeHourStroke">
<line x1="100" y1="0" x2="100" y2="30" style="stroke:#333; stroke-width:8.4; stroke-linecap:butt"/>
</symbol>
<!-- hour stroke (DIN 41091.1) -->
<symbol id="hourStroke">
<line x1="100" y1="0" x2="100" y2="24" style="stroke:#333; stroke-width:8.4; stroke-linecap:butt"/>
</symbol>
<!-- minute stroke (DIN 41091.1) -->
<symbol id="minuteStroke">
<line x1="100" y1="0" x2="100" y2="8" style="stroke:#333; stroke-width:3.6; stroke-linecap:butt"/>
</symbol>
<!-- quarter strokes -->
<symbol id="quarterStrokes">
<use xlink:href="#threeHourStroke" />
<use xlink:href="#minuteStroke" transform="rotate( 6, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(12, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(18, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(24, 100, 100)"/>
<use xlink:href="#hourStroke" transform="rotate(30, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(36, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(42, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(48, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(54, 100, 100)"/>
<use xlink:href="#hourStroke" transform="rotate(60, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(66, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(72, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(78, 100, 100)"/>
<use xlink:href="#minuteStroke" transform="rotate(84, 100, 100)"/>
</symbol>
<!-- visible dial circle -->
<clipPath id="dialCircle">
<circle cx="100" cy="100" r="100"/>
</clipPath>
</defs>
<!-- dial -->
<g clip-path="url(#dialCircle)">
<use xlink:href="#quarterStrokes"/>
<use xlink:href="#quarterStrokes" transform="rotate( 90, 100, 100)"/>
<use xlink:href="#quarterStrokes" transform="rotate(180, 100, 100)"/>
<use xlink:href="#quarterStrokes" transform="rotate(270, 100, 100)"/>
</g>
<!-- hour hand -->
<g id="hourHand" style="fill:#222" visibility="hidden">
<rect x="97.3" y="65" width="5.4" height="35" style="stroke:none"/>
<circle cx="97.3" cy="58.5" r="9" style="stroke:none"/>
<circle cx="102.7" cy="58.5" r="9" style="stroke:none"/>
<path d="M 88.3,58.5 Q 88.3,52 100,37.5 Q 111.7,52 111.7,58.5 Z" style="stroke:none"/>
<path d="M 93.5,123 Q 100,125.5 106.5,123 Q 103,116 102.7,100 L 97.3,100 Q 97.3,116 93.5,123 Z" style="stroke:none"/>
<circle cx="100" cy="100" r="7.4" style="stroke:none"/>
</g>
<!-- minute hand -->
<g id="minuteHand" style="fill:#222" visibility="hidden">
<polygon points="95.3,49 99.5,2 100.5,2 104.7,49 102.7,100 97.3,100" style="stroke:none"/>
<path d="M 93.5,123 Q 100,125.5 106.5,123 Q 103,116 102.7,100 L 97.3,100 Q 97.3,116 93.5,123 Z" style="stroke:none"/>
<circle cx="100" cy="100" r="7" style="stroke:none"/>
</g>
<!-- second hand -->
<g id="secondHand" visibility="hidden">
<polygon points="98,4 102,4 102.3,36 97.7,36" style="fill:#ad1a14; stroke:none"/>
<circle cx="100" cy="45" r="10" style="fill:none; stroke:#ad1a14; stroke-width:4"/>
<polygon points="97.5,56 102.5,55 103,102 97,102" style="fill:#ad1a14; stroke:none"/>
</g>
<!-- axis cover -->
<g id="axisCover" style="fill:#222">
<circle id="axisCoverCircle" cx="100" cy="100" r="7" style="stroke:none"/>
</g>
</svg>
</body>
</html>