added user authorization

app/app.js

@@ -28,16 +28,16 @@ app.config(['$routeProvider', function($routeProvider){
     .when('/ready-menu-balance',{
       templateUrl: './app/views/ready-menu-second.html',
       controller: 'ReadyMenuSecondController'
+    })
+    .when('/shopping-cart',{
+      templateUrl: './app/views/shopping-cart-page.html',
+      controller: 'ShoppingCartPageController'
     }).otherwise({
       redirectTo: '/'
     })
 
 }])
 
-// app.run(function($animate) {
-//   $animate.enabled(true);
-//   $animate.enabled(document.body, false);
-//   $animate.enabled(document.getElementById('view-container'), true);
-// });
+// app.run(function($timeout) {
 //
-// app.value('$$isDocumentHidden', function() { return false; });
+// });

app/controllers/ReadyMenuController.js

@@ -1,3 +1,9 @@
-app.controller('ReadyMenuController', [function(){
-  
+app.controller('ReadyMenuController', ['$scope','$timeout','$window',function($scope,$timeout,$window){
+  $scope.isLeaveAnimate = function(path){
+    $scope.isLeaveAnimateClass = true;
+    $timeout(function(){
+      $window.location.assign(path);
+    },1000)
+  }
+
 }])

app/controllers/ReadyMenuSecondController.js

@@ -1,4 +1,4 @@
-app.controller('ReadyMenuSecondController',['$scope','$location','$timeout',function($scope,$location,$timeout){
+app.controller('ReadyMenuSecondController',['$scope','$location','$timeout','$window','$interval',function($scope,$location,$timeout,$window,$interval){
   $scope.currentPath = $location.path();
 
   if($scope.currentPath.indexOf('loss') > -1){
@@ -10,6 +10,11 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout',func
   }
 
   var firebaseDiets = firebase.database().ref().child('diets');
+  $interval(function(){
+    if(firebase.auth().currentUser){
+      $scope.firebaseShoppingCart = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('shoppingCart');
+    }
+  },1000)
   $scope.diets = {};
   firebaseDiets.on('value', snap => {
     $timeout(function(){
@@ -17,4 +22,67 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout',func
     })
 
   })
+
+  $scope.weekCount = "1";
+  // $scope.selectArr = [
+  //   {val: '1', name: 'week 1', isSelected:'true'},
+  //   {val: '2', name: 'week 2', isSelected:'false'},
+  //   {val: '3', name: 'week 3', isSelected:'false'},
+  //   {val: '4', name: 'week 4', isSelected:'false'},
+  // ]
+
+  // scroll
+
+  var JQWindow = angular.element($window);
+
+  JQWindow.bind('scroll', function(){
+
+    // if(window.pageYOffset >= '10'){
+    //   var item = document.querySelector('.ready-menu-second .item:nth-child(1)');
+    //   var JQItem = angular.element(item);
+    //   JQItem.addClass('ready-menu-second-scroll-class');
+    // } else{
+    //   var item = document.querySelector('.ready-menu-second .item:nth-child(1)');
+    //   var JQItem = angular.element(item);
+    //   JQItem.removeClass('ready-menu-second-scroll-class');
+    // }
+    if(window.pageYOffset >= '350'){
+      var item = document.querySelector('.ready-menu-second .item:nth-child(2)');
+      var JQItem = angular.element(item);
+      JQItem.addClass('ready-menu-second-scroll-class');
+    } else{
+      var item = document.querySelector('.ready-menu-second .item:nth-child(2)');
+      var JQItem = angular.element(item);
+      JQItem.removeClass('ready-menu-second-scroll-class');
+    }
+  })
+
+  $scope.onInit = function(){
+    $timeout(function(){
+      var item = document.querySelector('.ready-menu-second .item:nth-child(1)');
+      var JQItem = angular.element(item);
+      JQItem.addClass('ready-menu-second-scroll-class');
+    },500)
+  }
+  // functions
+
+  $scope.addToCart = function(diet, dietPrice, weekCount){
+    if(firebase.auth().currentUser){
+      var readyDiet = diet;
+      readyDiet.overallPrice =  dietPrice * weekCount;
+      readyDiet.weekCount = weekCount;
+      $scope.firebaseShoppingCart.push().set(readyDiet);
+      var shoppingCartIconJQ = angular.element(document.querySelector('.shopping-cart-icon span'));
+      shoppingCartIconJQ.addClass('animate');
+      $timeout(function(){
+        shoppingCartIconJQ.removeClass('animate');
+      },500)
+    } else{
+      var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+      loginPopupJQ.css('display','flex');
+      $timeout(function(){
+        loginPopupJQ.css('opacity','1');
+      },50)
+    }
+  }
 }])

app/controllers/SelectMenuPageController.js

@@ -1,38 +1,52 @@
-app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout',function($scope,$firebaseObject,$timeout){
-  var ref = firebase.database().ref().child('meals');
-  // var fireObj = $firebaseObject(ref);keys[i]
-  // var mealItems = fireObj.first;
-  // fireObj.$loaded().then(function(result){
-  //   console.log(result.first);
-  // })
+app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout','$interval',function($scope,$firebaseObject,$timeout,$interval){
+  if(firebase.auth().currentUser){
+    $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
+  } else{
+    $scope.ref = firebase.database().ref().child('meals');
+  }
+  $interval(function(){
+    if(firebase.auth().currentUser){
+      $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
+    } else{
+      $scope.ref = firebase.database().ref().child('meals');
+    }
+
+    $scope.ref.on('value', snap => {
+      $timeout(function(){
+        $scope.meals = snap.val();
+      })
+    })
+  },1000)
+  // var ref = firebase.database().ref().child('meals');
+
   $scope.mealType = 'breakfast';
   $scope.meals = [];
   $scope.selectedNumber = 0;
-  $scope.selectMeal = function(i){
-    var keys = Object.keys($scope.meals);
 
-    //animating btn
-    if(!$scope.meals[keys[i]].isSelected){
-      var selectedMealsBtn = angular.element(document.querySelector('.selected-meals-btn'));
-      selectedMealsBtn.addClass('selected-meals-btn-animate');
+  $scope.selectMeal = function(i){
+    if(firebase.auth().currentUser){
+      var keys = Object.keys($scope.meals);
+      //animating btn
+      if(!$scope.meals[keys[i]].isSelected){
+        var selectedMealsBtn = angular.element(document.querySelector('.selected-meals-btn'));
+        selectedMealsBtn.addClass('selected-meals-btn-animate');
+        $timeout(function(){
+          selectedMealsBtn.removeClass('selected-meals-btn-animate');
+        },500)
+      }
+      //animating btn
+      $scope.meals[keys[i]].isSelected = true;
+      $scope.ref.child(keys[i]).set($scope.meals[keys[i]]);
+    } else{
+      var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+      loginPopupJQ.css('display','flex');
       $timeout(function(){
-        selectedMealsBtn.removeClass('selected-meals-btn-animate');
-      },500)
+        loginPopupJQ.css('opacity','1');
+      },50)
     }
-    //animating btn
-
-    $scope.meals[keys[i]].isSelected = true;
-    ref.child(keys[i]).set($scope.meals[keys[i]]);
   }
-  ref.on('value', snap => {
-    // var databaseT0ests = [];
-    // var retrievedObject = snap.val();
-    // if(retrievedObject){
-    //   var keys = Object.keys(retrievedObject);
-    //   for (var i = 0; i < keys.length; i++) {
-    //     databaseTests[i] = retrievedObject[keys[i]];
-    //   }
-    // }
+
+  $scope.ref.on('value', snap => {
     $timeout(function(){
       $scope.meals = snap.val();
     })

app/controllers/ShoppingCartPageController.js

@@ -0,0 +1,33 @@
+app.controller('ShoppingCartPageController',['$scope','$window','$timeout',function($scope,$window,$timeout){
+  var firebaseShoppingCart = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('shoppingCart');
+  $scope.shoppingCartItems = {};
+  firebaseShoppingCart.on('value',function(snap){
+    $scope.shoppingCartItems = snap.val();
+  })
+
+  // funcitons
+
+  $scope.totalPrice = function(){
+    $scope.total = 0;
+    angular.forEach($scope.shoppingCartItems,function(item){
+      $scope.total += item.overallPrice;
+    })
+    return $scope.total;
+  }
+
+  $scope.removeItem = function(i){
+    // var shoppingCartFooter = document.querySelector('shopping-cart-page .items-footer');
+    // var shoppingCartItem = document.querySelector('.shopping-cart-page .item');
+    // var shoppingCartItemHeight = $window.getComputedStyle(shoppingCartItem, null).getPropertyValue('height');
+    // shoppingCartFooter.style.transform = 'translateY(-'+shoppingCartItemHeight+')!important';
+    // var shoppingCartFooterJQ = angular.element(document.querySelector('.shopping-cart-page .items-footer'));
+    // shoppingCartFooterJQ.addClass('shopping-cart-footer-animate');
+    // $timeout(function(){
+    //   shoppingCartFooterJQ.removeClass('shopping-cart-footer-animate');
+    // },1000)
+
+    var keys = Object.keys($scope.shoppingCartItems);
+    delete $scope.shoppingCartItems[keys[i]];
+    firebaseShoppingCart.set($scope.shoppingCartItems);
+  }
+}])

app/controllers/appRootController.js

@@ -1,4 +1,4 @@
-app.controller('AppRootController',['$scope','$window','$timeout','$location',function($scope,$window,$timeout,$location){
+app.controller('AppRootController',['$scope','$window','$timeout','$location','$firebaseAuth','$interval',function($scope,$window,$timeout,$location,$firebaseAuth,$interval){
   var window = angular.element($window);
   $scope.load = function(){
     $timeout(function(){
@@ -22,9 +22,35 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location',fu
 
   $scope.selectedNumber = 0;
   $scope.meals = {};
-  var ref = firebase.database().ref().child('meals');
+  if(firebase.auth().currentUser){
+    $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
+  } else{
+    $scope.ref = firebase.database().ref().child('meals');
+  }
+  $interval(function(){
+    if(firebase.auth().currentUser){
+      $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
+      $scope.isUserSigned = true;
+    } else{
+      $scope.ref = firebase.database().ref().child('meals');
+      $scope.isUserSigned = false;
+    }
+    $scope.ref.on('value', snap => {
+      $timeout(function(){
+        var selectedNumber = 0;
+        angular.forEach(snap.val(),function(el){
+          if(el.isSelected === true){
+            selectedNumber++;
+          }
+        })
+        $scope.selectedNumber = selectedNumber;
+      })
+      $scope.meals = snap.val();
+    })
+  },1000)
+  // var ref = firebase.database().ref().child('meals');
   $scope.selectedNumber = 0;
-  ref.on('value', snap => {
+  $scope.ref.on('value', snap => {
     $timeout(function(){
       var selectedNumber = 0;
       angular.forEach(snap.val(),function(el){
@@ -37,16 +63,24 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location',fu
     $scope.meals = snap.val();
   })
   $scope.openSelectedMeals = function(){
-    var selectedMeals = angular.element(document.querySelector('.selected-meals'));
-    var appRoot = angular.element(document.querySelector('.app-root'));
-    var overlay2 = angular.element(document.querySelector('.overlay2'));
-    // selectedMeals.css({'transform': 'translateX(0)'})
-    appRoot.css({'transform': 'translateX(-281px)'});
-    overlay2.css({'pointer-events': 'auto','opacity':'1'});
-    overlay2.on('click',function(){
-      overlay2.css({'pointer-events': 'none','opacity':'0'});
-      appRoot.css({'transform': 'translateX(0px)'});
-    })
+    if(firebase.auth().currentUser){
+      var selectedMeals = angular.element(document.querySelector('.selected-meals'));
+      var appRoot = angular.element(document.querySelector('.app-root'));
+      var overlay2 = angular.element(document.querySelector('.overlay2'));
+      // selectedMeals.css({'transform': 'translateX(0)'})
+      appRoot.css({'transform': 'translateX(-281px)'});
+      overlay2.css({'pointer-events': 'auto','opacity':'1'});
+      overlay2.on('click',function(){
+        overlay2.css({'pointer-events': 'none','opacity':'0'});
+        appRoot.css({'transform': 'translateX(0px)'});
+      })
+    } else{
+      var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+      loginPopupJQ.css('display','flex');
+      $timeout(function(){
+        loginPopupJQ.css('opacity','1');
+      },50)
+    }
   }
 
   $scope.isShowMealsBtn = function(){
@@ -56,4 +90,111 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location',fu
       return false;
     }
   }
+
+
+    if(firebase.auth().currentUser){
+      $scope.isUserSigned = true;
+    } else{
+      $scope.isUserSigned = false;
+    }
+
+
+  $scope.signOut = function(){
+    firebase.auth().signOut().then(function(success){
+      console.log('Sign out seccessfully: ',success);
+      if($location.path().indexOf('shopping-cart') > -1){
+        $window.location.assign('/');
+      }
+    }).catch(function(error){
+      console.log('Sign out error: ',error);
+    })
+  }
+
+  // login-popup
+
+  $scope.isLoginActive = true;
+
+  $scope.newUserObj = {};
+
+  $scope.createNewUser = function(){
+    firebase.auth().createUserWithEmailAndPassword($scope.newUserObj.email, $scope.newUserObj.password).then(function(success){
+      firebase.database().ref().child('users').child(success.uid).child('meals').set($scope.meals);
+
+      var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+      loginPopupJQ.css('opacity','0');
+      $timeout(function(){
+        loginPopupJQ.css('display','none');
+      },1000)
+    }).catch(function(error){
+      // $scope.emailErrorMessage = error.code.replace(/auth\//g,'');
+      $scope.passwordErrorMessage = error.message;
+    });
+  }
+
+  $scope.signInUserObj = {};
+  $scope.signInUser = function(){
+    firebase.auth().signInWithEmailAndPassword($scope.signInUserObj.email,$scope.signInUserObj.password).then(function(success){
+      console.log('Signed in successfully: ',success);
+
+      var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+      loginPopupJQ.css('opacity','0');
+      $timeout(function(){
+        loginPopupJQ.css('display','none');
+      },1000)
+
+      // refresh user meals object
+      var mealsObject = $scope.meals;
+      var mealsObjectKeys = Object.keys(mealsObject);
+      $timeout(function(){
+        var userObjectKeys = Object.keys($scope.meals);
+        var newUserMealsObject = Object.assign(mealsObject);
+        for (var i = 0; i < mealsObjectKeys.length; i++) {
+          if(userObjectKeys.indexOf(mealsObjectKeys[i]) > -1){
+            if($scope.meals[mealsObjectKeys[i]].isSelected){
+              newUserMealsObject[mealsObjectKeys[i]].isSelected = true;
+            }
+          }
+        }
+        firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals').set(newUserMealsObject);
+      },1100)
+      // refresh user meals object
+    }).catch(function(error){
+      console.log('Sign in error: ',error.message);
+    })
+  }
+
+  $scope.onPasswordInput = function(){
+    if($scope.newUserObj.password){
+      $scope.isShortPassword = $scope.newUserObj.password.length < 6 ? true : false;
+    }
+  }
+
+  $scope.cancelPopup = function(){
+    var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+    loginPopupJQ.css('opacity','0');
+    $timeout(function(){
+      loginPopupJQ.css('display','none');
+    },1000)
+  }
+
+  $scope.openPopup = function(){
+    var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+    loginPopupJQ.css('display','flex');
+    $timeout(function(){
+      loginPopupJQ.css('opacity','1');
+    },50)
+  }
+
+  console.log('current user: ',firebase.auth().currentUser ? firebase.auth().currentUser.uid : null)
+  $scope.goToShoppingCart = function(){
+    if(firebase.auth().currentUser){
+      $window.location.assign('#!/shopping-cart');
+    } else{
+      var loginPopupJQ = angular.element(document.querySelector('.login-popup'));
+      loginPopupJQ.css('display','flex');
+      $timeout(function(){
+        loginPopupJQ.css('opacity','1');
+      },50)
+    }
+  }
 }])

app/directives/navmenu.js

@@ -1,4 +1,4 @@
-app.directive('navMenu',[function(){
+app.directive('navMenu',['$interval',function($interval){
   return {
     restrict: 'E',
     scope: {
@@ -13,8 +13,19 @@ app.directive('navMenu',[function(){
         } else{
           return false;
         }
-
       }
+
+      $interval(function(){
+        if(firebase.auth().currentUser){
+          if(firebase.auth().currentUser.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'){
+            $scope.isModeratorSigned = true;
+          } else{
+            $scope.isModeratorSigned = false;
+          }
+        } else{
+          $scope.isModeratorSigned = false;
+        }
+      },1000)
     }
   }
 }])

app/directives/scroll.js

@@ -2,7 +2,7 @@ app.directive('scroll', ['$window','$timeout',function($window,$timeout) {
   return {
     restrict: 'A',
     scope: {
-      offset: '@',
+      offset: '=',
       offsetSecond: '@',
       scrollClass: '@',
       scrollClassSecond: '@',

app/directives/selectedMeals.js

@@ -1,4 +1,4 @@
-app.directive('selectedMeals',[function(){
+app.directive('selectedMeals',['$interval',function($interval){
   return {
     replace: true,
     resctrict: 'E',
@@ -7,11 +7,17 @@ app.directive('selectedMeals',[function(){
       meals: '=',
     },
     controller: function($scope){
-      var ref = firebase.database().ref().child('meals');
+      $interval(function(){
+        if(firebase.auth().currentUser){
+          $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
+        }
+      },1000)
       $scope.unselect = function(i){
-        var keys = Object.keys($scope.meals);
-        $scope.meals[keys[i]].isSelected = false;
-        ref.child(keys[i]).set($scope.meals[keys[i]]);
+        if(firebase.auth().currentUser){
+          var keys = Object.keys($scope.meals);
+          $scope.meals[keys[i]].isSelected = false;
+          $scope.ref.child(keys[i]).set($scope.meals[keys[i]]);
+        }
       }
     }
   }

app/views/add-item-page.html

@@ -50,3 +50,4 @@
     </form>
   </div>
 </div>
+<footer></footer>

app/views/app-root.html

@@ -12,6 +12,49 @@
       <span>{{selectedNumber}}</span>
       <span class="selected-meals-tip">BAG</span>
     </div>
+    <a ng-click="goToShoppingCart()" class="shopping-cart-icon">
+      <span class="fa fa-shopping-cart"></span>
+    </a>
+    <div ng-if="!isUserSigned" class="login-btn" ng-click="openPopup()">
+      <span class="fa fa-sign-in"></span>
+      Login
+    </div>
+    <div ng-if="isUserSigned" class="sign-out-btn" ng-click="signOut()">
+      <span class="fa fa-sign-in"></span>
+      Sign out
+    </div>
+    <div class="login-popup">
+      <div class="cancel" ng-click="cancelPopup()">
+        <span class="fa fa-times"></span>
+      </div>
+      <div class="login-popup-wrapper">
+        <div class="btns">
+          <button type="button" ng-class="{'btn-active': isLoginActive}" ng-click="isLoginActive = true">login</button>
+          <button type="button" ng-class="{'btn-active': !isLoginActive}" ng-click="isLoginActive = false">register</button>
+        </div>
+        <div class="content">
+          <div class="login" ng-if="isLoginActive">
+            <form ng-submit="signInUser()" novalidate name="loginForm">
+              <input type="email" placeholder="Email" ng-model="signInUserObj.email" ng-required="true" name="email">
+              <span ng-if="loginForm.email.$invalid && loginForm.email.$touched">Enter a valid email</span>
+              <input type="password" placeholder="Password" ng-model="signInUserObj.password" ng-required="true" name="password">
+              <input type="submit" value="login">
+            </form>
+          </div>
+          <div class="register" ng-if="!isLoginActive">
+            <form ng-submit="createNewUser()" novalidate name="registerForm">
+              <input type="email" placeholder="Email" ng-model="newUserObj.email" ng-required="true" name="email">
+              <span ng-if="registerForm.email.$invalid && registerForm.email.$touched">Enter a valid email</span>
+              <input ng-change="onPasswordInput()" ng-class="{'invalid': passwordErrorMessage && isShortPassword}" type="password" placeholder="Create a password" ng-model="newUserObj.password" name="password" ng-required="true">
+              <span ng-if="passwordErrorMessage && isShortPassword">{{passwordErrorMessage}}</span>
+              <!-- <input type="password" placeholder="Confirm your password">
+              <input type="text" placeholder="Your phone number"> -->
+              <input type="submit" value="register">
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- Fixed elements -->
     <i class="fa fa-bars" ng-click="toggleMenu()"></i>
     <div class="logo">

app/views/main-slider.html

@@ -3,6 +3,9 @@
   <div class="main-slider-back-overlay">
     <img ng-src="{{slides[slides.length - 1]}}">
   </div>
+  <div class="main-slider-back-overlay2">
+    <img ng-src="{{slides[0]}}">
+  </div>
   <div class="main-slider-content">
     <div class="main-slider-text">
       <p>DELICIOUS HEALTHY FOOD DELIVERED RIGHT TO YOUR DOOR</p>

app/views/nav-menu.html

@@ -7,7 +7,7 @@
     <li ng-click="toggleMenu()"><a href="#">Delivery</a></li>
     <li ng-click="toggleMenu()"><a href="#">About us</a></li>
     <li ng-click="toggleMenu()"><a href="#">Contacts</a></li>
-    <li ng-class="{'active-link': isActive('/add-item')}" ng-click="toggleMenu()"><a href="#!/add-item">Add item</a></li>
+    <li ng-if="isModeratorSigned" ng-class="{'active-link': isActive('/add-item')}" ng-click="toggleMenu()"><a href="#!/add-item">Add item</a></li>
   </ul>
   <div class="nav-menu-icons-wrapper">
     <div class="nav-menu-icon">

app/views/ready-menu-page.html

@@ -1,4 +1,4 @@
-<div class="ready-menu-page">
+<div class="ready-menu-page" ng-class="{'ready-menu-page-leave-animation': isLeaveAnimateClass}">
   <div class="ready-menu-page-wrapper">
     <div class="read-menu-title">
       <h1>Pick your perfect diet</h1>
@@ -17,7 +17,7 @@
             weight loss
           </div>
           <div class="item-details-btn">
-            <a href="#!/ready-menu-loss">more details</a>
+            <a ng-click="isLeaveAnimate('#!/ready-menu-loss')">more details</a>
           </div>
         </div>
       </div>
@@ -34,7 +34,7 @@
             weight gain
           </div>
           <div class="item-details-btn">
-            <a href="#!/ready-menu-gain">more details</a>
+            <a ng-click="isLeaveAnimate('#!/ready-menu-gain')">more details</a>
           </div>
         </div>
       </div>
@@ -51,7 +51,7 @@
             balanced diet
           </div>
           <div class="item-details-btn">
-            <a href="#!/ready-menu-balance">more details</a>
+            <a ng-click="isLeaveAnimate('#!/ready-menu-balance')">more details</a>
           </div>
         </div>
       </div>

app/views/ready-menu-second.html

@@ -1,4 +1,4 @@
-<div class="ready-menu-second" ng-controller="ReadyMenuSecondController">
+<div class="ready-menu-second" ng-init="onInit()" ng-controller="ReadyMenuSecondController">
   <div class="ready-menu-second-wrapper">
     <div class="item" ng-repeat="diet in diets" ng-if="diet.dietType == filterBy">
       <div class="item-img">
@@ -10,10 +10,16 @@
         </div>
         <div class="item-center">
           <div class="item-price">
-            {{diet.price}} USD per week
+            {{diet.price * +weekCount}} USD
+            <select ng-model="weekCount">
+              <option value="1" ng-selected="true">1 week</option>
+              <option value="2">2 week</option>
+              <option value="3">3 week</option>
+              <option value="4">4 week</option>
+            </select>
           </div>
           <div class="item-button">
-            <button type="button">Order</button>
+            <button type="button" ng-click="addToCart(diet, diet.price, +weekCount)">Order</button>
           </div>
         </div>
         <div class="item-description">

app/views/shopping-cart-page.html

@@ -0,0 +1,42 @@
+<div class="shopping-cart-page" ng-controller="ShoppingCartPageController">
+  <div class="title">
+    <h1>YOUR CART</h1>
+  </div>
+  <div class="items-wrapper-header">
+    <div class="product">
+      Product
+    </div>
+    <div class="duration">
+      Duration
+    </div>
+    <div class="price">
+      Price
+    </div>
+  </div>
+  <div class="items-wrapper">
+    <div class="item" ng-repeat="item in shoppingCartItems">
+      <div class="item-img">
+        <img ng-src="{{item.imageUrl}}">
+      </div>
+      <div class="item-title">
+        <h3>{{item.title}}</h3>
+        <button ng-click="removeItem($index)" type="button">Remove</button>
+      </div>
+      <div class="item-duration">
+        {{item.weekCount ? item.weekCount + ' weeks': 1 + ' week'}}
+      </div>
+      <div class="item-price">
+        {{item.overallPrice}} USD
+      </div>
+    </div>
+  </div>
+  <div class="items-footer">
+    <div class="total-price">
+        Total {{totalPrice()}} USD
+    </div>
+    <div class="btns">
+      <button type="button"><a href="#">continue shopping</a></button>
+      <button type="button">check out</button>
+    </div>
+  </div>
+</div>

content/css/styles.css

@@ -19,6 +19,7 @@ body{
   font-family: "Helvetica Neue", Arial, sans-serif;
   margin: 0;
   overflow-x: hidden;
+  background-color: #F1F1F5;
 }
 
 h1,h2,h3{
@@ -127,14 +128,45 @@ main.ng-enter.ng-enter-active .meal-item {
   transform: translateY(0);
 }
 
-/* main.ng-leave .ready-menu-page {
+main.ng-enter .ready-menu-second {
   transition: all 1s ease;
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+main.ng-enter.ng-enter-active .ready-menu-second {
   transform: translateY(0);
+  opacity: 1;
 }
 
-main.ng-leave.ng-leave-active .ready-menu-page {
-  transform: translateY(-100%);
-} */
+.ready-menu-page-leave-animation {
+  animation: readyMenuLeave 1s ease both;
+  z-index: 100;
+}
+
+@keyframes readyMenuLeave {
+  0% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+main.ng-enter .shopping-cart-page .item{
+  animation: shoppingCartItemsAnimation 1s ease;
+}
+
+@keyframes shoppingCartItemsAnimation {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 /* header-line */
 .header-line {
@@ -142,7 +174,7 @@ main.ng-leave.ng-leave-active .ready-menu-page {
   position: -webkit-sticky;position: sticky;
   top: 0;
   width: 100%;
-  height: 50px;
+  height: 8vh;
   background-color: #FFF;
   border-bottom: 1px solid rgb(222, 223, 224);
 }
@@ -172,6 +204,150 @@ main.ng-leave.ng-leave-active .ready-menu-page {
   width: 80%;
   display: inline-block;
 }
+
+.shopping-cart-icon {
+  position: absolute;
+  right: 30px;
+  top: 13px;
+  font-size: 20px;
+  font-family: "AvenirNextLTPro-Demi";
+  letter-spacing: 0.5px;
+  cursor: pointer;
+}
+
+.shopping-cart-icon span{
+  font-size: 26px;
+  color: #1D1D1F;
+}
+
+.shopping-cart-icon span.animate {
+  animation: shoppingCartIconAnimation 0.5s ease;
+}
+
+@keyframes shoppingCartIconAnimation {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.login-btn, .sign-out-btn {
+  position: absolute;
+  right: 80px;
+  top: 13px;
+  font-size: 20px;
+  font-family: "AvenirNextLTPro-Demi";
+  letter-spacing: 0.5px;
+  color: #1D1D1F;
+  cursor: pointer;
+}
+
+.login-btn {
+  right: 92px;
+}
+
+.login-btn span, .sign-out-btn span{
+  font-size: 25px;
+  position: relative;
+  top: 2px;
+}
+
+.login-popup {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  background: rgba(29, 29, 31,.7);
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: all 0.5s ease;
+  z-index: 3;
+}
+
+.login-popup .cancel {
+  position: absolute;
+  top: 5vh;
+  right: 5%;
+  color: rgba(241, 241, 245,1);
+  font-size: 35px;
+  cursor: pointer;
+}
+
+.login-popup-wrapper {
+  width: 540px;
+  background-color: #fff;
+}
+
+.login-popup .btns {
+  display: flex;
+}
+
+.login-popup .btns button {
+  width: 50%;
+  background: rgb(241, 241, 245);
+  border: none;
+  font-size: 23px;
+  padding: 25px 0;
+  text-transform: uppercase;
+  cursor: pointer;
+  outline: none;
+  color: #777;
+  font-family: "AvenirNextLTPro-Demi";
+  letter-spacing: 0.5px;
+  font-weight: normal;
+}
+
+.login-popup .btns .btn-active {
+  background-color: #fff;
+  color: #1D1D1F;
+}
+
+.login-popup .content {
+  padding: 50px;
+  text-align: center;
+}
+
+.login-popup .content input{
+  width: 100%;
+  height: 45px;
+  margin: 13px 0;
+  padding-left: 10px;
+  background: rgb(241, 241, 245);
+  border: none;
+  font-size: 20px;
+  box-shadow: inset 0 0 4px #cacaca;
+  outline: none;
+}
+
+.login-popup .content span {
+  color: red;
+  opacity: 0.7;
+  font-family: "Muli";
+}
+
+.login-popup .content input[type="submit"]{
+  background: rgba(29, 29, 31,.9);
+  color: #fff;
+  margin-bottom: 0;
+  font-family: "AvenirNextLTPro-Demi";
+  text-transform: capitalize;
+  height: 50px;
+  cursor: pointer;
+}
+
+.login-popup .register input.ng-touched.ng-invalid {
+  border: 1px solid rgba(255, 155, 155,1);
+}
+
+.login-popup .register input.invalid {
+  border: 1px solid rgba(255, 155, 155,1);
+}
 /* header-line */
 
 
@@ -305,6 +481,14 @@ main.ng-leave.ng-leave-active .ready-menu-page {
   transition: all 3s ease;
 }
 
+.main-slider-back-overlay2 {
+  z-index: -2;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  opacity: 1;
+}
+
 .main-slider img {
   max-width: 100%;
 }
@@ -1107,8 +1291,8 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 
 .selected-meals-btn {
   position: absolute;
-  right: 20px;
-  top: 10px;
+  right: 210px;
+  top: 11px;
   z-index: 2;
   width: 31px;
   height: 31px;
@@ -1166,7 +1350,7 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 }
 
 .selected-meals::-webkit-scrollbar {
-  width: 0;
+  width: 0!important;
 }
 
 .selected-meals .selected-meal-img {
@@ -1246,6 +1430,7 @@ main.ng-leave.ng-leave-active .ready-menu-page {
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 3px;
+  text-transform: capitalize;
 }
 
 .selected-meals-type:first-of-type {
@@ -1382,6 +1567,7 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 .ready-menu-page {
   background: rgba(29, 29, 31,1);
   border-bottom: 1px solid #1D1D1F;
+  min-height: 92vh;
 }
 
 .ready-menu-page-wrapper {
@@ -1529,9 +1715,10 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 
 .ready-menu-second .item {
   display: flex;
-  background: #FCFCFE;
-  box-shadow: 0 0 22px #cacaca;
+  /* background: #FCFCFE;
+  box-shadow: 0 0 22px #cacaca; */
   margin: 100px 0;
+  perspective: 2000px;
 }
 
 .ready-menu-second .item:first-child {
@@ -1544,8 +1731,16 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 
 .ready-menu-second .item-img {
   width: 50%;
+  box-shadow: 0 0 22px #cacaca;
+  transform-origin: 100% 50%;
+  transform: rotateY(90deg);
+  transition: all 1s ease;
 }
 
+/* .ready-menu-second .item:nth-child(1) .item-img{
+  transform: rotateY(0deg);
+} */
+
 .ready-menu-second .item-img img{
   width: 100%;
   margin-bottom: -4px;
@@ -1554,8 +1749,17 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 .ready-menu-second .item-content {
   width: 50%;
   padding: 50px;
+  background: #FCFCFE;
+  box-shadow: 0 0 22px #cacaca;
+  transform-origin: 0% 50%;
+  transform: rotateY(-90deg);
+  transition: all 1s ease;
 }
 
+/* .ready-menu-second .item:nth-child(1) .item-content {
+  transform: rotateY(0deg);
+} */
+
 .ready-menu-second .item-title h1{
   font-weight: normal;
 }
@@ -1568,8 +1772,21 @@ main.ng-leave.ng-leave-active .ready-menu-page {
 }
 
 .ready-menu-second .item-price {
-  width: 50%;
-  font-size: 25px;
+  width: 75%;
+  font-size: 27px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ready-menu-second .item-price select{
+  width: 101px;
+  height: 43px;
+  padding: 10px;
+  font-size: 17px;
+  outline: none;
+  border: 1px solid #000;
+  font-family: 'Muli',sans-serif;
 }
 
 .ready-menu-second .item-button {
@@ -1581,8 +1798,9 @@ main.ng-leave.ng-leave-active .ready-menu-page {
   padding: 10px 25px;
   border: none;
   background: rgba(29, 29, 31,.85);
-  color: #F1F1F5;
+  color: #fff;
   cursor: pointer;
+  outline: none;
 }
 
 .ready-menu-second .item-description{
@@ -1690,4 +1908,182 @@ main.ng-leave.ng-leave-active .ready-menu-page {
   font-size: 14px;
   color: #222;
 }
+
+
+
+.ready-menu-second-scroll-class .item-img, .ready-menu-second-scroll-class .item-content {
+  transform: rotateY(0deg);
+}
 /* ready-menu-second */
+
+/* shopping-cart-page */
+.shopping-cart-page {
+  padding-bottom: 50px;
+}
+
+.shopping-cart-page .title h1 {
+  text-align: center;
+  margin: 50px 0;
+  font-family: "AvenirNextLTPro-Demi";
+  color: #1D1D1F;
+  font-weight: 200;
+  color: #555;
+}
+
+.shopping-cart-page .items-wrapper-header {
+  width: 1170px;
+  margin: 0 auto;
+  background: #FCFCFE;
+  display: flex;
+  padding: 45px 50px 30px;
+  border-bottom: 1px solid #ccc;
+  font-family: "AvenirNextLTPro-Demi";
+  color: #1D1D1F;
+  box-shadow: 0 0px 15px rgba(202, 202, 202,1);
+  font-size: 18px;
+}
+
+.shopping-cart-page .items-wrapper-header .product{
+  width: 60%;
+  text-align: left;
+}
+
+.shopping-cart-page .items-wrapper-header .duration{
+  width: 20%;
+  text-align: center;
+}
+
+.shopping-cart-page .items-wrapper-header .price{
+  width: 20%;
+  text-align: right;
+}
+
+.shopping-cart-page .items-wrapper {
+  width: 1170px;
+  margin: 0 auto;
+  box-shadow: 0 4px 15px rgba(202, 202, 202,0.9);
+}
+
+.shopping-cart-page .item {
+  background: #FCFCFE;
+  display: flex;
+  padding: 40px;
+  border-bottom: 1px solid #ccc;
+  font-family: "Muli";
+}
+
+.shopping-cart-page .item.ng-leave {
+  animation: shoppingCartItemLeave 1s ease;
+}
+
+@keyframes shoppingCartItemLeave {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .1;
+  }
+}
+
+.shopping-cart-page .item-img {
+  width: 20%;
+}
+
+.shopping-cart-page .item-img img{
+  width: 100%;
+}
+
+.shopping-cart-page .item-title{
+  width: 40%;
+  padding: 10px 30px;
+}
+
+.shopping-cart-page .item-title h3{
+  margin-bottom: 80px;
+  font-weight: normal;
+}
+
+.shopping-cart-page .item-title button{
+  font-size: 18px;
+  text-transform: uppercase;
+  background: none;
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  color: #1D1D1F;
+  font-weight: normal;
+  outline: none;
+  cursor: pointer;
+}
+
+.shopping-cart-page .item-duration {
+  width: 20%;
+  padding: 10px 0;
+  font-size: 20px;
+  text-align: center;
+}
+
+.shopping-cart-page .item-price {
+  width: 20%;
+  padding: 10px 0;
+  font-size: 20px;
+  text-align: right;
+}
+
+.shopping-cart-page .items-footer {
+  width: 1170px;
+  margin: 0 auto;
+  background: #FCFCFE;
+  transition: all 1s ease;
+}
+
+.shopping-cart-page .items-footer .total-price {
+  padding: 30px;
+  text-align: right;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: "Muli";
+}
+
+.shopping-cart-page .items-footer .btns {
+  padding: 30px;
+  padding-top: 20px;
+  text-align: right;
+}
+
+.shopping-cart-page .items-footer .btns button {
+  font-size: 18px;
+  text-transform: uppercase;
+  background: none;
+  border: 1px solid #ccc;
+  font-weight: normal;
+  border-radius: 2px;
+  margin-left: 5px;
+}
+
+.shopping-cart-page .items-footer .btns button a{
+  display: block;
+  text-decoration: none;
+  color: #1D1D1F;
+  padding: 8px 13px;
+}
+
+.shopping-cart-page .items-footer .btns button:nth-child(2) {
+  background: #1D1D1F;
+  color: #FCFCFE;
+  padding: 8px 13px;
+  border: none;
+}
+
+/* .shopping-cart-page .shopping-cart-footer-animate {
+  animation: shoppingCartFooter 1s ease;
+}
+
+@keyframes shoppingCartFooter {
+  0%{
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+} */
+/* shopping-cart-page */

index.html

@@ -36,6 +36,7 @@
     <script src="./app/directives/selectedMeals.js"></script>
     <script src="./app/controllers/ReadyMenuController.js"></script>
     <script src="./app/controllers/ReadyMenuSecondController.js"></script>
+    <script src="./app/controllers/ShoppingCartPageController.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>