windhamdavid 8 years ago
parent
commit
6e63eed27a
9 changed files with 815 additions and 816 deletions
  1. 221 170
      app/css/style.min.css
  2. 42 0
      app/img/daveo-footer.svg
  3. 37 0
      app/img/daveo-header.svg
  4. 141 55
      app/index.html
  5. 6 183
      app/js/radio.min.js
  6. BIN
      dump.rdb
  7. 221 170
      src/css/main.css
  8. 141 55
      src/index.html
  9. 6 183
      src/js/radio.js

+ 221 - 170
app/css/style.min.css

@@ -6760,96 +6760,31 @@ button.close {
 /*# sourceMappingURL=bootstrap.css.map */
 
 /*! Main CSS file */
+
 body {
   background-color:#777;
-}
-header .intro-text {
-    padding-top: 100px;
-    padding-bottom: 50px;
-}
-#room_users {
-  margin-top: 10px;
-  border-top: 1px solid #cecece;
-  padding-top: 10px;
-}
-
-
-.vertical-alignment-helper {
-    display:table;
-    height: 100%;
-    width: 100%;
-    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
-}
-.vertical-align-center {
-    /* To center vertically */
-    display: table-cell;
-    vertical-align: middle;
-    pointer-events:none;
-}
-.modal-content {
-    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
-    width:inherit;
-    height:inherit;
-    /* To center horizontally */
-    margin: 0 auto;
-    pointer-events: all;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#cecece), to(#222));
+  background: -webkit-radial-gradient(circle, #cecece, #222);
+  background: -moz-radial-gradient(circle, #cecece, #222);
+  background: -ms-radial-gradient(circle, #cecece, #222);
 }
 
-.tabs-below > .nav-tabs {
-  border-bottom: 0;
-}
-.tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
-}
-
-.tabs-below > .nav-tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-
-.tabs-below > .nav-tabs > li > a {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-}
-
-.tabs-below > .nav-tabs > li > a:hover,
-.tabs-below > .nav-tabs > li > a:focus {
-  border-top-color: #ddd;
-  border-bottom-color: transparent;
-}
-
-.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover,
-.tabs-below > .nav-tabs > .active > a:focus {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-::-webkit-scrollbar {
-  -webkit-appearance: none;
-  width: 7px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, .5);
-  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
-} 
-
-.scrollable-list {
-  overflow: scroll;
-  height: 194px;
-}
-
-.scrollable-list .list-group-item {
-  padding: 3px 10px;
-  font-size:12px;
+header {
+  width:100%;
+  min-height:150px;
+  background:url(../img/daveo-header.svg) transparent;
+  background-repeat:no-repeat;
+  background-size:contain;
+  background-position:center;
+  padding: 50px 0 0;
+  margin: 0;
 }
 
 
 
-
-/* ========== Audio ============ */
+/* ========== Audio Player ============ */
 
 #audio_player {
   background: rgb(145,145,145); /* Old browsers */
@@ -6914,118 +6849,234 @@ meter {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
-
-
-/* Ripple Out */
-@-webkit-keyframes hvr-ripple-out {
-  100% {
-    top: -12px;
-    right: -12px;
-    bottom: -12px;
-    left: -12px;
-    opacity: 0;
-  }
-}
-
-@keyframes hvr-ripple-out {
-  100% {
-    top: -12px;
-    right: -12px;
-    bottom: -12px;
-    left: -12px;
-    opacity: 0;
-  }
-}
-
-.hvr-ripple-out {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
-}
-.hvr-ripple-out:before {
-  content: '';
-  position: absolute;
-  border: #e1e1e1 solid 6px;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-}
-.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-  -webkit-animation-name: hvr-ripple-out;
-  animation-name: hvr-ripple-out;
+#amplitude-current-time{
+	font-family: 'PT Sans', sans-serif;
+	font-size: 14px;
+	font-weight: 400;
 }
-#amplitude-play-pause{
-  display: block;
-  height: 55px;
-  width: 55px;
-  line-height: 60px;
-  -moz-border-radius: 30px; /* or 50% */
-  border-radius: 30px; /* or 50% */
-  background-color: white;
-  color: black;
+#amplitude-play-pause {
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  border-radius: 50%;
   text-align: center;
-  border: 3px solid #cecece;
   margin: -40px 0 0 0;
   cursor: pointer;
   float: right;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-transition: -webkit-transform .8s ease-in-out;
-  transition: transform .8s ease-in-out;
-}
-#amplitude-play-pause:hover{
-  background-color: black;
-  color: white;
-  -webkit-transform: rotate(360deg);
-  transform: rotate(360deg);
-}
-
-#amplitude-current-time{
-	font-family: 'PT Sans', sans-serif;
-	font-size: 14px;
-	font-weight: 400;
+  position: relative;
+	-webkit-transition: all .1s linear;
+	transition: all .1s linear;
 }
-.amplitude-paused:before{
+.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:35px;
-  line-height:1;
-  margin:10px;
-  display:inline-block;
+  font-size:25px;
+  line-height: 50px;
+  padding-left:4px;
+  text-shadow: 1px 4px 6px #def, 0 0 0 #555;
 }
-.amplitude-paused{  
+.amplitude-paused:before { 
 
 }
-.amplitude-playing: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:35px;
-  line-height:1;
-  margin:10px;
-  display:inline-block;
+  font-size:25px;
+  line-height: 50px;
+  padding-left:4px;
+}
+.amplitude-playing:before {
+}
+#amplitude-now-playing-name{
+}
+#amplitude-now-playing-listeners{
 }
