-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex.html
74 lines (71 loc) · 8.13 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
<!DOCTYPE html>
<html lang="en" data-theme='light'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<title>Calculator</title>
<link rel="icon" href="images/calculator.png">
</head>
<body class="body">
<div class="calculator">
<div class="topbar">
<div class="time" id="time"></div>
<div class="signal">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">
.st0{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style><g><g><path d="M6.7321353,88.6787186h17.250309c0.9574108,0,1.7321358-0.7747192,1.7321358-1.732132V68.4732895 c0-0.9574051-0.774725-1.732132-1.7321358-1.732132H6.7321353C5.7747245,66.7411575,5,67.5158844,5,68.4732895v18.4732971 C5,87.9039993,5.7747245,88.6787186,6.7321353,88.6787186z"/><path d="M29.8284035,48.2678642c-0.9574108,0-1.7321358,0.7747231-1.7321358,1.7321358v36.9465866 c0,0.9574127,0.774725,1.732132,1.7321358,1.732132h17.2486191c0.9574089,0,1.7321358-0.7747192,1.7321358-1.732132V50 c0-0.9574127-0.7747269-1.7321358-1.7321358-1.7321358H29.8284035z"/><path d="M52.9229774,30.0686016c-0.9574089,0-1.7321358,0.774725-1.7321358,1.7321358v55.1458511 c0,0.9574127,0.7747269,1.732132,1.7321358,1.732132h17.2486229c0.9574051,0,1.732132-0.7747192,1.732132-1.732132V31.8007374 c0-0.9574108-0.7747269-1.7321358-1.732132-1.7321358H52.9229774z"/><path d="M76.0175552,11.3212795c-0.9574127,0-1.7321396,0.774725-1.7321396,1.7321358v73.8931732 c0,0.9574127,0.7747269,1.732132,1.7321396,1.732132H93.267868c0.9574051,0,1.732132-0.7747192,1.732132-1.732132V13.0534153 c0-0.9574108-0.7747269-1.7321358-1.732132-1.7321358H76.0175552z"/></g></g></svg>
</div>
<div class="net">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M50,27.4462891c-15.4638672,0-29.6728516,9.0756836-36.1982422,23.1210938l5.4414063,2.5283203 C24.7890625,41.1591797,36.8613281,33.4462891,50,33.4462891s25.2109375,7.7128906,30.7568359,19.6494141l5.4414063-2.5283203 C79.6728516,36.5219727,65.4638672,27.4462891,50,27.4462891z"/><path d="M50,39.1108398c-10.9316406,0-20.9746094,6.4208984-25.5849609,16.3574219l5.4433594,2.5253906 C33.4892578,50.1674805,41.3955078,45.1108398,50,45.1108398c8.6289063,0,16.5498047,5.0566406,20.1796875,12.8823242 l5.4433594-2.5244141C71.0136719,45.5317383,60.9560547,39.1108398,50,39.1108398z"/><path d="M50,50.7758789c-6.3984375,0-12.3027344,3.7592773-15.0410156,9.5771484l5.4296875,2.5546875 C42.1416016,59.1826172,45.9140625,56.7758789,50,56.7758789s7.8583984,2.4067383,9.6113281,6.1318359l5.4296875-2.5546875 C62.3027344,54.5351563,56.3984375,50.7758789,50,50.7758789z"/><circle cx="50" cy="66.5919342" r="4.9617538"/></g></svg>
</div>
<div class="battery">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><style type="text/css">
.st0{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style><g><g><path d="M94.1190338,37.3756371h-6.3078842v-9.6906681c0-0.4869423-0.3940277-0.88097-0.8809662-0.88097H5.8809695 C5.3940272,26.8039989,5,27.1980267,5,27.6849689V72.315033c0,0.4869385,0.3940272,0.8809662,0.8809695,0.8809662h81.0492172 c0.4869385,0,0.8809662-0.3940277,0.8809662-0.8809662v-9.69067h6.3078842c0.4869385,0,0.8809662-0.3940277,0.8809662-0.88097 V38.2566071C95,37.7696648,94.6059723,37.3756371,94.1190338,37.3756371z M93.23806,60.8624268h-6.3078766 c-0.4869461,0-0.8809738,0.3940239-0.8809738,0.8809662v9.6906662H6.7619395V28.5659389h79.2872696v9.6906681 c0,0.4869423,0.3940277,0.8809662,0.8809738,0.8809662H93.23806V60.8624268z"/><polygon points="83.4063034,31.208847 9.4048481,31.208847 9.4048481,68.791153 83.4063034,68.791153 83.4063034,58.2195168 90.5951538,58.2195168 90.5951538,41.7804832 83.4063034,41.7804832"/></g></g></svg>
</div>
</div>
<div class="screen">
<div class="theme-mode">
<input type="checkbox" id="themeInput" class="theme-input">
<label class="theme-label" for="themeInput">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M65.7,77.7c14.6,0,26.4-11.9,26.4-26.4c0-14.3-11.5-26-25.7-26.4c-4.2-2.3-9-3.6-13.8-3.6c-15.9,0-28.8,12.9-28.8,28.8 s12.9,28.8,28.8,28.8c3.1,0,6.2-0.5,9.1-1.5C63,77.6,64.3,77.7,65.7,77.7z M88.1,51.3c0,12.4-10.1,22.4-22.4,22.4 c-1.3,0-2.6-0.1-3.8-0.3C51,71.6,43.2,62.3,43.2,51.3c0-12.4,10.1-22.4,22.4-22.4c0.1,0,0.2,0,0.2,0C78.1,29,88.1,39,88.1,51.3z M52.6,74.9c-13.7,0-24.8-11.1-24.8-24.8s11.1-24.8,24.8-24.8c1.9,0,3.7,0.2,5.6,0.6c0,0-0.1,0-0.1,0c-0.6,0.2-1.2,0.4-1.7,0.6 c-0.1,0-0.2,0.1-0.3,0.1c-0.6,0.2-1.2,0.5-1.7,0.8c0,0,0,0,0,0c-0.6,0.3-1.1,0.6-1.7,0.9c-0.1,0.1-0.2,0.1-0.3,0.2 c-0.5,0.3-1,0.6-1.5,1c-0.1,0.1-0.2,0.1-0.3,0.2c-0.5,0.3-1,0.7-1.4,1.1c0,0-0.1,0-0.1,0.1c-0.5,0.4-0.9,0.8-1.4,1.2 c-0.1,0.1-0.2,0.2-0.3,0.2c-0.4,0.4-0.9,0.9-1.3,1.3c-0.1,0.1-0.1,0.1-0.2,0.2c-0.4,0.4-0.8,0.9-1.1,1.4c0,0.1-0.1,0.1-0.1,0.2 c-0.4,0.5-0.7,1-1.1,1.5c-0.1,0.1-0.1,0.2-0.2,0.3c-0.3,0.5-0.6,1-0.9,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.5-0.5,1-0.8,1.6 c0,0.1-0.1,0.2-0.1,0.3c-0.2,0.6-0.5,1.1-0.7,1.7c0,0.1-0.1,0.2-0.1,0.4c-0.2,0.6-0.4,1.2-0.5,1.8c0,0,0,0.1,0,0.1 c-0.1,0.6-0.3,1.2-0.4,1.8c0,0.1,0,0.2-0.1,0.3c-0.1,0.6-0.2,1.2-0.2,1.9c0,0.1,0,0.3,0,0.4c0,0.7-0.1,1.3-0.1,2 c0,0.7,0,1.5,0.1,2.2c0,0.2,0,0.4,0.1,0.7c0.1,0.5,0.1,1,0.2,1.5c0,0.2,0.1,0.5,0.1,0.7c0.1,0.5,0.2,1,0.3,1.5 c0.1,0.2,0.1,0.4,0.1,0.6c0.2,0.7,0.4,1.3,0.6,2c0,0.1,0.1,0.2,0.1,0.3c0.2,0.5,0.4,1.1,0.7,1.6c0.1,0.2,0.2,0.4,0.3,0.6 c0.2,0.4,0.4,0.8,0.7,1.2c0.1,0.2,0.2,0.4,0.4,0.6c0.3,0.4,0.5,0.8,0.8,1.3c0.1,0.2,0.2,0.3,0.3,0.5c0.4,0.5,0.8,1.1,1.2,1.6 c0.1,0.2,0.3,0.3,0.4,0.4c0.3,0.4,0.7,0.7,1,1.1c0.2,0.2,0.4,0.4,0.6,0.6c0.3,0.3,0.6,0.6,1,0.9c0.2,0.2,0.4,0.3,0.6,0.5 c0.4,0.3,0.8,0.6,1.2,0.9c0.2,0.1,0.3,0.2,0.5,0.4c0.5,0.4,1.1,0.7,1.7,1.1c0.2,0.1,0.4,0.2,0.6,0.3c0.3,0.2,0.5,0.3,0.8,0.5 C53.3,74.9,52.9,74.9,52.6,74.9z"/><rect x="50.6" y="5" width="4" height="10.6"/><rect x="50.6" y="84.4" width="4" height="10.6"/><rect x="7.6" y="48" width="10.6" height="4"/><rect x="19.2" y="76.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -48.0282 40.1845)" width="10.6" height="4"/><rect x="22.5" y="16.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.3323 23.7449)" width="4" height="10.6"/></svg>
</label>
</div>
<div class="result">
<p class="total" id="total">0</p>
<p class="operation" id="operation"></p>
</div>
</div>
<div class="keyboard">
<div class="key" id="clear">C</div>
<div class="key" id="delete">D</div>
<div class="key">%</div>
<div class="key">/</div>
<div class="key">7</div>
<div class="key">8</div>
<div class="key">9</div>
<div class="key">*</div>
<div class="key">4</div>
<div class="key">5</div>
<div class="key">6</div>
<div class="key">-</div>
<div class="key">1</div>
<div class="key">2</div>
<div class="key">3</div>
<div class="key">+</div>
<div class="key">00</div>
<div class="key">0</div>
<div class="key">.</div>
<div class="key equal" id="equal">=</div>
</div>
</div>
<script src="js/index.js"></script>
<script src="js/theme.js"></script>
</body>
</html>