David A. Windham
david
/
windham-brothers
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

2 players

windhamdavid 9 years ago
parent
c31699c0a2
commit
4bb4071a33
9 changed files with 308 additions and 19 deletions
Unified View Show Diff Stats
  1. 0 0
      css/style.min.css
  2. 1 1
      index.html
  3. 1 0
      js/radio.min.js
  4. 0 0
      js/vendor.min.js
  5. 247 1
      src/css/style.css
  6. BIN
      src/img/vu.gif
  7. 37 12
      src/index.html
  8. 0 5
      src/js/amplitude-v2.2.0.js
  9. 22 0
      src/js/radio.js

File diff suppressed because it is too large
+ 0 - 0
css/style.min.css


+ 1 - 1
index.html
View File 

@@ -1 +1 @@
 
-<!DOCTYPE html><html lang=en-US><head><title>Windham Brothers</title><meta charset=utf-8><meta http-equiv=x-ua-compatible content="ie=edge"><meta name=viewport content="width=device-width, initial-scale=1"><meta name=description content="Leo and Woody, the Windham Brothers"><link rel=stylesheet id=wb href=css/style.min.css type=text/css media=all></head><body><header><h1></h1></header><div class=center style="width:800px; margin:50px auto;"><img src=img/vu.gif><h1></h1><p></p><div class=col style="width:300px; float: left;"></div><div class=col style="width:300px; float: right;"><h2></h2></div><footer></footer><script src=js/vendor.min.js></script><script src=js/radio.min.js></script></div></body></html>
 
+<!DOCTYPE html><html lang=en-US><head><title>Windham Brothers</title><meta charset=utf-8><meta http-equiv=x-ua-compatible content="ie=edge"><meta name=viewport content="width=device-width, initial-scale=1"><meta name=description content="Leo and Woody, the Windham Brothers"><link rel=stylesheet id=wb href=css/style.min.css type=text/css media=all></head><body><header><div class=container><img src=img/vu.gif></div></header><div class=container><div class=row><div class=col-sm-6><p>Woody Windham - iWoody Radio</p><div id=audio_player class="panel panel-default"><div class=panel-body><div id=controls><div id=amplitude-play-pause amplitude-song-index=0 class="amplitude-play-pause amplitude-paused"></div></div></div></div></div></div><div class=row><div class=col-sm-6><p>Leo Windham - Crossroads Radio</p><div id=audio_player class="panel panel-default"><div class=panel-body><div id=controls><div id=amplitude-play-pause amplitude-song-index=1 class="amplitude-play-pause amplitude-paused"></div></div></div></div></div></div></div><footer></footer><script src=js/vendor.min.js></script><script src=js/radio.min.js></script></body></html>

+ 1 - 0
js/radio.min.js
View File 

@@ -0,0 +1 @@
 
+Amplitude.init({songs:[{url:"http://64.207.176.250:8080/iwoody",live:!0},{url:"http://64.207.152.217:8000/stream",live:!0}],autoplay:!0,amplitude_volume:100}),$(document).ready(function(){});

File diff suppressed because it is too large
+ 0 - 0
js/vendor.min.js


+ 247 - 1
src/css/style.css
View File 

@@ -1,7 +1,7 @@
 
 body {
 
 body {
 
 	margin: 20px;
 
 	margin: 20px;
 
 	padding: 20px;
 
 	padding: 20px;
 
-	background: url(img/back.jpg) #cecece;
 
+	background: #cecece;
 
 	font-size:18px;
 
 	font-size:18px;
 
 }
 
 }
 
 h1 {
 
 h1 {
 
@@ -52,3 +52,249 @@ header {
 
 
 
 
 
 #footer {clear:both; text-align:center;}
 
 #footer {clear:both; text-align:center;}
 
+
 
+
 
+/***********************************
 
+========== Audio Player ============ 
+***********************************/
 
+
 
+#audio_player {
 
+  background-color: #f7f7f7;
 
+
 
+}
 
+
 
+div#player{
 
+	width: 100%;
 
+	color: #555555;
 
+	font-family: 'PT Sans', sans-serif;
 
+	font-weight: 700;
 
+	font-size: 12px;
 
+}
 
+#song-information{
 
+	text-align: left;
 
+	margin: 0 0 10px;
 
+}
 
+#controls{
 
+	right: left;
 
+}
 
+#amplitude-volume-slider{
 
+	width: 80%;
 
+	margin: 0 auto;
 
+  padding-right:35px;
 
+}
 
+.current-track {
 
+  margin:20px 0 0;
 
+}
 
+input[type=range] {
 
+  -webkit-appearance: none;
 
+  margin: 18px 0;
 
+  width: 100%;
 
+}
 
+input[type=range]:focus {
 
+  outline: none;
 
+}
 