-.amplitude-playing{
+#amplitude-now-playing-bitrate{
+}
+
+
 
+
+/* ========== Chat Rooms ============ */
+#room_users {
+  margin-top: 10px;
+  border-top: 1px solid #cecece;
+  padding-top: 10px;
 }
 
 
-#amplitude-now-playing-name{
 
+
+/* =========  Vertical Align Modals ============ */
+
+.vertical-alignment-helper {
+    display:table;
+    height: 100%;
+    width: 100%;
+    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+    pointer-events:none;
+}
+.modal-content {
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
+    width:inherit;
+    height:inherit;
+    /* To center horizontally */
+    margin: 0 auto;
+    pointer-events: all;
 }
-#amplitude-now-playing-listeners{
 
+
+
+/* =========  Playlist/Calendar ============ */
+.tabs-below > .nav-tabs {
+  border-bottom: 0;
+}
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
+}
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
+.tabs-below > .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-top-color: #ddd;
+  border-bottom-color: transparent;
+}
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+  border-color: transparent #ddd #ddd #ddd;
+}
+.scrollable-list {
+  overflow: scroll;
+  height: 194px;
+}
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+} 
+.scrollable-list .list-group-item {
+  padding: 3px 10px;
+  font-size:12px;
+}
+ul .badge {
+  font-weight:normal;
+}
+
+
+/* =========  Footer/Bottom Nav ============ */
+.panel-bottom {
+  background: rgba(0,0,0,.5);
+  border:none;
+}
+.panel-bottom .navbar-brand {
+  color:#fff;
+}
+.panel-bottom .navbar-nav > li > a {
+  color:#fff;
+}
+.panel-bottom .navbar-nav > li > a:hover {
+  color:#58B957;
+  background:none;
+}
+.panel-bottom .navbar-nav > li > a:focus,
+.panel-bottom .navbar-nav > li > a:active {
+  border:none;
+  text-decoration:none;
+  outline:none;
+  color:#fff;
+  background:none;
+}
+.panel-bottom .navbar-nav > li > a:visited {
+  border:none;
 }
-#amplitude-now-playing-bitrate{
 
+.listeners {
+  width:410px;
+  height:410px;
 }
+.chart {
+  width:410px;
+  height:410px;
+}
+
+footer {
+  width:100%;
+  min-height:100px;
+  background:url(../img/daveo-footer.svg) transparent;
+  background-repeat:no-repeat;
+  background-size:contain;
+  background-position:center;
+  padding: 50px 0 0;
+  margin: 0 0 20px;
+}
+
+
+
+
+
+
+
+
 
 
 

