From 6dbd39ca415a463302910ee2391be62fb23f2dd1 Mon Sep 17 00:00:00 2001
From: Jean Philip Orsini <orsinije@fr.ibm.com>
Date: Tue, 19 Jan 2016 16:28:01 +0100
Subject: [PATCH] improved L&F

---
 html/index.html | 138 +++++++++++++++++++++++++++-----------------------------
 html/style.css  |  16 +++----
 2 files changed, 74 insertions(+), 80 deletions(-)

diff --git a/html/index.html b/html/index.html
index 6354cde..8109c8a 100644
--- a/html/index.html
+++ b/html/index.html
@@ -11,7 +11,7 @@
                 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
         </script>
 
-        <link type="text/css" href="skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" />
+        <link href="skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
 
         <script>
@@ -38,34 +38,33 @@ $(document).ready(function(){
         setTimeout(function () {radioTitle();}, 2000);
         setInterval(function () {radioTitle();}, 10000);
 
-          var stream = {
-      		title: "Proxy Radio",
-      		mp3: "http://radio.wpitchoune.net:8080/mp3"
-      	},
-      	ready = false;
-
-      	$("#jquery_jplayer_1").jPlayer({
-      		ready: function (event) {
-      			ready = true;
-      			$(this).jPlayer("setMedia", stream);
-      		},
-      		pause: function() {
-      			$(this).jPlayer("clearMedia");
-      		},
-      		error: function(event) {
-      			if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
-      				// Setup the media stream again and play it.
-      				$(this).jPlayer("setMedia", stream).jPlayer("play");
-      			}
-      		},
-      		swfPath: "js",
-      		supplied: "mp3",
-      		preload: "none",
-      		wmode: "window",
-      		useStateClassSkin: true,
-      		autoBlur: false,
-      		keyEnabled: true
-      	});
+        var stream = {
+		title: "Radio Proxy",
+		mp3: "http://radio.wpitchoune.net:8080/mp3"
+	};
+
+	$("#jquery_jplayer_1").jPlayer({
+		ready: function (event) {
+			ready = true;
+			$(this).jPlayer("setMedia", stream);
+		},
+		pause: function() {
+			$(this).jPlayer("clearMedia");
+		},
+		error: function(event) {
+			if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
+				$(this).jPlayer("setMedia", stream).jPlayer("play");
+			}
+		},
+		swfPath: "js",
+		supplied: "mp3",
+		preload: "none",
+		wmode: "window",
+		useStateClassSkin: true,
+		autoBlur: false,
+		keyEnabled: true
+	});
+
 });
         </script>
 
@@ -82,58 +81,55 @@ $(document).ready(function(){
         </nav>
 
         <section>
+
+
 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
-        <div class="jp-type-single">
-                <div class="jp-gui jp-interface">
-                        <div class="jp-volume-controls">
-                                <button class="jp-mute" role="button" tabindex="0">mute</button>
-                                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
-                                <div class="jp-volume-bar">
-                                        <div class="jp-volume-bar-value"></div>
-                                </div>
-                        </div>
-                        <div class="jp-controls-holder">
-                                <div class="jp-controls">
-                                        <button class="jp-play" role="button" tabindex="0">play</button>
-                                        <button class="jp-stop" role="button" tabindex="0">stop</button>
-                                </div>
-                                <div class="jp-progress">
-                                        <div class="jp-seek-bar">
-                                                <div class="jp-play-bar"></div>
-                                        </div>
-                                </div>
-                                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
-                        </div>
-                </div>
-                <div class="jp-details">
-                        <div class="jp-title" aria-label="title">&nbsp;</div>
-                </div>
-                <div class="jp-no-solution">
-                        <span>Update Required</span>
-                        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
-                </div>
-        </div>
+	<div class="jp-type-single">
+		<div class="jp-gui jp-interface">
+			<div class="jp-controls">
+				<button class="jp-play" role="button" tabindex="0">play</button>
+				<button class="jp-stop" role="button" tabindex="0">stop</button>
+			</div>
+			<div class="jp-progress">
+				<div class="jp-seek-bar">
+					<div class="jp-play-bar"></div>
+				</div>
+			</div>
+			<div class="jp-volume-controls">
+				<button class="jp-mute" role="button" tabindex="0">mute</button>
+				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
+				<div class="jp-volume-bar">
+					<div class="jp-volume-bar-value"></div>
+				</div>
+			</div>
+			<div class="jp-time-holder">
+				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
+				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
+				<div class="jp-toggles">
+					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
+				</div>
+			</div>
+		</div>
+		<div class="jp-details">
+			<div id="track-title" class="jp-title" aria-label="title">&nbsp;</div>
+		</div>
+		<div class="jp-no-solution">
+			<span>Update Required</span>
+			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
+		</div>
+	</div>
 </div>
 
-                <p>Current track: <span id="track-title">LIVE</span>.</p>
-
-                <p>If the above player does not work you can play directly the
-                        <a href="http://radio.wpitchoune.net:8080/mp3">stream</a>.</p>
-
-                <p>The name of the current song can be read on
-                        <a href="http://radio.wpitchoune.net:8080">the icecast
-                                   page</a>.</p>
-
-                <p>See the list of <a href="last_songs.html">recently played songs</a>.</p>
-
                 <p>All songs have been downloaded from the <a href="http://freemusicarchive.org/">Free Music Archive</a> and as far as I know can be shared on this stream. Feel free to send me an email to <a href="mailto:proxyradio@wpitchoune.net">proxyradio@wpitchoune.net</a>                        if you have a concern about a song. Read the list of
                         <a href="songs.html">songs</a> with credits and licensing information. No changes have been made to the songs.
                 </p>
         </section>
 
         <footer>
-                <p><address><a href="mailto:proxyradio@wpitchoune.net">Proxy Radio</a></address</p>
+                <ul>
+                        <li><a href="mailto:proxyradio@wpitchoune.net">Contact</a></li>
+                </ul>
         </footer>
 </body>
 
diff --git a/html/style.css b/html/style.css
index 01b8e48..03c4778 100644
--- a/html/style.css
+++ b/html/style.css
@@ -21,13 +21,8 @@ footer {
         font-size: 80%;
 }
 
-audio {
-        margin: 20pt 20pt 20pt 20pt;
-}
-
-nav ul {
+nav ul, footer ul {
         background-color: #444;
-        color: #eee;
         padding: 1em 0 1em 1em;
         margin: 0;
         text-transform: uppercase;
@@ -35,24 +30,27 @@ nav ul {
         border-bottom-color: #444;
         border-bottom-width: medium;
         border-bottom-style: solid;
+        list-style: none;
 }
 
-nav ul li {
+nav ul li, footer ul li {
         display: inline;
         margin: 0 1.5em 0 0;
         padding: 0;
         letter-spacing: 1px;
+
 }
 
-nav a {
+nav a, footer a {
         color: #eee;
         text-decoration: none;
 }
 
-li.selected {
+nav li.selected {
         border-bottom-color: #eee;
         border-bottom-style: solid;
         border-bottom-width: medium;
         padding-bottom: 1em;
         font-weight: bold;
+        color: #eee;
 }
-- 
2.7.4