index.html

{% extends 'cover.html' %}
{% from "helpers.html" import render_field %}

{% block extra_css_resources %}
{{ super() }}
<link href="{{ url_for('static', filename='css/login.css') }}" rel="stylesheet">
<link href="//gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
{% endblock %}

{% block extrajs %}
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
{% endblock %}

{% block inner_content %}
<div id="home-div">
    <h1 class="cover-heading">MarkDownBlog</h1>
    <p class="lead">MarkDownBlog is a simple blogging platform. And as its name suggests it, you use markdown to write your articles. Isn't that wonderful ? Also you'll have your very own subdomain.<br />Using bootstrap because I have no skills in design.</p>
    <p class="lead">
        <a href="#" class="btn btn-lg btn-primary open-login-div">Login</a>
        <a href="#" class="btn btn-lg btn-primary open-registration-div">Register</a>
    </p>
    <br />
    <p class="lead"><a href="{{ url_for('explore') }}" class="btn btn-lg btn-default">Explore the blogs !</a></p>
</div>

<div id="login-div">
    <!-- HTML5 does not allow action="" -->
    <form class="form-signin" method="post">
        {{ login_form.hidden_tag() }}
        {{ render_field(login_form.username, with_label=False) }}
        {{ render_field(login_form.password, with_label=False) }}
        <div class="pull-left">
            {{ render_field(login_form.rememberme, toggle=True) }}
        </div>
        <button class="btn btn-lg btn-primary btn-block" name="btn" type="submit" value="{{ login_form._prefix }}btn">Sign in</button>
    </form>
    <a href="#" class="open-registration-div" style="text-decoration: none;">
        No Account yet ? Click <b>here</b> to register.
    </a>
    <br />
    <a href="#" class="open-home-div" style="text-decoration: none;">
        Or click <b>here</b> to go back to the homepage.
    </a>
</div>

<div id="registration-div">
    <form class="form-signin" method="post">
        {{ register_form.hidden_tag() }}
        {{ render_field(register_form.username, with_label=False) }}
        {{ render_field(register_form.password, with_label=False) }}
        {{ render_field(register_form.confirm, with_label=False) }}
        <button class="btn btn-lg btn-primary btn-block" type="submit" name="btn" value="{{ register_form._prefix }}btn">Register</button>
    </form>
    <a href="#" class="open-login-div" style="text-decoration: none;">Already have an account ? Click <b>here</b> to login.</a>
    <br />
    <a href="#" class="open-home-div" style="text-decoration: none;">Or click <b>here</b> to go back to the homepage.</a>
</div>
{% endblock %}

{% block extra_js_at_end %}
<script>
    var current_div = $("#{{ start_div }}");

    function show_new_div(selector) {
        jselector = $(selector);
        current_div.fadeOut(400, function () {
            jselector.fadeIn();
        });
        current_div = jselector;
    }

    $(function() {
        $("#home-div").hide();
        $("#login-div").hide();
        $("#registration-div").hide();
        $("#{{ start_div }}").show();

        $(".open-login-div").click(function () {
            show_new_div("#login-div");
        });
        $(".open-registration-div").click(function () {
            show_new_div("#registration-div");
        });
        $(".open-home-div").click(function () {
            show_new_div("#home-div");
        });
    });
</script>
{% endblock %}