+input[type=range]::-webkit-slider-runnable-track {
 
+  width: 100%;
 
+  height: 8.4px;
 
+  cursor: pointer;
 
+  animate: 0.2s;
 
+  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
 
+  background: #337ab7;
 
+  border-radius: 1.3px;
 
+  border: 0.2px solid #010101;
 
+}
 
+input[type=range]::-webkit-slider-thumb {
 
+
 
+  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
 
+  border: 1px solid #333;
 
+  height: 26px;
 
+  width: 16px;
 
+  border-radius: 3px;
 
+  background: #f7f7f7;
 
+  cursor: pointer;
 
+  -webkit-appearance: none;
 
+  margin-top: -8px;
 
+}
 
+input[type=range]:focus::-webkit-slider-runnable-track {
 
+  background: #367ebd;
 
+}
 
+input[type=range]::-moz-range-track {
 
+  width: 100%;
 
+  height: 8.4px;
 
+  cursor: pointer;
 
+  animate: 0.2s;
 
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 
+  background: #337ab7;
 
+  border-radius: 1.3px;
 
+  border: 0.2px solid #010101;
 
+}
 
+input[type=range]::-moz-range-thumb {
 
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 
+  border: 1px solid #000000;
 
+  height: 36px;
 
+  width: 16px;
 
+  border-radius: 3px;
 
+  background: #ffffff;
 
+  cursor: pointer;
 
+}
 
+input[type=range]::-ms-track {
 
+  width: 100%;
 
+  height: 8.4px;
 
+  cursor: pointer;
 
+  animate: 0.2s;
 
+  background: transparent;
 
+  border-color: transparent;
 
+  border-width: 16px 0;
 
+  color: transparent;
 
+}
 
+input[type=range]::-ms-fill-lower {
 
+  background: #2a6495;
 
+  border: 0.2px solid #010101;
 
+  border-radius: 2.6px;
 
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 
+}
 
+input[type=range]::-ms-fill-upper {
 
+  background: #337ab7;
 
+  border: 0.2px solid #010101;
 
+  border-radius: 2.6px;
 
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 
+}
 
+input[type=range]::-ms-thumb {
 
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 
+  border: 1px solid #000000;
 
+  height: 36px;
 
+  width: 16px;
 
+  border-radius: 3px;
 
+  background: #ffffff;
 
+  cursor: pointer;
 
+}
 
+input[type=range]:focus::-ms-fill-lower {
 
+  background: #3071a9;
 
+}
 
+input[type=range]:focus::-ms-fill-upper {
 
+  background: #367ebd;
 
+}
 
+output.volume {
 
+  position: absolute;
 
+  background-image: -moz-linear-gradient(top, #444444, #999999);
 
+  background-image: -o-linear-gradient(top, #444444, #999999);
 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
 
+  background-image: -webkit-linear-gradient(top, #444444, #999999);
 
+  width: 40px;
 
+  height: 30px;
 
+  text-align: center;
 
+  color: white;
 
+  border-radius: 10px;
 
+  display: inline-block;
 
+  font: bold 15px/30px Georgia;
 
+  bottom: 175%;
 
+  left: 0;
 
+  margin-left: -1%;
 
+}
 
+output.volume:after {
 
+  content: "";
 
+  position: absolute;
 
+  width: 0;
 
+  height: 0;
 
+  border-top: 10px solid #999999;
 
+  border-left: 5px solid transparent;
 
+  border-right: 5px solid transparent;
 
+  top: 100%;
 
+  left: 50%;
 
+  margin-left: -5px;
 
+  margin-top: -1px;
 
+}
 
+meter {
 
+  -webkit-transform: rotate(-90deg);
 
+  -moz-transform: rotate(-90deg);
 
+  -o-transform: rotate(-90deg);
 
+  transform: rotate(-90deg);
 
+}
 
+#amplitude-current-time{
 
+	font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
 
+	font-size: 15px;
 
+	font-weight: 400;
 
+  float:left;
 
+}
 
+#amplitude-play-pause {
 
+  height: 50px;
 
+  width: 50px;
 
+  line-height: 50px;
 
+  border-radius: 50%;
 
+  text-align: center;
 
+  margin: -50px 0 0 0;
 
+  cursor: pointer;
 
+  float: right;
 
+  position: relative;
 
+	-webkit-transition: all .1s linear;
 
+	transition: all .1s linear;
 
+}
 
+.amplitude-paused {  
+  color:rgba(88, 185, 87, .7);
 
+  display: block;
 
+  background-color: #f7f7f7;
 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
 
+  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
 
+}
 
+@-webkit-keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
 
+@-moz-keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
 
+@-ms-keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
 
+@keyframes pulseon {to {box-shadow: 0 0 0 15px rgba(88, 185, 87, .1);}}
 
+.amplitude-paused:hover {   
+  color:#58B957;
 
+  text-shadow: 0px 0px 6px #58B957;
 
+  box-shadow: 0 0 0 0 rgba(88, 185, 87, .7), inset 0px 4px 1px 1px white, inset 0px 4px 1px 1px rgba(204,198,197,.5);
 
+  -webkit-animation: pulseon 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
 
+}
 
+.amplitude-paused:after {
 
+  content:"\e072";
 
+  font-family:"Glyphicons Halflings";
 
+  font-size:25px;
 
+  line-height: 50px;
 
+  padding-left:4px;
 
+  text-shadow: 1px 4px 6px #def, 0 0 0 #555;
 
+}
 
+.amplitude-paused:before { 
+
 
+}
 
+.amplitude-playing {
 
+  color:#DB524B;
 
+  text-shadow:0px 0px 3px #DB524B;
 
+  background-color: #f7f7f7;
 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
 
+  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
+  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
 
+}
 
+@-webkit-keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
 
+@-moz-keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
 
+@-ms-keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
 
+@keyframes pulseoff {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
 
+.amplitude-playing:hover {
 
+  color:#DB524B;
 
+  text-shadow:0px 0px 6px #DB524B;
 
+  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7), inset 0px 4px 1px 1px white, inset 0px 4px 1px 1px rgba(204,198,197,.5);
 
+  -webkit-animation: pulseoff 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
 
+}
 
+.amplitude-playing:after {
 
+  content:"\e073";
 
+  font-family:"Glyphicons Halflings";
 
+  font-size:25px;
 
+  line-height: 50px;
 
+  padding-left:4px;
 
+}
 
+.amplitude-playing:before {
 
+}
 
+#amplitude-now-playing-name{
 
+}
 
