<commit_before>{% load staticfiles %}
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="description"
          content="Wisely is an online social platform connecting massive online open course students with each other to motivate and learn together. Get motivated through pledging, collaborative learning, and social networking. For coursera, edx, and udemy."/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wisely</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/foundation.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/normalize.css' %}"/>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="{% static 'css/auth-buttons.css' %}" rel="stylesheet">
    <script src="{% static 'js/vendor/modernizr.js' %}"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="{% static 'js/vendor/fastclick.js' %}"></script>
    <meta property="og:title" content="Wisely - Motivate your learning">
    <meta property="og:description"
          content="Wisely incentivizes you to meet your personal learning goals on Stay on track and get rewarded for your hard work.">
    <meta property="og:url" content="http://projectwisely.com/"/>
    <meta property="og:image" content="http://www.projectwisely.com/static/images/logo-in-blue.png"/>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {% block headers_css %}
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="https://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
    {% endblock %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style-anim.css' %}" cache="false"/>
</head>
<body style="height: 100%">
{% block content %}
    <!-- Navigation -->
    <div id="main-nav-wrapper" style="margin-top: -87px; display: block; position: fixed;z-index: 200;top: 0;
         left: 0;right: 0;width: 100%;background: #3C3F50;padding: 0.25% 0">
        {% include 'nav-bar-alt.html' %}
    </div>
    {% if not request.is_mobile %}
        <!-- Header -->
        <section id="background-image">
            <div id="inner wide-row" style="width: 100%">
                <div style="padding-top: 4%;"
                     id="other-menu">
                    {% include 'nav-bar-alt.html' %}
                </div>

                <div class="row wide-row" style="width: 100%">
                    <div class="large-12 large-centered small-12 columns">
                        <div class="title" style="width: 100%">

                            <div id="slider-parent" style="position: relative; max-height: 500px">
                                <div id="goal-name" class="anim-circle"
                                     style="font-weight: 300; font-family: 'Lato',serif; font-size: 1.2em">GOAL
                                </div>
                                <div id="goal" class="anim-circle overall-mark"
                                     style="font-weight: 700; font-size: 55px; font-family: 'Lato',serif;">0<sup>%</sup>
                                </div>
                                <div id="above-slider" style="position: absolute; top: 160px; width: 100%;"><h1
                                        id="inner-above"
                                        style="font-size: 4em">CROWD-SOURCED MOTIVATION</h1>
                                </div>
                                <div id="slider"></div>
                                <div id="below-slider" style="position: absolute; top: 370px; width: 100%;">
                                    <h2
                                            id="below-text"
                                            style="font-size: 1.55em; font-family: 'Lato', sans-serif; font-weight: 300; color: #fff; text-align: left; padding: 0 6em">
                                        Wisely
                                        helps
                                        you meet your
                                        personal learning goals on <span
                                            style="font-family: 'Lato', sans-serif; font-weight: 400;">Coursera, EdX, and Udemy.</span>
                                        <br>
                                        Keep track of your progress and earn rewards for your achievements.</h2>

                                    <h3 class="finish-anim"
                                        style="text-align: center; color: #fff; font-family: 'Lato',sans-serif; font-weight: 300; font-size: 1.6em; margin-top: 20px">
                                        Get $20
                                        guaranteed rewards for course completion.</h3>
                                </div>
                                <div id="holder" class="anim-circle" style="margin: 0 auto; width: 100%; left: 0"></div>
                                <div id="reward"
                                     style="margin-top: 1.1em; font-weight: 700;font-size: 55px;font-family: 'Lato',serif;"
                                     class="anim-circle overall-mark"><sup>$</sup>0
                                </div>
                                <div id="reward-name" class="anim-circle"
                                     style="font-weight: 300; font-family: 'Lato',serif; font-size: 1.2em">REWARD
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row" style="display: block;  padding-top: 20px">
                    <a href="#after-scroll" style="color: #fff;">
                        <img src="{% static 'images/orange.png' %}" class="finish-anim" id="go-down" width="40"
                             style="margin: 0 auto; text-align: center; display: none"></a>
                </div>
            </div>
        </section>
    {% endif %}
    <section id="after-scroll">
        <div class="one-place" style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">
                <div class="large-12 columns">
                    <h1 style="font-family: 'Lato',sans-serif; font-weight: 700; font-size: 2.7em">ONE PLACE FOR
                        ALL
                        YOUR ONLINE COURSES</h1>

                    <h2 style="font-family: 'Lato',sans-serif; color: #58595b; font-weight: 300;">Wisely is the new
                        centralized social
                        platform for all your online education needs.</h2>
                </div>
            </div>
            <div class="row" style="margin-top: 80px">
                <div class="large-3 columns">
                    <a href="#pledge-ic" id="one-pledge">
                        <img src="{% static 'images/pledge-blue.png' %}">

                        <div class="row pledge-color" style="margin-top: 10px;">
                            <strong>PLEDGE</strong>
                        </div>
                    </a>
                </div>
                <div class="large-3 columns">
                    <a href="#track-ic" id="one-track">
                        <img src="{% static 'images/track-orange.png' %}">

                        <div class="row track-color" style="margin-top: 10px">
                            <strong>TRACK</strong>
                        </div>
                    </a>
                </div>
                <div class="large-3 columns">
                    <a href="#share-ic" id="one-connect">
                        <img src="{% static 'images/connect-grey.png' %}">

                        <div class="row connect-color" style="margin-top: 10px">
                            <strong>CONNECT</strong>
                        </div>
                    </a>
                </div>
                <div class="large-3 columns">
                    <a href="#achieve-ic" id="one-achieve">
                        <img src="{% static 'images/achieve-green.png' %}">

                        <div class="row achieve-color" style="margin-top: 10px">
                            <strong>ACHIEVE</strong>
                        </div>
                    </a>
                </div>
            </div>
            <div style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/pledge-icon.png' %}" id="pledge-ic">
            </div>
        </div>
        <div class="pledge-sec alt-back" id="pledge-sec"
             style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 class="pledge-color" style="margin-top: 30px;">PLEDGE</h1>

                <h2 style="text-align: left">Set your goal and make a pledge to commit to your learning. Get rewards for
                    completing assignments and reaching your goals, paid for by members who don't.</h2>

                <h3 style="text-align: left; font-size: 1.5em">Your first successful pledge is guaranteed a $20 award,
                    <a href="/learn-more">Learn more.</a></h3>
                <img src="{% static 'images/pledge-image.png' %}">
            </div>
            <div style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/track-icon.png' %}" id="track-ic">
            </div>
        </div>
        <div class="track-sec" id="track-sec" style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 class="track-color" style="margin-top: 30px;">TRACK</h1>

                <h2 style="text-align: left">Wisely helps you monitor your progress across all of your online courses in
                    one easy-to-use dashboard. Get notified of announcements, updates, and upcoming deadlines.</h2>

                <img src="{% static 'images/track-image.png' %}">
            </div>
            <div style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/connect-icon.png' %}" id="share-ic">
            </div>
        </div>
        <div class="share-sec alt-back" id="share-sec"
             style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">
                <h1 class="connect-color" style="margin-top: 30px;">CONNECT</h1>

                <h2 style="text-align: left">Meet your online classmates through Wisely and collaborate through live
                    study rooms. Share your progress with your followers and social networks.</h2>

                <img src="{% static 'images/connect-image.png' %}" style="margin-bottom: -80px">
            </div>
            <div style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/acheive-icon.png' %}" id="achieve-ic">
            </div>
        </div>
        <div class="achieve-sec" id="achieve-sec" style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 class="achieve-color" style="margin-top: 30px;">ACHIEVE</h1>

                <h2 style="text-align: center">Stay motivated, stay on track, and achieve your goals with Wisely.</h2>

                <img src="{% static 'images/achieve-image.png' %}" style="margin-bottom: -80px">
            </div>
            <div style="position: absolute; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100; bottom: -4em;">
                <img src="{% static 'images/logo-blue.png' %}">
            </div>
        </div>

        <div class="people-sec alt-back" style="margin-top: 2em;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 style="margin-bottom: 0; font-family: 'Lato',sans-serif; font-weight: 700; font-size: 2.7em">WHAT
                    PEOPLE SAY ABOUT US</h1>

                <h2>Wisely is the new centralized social platform for all your online education needs.</h2>
            </div>
            <div class="wide-row" style="margin-top: 20px">
                <img src="{% static 'images/people-image.png' %}" width="1428">
            </div>
            {% if not user.is_authenticated %}
                <button id="sign">GET STARTED</button>
            {% endif %}
        </div>
        <div class="last-sec blue-back">
            <div class="row">
                <div class="large-12 centered">
                    <div class="row" style="margin-top: 2em; font-size: 1.3em">
                        <a id="contact" style="margin-right: 2em; color: #fff">Contact Us</a>
                        <a href="https://www.facebook.com/projectwisely" style="margin-right: 2em"><img
                                src="{% static 'images/facebook-login.png' %}"></a>
                        <a href="https://twitter.com/learnwithwisely" style="margin-right: 2em"><img
                                src="{% static 'images/twitter-login.png' %}"></a>
                        <a href="https://plus.google.com/+Projectwisely/posts" style="margin-right: 2em"><img
                                src="{% static 'images/google-login.png' %}"></a>
                        <a href="https://www.linkedin.com/company/5079802?trk=tyah&trkInfo=tarId%3A1400458241641%2Ctas%3Awisely%2Cidx%3A2-2-7"
                           style="margin-right: 2em"><img
                                src="{% static 'images/linkedin-login.jpg' %}"></a>
                        <a href="/privacy" style="color: #fff">Privacy Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="contact-us" class="light-box">
        <div class="row text-center" id="contact-body">
            <h2 style="color: #333">Contact Us</h2>

            <div class="extra-top-margin">
                <input style="font-size: 1.2em" type="email" name="email" id='contact-email'
                       placeholder="Your Email Address">
            </div>
            <div class="extra-margin-top">
                <textarea id="contact-mail" style="font-size: 1.2em; font-family: Dist-light"
                          placeholder="Your Message"></textarea>
            </div>
            <div class="row">
                <div id="validation-contact" class="validation" style="color: red;"></div>
            </div>
            <div class="centered extra-top-margin">
                <button id="contact-send">Send</button>
            </div>
        </div>
    </div>

    <div id="sign-in" class="light-box-white">
        <form action="{% url 'users:login' %}" method="post" style="margin-bottom: 0" id="login-form">
            <div class="row">
                <div class="large-6 columns" style="margin-top: 10px">
                    <strong style="font-weight: 400;" id="sign-up-heading">SIGN IN</strong>
                </div>
                <div class="large-7 columns" style="text-align: right">
                    <a href="{% url 'social:begin' 'facebook' %}"><img
                            src="{% static 'images/facebook-login.png' %}"></a>
                    <a href="{% url 'social:begin' 'twitter' %}"><img
                            src="{% static 'images/twitter-login.png' %}"></a>
                    {#                    <a href="{% url 'social:begin' "google-oauth2" %}"><img#}
                    {#                            src="{% static 'images/google-login.png' %}"></a>#}
                    {#                    <a href="{% url 'social:begin' "linkedin" %}"><img#}
                    {#                            src="{% static 'images/Linkedin-logo.gif' %}"></a>#}
                </div>
            </div>
            <div class="row text-center" style="margin-top: 4em">
                {% csrf_token %}
                <div>
                    <input type="email" name="email" id="login-email" placeholder="Email">
                </div>
                <div class="extra-margin-top">
                    <input type="password" name="password" id="login-password" placeholder="Password">
                </div>
                <div class="centered" style="margin-top: 3em">
                    <div class="row">
                        <div class="large-6 small-6 columns">
                            <button type="submit">LOGIN</button>
                        </div>
                        <div class="large-6 small-6 columns">
                            <button type="button" id="sign-up">SIGN UP</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <form action="{% url 'users:sign-up' %}" method="post" style="display: none" id="signup-form">
            <div class="row">
                <div class="large-6 columns" style="margin-top: 10px">
                    <strong style="font-weight: 400;" id="sign-up-heading">SIGN IN</strong>
                </div>
                <div class="large-6 columns" style="text-align: right">
                    <a href="{% url 'social:begin' 'facebook' %}"><img
                            src="{% static 'images/facebook-login.png' %}"></a>
                    <a href="{% url 'social:begin' 'twitter' %}"><img
                            src="{% static 'images/twitter-login.png' %}"></a>
                    {% comment %}                    <a href="{% url 'social:begin' 'google-oauth2' %}"><img
                            src="{% static 'images/google-login.png' %}"></a>{% endcomment %}
                </div>
            </div>
            <div class="row text-center" style="margin-top: 4em">
                {% csrf_token %}
                <div class="row">
                    <p><label style="font-size: 1.2em">By signing up, you agree to our<a
                            href="/privacy">&nbsp;Privacy
                        Policy</a></label></p>
                </div>
                <div>
                    <input type="text" name="first_name" placeholder="<NAME>">
                </div>
                <div class="extra-margin-top">
                    <input type="text" name="last_name" placeholder="<NAME>">
                </div>
                <div class="extra-margin-top">
                    <input type="email" name="email" id="signup-email" placeholder="Email">
                </div>
                <div class="extra-margin-top">
                    <input type="password" name="password" id="signup-password" placeholder="Password">
                </div>
                <div class="centered" style="margin-top: 3em">
                    <div class="row">
                        <div class="large-6 columns">
                            <button type="submit" onclick="return $('#privacy-check')[0].checked;">SIGN UP</button>
                        </div>
                        <div class="large-6 columns">
                            <button type="button" id="login-switch">LOGIN</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
</body>
<script src="{% static 'js/foundation.min.js' %}"></script>
<script src="{% static 'js/jquery.lightbox_me.js' %}"></script>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="{% static 'js/raph.js' %}"></script>
<script src="{% static 'js/raph-plugin.js' %}"></script>
<script>
    {% if not request.is_mobile %}
        var archtype = Raphael("holder", 500, 500);
        archtype.defineLinearGradient("grad1", [
            {
                "id": "s1",
                "offset": "0",
                "style": "stop-color:#F15D28;stop-opacity:1;"},
            {
                "id": "s2",
                "offset": "1",
                "style": "stop-color:#F2CD03;stop-opacity:1;"}
        ]);

        var center = 250;

        archtype.defineLinearGradient("grad2", [
            {
                "id": "s1",
                "offset": "0",
                "style": "stop-color:#52ADA8;stop-opacity:1;"},
            {
                "id": "s2",
                "offset": "1",
                "style": "stop-color:#7EAA84;stop-opacity:1;"}
        ]);
        archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
            var alpha = 360 / total * value,
                    a = (90 - alpha) * Math.PI / 180,
                    x = xloc + R * Math.cos(a),
                    y = yloc - R * Math.sin(a),
                    path;
            if (total == value) {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                ];
            } else {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, +(alpha > 180), 1, x, y]
                ];
            }
            return {
                path: path
            };
        };

        archtype.customAttributes.arc2 = function (xloc, yloc, value, total, R) {
            var alpha = 360 / total * value,
                    a = (90 - alpha) * Math.PI / 180,
                    x = xloc - R * Math.cos(a),
                    y = yloc - R * Math.sin(a),
                    path;
            if (total == value) {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                ];
            } else {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, +(alpha > 180), 0, x, y]
                ];
            }
            return {
                path: path
            };
        };

        //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
        var goal_arc = archtype.path().attr({
            "stroke": "#f00",
            "stroke-width": 15,
            arc: [center, center, 0, 100, 200]
        });
        goal_arc.strokeLinearGradient("grad1", 15);
        goal_arc.rotate(-87, center, center);

        var top_grey_arc = archtype.path().attr({
            "stroke": "#836D65",
            "stroke-width": 15,
            "stroke-opacity": 0.6,
            arc: [center, center, 48.5, 100, 215]
        });
        top_grey_arc.rotate(-87, center, center);

        var bottom_grey_arc = archtype.path().attr({
            "stroke": "#836D65",
            "stroke-width": 15,
            "stroke-opacity": 0.6,
            arc: [center, center, 49.5, 100, 215]
        });
        bottom_grey_arc.rotate(-270, center, center);

        var money_arc = archtype.path().attr({
            "stroke": "#f00",
            "stroke-width": 15,
            arc2: [center, center, 0, 100, 200]
        });
        money_arc.strokeLinearGradient("grad2", 15);
        money_arc.rotate(-91, center, center);

        var circle = archtype.circle(250, 250, 192);
        circle.attr("fill", "#fff");
        circle.attr("fill-opacity", 0.5);

        // Sets the stroke attribute of the circle to white
        circle.attr("stroke", "#fff");
        var counter = 0;
        var counter_goal = 0;
        var counter_reward = 0;

        var other_int = null;

    {% else %}
        $('#after-scroll').show();
    {% endif %}
