-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
114 lines (101 loc) · 4.79 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
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,600|Lobster+Two:400,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.10/angular.min.js"></script>
<meta charset="UTF-8">
<title>Angular SVG Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="angularClock">
<!--clock template -->
<script id="clock-template.html" type="text/ng-template">
<div>
<svg id="clock" viewBox="0 0 100 100" fill="{{bgColor}}">
<!-- clock main circle and center circle -->
<circle id="clock-face" cx="50" cy="50" r="45" stroke="{{color}}"/>
<circle cx="50" cy="50" r="2" fill="{{color}}"></circle>
<!-- 12 hour tick marks -->
<g id="ticks" stroke="{{color}}">
<line x1='50' y1='5.000' x2='50.00' y2='10.00'/>
<line x1='72.50' y1='11.03' x2='70.00' y2='15.36'/>
<line x1='88.97' y1='27.50' x2='84.64' y2='30.00'/>
<line x1='95.00' y1='50.00' x2='90.00' y2='50.00'/>
<line x1='88.97' y1='72.50' x2='84.64' y2='70.00'/>
<line x1='72.50' y1='88.97' x2='70.00' y2='84.64'/>
<line x1='50.00' y1='95.00' x2='50.00' y2='90.00'/>
<line x1='27.50' y1='88.97' x2='30.00' y2='84.64'/>
<line x1='11.03' y1='72.50' x2='15.36' y2='70.00'/>
<line x1='5.000' y1='50.00' x2='10.00' y2='50.00'/>
<line x1='11.03' y1='27.50' x2='15.36' y2='30.00'/>
<line x1='27.50' y1='11.03' x2='30.00' y2='15.36'/>
</g>
<!-- 12 hour numbers -->
<g id="numbers" ng-show="hourNumber">
<text x="50" y="18" fill="{{color}}">12</text>
<text x="66" y="23" fill="{{color}}">1</text>
<text x="80" y="34" fill="{{color}}">2</text>
<text x="86" y="53" fill="{{color}}">3</text>
<text x="80" y="71" fill="{{color}}">4</text>
<text x="67" y="84" fill="{{color}}">5</text>
<text x="50" y="88" fill="{{color}}">6</text>
<text x="33" y="83" fill="{{color}}">7</text>
<text x="20" y="71" fill="{{color}}">8</text>
<text x="15" y="53" fill="{{color}}">9</text>
<text x="22" y="37" fill="{{color}}">10</text>
<text x="33" y="24" fill="{{color}}">11</text>
</g>
<!-- clock handles -->
<g id="hands" stroke="{{color}}">
<line id="hour-hand" x1="50" y1="50" x2="50" y2="20"/>
<line id="minute-hand" x1="50" y1="50" x2="50" y2="14"/>
<line id="second-hand" x1="50" y1="50" x2="50" y2="8"/>
</g>
</svg>
</div>
</script>
<div class="container text-center">
<div class="row">
<div class="col-sm-12">
<h1>Angular clock</h1>
<h4>A svg analog clock directive for angular.js </h4>
<h4><a href="https://github.com/umair-khanzada/angularClock" title="svg analog clock">view on github</a></h4>
<h2></h2>
<section >
<div class="panel panel-default">
<div class="panel-heading">Simple usage</div>
<div class="panel-body">
<code>
<clock> </clock>
</code>
<!--clock directive-->
<clock></clock>
</div>
</div>
</section>
<section >
<div class="panel panel-default">
<div class="panel-heading">Advance usage</div>
<div class="panel-body">
<code>
<clock color="#e44b23" bg-color="#f1e05a" hour-number="true"> </clock>
</code>
<!--clock directive-->
<clock color="#e44b23" bg-color="#f1e05a" hour-number="true"></clock>
<h2></h2>
<h2></h2>
<code>
<clock size="200" hour-number="true"> </clock>
</code>
<!--clock directive-->
<clock size="200" hour-number="true"></clock>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>