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.disabled a {color: {{ scheme_primary_color }}28;}
  main .tabs .tab.disabled a:hover {color: {{ scheme_primary_color }}28;}
  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">
    <div class="nav-wrapper primary-color">
      {% 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 secondary-color">
      {% block nav_content %}{% endblock nav_content %}
      {% if current_user.is_authenticated %}
      <a class="btn-floating btn-large halfway-fab modal-trigger pink 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.index') }}"><i class="material-icons">build</i>Administration</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>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 disabled"><i class="material-icons">navigate_next</i></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 disabled"><i class="material-icons">navigate_next</i></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 disabled"><i class="material-icons">navigate_next</i></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>
      <li class="tab disabled"><i class="material-icons">navigate_next</i></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 %}
      <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
      {% 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.NOPAQUE_CONTACT %}
        <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.NOPAQUE_CONTACT }}?subject={{ config.NOPAQUE_MAIL_SUBJECT_PREFIX }} Contact"><i class="left material-icons">rate_review</i>Contact</a>
        <a class="btn-small green waves-effect waves-light" href="mailto:{{ config.NOPAQUE_CONTACT }}?subject={{ config.NOPAQUE_MAIL_SUBJECT_PREFIX }} 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() }}
{% if current_user.setting_dark_mode %}
<script src="{{ url_for('static', filename='js/darkreader.js') }}"></script>
<script>
  DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
</script>
{% endif %}
<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.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/nopaque/main.js') }}"></script>
{% assets output="js/nopaque/RessourceDisplays.compiled.js",
          "js/nopaque/RessourceDisplays/RessourceDisplay.js",
          "js/nopaque/RessourceDisplays/CorpusDisplay.js",
          "js/nopaque/RessourceDisplays/JobDisplay.js" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
{% assets output="js/nopaque/RessourceLists.compiled.js",
          "js/nopaque/RessourceLists/RessourceList.js",
          "js/nopaque/RessourceLists/CorpusList.js",
          "js/nopaque/RessourceLists/CorpusFileList.js",
          "js/nopaque/RessourceLists/JobList.js",
          "js/nopaque/RessourceLists/JobInputList.js",
          "js/nopaque/RessourceLists/JobResultList.js",
          "js/nopaque/RessourceLists/QueryResultList.js",
          "js/nopaque/RessourceLists/UserList.js" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
<script>
  // 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.appClient = new AppClient({% if current_user.is_authenticated %}{{ current_user.id }}{% endif %});
  nopaque.Forms.init();
  for (let flashedMessage of {{ get_flashed_messages(with_categories=True)|tojson }}) {nopaque.appClient.flash(flashedMessage[1], flashedMessage[0]);}
</script>
{% endblock scripts %}