base.html 5.83 KB
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <title>{% block title %}Travel Carbon Footprint Calculator{% endblock %}</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        {% block meta %}
        <meta name="description" content="{{ content.meta.description }}">
        {% for author in content.meta.authors -%}
        <meta name="author" content="{{ author.name }} <{{ author.email }}>">
        {% endfor %}
        {% endblock %}
        {% block extra_meta %}
        {% endblock %}

        {% assets "common_css" %}
        <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
        {% endassets %}

        {% block css %}
        {% endblock %}
    </head>

    <body>
        <div class="navbar navbar-expand-lg navbar-inverse fixed-top">

            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-plane" aria-hidden="true"></span>
                {{ content.meta.title }}
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <ul class="navbar-nav">
    {#                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>#}
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('.home') }}">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="{{ url_for('.estimate') }}">Request Estimation</a></li>
    {#                <a class="nav-item nav-link" href="#">Features</a>#}
    {#                <a class="nav-item nav-link disabled" href="#">Disabled</a>#}
                </ul>
            </div>

        </div>

        <div id="image-background"></div>

        <div class="container">

            {% block hero -%}
            <div class="jumbotron">
                <h1>{{ content.home.hero.title | safe }}</h1>
                <p>{{ content.home.hero.description | markdown | safe }}</p>
            </div>
            {%- endblock %}

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible" role="alert">
                          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                          {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}

            <style>
                .nojs {
                    opacity: 0;
                    animation: 16.18s fadeIn;
                    animation-delay: 1.618s;
                    animation-fill-mode: forwards;

                    visibility: hidden;
                    pointer-events: none;
                }

                @keyframes fadeIn {
                    0% {
                        opacity: 0;
                    }
                    25% {
                        visibility: visible;
                        opacity: 1;
                    }
                    93% {
                        visibility: visible;
                        opacity: 1;
                    }
                    99% {
                        visibility: visible;
                        opacity: 0;
                    }
                    100% {
                        visibility: hidden;
                    }
                }
            </style>
            <div class="alert alert-danger nojs">
                Javascript appears disabled, and we totally get that.
                You'll need javascript to render the plots, though.
            </div>

            {% block body %}
            {% endblock %}
        </div>

        <footer class="page-footer">
            <div class="row">
                <div class="col-lg-4 text-center">
                    <a href="https://gitlab.irap.omp.eu/carbon/travel-carbon-footprint.irap.omp.eu">
                        v{{ version }}
                    </a>
                    <br>
                    AGPL-v3
                </div>
                <div class="col-lg-4 text-center">
                    {{ content.footer.credits }}
                    <br>
                    {{ visits }} visits since 2020
                </div>
                <div class="col-lg-4 text-center">
                    <a href="http://www.irap.omp.eu" class=""><img src="/static/img/irap.png" alt="IRAP" width="110px"></a>
                    &nbsp;
                    <a href="http://x-ifu.irap.omp.eu" class=""><img src="/static/img/ifu.png" alt="IFU" width="110px"></a>
                </div>
            </div>
        </footer>

        {% block tawk %}
            {% include "partial/tawk-to-widget.html" %}
        {% endblock %}

        {% assets "common_js" %}
        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
        {% endassets %}

        {% block js %}
        {% endblock %}

        {% block js_nojs %}
        <script type="text/javascript">
            Array.from(document.getElementsByClassName("nojs")).forEach(function(e){
                e.style['display'] = 'none';
            });
        </script>
        {% endblock %}
    </body>
</html>