added ready-menu-page

app/app.js

@@ -13,6 +13,21 @@ app.config(['$routeProvider', function($routeProvider){
     .when('/add-item',{
       templateUrl: './app/views/add-item-page.html',
       controller: 'AddItemPageController'
+    })
+    .when('/ready-menu',{
+      templateUrl: './app/views/ready-menu-page.html',
+      controller: 'ReadyMenuController'
+    }).when('/ready-menu-loss',{
+      templateUrl: './app/views/ready-menu-second.html',
+      controller: 'ReadyMenuSecondController'
+    })
+    .when('/ready-menu-gain',{
+      templateUrl: './app/views/ready-menu-second.html',
+      controller: 'ReadyMenuSecondController'
+    })
+    .when('/ready-menu-balance',{
+      templateUrl: './app/views/ready-menu-second.html',
+      controller: 'ReadyMenuSecondController'
     }).otherwise({
       redirectTo: '/'
     })

app/controllers/AddItemPageController.js

@@ -7,9 +7,14 @@ app.controller('AddItemPageController',['$scope',function($scope){
     imageUrl: '',
     price: '',
     isSelected: false
-  }
+  };
+
+  $scope.resObj2 = {};
+
+  $scope.isFirstTab = true;
 
   var databaseMeals = firebase.database().ref().child('meals');
+  var databaseDiets = firebase.database().ref().child('diets');
 
   //functions
 
@@ -24,5 +29,7 @@ app.controller('AddItemPageController',['$scope',function($scope){
     databaseMeals.push().set($scope.resObj);
   }
 
-
+  $scope.sendDiet = function(){
+    databaseDiets.push().set($scope.resObj2);
+  }
 }])

app/controllers/ReadyMenuController.js

@@ -0,0 +1,3 @@
+app.controller('ReadyMenuController', [function(){
+  
+}])

app/controllers/ReadyMenuSecondController.js

@@ -0,0 +1,20 @@
+app.controller('ReadyMenuSecondController',['$scope','$location','$timeout',function($scope,$location,$timeout){
+  $scope.currentPath = $location.path();
+
+  if($scope.currentPath.indexOf('loss') > -1){
+    $scope.filterBy = 'loss';
+  } else if($scope.currentPath.indexOf('gain') > -1){
+    $scope.filterBy = 'gain';
+  } else if($scope.currentPath.indexOf('balance') > -1){
+    $scope.filterBy = 'balance';
+  }
+
+  var firebaseDiets = firebase.database().ref().child('diets');
+  $scope.diets = {};
+  firebaseDiets.on('value', snap => {
+    $timeout(function(){
+      $scope.diets = snap.val();
+    })
+
+  })
+}])

app/controllers/appRootController.js

@@ -4,11 +4,11 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location',fu
     $timeout(function(){
       var preloader = angular.element(document.querySelector('.preload-screen'));
       preloader.css('opacity','0');
-    },2700)
+    },1700)
     $timeout(function(){
       var preloader = angular.element(document.querySelector('.preload-screen'));
       preloader.css('display','none');
-    },3700)
+    },2700)
   }
 
   $scope.isOpenMenu = false;

app/views/add-item-page.html

@@ -1,6 +1,14 @@
 <div class="add-item-page" ng-controller="AddItemPageController">
   <div class="form-wrapper">
-    <form ng-submit='sendMeal()'>
+    <div class="form-tabs">
+      <div class="form-tab1" ng-class="{'form-tab-active': isFirstTab}" ng-click="isFirstTab = true">
+        Add select menu item
+      </div>
+      <div class="form-tab2" ng-class="{'form-tab-active': !isFirstTab}" ng-click="isFirstTab = false">
+        Add ready menu item
+      </div>
+    </div>
+    <form ng-if="isFirstTab" ng-submit='sendMeal()'>
       <label for="meal-name"><h2>Enter the name of the meal:</h2></label>
       <input type="text" id="meal-name" ng-model="resObj.mealName">
       <h2>Enter ingredients:</h2>
@@ -21,5 +29,24 @@
       <input type="text" ng-model="resObj.price" placeholder="price">
       <button type="submit">Send</button>
     </form>
