nopaque/web/app/templates/nopaque.html.j2

{% extends "materialize/base.html.j2" %}
{% from '_colors.html.j2' import colors %}

{% block html_attribs %} lang="en"{% endblock html_attribs %}

{% block head %}
{{ super() }}
<link href="{{ url_for('static', filename='images/nopaque_-_favicon.png') }}" rel="icon">
{% endblock head %}

{% block metas %}
<meta charset="UTF-8">
{{ super() }}
{% endblock metas %}

{% block title %}{{title}}{% endblock title %}

{% block styles %}
{{ super() }}
{% if current_user.is_authenticated %}
<link href="{{ url_for('static', filename='css/materialize.sidenav-fixed.css') }}" media="screen,projection" rel="stylesheet">
{% endif %}
<link href="{{ url_for('static', filename='css/materialize.sticky-footer.css') }}" media="screen,projection" rel="stylesheet">
<link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet">
<style>
  .primary-color {background-color: {{ colors.primary }} !important;}
  .primary-color-text {color: {{ colors.primary }} !important;}
  .secondary-color {background-color: {{ colors.secondary }} !important;}
  .secondary-color-text {color: {{ colors.secondary }} !important;}
  .footer-color {background-color: {{ colors.footer }} !important;}
  .footer-color-text {color: {{ colors.footer }} !important;}

  .corpus-analysis-color {background-color: {{ colors.corpus_analysis }} !important;}
  .corpus-analysis-color-text {color: {{ colors.corpus_analysis }} !important;}
  .corpus-analysis-color.darken {background-color: {{ colors.corpus_analysis_darken }} !important;}
  .corpus-analysis-color-text.text-darken {color: {{ colors.corpus_analysis_darken }} !important;}
  .corpus-analysis-color.lighten {background-color: {{ colors.corpus_analysis_lighten }} !important;}
  .corpus-analysis-color-text.text-lighten {color: {{ colors.corpus_analysis_lighten }} !important;}

  .file-setup-color {background-color: {{ colors.file_setup }} !important;}
  .file-setup-color-text {color: {{ colors.file_setup }} !important;}
  .file-setup-color.darken {background-color: {{ colors.file_setup_darken }} !important;}
  .file-setup-color-text.text-darken {color: {{ colors.file_setup_darken }} !important;}
  .file-setup-color.lighten {background-color: {{ colors.file_setup_lighten }} !important;}
  .file-setup-color-text.text-lighten {color: {{ colors.file_setup_lighten }} !important;}

  .ocr-color {background-color: {{ colors.ocr }} !important;}
  .ocr-color-text {color: {{ colors.ocr }} !important;}
  .ocr-color.darken {background-color: {{ colors.ocr_darken }} !important;}
  .ocr-color-text.text-darken {color: {{ colors.ocr_darken }} !important;}
  .ocr-color.lighten {background-color: {{ colors.ocr_lighten }} !important;}
  .ocr-color-text.text-lighten {color: {{ colors.ocr_lighten }} !important;}

  .nlp-color {background-color: {{ colors.nlp }} !important;}
  .nlp-color-text {color: {{ colors.nlp }} !important;}
  .nlp-color.darken {background-color: {{ colors.nlp_darken }} !important;}
  .nlp-color-text.text-darken {color: {{ colors.nlp_darken }} !important;}
  .nlp-color.lighten {background-color: {{ colors.nlp_lighten }} !important;}
  .nlp-color-text.text-lighten {color: {{ colors.nlp_lighten }} !important;}

  {% if scheme_primary_color is not defined %}
    {% set scheme_primary_color = colors.primary %}
  {% endif %}
  {% if scheme_secondary_color is not defined %}
    {% set scheme_secondary_color = colors.secondary %}
  {% endif %}
  main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ scheme_primary_color }};}
  main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ scheme_secondary_color }};}
  main .pagination li.active {background-color: {{ scheme_primary_color }};}
  main .table-of-contents a.active {border-color: {{ scheme_primary_color }};}
  main .tabs .tab a {color: inherit;}
  main .tabs .tab a:hover {color: {{ scheme_primary_color }};}
  main .tabs .tab a.active, .tabs .tab a:focus.active {
    color: {{ scheme_primary_color }};
    background-color: {{ scheme_primary_color }}28;
  }
  main .tabs .indicator {background-color: {{ scheme_primary_color }};}
