Bloc · rrmarsh100 · Oct 19, 2017 · Oct 20, 2017 · Oct 20, 2017 · Oct 22, 2017
diff --git a/app/index.html b/app/index.html
@@ -1,24 +1,33 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Bloc Jams</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
-        <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
-        <link rel="stylesheet" type="text/css" href="styles/normalize.css">
-        <link rel="stylesheet" type="text/css" href="styles/main.css">
-        <link rel="stylesheet" type="text/css" href="styles/landing.css">
-    </head>
-    <body class="landing">
-        <nav class="navbar">
-            <a href="index.html" class="logo">
-                <img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo">
-            </a>
-            <div class="links-container">
-                <a href="collection.html" class="navbar-link">Collection</a>
-            </div>
-        </nav>
-
-        <script src="scripts/app.js"></script>
-    </body>
-</html>
+<html ng-app="blocJams">
+<head lang="en">
+  <title>Bloc Jams</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
+  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  <link rel="stylesheet" type="text/css" href= "styles/normalize.css">
+  <link rel="stylesheet" type="text/css" href= "styles/main.css">
+  <link rel="stylesheet" type="text/css" href= "styles/landing.css">
+  <link rel="stylesheet" type="text/css" href= "styles/collection.css">
+  <link rel="stylesheet" type="text/css" href= "styles/album.css">
+  <link rel="stylesheet" type="text/css" href= "styles/player_bar.css">
+</head>
+<body class="landing">
+  <nav class="navbar">
+    <a ui-sref="landing" class="logo">
+      <img src="assets/images/bloc_jams_logo.png" alt="bloc jams logo">
+    </a>
+    <div class="links-container">
+      <a ui-sref="collection" class="navbar-link">Collection</a>
+    </div>
+  </nav>
+  <ui-view></ui-view>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
+  <script src="/scripts/app.js"></script>
+  <script src="/scripts/services/Fixtures.js"></script>
+  <script src="/scripts/controllers/LandingCtrl.js"></script>
+  <script src="/scripts/controllers/CollectionCtrl.js"></script>
+  <script src="/scripts/controllers/AlbumCtrl.js"></script>
+</body>
+</html>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -0,0 +1,30 @@
+(function() {
+  function config($stateProvider, $locationProvider) {
+    $locationProvider
+    .html5Mode({
+      enabled: true,
+      requireBase: false
+    });
+    $stateProvider
+    .state('landing', {
+      url: '/',
+      controller: 'LandingCtrl as landing',
+      templateUrl: '/templates/landing.html'
+    })
+    .state('album', {
+      url: '/album',
+      controller: 'AlbumCtrl as album',
+      templateUrl: '/templates/album.html'
+    })
+    .state('collection', {
+      url: '/collection',
+      controller: 'CollectionCtrl as collection',
+      templateUrl: '/templates/collection.html'
+    });
+  }
+
+  angular.module('blocJams', ['ui.router']);
+  angular
+  .module('blocJams', ['ui.router'])
+  .config(config);
+})();
diff --git a/app/scripts/controllers/AlbumCtrl.js b/app/scripts/controllers/AlbumCtrl.js
@@ -0,0 +1,10 @@
+  (function() {
+       function AlbumCtrl(Fixtures) {
+  	 this.albumData = Fixtures.getAlbum();
+
+  }
+
+    angular
+        .module('blocJams')
+       .controller('AlbumCtrl', ['Fixtures', AlbumCtrl]);
+})();
diff --git a/app/scripts/controllers/CollectionCtrl.js b/app/scripts/controllers/CollectionCtrl.js
@@ -0,0 +1,9 @@
+(function() {
+  function CollectionCtrl(Fixtures) {
+    this.albums = Fixtures.getCollection(12);
+  }
+
+  angular
+    .module('blocJams')
+    .controller('CollectionCtrl', ['Fixtures', CollectionCtrl]);
+})();
diff --git a/app/scripts/controllers/LandingCtrl.js b/app/scripts/controllers/LandingCtrl.js
@@ -0,0 +1,9 @@
+(function() {
+    function LandingCtrl() {
+         this.heroTitle = "Turn the Music Up!";
+    }
+
+    angular
+        .module('blocJams')
+        .controller('LandingCtrl', LandingCtrl);
+})();
diff --git a/app/scripts/services/Fixtures.js b/app/scripts/services/Fixtures.js
@@ -0,0 +1,52 @@
+(function() {
+     function Fixtures() {
+         var Fixtures = {};
+
+         var albumPicasso = {
+        title: 'The Colors',
+        artist: 'Pablo Picasso',
+        label: 'Cubism',
+        year: '1881',
+        albumArtUrl: '/assets/images/album_covers/01.png',
+        songs: [
+            { title: 'Blue', duration: '161.71', audioUrl: '/assets/music/blue' },
+            { title: 'Green', duration: '103.96', audioUrl: '/assets/music/green' },
+            { title: 'Red', duration: '268.45', audioUrl: '/assets/music/red' },
+            { title: 'Pink', duration: '153.14', audioUrl: '/assets/music/pink' },
+            { title: 'Magenta', duration: '374.22', audioUrl: '/assets/music/magenta' }
+        ]
+    };
+
+    var albumMarconi = {
+        title: 'The Telephone',
+        artist: 'Guglielmo Marconi',
+        label: 'EM',
+        year: '1909',
+        albumArtUrl: '/assets/images/album_covers/20.png',
+        songs: [
+            { title: 'Hello, Operator?', duration: '1:01' },
+            { title: 'Ring, ring, ring', duration: '5:01' },
+            { title: 'Fits in your pocket', duration: '3:21' },
+            { title: 'Can you hear me now?', duration: '3:14' },
+            { title: 'Wrong phone number', duration: '2:15' }
+        ]
+    };
+    Fixtures.getAlbum = function() {
+         return albumPicasso;
+     };
+
+     Fixtures.getCollection = function(numberOfAlbums) {
+          var collection = [];
+          for (var i=0; i<numberOfAlbums; i++){
+              collection.push(albumPicasso);
+          }
+          return collection;
+        };
+
+         return Fixtures;
+     }
+
+     angular
+         .module('blocJams')
+         .factory('Fixtures', Fixtures);
+ })();
diff --git a/app/styles/landing.css b/app/styles/landing.css
@@ -37,12 +37,13 @@ body.landing {
     -webkit-transform: scaleX(0.9) translateY(3rem);
     -moz-transform: scaleX(0.9) translateY(3rem);
     transform: scaleX(0.9) translateY(3rem);
-    -webkit-transition: all 0.25s ease-in-out;
+    opacity: 1
+    /*-webkit-transition: all 0.25s ease-in-out;
     -moz-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
     -webkit-transition-delay: 0.2s;
     -moz-transition-delay: 0.2s;
-    transition-delay: 0.2s;
+    transition-delay: 0.2s;*/
 }
 
 .point .point-title {
@@ -54,4 +55,4 @@ body.landing {
 .ion-iphone {
     color: rgb(233,50,117);
     font-size: 5rem;
-}
+}
diff --git a/app/templates/album.html b/app/templates/album.html
@@ -0,0 +1,24 @@
+<main class="album-view container narrow">
+  <section class="clearfix">
+    <div class="column half">
+      <img src="/assets/images/album_covers/01.png" class="album-cover-art">
+    </div>
+    <div class="album-view-details column half">
+      <h2 class="album-view-title">{{ album.albumData.title }}</h2>
+      <h3 class="album-view-artist">{{ album.albumData.artist }}</h3>
+      <h5 class="album-view-release-info">{{ album.albumData.year }} {{ album.albumData.label }}</h5>
+    </div>
+  </section>
+  <table class="album-view-song-list">
+    <tr class="album-view-song-item" ng-mouseover="hovered = true" ng-mouseleave="hovered = false" ng-repeat="song in album.albumData.songs">
+      <td class="song-item-number">
+        <span ng-show="!playing && !hovered">{{ $index + 1 }}</span>
+        <a class="album-song-button" ng-show="!playing && hovered"><span class="ion-play"></span></a>
+        <a class="album-song-button" ng-show="playing"><span class="ion-pause"></span></a>
+      </td>
+      <td class="song-item-title">{{ song.title }}</td>
+      <td class="song-item-duration">{{ song.duration }}</td>
+    </tr>
+  </table>
+</main>
+<ng-include src="'/templates/player_bar.html'"></ng-include>
diff --git a/app/templates/collection.html b/app/templates/collection.html
@@ -0,0 +1,15 @@
+<section class="album-covers container clearfix">
+        <div class="collection-album-container column fourth" ng-repeat="album in collection.albums track by $index">
+        <img src="{{ album.albumArtUrl }}">
+        <div class="collection-album-info caption">
+            <p>
+                <a class="album-name" ui-sref="album">{{ album.title }}</a>
+                <br/>
+                <a ui-sref="album">{{ album.artist }}</a>
+                <br/>
+                {{ album.songs.length }} songs
+                <br/>
+            </p>
+        </div>
+    </div>
+</section>
diff --git a/app/templates/home.html b/app/templates/home.html
diff --git a/app/templates/landing.html b/app/templates/landing.html
@@ -0,0 +1,21 @@
+<section class="hero-content">
+         <h1 class="hero-title">{{ landing.heroTitle }}</h1>
+ </section>
+
+ <section class="selling-points container clearfix">
+     <div class="point column third">
+         <span class="ion-music-note"></span>
+         <h5 class="point-title">Choose your music</h5>
+         <p class="point-description">The world is full of music; why should you have to listen to music that someone else chose?</p>
+     </div>
+     <div class="point column third">
+         <span class="ion-radio-waves"></span>
+         <h5 class="point-title">Unlimited, streaming, ad-free</h5>
+         <p class="point-description">No arbitrary limits. No distractions.</p>
+     </div>
+     <div class="point column third">
+         <span class="ion-iphone"></span>
+         <h5 class="point-title">Mobile enabled</h5>
+         <p class="point-description">Listen to your music on the go. This streaming service is available on all mobile platforms.</p>
+     </div>
+ </section>
diff --git a/app/templates/player_bar.html b/app/templates/player_bar.html
@@ -0,0 +1,35 @@
+<section class="player-bar">
+    <div class="container">
+        <div class="control-group main-controls">
+            <a class="previous">
+                <span class="ion-skip-backward"></span>
+            </a>
+            <a class="play-pause">
+                <span class="ion-play"></span>
+            </a>
+            <a class="next">
+                <span class="ion-skip-forward"></span>
+            </a>
+        </div>
+        <div class="control-group currently-playing">
+            <h2 class="song-name"></h2>
+            <h2 class="artist-song-mobile"></h2>
+            <h3 class="artist-name"></h3>
+            <div class="seek-control">
+                <div class="seek-bar">
+                    <div class="fill"></div>
+                    <div class="thumb"></div>
+                </div>
+                <div class="current-time"></div>
+                <div class="total-time"></div>
+            </div>
+        </div>
+        <div class="control-group volume">
+            <span class="icon ion-volume-high"></span>
+            <div class="seek-bar">
+                <div class="fill"></div>
+                <div class="thumb"></div>
+            </div>
+        </div>
+    </div>
+</section>