+    <form ng-if="!isFirstTab" ng-submit='sendDiet()'>
+      <label for="title"><h2>Enter the title:</h2></label>
+      <input type="text" id="meal-name" ng-model="resObj2.title">
+      <label for="description"><h2>Enter the description:</h2></label>
+      <textarea id="description" ng-model="resObj2.description"></textarea>
+      <select ng-model="resObj2.dietType">
+        <option value="" disabled selected>Select diet type</option>
+        <option value="loss">Weight loss</option>
+        <option value="gain">Weight gain</option>
+        <option value="balance">Balanced diet</option>
+      </select>
+      <input type="text" placeholder="image url" ng-model="resObj2.imageUrl">
+      <input type="text" placeholder="price" ng-model="resObj2.price">
+      <input type="text" ng-model="resObj2.calories" placeholder="calories">
+      <input type="text" ng-model="resObj2.protein" placeholder="protein">
+      <input type="text" ng-model="resObj2.fats" placeholder="fats">
+      <input type="text" ng-model="resObj2.carbs" placeholder="carbs">
+      <button type="submit">Send</button>
+    </form>
   </div>
 </div>

app/views/nav-menu.html

@@ -3,7 +3,7 @@
   <ul>
     <li ng-class="{'active-link': isActive('/')}" ng-click="toggleMenu()"><a href="#!/">Main page</a></li>
     <li ng-class="{'active-link': isActive('/select-menu')}" ng-click="toggleMenu()"><a href="#!/select-menu">Customize menu</a></li>
-    <li ng-click="toggleMenu()"><a href="#">Ready menus</a></li>
+    <li ng-class="{'active-link': isActive('/ready-menu')}" ng-click="toggleMenu()"><a href="#!/ready-menu">Ready menus</a></li>
     <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>

app/views/ready-menu-page.html

@@ -0,0 +1,60 @@
+<div class="ready-menu-page">
+  <div class="ready-menu-page-wrapper">
+    <div class="read-menu-title">
+      <h1>Pick your perfect diet</h1>
+    </div>
+    <div class="items-wrapper">
+      <div class="item">
+        <div class="img-wrapper">
+          <img src="content/images/ready-menu/item-1.jpg">
+          <div class="img-overlay"></div>
+        </div>
+        <div class="item-content">
+          <div class="item-icon">
+
+          </div>
+          <div class="item-name">
+            weight loss
+          </div>
+          <div class="item-details-btn">
+            <a href="#!/ready-menu-loss">more details</a>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="img-wrapper">
+          <img src="content/images/ready-menu/item-2.jpg">
+          <div class="img-overlay"></div>
+        </div>
+        <div class="item-content">
+          <div class="item-icon">
+
+          </div>
+          <div class="item-name">
+            weight gain
+          </div>
+          <div class="item-details-btn">
+            <a href="#!/ready-menu-gain">more details</a>
+          </div>
+        </div>
+      </div>
+      <div class="item">
+        <div class="img-wrapper">
+          <img src="content/images/ready-menu/item-3.jpg">
+          <div class="img-overlay"></div>
+        </div>
+        <div class="item-content">
+          <div class="item-icon">
+
+          </div>
+          <div class="item-name">
+            balanced diet
+          </div>
+          <div class="item-details-btn">
+            <a href="#!/ready-menu-balance">more details</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/ready-menu-second.html

