<link rel="stylesheet" type="text/css" media="all" href="style.css" />
+ <script type="text/javascript"
+ language="javascript"
+ src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
+ </script>
+
<title>Proxy Radio</title>
</head>
<body>
- <section>
+ <header>
<h1>Proxy Radio</h1>
+ </header>
+
+ <nav>
+ <ul>
+ <li>Home</li>
+ <li><a href="last_songs.html">Played songs</a></li>
+ <li><a href="songs.html">All songs</a></li>
+ </ul>
+ </nav>
+ <section>
<audio controls>
<source src="http://radio.wpitchoune.net:8080/mp3">
</audio>
<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>(c) Proxy Radio</p>
+ <p><address><a href="mailto:proxyradio@wpitchoune.net">Proxy Radio</a></address</p>
</footer>
</body>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<title>Last played songs</title>
+ <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
+
<script type="text/javascript"
language="javascript"
- src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
+ src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
+ </script>
+
+ <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js">
</script>
<script>$(document).ready(function() {
$.getJSON("http://radio.wpitchoune.net/cgi-bin/icecast_last_songs.cgi",
function(data) {
$.each(data, function(i, value) {
- $("#history").append(value);
+ $("#history").append("<tr><td>" + value.date + "</td>"
+ + "<td>" + value.song + "</td>"
+ + "<td>" + value.listeners + "</td>"
+ + "</tr>");
});
+
+ $('#history').DataTable();
});
+
+
});
</script>
</head>
<section>
<h1>Last played songs</h1>
- <div class="history">
- </div>
+ <table id="history">
+ <thead>
+ <tr>
+ <th>Date</th>
+ <th>Song</th>
+ <th>Listeners</th>
+ </tr>
+ </thead>
+ </table>
</section>
<footer>
audio {
margin: 20pt 20pt 20pt 20pt;
}
+
+nav ul {
+ background-color: #444;
+ color: white;
+ padding: 1em 0 1em 1em;
+ margin: 0;
+}
+
+nav ul li {
+ display: inline;
+ padding: 0;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+}
+
+nav li::after {
+ content: "|";
+}
projects / radio.git / commitdiff