Bloc · alexbanaga · Oct 22, 2017 · Oct 25, 2017 · Oct 25, 2017 · Oct 29, 2017
diff --git a/app/index.html b/app/index.html
@@ -1,24 +1,33 @@
 <!DOCTYPE html>
-<html>
-    <head>
+<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/album.css">
+        <link rel="stylesheet" type="text/css" href="styles/collection.css">
         <link rel="stylesheet" type="text/css" href="styles/landing.css">
+        <link rel="stylesheet" type="text/css" href="styles/player_bar.css">
     </head>
     <body class="landing">
         <nav class="navbar">
-            <a href="index.html" class="logo">
+            <a ui-sref="landing" 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>
+                <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/fixtures.js"></script>
+        <script src="/scripts/controllers/LandingCtrl.js"></script>
+        <script src="/scripts/controllers/AlbumCtrl.js"></script>
+        <script src="/scripts/controllers/CollectionCtrl.js"></script>
     </body>
-</html>
+</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'])
+    .config(config);
+})();
diff --git a/app/scripts/controllers/AlbumCtrl.js b/app/scripts/controllers/AlbumCtrl.js
@@ -0,0 +1,8 @@
+(function() {
+  function AlbumCtrl() {
+    this.albumData = angular.copy(albumPicasso);
+  }
+  angular
+    .module('blocJams')
+    .controller('AlbumCtrl', AlbumCtrl);
+})();
diff --git a/app/scripts/controllers/CollectionCtrl.js b/app/scripts/controllers/CollectionCtrl.js
@@ -0,0 +1,11 @@
+(function() {
+  function CollectionCtrl() {
+    this.albums = [];
+    for(var i = 0; i < 12; i++) {
+      this.albums.push(angular.copy(albumPicasso));
+    }
+  }
+  angular
+    .module('blocJams')
+    .controller('CollectionCtrl', CollectionCtrl);
+})();
diff --git a/app/scripts/controllers/LandingCtrl.js b/app/scripts/controllers/LandingCtrl.js
@@ -0,0 +1,8 @@
+(function() {
+  function LandingCtrl() {
+    this.heroTitle = "Turn the Music Up!";
+  }
+  angular
+    .module('blocJams')
+    .controller('LandingCtrl', LandingCtrl);
+})();
diff --git a/app/scripts/fixtures.js b/app/scripts/fixtures.js
@@ -0,0 +1,29 @@
+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' }
+   ]
+};
diff --git a/app/styles/landing.css b/app/styles/landing.css
@@ -33,6 +33,7 @@ body.landing {
 .point {
     position: relative;
     padding: 2rem;
+    opacity: 1;
     text-align: center;
     -webkit-transform: scaleX(0.9) translateY(3rem);
     -moz-transform: scaleX(0.9) translateY(3rem);
@@ -54,4 +55,4 @@ body.landing {
 .ion-iphone {
     color: rgb(233,50,117);
     font-size: 5rem;
-}
+}
diff --git a/app/styles/main.css b/app/styles/main.css
@@ -19,7 +19,11 @@ body {
     min-height: 100%;
     padding-bottom: 200px;
  }
-
+
+a {
+  color: inherit;
+}
+
 .navbar {
     position: relative;
     padding: 0.5rem;
@@ -79,19 +83,19 @@ body {
 /* Medium and small screens (640px) */
 @media (min-width: 40rem) {
     html { font-size: 112%; }
-    
+
     .column {
         float: left;
         padding-left: 1rem;
         padding-right: 1rem;
     }
-    
+
     .column.full { width: 100%; }
     .column.two-thirds { width: 66.7%; }
     .column.half { width: 50%; }
     .column.third { width: 33.3%; }
     .column.fourth { width: 25%; }
-    .column.flow-opposite { float: right; } 
+    .column.flow-opposite { float: right; }
 }
 
 /* Large screens (1024px) */
@@ -107,4 +111,4 @@ body {
 
 .clearfix:after {
     clear: both;
-}
+}
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-shpw="!playing && hovered"></span class="ion-play"></span></a>
+               <a class="album-song-button" ng-show="playing"><span class="ion-pause"></span></a>
+             <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,16 @@
+<section class="album-covers container clearfix">
+     <div class="collection-album-container column fourth" ng-repeat="album in collection.albums">
+         <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>
+     <ng-include src="'/templates/player_bar.html'"></ng-include>
+ </section>
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>
diff --git a/app/templates/home.html → landing.html b/app/templates/home.html → landing.html