main.html

   1 <!-- Written by Mike Frysinger <vapier@gmail.com>.  Released into the public domain.  Suck it. -->
   2 <!doctype html>
   3 <html>
   4
   5 <head>
   6 <title>Media Player Client</title>
   7 <script src='js/tcp-client.js'></script>
   8 <script src='js/mpc.js'></script>
   9 <script src='main.js'></script>
  10 <style>
  11 table {
  12         margin: 0px;
  13         padding: 0px;
  14         border-collapse: collapse;
  15 }
  16 body {
  17         margin: 0px;
  18         padding: 0px;
  19 }
  20 td {
  21         white-space: nowrap;
  22 }
  23 div#status {
  24         white-space: nowrap;
  25 }
  26
  27 table.tabs td {
  28         padding-left: 1em;
  29         border: black solid 1px;
  30         border-top: 0px;
  31         font-size: smaller;
  32         font-family: sans-serif;
  33         background-color: #d0d0d0;
  34 }
  35 table.tabs td.selected {
  36         background-color: white;
  37 }
  38
  39 /* Playlist styles */
  40 table#playlist td {
  41         border-left: black solid 1px;
  42         padding-right: 0.5em;
  43 }
  44
  45 td#playlist_del {
  46         padding-left: 0.3em;
  47         padding-right: 0.2em;
  48         font-weight: bold;
  49 }
  50
  51 /* Get the tabs to float at the bottom */
  52 html, body {
  53         height: 100%;
  54 }
  55 div#body {
  56         min-height: 100%;
  57 }
  58 div.main {
  59         overflow: auto;
  60         padding-bottom: 1.3em;
  61 }
  62 div#footer {
  63         position: relative;
  64         margin-top: -1.3em;
  65         height: 1.3em;
  66         clear: both;
  67 }
  68 table#playlist {
  69         height: 85px;
  70         display: block;
  71 };
  72 </style>
  73 </head>
  74
  75 <body>
  76
  77 <div id='body'>
  78
  79 <div class='main' id='main.controls'>
  80 <table>
  81  <tr style='whitespace:collapse'>
  82   <td>
  83    <input type='button' id='previous' value='&#x21E6;' accesskey='a'><input type='button' id='play' value='&#x25B7;' accesskey='s'><input type='button' id='pause' value='&#x25EB;' accesskey='d'><input type='button' id='stop' value='&#x25FB;' accesskey='f'><input type='button' id='next' value='&#x21E8;' accesskey='g'>
  84   </td>
  85   <td>
  86    <input type='button' id='repeat' value='&#x221E;'><input type='button' id='random' value='&reg;'><input type='button' id='single' value='&sect;'><input type='button' id='consume' value='&copy;'>
  87   </td>
  88  </tr>
  89  <tr>
  90   <td>
  91    <input type='range' id='setvol' min='0' max='100' value='0'>
  92   </td>
  93   <td>
  94    <input type='range' id='seekcur' min='0' max='100' value='0'>
  95   </td>
  96  </tr>
  97  <tr>
  98   <td id='status'>
  99    Loading...
 100   </td>
 101   <td id='currtime'></td>
 102  </tr>
 103 </table>
 104 </div>
 105
 106 <div class='main' id='main.options' style='display: none'>
 107 <table>
 108  <tr>
 109   <td>Host:</td>
 110   <td><input type='text' id='host'></td>
 111  </tr>
 112  <tr>
 113   <td>Port:</td>
 114   <td colspan=2>
 115    <input type='number' id='port' style='width:60px'>
 116    &nbsp;&nbsp;&nbsp;
 117    <input type='button' id='connect' value='connect'>
 118   </td>
 119  </tr>
 120  <tr>
 121   <td>Refresh (sec):</td>
 122   <td>
 123    <input type='number' id='refresh' style='width:40px'>
 124    &nbsp;&nbsp;&nbsp;
 125    Sync Settings:<input type='checkbox' id='sync' checked>
 126   </td>
 127  </tr>
 128 </table>
 129 </div>
 130
 131 <div class='main' id='main.metadata' style='display: none'>
 132 <span id='metadata.artist'></span> -
 133 <span id='metadata.album'></span> -
 134 <span id='metadata.title'></span><br>
 135 <span id='metadata.date'></span><br><br>
 136 <span id='metadata.file'></span>
 137 </div>
 138
 139 <div class='main' id='main.playlist' style='display: none'>
 140 <table id='playlist'></table>
 141 </div>
 142
 143 </div>
 144
 145 <div id='footer'>
 146 <table class='tabs'>
 147  <tr>
 148   <td id='tab.controls' class='selected'>Controls</td>
 149   <td id='tab.metadata'>Metadata</td>
 150   <td id='tab.playlist'>Playlist</td>
 151   <td id='tab.options'>Options</td>
 152  </tr>
 153 </table>
 154 </div>
 155
 156 </body>
 157 </html>