+ 42 - 0
app/img/daveo-footer.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1280 100" enable-background="new 0 0 1280 100" xml:space="preserve">
+<g>
+	<g>
+		<path d="M271.7,60.1c24.7-16.5,51.2-30.1,79.1-40.3c25.6-9.3,58.9-20,82.5-0.3c5.3,4.4,8.7,9.8,11.1,16.1
+			c2.2,5.7,4.6,10.1,9.9,13.4c10.3,6.5,23.1,10.5,34.8,13.9c24.8,7.1,50.9,9.6,76.5,7.3c29.1-2.5,57.5-11.1,83.1-25.3
+			c-0.7-0.2-1.4-0.4-2.1-0.5c10.6,20.3,31.1,42.3,56.3,32.9c26.9-10,33.3-40.6,36-65.9c-0.6,0.5-1.3,1-1.9,1.4
+			c58.1,8.2,107.9,41.3,159.9,65.9c25.6,12.1,52.3,22.5,80.3,26.9c33,5.1,66.9,2.2,100-0.9c28.7-2.7,60.2-8.3,79.8-31.4
+			c0.5-0.6,0.6-1.5,0-2.1c-10.5-9.6-18.3-21.9-22.3-35.6c-1.8-6-4.3-14.5-2.6-20.8c2-7.6,11.9-6.3,17.2-3.5
+			c20.3,10.8,17.9,43.8,0.4,55.7c0.7,0.6,1.5,1.1,2.2,1.7c5.3-20.4,22.3-36.6,42.8-41.5c9.8-2.4,21.8-2.5,30.5,3.6
+			c4.7,3.3,7.9,8.7,6.2,14.5c-1.6,5.5-7.3,11-13.2,8.1c0.2,0.6,0.5,1.1,0.7,1.7c2.4-10.2,11.4-18.6,22.1-19.1
+			c10.7-0.4,20.5,6.9,23.8,17c0.5,1.6,2.9,1.3,2.9-0.4c0.4-11.4,0.9-22.9,1.3-34.3c0-0.9-1-1.8-1.9-1.4c-36.7,13-73.3,25.9-110,38.9
+			c-18.2,6.4-36.4,12.9-54.5,19.3c-18,6.4-36.5,14.9-55.6,17c-17.4,1.9-38.4-4.5-44-23.1c-0.6-1.8-3.4-1.1-2.9,0.8
+			c3.9,13.2,16,21.7,29,24.6c17.9,3.9,36-2.9,52.7-8.7c39.5-14,79-27.9,118.5-41.9c22.6-8,45.1-16,67.7-24c-0.6-0.5-1.3-1-1.9-1.4
+			c-0.4,11.4-0.9,22.9-1.3,34.3c1-0.1,2-0.3,2.9-0.4c-3.7-11.3-14.6-19.7-26.7-19.2c-12,0.5-22.3,9.7-25,21.3
+			c-0.1,0.6,0.1,1.4,0.7,1.7c9.5,4.5,18.8-5.6,18.2-15c-0.8-12.6-16.1-17.8-26.6-18.2c-27.1-0.9-52.4,19.2-59.2,45.2
+			c-0.3,1.2,1.1,2.5,2.2,1.7c16.5-11.2,20.3-36.1,8.9-52.3c-5.1-7.2-14.6-13.5-23.8-10.6c-11.2,3.5-7.2,19-5.1,27.3
+			c3.9,15.1,12.2,28.8,23.7,39.3c0-0.7,0-1.4,0-2.1c-18.1,21.3-46.7,27.3-73.2,30.1c-32.7,3.5-66.6,6.4-99.3,2.1
+			c-57-7.4-106.3-39.6-157-64.1c-27.8-13.5-56.9-25-87.7-29.3c-1-0.1-1.8,0.4-1.9,1.4c-2.6,23.8-8.4,53.4-33.8,63
+			c-23.9,9-43-12.5-52.9-31.6c-0.4-0.7-1.4-0.9-2.1-0.5C599.8,68.8,542.2,75.1,490,60c-6.3-1.8-12.5-3.9-18.6-6.4
+			c-6.5-2.6-15.1-5.3-19.8-10.7c-4.1-4.7-4.9-11.5-8.3-16.8c-3-4.6-7-8.5-11.6-11.7c-22.6-15.4-51.1-8.2-74.9,0
+			c-30.6,10.5-59.7,25-86.5,43C268.6,58.6,270.1,61.2,271.7,60.1L271.7,60.1z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M27.2,70.4c-9-12.1-0.6-31,14.7-31.7c9.3-0.4,18.2,4.2,26.7,7.2c9,3.2,18.2,5.5,27.6,7.3c1,0.2,2.3-0.7,1.8-1.8
+			C88.6,28.3,67.3,14,44.6,6.1C38.1,3.8,31.5,2,24.8,0.4C20.1-0.8,13.4-3.5,8.6-1.7C3.8,0,2.4,6.3,0.6,10.5
+			c-3.1,7.4-6.2,14.7-9.3,22.1C-9,33.3-8.5,34-8,34.3c12.6,8.5,27.8,12.5,43,11.5c15.7-1.1,28.3-7.7,40.8-16.6
+			c6.7-4.8,13.8-9.8,22-11.5c8.9-1.9,18.1,0.4,25.7,5.2c15.8,9.8,22.6,28,26.3,45.3c0.3,1.2,2.2,1.5,2.7,0.4
+			c8.7-19.7,29-33.2,50.7-32.7c12.6,0.3,24.8,4.7,36.6,8.6c12.3,4.1,24.7,8.3,37,12.4c1.8,0.6,2.6-2.3,0.8-2.9
+			c-13.8-4.6-27.5-9.3-41.3-13.8c-12.2-4.1-25-8.1-38-7.2c-20.9,1.4-39.9,15-48.4,34c0.9,0.1,1.8,0.2,2.7,0.4
+			c-5.1-23.3-17.8-50-44.5-53.1c-12.9-1.5-23.8,5.2-33.9,12.4c-11.4,8.1-22.8,14.5-37,16C21.9,44.2,6.3,40.4-6.5,31.7
+			c0.2,0.6,0.5,1.1,0.7,1.7c2.5-5.8,4.9-11.7,7.4-17.5c1.2-2.8,2.3-5.5,3.5-8.3C7,3.1,8.4,0.7,13.9,1.1C19.5,1.4,25.6,3.6,31,5
+			c5.5,1.5,10.9,3.2,16.2,5.2c20.3,7.7,39.4,21.2,47.9,41.9c0.6-0.6,1.2-1.2,1.8-1.8C84.8,48,73.2,44.4,61.7,40.1
+			c-8.7-3.3-18.8-6.6-27.8-2.7c-12.8,5.5-17.4,23.4-9.2,34.5C25.8,73.5,28.4,72,27.2,70.4L27.2,70.4z"/>
+	</g>
+</g>
+</svg>