</script>
<script>
$(function () {
    function preload(arrayOfImages) {
        $(arrayOfImages).each(function () {
            $('<img/>')[0].src = this;
        });
    }

    function updateTime() {
        counter++;
        counter_goal = parseInt(counter);
        if (counter_goal > 75) {
            counter_goal = 75;
        }
        counter_reward = parseInt(counter_goal / 2) - 7;
        if (counter_reward < 0) {
            counter_reward = 3;
        }
        $('#goal').html(counter_goal.toString() + "<sup>%</sup>");
        $('#reward').html("<sup>$</sup>" + counter_reward.toString());
        if (counter > 300 && finished == false) {

        }
    }

    function start_anim() {
        // Custom Arc Attribute, position x&y, value portion of total, total value, Radius

        goal_arc.animate({
            arc: [center, center, 37, 100, 200]
        }, 5000, "linear", function () {
            finishanim();
            finished = true;
        });


        money_arc.animate({
            arc2: [center, center, 19, 100, 200]
        }, 5000, "linear", function () {

        });
        other_int = setInterval(updateTime, 10000 / 75);
    }

    $('#contact').click(function () {
        $('#contact-us').lightbox_me({centered: true});
    });

    $('#contact-send').click(function () {
        var myRootRef = new Firebase('https://wisely.firebaseIO.com/');

        if (validateEmail($('#contact-email').val())) {
            myRootRef.push({name: $('#contact-email').val().split('@')[0], msg: $('#contact-mail').val()});
            $('#contact-body').text('Thank You! We will keep you updated!');
            $('#contact-us').trigger('close');
        } else {
            $('#validation-contact').text('That doesn\'t look like a valid email address. Please try again.');
        }
    });
    function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }

    // Usage:

    preload([
        '{% static 'images/motivate-bg.jpg' %}',
        '{% static 'images/graph-bg.jpg' %}'
    ]);
    var int_func = null;
    var completed = false;
    var started = false;
    $("#slider").slider({
        value: 250,
        range: "min",
        min: 1,
        max: 1000,
        animate: 6000,
        create: function (event, ui) {
            setSliderTicks(event.target);
            $('.under-slide').css({width: '39px'});
            var $handle = $('.ui-slider-handle');
            $handle.append("<img src='{% static 'images/scene2.png' %}' class='under-slide'>");
            $handle.addClass('cursor');
        },
        slide: function (event, ui) {
            return started == false;
        }
    });
    var finished = false;

    function startanim() {
        $('#slider').slider('value', 1000);
        $('#above-slider').fadeOut(300);
        $('#below-slider').fadeOut(300);
        var image = $('#background-image');
        image.css("background", "url('{% static 'images/graph-bg.jpg' %}') no-repeat center center fixed");
        image.css("background-size", "cover");
        $('.anim-circle').css({visibility: 'visible'});
        $('.anim-circle').fadeIn(1000, function () {
            start_anim();
        });
        $('#slider').find('.ui-slider-range').css({'-moz-box-shadow': '0 0 10px #fff',
            '-webkit-box-shadow': '0 0 10px #fff', 'box-shadow': '0 0 10px #fff', 'background': '#fff'});

        started = true;
        $('.under-slide').addClass('white-back');
        moving = true;
    }

    {% if not request.is_mobile %}
        $('.ui-slider-handle').mousedown(function () {
            if (completed == false) {
                startanim();
                completed = true;
                int_func = setInterval(finishanim, 1000);
                return false;
            }
        });
        var moving = false;
        var down_state = 0;
        function finishanim() {
            if ($('#goal').text() == "75%") {

                $('.anim-circle').fadeOut(1000, function () {
                    $('.anim-circle').css({visibility: 'hidden'});
                    $('.anim-circle').show();
                    $('#after-scroll').fadeIn(1000);
                    $('.finish-anim').fadeIn(1000);
                });
                clearInterval(int_func);
                clearInterval(other_int);
                var image = $('#background-image');
                image.css("background", "url('{% static 'images/motivate-bg.jpg' %}') no-repeat center center fixed");
                image.css("background-size", "cover");
                $('#inner-above').text('MOTIVATE YOUR LEARNING');
                $('#inner-above').css('font-size', '4.5em');
                $('#above-slider').fadeIn(1000);
                $('#below-slider').fadeIn(1000);
                var $under = $('.under-slide');
                setInterval(function () {
                    if (down_state == 0) {
                        $('#go-down').attr({src: "{% static 'images/orange.png' %}"});
                    }
                    else if (down_state == 1) {
                        $('#go-down').attr({src: "{% static 'images/orange-one.png' %}"});
                    } else {
                        $('#go-down').attr({src: "{% static 'images/orange-both.png' %}"});
                    }
                    down_state++;
                    if (down_state == 3) {
                        down_state = 0;
                    }
                }, 1000);
                setTimeout(function () {
                    $under.removeClass('white-back');
                    $under.css({border: 'none'});
                    $under.attr({src: "{% static 'images/check-mark-green.png' %}"});
                }, 2000);
                //$('#slider').slider('value', 1000);
                $('#other-menu').show();
                $under.addClass('white-back');
                moving = true;
            }
        }

        function setSliderTicks(el) {
            var $slider = $(el);
            var max = $slider.slider("option", "max");
            var min = $slider.slider("option", "min");
            var spacing = 25;

            $slider.find('.ui-slider-tick-mark').remove();
            for (var i = 1; i < max - min; i++) {
                if (spacing * i < 100) {
                    $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
                }
            }
        }
    {% endif %}
    $('#one-pledge').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/pledge-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/pledge-blue.png' %}');
    });

    $('#one-track').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/track-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/track-orange.png' %}');
    });

    $('#one-connect').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/connect-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/connect-grey.png' %}');
    });

    $('#one-achieve').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/acheive-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/achieve-green.png' %}');
    });
    var mustSlideDown = true;
    var mustSlideUp = false;
    $(window).scroll(function () {

        var verschil = ($(window).scrollTop() / 5);

        if (verschil > 40 && mustSlideDown) {
            $('#other-menu').fadeOut(500);
            $('#main-nav-wrapper').animate({'margin-top': '0px' }, {duration: 500, queue: false});
            mustSlideDown = false;
            mustSlideUp = true;
        }
        else if (verschil < 40 && mustSlideUp) {
            $('#other-menu').fadeIn(500);
            $('#main-nav-wrapper').animate({'margin-top': '-87px' }, {duration: 500, queue: false});
            mustSlideUp = false;
            mustSlideDown = true;
        }
    });
    var count = 0;
    {% if not request.is_mobile %}
        setInterval(function () {
            if (completed == false) {
                if (moving == false || count >= 2) {
                    $('.under-slide').toggleClass('white-back');
                } else {
                    count++;
                }
            }
        }, 1000);
    {% endif %}
});
</script>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-41719357-2', 'projectwisely.com');
    ga('send', 'pageview');
