forked from JackVolontyr/calcjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (97 loc) · 4.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Windows 95</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="img/favicon.png" />
<!-- >>> style -->
<link rel="stylesheet" href="css/style.css">
<!-- style <<< -->
<!-- >>> js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js" defer></script>
<script src="js/dnd.js" defer></script>
<script src="js/desk.js" defer></script>
<script src="js/calc.js" defer></script>
<script src="js/icon.js" defer></script>
<script src="js/panel.js" defer></script>
<script src="js/output.js" defer></script>
<script src="js/input.js" defer></script>
<script src="js/app.js" defer></script>
<!-- js <<< -->
</head>
<body>
<div class="desk js-calc">
<!-- >>> icon -->
<div class="desk__icon js-calc__icon">
<img class="desk__icon-image" src="http://raebear.net/comp/icons/appicons1.gif" alt="">
<p class="desk__icon-title">Calculator</p>
</div>
<!-- icon <<< -->
<!-- hidden="true" -->
<div class="desk__calc js-calc__calc">
<!-- >>> top-panel -->
<div class="calc__top-panel js-calc__top-panel">
<img class="top-panel__icon" src="http://raebear.net/comp/icons/appicons1.gif" alt="">
<span class="top-panel__title">Calculator</span>
<div class="top-panel__buttons">
<button class="top-panel__button top-panel__button--hide js-calc__top-button">_</button>
<button class="top-panel__button top-panel__button--inactive js-calc__top-button">O</button>
<button class="top-panel__button top-panel__button--close js-calc__top-button js-calc__top-button--close">X</button>
</div>
</div>
<!-- top-panel <<< -->
<!-- >>> excess-panel -->
<div class="calc__excess-panel">
<b>B</b>y <b>E</b>vgen <b>V</b>olontyr
</div>
<!-- excess-panel <<< -->
<!-- >>> output -->
<div class="calc__output js-calc__output">0</div>
<!-- output <<< -->
<!-- >>> input -->
<div class="calc__input js-calc__input">
<!-- 1 -->
<!-- <button class="calc__button" data-option="backspace">Backspace</button> -->
<!-- <button class="calc__button" data-option="reset-last">CE</button> -->
<!-- <button class="calc__button"></button> -->
<!-- <button class="calc__button" data-option="reset">C</button> -->
<!-- 2 -->
<!-- <button class="calc__button" data-number="7">7</button> -->
<!-- <button class="calc__button" data-number="8">8</button> -->
<!-- <button class="calc__button" data-number="9">9</button> -->
<!-- <button class="calc__button" data-symbol="÷">/</button> -->
<!-- <button class="calc__button" data-symbol="√">sqrt</button> -->
<!-- <button class="calc__button"></button> -->
<!-- 3 -->
<!-- <button class="calc__button" data-number="4">4</button> -->
<!-- <button class="calc__button" data-number="5">5</button> -->
<!-- <button class="calc__button" data-number="6">6</button> -->
<!-- <button class="calc__button" data-symbol="x">*</button> -->
<!-- <button class="calc__button" data-symbol="percent">%</button> -->
<!-- <button class="calc__button"></button> -->
<!-- 4 -->
<!-- <button class="calc__button" data-number="1">1</button> -->
<!-- <button class="calc__button" data-number="2">2</button> -->
<!-- <button class="calc__button" data-number="3">3</button> -->
<!-- <button class="calc__button" data-symbol="-">-</button> -->
<!-- <button class="calc__button" data-symbol="fraction">1/x</button> -->
<!-- <button class="calc__button"></button> -->
<!-- 5 -->
<!-- <button class="calc__button" data-number="0">0</button> -->
<!-- <button class="calc__button" data-symbol="alter">+/-</button> -->
<!-- <button class="calc__button"></button> -->
<!-- <button class="calc__button" data-symbol=".">.</button> -->
<!-- <button class="calc__button" data-symbol="+">+</button> -->
<!-- <button class="calc__button" data-symbol="=">=</button> -->
</div>
<script type="text/template" id="calcBtnTemplate">
<% option.forEach(function(item) { %>
<button class="calc__button" data-<%= item.data %>><%= item.text %></button>
<% }); %>
</script>
<!-- input <<<-->
</div>
</div>
</body>
</html>