-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
39 lines (33 loc) · 1.51 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Lightswitch</title>
<!-- Lightswitch references -->
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<div id="switchplate">
<svg id="screen" viewBox="-125 -125 250 250">
<defs>
<mask id="screen-mask" x="-124" y="-124" width="248" height="248">
<circle cx="0" cy="0" r="124" id="screen-mask-circle"></circle>
</mask>
</defs>
<g mask="url(#screen-mask)">
<rect id="white-background" x="-125" y="-125" width="250" height="125"></rect>
<rect id="black-background" x="-125" y="0" width="250" height="125"></rect>
<image id="right-swatch" class="colors" xlink:href="images/hsl.png" width="1000" height="1000" transform="translate(0, -1000)"></image>
<image id="left-swatch" class="colors" xlink:href="images/hsl.png" width="1000" height="1000" transform="translate(-1000, -1000)"></image>
</g>
<circle id="screen-on-off" class="off" cx="0" cy="0" r="125"></circle>
<circle id="switch" class="lit-border" cx="0" cy="0" r="40"></circle>
</svg>
</div>
<a id="github-link" href="https://github.com/B3nD3lan3y/Lightswitch">
<img src="images/github.png" title="View on GitHub" alt="GitHub"/>
</a>
<script src="scripts/snap/snap.svg-min.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>