</style>
{% endblock styles %}

{% block navbar %}
<div class="navbar-fixed">
  <nav class="nav-extended primary-color">
    <div class="nav-wrapper">
      {% if current_user.is_authenticated %}
      <a href="#" data-target="sidenav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      {% endif %}
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;"></a>
      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-large-only" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;"></a>
      <ul class="right">
        <li class="hide-on-med-and-down{% if request.path == url_for('main.news') %} active{% endif %}"><a href="{{ url_for('main.news') }}"><i class="material-icons left">notifications</i>News</a></li>
        {% if current_user.is_authenticated %}
        <li class="hide-on-med-and-down{% if request.path == url_for('main.dashboard') %} active{% endif %}"><a href="{{ url_for('main.dashboard') }}"><i class="material-icons left">dashboard</i>Dashboard</a></li>
        <li class="hide-on-med-and-down"><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
        {% else %}
        <li{% if request.path == url_for('auth.register') %} class="active"{% endif %}><a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a></li>
        <li{% if request.path == url_for('auth.login') %} class="active"{% endif %}><a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a></li>
        {% endif %}
      </ul>
    </div>
    <div class="nav-content">
      {% block nav_content %}{% endblock nav_content %}
      {% if current_user.is_authenticated %}
      <a class="btn-floating btn-large halfway-fab modal-trigger tooltipped waves-effect waves-light" data-tooltip="Roadmap" href="#roadmap-modal"><i class="material-icons">explore</i></a>
      {% endif %}
    </div>
  </nav>
</div>

{% if current_user.is_authenticated %}
<ul class="dropdown-content" id="nav-more-dropdown">
  <li><a href="{{ url_for('settings.index') }}"><i class="material-icons left">settings</i>Settings</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
</ul>
{% endif %}
{% endblock navbar %}

{% block sidenav %}
<ul class="sidenav sidenav-fixed{% if not current_user.is_authenticated %} hide{% endif %}">
  {% if current_user.is_authenticated %}
  <li>
    <div class="user-view">
      <div class="background primary-color"></div>
      <span class="white-text name">{{ current_user.username }}</span>
      <span class="white-text email">{{ current_user.email }}</span>
    </div>
  </li>
  <li><a href="{{ url_for('main.index') }}">nopaque</a></li>
  <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
  <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
  <li><a href="{{ url_for('main.dashboard', _anchor='corpora') }}" style="padding-left: 47px;"><i class="material-icons">book</i>My Corpora</a></li>
  <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Processes & Services</a></li>
  <li style="background-color: {{ colors.file_setup }}; border-left: 10px solid {{ colors.file_setup_darken }};"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
  <li style="background-color: {{ colors.ocr }}; border-left: 10px solid {{ colors.ocr_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
  <li style="background-color: {{ colors.nlp }}; border-left: 10px solid {{ colors.nlp_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
  <li style="background-color: {{ colors.corpus_analysis }}; border-left: 10px solid {{ colors.corpus_analysis_darken }}; margin-top: 5px;"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Account</a></li>
  <li><a href="{{ url_for('settings.index') }}"><i class="material-icons">settings</i>Settings</a></li>
  <li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
  {% else %}
  <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">assignment</i>Register</a></li>
  <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">login</i>Log in</a></li>
  {% endif %}
  {% if current_user.is_administrator() %}
  <li><div class="divider"></div></li>
  <li><a class="subheader">Administration</a></li>
  <li><a href="{{ url_for('admin.users') }}"><i class="material-icons">build</i>Administration tools</a></li>
  {% endif %}
</ul>
{% endblock sidenav %}

{% block main_attribs %} class="grey lighten-5"{% endblock main_attribs %}

