Pokia/pokia.html at master · Patater/Pokia · GitHub

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>
<head>
<meta charset="UTF-8">
<title>Pokia</title>
<style type="text/css">
  .button {
    position: absolute;
  }
  .img_button {
    opacity: 0.01;
    position: absolute;
  }
  .controls {
    padding-top: 0.2em;
    padding-bottom: 0.1em;
    padding-left: 0.4em;
    padding-right: 0.4em;

    position: absolute;
    z-index: 2;
    bottom: 0px;
    left: 0px;

    background-color: #2d2d2d;
    font: 1em 'Unit-LightRegular', Helvetica, Arial, sans-serif;
    color: #ccc;
  }
  .lcd {
    position: absolute;
  }
</style>
</head>
<body>

<canvas id="waveform" width="1" height="1"></canvas>
<pre id="debug"></pre>
<img id="phone-screen" style="position: absolute;"
src="images/POKIA-screen-480.png" width="1" height="1">
<canvas class="lcd" id="lcd" width="1149" height="843"></canvas>
<img id="phone-shadowscreen" style="position: absolute;"
src="images/POKIA-shadow-480.png" width="1" height="1">
<img id="phone-body" style="position: absolute;"
src="images/POKIA-body-480.png" width="1" height="1">

<img width="1" height="1" src="images/POKIA-power-480.png" class="img_button"
id="power-img"/>
<img width="1" height="1" src="images/POKIA-soft-480.png" class="img_button"
id="soft-img"/>
<img width="1" height="1" src="images/POKIA-up-480.png" class="img_button"
id="up-img"/>
<img width="1" height="1" src="images/POKIA-clear-480.png" class="img_button"
id="clear-img"/>
<img width="1" height="1" src="images/POKIA-down-480.png" class="img_button"
id="down-img"/>
<img width="1" height="1" src="images/POKIA-one-480.png" class="img_button"
id="one-img"/>
<img width="1" height="1" src="images/POKIA-two-480.png" class="img_button"
id="two-img"/>
<img width="1" height="1" src="images/POKIA-three-480.png" class="img_button"
id="three-img"/>
<img width="1" height="1" src="images/POKIA-four-480.png" class="img_button"
id="four-img"/>
<img width="1" height="1" src="images/POKIA-five-480.png" class="img_button"
id="five-img"/>
<img width="1" height="1" src="images/POKIA-six-480.png" class="img_button"
id="six-img"/>
<img width="1" height="1" src="images/POKIA-seven-480.png" class="img_button"
id="seven-img"/>
<img width="1" height="1" src="images/POKIA-eight-480.png" class="img_button"
id="eight-img"/>
<img width="1" height="1" src="images/POKIA-nine-480.png" class="img_button"
id="nine-img"/>
<img width="1" height="1" src="images/POKIA-asterisk-480.png"
class="img_button" id="asterisk-img"/>
<img width="1" height="1" src="images/POKIA-zero-480.png" class="img_button"
id="zero-img"/>
<img width="1" height="1" src="images/POKIA-hash-480.png" class="img_button"
id="hash-img"/>

<div width="1" height="1" class="button" id="power"></div>
<div width="1" height="1" class="button" id="soft"></div>
<div width="1" height="1" class="button" id="up"></div>
<div width="1" height="1" class="button" id="clear"></div>
<div width="1" height="1" class="button" id="down"></div>
<div width="1" height="1" class="button" id="one"></div>
<div width="1" height="1" class="button" id="two"></div>
<div width="1" height="1" class="button" id="three"></div>
<div width="1" height="1" class="button" id="four"></div>
<div width="1" height="1" class="button" id="five"></div>
<div width="1" height="1" class="button" id="six"></div>
<div width="1" height="1" class="button" id="seven"></div>
<div width="1" height="1" class="button" id="eight"></div>
<div width="1" height="1" class="button" id="nine"></div>
<div width="1" height="1" class="button" id="asterisk"></div>
<div width="1" height="1" class="button" id="zero"></div>
<div width="1" height="1" class="button" id="hash"></div>

<div id="extra-controls" class="controls" style="display: none;">
<label for="tempo">Tempo:</label>
<select id="tempo">
</select>
</div>

<script src="synthesizer.js"></script>
<script src="bitmaps.js"></script>
<script src="ui.js"></script>
<script src="init.js"></script>

</body>
</html>