+#amplitude-now-playing-listeners{
 
+}
 
+#amplitude-now-playing-bitrate{
 
+}
 
+

BIN
src/img/vu.gif
View File


+ 37 - 12
src/index.html
View File 

@@ -10,19 +10,44 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 	<header>
 
 	<header>
 
-		<h1></h1>
 
+      <div class="container">
 
+		   <img src="img/vu.gif">
 
+      </div>
 
 	</header>
 
 	</header>
 
-	
-	<div class="center" style="width:800px; margin:50px auto;">
 
-		<img src="img/vu.gif">
 
-	<h1></h1>
 
-	<p></p> 
-	<div class="col" style="width:300px; float: left;">		
-		
-	</div>
 
-	<div class="col" style="width:300px; float: right;">
 
-		<h2></h2>
 
-	</div>
 
+
 
+
 
+<div class="container">
 
+   <div class="row">
 
+      <div class="col-sm-6">
 
+         <p>Woody Windham - iWoody Radio</p>
 
+         <!-- START Audio Player -->  
+         <div id="audio_player" class="panel panel-default">
 
+            <div class="panel-body">
 
+               <div id="controls">
 
+                  <div id="amplitude-play-pause" amplitude-song-index="0" class="amplitude-play-pause amplitude-paused"></div>
 
+               </div>
 
+            </div>
 
+         </div>
 
+         <!-- END Audio Player -->
 
+      </div>
 
+   </div>
 
+   <div class="row">
 
+      <div class="col-sm-6"> 
+         <p>Leo Windham - Crossroads Radio</p>
 
+         <!-- START Audio Player -->  
+         <div id="audio_player" class="panel panel-default">
 
+            <div class="panel-body">
 
+               <div id="controls">
 
+                  <div id="amplitude-play-pause" amplitude-song-index="1" class="amplitude-play-pause amplitude-paused"></div>
 
+               </div>
 
+            </div>
 
+         </div>
 
+         <!-- END Audio Player -->
 
+      </div>
 
+   </div>
 
+</div>      
+      
+
 
 	
 	
 	<footer>
 
 	<footer>

File diff suppressed because it is too large
+ 0 - 5
src/js/amplitude-v2.2.0.js


+ 22 - 0
src/js/radio.js
View File 

@@ -0,0 +1,22 @@
 
+/**** Audio Player ****/
 
+
 
+Amplitude.init({
 
+  "songs": [
 
+    {
 
+  		"url": "http://64.207.176.250:8080/iwoody",
 
+  		"live": true,
 
+  	},
 
+    {
 
+      "url": "http://64.207.152.217:8000/stream",
 
+      "live": true,
 
+  	}
 
+  ],
 
+    "autoplay": true,
 
+    "amplitude_volume": 100
 
+});
 
+
 
+/**** Page Features ****/
 
+
 
+$(document).ready(function() {
 
+
 
+});

Some files were not shown because too many files changed in this diff