{% block main %}
{% block page_content %}{% endblock page_content %}
{% if current_user.is_authenticated %}
<div id="roadmap-modal" class="modal">
  <div class="modal-content">
    <h2><i class="material-icons">explore</i>Roadmap</h2>
    <p>The roadmap guides you through nopaque's workflow! If you have the necessary input fie formats, you can directly jump into the corresponding process. If not, you can use the roadmap to jump right to the preceding process.</p>
    <ul class="tabs tabs-fixed-width">
      <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
      <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
      <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
      <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
      {% if corpus %}
      <li class="tab"><a{%if request.path == url_for('corpora.add_corpus_file', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add corpus file(s)</a></li>
      {% else %}
      <li class="tab disabled tooltipped" data-tooltip="Select a corpus first" target="_self"><a>Add corpus file(s)</a></li>
      {% endif %}
      {% if corpus %}
      {% if corpus.files.all() %}
      <li class="tab"><a{%if request.path == url_for('corpora.analyse_corpus', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus analysis</a></li>
      {% else %}
      <li class="tab disabled tooltipped" data-tooltip="Add at least one corpus file first"><a>Corpus analysis</a></li>
      {% endif %}
      {% else %}
      <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Corpus analysis</a></li>
      {% endif %}
    </ul>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>
{% endif %}
{% endblock main %}

{% block footer_attribs %} class="page-footer footer-color"{% endblock footer_attribs %}

{% block footer %}
<div class="container">
  <div class="row">
    <div class="col s6 m3">
      <a href="https://www.dfg.de/">
        <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
      </a>
    </div>
    <div class="col s6 m3 offset-m1 center-align">
      <a href="https://www.uni-bielefeld.de/sfb1288/">
        <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_sfb_1288.png') }}">
      </a>
    </div>
    <div class="col s12 m3 offset-m1">
      <h5 class="white-text">Legal Notice</h5>
      <ul>
        <li><a class="grey-text text-lighten-3" href="https://www.uni-bielefeld.de/(en)/impressum/">Legal Notice</a></li>
        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.privacy_policy') }}">Privacy statement (GDPR)</a></li>
        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.terms_of_use') }}">Terms of use</a></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>
<div class="footer-copyright primary-color">
  <div class="container">
    <div class="row" style="margin-bottom: 0;">
      <div class="col s12 m3">
        <span>© 2020 Bielefeld University</span>
      </div>
      <div class="col s12 m9 right-align">
        <a class="btn-small blue waves-effect waves-light" href="{{ url_for('main.about_and_faq') }}"><i class="left material-icons">info_outline</i>About and faq</a>
        {% if config.CONTACT_EMAIL_ADRESS %}
        <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Contact"><i class="left material-icons">rate_review</i>Contact</a>
        <a class="btn-small green waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?subject=[nopaque] Feedback"><i class="left material-icons">feedback</i>Feedback</a>
        {% endif %}
        <a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque"><i class="left material-icons">code</i>GitLab</a>
      </div>
    </div>
  </div>
</div>
{% endblock footer %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/darkreader.js') }}"></script>
<script src="{{ url_for('static', filename='js/jsonpatch.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/list.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/socket.io.slim.js') }}"></script>
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
<script>
  {% if current_user.setting_dark_mode %}
  DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
  {% endif %}
  // Disable all option elements with no value
  for (let optionElement of document.querySelectorAll('option[value=""]')) {
    optionElement.disabled = true;
  }
  M.AutoInit();
  M.CharacterCounter.init(document.querySelectorAll('input[data-length][type="email"], input[data-length][type="password"], input[data-length][type="text"], textarea[data-length]'));
  M.Dropdown.init(document.querySelectorAll('#nav-more-dropdown-trigger'), {alignment: 'right', constrainWidth: false, coverTrigger: false});
  nopaque.Forms.init();
  {% if current_user.is_authenticated %}
  nopaque.socket.emit('user_data_stream_init');
  {% endif %}
  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {
    nopaque.flash(flashedMessage[1], flashedMessage[0]);
  }
</script>
{% endblock scripts %}