mirror of
https://github.com/fergalmoran/peneloplay.git
synced 2025-12-22 09:51:27 +00:00
107 lines
4.3 KiB
HTML
107 lines
4.3 KiB
HTML
<!doctype html>
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>peneloplay</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width">
|
|
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
|
|
<!-- build:css(.tmp) styles/main.css -->
|
|
<link rel="stylesheet" href="styles/main.css">
|
|
<!-- endbuild -->
|
|
<!-- build:js scripts/vendor/modernizr.js -->
|
|
<script src="bower_components/modernizr/modernizr.js"></script>
|
|
<!-- endbuild -->
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 10]>
|
|
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
<style type="text/css" scoped>
|
|
.pnp-instance{
|
|
height: 98px;
|
|
position: static;
|
|
}
|
|
.pnp-wrapper{
|
|
background: teal;
|
|
height: 98px;
|
|
}
|
|
.pnp-waveform {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.pnp-time-display-label {
|
|
background-color: rgb(64, 129, 64);
|
|
width: 32px;
|
|
position: absolute;
|
|
left: -500px;
|
|
top: -500px;
|
|
color: rgb(255, 255, 255);
|
|
font-size: 72%;
|
|
text-align: center;
|
|
}
|
|
.pnp-time-display-label-elapsed {
|
|
top: 0px;
|
|
}
|
|
.pnp-time-display-label-duration {
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
.pnp-download-overlay{
|
|
background-image: url('images/pnp-download-overlay.png');
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 90px;
|
|
display: block;
|
|
background-position: top right;
|
|
-webkit-box-shadow: 0px 0px 4px rgba(255, 0, 140, 0.2);
|
|
}
|
|
.pnp-played-overlay{
|
|
background-image: url(images/pnp-played-overlay.png);
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 0px;
|
|
height: 90px;
|
|
display: block;
|
|
background-position: 100% 0%;
|
|
-webkit-box-shadow: rgba(255, 0, 140, 0.2) 0px 0px 4px;
|
|
}
|
|
.pnp-seekhead {
|
|
background: none 0px 0px repeat scroll rgb(235, 12, 122);
|
|
position: absolute;
|
|
top: 0px;
|
|
width: 1px;
|
|
z-index: 1001;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div class="pnp-instance">
|
|
<h3>Here, have some muzaq</h3>
|
|
<div class="pnp-wrapper">
|
|
<img class="pnp-waveform img-responsive" alt="mix waveform" src="images/b14c8a0e-bb8c-4ec2-a500-7135c928550a.png">
|
|
<div class="pnp-time-display-label pnp-time-display-label-elapsed">00:00</div>
|
|
<div class="pnp-time-display-label pnp-time-display-label-duration">1:20</div>
|
|
<div class="pnp-download-overlay"></div>
|
|
<div class="pnp-played-overlay"></div>
|
|
<div class="pnp-seekhead"></div>
|
|
</div>
|
|
<button class="pnp-play-pause-button button" id="pnp-play">Play</button>
|
|
<button class="pnp-play-pause-button button" id="pnp-pause">Pause</button>
|
|
</div>
|
|
</div>
|
|
<!-- build:js scripts/vendor.js -->
|
|
<!-- bower:js -->
|
|
<script src="bower_components/soundmanager2/script/soundmanager2.js"></script>
|
|
<script src="bower_components/jquery/jquery.js"></script>
|
|
<!-- endbower -->
|
|
<!-- endbuild -->
|
|
|
|
<!-- build:js scripts/main.js -->
|
|
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
|
|
<!-- endbuild -->
|
|
</body>
|
|
</html>
|