1<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%> 2<html> 3<head> 4 <%@ include file="head.jsp" %> 5 <%@ include file="jquery.jsp" %> 6 <%@ include file="bootstrap.jsp" %> 7 <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 8 <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script> 9</head> 10<style> 11.jumbotron { 12 padding-top: 30px; 13 padding-bottom: 30px; 14 margin-bottom: 30px; 15 color: inherit; 16 background-color: #111; 17} 18 19body { 20 color: #eee; 21} 22 23.btn-warning { 24 color: #fff; 25 background-color: #f0ad4e; 26 border-color: #eea236; 27} 28 29a:link, a:active, a:visited, a:link *, a:active *, a:visited * { 30 color: #fff; 31} 32</style> 33<body class="bgcolor2 index"> 34 35 36 <!-- Navigation --> 37 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 38 <div class="container"> 39 40 <!-- Brand and toggle get grouped for better mobile display --> 41 <div class="navbar-header"> 42 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 43 <span class="sr-only">Toggle navigation</span> 44 <span class="icon-bar"></span> 45 <span class="icon-bar"></span> 46 <span class="icon-bar"></span> 47 </button> 48 <a class="navbar-brand" href="index.jsp"> 49 <img src="icons/madsonic/icon.png" width="30px" alt=""> 50 </a> 51 </div> 52 53 54 <!-- Collect the nav links, forms, and other content for toggling --> 55 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 56 <ul class="nav navbar-nav navbar-right"> 57 <li> 58 <a href="#settings">Settings</a> 59 </li> 60 61 <li> 62 <a href="#profil"> Profil</a> 63 </li> 64 65 <li class="dropdown"> 66 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Support <b class="caret"></b></a> 67 <ul class="dropdown-menu"> 68 <li> 69 <a href="#version">version</a> 70 </li> 71 <li> 72 <a href="#contact">about</a> 73 </li> 74 </ul> 75 </li> 76 </ul> 77 </div> 78 <!-- /.navbar-collapse --> 79 </div> 80 <!-- /.container --> 81 </div> 82 83 84 85 <!-- Main jumbotron for a primary marketing message or call to action --> 86 <div class="jumbotron"> 87 <div class="container"> 88 <img src="<spring:theme code="logoImage"/>" width="250px" alt=""> 89 90 <h2>Hello, world!</h2> 91 <p>This is a simple template test.</p> 92 </div> 93 </div> 94 95 <div class="container"> 96 <div class="jumbotron"> 97 <h2>Madsonic</h2> 98 <p>Resize this responsive page to see the effect!</p> 99 <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p> 100 101 </div> 102 103 <!-- Call to Action Section --> 104 <div class="jumbotron"> 105 <div class="row"> 106 <div class="col-md-10"> 107 <p>Take a closer look ...</p> 108 </div> 109 110 <div class="col-md-3" style="margin-top:5px;"> 111 <a class="btn btn-lg btn-default btn-block btn-warning" href="#index">Index</a> 112 </div> 113 114 <div class="col-md-3" style="margin-top:5px;"> 115 <a class="btn btn-lg btn-default btn-block btn-info" href="#artists">Artists</a> 116 </div> 117 118 <div class="col-md-3" style="margin-top:5px;"> 119 <a class="btn btn-lg btn-success btn-block" href="#download">Download</a> 120 </div> 121 </div> 122 </div> 123 124 125 <div class="jumbotron"> 126 <h4>Audio Controls</h4> 127 <p> 128 <i id="cast-idle" class="material-icons" title="<fmt:message key="videoPlayer.cast"/>">cast</i> 129 <i id="cast-active" class="material-icons" title="<fmt:message key="videoPlayer.cast"/>">cast_connected</i> 130 <i id="cc-on" class="material-icons" title="<fmt:message key="videoPlayer.subtitles"/>">closed_caption</i> 131 <i id="cc-off" class="material-icons" title="<fmt:message key="videoPlayer.subtitles"/>">closed_caption</i> 132 <i id="fullscreen" class="material-icons" title="<fmt:message key="videoPlayer.fullscreen"/>">fullscreen</i> 133 <i id="new-window" class="material-icons" title="<fmt:message key="videoPlayer.newwindow"/>">open_in_new</i> 134 <i id="share" class="material-icons" title="<fmt:message key="main.sharealbum"/>">share</i> 135 <i id="download" class="material-icons" title="<fmt:message key="common.download"/>">file_download</i> 136 </p> 137 <select id="audio-track"> 138 <option value="1">Language: en</option> 139 <option value="1">Language: fr</option> 140 <option value="1">Language: de</option> 141 </select> 142 </div> 143 144 <div class="jumbotron"> 145 <div class="row"> 146 <div class="col-sm-12"> 147 <h3>Player</h3> 148 <p> 149 <span id="fastpreviousButton" class="fa-stack fa-lg" onclick=""> 150 <i class="fa fa-circle fa-stack-2x"></i> 151 <i class="fa fa-fast-backward fa-stack-1x fa-inverse"></i> 152 </span> 153 154 <span id="previousButton" class="fa-stack fa-lg" onclick=""> 155 <i class="fa fa-circle fa-stack-2x"></i> 156 <i class="fa fa-step-backward fa-stack-1x fa-inverse"></i> 157 </span> 158 159 <span id="startButton" class="fa-stack fa-lg" onclick=""> 160 <i class="fa fa-circle fa-stack-2x fa-inverse"></i> 161 <i class="fa fa-play-circle fa-stack-2x"></i> 162 </span> 163 164 <span id="stopButton" class="fa-stack fa-lg" onclick=""> 165 <i class="fa fa-circle fa-stack-2x fa-inverse"></i> 166 <i class="fa fa-pause-circle fa-stack-2x"></i> 167 </span> 168 169 <span id="bufferButton" class="fa-stack fa-lg" onclick=""> 170 <i class="fa fa-circle fa-stack-2x fa-inverse"></i> 171 <i class="fa fa-refresh fa-stack-1x fa-spin"></i> 172 </span> 173 174 <span id="nextButton" class="fa-stack fa-lg" onclick=""> 175 <i class="fa fa-circle fa-stack-2x"></i> 176 <i class="fa fa-step-forward fa-stack-1x fa-inverse"></i> 177 </span> 178 179 <span id="fastnextButton" class="fa-stack fa-lg" onclick=""> 180 <i class="fa fa-circle fa-stack-2x"></i> 181 <i class="fa fa-fast-forward fa-stack-1x fa-inverse"></i> 182 </span> 183 </p> 184 185 </div> 186 </div> 187 </div> 188 189 <div class="row"> 190 <div class="col-sm-4"> 191 <h3>Column 1</h3> 192 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 193 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 194 </div> 195 <div class="col-sm-4"> 196 <h3>Column 2</h3> 197 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 198 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 199 </div> 200 <div class="col-sm-4"> 201 <h3>Column 3</h3> 202 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 203 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> 204 </div> 205 </div> 206 </div> 207 208</body> 209</html> 210 211
