{% extends 'base.html' %}
{% load staticfiles %}
{% load i18n %}
{% block extrameta %}
<meta name="yandex-verification" content="d4650ffa30682d34" />
    <script>
$(document).ready(function() {
            if ($('#main-form').length) {
                /*
                 $('#order_form input[name="tel"]').mask("+7 (999) 999-99-99");
                 */

                $("#main-form").validate({
                    rules: {
                        username: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true
                        }
                    },
                    messages: {
                        username: {
                            required: 'Введите email',
                            email: 'Введите корректный email'
                        },
                        password: {
                            required: 'Введите пароль'
                        }
                    }
                });
            }
        });

     {#    FACEBOOK #}
        window.fbAsyncInit = function () {
            FB.init({
                appId: '1721263248140476',
                cookie: true,  // enable cookies to allow the server to access
                               // the session
                xfbml: true,  // parse social plugins on this page
                version: 'v2.7' // use graph api version 2.5
            });
        };

        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        function checkLoginState() {
            FB.login(function (response) {
                if (response.authResponse) {
                    $('input[name=signed_request]').val(response.authResponse.signedRequest);
                    FB.api('/me', {fields: 'email,first_name,last_name', access_token: ''}, function (response) {
                        console.log(JSON.stringify(response));
                        $('input[name=fbusername]').val(response.email);
                        $('input[name=fbid]').val(response.id);
                        $('input[name=fbfirstname]').val(response.first_name);
                        $('input[name=fblastname]').val(response.last_name);
                        $("#main-form").validate().cancelSubmit = true;
                        $('#main-form').submit();
                    });
                } else {
                    console.log('User cancelled login or did not fully authorize.');
                }
            }, {scope: 'email'});
        }
        {#    FACEBOOK #}

    function vk_login_make_url(){
        window.location.href = "https://oauth.vk.com/authorize?client_id=5604935&scope=email&redirect_uri=http://ifolica.ru/login/&response_type=code";
    }


    </script>
{% endblock extrameta %}

{% block extrabody %} id="mainpage"{% endblock %}
{% block main %}

    <style>
    .scroll-helper {
    display: block;
    position: fixed;
    bottom: 20px;
    left: 50%;
    width: 280px;
    margin-left: -140px;
    margin-top: 35px;
    text-align: center;
    font-size: 14px;
    transform: translateZ(0);
    z-index: 10;
}

    .scroll-helper {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
}
    .scroll-helper {
    color: #fff!important;
    text-decoration: none!important;
}

    .scroll-helper__icon {
    display: block;
    width: 51px;
    height: 51px;
    border-radius: 51px;
    position: relative;
    margin: 0 auto -10px;
}

    .scroll-helper__icon:after {
    display: block;
    position: absolute;
    left: 10px;
    top: 20px;
    width: 31px;
    height: 16px;
    background: url(https://lingualeo.com/build/images/main/flat/flat-sprite.34b65d.png) -115px 0 no-repeat;
}
    .scroll-helper__text {
    -webkit-transition: opacity .2s ease-out;
    -moz-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    font-weight: 400;
    opacity: .5;
}

.navigation__item:after, .scroll-helper__icon:after, .uauth-restore__back:before {
    content: '';
}

    </style>

        <a href="#2" class="scroll-helper" data-bottom-arrow="container"> <!-- canbe .show .hide .active -->
{#        <i class="scroll-helper__icon"></i>#}
        <div class="scroll-helper__text" data-bottom-arrow="text"></div>
    </a>

    <div id="slide_paging">
        <div class="wrapper">
            <ul>
                <li class="active"><a href="#2"><img src="{% static "images/menu-icon1.svg" %}" alt=""></a></li>
                <li><a href="#3"><img src="{% static "images/menu-icon2.svg" %}" alt=""></a></li>
                <li><a href="#4"><img src="{% static "images/menu-icon3.svg" %}" alt=""></a></li>
                <li><a href="#5"><img src="{% static "images/menu-icon4.svg" %}" alt=""></a></li>
                <li><a href="#6"><img src="{% static "images/menu-icon5.svg" %}" alt=""></a></li>
            </ul>
        </div>
    </div>

    <a href="javascript:;" class="down" id="down_but"> <img src="{% static "images/down-arrow.svg" %}" alt=""></a>

    <div id="scroller_block">
        <!-- scroll_block1 -->
        <div id="scroll_block1" class="scroll_block">
            <div class="wrapper">
                <div class="title">Увлекательный и эффективный способ научить вашего ребенка</div>
                <div class="sub-title">чтению, грамоте и пониманию прочитанного</div>
                <div class="img-block">
                    <img src="{% static "pics/block-pic1.png" %}" alt="">
                </div>

<!--
                     <div class="right-block">
                    <div class="form-block">
                        <form action="/login/" method="post" id="main-form">
                            <br><br><br><br><br>
                            <a href="/apps" type="button" class="btn btn-red">Перейти к играм</a>

                        </form>

                    </div>
                </div>
-->
                <div class="clear"></div>
            </div>
        </div>
        <!-- scroll_block1 END-->
        <!-- scroll_block2 -->
        <div id="scroll_block2" class="scroll_block">
            <div class="wrapper">
                <div class="title">Курс упражнений Айфолика разработан для детей разного возраста и разных способностей</div>
                <div class="sub-title">Упражнениями Айфолика можно заниматься с 3-х лет, начиная с фонетического блока и заканчивая упражнениями по чтению
                </div>
                <div class="clear"></div>
                <div class="img-block">
                    <img src="{% static "pics/block-pic2.png" %}" alt="">
                </div>
            </div>
        </div>
        <!-- scroll_block2 END-->
        <!-- scroll_block3 -->
        <div id="scroll_block3" class="scroll_block">
            <div class="wrapper">
                <div class="title">Курс упражнений Айфолика доступен на мобильных устройствах с операционными системами:</div>
                <ul class="download-block">
                    <li><a href="https://itunes.apple.com/ru/developer/viktor-karpukov/id1249396819" target="_blank"> <img src="{% static "images/apple.svg" %}" alt="">iOS</a></li>
                    <li><a href="https://play.google.com/store/apps/developer?id=IFOLICA" target="_blank"><img src="{% static "images/android-logo.svg" %}" alt="" >Android</a></li>
{#                    <li><a href="#"><img src="{% static "images/windows.svg" %}" alt="">Windows</a></li>#}
                </ul>
                <div class="img-block"><img src="{% static "pics/block-pic3.png" %}" alt=""></div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- scroll_block3 END-->
        <!-- scroll_block4 -->
        <div id="scroll_block4" class="scroll_block">
            <div class="wrapper">
                <div class="title">Вот так выглядят курс упражнений Айфолика</div>
                <div class="slider_block">
                    <div id="slider-1">
<!--                         <a href="javascript:;" class="jcarousel-control-prev"><img src="{% static "images/arrow-l.png" %}" alt=""></a> -->
<!--                         <a href="javascript:;" class="jcarousel-control-next"><img src="{% static "images/arrow-r.png" %}" alt=""></a> -->
                        <div class="jcarousel">
                            <ul class="list">
                                <li class="item"><img src="{% static "pics/1.png" %}" alt=""></li>
                                <li class="item"><img src="{% static "pics/2.png" %}" alt=""></li>
                                <li class="item"><img src="{% static "pics/3.png" %}" alt=""></li>
                                <li class="item"><img src="{% static "pics/4.png" %}" alt=""></li>
                                <li class="item"><img src="{% static "pics/5.png" %}" alt=""></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- scroll_block4 END-->
        <!-- scroll_block5 -->
        <div id="scroll_block5" class="scroll_block">
            <div class="wrapper">
                <div class="title">Мы научим вашего ребенка читать. Почему мы в этом уверены?</div>
                <div class="sub-title">Потому что мы применяем простые, понятные методы обучения, разработанные ведущими
                    специалистами дошкольного образования
                    с использованием современных интерактивных технологий
                </div>
                <div class="img-block"><img src="{% static "pics/block-pic4.png" %}" alt=""></div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- scroll_block5 END-->
        <!-- scroll_block6 -->
        <div id="scroll_block6" class="scroll_block">
            <div class="wrapper">
                <div class="title">Родители и воспитатели об Айфолике</div>
                <div class="slider_block">
                    <div id="slider-2">

                        <div class="jcarousel">
                            <ul class="list">
                                <li class="item">
                                    <div class="comment-block">
                                        <div class="foto">
                                            <img src="/media/ppl/p1.jpg" style="width:145px" alt="">
                                        </div>
                                        <div class="text">
                                            <p>Будущий первоклассник доволен, мамочка тоже)) Никак не могли заинтересовать чтением, к книжкам быстро терял интерес. Установили на планшет приложения – теперь спокойно сидит, играет, не отвлекается даже)) В общем, рекомендую!</p>
                                            <div class="name">Ольга Голубева</div>
                                            <div class="job">мама Коли 4 лет</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="comment-block">
                                        <div class="foto">
                                            <img src="/media/ppl/p2.jpg" style="width:145px" alt="">
                                        </div>
                                        <div class="text">
                                            <p>«Бумажное» пособие, которое в садике посоветовали, у нас не пошло – сын скучал, отвлекался и т.п. А тут как будто новая компьютерная развлекалка – конечно, это в разы интереснее ему. Да и мне самой было интересно покопаться, всё-таки в нашем детстве такого не было.</p>
                                            <div class="name">Диана Букова</div>
                                            <div class="job">мама Димы 5 лет</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="item">
                                    <div class="comment-block">
                                        <div class="foto">
                                            <img src="/media/ppl/p3.jpg" style="width:145px" alt="">
                                        </div>
                                        <div class="text">
                                            <p>Хороший курс, в первую очередь, естественно, на обучение чтению нацелен, но есть польза и для мелкой моторики – например, нужно заполнить букву мячиками, собрать букву из карандашей и т.д. Хороший способ чем-то занять ребёнка и одновременно начать подготовку к школе.</p>
                                            <div class="name">Елена Петровская</div>
                                            <div class="job">мама Насти 3 лет</div>
                                        </div>
                                    </div>
                                </li>
                                
                                 <li class="item">
                                    <div class="comment-block">
                                        <div class="foto">
                                            <img src="/media/ppl/p4.jpg" style="width:145px" alt="">
                                        </div>
                                        <div class="text">
                                            <p>Для занятий дома – самый подходящий вариант! Ребёнок в восторге, занимается понемногу каждый день. Анимация в приложениях простая, но симпатичная, материал подан доходчиво. Особенность методики – буквы идут не в алфавитном порядке, а от тех, которые легко произнести, к более проблемным (типа «л» и «р»).</p>
                                            <div class="name">Мария Афанасьева</div>
                                            <div class="job">бабушка Веры 4 лет</div>
                                        </div>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <p class="jcarousel-pagination"></p>
                    </div>
                    <a href="/page/feedbacks/" class="btn-comment">Все отзывы</a>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- scroll_block6 END-->
        <div class="pfooter"></div>
    </div>
{% endblock %}