added constructor page

app/app.js

@@ -1,4 +1,4 @@
-var app = angular.module('angularProject',['ngRoute','ngAnimate','firebase']);
+var app = angular.module('angularProject',['ngRoute','ngAnimate','firebase', 'slickCarousel','ngDragDrop']);
 
 app.config(['$routeProvider', function($routeProvider){
   $routeProvider
@@ -40,7 +40,12 @@ app.config(['$routeProvider', function($routeProvider){
     .when('/messages',{
       templateUrl: './app/views/messages-page.html',
       controller: 'MessagesPageController'
-    }).otherwise({
+    })
+    .when('/constructor',{
+      templateUrl: './app/views/constructor.html',
+      controller: 'mealsConstructor'
+    })
+    .otherwise({
       redirectTo: '/'
     })
 

app/controllers/ReadyMenuSecondController.js

@@ -84,6 +84,7 @@ app.controller('ReadyMenuSecondController',['$scope','$location','$timeout','$wi
       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(){

app/controllers/ShoppingCartPageController.js

@@ -5,6 +5,10 @@ app.controller('ShoppingCartPageController',['$scope','$window','$timeout',funct
     $scope.shoppingCartItems = snap.val();
   })
 
+  // angular.forEach($scope.shoppingCartItems, function(item,key){
+  //
+  // })
+
   // funcitons
 
   $scope.totalPrice = function(){

app/controllers/appRootController.js

@@ -31,9 +31,15 @@ app.controller('AppRootController',['$scope','$window','$timeout','$location','$
     if(firebase.auth().currentUser){
       $scope.ref = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
       $scope.isUserSigned = true;
+      if(firebase.auth().currentUser.uid == 'uRkqD9GmNxUsdgF1XtmPicDJwAz1'){
+        $scope.isModeratorSigned = true;
+      } else{
+        $scope.isModeratorSigned = false;
+      }
     } else{
       $scope.ref = firebase.database().ref().child('meals');
       $scope.isUserSigned = false;
+      $scope.isModeratorSigned = false;
     }
     $scope.ref.on('value', snap => {
       $timeout(function(){

app/controllers/mealsConstructorCtrl.js

@@ -0,0 +1,169 @@
+app.controller('mealsConstructor', ['$window','$scope','$interval',function($window,$scope, $interval) {
+  // $scope.list1 = [
+  //   {'title': 'Br_1', imageUrl:'./img/1.jpg', price: 10},{'title': 'Br_2', imageUrl:'./img/1.jpg', price: 10},
+  //   {'title': 'Br_3', imageUrl:'./img/1.jpg', price: 10},{'title': 'Br_4', imageUrl:'./img/1.jpg', price: 10}
+  // ];
+  // $scope.list2 = [
+  //   {'title': 'Lu_1', imageUrl:'./img/2.jpg', price: 10},{'title': 'Lu_2', imageUrl:'./img/2.jpg', price: 10},
+  //   {'title': 'Lu_3', imageUrl:'./img/2.jpg', price: 10},{'title': 'Lu_4', imageUrl:'./img/2.jpg', price: 10}
+  // ];
+  // $scope.list3 = [
+  //   {'title': 'Di_1', imageUrl:'./img/3.jpg', price: 10},{'title': 'Di_2', imageUrl:'./img/3.jpg', price: 10},
+  //   {'title': 'Di_3', imageUrl:'./img/3.jpg', price: 10},{'title': 'Di_4', imageUrl:'./img/3.jpg', price: 10}
+  // ];
+  // $scope.list4 = [
+  //   {'title': 'Sn_1', imageUrl:'./img/4.jpg', price: 10},{'title': 'Sn_2', imageUrl:'./img/4.jpg', price: 10},
+  //   {'title': 'Sn_3', imageUrl:'./img/4.jpg', price: 10},{'title': 'Sn_4', imageUrl:'./img/4.jpg', price: 10}
+  // ];
+  $scope.list1 = [];
+  $scope.list2 = [];
+  $scope.list3 = [];
+  $scope.list4 = [];
+
+
+
+  $scope.firebaseMeals = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals');
+  $scope.firebaseGlobalMeals = firebase.database().ref().child('meals');
+  $scope.firebaseMeals.on('value', function(snap){
+    $scope.userMeals = snap.val();
+
+    var userMealsKeys = Object.keys($scope.userMeals);
+
+
+    for (var i = 0; i < userMealsKeys.length; i++) {
+      if($scope.userMeals[userMealsKeys[i]].type == 'breakfast' && $scope.userMeals[userMealsKeys[i]].isSelected == true){
+        $scope.list1.push($scope.userMeals[userMealsKeys[i]]);
+      }
+      if($scope.userMeals[userMealsKeys[i]].type == 'lunch' && $scope.userMeals[userMealsKeys[i]].isSelected == true){
+        $scope.list2.push($scope.userMeals[userMealsKeys[i]]);
+      }
+      if($scope.userMeals[userMealsKeys[i]].type == 'dinner' && $scope.userMeals[userMealsKeys[i]].isSelected == true){
+        $scope.list3.push($scope.userMeals[userMealsKeys[i]]);
+      }
+      if($scope.userMeals[userMealsKeys[i]].type == 'snacks' && $scope.userMeals[userMealsKeys[i]].isSelected == true){
+        $scope.list4.push($scope.userMeals[userMealsKeys[i]]);
+      }
+    }
+  })
+
+
+
+
+  $scope.arrDays = [
+    {caption: 'DAY 1', day: 'day1'},
+    {caption: 'DAY 2', day: 'day2'},
+    {caption: 'DAY 3', day: 'day3'},
+    {caption: 'DAY 4', day: 'day4'},
+    {caption: 'DAY 5', day: 'day5'},
+    {caption: 'DAY 6', day: 'day6'},
+    {caption: 'DAY 7', day: 'day7'},
+  ];
+
+  //$scope.todayDay = new Date().getDate() + 1;
+  //$scope.todayMonthYear = ( new Date().getMonth() + 1 + '/' + new Date().getFullYear() );
+
+  $scope.order = {
+    day1: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+    day2: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+    day3: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+    day4: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+    day5: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+    day6: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+    day7: {
+      breakfast: [],
+      lunch: [],
+      dinner: [],
+      snacks: []
+    },
+  };
+
+  $scope.sumToBacket = 0;
+
+  $interval(function(){
+    let keyDay = ['breakfast','lunch','dinner','snacks']
+    let keyObj = Object.keys($scope.order);
+    var sum = 0;
+
+    for(let i = 0; i < keyObj.length; i++) {
+      //console.log($scope.order[keyObj[i]]);
+      for(let j=0; j < keyDay.length; j++) {
+        //console.log($scope.order[keyObj[i]][keyDay[j]]);
+        for(let l=0; l < $scope.order[keyObj[i]][keyDay[j]].length; l++) {
+          //console.log($scope.order[keyObj[i]][keyDay[j]][l]['price']);
+          sum += +$scope.order[keyObj[i]][keyDay[j]][l]['price'];
+        }
+      }
+    }
+    $scope.sumToBacket = sum;
+  },500);
+
+  $scope.deleteMeal = function(day, typeMeal,index) {
+    //console.log($scope.order[day][typeMeal][index]);
+    $scope.order[day][typeMeal].splice(index,1);
+  }
+  $scope.hideMe = function(day,typeMeal) {
+    return $scope.order[day][typeMeal].length > 0
+  };
+
+
+  $scope.sendObject = {
+    imageUrl: 'content/images/ready-menu/ready-menu-item/custom-menu-item.jpg',
+    title: 'Custom menu ',
+    weekCount: 1,
+    order: $scope.order
+  }
+  $scope.firebaseShoppingCart = firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('shoppingCart');
+  $scope.firebaseShoppingCart.on('value', function(snap){
+    $scope.shoppingCartItems = snap.val();
+    $scope.customMenuCount = 1;
+    angular.forEach($scope.shoppingCartItems, function(item,key){
+      if(item.title.indexOf('Custom menu') > -1){
+        $scope.customMenuCount++;
+      }
+    })
+  })
+
+
+  $scope.sendCustomDiet = function(){
+    $scope.sendObject.overallPrice = $scope.sumToBacket;
+    $scope.sendObject.title += $scope.customMenuCount;
+    $scope.firebaseShoppingCart.push().set(angular.copy($scope.sendObject));
+
+    $scope.firebaseGlobalMeals.on('value', function(snap){
+      $scope.globalMeals = snap.val();
+      firebase.database().ref().child('users').child(firebase.auth().currentUser.uid).child('meals').set($scope.globalMeals);
+      $window.location.assign('#!/shopping-cart');
+    })
+
+  }
+}]);

app/directives/about.js

@@ -1,16 +1,16 @@
 app.directive('about',['$document',function($document){
   var link = function(scope, element, attr){
-    var aboutItemArr = element[0].querySelectorAll('.about-item');
+    var aboutItemArr = element[0].querySelectorAll('.main-page .about-item');
     var aboutItemArrJq = angular.element(aboutItemArr);
     for (let i = 0; i < aboutItemArrJq.length; i++) {
       let aboutItemJq = angular.element(aboutItemArrJq[i]);
       aboutItemJq.on('mouseover', function(){
-        aboutItemJq.children()[0].style.transition = 'all 0.3s ease-in';
-        aboutItemJq.children()[1].style.transition = 'all 0.3s 0.3s ease-out';
+        aboutItemJq.children()[1].style.transition = 'all 0.3s ease-in';
+        aboutItemJq.children()[0].style.transition = 'all 0.3s 0.3s ease-out';
       })
       aboutItemJq.on('mouseout', function(){
-        aboutItemJq.children()[0].style.transition = 'all 0.3s 0.3s ease-out';
-        aboutItemJq.children()[1].style.transition = 'all 0.3s ease-in';
+        aboutItemJq.children()[1].style.transition = 'all 0.3s 0.3s ease-out';
+        aboutItemJq.children()[0].style.transition = 'all 0.3s ease-in';
       })
     }
   }

app/directives/aboutUs.js

@@ -0,0 +1,172 @@
+angular.module("slickCarousel", []).constant("slickCarouselConfig", {
+    method: {},
+    event: {}
+}).directive("slick", ["$timeout", "slickCarouselConfig", function(e, n) {
+    var i, t;
+    return i = ["slickGoTo", "slickNext", "slickPrev", "slickPause", "slickPlay", "slickAdd", "slickRemove", "slickFilter", "slickUnfilter", "unslick"], t = ["afterChange", "beforeChange", "breakpoint", "destroy", "edge", "init", "reInit", "setPosition", "swipe"], {
+        scope: {
+            settings: "=",
+            enabled: "@",
+            accessibility: "@",
+            adaptiveHeight: "@",
+            autoplay: "@",
+            autoplaySpeed: "@",
+            arrows: "@",
+            asNavFor: "@",
+            appendArrows: "@",
+            prevArrow: "@",
+            nextArrow: "@",
+            centerMode: "@",
+            centerPadding: "@",
+            cssEase: "@",
+            customPaging: "&",
+            dots: "@",
+            draggable: "@",
+            fade: "@",
+            focusOnSelect: "@",
+            easing: "@",
+            edgeFriction: "@",
+            infinite: "@",
+            initialSlide: "@",
+            lazyLoad: "@",
+            mobileFirst: "@",
+            pauseOnHover: "@",
+            pauseOnDotsHover: "@",
+            respondTo: "@",
+            responsive: "=?",
+            rows: "@",
+            slide: "@",
+            slidesPerRow: "@",
+            slidesToShow: "@",
+            slidesToScroll: "@",
+            speed: "@",
+            swipe: "@",
+            swipeToSlide: "@",
+            touchMove: "@",
+            touchThreshold: "@",
+            useCSS: "@",
+            variableWidth: "@",
+            vertical: "@",
+            verticalSwiping: "@",
+            rtl: "@"
+        },
+        restrict: "AE",
+        link: function(t, o, s) {
+            angular.element(o).css("display", "none");
+            var r, a, l, d, u, c;
+            return a = function() {
+                r = angular.extend(angular.copy(n), {
+                    enabled: "false" !== t.enabled,
+                    accessibility: "false" !== t.accessibility,
+                    adaptiveHeight: "true" === t.adaptiveHeight,
+                    autoplay: "true" === t.autoplay,
+                    autoplaySpeed: null != t.autoplaySpeed ? parseInt(t.autoplaySpeed, 10) : 3e3,
+                    arrows: "false" !== t.arrows,
+                    asNavFor: t.asNavFor ? t.asNavFor : void 0,
+                    appendArrows: angular.element(t.appendArrows ? t.appendArrows : o),
+                    prevArrow: t.prevArrow ? angular.element(t.prevArrow) : void 0,
+                    nextArrow: t.nextArrow ? angular.element(t.nextArrow) : void 0,
+                    centerMode: "true" === t.centerMode,
+                    centerPadding: t.centerPadding || "50px",
+                    cssEase: t.cssEase || "ease",
+                    customPaging: s.customPaging ? function(e, n) {
+                        return t.customPaging({
+                            slick: e,
+                            index: n
+                        })
+                    } : void 0,
+                    dots: "true" === t.dots,
+                    draggable: "false" !== t.draggable,
+                    fade: "true" === t.fade,
+                    focusOnSelect: "true" === t.focusOnSelect,
+                    easing: t.easing || "linear",
+                    edgeFriction: t.edgeFriction || .15,
+                    infinite: "false" !== t.infinite,
+                    initialSlide: parseInt(t.initialSlide) || 0,
+                    lazyLoad: t.lazyLoad || "ondemand",
+                    mobileFirst: "true" === t.mobileFirst,
+                    pauseOnHover: "false" !== t.pauseOnHover,
+                    pauseOnDotsHover: "true" === t.pauseOnDotsHover,
+                    respondTo: null != t.respondTo ? t.respondTo : "window",
+                    responsive: t.responsive || void 0,
+                    rows: null != t.rows ? parseInt(t.rows, 10) : 1,
+                    slide: t.slide || "",
+                    slidesPerRow: null != t.slidesPerRow ? parseInt(t.slidesPerRow, 10) : 1,
+                    slidesToShow: null != t.slidesToShow ? parseInt(t.slidesToShow, 10) : 1,
+                    slidesToScroll: null != t.slidesToScroll ? parseInt(t.slidesToScroll, 10) : 1,
+                    speed: null != t.speed ? parseInt(t.speed, 10) : 300,
+                    swipe: "false" !== t.swipe,
+                    swipeToSlide: "true" === t.swipeToSlide,
+                    touchMove: "false" !== t.touchMove,
+                    touchThreshold: t.touchThreshold ? parseInt(t.touchThreshold, 10) : 5,
+                    useCSS: "false" !== t.useCSS,
+                    variableWidth: "true" === t.variableWidth,
+                    vertical: "true" === t.vertical,
+                    verticalSwiping: "true" === t.verticalSwiping,
+                    rtl: "true" === t.rtl
+                }, t.settings)
+            }, l = function() {
+                var e = angular.element(o);
+                return e.hasClass("slick-initialized") && (e.remove("slick-list"), e.slick("unslick")), e
+            }, d = function() {
+                a();
+                var n = angular.element(o);
+                if (angular.element(o).hasClass("slick-initialized")) {
+                    if (r.enabled) return n.slick("getSlick");
+                    l()
+                } else {
+                    if (angular.element(o).css("display", "block"), !r.enabled) return;
+                    n.on("init", function(e, n) {
+                        return "undefined" != typeof r.event.init && r.event.init(e, n), "undefined" != typeof c ? n.slideHandler(c) : void 0
+                    }), e(function() {
+                        n.slick(r)
+                    })
+                }
+                t.internalControl = r.method || {}, i.forEach(function(e) {
+                    t.internalControl[e] = function() {
+                        var i;
+                        i = Array.prototype.slice.call(arguments), i.unshift(e), n.slick.apply(o, i)
+                    }
+                }), n.on("afterChange", function(e, n, i, o) {
+                    c = i, "undefined" != typeof r.event.afterChange && t.$apply(function() {
+                        r.event.afterChange(e, n, i, o)
+                    })
+                }), n.on("beforeChange", function(e, n, i, o) {
+                    "undefined" != typeof r.event.beforeChange && t.$apply(function() {
+                        r.event.beforeChange(e, n, i, o)
+                    })
+                }), n.on("reInit", function(e, n) {
+                    "undefined" != typeof r.event.reInit && t.$apply(function() {
+                        r.event.reInit(e, n)
+                    })
+                }), "undefined" != typeof r.event.breakpoint && n.on("breakpoint", function(e, n, i) {
+                    t.$apply(function() {
+                        r.event.breakpoint(e, n, i)
+                    })
+                }), "undefined" != typeof r.event.destroy && n.on("destroy", function(e, n) {
+                    t.$apply(function() {
+                        r.event.destroy(e, n)
+                    })
+                }), "undefined" != typeof r.event.edge && n.on("edge", function(e, n, i) {
+                    t.$apply(function() {
+                        r.event.edge(e, n, i)
+                    })
+                }), "undefined" != typeof r.event.setPosition && n.on("setPosition", function(e, n) {
+                    t.$apply(function() {
+                        r.event.setPosition(e, n)
+                    })
+                }), "undefined" != typeof r.event.swipe && n.on("swipe", function(e, n, i) {
+                    t.$apply(function() {
+                        r.event.swipe(e, n, i)
+                    })
+                })
+            }, u = function() {
+                l(), d()
+            }, o.one("$destroy", function() {
+                l()
+            }), t.$watch("settings", function(e, n) {
+                return null !== e ? u() : void 0
+            }, !0)
+        }
+    }
+}]);

app/directives/btn-to-basket.js

@@ -0,0 +1,10 @@
+app.directive('btnToBasket', [function() {
+  let link = function(scope, element, attrs) {
+    //console.log("oneWeek  directive");
+  }
+  return {
+    restrict: 'E',
+    templateUrl: './app/views/btnToBasket.html',
+    link: link
+  }
+}]);

app/directives/one-week.js

@@ -0,0 +1,10 @@
+app.directive('oneWeek', [function() {
+  let link = function(scope, element, attrs) {
+    //console.log("oneWeek  directive");
+  }
+  return {
+    restrict: 'E',
+    templateUrl: './app/views/oneWeek.html',
+    link: link
+  }
+}]);

app/directives/scroll-to-top.js

@@ -0,0 +1,94 @@
+app.directive('scrollTop', [function() {
+  let link = function(scope, element, attrs) {
+
+    window.top = {};
+    var sc = window.top;
+    sc.time = 12; // время прокручивания
+    sc.goTop = function (time, acceleration) {
+    	acceleration = acceleration || 0.1;
+    	time = time || sc.time;
+    	var dx = 0;
+    	var dy = 0;
+    	var bx = 0;
+    	var by = 0;
+    	var wx = 0;
+    	var wy = 0;
+    	if (document.documentElement) {
+    		dx = document.documentElement.scrollLeft || 0;
+    		dy = document.documentElement.scrollTop || 0;
+    	}
+    	if (document.body) {
+    		bx = document.body.scrollLeft || 0;
+    		by = document.body.scrollTop || 0;
+    	}
+    	var wx = window.scrollX || 0;
+    	var wy = window.scrollY || 0;
+    	var x = Math.max(wx, Math.max(bx, dx));
+    	var y = Math.max(wy, Math.max(by, dy));
+    	var speed = 1 + acceleration;
+    	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
+    	if(x > 0 || y > 0) {
+    		var invokeFunction = "window.top.goTop("+ time +")"
+    		window.setTimeout(invokeFunction, time);
+    	}
+    	return false;
+    }
+
+    sc.showHide = function (){
+    	var a = document.getElementById('gotop');
+      a.onclick = function(e){ e.preventDefault(); window.top.goTop(); }
+
+    	var stop = (document.body.scrollTop || document.documentElement.scrollTop);
+    	if( stop > 200 ){
+    		a.style.display = 'block';
+    		sc.smoothopaque(a, 'show', 30, false);
+    	} else {
+    		sc.smoothopaque(a, 'hide', 30, function(){a.style.display = 'none';});
+    	}
+    	return false;
+    }
+    // Плавная смена прозрачности
+    sc.smoothopaque = function (el, todo, speed, endFunc){
+    	var
+    	startop = Math.round( el.style.opacity * 100 ),
+    	op = startop,
+    	endop = (todo == 'show') ? 100 : 0;
+    	clearTimeout( window['top'].timeout );
+    	window['top'].timeout = setTimeout(slowopacity, 20);
+
+    	function slowopacity(){
+    		if( startop < endop ){
+    			op += 5;
+    			if( op < endop )
+    				window['top'].timeout = setTimeout(slowopacity, speed);
+    			else
+    				(endFunc) && endFunc();
+    		}
+    		else {
+    			op -= 5;
+    			if( op > endop ){
+    				window['top'].timeout = setTimeout(slowopacity, speed);
+    			}
+    			else
+    				(endFunc) && endFunc();
+    		}
+    		// установка opacity
+    		el.style.opacity = (op/100);
+    		el.style.filter = 'alpha(opacity=' + op + ')';
+    	}
+    }
+    if (window.addEventListener){
+    	window.addEventListener("scroll", sc.showHide, false);
+    	window.addEventListener("load", sc.showHide, false);
+    }
+    else if (window.attachEvent){
+    	window.attachEvent("onscroll", sc.showHide);
+    	window.attachEvent("onload", sc.showHide);
+    }
+  }
+  return {
+    restrict: 'E',
+    templateUrl: './app/views/scrollToTop.html',
+    link: link
+  }
+}]);

app/views/about.html

@@ -13,7 +13,7 @@
             Our food is low in sodium for proper treatment of high blood pressure, absent of processed sugars.
           </div>
         </div>
-        <a href="#" class="about-item-second-side">
+        <a href="#!/about-us" class="about-item-second-side">
           <span>Read more</span>
         </a>
       </div>
@@ -27,7 +27,7 @@
             Any time of day, any day of the week, have quick access to delicious nourishing meals.
           </div>
         </div>
-        <a href="#" class="about-item-second-side">
+        <a href="#!/about-us" class="about-item-second-side">
           <span>Read more</span>
         </a>
       </div>
@@ -41,7 +41,7 @@
             Each item on our menu is delivered individually wrapped and delivered to your table promptly.
           </div>
         </div>
-        <a href="#" class="about-item-second-side">
+        <a href="#!/about-us" class="about-item-second-side">
           <span>Read more</span>
         </a>
       </div>

app/views/add-item-page.html

@@ -2,7 +2,7 @@
   <div class="form-wrapper">
     <div class="form-tabs">
       <div class="form-tab1" ng-class="{'form-tab-active': isFirstTab}" ng-click="isFirstTab = true">
-        Add select menu item
+        Add custom menu item
       </div>
       <div class="form-tab2" ng-class="{'form-tab-active': !isFirstTab}" ng-click="isFirstTab = false">
         Add ready menu item

app/views/app-root.html

@@ -23,12 +23,15 @@
       <span class="fa fa-sign-in"></span>
       Sign out
     </div>
-    <a ng-if="isUserSigned" href="#!/user-page" class="user-page-icon">
+    <a ng-if="isUserSigned && !isModeratorSigned" href="#!/user-page" class="user-page-icon">
       <span class="fa fa-user"></span>
     </a>
     <div class="login-popup">
       <div class="cancel" ng-click="cancelPopup()">
         <span class="fa fa-times"></span>
+      </div>
+      <div class="popup-cansel-wrapper" ng-click="cancelPopup()">
+
       </div>
       <div class="login-popup-wrapper">
         <div class="btns">
@@ -70,4 +73,5 @@
     <div class="undefined-btn"></div>
   </div>
     <main ng-view></main>
+    <scroll-top></scroll-top>
 </div>

app/views/btnToBasket.html

@@ -0,0 +1,4 @@
+<div class="btn-basket">
+	<a href="#" class="btn-basket__link">Go to Basket</a>
+	<div class="btn-basket__mask"></div>
+</div>

app/views/constructor.html

@@ -0,0 +1,89 @@
+<div ng-controller="mealsConstructor">
+  <div class="constructor-page-title">
+    <h1>MAKE YOUR MEAL PLAN</h1>
+  </div>
+  <div class="constructor-wrapper">
+      <div class='constructor'>
+        <div class="accordion">
+          <ul>
+            <li>
+              <input type="checkbox">
+              <i></i>
+              <h2 class="accordion__title">BREAKFAST</h2>
+              <div class="accordion__content">
+                <div class="constructor-meals">
+                    <div ng-repeat='item in list1' ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}" class='constructor-meals__item' >
+                      <div class="constructor-meals__img">
+                        <img ng-src="{{item.imageUrl}}">
+                      </div>
+                      <div class="constructor-meals__title">
+                        <h3>{{item.mealName}}</h3>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </li>
+            <li>
+              <input type="checkbox" checked>
+              <i></i>
+              <h2 class="accordion__title">LUNCH</h2>
+              <div class="accordion__content">
+                <div class="constructor-meals">
+                    <div ng-repeat='item in list2' ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list2" jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}" class='constructor-meals__item' >
+                      <div class="constructor-meals__img">
+                        <img ng-src="{{item.imageUrl}}">
+                      </div>
+                      <div class="constructor-meals__title">
+                        <h3>{{item.mealName}}</h3>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </li>
+            <li>
+              <input type="checkbox" checked>
+              <i></i>
+              <h2 class="accordion__title">DINNER</h2>
+              <div class="accordion__content">
+                <div class="constructor-meals">
+                    <div ng-repeat='item in list3' ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list3" jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}" class='constructor-meals__item' >
+                      <div class="constructor-meals__img">
+                        <img ng-src="{{item.imageUrl}}">
+                      </div>
+                      <div class="constructor-meals__title">
+                        <h3>{{item.mealName}}</h3>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </li>
+             <li>
+              <input type="checkbox" checked>
+              <i></i>
+              <h2 class="accordion__title">SNACKS</h2>
+              <div class="accordion__content">
+                <div class="constructor-meals">
+                    <div ng-repeat='item in list4' ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}}, placeholder: 'keep'}" class='constructor-meals__item' >
+                      <div class="constructor-meals__img">
+                        <img ng-src="{{item.imageUrl}}">
+                      </div>
+                      <div class="constructor-meals__title">
+                        <h3>{{item.mealName}}</h3>
+                      </div>
+                    </div>
+                  </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    <one-week></one-week>
+  </div>
+  <br>
+  <div class="btn-basket" ng-click="sendCustomDiet()">
+  	<span class="btn-basket__link">Go to Basket</span>
+  	<div class="btn-basket__mask"></div>
+  </div>
+  <p class="constructor-total-price"><b>SUM TO BASKET: {{sumToBacket}}$</b></p>
+</div>
+<footer></footer>

app/views/footer.html

@@ -2,19 +2,19 @@
   <div class="footer-wrapper">
     <div class="footer-icons">
       <div class="footer-icon">
-        <a href="#">
+        <a href="https://www.facebook.com/" target="_blank">
           <i class="fa fa-facebook"></i>
           <i></i>
         </a>
       </div>
       <div class="footer-icon">
-        <a href="#">
+        <a href="https://www.instagram.com/" target="_blank">
           <i class="fa fa-instagram"></i>
           <i></i>
         </a>
       </div>
       <div class="footer-icon">
-        <a href="#">
+        <a href="https://www.twitter.com/" target="_blank">
           <i class="fa fa-twitter"></i>
           <i></i>
         </a>
@@ -23,11 +23,10 @@
     <div class="footer-navbar">
       <ul>
         <li><a href="#!/">Main page</a></li>
-        <li><a href="#">Customize menu</a></li>
-        <li><a href="#">Ready menus</a></li>
-        <li><a href="#">Delivery</a></li>
-        <li><a href="#">About us</a></li>
-        <li><a href="#">Contacts</a></li>
+        <li><a href="#!/select-menu">Customize menu</a></li>
+        <li><a href="#!/ready-menu">Ready menus</a></li>
+        <li><a href="#!/delivery-contacts">Delivery & Contacts</a></li>
+        <li><a href="#!/about-us">About us</a></li>
       </ul>
     </div>
     <div class="footer-copyright">

app/views/main-slider.html

@@ -11,8 +11,8 @@
       <p>DELICIOUS HEALTHY FOOD DELIVERED RIGHT TO YOUR DOOR</p>
     </div>
     <div class="main-slider-buttons">
-      <a href="#">SELECT MENU</a>
-      <a href="#">READY MENUS</a>
+      <a href="#!/select-menu">SELECT MENU</a>
+      <a href="#!/ready-menu">READY MENUS</a>
     </div>
     <div class="main-slider-bars-wrapper">
       <div class="main-slider-bar" ng-repeat="slide in slides" ng-class="{'main-slider-bar-active': slide == slides[currentSlide]}" ng-click="selectImage(slide)"></div>

app/views/nav-menu.html

@@ -11,13 +11,13 @@
   </ul>
   <div class="nav-menu-icons-wrapper">
     <div class="nav-menu-icon">
-      <a href="#"><i class="fa fa-facebook"></i></a>
+      <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
     </div>
     <div class="nav-menu-icon">
-      <a href="#"><i class="fa fa-instagram"></i></a>
+      <a href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram"></i></a>
     </div>
     <div class="nav-menu-icon">
-      <a href="#"><i class="fa fa-twitter"></i></a>
+      <a href="https://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
     </div>
   </div>
 </nav>

app/views/oneWeek.html

@@ -0,0 +1,82 @@
+<!-- {{todayDay+$index+'/'+todayMonthYear}} -->
+<div class="constructor-cart">
+  <div class="slick-container">
+    <slick slides-to-show=3 slides-to-scroll=1 infinite=false>
+      <div ng-repeat=" item in arrDays track by $index">
+        <div class="constructor-day">
+            <h2 class="constructor-day__title accordion__title">{{item.caption}}</h2>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title"> BREAKFAST </b>
+              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].breakfast" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'breakfast')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div class='constructor-meals__item' ng-repeat="item in order[item.day].breakfast track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone', animate: true}" ng-model="order[item.day].breakfast" jqyoui-draggable="{index: {{$index}},animate:true}">
+                  <div class="constructor-meals__img">
+                    <img ng-src="{{item.imageUrl}}">
+                  </div>
+                  <div class="constructor-meals__title">
+                    <h3>{{item.mealName}}</h3>
+                  </div>
+                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'breakfast', $index)">
+                    <span class="fa fa-times"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title"> LUNCH </b>
+              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].lunch" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'lunch')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div class='constructor-meals__item' ng-repeat="item in order[item.day].lunch track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].lunch" jqyoui-draggable="{index: {{$index}},animate:true}">
+                  <div class="constructor-meals__img">
+                    <img ng-src="{{item.imageUrl}}">
+                  </div>
+                  <div class="constructor-meals__title">
+                    <h3>{{item.mealName}}</h3>
+                  </div>
+                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'lunch', $index)">
+                    <span class="fa fa-times"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title">DINNER</b>
+              <div class="constructor-meals" data-drop="true" ng-model="order[item.day].dinner" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'dinner')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div class='constructor-meals__item'  ng-repeat="item in order[item.day].dinner track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].dinner" jqyoui-draggable="{index: {{$index}},animate:true}">
+                  <div class="constructor-meals__img">
+                    <img ng-src="{{item.imageUrl}}">
+                  </div>
+                  <div class="constructor-meals__title">
+                    <h3>{{item.mealName}}</h3>
+                  </div>
+                  <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'dinner', $index)">
+                    <span class="fa fa-times"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="constructor-day__type">
+              <b class="constructor-day__type-title">SNACKS</b>
+              <div class="constructor-meals constructor-meals--border" data-drop="true" ng-model="order[item.day].snacks" jqyoui-droppable="{multiple:true}">
+                <span ng-hide="hideMe( item.day, 'snacks')" class='constructor-meals__btn-add'>ADD MEAL</span>
+                <div>
+                  <div class='constructor-meals__item' ng-repeat="item in order[item.day].snacks track by $index" ng-show="item.mealName" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="order[item.day].snacks" jqyoui-draggable="{index: {{$index}},animate:true}">
+                    <div class="constructor-meals__img">
+                      <img ng-src="{{item.imageUrl}}">
+                    </div>
+                    <div class="constructor-meals__title">
+                      <h3>{{item.mealName}}</h3>
+                    </div>
+                    <div class="constructor-meals__btn-delete" ng-click="deleteMeal($parent.item.day, 'snacks', $index)">
+                      <span class="fa fa-times"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </slick>
+  </div>
+</div>

app/views/scrollToTop.html

@@ -0,0 +1 @@
+<button id="gotop" class="scrollTop" href="#"></button>

app/views/selected-meals.html

@@ -56,6 +56,6 @@
     </div>
   </div>
   <div class="selected-meals-submit">
-    NEXT STEP
+    <a href="#!/constructor">NEXT STEP</a>
   </div>
 </div>

app/views/steps.html

@@ -9,8 +9,7 @@
     <div class="steps-item-wrapper">
       <div class="steps-item">
         <div class="steps-item-content">
-          Your food is prepared and securely packaged. Our courier is at your door.
-          Your food is prepared and securely packaged. Our courier is at <br>your door.
+          You have a goal, we have a plan. Which program is right for you? Take advantage of a free nutritionist consultation.
         </div>
         <div class="steps-item-number">
           Step 1
@@ -18,8 +17,7 @@
       </div>
       <div class="steps-item">
         <div class="steps-item-content">
-          Your food is prepared and securely packaged. Our courier is at your door.
-          Your food is prepared and securely packaged. Our courier is at <br>your door.
+          The ration is made up. Products purchased. Cooks begin to prepare your breakfast, lunch and dinner. They will work at night.
         </div>
         <div class="steps-item-number">
           Step 2
@@ -27,8 +25,7 @@
       </div>
       <div class="steps-item">
         <div class="steps-item-content">
-          Your food is prepared and securely packaged. Our courier is at your door.
-          Your food is prepared and securely packaged. Our courier is at <br>your door.
+          Your food is ready and securely packed. Our courier is at your door. Meet! Your food is ready and securely packed.
         </div>
         <div class="steps-item-number">
           Step 3
@@ -36,8 +33,7 @@
       </div>
       <div class="steps-item">
         <div class="steps-item-content">
-          Your food is prepared and securely packaged. Our courier is at your door.
-          Your food is prepared and securely packaged. Our courier is at <br>your door.
+          Your goal is getting closer every day. After all, you eat delicious, healthy and according to plan. Your goal is getting closer every day.
         </div>
         <div class="steps-item-number">
           Step 4

content/css/adaptive-styles.css

@@ -0,0 +1,59 @@
+@media screen and (max-width: 1180px) {
+  .main-slider {
+    height: 640px;
+  }
+
+  .main-slider-overlay {
+    /* height: 100vh; */
+    display: none;
+  }
+
+  .main-slider-back-overlay {
+    /* height: 100vh; */
+    display: none;
+  }
+
+  .main-slider-back-overlay2 {
+    /* height: 100vh; */
+    display: none;
+  }
+
+  .main-slider-text {
+    margin-top: 18%;
+    margin-bottom: 5%;
+  }
+
+  .main-slider-text {
+    width: 80%;
+  }
+
+  .main-slider-text p {
+    font-size: 30px;
+  }
+
+  .main-slider-buttons {
+    width: 45%;
+  }
+
+  .main-slider-buttons a {
+    font-size: 17px;
+    padding: 8px 15px;
+  }
+
+  .main-slider-bars-wrapper {
+    margin-top: 9%;
+  }
+
+}
+
+@media screen and (max-width: 960px) {
+  .main-slider {
+    height: 520px;
+  }
+}
+
+@media screen and (max-width: 850px) {
+  .main-slider {
+    height: 400px;
+  }
+}

content/css/style_Andrii.css

@@ -0,0 +1,389 @@
+/* Constructor */
+/* .constructor-page-title h1 {
+    text-align: center;
+    margin: 45px 0;
+    font-family: "AvenirNextLTPro-Demi";
+    color: #1D1D1F;
+    font-weight: 200;
+} */
+
+.constructor-page-title {
+	background: #1D1D1F;
+	text-align: center;
+	margin-bottom: 45px;
+	padding: 11px 0;
+}
+
+.constructor-page-title h1 {
+	display: inline-block;
+	font-family: "AvenirNextLTPro-Demi";
+	font-weight: lighter;
+	font-size: 25px;
+	color: #fff;
+}
+
+.constructor-wrapper {
+	margin-bottom: 30px;
+	display: flex;
+  justify-content: center;
+  padding: 0;
+}
+.constructor {
+	margin-right: 6vw;
+	width: 20vw;
+}
+.constructor-cart {
+  display: flex;
+  align-items: stretch;
+  align-content: stretch;
+}
+.constructor-day {
+  cursor: pointer;
+	user-select: none;
+	margin-right: 15px;
+}
+.constructor-day__type {
+	background-color: #fefffa;
+}
+.constructor-day__type-title {
+  font-size: 16px;
+  color: #f4f4f4;
+  background: #1d1d1f;
+  display: block;
+  margin: 0;
+  text-align: center;
+  padding: 3px;
+	font-weight: normal;
+}
+/*Accordion*/
+.accordion {
+		user-select: none;
+    width: 100%;
+    max-width: 400px;
+    min-height: 0;
+    display: block;
+    position: relative;
+    margin: 0 auto;
+    padding: 0;
+    background: rgba(29,29,31,0.1);
+    border-right: 1px inset #1d1d1f;
+    border-left: 1px inset #1d1d1f;
+}
+.accordion__title, .constructor-day__title {
+    font-size: 19px;
+    font-weight: 600;
+    letter-spacing: 1px;
+    display: block;
+    margin: 0;
+    padding: 10px 25px;
+    cursor: pointer;
+    color: #f4f4f4;
+    background: #1d1d1f;
+    border-bottom: 2px solid #000;
+		font-weight: normal;
+}
+.constructor-day__title {
+  margin-bottom: 10px;
+  border-bottom: none;
+  text-align: center;
+}
+.accordion__content {
+  position: relative;
+  max-height: 800px;
+  transform: translate(0, 0);
+  z-index: 2;
+}
+.accordion ul {
+  list-style: none;
+  perspective: 900;
+  padding: 0;
+  margin: 0;
+}
+.accordion ul li {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  z-index: 3;
+}
+.accordion ul li:nth-of-type(1) {
+  animation-delay: 0.5s;
+}
+.accordion ul li:nth-of-type(2) {
+  animation-delay: 0.75s;
+}
+.accordion ul li:nth-of-type(3) {
+  animation-delay: 1s;
+}
+.accordion ul li:last-of-type {
+  padding-bottom: 0;
+}
+.accordion ul li i {
+  position: absolute;
+  transform: translate(-6px, 0);
+  margin-top: 16px;
+  right: 25px;
+}
+.accordion ul li i:before, .accordion ul li i:after {
+  content: "";
+  position: absolute;
+  background-color: #fff;
+  width: 3px;
+  height: 9px;
+}
+.accordion ul li i:before {
+  transform: translate(-2px, 0) rotate(45deg);
+}
+.accordion ul li i:after {
+  transform: translate(2px, 0) rotate(-45deg);
+}
+.accordion ul li input[type=checkbox] {
+  position: absolute;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+}
+.accordion ul li input[type=checkbox]:checked ~ div.accordion__content {
+  margin-top: 0;
+  max-height: 0;
+  opacity: 0;
+  transform: translate(0, 50%);
+}
+.accordion ul li input[type=checkbox]:checked ~ i:before {
+  transform: translate(2px, 0) rotate(45deg);
+}
+.accordion ul li input[type=checkbox]:checked ~ i:after {
+  transform: translate(-2px, 0) rotate(-45deg);
+}
+div.accordion__content, ul li i:before, ul li i:after {
+    transition: all 0.5s ease-in-out;
+}
+
+/* CAROUSEL */
+.slick-slider {
+  margin-bottom: 0;
+}
+.slick-container {
+  position: relative;
+  width: 60vw;
+}
+/* Selected - items   */
+.constructor-meals__item img{
+  width: 100%;
+  position: relative;
+  bottom: 150%;
+}
+.constructor-meals__img {
+  width: 100%;
+  overflow: hidden;
+  height: 35px;
+  border-radius: 3px;
+}
+.constructor-meals__title {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  background: rgba(29, 29, 31, 0.25);
+  width: 100%;
+  height: 100%;
+}
+.constructor-meals__item {
+  transition: all 0s ease 0s;
+  width: 85%;
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  margin: 0 auto;
+  margin-bottom: 10px;
+  /* border: 6px outset blue; */
+  box-shadow: -3px 0 3px 0 rgba(0,0,0,0.5),
+            3px 0 3px 0 rgba(255,255,255,0.5);
+}
+.constructor-meals__item:nth-last-of-type {
+  margin-bottom: 0;
+}
+.constructor-meals__title h3 {
+  text-align: center;
+  text-transform: capitalize;
+  color: #fff;
+  letter-spacing: 0.7px;
+  font-weight: bold;
+  margin-top: 7px;
+}
+.constructor-meals {
+  display: flex;
+  flex-direction: column;
+  padding-top: 10px;
+  background: rgba(29,29,31,0.1);
+  overflow: hidden;
+}
+.accordion__content .constructor-meals {
+  background-color: transparent;
+  cursor: -webkit-grab;
+}
+.constructor-meals__btn-add {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 85%;
+  height: 35px;
+  margin: 0 auto;
+  border-radius: 10px;
+  margin-bottom: 10px;
+  background: #fcfcfe;
+  font-weight: bold;
+  box-shadow: 0px 3px 3px #313131, 0px 3px 3px #393939;
+  border: 1px solid rgba(255,255,255,1);
+  text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
+	font-weight: normal;
+}
+
+.constructor-day__type .constructor-meals {
+  border-left: 2px inset #1d1d1f;
+  border-right: 2px inset #1d1d1f;
+}
+.constructor-meals--border {
+  border-bottom: 2px inset #1d1d1f;
+}
+/*Arrows carousel*/
+.slick-prev {
+    left: -45px;
+}
+[dir='rtl'] .slick-prev {
+    right: -45px;
+    left: auto;
+}
+.slick-next {
+    right: -20px;
+}
+[dir='rtl'] .slick-next {
+    right: auto;
+    left: -20px;
+}
+.slick-prev:before,
+.slick-next:before {
+    font-family: 'slick';
+    font-size: 30px;
+    line-height: 1;
+    opacity: .75;
+    color: #2a2a2d;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+/*Scroll-To-Top*/
+.scrollTop{
+  display: block;
+  position: fixed;
+  z-index: 10;
+  object-fit: fill;
+  background: url('../images/scroll-top2.png');
+  border: 0px solid black;
+  outline: none;
+	width: 48px;
+	height: 48px;
+	bottom: 30px;
+	left: 1%;
+	cursor: pointer;
+}
+.scrollTop:hover {
+  animation-name: pulse;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+      transform: scale(0.9);
+  }
+  50% {
+      transform: scale(1);
+  }
+  100% {
+      transform: scale(0.9);
+  }
+}
+/* button to basket */
+
+.btn-basket {
+  margin: 0 auto;
+  z-index: 5;
+	position: relative;
+	display: block;
+	border: 2px solid #2e2e2e;
+	text-transform: uppercase;
+	letter-spacing: .3rem;
+	padding: 15px 10px;
+	text-align: center;
+  width: 19vw;
+	cursor: pointer;
+	overflow: hidden;
+	background: #1d1d1f;
+	transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
+}
+
+.btn-basket .btn-basket__link {
+	color: #f1f1f5;
+	text-decoration: none;
+}
+
+.btn-basket .btn-basket__mask {
+	background: #fff;
+	background: rgba(255,255,255,0.5);
+}
+
+.btn-basket .btn-basket__mask {
+	position: absolute;
+	display: block;
+	width: 200px;
+	height: 100px;
+	transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
+	transition: all 1.1s cubic-bezier(0.19,1,.22,1);
+}
+
+.btn-basket:hover {
+	background: black;
+	border-color: #fff;
+	box-shadow: 0 0 5px rgba(255,245,245,0.8);
+/* background-image: url('http://cuinine.com/img/codepen/savvy.jpg');  */
+}
+
+.btn-basket:hover .btn-basket__link {
+	color: #fff;
+}
+
+.btn-basket:hover .btn-basket__mask {
+	background: white;
+	-webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
+	transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
+}
+
+/* constructor-meals__btn-delete */
+
+.constructor-meals__btn-delete {
+  position: absolute;
+  right: 9px;
+  top: 9px;
+  height: 20px;
+  width: 20px;
+  background: rgba(29, 29, 31,1);
+  border-radius: 50%;
+  text-align: center;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0;
+}
+.constructor-meals__btn-delete span {
+  color: #F1F1F5;
+  position: relative;
+  top: 1px;
+}
+.constructor-meals__item:hover .constructor-meals__btn-delete {
+  opacity: 1;
+}
+
+.constructor-total-price {
+	margin-bottom: 50px;
+	text-align: center;
+}

content/css/styles.css

@@ -53,7 +53,7 @@ body * {
   background: #1D1D1F;
   text-align: center;
   transition: all 0.6s cubic-bezier(.645,.045,.355,1);
-  z-index: 3;
+  z-index: 15;
 }
 
 .preload-screen img{
@@ -170,7 +170,7 @@ main.ng-enter .shopping-cart-page .item{
 
 /* header-line */
 .header-line {
-  z-index: 2;
+  z-index: 20;
   position: -webkit-sticky;position: sticky;
   top: 0;
   width: 100%;
@@ -284,6 +284,12 @@ main.ng-enter .shopping-cart-page .item{
   z-index: 3;
 }
 
+.popup-cansel-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
 .login-popup .cancel {
   position: absolute;
   top: 5vh;
@@ -291,9 +297,11 @@ main.ng-enter .shopping-cart-page .item{
   color: rgba(241, 241, 245,1);
   font-size: 35px;
   cursor: pointer;
+  z-index: 4;
 }
 
 .login-popup-wrapper {
+  z-index: 4;
   width: 540px;
   background-color: #fff;
 }
@@ -480,6 +488,7 @@ main.ng-enter .shopping-cart-page .item{
 /* navmenu */
 
 /* main-slider */
+
 .main-slider {
   height: 100vh;
   overflow: hidden;
@@ -548,7 +557,6 @@ main.ng-enter .shopping-cart-page .item{
 
 .main-slider-text {
   text-align: center;
-  font-size: 56px;
   color: #fff;
   z-index: 2;
   width: 1180px;
@@ -561,6 +569,7 @@ main.ng-enter .shopping-cart-page .item{
   font-weight: bold;
   font-family: 'Montserrat', Arial, sans-serif;
   letter-spacing: 2px;
+  font-size: 56px;
 }
 
 .main-slider-buttons {
@@ -710,11 +719,13 @@ main.ng-enter .shopping-cart-page .item{
   transition: all 1.6s ease;
 }
 
-.main-page .about-item:hover .about-item-first-side{
+.main-page .about-item:hover .about-item-first-side {
+  transition: all 0.3s ease-in;
   transform: rotateY(90deg);
 }
 
-.main-page .about-item:hover .about-item-second-side{
+.main-page .about-item:hover .about-item-second-side {
+  transition: all 0.3s 0.3s ease-out;
   transform: rotateY(180deg);
   opacity: 1;
 }
@@ -796,6 +807,7 @@ main.ng-enter .shopping-cart-page .item{
   padding: 70px 40px 40px;
   font-size: 17px;
   font-family: 'Roboto', sans-serif;
+  height: 200px;
 }
 
 .main-page .steps-item-number {
@@ -1322,7 +1334,7 @@ main.ng-enter .shopping-cart-page .item{
   width: 100%;
   justify-content: center;
   align-items: center;
-  opacity: 0.75;
+  opacity: 0.89;
   color: #1D1D1F;
   transition: all 0.3s ease;
 }
@@ -1493,7 +1505,6 @@ main.ng-enter .shopping-cart-page .item{
   right: -30px;
   bottom: -30px;
   width: 124%;
-  padding: 20px 0;
   background-color: #F1F1F5;
   text-align: center;
   font-size: 15px;
@@ -1501,6 +1512,13 @@ main.ng-enter .shopping-cart-page .item{
   letter-spacing: 3px;
   cursor: pointer;
 }
+
+.selected-meals-submit a {
+  display: block;
+  padding: 20px 0;
+  color: #000;
+  text-decoration: none;
+}
 /* select-menu-page */
 
 /* add-item-page */

index.html

@@ -1,10 +1,21 @@
 <!DOCTYPE html>
 <html lang="en" ng-app="angularProject">
   <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Angular App</title>
     <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
+    <link href="content/css/adaptive-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">
 
+    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css'>
+    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.css'>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js'></script>
+    <script src="./app/directives/aboutUs.js"></script>
+
     <script src="./app/lib/angular.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
     <script src="./app/lib/angular-animate.min.js"></script>
@@ -40,6 +51,17 @@
     <script src="./app/controllers/UserPageController.js"></script>
     <script src="./app/controllers/MessagesPageController.js"></script>
     <script src="./app/directives/custom-on-change.js"></script>
+
+
+    <script src="./app/lib/angular-dragdrop.min.js"></script>
+    <script src="./app/controllers/mealsConstructorCtrl.js"></script>
+    <script src="./app/directives/one-week.js"></script>
+    <script src="./app/directives/scroll-to-top.js"></script>
+    <script src="./app/directives/btn-to-basket.js"></script>
+
+
+
+    <link href="./content/css/style_Andrii.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <app-root ng-include="'./app/views/app-root.html'"></app-root>