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