+ 37 - 0
app/img/daveo-header.svg

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1280 150" enable-background="new 0 0 1280 150" xml:space="preserve">
+<g id="draw">
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M201,83c12-1,23.8,3.3,34.7,8.5
+		c26.7,12.8,50.4,31.6,69.1,54.6c-24.8-22.8-56.8-35.8-88-48.4"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M981.9,70.8c-15.2,13.2-25.9,31.6-29.8,51.4
+		c36.5-32.6,82.6-54.2,131-61.3"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M98.9,74.1c8,14.8,16,29.7,24,44.5
+		c3.1-41.6,9.2-82.9,18-123.6"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M297,34c0,11.2,0,22.3,0,33.5
+		c0,1.8,0.1,3.7,1.2,5.1c2.6,3.2,7.8,0.6,10.9-2.2c26-22.8,52.1-45.5,78.1-68.3"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1118.1,88.1c-0.5,8.8-0.9,17.9,2.3,26.1
+		c2.7,7,7.9,12.9,13.5,17.8c7.7,6.7,17,12.1,27.1,12.9c14.6,1.1,28.4-7.9,37-19.7c8.6-11.8,13-26,17.1-40"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1168.4,38.2c-27.1,20-56.4,37.1-87.2,51
+		c5.7-10.9,11.4-21.7,17.1-32.6c1.7-3.3,3.5-7.2,2.1-10.6c-1-2.4-3.3-3.9-5.5-5.1c-9.3-5-20.1-6.4-30.6-7.4
+		c-24.2-2.3-48.5-2.7-72.8-1.1c-9.4,0.6-19,1.6-27.3,6s-14.9,13.1-14.2,22.4c1,13.7,16.1,21.5,29.4,25.1c29.2,7.7,60.4,7.6,89.4-0.5
+		c-26.2,21.9-57.4,37.8-90.6,46"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M78,163.9c-20.4,0.2-40.9-1-61.2-3.4
+		c-0.2-4.8,3.6-8.7,7.4-11.6C38.7,137.4,57,130,67.5,114.8c-9.4,1.6-18.8,3.3-28.2,4.9c14.1-8.8,28.2-17.5,42.3-26.3
+		c5-3.1,10.8-8,9.2-13.7c-21.1,0.6-38.4-3.6-58.9-5.1c-12.3-0.9-24.7-1.3-37.1-1.2c-5.8,0-28-2.5-32.1,1.4
+		c12.9-12,29.6-18.9,46-25.3c29.8-11.6,59.9-22.2,90.3-31.9c-30.5-0.5-61,1.4-91.2,5.9c18.5-14.7,37.8-28.3,58-40.5
+		C40.4-21.4,15.1-10.4-8.5,0.4c5.4-4,10.8-8,16.1-12c0.8,13.9-2,28-7.9,40.5"/>
+	<path fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M1229,26.9c-44.5,0.5-89.1,0.3-133.6-0.5
+		c27-14.3,56.3-24.3,86.5-29.5c-2.1,19.8,0.1,40,6.4,58.8c30.2-13.9,48.1-46.1,76.7-63.1c6.8-4,14.8-7.3,22.5-5.1
+		c1.7,12.2,2.7,24.5,2.9,36.8c0.2,10.1-0.2,20.5-3.3,30.1c-3.2,9.6-9.5,18.6-18.7,22.9c-4.2-24.3-0.7-49.9,9.9-72.3
+		c-17.6,33.6-29.1,70.5-33.7,108.2c-0.2,1.6-0.4,3.3-1.4,4.5c-1.1,1.5-3,2.1-4.7,2.8c-13.9,5.9-20.1,25-12.4,37.9
+		c10-2.5,15.8-12.5,20.6-21.6c8.1-15.6,16.3-31.2,24.4-46.9c-8.4,6.9-15.6,15.2-21.2,24.5c12.7,1.7,25.8,0.1,37.8-4.6
+		c-0.1-6.5-5.4-11.6-10.4-15.7c-30.9-25.3-66.9-44.6-105.1-56.3"/>
+</g>
+<g id="title">
+	<rect x="421.6" y="47.5" fill="#FFFFFF" width="436.7" height="47.6"/>
+	<text transform="matrix(1 0 0 1 417.0188 95.1418)" font-family="'Phosphate-Inline'" font-size="72px">Daveo Radio</text>
+</g>
+</svg>

+ 141 - 55
app/index.html

@@ -8,49 +8,15 @@
    <link rel="stylesheet" href="css/style.min.css">
 </head>
 <body>