</script>
{% block additionalScripts %}
    <script>
        $(function () {
            $('#sign').click(function () {
                switch_form();
                $('#sign-in').lightbox_me({centered: true});
            });


            function switch_form() {
                $('form', '#sign-in').hide();
                $('#sign-up-heading').text('SIGN UP');
                $('#signup-email').val($('login-email').val());
                $('#signup-password').val($('login-password').val());
                $('#signup-form').show();
            }

            function switch_form_login() {
                $('form', '#sign-in').hide();
                $('#sign-up-heading').text('SIGN IN');
                $('login-email').val($('#signup-email').val());
                $('login-password').val($('#signup-password').val());
                $('#login-form').show();
            }

            $('#sign-up').click(function () {
                switch_form();
            });
            $('#login-switch').click(function () {
                switch_form_login();
            });

            $('.login').click(function () {
                switch_form_login();
                $('#sign-in').lightbox_me({centered: true});
            });
        });
    </script>
{% endblock %}
</html>
<commit_msg>Remove hover<commit_after>{% load staticfiles %}
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="description"
          content="Wisely is an online social platform connecting massive online open course students with each other to motivate and learn together. Get motivated through pledging, collaborative learning, and social networking. For coursera, edx, and udemy."/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wisely</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/foundation.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/normalize.css' %}"/>
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="{% static 'css/auth-buttons.css' %}" rel="stylesheet">
    <script src="{% static 'js/vendor/modernizr.js' %}"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="{% static 'js/vendor/fastclick.js' %}"></script>
    <meta property="og:title" content="Wisely - Motivate your learning">
    <meta property="og:description"
          content="Wisely incentivizes you to meet your personal learning goals on Stay on track and get rewarded for your hard work.">
    <meta property="og:url" content="http://projectwisely.com/"/>
    <meta property="og:image" content="http://www.projectwisely.com/static/images/logo-in-blue.png"/>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    {% block headers_css %}
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="https://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
    {% endblock %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style-anim.css' %}" cache="false"/>
</head>
<body style="height: 100%">
{% block content %}
    <!-- Navigation -->
    <div id="main-nav-wrapper" style="margin-top: -87px; display: block; position: fixed;z-index: 200;top: 0;
         left: 0;right: 0;width: 100%;background: #3C3F50;padding: 0.25% 0">
        {% include 'nav-bar-alt.html' %}
    </div>
    {% if not request.is_mobile %}
        <!-- Header -->
        <section id="background-image">
            <div id="inner wide-row" style="width: 100%">
                <div style="padding-top: 4%;"
                     id="other-menu">
                    {% include 'nav-bar-alt.html' %}
                </div>

                <div class="row wide-row" style="width: 100%">
                    <div class="large-12 large-centered small-12 columns">
                        <div class="title" style="width: 100%">

                            <div id="slider-parent" style="position: relative; max-height: 500px">
                                <div id="goal-name" class="anim-circle"
                                     style="font-weight: 300; font-family: 'Lato',serif; font-size: 1.2em">GOAL
                                </div>
                                <div id="goal" class="anim-circle overall-mark"
                                     style="font-weight: 700; font-size: 55px; font-family: 'Lato',serif;">0<sup>%</sup>
                                </div>
                                <div id="above-slider" style="position: absolute; top: 160px; width: 100%;"><h1
                                    id="inner-above"
                                    style="font-size: 4em">CROWD-SOURCED MOTIVATION</h1>
                                </div>
                                <div id="slider"></div>
                                <div id="below-slider" style="position: absolute; top: 370px; width: 100%;">
                                    <h2
                                        id="below-text"
                                        style="font-size: 1.55em; font-family: 'Lato', sans-serif; font-weight: 300; color: #fff; text-align: left; padding: 0 6em">
                                        Wisely
                                        helps
                                        you meet your
                                        personal learning goals on <span
                                        style="font-family: 'Lato', sans-serif; font-weight: 400;">Coursera, EdX, and Udemy.</span>
                                        <br>
                                        Keep track of your progress and earn rewards for your achievements.</h2>

                                    <h3 class="finish-anim"
                                        style="text-align: center; color: #fff; font-family: 'Lato',sans-serif; font-weight: 300; font-size: 1.6em; margin-top: 20px">
                                        Get $20
                                        guaranteed rewards for course completion.</h3>
                                </div>
                                <div id="holder" class="anim-circle" style="margin: 0 auto; width: 100%; left: 0"></div>
                                <div id="reward"
                                     style="margin-top: 1.1em; font-weight: 700;font-size: 55px;font-family: 'Lato',serif;"
                                     class="anim-circle overall-mark"><sup>$</sup>0
                                </div>
                                <div id="reward-name" class="anim-circle"
                                     style="font-weight: 300; font-family: 'Lato',serif; font-size: 1.2em">REWARD
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row" style="display: block;  padding-top: 20px">
                    <a href="#after-scroll" style="color: #fff;">
                        <img src="{% static 'images/orange.png' %}" class="finish-anim" id="go-down" width="40"
                             style="margin: 0 auto; text-align: center; display: none"></a>
                </div>
            </div>
        </section>
    {% endif %}
    <section id="after-scroll">
        <div class="one-place" style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">
                <div class="large-12 columns">
                    <h1 style="font-family: 'Lato',sans-serif; font-weight: 700; font-size: 2.7em">ONE PLACE FOR
                        ALL
                        YOUR ONLINE COURSES</h1>

                    <h2 style="font-family: 'Lato',sans-serif; color: #58595b; font-weight: 300;">Wisely is the new
                        centralized social
                        platform for all your online education needs.</h2>
                </div>
            </div>
            <div class="row" style="margin-top: 80px">
                <div class="large-3 columns">
                    <a href="#pledge-ic" id="one-pledge">
                        <img src="{% static 'images/pledge-blue.png' %}">

                        <div class="row pledge-color" style="margin-top: 10px;">
                            <strong>PLEDGE</strong>
                        </div>
                    </a>
                </div>
                <div class="large-3 columns">
                    <a href="#track-ic" id="one-track">
                        <img src="{% static 'images/track-orange.png' %}">

                        <div class="row track-color" style="margin-top: 10px">
                            <strong>TRACK</strong>
                        </div>
                    </a>
                </div>
                <div class="large-3 columns">
                    <a href="#share-ic" id="one-connect">
                        <img src="{% static 'images/connect-grey.png' %}">

                        <div class="row connect-color" style="margin-top: 10px">
                            <strong>CONNECT</strong>
                        </div>
                    </a>
                </div>
                <div class="large-3 columns">
                    <a href="#achieve-ic" id="one-achieve">
                        <img src="{% static 'images/achieve-green.png' %}">

                        <div class="row achieve-color" style="margin-top: 10px">
                            <strong>ACHIEVE</strong>
                        </div>
                    </a>
                </div>
            </div>
            <div
                style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/pledge-icon.png' %}" id="pledge-ic">
            </div>
        </div>
        <div class="pledge-sec alt-back" id="pledge-sec"
             style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 class="pledge-color" style="margin-top: 30px;">PLEDGE</h1>

                <h2 style="text-align: left">Set your goal and make a pledge to commit to your learning. Get rewards for
                    completing assignments and reaching your goals, paid for by members who don't.</h2>

                <h3 style="text-align: left; font-size: 1.5em">Your first successful pledge is guaranteed a $20 award,
                    <a href="/learn-more">Learn more.</a></h3>
                <img src="{% static 'images/pledge-image.png' %}">
            </div>
            <div
                style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/track-icon.png' %}" id="track-ic">
            </div>
        </div>
        <div class="track-sec" id="track-sec" style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 class="track-color" style="margin-top: 30px;">TRACK</h1>

                <h2 style="text-align: left">Wisely helps you monitor your progress across all of your online courses in
                    one easy-to-use dashboard. Get notified of announcements, updates, and upcoming deadlines.</h2>

                <img src="{% static 'images/track-image.png' %}">
            </div>
            <div
                style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/connect-icon.png' %}" id="share-ic">
            </div>
        </div>
        <div class="share-sec alt-back" id="share-sec"
             style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">
                <h1 class="connect-color" style="margin-top: 30px;">CONNECT</h1>

                <h2 style="text-align: left">Meet your online classmates through Wisely and collaborate through live
                    study rooms. Share your progress with your followers and social networks.</h2>

                <img src="{% static 'images/connect-image.png' %}" style="margin-bottom: -80px">
            </div>
            <div
                style="position: absolute; bottom: -33px; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100">
                <img src="{% static 'images/acheive-icon.png' %}" id="achieve-ic">
            </div>
        </div>
        <div class="achieve-sec" id="achieve-sec" style="position: relative;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 class="achieve-color" style="margin-top: 30px;">ACHIEVE</h1>

                <h2 style="text-align: center">Stay motivated, stay on track, and achieve your goals with Wisely.</h2>

                <img src="{% static 'images/achieve-image.png' %}" style="margin-bottom: -80px">
            </div>
            <div
                style="position: absolute; width: 64px; left: 50%; margin-left: -32px; margin-top: 33px; z-index: 100; bottom: -4em;">
                <img src="{% static 'images/logo-blue.png' %}">
            </div>
        </div>

        <div class="people-sec alt-back" style="margin-top: 2em;  padding-left: 10px; padding-right: 10px">
            <div class="row">

                <h1 style="margin-bottom: 0; font-family: 'Lato',sans-serif; font-weight: 700; font-size: 2.7em">WHAT
                    PEOPLE SAY ABOUT US</h1>

                <h2>Wisely is the new centralized social platform for all your online education needs.</h2>
            </div>
            <div class="wide-row" style="margin-top: 20px">
                <img src="{% static 'images/people-image.png' %}" width="1428">
            </div>
            {% if not user.is_authenticated %}
                <button id="sign">GET STARTED</button>
            {% endif %}
        </div>
        <div class="last-sec blue-back">
            <div class="row">
                <div class="large-12 centered">
                    <div class="row" style="margin-top: 2em; font-size: 1.3em">
                        <a id="contact" style="margin-right: 2em; color: #fff">Contact Us</a>
                        <a href="https://www.facebook.com/projectwisely" style="margin-right: 2em"><img
                            src="{% static 'images/facebook-login.png' %}"></a>
                        <a href="https://twitter.com/learnwithwisely" style="margin-right: 2em"><img
                            src="{% static 'images/twitter-login.png' %}"></a>
                        <a href="https://plus.google.com/+Projectwisely/posts" style="margin-right: 2em"><img
                            src="{% static 'images/google-login.png' %}"></a>
                        <a href="https://www.linkedin.com/company/5079802?trk=tyah&trkInfo=tarId%3A1400458241641%2Ctas%3Awisely%2Cidx%3A2-2-7"
                           style="margin-right: 2em"><img
                            src="{% static 'images/linkedin-login.jpg' %}"></a>
                        <a href="/privacy" style="color: #fff">Privacy Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="contact-us" class="light-box">
        <div class="row text-center" id="contact-body">
            <h2 style="color: #333">Contact Us</h2>

            <div class="extra-top-margin">
                <input style="font-size: 1.2em" type="email" name="email" id='contact-email'
                       placeholder="Your Email Address">
            </div>
            <div class="extra-margin-top">
                <textarea id="contact-mail" style="font-size: 1.2em; font-family: Dist-light"
                          placeholder="Your Message"></textarea>
            </div>
            <div class="row">
                <div id="validation-contact" class="validation" style="color: red;"></div>
            </div>
            <div class="centered extra-top-margin">
                <button id="contact-send">Send</button>
            </div>
        </div>
    </div>

    <div id="sign-in" class="light-box-white">
        <form action="{% url 'users:login' %}" method="post" style="margin-bottom: 0" id="login-form">
            <div class="row">
                <div class="large-6 columns" style="margin-top: 10px">
                    <strong style="font-weight: 400;" id="sign-up-heading">SIGN IN</strong>
                </div>
                <div class="large-7 columns" style="text-align: right">
                    <a href="{% url 'social:begin' 'facebook' %}"><img
                        src="{% static 'images/facebook-login.png' %}"></a>
                    <a href="{% url 'social:begin' 'twitter' %}"><img
                        src="{% static 'images/twitter-login.png' %}"></a>
                    {#                    <a href="{% url 'social:begin' "google-oauth2" %}"><img#}
                    {#                            src="{% static 'images/google-login.png' %}"></a>#}
                    {#                    <a href="{% url 'social:begin' "linkedin" %}"><img#}
                    {#                            src="{% static 'images/Linkedin-logo.gif' %}"></a>#}
                </div>
            </div>
            <div class="row text-center" style="margin-top: 4em">
                {% csrf_token %}
                <div>
                    <input type="email" name="email" id="login-email" placeholder="Email">
                </div>
                <div class="extra-margin-top">
                    <input type="password" name="password" id="login-password" placeholder="Password">
                </div>
                <div class="centered" style="margin-top: 3em">
                    <div class="row">
                        <div class="large-6 small-6 columns">
                            <button type="submit">LOGIN</button>
                        </div>
                        <div class="large-6 small-6 columns">
                            <button type="button" id="sign-up">SIGN UP</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <form action="{% url 'users:sign-up' %}" method="post" style="display: none" id="signup-form">
            <div class="row">
                <div class="large-6 columns" style="margin-top: 10px">
                    <strong style="font-weight: 400;" id="sign-up-heading">SIGN IN</strong>
                </div>
                <div class="large-6 columns" style="text-align: right">
                    <a href="{% url 'social:begin' 'facebook' %}"><img
                        src="{% static 'images/facebook-login.png' %}"></a>
                    <a href="{% url 'social:begin' 'twitter' %}"><img
                        src="{% static 'images/twitter-login.png' %}"></a>
                    {% comment %}                    <a href="{% url 'social:begin' 'google-oauth2' %}"><img
                            src="{% static 'images/google-login.png' %}"></a>{% endcomment %}
                </div>
            </div>
            <div class="row text-center" style="margin-top: 4em">
                {% csrf_token %}
                <div class="row">
                    <p><label style="font-size: 1.2em">By signing up, you agree to our<a
                        href="/privacy">&nbsp;Privacy
                        Policy</a></label></p>
                </div>
                <div>
                    <input type="text" name="first_name" placeholder="<NAME>">
                </div>
                <div class="extra-margin-top">
                    <input type="text" name="last_name" placeholder="<NAME>">
                </div>
                <div class="extra-margin-top">
                    <input type="email" name="email" id="signup-email" placeholder="Email">
                </div>
                <div class="extra-margin-top">
                    <input type="password" name="password" id="signup-password" placeholder="Password">
                </div>
                <div class="centered" style="margin-top: 3em">
                    <div class="row">
                        <div class="large-6 columns">
                            <button type="submit" onclick="return $('#privacy-check')[0].checked;">SIGN UP</button>
                        </div>
                        <div class="large-6 columns">
                            <button type="button" id="login-switch">LOGIN</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div id="messages" class="light-box">
        <i class="fa fa-times-circle-o close" style="margin-top: -25px; margin-right: -30px; float: right"></i>

        <div class="row text-center">
            {% for message in messages %}
                {{ message }}
            {% endfor %}
        </div>
    </div>
{% endblock %}
</body>
<script src="{% static 'js/foundation.min.js' %}"></script>
<script src="{% static 'js/jquery.lightbox_me.js' %}"></script>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="{% static 'js/raph.js' %}"></script>
<script src="{% static 'js/raph-plugin.js' %}"></script>
<script>
    {% if not request.is_mobile %}
        var archtype = Raphael("holder", 500, 500);
        archtype.defineLinearGradient("grad1", [
            {
                "id": "s1",
                "offset": "0",
                "style": "stop-color:#F15D28;stop-opacity:1;"},
            {
                "id": "s2",
                "offset": "1",
                "style": "stop-color:#F2CD03;stop-opacity:1;"}
        ]);

        var center = 250;

        archtype.defineLinearGradient("grad2", [
            {
                "id": "s1",
                "offset": "0",
                "style": "stop-color:#52ADA8;stop-opacity:1;"},
            {
                "id": "s2",
                "offset": "1",
                "style": "stop-color:#7EAA84;stop-opacity:1;"}
        ]);
        archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
            var alpha = 360 / total * value,
                a = (90 - alpha) * Math.PI / 180,
                x = xloc + R * Math.cos(a),
                y = yloc - R * Math.sin(a),
                path;
            if (total == value) {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                ];
            } else {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, +(alpha > 180), 1, x, y]
                ];
            }
            return {
                path: path
            };
        };

        archtype.customAttributes.arc2 = function (xloc, yloc, value, total, R) {
            var alpha = 360 / total * value,
                a = (90 - alpha) * Math.PI / 180,
                x = xloc - R * Math.cos(a),
                y = yloc - R * Math.sin(a),
                path;
            if (total == value) {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                ];
            } else {
                path = [
                    ["M", xloc, yloc - R],
                    ["A", R, R, 0, +(alpha > 180), 0, x, y]
                ];
            }
            return {
                path: path
            };
        };

        //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
        var goal_arc = archtype.path().attr({
            "stroke": "#f00",
            "stroke-width": 15,
            arc: [center, center, 0, 100, 200]
        });
        goal_arc.strokeLinearGradient("grad1", 15);
        goal_arc.rotate(-87, center, center);

        var top_grey_arc = archtype.path().attr({
            "stroke": "#836D65",
            "stroke-width": 15,
            "stroke-opacity": 0.6,
            arc: [center, center, 48.5, 100, 215]
        });
        top_grey_arc.rotate(-87, center, center);

        var bottom_grey_arc = archtype.path().attr({
            "stroke": "#836D65",
            "stroke-width": 15,
            "stroke-opacity": 0.6,
            arc: [center, center, 49.5, 100, 215]
        });
        bottom_grey_arc.rotate(-270, center, center);

        var money_arc = archtype.path().attr({
            "stroke": "#f00",
            "stroke-width": 15,
            arc2: [center, center, 0, 100, 200]
        });
        money_arc.strokeLinearGradient("grad2", 15);
        money_arc.rotate(-91, center, center);

        var circle = archtype.circle(250, 250, 192);
        circle.attr("fill", "#fff");
        circle.attr("fill-opacity", 0.5);

        // Sets the stroke attribute of the circle to white
        circle.attr("stroke", "#fff");
        var counter = 0;
        var counter_goal = 0;
        var counter_reward = 0;

        var other_int = null;

    {% else %}
        $('#after-scroll').show();
    {% endif %}
