forked from senthil090/battery-pwa
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (67 loc) · 3.38 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
<!DOCTYPE html>
<html>
<head>
<title>Battery Life PWA test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="battery PWA">
<meta name="msapplication-TileImage" content="images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#302f3d">
<meta name="theme-color" content="#302f3d" />
<link rel="apple-touch-icon" href="images/icons/icon-152x152.png">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="title">Battery Status</div>
<div class="status-indicator">
<svg height="300" width="300">
<clipPath id="cut-off-bottom">
<circle cx="150" cy="150" r="100" stroke="black" stroke-width="3" fill="transparent" id="filler" />
</clipPath>
<linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#38464f"/>
<stop offset="100%" class="stop-color"/>
</linearGradient>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" class="stop-color" style="stop-opacity:0" />
<stop offset="100%" class="stop-color" style="stop-opacity:1" />
</radialGradient>
<circle cx="150" cy="150" r="130" stroke="url(#linear)"" stroke-width="1" fill="transparent" />
<circle cx="150" cy="150" r="110" stroke="url(#linear)"" stroke-width="1" fill="transparent" />
<circle cx="150" cy="150" r="90" stroke="url(#linear)"" stroke-width="0" fill="url(#radial)" fill-opacity="0.4" filter="url(#f1)"/>
<circle cx="150" cy="150" r="90" class="fill" stroke="black" stroke-width="1" clip-path="url(#cut-off-bottom)" />
<circle cx="150" cy="260" r="10" stroke-width="0" fill="url(#linear)" filter="url(#f1)"/>
<circle cx="275" cy="180" r="10" stroke-width="0" fill="url(#linear)" filter="url(#f1)"/>
<circle cx="53" cy="100" r="10" stroke-width="0" fill="url(#linear)" filter="url(#f1)"/>
<circle cx="70" cy="250" r="10" stroke-width="0" fill="url(#linear)" filter="url(#f1)"/>
<circle cx="255" cy="119" r="10" stroke-width="0" fill="url(#linear)" filter="url(#f1)"/>
<text x="50%" y="50%" fill="#FFF" alignment-baseline="middle" text-anchor="middle" font-size="50px" id="level"></text>
</svg>
</div>
<div class="mini-indicators">
<div>
<div class="title p10"> Charging Time</div>
<svg height="70" width="70">
<circle cx="35" cy="35" r="30" fill="transparent" stroke-width="1" class="stroke"/>
<text x="50%" y="50%" fill="#FFF" alignment-baseline="middle" text-anchor="middle" font-size="20px" id="charging"></text>
</svg>
</div>
<div>
<div class="title p10">Discharging Time</div>
<svg height="70" width="70">
<circle cx="35" cy="35" r="30" fill="transparent" stroke-width="1" class="stroke"/>
<text x="50%" y="50%" fill="#FFF" alignment-baseline="middle" text-anchor="middle" font-size="20px" id="discharging"></text>
</svg>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>