-<nav class="navbar navbar-default navbar-fixed-top">
-	<div class="container">
-		<div class="navbar-header page-scroll">
-			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-			</button>
-			<a class="navbar-brand page-scroll" href="#page-top">Radio Daveo</a>
-		</div>
-		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-			<ul class="nav navbar-nav navbar-right">
-				<li class="hidden"><a href="#page-top"></a></li>
-				<li><a class="page-scroll" href="#about" data-toggle="modal" data-target="#about">About</a></li>
-			</ul>
-		</div>
-	</div>
-</nav>
 
-<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="about">About</h4>
-      </div>
-      <div class="modal-body">
-        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
+
+
 
 <header>
+
 	<div class="container">
 		<div class="intro-text">
-			<div class="intro-lead-in">Leave some room for some stuff up here</div>
-			<div class="intro-heading">Like maybe a cool header banner with a couple meters</div>
-			<a href="#intro" class="page-scroll btn btn-xl">how to listen</a>
+
 		</div>
 	</div>
 </header>
@@ -58,7 +24,7 @@
 
 <div class="container">
    <div class="row">
-      <div class="col-md-6">
+      <div class="col-sm-6">
          <section id="audio" class="bg-light-gray">
              
             <!-- START Player -->
@@ -96,31 +62,44 @@
 
    			<!-- START Playlist -->
             <div class="panel panel-default">
-               <div class="tabbable tabs-below">
-                  <div class="tab-content scrollable-list">
-                     <div class="tab-pane active" id="one_">
-                           <ul class="list-group">
-                              <div class="recent"></div>
-                           </ul>
-                     </div>
-                     <div class="tab-pane" id="two_">
-                     </div>
-                     <div class="tab-pane" id="twee_">
-                     </div>
+               <div class="tab-content scrollable-list">
+                  <div class="tab-pane active" id="one">
+                     <ul class="list-group">
+                        <div class="recent"></div>
+                     </ul>
+                  </div>
+                  <div class="tab-pane" id="two">
+                     <ul class="list-group">
+                        <div class="tracks"></div>
+                     </ul>          
                   </div>
-                     <ul class="nav nav-tabs">
-                        <li class="active"><a href="#one" data-toggle="tab"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>&nbsp;Last 100</a></li>
-                        <li><a href="#two" data-toggle="tab">Top Artist</a></li>
-                        <li><a href="#twee" data-toggle="tab">Top Tracks</a></li>
+                  <div class="tab-pane" id="three">
+                     <ul class="list-group">
+                        <div class="artists"></div>
                      </ul>
+                  </div>
+                  <div class="tab-pane" id="four">
+                     <ul class="list-group">
+                        <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Something</li>
+                        <li class="list-group-item"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
+                        <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
+                     </ul>
+                  </div>
                </div>
+                  <ul class="nav nav-tabs">
+                     <li class="active"><a href="#one" data-toggle="tab"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>&nbsp;Recent</a></li>
+                     <li><a href="#two" data-toggle="tab"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span>&nbsp;Tracks</a></li>
+                     <li><a href="#three" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Artist</a></li>
+                     <li><a href="#four" data-toggle="tab"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;Schedule</a></li>
+                  </ul>
             </div>
             <!-- END Playlist -->
          
          </section>
    	</div>
       
-      <div class="col-md-6">
+      <!-- START Chat -->
+      <div class="col-sm-6">
          <section id="request-line" class="bg-light-gray">
    		   <div class="panel panel-default">
                
@@ -221,10 +200,117 @@
             
          </section>
       </div>
+      <!-- End Chat -->
+      
          
    </div>
 </div>
 
+<!-- START Footer NAV -->
+<div class="container">
+   <div class="col-sm-12">
+      <div class="row">  
+         <div class="panel panel-bottom">
+   			<ul class="nav navbar-nav">
+   				<li><a href="#connected" data-toggle="modal" data-target="#connected"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span>&nbsp;Listeners</a></li>
+               <li><a href="#charts" data-toggle="modal" data-target="#charts"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;Charts</a></li>
+   			</ul>
+   			<ul class="nav navbar-nav navbar-right">
+   				<li><a href="#about" data-toggle="modal" data-target="#about"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;About</a></li>
+               <li><a href="#help" data-toggle="modal" data-target="#help"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;Help</a></li>
+               <li><a href="#support" data-toggle="modal" data-target="#support"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>&nbsp;Support</a></li>
+   			</ul>
+         </div>
+      </div>
+   </div>
+</div>
+<!-- END Footer NAV -->
+
+<!-- START Listeners Modal -->
+<div class="modal fade" id="connected" tabindex="-1" role="dialog" aria-labelledby="connected" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Listerners Modal -->
+
+<!-- START Charts Modal -->
+<div class="modal fade" id="charts" tabindex="-1" role="dialog" aria-labelledby="charts" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+			<div class="chart">
+
+         </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Charts Modal -->
+
+<!-- START Info Modal -->
+<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="about">About</h4>
+      </div>
+      <div class="modal-body">
+        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Info Modal -->
+
+<!-- START Help Modal -->
+<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="help" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="about">About</h4>
+      </div>
+      <div class="modal-body">
+        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Help Modal -->
+
+<!-- START Support Modal -->
+<div class="modal fade" id="support" tabindex="-1" role="dialog" aria-labelledby="support" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="about">About</h4>
+      </div>
+      <div class="modal-body">
+        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Support Modal -->
+
+<footer class="site-footer">
+   
+</footer>
 
 <script src="js/vendor.min.js"></script>
 <script src="/socket.io/socket.io.js"></script>