</script>
<script>
$(function () {
    function preload(arrayOfImages) {
        $(arrayOfImages).each(function () {
            $('<img/>')[0].src = this;
        });
    }

    function updateTime() {
        counter++;
        counter_goal = parseInt(counter);
        if (counter_goal > 75) {
            counter_goal = 75;
        }
        counter_reward = parseInt(counter_goal / 2) - 7;
        if (counter_reward < 0) {
            counter_reward = 3;
        }
        $('#goal').html(counter_goal.toString() + "<sup>%</sup>");
        $('#reward').html("<sup>$</sup>" + counter_reward.toString());
        if (counter > 300 && finished == false) {

        }
    }

    function start_anim() {
        // Custom Arc Attribute, position x&y, value portion of total, total value, Radius

        goal_arc.animate({
            arc: [center, center, 37, 100, 200]
        }, 5000, "linear", function () {
            finishanim();
            finished = true;
        });


        money_arc.animate({
            arc2: [center, center, 19, 100, 200]
        }, 5000, "linear", function () {

        });
        other_int = setInterval(updateTime, 10000 / 75);
    }

    $('#contact').click(function () {
        $('#contact-us').lightbox_me({centered: true});
    });

    $('#contact-send').click(function () {
        var myRootRef = new Firebase('https://wisely.firebaseIO.com/');

        if (validateEmail($('#contact-email').val())) {
            myRootRef.push({name: $('#contact-email').val().split('@')[0], msg: $('#contact-mail').val()});
            $('#contact-body').text('Thank You! We will keep you updated!');
            $('#contact-us').trigger('close');
        } else {
            $('#validation-contact').text('That doesn\'t look like a valid email address. Please try again.');
        }
    });
    function validateEmail(email) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    }

    // Usage:

    preload([
        '{% static 'images/motivate-bg.jpg' %}',
        '{% static 'images/graph-bg.jpg' %}'
    ]);
    var int_func = null;
    var completed = false;
    var started = false;
    $("#slider").slider({
        value: 250,
        range: "min",
        min: 1,
        max: 1000,
        animate: 6000,
        create: function (event, ui) {
            setSliderTicks(event.target);
            $('.under-slide').css({width: '39px'});
            var $handle = $('.ui-slider-handle');
            $handle.append("<img src='{% static 'images/scene2.png' %}' class='under-slide'>");
            $handle.addClass('cursor');
        },
        slide: function (event, ui) {
            return started == false;
        }
    });
    var finished = false;

    function startanim() {
        $('#slider').slider('value', 1000);
        $('#above-slider').fadeOut(300);
        $('#below-slider').fadeOut(300);
        var image = $('#background-image');
        image.css("background", "url('{% static 'images/graph-bg.jpg' %}') no-repeat center center fixed");
        image.css("background-size", "cover");
        $('.anim-circle').css({visibility: 'visible'});
        $('.anim-circle').fadeIn(1000, function () {
            start_anim();
        });
        $('#slider').find('.ui-slider-range').css({'-moz-box-shadow': '0 0 10px #fff',
            '-webkit-box-shadow': '0 0 10px #fff', 'box-shadow': '0 0 10px #fff', 'background': '#fff'});

        started = true;
        $('.under-slide').addClass('white-back');
        moving = true;
    }

    {% if not request.is_mobile %}
        $('.ui-slider-handle').mousedown(function () {
            if (completed == false) {
                startanim();
                completed = true;
                int_func = setInterval(finishanim, 1000);
                return false;
            }
        });
        var moving = false;
        var down_state = 0;
        function finishanim() {
            if ($('#goal').text() == "75%") {

                $('.anim-circle').fadeOut(1000, function () {
                    $('.anim-circle').css({visibility: 'hidden'});
                    $('.anim-circle').show();
                    $('#after-scroll').fadeIn(1000);
                    $('.finish-anim').fadeIn(1000);
                });
                clearInterval(int_func);
                clearInterval(other_int);
                var image = $('#background-image');
                image.css("background", "url('{% static 'images/motivate-bg.jpg' %}') no-repeat center center fixed");
                image.css("background-size", "cover");
                $('#inner-above').text('MOTIVATE YOUR LEARNING');
                $('#inner-above').css('font-size', '4.5em');
                $('#above-slider').fadeIn(1000);
                $('#below-slider').fadeIn(1000);
                var $under = $('.under-slide');
                setInterval(function () {
                    if (down_state == 0) {
                        $('#go-down').attr({src: "{% static 'images/orange.png' %}"});
                    }
                    else if (down_state == 1) {
                        $('#go-down').attr({src: "{% static 'images/orange-one.png' %}"});
                    } else {
                        $('#go-down').attr({src: "{% static 'images/orange-both.png' %}"});
                    }
                    down_state++;
                    if (down_state == 3) {
                        down_state = 0;
                    }
                }, 1000);
                setTimeout(function () {
                    $under.removeClass('white-back');
                    $under.css({border: 'none'});
                    $under.attr({src: "{% static 'images/check-mark-green.png' %}"});
                }, 2000);
                //$('#slider').slider('value', 1000);
                $('#other-menu').show();
                $under.addClass('white-back');
                moving = true;
            }
        }

        function setSliderTicks(el) {
            var $slider = $(el);
            var max = $slider.slider("option", "max");
            var min = $slider.slider("option", "min");
            var spacing = 25;

            $slider.find('.ui-slider-tick-mark').remove();
            for (var i = 1; i < max - min; i++) {
                if (spacing * i < 100) {
                    $('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
                }
            }
        }
    {% endif %}
    $('#one-pledge').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/pledge-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/pledge-blue.png' %}');
    });

    $('#one-track').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/track-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/track-orange.png' %}');
    });

    $('#one-connect').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/connect-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/connect-grey.png' %}');
    });

    $('#one-achieve').hover(function () {
        $(this).find('img').attr('src', '{% static 'images/acheive-icon.png' %}');
    }, function () {
        $(this).find('img').attr('src', '{% static 'images/achieve-green.png' %}');
    });
    var mustSlideDown = true;
    var mustSlideUp = false;
    $(window).scroll(function () {

        var verschil = ($(window).scrollTop() / 5);

        if (verschil > 40 && mustSlideDown) {
            $('#other-menu').fadeOut(500);
            $('#main-nav-wrapper').animate({'margin-top': '0px' }, {duration: 500, queue: false});
            mustSlideDown = false;
            mustSlideUp = true;
        }
        else if (verschil < 40 && mustSlideUp) {
            $('#other-menu').fadeIn(500);
            $('#main-nav-wrapper').animate({'margin-top': '-87px' }, {duration: 500, queue: false});
            mustSlideUp = false;
            mustSlideDown = true;
        }
    });
    var count = 0;
    {% if not request.is_mobile %}
        setInterval(function () {
            if (completed == false) {
                if (moving == false || count >= 2) {
                    $('.under-slide').toggleClass('white-back');
                } else {
                    count++;
                }
            }
        }, 1000);
    {% endif %}
});
</script>
<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-41719357-2', '<EMAIL>');
    ga('send', 'pageview');
