images: update screenshot

[chrome-ext/music-player-client.git] / main.html

diff --git a/main.html b/main.html
index 8f5e3c46165c6e4e434fbe2dbcb2778cf5eae497..87add75cb96491ee6078b90b4195d1aeac443950 100644 (file)
--- a/main.html
+++ b/main.html
@@ -36,6 +36,18 @@ table.tabs td.selected {
        background-color: white;
 }
 
        background-color: white;
 }
 

+/* Playlist styles */
+table#playlist td {
+       border-left: black solid 1px;
+       padding-right: 0.5em;
+}
+
+td#playlist_del {
+       padding-left: 0.3em;
+       padding-right: 0.2em;
+       font-weight: bold;
+}
+

 /* Get the tabs to float at the bottom */
 html, body {
        height: 100%;
 /* Get the tabs to float at the bottom */
 html, body {
        height: 100%;


@@ -53,6 +65,10 @@ div#footer {
        height: 1.3em;
        clear: both;
 }
        height: 1.3em;
        clear: both;
 }

+table#playlist {
+       height: 85px;
+       display: block;
+};

 </style>
 </head>
 
 </style>
 </head>
 


@@ -62,11 +78,11 @@ div#footer {
 
 <div class='main' id='main.controls'>
 <table>
 
 <div class='main' id='main.controls'>
 <table>

- <tr>
+ <tr style='whitespace:collapse'>

   <td>
   <td>

-   <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;'>
+   <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'>

   </td>
   </td>

-  <td style='whitespace:collapse'>
+  <td>

    <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;'>
   </td>
  </tr>
    <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;'>
   </td>
  </tr>


@@ -79,9 +95,10 @@ div#footer {
   </td>
  </tr>
  <tr>
   </td>
  </tr>
  <tr>

-  <td colspan=2>
-   <span id='status'>Loading...</span>
+  <td id='status'>
+   Loading...

   </td>
   </td>

+  <td id='currtime'></td>

  </tr>
 </table>
 </div>
  </tr>
 </table>
 </div>


@@ -90,23 +107,37 @@ div#footer {
 <table>
  <tr>
   <td>Host:</td>
 <table>
  <tr>
   <td>Host:</td>

-  <td><input type='text' id='host' value='192.168.0.2'></td>
+  <td><input type='text' id='host'></td>

  </tr>
  <tr>
   <td>Port:</td>
  </tr>
  <tr>
   <td>Port:</td>

-  <td><input type='number' id='port' value='6600'></td>
- </tr>
- <tr>

   <td colspan=2>
   <td colspan=2>

+   <input type='number' id='port' style='width:60px'>
+   &nbsp;&nbsp;&nbsp;

    <input type='button' id='connect' value='connect'>
    <input type='button' id='connect' value='connect'>

+  </td>
+ </tr>
+ <tr>
+  <td>Refresh (sec):</td>
+  <td>
+   <input type='number' id='refresh' style='width:40px'>

    &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;

-   Sync Settings:<input type='checkbox' id='sync' checked></td>
+   Sync Settings:<input type='checkbox' id='sync' checked>
+  </td>

  </tr>
 </table>
 </div>
 
 <div class='main' id='main.metadata' style='display: none'>
  </tr>
 </table>
 </div>
 
 <div class='main' id='main.metadata' style='display: none'>

-<div id='metadata'></div>
+<span id='metadata.artist'></span> -
+<span id='metadata.album'></span> -
+<span id='metadata.title'></span><br>
+<span id='metadata.date'></span><br><br>
+<span id='metadata.file'></span>
+</div>
+
+<div class='main' id='main.playlist' style='display: none'>
+<table id='playlist'></table>

 </div>
 
 </div>
 </div>
 
 </div>


@@ -116,6 +147,7 @@ div#footer {
  <tr>
   <td id='tab.controls' class='selected'>Controls</td>
   <td id='tab.metadata'>Metadata</td>
  <tr>
   <td id='tab.controls' class='selected'>Controls</td>
   <td id='tab.metadata'>Metadata</td>

+  <td id='tab.playlist'>Playlist</td>

   <td id='tab.options'>Options</td>
  </tr>
 </table>
   <td id='tab.options'>Options</td>
  </tr>
 </table>