File diff suppressed because it is too large
+ 6 - 183
app/js/radio.min.js


BIN
dump.rdb


+ 221 - 170
src/css/main.css

@@ -1,94 +1,29 @@
 /*! Main CSS file */
+
 body {
   background-color:#777;
-}
-header .intro-text {
-    padding-top: 100px;
-    padding-bottom: 50px;
-}
-#room_users {
-  margin-top: 10px;
-  border-top: 1px solid #cecece;
-  padding-top: 10px;
-}
-
-
-.vertical-alignment-helper {
-    display:table;
-    height: 100%;
-    width: 100%;
-    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
-}
-.vertical-align-center {
-    /* To center vertically */
-    display: table-cell;
-    vertical-align: middle;
-    pointer-events:none;
-}
-.modal-content {
-    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
-    width:inherit;
-    height:inherit;
-    /* To center horizontally */
-    margin: 0 auto;
-    pointer-events: all;
-}
-
-.tabs-below > .nav-tabs {
-  border-bottom: 0;
-}
-.tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
-}
-
-.tabs-below > .nav-tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-
-.tabs-below > .nav-tabs > li > a {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-}
-
-.tabs-below > .nav-tabs > li > a:hover,
-.tabs-below > .nav-tabs > li > a:focus {
-  border-top-color: #ddd;
-  border-bottom-color: transparent;
-}
-
-.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover,
-.tabs-below > .nav-tabs > .active > a:focus {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-::-webkit-scrollbar {
-  -webkit-appearance: none;
-  width: 7px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, .5);
-  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
-} 
-
-.scrollable-list {
-  overflow: scroll;
-  height: 194px;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#cecece), to(#222));
+  background: -webkit-radial-gradient(circle, #cecece, #222);
+  background: -moz-radial-gradient(circle, #cecece, #222);
+  background: -ms-radial-gradient(circle, #cecece, #222);
 }
 
-.scrollable-list .list-group-item {
-  padding: 3px 10px;
-  font-size:12px;
+header {
+  width:100%;
+  min-height:150px;
+  background:url(../img/daveo-header.svg) transparent;
+  background-repeat:no-repeat;
+  background-size:contain;
+  background-position:center;
+  padding: 50px 0 0;
+  margin: 0;
 }
 
 
 
-
-/* ========== Audio ============ */
+/* ========== Audio Player ============ */
 
 #audio_player {
   background: rgb(145,145,145); /* Old browsers */
@@ -153,118 +88,234 @@ meter {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
+#amplitude-current-time{
+	font-family: 'PT Sans', sans-serif;
+	font-size: 14px;
+	font-weight: 400;
+}
+#amplitude-play-pause {
+  height: 50px;
+  width: 50px;
+  line-height: 50px;
+  border-radius: 50%;
+  text-align: center;
+  margin: -40px 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{
+}
 
 
-/* Ripple Out */
-@-webkit-keyframes hvr-ripple-out {
-  100% {
-    top: -12px;
-    right: -12px;
-    bottom: -12px;
-    left: -12px;
-    opacity: 0;
-  }
+
+
+/* ========== Chat Rooms ============ */
+#room_users {
+  margin-top: 10px;
+  border-top: 1px solid #cecece;
+  padding-top: 10px;
 }
 
-@keyframes hvr-ripple-out {
-  100% {
-    top: -12px;
-    right: -12px;
-    bottom: -12px;
-    left: -12px;
-    opacity: 0;
-  }
+
+
+
+/* =========  Vertical Align Modals ============ */
+
+.vertical-alignment-helper {
+    display:table;
+    height: 100%;
+    width: 100%;
+    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+    pointer-events:none;
+}
+.modal-content {
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
+    width:inherit;
+    height:inherit;
+    /* To center horizontally */
+    margin: 0 auto;
+    pointer-events: all;
 }
 
-.hvr-ripple-out {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  -moz-osx-font-smoothing: grayscale;
-  position: relative;
+
+
+/* =========  Playlist/Calendar ============ */
+.tabs-below > .nav-tabs {
+  border-bottom: 0;
 }
-.hvr-ripple-out:before {
-  content: '';
-  position: absolute;
-  border: #e1e1e1 solid 6px;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
 }
-.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-  -webkit-animation-name: hvr-ripple-out;
-  animation-name: hvr-ripple-out;
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
 }
-#amplitude-play-pause{
-  display: block;
-  height: 55px;
-  width: 55px;
-  line-height: 60px;
-  -moz-border-radius: 30px; /* or 50% */
-  border-radius: 30px; /* or 50% */
-  background-color: white;
-  color: black;
-  text-align: center;
-  border: 3px solid #cecece;
-  margin: -40px 0 0 0;
-  cursor: pointer;
-  float: right;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-transition: -webkit-transform .8s ease-in-out;
-  transition: transform .8s ease-in-out;
+.tabs-below > .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
 }
-#amplitude-play-pause:hover{
-  background-color: black;
-  color: white;
-  -webkit-transform: rotate(360deg);
-  transform: rotate(360deg);
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-top-color: #ddd;
+  border-bottom-color: transparent;
+}
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+  border-color: transparent #ddd #ddd #ddd;
+}
+.scrollable-list {
+  overflow: scroll;
+  height: 194px;
+}
+::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
 }
 
-#amplitude-current-time{
-	font-family: 'PT Sans', sans-serif;
-	font-size: 14px;
-	font-weight: 400;
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, .5);
+  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+} 
+.scrollable-list .list-group-item {
+  padding: 3px 10px;
+  font-size:12px;
 }
