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 table#playlist td {
  40         border-left: black solid 1px;
  41         padding-right: 0.5em;
  42 }
  43
  44 /* Get the tabs to float at the bottom */
  45 html, body {
  46         height: 100%;
  47 }
  48 div#body {
  49         min-height: 100%;
  50 }
  51 div.main {
  52         overflow: auto;
  53         padding-bottom: 1.3em;
  54 }
  55 div#footer {
  56         position: relative;
  57         margin-top: -1.3em;
  58         height: 1.3em;
  59         clear: both;
  60 }
  61 </style>
  62 </head>
  63
  64 <body>
  65
  66 <div id='body'>
  67
  68 <div class='main' id='main.controls'>
  69 <table>
  70  <tr>
  71   <td>
  72    <input type='button' id='previous' value='&#x21E6;'><input type='button' id='stop' value='&#x25FB;'><input type='button' id='pause' value='&#x25EB;'><input type='button' id='play' value='&#x25B7;'><input type='button' id='next' value='&#x21E8;'>
  73   </td>
  74   <td style='whitespace:collapse'>
  75    <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;'>
  76   </td>
  77  </tr>
  78  <tr>
  79   <td>
  80    <input type='range' id='setvol' min='0' max='100' value='0'>
  81   </td>
  82   <td>
  83    <input type='range' id='seekcur' min='0' max='100' value='0'>
  84   </td>
  85  </tr>
  86  <tr>
  87   <td id='status'>
  88    Loading...
  89   </td>
  90   <td id='currtime'></td>
  91  </tr>
  92 </table>
  93 </div>
  94
  95 <div class='main' id='main.options' style='display: none'>
  96 <table>
  97  <tr>
  98   <td>Host:</td>
  99   <td><input type='text' id='host'></td>
 100  </tr>
 101  <tr>
 102   <td>Port:</td>
 103   <td colspan=2>
 104    <input type='number' id='port' style='width:60px'>
 105    &nbsp;&nbsp;&nbsp;
 106    <input type='button' id='connect' value='connect'>
 107   </td>
 108  </tr>
 109  <tr>
 110   <td>Refresh (sec):</td>
 111   <td>
 112    <input type='number' id='refresh' style='width:40px'>
 113    &nbsp;&nbsp;&nbsp;
 114    Sync Settings:<input type='checkbox' id='sync' checked>
 115   </td>
 116  </tr>
 117 </table>
 118 </div>
 119
 120 <div class='main' id='main.metadata' style='display: none'>
 121 <span id='metadata.artist'></span> -
 122 <span id='metadata.album'></span> -
 123 <span id='metadata.title'></span><br>
 124 <span id='metadata.date'></span><br><br>
 125 <span id='metadata.file'></span>
 126 </div>
 127
 128 <div class='main' id='main.playlist' style='display: none'>
 129 <table id='playlist'></table>
 130 </div>
 131
 132 </div>
 133
 134 <div id='footer'>
 135 <table class='tabs'>
 136  <tr>
 137   <td id='tab.controls' class='selected'>Controls</td>
 138   <td id='tab.metadata'>Metadata</td>
 139   <td id='tab.playlist'>Playlist</td>
 140   <td id='tab.options'>Options</td>
 141  </tr>
 142 </table>
 143 </div>
 144
 145 </body>
 146 </html>