</script>
{% block additionalScripts %}
    <script>
        $(function () {
            {% if messages %}
                $('#messages').lightbox_me({centered: true});
            {% endif %}

            $('#sign').click(function () {
                switch_form();
                $('#sign-in').lightbox_me({centered: true});
            });


            function switch_form() {
                $('form', '#sign-in').hide();
                $('#sign-up-heading').text('SIGN UP');
                $('#signup-email').val($('login-email').val());
                $('#signup-password').val($('login-password').val());
                $('#signup-form').show();
            }

            function switch_form_login() {
                $('form', '#sign-in').hide();
                $('#sign-up-heading').text('SIGN IN');
                $('login-email').val($('#signup-email').val());
                $('login-password').val($('#<PASSWORD>').val());
                $('#login-form').show();
            }

            $('#sign-up').click(function () {
                switch_form();
            });
            $('#login-switch').click(function () {
                switch_form_login();
            });

            $('.login').click(function () {
                switch_form_login();
                $('#sign-in').lightbox_me({centered: true});
            });
        });
    </script>
{% endblock %}
</html>

{'fraction_non_alphanumeric': 0.17308668106760225, 'fraction_numerical': 0.02212331646780811, 'mean_word_length': 1.519468186134853, 'pattern_counts': {'":': 44, '<': 769, '<?xml version=': 0, '>': 773, 'https://': 24, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 65, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1772932', 'n_tokens_mistral': 21409, 'n_tokens_neox': 19162, 'n_words': 4164}