-.amplitude-paused:before{
-  content:"\e072";
-  font-family:"Glyphicons Halflings";
-  font-size:35px;
-  line-height:1;
-  margin:10px;
-  display:inline-block;
+ul .badge {
+  font-weight:normal;
 }
-.amplitude-paused{  
 
+
+/* =========  Footer/Bottom Nav ============ */
+.panel-bottom {
+  background: rgba(0,0,0,.5);
+  border:none;
 }
-.amplitude-playing:before {
-  content:"\e073";
-  font-family:"Glyphicons Halflings";
-  font-size:35px;
-  line-height:1;
-  margin:10px;
-  display:inline-block;
+.panel-bottom .navbar-brand {
+  color:#fff;
+}
+.panel-bottom .navbar-nav > li > a {
+  color:#fff;
+}
+.panel-bottom .navbar-nav > li > a:hover {
+  color:#58B957;
+  background:none;
+}
+.panel-bottom .navbar-nav > li > a:focus,
+.panel-bottom .navbar-nav > li > a:active {
+  border:none;
+  text-decoration:none;
+  outline:none;
+  color:#fff;
+  background:none;
+}
+.panel-bottom .navbar-nav > li > a:visited {
+  border:none;
 }
-.amplitude-playing{
 
+.listeners {
+  width:410px;
+  height:410px;
+}
+.chart {
+  width:410px;
+  height:410px;
 }
 
+footer {
+  width:100%;
+  min-height:100px;
+  background:url(../img/daveo-footer.svg) transparent;
+  background-repeat:no-repeat;
+  background-size:contain;
+  background-position:center;
+  padding: 50px 0 0;
+  margin: 0 0 20px;
+}
+
+
+
+
 
-#amplitude-now-playing-name{
 
-}
-#amplitude-now-playing-listeners{
 
-}
-#amplitude-now-playing-bitrate{
 
-}
 
 
 

+ 141 - 55
src/index.html

@@ -8,49 +8,15 @@
    <link rel="stylesheet" href="css/style.min.css">
 </head>
 <body>
-<nav class="navbar navbar-default navbar-fixed-top">
-	<div class="container">
-		<div class="navbar-header page-scroll">
-			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-			</button>
-			<a class="navbar-brand page-scroll" href="#page-top">Radio Daveo</a>
-		</div>
-		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-			<ul class="nav navbar-nav navbar-right">
-				<li class="hidden"><a href="#page-top"></a></li>
-				<li><a class="page-scroll" href="#about" data-toggle="modal" data-target="#about">About</a></li>
-			</ul>
-		</div>
-	</div>
-</nav>
 
-<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="about">About</h4>
-      </div>
-      <div class="modal-body">
-        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
-</div>
+
+
 
 <header>
+
 	<div class="container">
 		<div class="intro-text">
-			<div class="intro-lead-in">Leave some room for some stuff up here</div>
-			<div class="intro-heading">Like maybe a cool header banner with a couple meters</div>
-			<a href="#intro" class="page-scroll btn btn-xl">how to listen</a>
+
 		</div>
 	</div>
 </header>
@@ -58,7 +24,7 @@
 
 <div class="container">
    <div class="row">
-      <div class="col-md-6">
+      <div class="col-sm-6">
          <section id="audio" class="bg-light-gray">
              
             <!-- START Player -->
@@ -96,31 +62,44 @@
 
    			<!-- START Playlist -->
             <div class="panel panel-default">
-               <div class="tabbable tabs-below">
-                  <div class="tab-content scrollable-list">
-                     <div class="tab-pane active" id="one_">
-                           <ul class="list-group">
-                              <div class="recent"></div>
-                           </ul>
-                     </div>
-                     <div class="tab-pane" id="two_">
-                     </div>
-                     <div class="tab-pane" id="twee_">
-                     </div>
+               <div class="tab-content scrollable-list">
+                  <div class="tab-pane active" id="one">
+                     <ul class="list-group">
+                        <div class="recent"></div>
+                     </ul>
+                  </div>
+                  <div class="tab-pane" id="two">
+                     <ul class="list-group">
+                        <div class="tracks"></div>
+                     </ul>          
                   </div>
-                     <ul class="nav nav-tabs">
-                        <li class="active"><a href="#one" data-toggle="tab"><span class="glyphicon glyphicon-music" aria-hidden="true"></span>&nbsp;Last 100</a></li>
-                        <li><a href="#two" data-toggle="tab">Top Artist</a></li>
-                        <li><a href="#twee" data-toggle="tab">Top Tracks</a></li>
+                  <div class="tab-pane" id="three">
+                     <ul class="list-group">
+                        <div class="artists"></div>
                      </ul>
+                  </div>
+                  <div class="tab-pane" id="four">
+                     <ul class="list-group">
+                        <li class="list-group-item list-group-item-info"><b>Dec 12th 2-4pm</b>: Example Something</li>
+                        <li class="list-group-item"><b>Dec 14th 8-10am</b>: Daveo Radio</li>
+                        <li class="list-group-item"><b>Dec 22th 2-4pm</b>: Daveo Radio</li>
+                     </ul>
+                  </div>
                </div>
+                  <ul class="nav nav-tabs">
+                     <li class="active"><a href="#one" data-toggle="tab"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>&nbsp;Recent</a></li>
+                     <li><a href="#two" data-toggle="tab"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span>&nbsp;Tracks</a></li>
+                     <li><a href="#three" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Artist</a></li>
+                     <li><a href="#four" data-toggle="tab"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>&nbsp;Schedule</a></li>
+                  </ul>
             </div>
             <!-- END Playlist -->
          
          </section>
    	</div>
       
-      <div class="col-md-6">
+      <!-- START Chat -->
+      <div class="col-sm-6">
          <section id="request-line" class="bg-light-gray">
    		   <div class="panel panel-default">
                
@@ -221,10 +200,117 @@
             
          </section>
       </div>
+      <!-- End Chat -->
+      
          
    </div>
 </div>
 
+<!-- START Footer NAV -->
+<div class="container">
+   <div class="col-sm-12">
+      <div class="row">  
+         <div class="panel panel-bottom">
+   			<ul class="nav navbar-nav">
+   				<li><a href="#connected" data-toggle="modal" data-target="#connected"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span>&nbsp;Listeners</a></li>
+               <li><a href="#charts" data-toggle="modal" data-target="#charts"><span class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;Charts</a></li>
+   			</ul>
+   			<ul class="nav navbar-nav navbar-right">
+   				<li><a href="#about" data-toggle="modal" data-target="#about"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;About</a></li>
+               <li><a href="#help" data-toggle="modal" data-target="#help"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;Help</a></li>
+               <li><a href="#support" data-toggle="modal" data-target="#support"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>&nbsp;Support</a></li>
+   			</ul>
+         </div>
+      </div>
+   </div>
+</div>
+<!-- END Footer NAV -->
+
+<!-- START Listeners Modal -->
+<div class="modal fade" id="connected" tabindex="-1" role="dialog" aria-labelledby="connected" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Listerners Modal -->
+
+<!-- START Charts Modal -->
+<div class="modal fade" id="charts" tabindex="-1" role="dialog" aria-labelledby="charts" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-body">
+         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+			<div class="chart">
+
+         </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Charts Modal -->
+
+<!-- START Info Modal -->
+<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="about">About</h4>
+      </div>
+      <div class="modal-body">
+        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Info Modal -->
+
+<!-- START Help Modal -->
+<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="help" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="about">About</h4>
+      </div>
+      <div class="modal-body">
+        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Help Modal -->
+
+<!-- START Support Modal -->
+<div class="modal fade" id="support" tabindex="-1" role="dialog" aria-labelledby="support" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="about">About</h4>
+      </div>
+      <div class="modal-body">
+        <p><b>Daveo Radio</b> is just a little place I can share and talk about some music with friends. I started toying around with different streaming servers and I am using an Icecast streaming media server I’ve set up. This page is powered by Linode, Node.js, Express, Socket.io, and Icecast-kh.</p>   <p>I enjoy listening to music and I spent quite a bit of time doing so. I’ve gone entirely digital in recent years. I sold my collection of albums years ago and I donated my CD collection to a music student at Vanderbilt. I now have a collection of about 100,000 files that I keep on a networked hard drive. I do pay for ad-free streaming services, but I agree with artists who want a better revenue model from streaming. The analog/digital debate is null in my opinion. I use Polk in my living room and Klipsch in my office. In the car, I most often use playlists I’ve created and I rarely tune into a radio or satellite stations even though I have service. On occasion, at home I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END Support Modal -->
+
+<footer class="site-footer">
+   
+</footer>
 
 <script src="js/vendor.min.js"></script>
 <script src="/socket.io/socket.io.js"></script>

File diff suppressed because it is too large
+ 6 - 183
src/js/radio.js


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