@@ -0,0 +1,42 @@
+<div class="ready-menu-second" 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">
+        <img ng-src="{{diet.imageUrl}}">
+      </div>
+      <div class="item-content">
+        <div class="item-title">
+          <h1>{{diet.title}}</h1>
+        </div>
+        <div class="item-center">
+          <div class="item-price">
+            {{diet.price}} USD per week
+          </div>
+          <div class="item-button">
+            <button type="button">Order</button>
+          </div>
+        </div>
+        <div class="item-description">
+          {{diet.description}}
+        </div>
+        <div class="item-numbers">
+          <div class="item-numbers-text">
+            On an average per day:
+          </div>
+          <div class="item-numbers-calories">
+            {{diet.calories}}
+          </div>
+          <div class="item-numbers-proteins">
+            {{diet.protein}}
+          </div>
+          <div class="item-numbers-fats">
+            {{diet.fats}}
+          </div>
+          <div class="item-numbers-carbs">
+            {{diet.carbs}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

app/views/select-menu-page.html

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

content/css/styles.css

@@ -1,6 +1,7 @@
 /* fonts */
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
 @import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
+@import url('https://fonts.googleapis.com/css?family=Muli');
 
 @font-face {
   font-family: "Helvetica Neue";
@@ -126,6 +127,15 @@ main.ng-enter.ng-enter-active .meal-item {
   transform: translateY(0);
 }
 
+/* main.ng-leave .ready-menu-page {
+  transition: all 1s ease;
+  transform: translateY(0);
+}
+
+main.ng-leave.ng-leave-active .ready-menu-page {
+  transform: translateY(-100%);
+} */
+
 /* header-line */
 .header-line {
   z-index: 2;
@@ -847,6 +857,7 @@ main.ng-enter.ng-enter-active .meal-item {
 .select-menu-page {
   /* background: rgb(252, 252, 254); */
   background: rgb(241, 241, 245);
+  min-height: 100vh;
 }
 
 .select-menu-page .search {
@@ -1269,6 +1280,40 @@ main.ng-enter.ng-enter-active .meal-item {
   padding: 70px 0;
 }
 
+.add-item-page .form-tabs {
+  font-size: 16px;
+  font-family: 'Roboto';
+}
+
+.add-item-page .form-tab1 {
+  display: inline-block;
+  width: 200px;
+  text-align: center;
+  background: rgba(29, 29, 31,0.7);
+  color: rgb(252, 252, 254);
+  padding: 15px 0;
+  box-shadow: 0px -5px 10px rgba(202, 202, 202, .4);
+  cursor: pointer;
+
+}
+
+.add-item-page .form-tab2 {
+  display: inline-block;
+  width: 200px;
+  text-align: center;
+  background: rgba(29, 29, 31,0.7);
+  color: rgb(252, 252, 254);
+  padding: 15px 0;
+  margin-left: 5px;
+  box-shadow: 0px -5px 10px rgba(202, 202, 202, .4);
+  cursor: pointer;
+}
+
+.add-item-page .form-tab-active {
+  background: #FCFCFC;
+  color: #000;
+}
+
 .add-item-page form {
   padding: 50px;
   background: #FCFCFE;
@@ -1282,7 +1327,7 @@ main.ng-enter.ng-enter-active .meal-item {
   color: #1D1D1F;
 }
 
-.add-item-page form input, .add-item-page form select {
+.add-item-page form input, .add-item-page form select, .add-item-page form textarea {
   width: 80%;
   margin: 15px 0;
   background-color: #F1F1F5;
@@ -1295,6 +1340,11 @@ main.ng-enter.ng-enter-active .meal-item {
   outline: none;
 }
 
+.add-item-page form textarea {
+  resize: vertical;
+  height: 70px;
+}
+
 .add-item-page form .ingredient-wrapper input {
   width: 80%;
   margin-left: 5%;
@@ -1327,3 +1377,317 @@ main.ng-enter.ng-enter-active .meal-item {
   outline: none;
 }
 /* add-item-page */
+
+/* ready-menu-page */
+.ready-menu-page {
+  background: rgba(29, 29, 31,1);
+  border-bottom: 1px solid #1D1D1F;
+}
+
+.ready-menu-page-wrapper {
+  text-align: center;
+  position: relative;
+}
+
+.ready-menu-page .read-menu-title {
+  position: absolute;
+  z-index: 1;
+  text-align: center;
+  width: 100%;
+}
+
+.ready-menu-page .read-menu-title h1 {
+  color: #F1F1F5;
+  display: inline-block;
+  margin-top: 40px;
+  font-size: 40px;
+  font-weight: normal;
+}
+
+.ready-menu-page .read-menu-title h1::after {
+  content: '';
+  position: absolute;
+  top: 110px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: 1px;
+  width: 120px;
+  background: #F1F1F5;
+}
+
+.ready-menu-page .items-wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.ready-menu-page .item {
+  width: 30%;
+  color: #F1F1F5;
+  position: relative;
+}
+
+.ready-menu-page .img-wrapper .img-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(29, 29, 31,.9);
+  transition: all 1s ease;
+}
+
+.ready-menu-page .img-wrapper img {
+  height: 92vh;
+}
+
+.ready-menu-page .item:hover .img-overlay {
+  background: rgba(29, 29, 31,0.2);
+}
+
+.ready-menu-page .item:hover .item-details-btn {
+  background: rgba(29, 29, 31,0);
+}
+
+.ready-menu-page .item:hover .item-icon {
+  transform: scale(1.05);
+}
+
+.ready-menu-page .item-content {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.ready-menu-page .item-icon {
+  transition: all 1s ease;
+  display: inline-block;
+  margin-top: 50%;
+  background: url('../images/ready-menu/item-sprites/ico-sprite_01.png') no-repeat center;
+  width: 140px;
+  height: 140px;
+  z-index: 2;
+  border-radius: 50%;
+  background-color: #fff;
+  opacity: .85;
+}
+
+.ready-menu-page .item:nth-child(2) .item-icon {
+  background: url('../images/ready-menu/item-sprites/ico-sprite_02.png') no-repeat center;
+  background-color: #fff;
+}
+
+.ready-menu-page .item:nth-child(3) .item-icon {
+  background: url('../images/ready-menu/item-sprites/ico-sprite_03.png') no-repeat center;
+  background-color: #fff;
+}
+
+.ready-menu-page .item-name {
+  margin-top: 50px;
+  font-size: 25px;
+  text-transform: uppercase;
+}
+
+.ready-menu-page .item-details-btn {
+  display: inline-block;
+  font-size: 15px;
+  border: 1px solid #F1F1F5;
+  transition: all 1s ease;
+  text-transform: uppercase;
+  margin-top: 50px;
+  cursor: pointer;
+  background: rgba(29, 29, 31,1)
+}
+
+.ready-menu-page .item-details-btn a{
+  display: block;
+  padding: 12px 22px;
+  text-decoration: none;
+  color: #F1F1F5;
+  width: 100%;
+  height: 100%;
+}
+
+.ready-menu-page .item-details-btn:hover {
+  background: rgba(29, 29, 31,0.6)!important;
+}
+/* ready-menu-page */
+
+/* ready-menu-second */
+.ready-menu-second {
+  background: rgb(241, 241, 245);
+  padding: 100px 0;
+  min-height: 92vh;
+}
+
+.ready-menu-second-wrapper {
+  width: 1140px;
+  margin: 0 auto;
+}
+
+.ready-menu-second .item {
+  display: flex;
+  background: #FCFCFE;
+  box-shadow: 0 0 22px #cacaca;
+  margin: 100px 0;
+}
+
+.ready-menu-second .item:first-child {
+  margin-top: 0;
+}
+
+.ready-menu-second .item:last-child {
+  margin-bottom: 0;
+}
+
+.ready-menu-second .item-img {
+  width: 50%;
+}
+
+.ready-menu-second .item-img img{
+  width: 100%;
+  margin-bottom: -4px;
+}
+
+.ready-menu-second .item-content {
+  width: 50%;
+  padding: 50px;
+}
+
+.ready-menu-second .item-title h1{
+  font-weight: normal;
+}
+
+.ready-menu-second .item-center {
+  margin: 29px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ready-menu-second .item-price {
+  width: 50%;
+  font-size: 25px;
+}
+
+.ready-menu-second .item-button {
+  width: 25%;
+}
+
+.ready-menu-second .item-button button{
+  font-size: 20px;
+  padding: 10px 25px;
+  border: none;
+  background: rgba(29, 29, 31,.85);
+  color: #F1F1F5;
+  cursor: pointer;
+}
+
+.ready-menu-second .item-description{
+  font-size: 16.1px;
+  font-family: 'Muli';
+}
+
+.ready-menu-second .item-numbers {
+  font-family: 'Muli';
+  font-size: 17px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 29px;
+}
+
+.ready-menu-second .item-numbers-text {
+  width: 40%;
+}
+
+.ready-menu-second .item-numbers-calories {
+  position: relative;
+  width: 53px;
+  line-height: 51px;
+  text-align: center;
+  border: 1px solid #000;
+  border-radius: 50%;
+}
+
+.ready-menu-second .item-numbers-calories::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 50px;
+  margin: 0 auto;
+  display: block;
+  content: 'calories';
+  line-height: 30px;
+  font-size: 14px;
+  color: #222;
+}
+
+.ready-menu-second .item-numbers-proteins {
+  position: relative;
+  width: 53px;
+  line-height: 51px;
+  text-align: center;
+  border: 1px solid #000;
+  border-radius: 50%;
+}
+
+.ready-menu-second .item-numbers-proteins::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 50px;
+  margin: 0 auto;
+  display: block;
+  content: 'proteins';
+  line-height: 30px;
+  font-size: 14px;
+  color: #222;
+}
+
+.ready-menu-second .item-numbers-fats {
+  position: relative;
+  width: 53px;
+  line-height: 51px;
+  text-align: center;
+  border: 1px solid #000;
+  border-radius: 50%;
+}
+
+.ready-menu-second .item-numbers-fats::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 50px;
+  margin: 0 auto;
+  display: block;
+  content: 'fats';
+  line-height: 30px;
+  font-size: 14px;
+  color: #222;
+}
+
+.ready-menu-second .item-numbers-carbs {
+  position: relative;
+  width: 53px;
+  line-height: 51px;
+  text-align: center;
+  border: 1px solid #000;
+  border-radius: 50%;
+}
+
+.ready-menu-second .item-numbers-carbs::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 50px;
+  margin: 0 auto;
+  display: block;
+  content: 'carbs';
+  line-height: 30px;
+  font-size: 14px;
+  color: #222;
+}
+/* ready-menu-second */

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" ng-app="angularProject">
   <head>
-    <title>TheNetNinja Angular Playlist</title>
+    <title>Angular App</title>
     <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
@@ -34,6 +34,8 @@
     <script src="./app/controllers/SelectMenuPageController.js"></script>
     <script src="./app/controllers/AddItemPageController.js"></script>
     <script src="./app/directives/selectedMeals.js"></script>
+    <script src="./app/controllers/ReadyMenuController.js"></script>
+    <script src="./app/controllers/ReadyMenuSecondController.js"></script>
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>