pianoctl/pianoctl.html at master · pomalley/pianoctl · 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
<!DOCTYPE HTML>
<html>
   <head>
      <title>Pandora Control</title>
      <script type="text/javascript" src="static/jquery.js"></script>
      <script type="text/javascript" src="static/jQueryRotateCompressed.js"></script>
      <script type="text/javascript" src="static/pianoctl.js"></script>
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
      <link rel="stylesheet" type="text/css" href="static/styles.css" />
   </head>

   <body>
     <div id="controls">
       <table>
         <tbody>
           <tr>
             <td id="playpause" command="p" class="button">▶ / ❚❚</td>
	     <td id="volup" command=")" class="button">Vol+</td>
	     <td id="voldown" command="(" class="button">Vol-</td>
           </tr>
           <tr>
             <td id="skip" class="button" command='n'>Skip</td>
             <td id="love" class="button" command='+'>Love</td>
             <td id="hate" class="button" command='-'>Hate</td>
           </tr>
	   <tr>
	     <td id="title" class="now_playing"></td>
	     <td id="artist" class="now_playing"></td>
	     <td id="album" class="now_playing"></td>
	   </tr>
	   <tr>
	     <td class="stations" colspan="99"><select id="stations"><option>Select station...</option></select></td>
	   <tr>
	     <td class="user" colspan="1">hello {{ user }}</td>
	     <td id="timer" class="now_playing" colspan="1">(timer)</td>
	   </tr>
         </tbody>
       </table>
       <div id="textinput">

       </div>
     </div>

     <h3 id="expander"><img src="static/point.png" id="pointer" /> Custom Control</h3>
     <div id="custom">
       <form id="form">
         <input id="text" value="Type manual commands here..." />
       </form>
     </div>
     <div id="logs">
       <pre id="logmessages">{{ logs }}</pre>
     </div>
     <script type="text/javascript">
       handleData({% raw data %});
     </script>
 </html>