Commit f2f6f09b authored by Marvin Scholz's avatar Marvin Scholz

WIP new style for the web interface

parent 4f25a5d0
Pipeline #275 failed with stage
in 12 seconds
<xsl:stylesheet xmlns:xsl = "http://www.w3.org/1999/XSL/Transform" version = "1.0" xmlns="http://www.w3.org/1999/xhtml">
<xsl:output omit-xml-declaration="no" method="xml" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" indent="yes" encoding="UTF-8" />
<!-- Import include files -->
<!-- Import include files -->
<xsl:template match="/node()">
<html>
<head>
<title><xsl:value-of select="$title"/> — Icecast Streaming Media Server</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
</head>
<body>
<h1 id="header">Icecast <xsl:value-of select="$title"/></h1>
<!--index header menu -->
<div id="menu">
<ul>
<li><a href="admin/">Administration</a></li>
<li><a href="status.xsl">Server Status</a></li>
<li><a href="server_version.xsl">Version</a></li>
</ul>
</div>
<!--end index header menu -->
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" />
<div id="footer">
Support icecast development at <a href="http://www.icecast.org">www.icecast.org</a>
</div>
</body>
</html>
<xsl:template match="/node()">
<html>
<head>
<meta charset="utf-8" />
<title><xsl:value-of select="$title"/> — Icecast Server</title>
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" media="screen, print" />
<meta name="theme-color" content="#001826" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="description" content="Icecast is free server software for streaming multimedia." />
</head>
<body>
<!-- Header and menu -->
<header>
<nav id="main-nav" role="primary">
<a href="/" id="branding">
<img src="icecast.png" alt="" />
<h1>Icecast Server</h1>
</a>
<ul>
<li><a href="#">Status</a></li>
<li><a href="#">Version</a></li>
<li class="right"><a href="#">Administration</a></li>
</ul>
</nav>
</header>
<!--<h1 id="header">Icecast <xsl:value-of select="$title"/></h1>-->
<!-- Content -->
<main role="main">
<xsl:call-template name="content" namespace="http://www.w3.org/1999/xhtml" />
</main>
<!-- Footer -->
<footer>
<p>Support icecast development at <a href="http://icecast.org">icecast.org</a></p>
</footer>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
......@@ -3,29 +3,14 @@
webdir = $(pkgdatadir)/web
nobase_web_DATA = \
status.xsl \
favicon.ico \
icecast.png \
style.css \
status.xsl \
auth.xsl \
server_version.xsl \
tunein.png \
key.png \
status-json.xsl \
xml2json.xslt \
favicon.ico \
assets/css/style.css \
assets/font/FiraMono-Bold.eot \
assets/font/FiraMono-Regular.eot \
assets/font/FiraSans-Bold.eot \
assets/font/FiraSans-BoldItalic.woff \
assets/font/FiraSans-Italic.eot \
assets/font/FiraSans-Regular.eot \
assets/font/FiraMono-Bold.woff \
assets/font/FiraMono-Regular.woff \
assets/font/FiraSans-BoldItalic.eot \
assets/font/FiraSans-Bold.woff \
assets/font/FiraSans-Italic.woff \
assets/font/FiraSans-Regular.woff
assets/img/icecast.png
EXTRA_DIST = $(nobase_web_DATA)
This diff is collapsed.
......@@ -13,157 +13,164 @@
-->
</xsl:text>
<!--mount point stats-->
<xsl:for-each select="source">
<xsl:choose>
<xsl:when test="listeners">
<div class="roundbox">
<div class="mounthead">
<h3 class="mount">Mount Point <xsl:value-of select="@mount" /></h3>
<div class="right">
<xsl:choose>
<xsl:when test="authenticator">
<a class="auth" href="/auth.xsl">Login</a>
</xsl:when>
<xsl:otherwise>
<ul class="mountlist">
<li><a class="play" href="{@mount}.m3u">M3U</a></li>
<li><a class="play" href="{@mount}.xspf">XSPF</a></li>
<!-- <li><a class="play" href="{@mount}.vclt">VCLT</a></li> -->
</ul>
</xsl:otherwise>
</xsl:choose>
</div>
</div>
<div class="mountcont">
<xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg'))">
<div class="audioplayer">
<audio controls="controls" preload="none">
<source src="{@mount}" type="{server_type}" />
</audio>
</div>
</xsl:if>
<table class="yellowkeys">
<tbody>
<xsl:if test="server_name">
<tr>
<td>Stream Name:</td>
<td><xsl:value-of select="server_name" /></td>
</tr>
</xsl:if>
<xsl:if test="server_description">
<tr>
<td>Stream Description:</td>
<td><xsl:value-of select="server_description" /></td>
</tr>
</xsl:if>
<xsl:if test="server_type">
<tr>
<td>Content Type:</td>
<td><xsl:value-of select="server_type" /></td>
</tr>
</xsl:if>
<xsl:if test="stream_start">
<tr>
<td>Stream started:</td>
<td class="streamstats"><xsl:value-of select="stream_start" /></td>
</tr>
</xsl:if>
<xsl:if test="bitrate">
<tr>
<td>Bitrate:</td>
<td class="streamstats"><xsl:value-of select="bitrate" /></td>
</tr>
</xsl:if>
<xsl:if test="quality">
<tr>
<td>Quality:</td>
<td class="streamstats"><xsl:value-of select="quality" /></td>
</tr>
</xsl:if>
<xsl:if test="video_quality">
<tr>
<td>Video Quality:</td>
<td class="streamstats"><xsl:value-of select="video_quality" /></td>
</tr>
</xsl:if>
<xsl:if test="frame_size">
<tr>
<td>Framesize:</td>
<td class="streamstats"><xsl:value-of select="frame_size" /></td>
</tr>
</xsl:if>
<xsl:if test="frame_rate">
<tr>
<td>Framerate:</td>
<td class="streamstats"><xsl:value-of select="frame_rate" /></td>
</tr>
</xsl:if>
<xsl:if test="listeners">
<tr>
<td>Listeners (current):</td>
<td class="streamstats"><xsl:value-of select="listeners" /></td>
</tr>
</xsl:if>
<xsl:if test="listener_peak">
<tr>
<td>Listeners (peak):</td>
<td class="streamstats"><xsl:value-of select="listener_peak" /></td>
</tr>
</xsl:if>
<xsl:if test="genre">
<tr>
<td>Genre:</td>
<td class="streamstats"><xsl:value-of select="genre" /></td>
</tr>
</xsl:if>
<xsl:if test="server_url">
<tr>
<td>Stream URL:</td>
<td class="streamstats">
<a href="{server_url}"><xsl:value-of select="server_url" /></a>
</td>
</tr>
</xsl:if>
<tr>
<td>Currently playing:</td>
<td class="streamstats">
<xsl:if test="artist">
<xsl:value-of select="artist" /> -
</xsl:if>
<xsl:value-of select="title" />
</td>
</tr>
</tbody>
</table>
<!-- Extra playlist -->
<xsl:if test="playlist/*">
<h4>Playlist</h4>
<table class="table-block">
<tbody>
<tr>
<th>Album</th>
<th>Track</th>
<th>Creator</th>
<th>Title</th>
</tr>
<xsl:for-each select="playlist/trackList/track">
<h2>Status</h2>
<xsl:choose>
<xsl:when test="source">
<xsl:for-each select="source">
<xsl:choose>
<xsl:when test="listeners">
<section class="box">
<h3 class="box_title">Mountpoint <code><xsl:value-of select="@mount" /></code></h3>
<!-- Playlists section -->
<h4>Play stream</h4>
<ul class="playlists">
<li><a href="{@mount}">Direct</a></li>
<li><a href="{@mount}.m3u">M3U</a></li>
<li><a href="{@mount}.xspf">XSPF</a></li>
</ul>
<!-- Player -->
<xsl:if test="server_type and ((server_type = 'application/ogg') or (server_type = 'audio/ogg'))">
<div class="audioplayer">
<audio controls="controls" preload="none">
<source src="{@mount}" type="{server_type}" />
</audio>
</div>
</xsl:if>
<!-- Stream info and stats -->
<h4>Further information</h4>
<div class="mountcont">
<table class="table-keys">
<tbody>
<xsl:if test="server_name">
<tr>
<td>Stream Name:</td>
<td><xsl:value-of select="server_name" /></td>
</tr>
</xsl:if>
<xsl:if test="server_description">
<tr>
<td>Stream Description:</td>
<td><xsl:value-of select="server_description" /></td>
</tr>
</xsl:if>
<xsl:if test="server_type">
<tr>
<td>Content Type:</td>
<td><xsl:value-of select="server_type" /></td>
</tr>
</xsl:if>
<xsl:if test="stream_start">
<tr>
<td>Stream started:</td>
<td class="streamstats"><xsl:value-of select="stream_start" /></td>
</tr>
</xsl:if>
<xsl:if test="bitrate">
<tr>
<td>Bitrate:</td>
<td class="streamstats"><xsl:value-of select="bitrate" /></td>
</tr>
</xsl:if>
<xsl:if test="quality">
<tr>
<td>Quality:</td>
<td class="streamstats"><xsl:value-of select="quality" /></td>
</tr>
</xsl:if>
<xsl:if test="video_quality">
<tr>
<td>Video Quality:</td>
<td class="streamstats"><xsl:value-of select="video_quality" /></td>
</tr>
</xsl:if>
<xsl:if test="frame_size">
<tr>
<td>Framesize:</td>
<td class="streamstats"><xsl:value-of select="frame_size" /></td>
</tr>
</xsl:if>
<xsl:if test="frame_rate">
<tr>
<td>Framerate:</td>
<td class="streamstats"><xsl:value-of select="frame_rate" /></td>
</tr>
</xsl:if>
<xsl:if test="listeners">
<tr>
<td>Listeners (current):</td>
<td class="streamstats"><xsl:value-of select="listeners" /></td>
</tr>
</xsl:if>
<xsl:if test="listener_peak">
<tr>
<td>Listeners (peak):</td>
<td class="streamstats"><xsl:value-of select="listener_peak" /></td>
</tr>
</xsl:if>
<xsl:if test="genre">
<tr>
<td>Genre:</td>
<td class="streamstats"><xsl:value-of select="genre" /></td>
</tr>
</xsl:if>
<xsl:if test="server_url">
<tr>
<td>Stream URL:</td>
<td class="streamstats">
<a href="{server_url}"><xsl:value-of select="server_url" /></a>
</td>
</tr>
</xsl:if>
<tr>
<td><xsl:value-of select="album" /></td>
<td><xsl:value-of select="trackNum" /></td>
<td><xsl:value-of select="creator" /></td>
<td><xsl:value-of select="title" /></td>
<td>Currently playing:</td>
<td class="streamstats">
<xsl:if test="artist">
<xsl:value-of select="artist" /> -
</xsl:if>
<xsl:value-of select="title" />
</td>
</tr>
</xsl:for-each>
</tbody>
</table>
</xsl:if>
</div>
</div>
</xsl:when>
<xsl:otherwise>
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</tbody>
</table>
<!-- Extra playlist -->
<xsl:if test="playlist/*">
<h4>Playlist</h4>
<table class="table-block">
<tbody>
<tr>
<th>Album</th>
<th>Track</th>
<th>Creator</th>
<th>Title</th>
</tr>
<xsl:for-each select="playlist/trackList/track">
<tr>
<td><xsl:value-of select="album" /></td>
<td><xsl:value-of select="trackNum" /></td>
<td><xsl:value-of select="creator" /></td>
<td><xsl:value-of select="title" /></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</xsl:if>
</div>
</section>
</xsl:when>
<xsl:otherwise>
<h3><xsl:value-of select="@mount" /> - Not Connected</h3>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:when>
<xsl:otherwise>
<aside class="error">
<strong>No mounts!</strong> There are no active mountpoints.
</aside>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
html {
margin: 0;
padding: 0;
background-color: #000;
}
body {
padding: 0 25px 0 50px;
background-color: #000;
font-family: Verdana, sans-serif;
text-decoration: none;
color: #fff;
}
a {
color: #f8ef64;
text-decoration: none;
border-bottom: 1px dotted #f8ef64;
}
a:hover {
color: #f8ef64;
text-decoration: none;
border-bottom: 1px solid #f8ef64;
}
h1 {
font-family: Verdana, sans-serif;
text-decoration: none;
font-weight: bold;
font-size: 3em;
color: #fff;
margin-top: 3px;
}
h3 {
margin: 0px;
padding: 0px;
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 110%;
color: #f8ef64;
}
h1#header{
padding: 10px 0px 10px 80px;
background: transparent url(/icecast.png) no-repeat scroll left center;
}
h3 small {
color: #fff;
font-size: 70%;
padding-left: 15px;
}
form.alignedform label {
text-align: right;
display: inline-block;
vertical-align: middle;
width: 10em;
margin: 0 1em 0 0;
}
form.alignedform input {
display: inline-block;
vertical-align: middle;
border: 1px solid #f8ef64;
background-color: #333;
color: #f8ef64;
padding: 5px;
}
#menu {
border-top: 3px solid #7B96C6;
border-bottom: 3px solid #7B96C6;
text-align: center;
margin-bottom: 35px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
vertical-align: middle;
}
#menu ul li {
float: left;
padding-left: 25px;
padding-right: 25px;
}
#menu ul li a {
font-family: Verdana, sans-serif;
text-decoration: none;
color: #fff;
font-size: 18px;
border: none;
}
#menu ul li a:hover {
color: #f8ef64;
}
.roundbox {
width: 90%;
background-color: #656565;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 35px;
}
.roundbox h3 {
margin-bottom: 10px;
border-bottom: 1px groove #ACACAC;
}
.roundbox table.yellowkeys tr td:last-child {
color: #f8ef64;
}
table.colortable {
border-collapse: collapse;
padding: 20px 0 20px 0;
margin: 0 auto;
}
table.colortable td {
border: 1px solid #000;
text-align: center;
padding: 5px;
}
table.colortable thead tr td {
color: #656565;
background: #f8ef64;
border-color: white;
}
.roundbox table.yellowkeys tr td {
padding: 5px 5px 0 0;
word-wrap: break-word;
word-break: break-all;
}
.right {
float: right;
}
.mounthead h3 {
float: left;
margin-bottom: 0px;
border-bottom: none;
}
.mountcont {
border-top: 1px groove #ACACAC;
clear: both;
}
ul.mountlist {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.mountlist li {
display: inline;
}
a.play {
padding-left: 22px;
margin-left: 25px;
border: none;
background: transparent url(/tunein.png) no-repeat scroll left center;
background-size: auto 100%;
}
a.auth {
padding-left: 22px;
margin-left: 25px;
border: none;
background: transparent url(/key.png) no-repeat scroll left top;
background-size: auto 100%;
}
/* Admin navigation */
ul.nav {
margin: 0;
padding: 5px 0 10px 0;
clear: both;
list-style: none;
text-align: center;
}
ul.nav li {
display: inline;
}
ul.nav li a {
border: none;
display: inline-block;
padding: .2em .7em;
margin-top: .2em;
background-color: #333;
white-space: nowrap;
}
ul.nav li a:hover {
color: #fff;
}
/* Footer */
#footer {
border-top: 1px groove #ACACAC;
margin-top: 20px;
font-size: 80%;
}
@media (max-width: 800px) {
body {
padding: 0;
}
.roundbox {
width: auto;
border-radius: 0;
}
.roundbox table.yellowkeys tr td {
display: block;
padding: 5px 5px 0 0;
}
.roundbox table.yellowkeys tr td:last-child {
margin-bottom: 5px;
margin-left: 5px;
}
.scrolltable {
overflow: auto;
}
}
@media (max-width: 320px) {
ul.nav, #menu ul {
display: block;
}
ul.nav li, #menu ul li {
float: none;
}
ul.nav li a, #menu ul li a {
display: block;
}
ul.nav li + li, #menu ul li + li {
border-top: 1px solid #ACACAC;
}
a.play {
margin-left: 15px;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment