SPA Ftutella promo on Angular.js 1.*

frutella-promo.js

//= ../../bower_components/jquery/dist/jquery.min.js
//= ../../bower_components/jquery-ui/jquery-ui.min.js
//= ../../bower_components/angular/angular.min.js
//= ../../bower_components/angular-animate/angular-animate.min.js
//= ../../bower_components/angular-route/angular-route.min.js
//= ../../bower_components/angular-resource/angular-resource.min.js
//= ../../bower_components/angular-cookies/angular-cookies.min.js
//= ../../bower_components/angular-sanitize/angular-sanitize.min.js
//= ../../bower_components/angular-messages/angular-messages.min.js
//= ../../bower_components/angular-ui-mask/dist/mask.min.js
//= ../../bower_components/ng-file-upload/ng-file-upload-all.min.js

//= swiper.jquery.min.js
var app = angular.module('app', ['ngMessages', 'ui.mask', 'ngRoute', 'ngFileUpload']);


app.config(['$routeProvider', '$interpolateProvider', '$httpProvider', function($routeProvider, $interpolateProvider, $httpProvider) {
        $httpProvider.defaults.xsrfCookieName = 'csrftoken';
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
        $httpProvider.defaults.transformRequest = [function(data) {
            var param = function(obj) {
                var query = '';
                var name, value, fullSubName, subValue, innerObj, i;
                for (name in obj) {
                    value = obj[name];
                    if (value instanceof Array) {
                        for (i = 0; i < value.length; ++i) {
                            subValue = value[i];
                            fullSubName = name + '[' + i + ']';
                            innerObj = {};
                            innerObj[fullSubName] = subValue;
                            query += param(innerObj) + '&';
                        }
                    } else if (value instanceof Object) {
                        for (subName in value) {
                            subValue = value[subName];
                            fullSubName = name + '[' + subName + ']';
                            innerObj = {};
                            innerObj[fullSubName] = subValue;
                            query += param(innerObj) + '&';
                        }
                    } else if (value !== undefined && value !== null) {
                        query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
                    }
                }
                return query.length ? query.substr(0, query.length - 1) : query;
            };
            return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
        }];
}]);


app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'main.html',
        controller: 'mainPageController'
    })
    .when('/lk', {
        templateUrl: 'lk.html',
        controller: 'loginPageController'
    })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('generalController', ['$scope', '$http', '$window', '$timeout','$location', function($scope, $http, $window, $timeout, $location){
    $scope.global = {
        inIconName: false,
        inIconLastName: false,
    };
    $http({
        method: 'GET',
        url: 'http://api.fruittella.dreamdev.space/api/get-user',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        withCredentials: true
    }).then(function success(response) {
        if(response.data.result == "success"){
            $scope.global.inIconName = response.data.data.first_name;
            $scope.global.inIconLastName = response.data.data.last_name;
            $scope.isUserBlocked = response.data.data.status.blocked;
            $scope.blockedfromTime = response.data.data.status.from_time;
            $scope.blockedtoTime = response.data.data.status.to_time;

            if(response.data.data.status.blocked){
                console.log("К сожалению вы заблокированы");

            }else{
                console.log("Вы не заблокированны!");
            }
        }else{
            $location.path('/');
            console.log(response, "не получил авторизированного юзера");
        }
    }, function error(response) {

    });

    $scope.logOut = function(){
      $http({
          method: 'GET',
          url: 'http://api.fruittella.dreamdev.space/api/logout',
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          },
          withCredentials: true
      }).then(function success(response) {
          $scope.global.inIconName = false;
          $scope.global.inIconLastName = false;
          $window.location.href = '#/main';
      }, function error(response) {
            console.log(response);
      });
    };


    setTimeout(function(){
        $('body').on('click', '.logout-wr', function() {
            $('.b-popup.b-popup--reg').addClass('b-popup--open');
            $('.popup__tab-content div[data-tab="tab1"]').css({
                "display": "none"
            });
            $('.popup__tab-content div[data-tab="tab2"]').css({
                "display": "block"
            });
            $('div.popup__switch-btn[data-tab="tab2"]').addClass('popup__switch-btn--active');
            $('div.popup__switch-btn[data-tab="tab1"]').removeClass('popup__switch-btn--active');
            $('body').css('overflow', 'hidden');
        });
        $('.arrow-up-btn').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.page-wrapper').offset().top
            }, 500);
            return false;
        });
        $('.contest-btn--login').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.section-one').offset().top
            }, 500);
            return false;
        });
        $('.main-navigation__link-contest').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.section-one').offset().top
            }, 500);
            return false;
        });
        $('.main-navigation__link-rules').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.section-two').offset().top
            }, 500);
            return false;
        });
        $('.main-navigation__link-prize').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.section-three').offset().top
            }, 500);
            return false;
        });
        $('.main-navigation__link-winners').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.section-three__prize-wr').offset().top
            }, 500);
            return false;
        });
        $('.main-navigation__link-fruit').on("click", function() {
            $('html, body').animate({
                scrollTop: $('.section-five').offset().top
            }, 500);
            return false;
        });
        $('.popup__close').on("click", function() {
            $('.popup').removeClass('show');
            $('.popup-substrate').removeClass('popup-substrate--show');
            $('.b-popup').removeClass('b-popup--open');
            $('body').css('overflow', 'auto');
        });

        $('.btn-submit--main-reg').on("click", function() {
            event.preventDefault();
            $('.b-popup.b-popup--reg').addClass('b-popup--open');
            $('body').css('overflow', 'hidden');
        });
        $('.contest-btn--logout').on("click", function() {
            event.preventDefault();
            $('.b-popup.b-popup--reg').addClass('b-popup--open');
            $('body').css('overflow', 'hidden');
        });
        $('.login-btn').on("click", function() {
            event.preventDefault();
            $('.login-wr').addClass('disable');
            $('.logout-wr').addClass('active');
        });
        $('.logout-ico').on("click", function() {
            event.preventDefault();
            $('.login-wr').removeClass('disable');
            $('.logout-wr').removeClass('active');
        });
        $('.popup__tab-content>div:not(:first-child)').hide();

        $('.popup__switch-btn').on("click", function() {
            var dataTab = $(this).data('tab');
            var getWrapper = $(this).closest('.popup');

            getWrapper.find('.popup__switch-btn').removeClass('popup__switch-btn--active');
            $(this).addClass('popup__switch-btn--active');

            getWrapper.find('.popup__tab-content>div').hide();
            getWrapper.find('.popup__tab-content>div[data-tab=' + dataTab + ']').show();
        });

        $(window).scroll(function(){
          var scrollTop = $(window).scrollTop();
          if (scrollTop > 49) {
              $('.page-header').addClass('page-header--fixed');
              $('.arrow-up-btn').addClass('arrow-up-btn--active');
          } else {
              $('.page-header').removeClass('page-header--fixed');
              $('.arrow-up-btn').removeClass('arrow-up-btn--active');
          }
        });
    }, 100);

}]);

app.controller('loginPageController', ['$scope', '$http', '$window', function($scope, $http, $window){
    // форма получить подарок
    // $scope.$watch('inIconName', function(newval, oldval) {
    //     if (newval || oldval) {
    //         console.log($scope.global.inIconName, $scope.global.inIconLastName);
    //     }
    // });
    $('.btn-submit--lk-reg').on("click", function() {
        $('.b-popup.b-popup--prize').addClass('b-popup--open');
        $('body').css('overflow', 'hidden');
    });
    $scope.lk = {
        promoCode: null
    };

    $scope.codeFormSubmit = function() {
        console.log($scope.lk.promoCode);
        $http({
            method: 'POST',
            url: 'http://api.fruittella.dreamdev.space/api/activate-promo-code',
            withCredentials: true,
            data: {
                promo_code: $scope.lk.promoCode,
            },
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).then(function success(response) {
                if(response.data.result == "success"){
                    $scope.goodPromoCode = $scope.lk.promoCode;
                    $http({
                        method: 'GET',
                        url: 'http://api.fruittella.dreamdev.space/api/get-activated-promo-codes',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        withCredentials: true
                    }).then(function success(response) {
                        console.log(response);
                    }, function error(response) {
                        console.log(response);
                    });
                }else{
                    console.log(response.data.errors);
                }


            }, function error(response) {
                console.log(response, "error");
            });
    };



}]);

app.controller('mainPageController', ['$scope', '$window', '$http', 'Upload', '$timeout', '$location', function($scope, $window, $http, Upload, $timeout, $location) {
    $http({
        method: 'GET',
        url: 'http://api.fruittella.dreamdev.space/api/get-winners',
        withCredentials: true,
    }).then(function success(response) {
        $scope.winners = response.data.data;
        $scope.today = new Date().toJSON().slice(0, 10);
        var months = ["Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря"];
        var curr = new Date;
        var count = 0;
        for(var i = 0; i<7; i++){
            for (var key in $scope.winners.weekly_winners) {
                if(key == new Date(curr.setDate(curr.getDate() - curr.getDay()+i)).toJSON().slice(0, 10)){
                    $scope.winners.weekly_winner = {};
                    $scope.winners.weekly_winner.weeklyName = $scope.winners.weekly_winners[key][count].first_name;
                    $scope.winners.weekly_winner.weeklyLastName = $scope.winners.weekly_winners[key][count].last_name;
                    $scope.winners.weekly_winner.weeklyCity = $scope.winners.weekly_winners[key][count].city;
                    count++;
                    break;
                }
            }
        }

        for (var key in $scope.winners.daily_winners) {
            $scope.winners.daily_winners[key].day = key.split("-")[2]
            $scope.winners.daily_winners[key].month = months[key.split("-")[1].slice(-1)-1];
        }
        // jquery вставка
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 0,
            observer: true
        });

    }, function error(response) {
        console.log(response, "error");
    });


    $scope.registrationFormAge = "more"; // выбранная радиокнопка по умолчанию - 'больше 18'
    $scope.$watch('registrationFormConfirmPassword', function (newValue, oldValue) {
        if (newValue != oldValue && newValue != $scope.registrationFormNewPassword) // проверка на схожесть паролей
            $scope.passwordError = true;
        else {
            $scope.passwordError = false;
        }
    });
    // отправка данных на сервак
    $scope.registrationSubmit = function() {
        // если форма заполненна, то отправляють данные на сервер
        if($scope.registrationForm.$valid && $scope.registrationFormNewPassword == $scope.registrationFormConfirmPassword){
            $http({
                method: 'POST',
                url: 'http://api.fruittella.dreamdev.space/api/register-user',
                withCredentials: true,
                data: {
                    first_promo_code: $scope.registrationFirstPromoCode,
                    first_name
: $scope.registrationFormFirstName,
                    last_name: $scope.registrationFormLastName,
                    city: $scope.registrationFormResidingCity,
                    phone: $scope.registrationFormPhoneNumber,
                    email: $scope.registrationFormEmail,
                    password: $scope.registrationFormNewPassword
                },
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function success(response) {
                        if(response.data.result == "success"){
                            console.log(response, "success");
                            $('.b-popup--reg').removeClass('b-popup--open');
                            alert("Регистрация выполненна успешно. Письмо активации прийдет вам на почту!");
                        }else{
                            console.log("Пользователь с таким email уже существует");
                        }
                }, function error(response) {
                    console.log(response, "error");
                });
        }
        else{
            console.log("ошибки в форме, форма не заполненна, отправить не могу.");
            alert("ошибки в форме, форма не заполненна, отправить не могу.");
        }
    };

    $scope.loginSubmit = function() {
        // если форма заполненна, то отправляють данные на сервер
        if($scope.loginForm.$valid){
            $http({
                method: 'POST',
                url: 'http://api.fruittella.dreamdev.space/api/auth-user',
                withCredentials: true,
                data: {
                    email: $scope.loginFormEmail,
                    password: $scope.loginFormPassword
                },
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function success(response) {
                    if(response.data.result != "error"){
                        console.log("Авторизация выполнена успешно");

                        // запрос на получение данных авторизованного пользователя
                        $http({
                                method: 'GET',
                                url: 'http://api.fruittella.dreamdev.space/api/get-user',
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                },
                                withCredentials: true
                            }).then(function success(response) {
                                    // подстановка данных об авторизованном пользователе рядом с иконокой входа
                                    $scope.global.inIconName = response.data.data.first_name;
                                    $scope.global.inIconLastName = response.data.data.last_name;
                                    // jquery вставка
                                    $('.b-popup--reg').removeClass('b-popup--open'); // после получения данных, закрывает форму
                                    $window.location.href = '#/lk/';
                                    $location.path('/k/');

                            }, function error(response) {
                                console.log(response, "error");
                            });

                    }else{
                        console.log("Не верный email или пароль.");
                    }
                }, function error(response) {
                    console.log(response, "error");
                });
        }
        else{
            console.log("ошибки в форме, форма не заполненна, отправить не могу.");
            $window.location.href = '#/main/';
        }
    };

    $http({
        method: 'GET',
        url: 'http://api.fruittella.dreamdev.space/api/get-feedback-topics',
        withCredentials: true,
    }).then(function success(response) {
        $("select").selectmenu(); // jqeury
        $scope.topics = response.data.data;
    }, function error(response) {
        console.log(response, "error");
    });

    $scope.feedbackSubmit = function() {
        if($scope.feedback.$valid){
            $http({
                method: 'POST',
                url: 'http://api.fruittella.dreamdev.space/api/add-feedback-request',
                data: {
                    title: $scope.feedback.title,
                    name: $scope.feedback.name,
                    email: $scope.feedback.email,
                    question: $scope.feedback.message,
                    files: $scope.feedback.uploaded_file,
                },
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(function success(response) {
                    console.log(response, "success");
                    // if(response.data.result != "error"){
                    //     console.log("Отправка обратной связи выполнена успешно", response);
                    // }else{
                    //     console.log("Не верно заполненна форма.");
                    // }
                }, function error(response) {
                    console.log(response, "error");
                });
        }
        else{
            console.log("ошибки в форме, форма не заполненна, отправить не могу.");
        }
    };

    // // files
    // $scope.$watch('files', function (newValue, oldValue) {
    //     console.log(newValue, oldValue);
    // });

    $scope.uploadFiles = function (files) {
        // это функия прилагается с плагином ng-file-upload, хотя Миша сказал делать нужно с https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
        $scope.files = files;
        if (files && files.length) {
            console.log($scope.files);
        }
    };
}]);


<div>
    <div class="arrow-up-btn"></div>
    <!-- page-header--log-out отвечает за размер шрифта в pos-f  -->
    <header class="page-header page-header--log-out">
        <div class="page-header-inner container">
            <div class="logo-page"></div>
            <nav class="main-navigation">
                <ul class="main-navigation__list">
                    <!--Если не залогинен элемент активен-->
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-two">Конкурс</a>
                    </li>
                    <!-- ========= -->
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-two">Правила</a>
                    </li>
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-three">Призы</a>
                    </li>
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-three__title-two">Победители</a>
                    </li>
                    <li class="main-navigation__list-item main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-five">Fruit-tella</a>
                    </li>
                    <li class="main-navigation__list-item">
                        <!-- Если залогинен элемент активен -->
                        <!--<a class="contest-btn contest-btn--login" href="#">введи код</a> -->
                        <a class="contest-btn contest-btn--logout" href="#">Участвуй в конкурсе</a>
                    </li>
                </ul>
            </nav>
            <div class="login-wr" ng-if="global.inIconName">
                <a ng-href="#/lk" class="login-ico"></a>
                <div class="login-name-wr">
                    <a ng-href="#/lk" class="login-name">{{global.inIconName}}</a>
                    <a ng-click="logOut();" class="login-btn">Выйти</a>
                </div>
            </div>
            <div class="logout-wr" ng-if="!global.inIconName">
                <a class="logout-ico"></a>
            </div>
        </div>
    </header>
    <article class="main-article">
        <section class="section-one">
            <div class="container">
                <div class="section-one__logo"></div>
                <div class="input-code-wr">
                    <div class="fruit-wr">
                        <div class="fruit-one"></div>
                        <div class="fruit-two"></div>
                        <div class="fruit-three"></div>
                    </div>

                    <form class="input-code-form">
                        <input class="input-code" ng-model="registrationFirstPromoCode"  minlength="6" maxlength="6" placeholder="Введи код с пачки" type="text">
                        <input type="submit" class="btn-submit btn-submit--main-reg" value="зарегистрироваться">
                    </form>

                </div>
                <div class="social social--header">
                    <a class="social-item social-item--vk" href="#"></a>
                    <a class="social-item social-item--od" href="#"></a>
                    <a class="social-item social-item--last social-item--search" href="#"></a>
                </div>
                <div class="section-one__arrow"></div>
            </div>
        </section>
        <section id="section-two" class="section-two">
            <div class="container">
                <h2 class="section-two__title">Три шага к победе</h2>
                <div class="section-two__instructions-wr">
                    <div class="section-two__instructions">
                        <div class="section-two__instructions-title">Купи</div>
                        <p class="section-two__instructions-text">
                            Купи жевательный мармелад
                            <span class="section-two__instructions-text--bold">Fruit-tella</span>
                            в упаковке с промолентой в розничной сети Пятерочка.
                        </p>
                    </div>
                    <div class="section-two__instructions">
                        <div class="section-two__instructions-title">Найди</div>
                        <p class="section-two__instructions-text">
                            Найди код внутри пачки мармелада
                            <span class="section-two__instructions-text--bold">Fruit-tella</span>
                        </p>
                    </div>
                    <div class="section-two__instructions">
                        <div class="section-two__instructions-title">Введи</div>
                        <p class="section-two__instructions-text">
                            Вводи неограниченное количество найденных кодов на сайте
                            <span class="section-two__instructions-text--bold">www.frutella-promo.ru</span>
                        </p>
                    </div>
                </div>

                <div class="win-prize-wr">
                    <div class="win-prize__title">Получай призы!</div>
                    <p class="win-prize">
                        Следи за результатами конкурса в
                        <a href="lk.html">Личном кабинете!</a>
                    </p>
                </div>
            </div>
        </section>
        <section id="section-three" class="section-three">
            <div class="container">
                <p class="section-three__title">Крутые призы</p>

                <div class="section-three__instructions-wr">
                    <div class="section-three__instructions">
                        <div class="flex space-between">
                            <p class="section-three__instructions-title section-three__instructions-title--prize-of">
                                <span class="section-three__instructions-title--big">приз</span>
                                недели
                            </p>
                            <img src="img/prize1.png" alt=""></div>
                        <div class="section-three__instructions-sub-title">Каждую неделю ма разыгрываем Ipone 6</div>
                        <p class="section-three__instructions-text">
                            Чем больше кодов ты зарегистрируешь, тем выше твои шансы на победу.
                        </p>
                    </div>

                    <div class="section-three__instructions">
                        <div class="flex space-between">
                            <p class="section-three__instructions-title section-three__instructions-title--prize-of">
                                <span class="section-three__instructions-title--big">приз</span>
                                дня
                            </p>
                            <img src="img/prize2.png" alt=""></div>
                        <div class="section-three__instructions-sub-title">Каждый день мы разыгрываем сертификат на 500 р.</div>
                        <p class="section-three__instructions-text">
                            Чем больше кодов ты зарегистрируешь, тем выше твои шансы на победу.
                        </p>
                    </div>
                </div>

                <div id="section-three__title-two" class="section-three__title-two"></div>
                <div class="flex space-between">
                    <div class="section-three__mobile-img">
                        <div class="section-three__mobile-title-wr">
                            <p class="section-three__mobile-title">победитель</p>
                            <p class="section-three__mobile-title">недели</p>
                            <div class="section-three__mobile-pic"></div>

                            <div class="section-three__mobile-name-wr">
                                <p class="section-three__mobile-name">{{winners.weekly_winner.weeklyName}} {{winners.weekly_winner.weeklyLastName}}</p>
                                <p class="section-three__mobile-sity">{{winners.weekly_winner.weeklyCity}}</p>
                            </div>

                        </div>
                    </div>
                    <div class="section-three__winners-wr">
                        <p class="section-three__title section-three__title--winners">победители дня</p>
                        <div class="section-three__slider-wr">
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" ng-repeat="winner in winners.daily_winners">
                                    <!-- <div class="swiper-slide" ng-repeat="winner in winners.weekly_winners.date"> -->
                                        <p class="section-three__slider">{{winner.day}} {{winner.month}}</p>
                                        <div class="flex space-between">
                                            <!-- ng-repeat="winer in winers" -->
                                            <div class="section-three__names-block section-three__names-block" ng-repeat="win in winner">
                                                <div class="section-three__names-block-img section-three__names-block-img--green"></div>
                                                <p class="section-three__names">{{win.first_name}} {{win.last_name}}</p>
                                                <p class="section-three__names-sity">{{win.city}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Add Arrows -->
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-fore">
            <div class="container section-fore__in">
                <div class="section-fore__frut-left"></div>
                <div class="section-fore__frut-right"></div>
                <h2 class="section-fore__title">Обратная связь</h2>
                <form name="feedback" class="section-fore__form" ng-submit="feedbackSubmit()" novalidate>
                    <!-- {{feedback | json}} -->
                    <select class="section-fore__form-section" name="" id="">
                        <option>Выберете вашу тему</option>
                        <option ng-model="title" ng-repeat="topic in topics" ng-value=topic.id>{{topic.title}}</option>
                    </select>

                    <div class="popup__input-wr">
                        <input type="text" name="userName"  ng-model="name" class="section-fore__form-input section-fore__form-input--name" placeholder="Твое имя" ng-class="{'has-error': feedback.userName.$invalid && feedback.userName.$touched}" required/>
                        <div class="error" ng-messages="feedback.userName.$error"  ng-messages-multiple="ng-messages-multiple" ng-if="feedback.userName.$touched || feedback.$submitted">
                            <div class="error-message" ng-message="required">Это обязательное поле</div>
                        </div>
                    </div>
                    <div class="popup__input-wr">
                        <input type="email" ng-model="email"  class="section-fore__form-input section-fore__form-input--email" name="userEmail" placeholder="Твой email" ng-class="{'has-error': feedback.userEmail.$invalid && feedback.userEmail.$touched}" minlength="5" maxlength="30" required />
                        <div class="error" ng-messages="feedback.userEmail.$error" ng-if="feedback.userEmail.$touched || feedback.$submitted" ng-messages-multiple="ng-messages-multiple">
                            <div class="error-message" ng-message="required">Это обязательное поле</div>
                            <div ng-message="email">Введите правильный email адресс</div>
                            <div ng-message="maxlength">Поле не должно привышать 30 символов</div>
                        </div>
                    </div>
                    <div class="popup__input-wr">
                        <textarea type="text" ng-model="message" class="section-fore__form-textarea" name="userMessage" rows="4" ng-minlength="10" ng-class="{'has-error': feedback.userMessage.$invalid && feedback.userMessage.$touched}" ng-maxlength="300" required>Напиши, что ты хочешь у нас спросить</textarea>
                        <div class="error" ng-messages="feedback.userMessage.$error" ng-show="feedback.userMessage.$touched" >
                            <div class="error-message" ng-message="required">Это обязательное поле</div>
                            <div ng-message="minlength">Сообщение должно быть не меньше 10 символов</div>
                            <div ng-message="maxlength">Сообщение должно быть не больше 200 символов</div>
                        </div>
                    </div>
                    <label class="section-fore__file-dwnl-label" for="section-fore__file-dwnl"><span>+</span>Приложи файл</label>
                    <input class="section-fore__file-dwnl" ng-model="files" name="userUploadFile" id="section-fore__file-dwnl" type="file" ngf-select="uploadFiles($files)" multiple accept="image/*">
                    <ul>
                        <li ng-repeat="f in files" style="font:smaller">
                            {{f.name}}
                        </li>
                    </ul>
                    <p class="section-fore__confines">Не более 3-х файлов общим размером до 10 Мб</p>
                    <input class="btn-submit btn-submit--send" type="submit" value="отправить">
                </form>
            </div>
        </section>
        <section id="section-five" class="section-five">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-slide--one">
                        <div class="container section-five__slider-wr">
                            <div class="section-five__slider">
                                <div class="section-five__slider-img"><div class="section-five__slider-img-in"> </div></div>
                                <div class="section-five__slider-text">
                                    <p class="section-five__slider-title">Пеппа Пиг</p>
                                    <p class="section-five__slider-paragraph">Друг точно оценит мармелад в форме свинки Пеппа!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide--two">
                        <div class="container section-five__slider-wr">
                            <div class="section-five__slider">
                                <div class="section-five__slider-img section-five__slider-img--two">
                                    <div class="section-five__slider-img-in-two"></div>
                                </div>
                                <div class="section-five__slider-text">
                                    <p class="section-five__slider-title">Медвежата</p>
                                    <p class="section-five__slider-paragraph">
                                        У друга апельсиновое настроение или клубничное? Поделись с ним фруктовым медвежонком!
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-slide--three">
                        <div class="container section-five__slider-wr">
                            <div class="section-five__slider">
                                <div class="section-five__slider-img section-five__slider-img--three">
                                    <div class="section-five__slider-img-in-tree">  </div>
                                </div>
                                <div class="section-five__slider-text">
                                    <p class="section-five__slider-title">Звери Микс</p>
                                    <p class="section-five__slider-paragraph">Твой друг похож на лягушку, динозавра, червяка или медведя? Поделись с ним жевательной мармеладкой!</p>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </section>
    </article>
    <!-- форма регистрации и авторизации -->
    <div class="b-popup b-popup--reg">
        <div class="popup-wr">
            <div class="popup-wr-in">
                <div class="popup popup--reg">
                    <div class="popup__close"></div>
                    <div class="popup__switch-btn-wr">
                        <div data-tab="tab1" class="popup__switch-btn popup__switch-btn--active">Регистрация</div>
                        <div data-tab="tab2" class="popup__switch-btn">войти</div>
                    </div>
                    <div class="popup__tab-content">
                        <div data-tab="tab1">
                            <p class="popup__title popup__title--tender">Для участия в конкурсе тебе нужно зарегистрироваться</p>
                            <form name="registrationForm" novalidate ng-submit="registrationSubmit()">
                                <div class="popup__input-wr">
                                    <input type="text" class="popup__input" name="userFirstName" placeholder="Твое имя" ng-model="registrationFormFirstName" ng-class="{'has-error': registrationForm.userFirstName.$invalid && registrationForm.userFirstName.$touched}" required />
                                    <div class="error" ng-messages="registrationForm.userFirstName.$error" ng-messages-multiple="ng-messages-multiple" ng-if="registrationForm.userFirstName.$touched || registrationForm.$submitted">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="text" class="popup__input" name="userLastName" placeholder="Твоя фамилия" ng-model="registrationFormLastName" ng-class="{'has-error': registrationForm.userLastName.$invalid && registrationForm.userLastName.$touched}" required />
                                    <div class="error" ng-messages="registrationForm.userLastName.$error" ng-messages-multiple="ng-messages-multiple" ng-if="registrationForm.userLastName.$touched || registrationForm.$submitted">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="text" class="popup__input" name="residingCity" placeholder="Твой город" ng-model="registrationFormResidingCity" ng-class="{'has-error': registrationForm.residingCity.$invalid && registrationForm.residingCity.$touched}" required />
                                    <div class="error" ng-messages="registrationForm.residingCity.$error" ng-messages-multiple="ng-messages-multiple" ng-if="registrationForm.residingCity.$touched || registrationForm.$submitted">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="phone" class="popup__input" name="userPhoneNumber" ng-model="registrationFormPhoneNumber" ng-class="{'has-error': registrationForm.userPhoneNumber.$invalid && registrationForm.userPhoneNumber.$touched}" ng-pattern="/^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/" ui-mask="+7 (999) 999-9999" required/>
                                    <div class="error" ng-messages="registrationForm.userPhoneNumber.$error" ng-if="registrationForm.userPhoneNumber.$touched || registrationForm.$submitted" >
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                        <div ng-message="pattern">Должен быть в формате +7(999) 581 601 16</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="email" class="popup__input" name="userEmail" placeholder="Твой email" ng-model="registrationFormEmail" minlength="5" maxlength="30" ng-class="{'has-error': registrationForm.userEmail.$invalid && registrationForm.userEmail.$touched}" required />
                                    <div class="error" ng-messages="registrationForm.userEmail.$error" ng-if="registrationForm.userEmail.$touched || registrationForm.$submitted" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                        <div ng-message="email">Введите правильный email адресс</div>
                                        <div ng-message="maxlength">Поле не должно привышать 30 символов</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="password" class="popup__input" name="userNewPassword" placeholder="Придумай пароль" ng-minlength="6" ng-maxlength="60" ng-model="registrationFormNewPassword" ng-class="{'has-error': registrationForm.userNewPassword.$invalid && registrationForm.userNewPassword.$touched}" required/>
                                    <div class="error" ng-messages="registrationForm.userNewPassword.$error" ng-if="registrationForm.userNewPassword.$touched || registrationForm.$submitted" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                        <div ng-message-exp="['minlength', 'maxlength']">Пароль должен быть не меньше 6 символов и не больше 60.</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="password" class="popup__input" name="userConfirmPassword" placeholder="Введи пароль еще раз" ng-model="registrationFormConfirmPassword" ng-class="{'has-error': registrationForm.userConfirmPassword.$invalid && registrationForm.userConfirmPassword.$touched}" required/>
                                    <div class="error" ng-messages="registrationForm.userConfirmPassword.$error" ng-if="registrationForm.userConfirmPassword.$touched && passwordError" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                        <div class="error-message">Пароли не совпадают</div>
                                    </div>
                                </div>
                                <div class="popup__radio-wr">
                                    <div class="popup__radio-in">
                                        <input id="radio-age-more" class="popup__radio-input" name="userAge" type="radio" ng-model="registrationFormAge" value="more" required/>
                                        <label class="popup__radio-label" for="radio-age-more">Мне<span> больше</span> 18 лет.</label>
                                    </div>
                                    <!-- adulthood -->
                                    <div class="popup__radio-in">
                                        <input id="radio-age-less" class="popup__radio-input" name="userAge" type="radio" ng-model="registrationFormAge" value="less" required/>
                                        <label class="popup__radio-label" for="radio-age-less">Мне<span> больше</span> 18 лет.</label>
                                    </div>
                                </div>
                                <div class="popup__checkbox-wr">
                                    <input class="popup__checkbox-input" id="personal-data" name="userAgreePersonalData" type="checkbox" ng-model="registrationFormAgreePersonalData" required/>
                                    <label class="popup__checkbox-label" for="personal-data">Даю разрешение на обработку персональных данных.</label>
                                    <div class="error" ng-if="registrationForm.userAgreePersonalData.$touched || registrationForm.$submitted" ng-messages="registrationForm.userAgreePersonalData.$error" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                    </div>
                                </div>
                                <div class="popup__checkbox-wr">
                                    <input class="popup__checkbox-input" id="regulations" name="userAgreeRules" type="checkbox" ng-model="registrationFormAgreeRules" required/>
                                    <label class="popup__checkbox-label" for="regulations">С <a download href="doc/rules.docx" >правилами</a> ознакомлен</label>
                                    <div class="error" ng-if="registrationForm.userAgreeRules.$touched || registrationForm.$submitted" ng-messages="registrationForm.userAgreeRules.$error" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                    </div>
                                </div>
                                <input type="submit" class="btn-submit btn-submit--pop-up-enter"  value="зарегистрироваться">
                            </form>
                        </div>
                        <div data-tab="tab2">
                            <form name="loginForm" ng-submit="loginSubmit()" novalidate>
                                <div class="popup__input-wr">
                                    <!-- popup__input-wr--error -->
                                    <input type="email" class="popup__input" name="userEmail" placeholder="Твой email" ng-model="loginFormEmail" minlength="5" maxlength="30" ng-class="{'has-error': loginForm.userEmail.$invalid && loginForm.userEmail.$touched}" required />
                                    <div class="error" ng-messages="loginForm.userEmail.$error" ng-if="loginForm.userEmail.$touched || loginForm.$submitted" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                        <div ng-message="email">Введите правильный email адресс</div>
                                        <div ng-message="maxlength">Поле не должно привышать 30 символов</div>
                                    </div>
                                </div>
                                <div class="popup__input-wr">
                                    <input type="password" class="popup__input" name="userloginPassord" placeholder="Пароль" ng-model="loginFormPassword" ng-class="{'has-error': loginForm.userloginPassord.$invalid && loginForm.userloginPassord.$touched}" ng-minlength="6" ng-maxlength="60" required/>
                                    <div class="error" ng-messages="loginForm.userloginPassord.$error" ng-if="loginForm.userloginPassord.$touched || loginForm.$submitted" ng-messages-multiple="ng-messages-multiple">
                                        <div class="error-message" ng-message="required">Это обязательное поле</div>
                                        <div ng-message-exp="['minlength', 'maxlength']">Пароль должен быть не меньше 6 символов и не больше 60.</div>
                                    </div>
                                </div>
                                <input class="btn-submit btn-submit--pop-up-enter" type="submit" value="Войти">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-buffer"></div>



<div>
    <div class="arrow-up-btn"></div>
    <!-- page-header--log-out отвечает за размер шрифта в pos-f  -->
    <header class="page-header page-header--green page-header--log-out">
        <div class="page-header-inner container">
            <div class="logo-page"></div>
            <nav class="main-navigation">
                <ul class="main-navigation__list">
                    <!--Если не залогинен элемент активен-->
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-two">Конкурс</a>
                    </li>
                    <!-- ========= -->
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-two">Правила</a>
                    </li>
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-three">Призы</a>
                    </li>
                    <li class="main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-three__title-two">Победители</a>
                    </li>
                    <li class="main-navigation__list-item main-navigation__list-item">
                        <a class="main-navigation__link" href="#/#section-five">Fruit-tella</a>
                    </li>
                    <li class="main-navigation__list-item">
                        <!-- Если залогинен элемент активен -->
                        <!--<a class="contest-btn contest-btn--login" href="#">введи код</a> -->
                        <a class="contest-btn contest-btn--logout" href="#">Участвуй в конкурсе</a>
                    </li>
                </ul>
            </nav>
            <div class="login-wr" ng-if="global.inIconName">
                <a ng-href="#/lk" class="login-ico"></a>
                <div class="login-name-wr">
                    <a ng-href="#/lk" class="login-name">{{global.inIconName}}</a>
                    <a ng-click="logOut();" class="login-btn">Выйти</a>
                </div>
            </div>
            <div class="logout-wr" ng-if="!global.inIconName">
                <a class="logout-ico"></a>
            </div>
        </div>
    </header>
    <article class="lk-article">
        <section class="section-lk">
            <div class="section-lk-wr">
                <div class="section-one__logo"></div>

                <div class="section-lk__input-codes-wr">
                    <div class="section-lk__input-codes-wr-left">
                        <p class="section-lk__input-codes-title">{{global.inIconName}} {{global.inIconLastName}}</p>

                        <div ng-if="!isUserBlocked"><!-- если пользователь заблокирован -->
                            <p class="section-lk__input-codes-label">Твои коды</p>
                            <div class="section-lk__input-code-wr">
                                <div class="section-lk__input-ico section-lk__input-ico--red"></div>
                                <input class="section-lk__input-code" type="text">
                                <p class="section-lk__not-meant">Этот код еще участвует в розыгрыше</p>
                            </div>
                            <div class="section-lk__input-code-wr">
                                <div class="section-lk__input-ico"></div>
                                <input class="section-lk__input-code" ng-value="goodPromoCode" type="text">
                                <a class="btn-submit btn-submit--lk btn-submit--lk-reg">получить подарок</a>
                            </div>
                        </div>

                        <div ng-if="isUserBlocked">
                            К сожалению вы заблокированны с {{blockedFromTime}} по {{blockedToTime}}. <br/>
                            За ввод большого количества кодов.
                        </div>


                        <!-- <div class="section-lk__input-code-wr">
                            <div class="section-lk__input-ico"></div>
                            <input class="section-lk__input-code" type="text">
                            <a class="btn-submit btn-submit--lk">получить подарок</a>
                        </div> -->
                    </div>

                    <!-- если пользователь заблокирован -->
                    <form class="section-lk__input-codes-wr-right" name="activatePromoCode" ng-submit="codeFormSubmit()" ng-if="!isUserBlocked" novalidate>
                        <input type="text" class="section-lk__input-pack-code" name="promoCode" ng-model="lk.promoCode" placeholder="Введи код с пачки">
                        <!-- ng-pattern="/^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/" -->
                        <!-- ui-mask="000000" -->
                        <!-- minlength="6" maxlength="6"  -->
                        <!-- ng-class="{'has-error': activatePromoCode.promoCode.$invalid && activatePromoCode.promoCode.$touched}" required -->
                        <div class="error" ng-messages="activatePromoCode.promoCode.$error" ng-if="activatePromoCode.promoCode.$touched || activatePromoCode.$submitted" >
                            <div class="error-message" ng-message="required">Это обязательное поле</div>
                            <div ng-message="pattern">Должен быть в формате +7(999) 581 601 16</div>
                        </div>

                        <input class="btn-submit btn-submit--lk-reg" type="submit" value="активировать">
                    </form>

                </div>
            </div>
        </section>
    </article>
    <!-- Поздравляем, ты выиграл iPhone 6 -->
    <div class="b-popup b-popup--prize">
        <div class="popup-wr">
            <div class="popup-wr-in">
                <div class="popup popup--prize b-popup--open">
                    <div class="popup__close"></div>
                    <div class="prize-icon">
                    <img src="img/mobile-ico.png" alt=""></div>
                    <p class="popup__prise-title">Поздравляем, ты выиграл iPhone 6</p>
                    <div class="popup__switch-btn-wr">
                        <div class="popup__switch-btn popup__switch-btn--active">Мне уже есть 18 лет</div>
                        <div class="popup__switch-btn">мне еще нет 18 лет</div>
                    </div>
                    <p class="popup__title">Для получения подарка заполни поля ниже</p>
                    <form name="prizeForm" ng-submit="registrationSubmit()" novalidate>
                        <div class="popup__input-wr">
                            <input type="text" class="popup__input" name="userFirstName" placeholder="Твое имя" ng-model="firstName" required />
                            <div class="error" ng-messages="prizeForm.userLastName.$error" ng-messages-multiple="ng-messages-multiple" ng-if="prizeForm.userFirstName.$touched || prizeForm.$submitted">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="text" class="popup__input" name="userLastName" placeholder="Твоя фамилия" ng-model="lastName" required />
                            <div class="error" ng-messages="prizeForm.userLastName.$error" ng-messages-multiple="ng-messages-multiple" ng-if="prizeForm.userLastName.$touched || prizeForm.$submitted">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="text" class="popup__input" name="userMiddleName" placeholder="Отчество" ng-model="middleName" required />
                            <div class="error" ng-messages="prizeForm.userMiddleName.$error" ng-messages-multiple="ng-messages-multiple" ng-if="prizeForm.userMiddleName.$touched || prizeForm.$submitted">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="text" class="popup__input" name="userDateBirth" placeholder="Отчество" ng-model="dateBirth"  ui-mask="MM/DD/YYYY" required />
                            <div class="error" ng-messages="prizeForm.userDateBirth.$error" placeholder="Дата, месяц и год рождения" ng-messages-multiple="ng-messages-multiple" ng-if="prizeForm.userDateBirth.$touched || prizeForm.$submitted">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="phone" class="popup__input" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/" ui-mask="+7 (999) 999-9999" placeholder="Номер телефона" required/>
                            <div class="error" ng-messages="prizeForm.userPhoneNumber.$error" ng-if="prizeForm.userPhoneNumber.$touched || prizeForm.$submitted" >
                                <div ng-message="required">Это обязательное поле</div>
                                <div ng-message="pattern">Должен быть в формате +7(999) 581 601 16</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="text" class="popup__input" name="residingCity" placeholder="Город проживания" ng-model="residingCity" required />
                            <div class="error" ng-messages="prizeForm.residingCity.$error" ng-messages-multiple="ng-messages-multiple" ng-if="prizeForm.residingCity.$touched || prizeForm.$submitted">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="phone" class="popup__input" name="userPassport" placeholder="Серия и номер паспорта" ng-model="passport" placeholder="Номер телефона" required/>
                            <div class="error" ng-messages="prizeForm.userPassport.$error" ng-if="prizeForm.userPassport.$touched || prizeForm.$submitted" >
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="phone" class="popup__input" name="userInn" placeholder="Серия и номер паспорта" ng-model="inn" placeholder="ИНН" required/>
                            <div class="error" ng-messages="prizeForm.userInn.$error" ng-if="prizeForm.userInn.$touched || prizeForm.$submitted" >
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__input-wr">
                            <input type="phone" class="popup__input" name="userSnils" placeholder="СНИЛС" ng-model="snils" placeholder="СНИЛС" required/>
                            <div class="error" ng-messages="prizeForm.userSnils.$error" ng-if="prizeForm.userSnils.$touched || prizeForm.$submitted" >
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__checkbox-wr">
                            <input class="popup__checkbox-input"  id="personal-data-prize" name="userAgreePersonalData" type="checkbox" ng-model="agreePersonalData" required/>
                            <label class="popup__checkbox-label" for="personal-data-prize">Даю разрешение на обработку персональных данных.</label>
                            <div class="error" ng-if="prizeForm.userAgreePersonalData.$touched || prizeForm.$submitted" ng-messages="prizeForm.userAgreePersonalData.$error" ng-messages-multiple="ng-messages-multiple">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>

                        <div class="popup__checkbox-wr">
                            <input class="popup__checkbox-input" id="regulations-prize" name="userAgreeRules" type="checkbox" ng-model="agreeRules" required/>
                            <label class="popup__checkbox-label" for="regulations-prize">С <a download href="doc/rules.docx">правилами</a> ознакомлен </label>
                            <div class="error" ng-if="prizeForm.userAgreeRules.$touched || prizeForm.$submitted" ng-messages="prizeForm.userAgreeRules.$error" ng-messages-multiple="ng-messages-multiple">
                                <div ng-message="required">Это обязательное поле</div>
                            </div>
                        </div>
                        <input class="btn-submit btn-submit--pop-up-enter" type="submit" value="отправить">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-buffer"></div>