mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-10-31 02:32:45 +00:00
301 lines
16 KiB
Django/Jinja
301 lines
16 KiB
Django/Jinja
{% import "utils/macros.html.j2" as Macros %}
|
||
{% import "utils/materialize.html.j2" as M %}
|
||
|
||
|
||
{% if title is not defined %}
|
||
{% set title = None %}
|
||
{% endif %}
|
||
|
||
{% if headline is not defined %}
|
||
{% set headline = title %}
|
||
{% endif %}
|
||
|
||
{% if parallax is not defined %}
|
||
{% set parallax = False %}
|
||
{% endif %}
|
||
|
||
{% if main_class is not defined %}
|
||
{% set main_class = 'grey lighten-5' %}
|
||
{% endif %}
|
||
|
||
{% set primary_color = '#00426f' %}
|
||
{% set secondary_color = '#b1b3b4' %}
|
||
|
||
{% set corpus_analysis_color = '#aa9cc9' %}
|
||
{% set corpus_analysis_color_darken = '#6b3f89' %}
|
||
{% set corpus_analysis_color_lighten = '#ebe8f6' %}
|
||
|
||
{% set file_setup_color = '#d5dc95' %}
|
||
{% set file_setup_color_darken = '#a1b300' %}
|
||
{% set file_setup_color_lighten = '#f2f3e1' %}
|
||
|
||
{% set nlp_color = '#98acd2' %}
|
||
{% set nlp_color_darken = '#0064a3' %}
|
||
{% set nlp_color_lighten = '#e5e8f5' %}
|
||
|
||
{% set ocr_color = '#a9d8c8' %}
|
||
{% set ocr_color_darken = '#00a58b' %}
|
||
{% set ocr_color_lighten = '#e7f4f1' %}
|
||
|
||
{%- macro insert_content() -%}
|
||
{% block page_content %}{% endblock %}
|
||
{%- endmacro -%}
|
||
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="theme-color" content="#ee6e73">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>
|
||
nopaque
|
||
{% if request.path != url_for('main.index') %} – {{ title }}{% endif %}
|
||
</title>
|
||
<link rel="icon" href="{{ url_for('static', filename='images/nopaque_-_favicon.png') }}">
|
||
<!--Import Google Icon Font-->
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/material_design_icons.min.css') }}">
|
||
<!--Import materialize.css-->
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
|
||
<style>
|
||
.primary-color {background-color: {{ primary_color }} !important;}
|
||
.primary-color-text {color: {{ primary_color }} !important;}
|
||
.secondary-color {background-color: {{ secondary_color }} !important;}
|
||
.secondary-color-text {color: {{ secondary_color }} !important;}
|
||
|
||
.corpus-analysis-color {background-color: {{ corpus_analysis_color }} !important;}
|
||
.corpus-analysis-color-text {color: {{ corpus_analysis_color }} !important;}
|
||
.corpus-analysis-color.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
|
||
.corpus-analysis-color-text.text-darken {color: {{ corpus_analysis_color_darken }} !important;}
|
||
.corpus-analysis-color.lighten {background-color: {{ corpus_analysis_color_lighten }} !important;}
|
||
.corpus-analysis-color-text.text-lighten {color: {{ corpus_analysis_color_lighten }} !important;}
|
||
|
||
.file-setup-color {background-color: {{ file_setup_color }} !important;}
|
||
.file-setup-color-text {color: {{ file_setup_color }} !important;}
|
||
.file-setup-color.darken {background-color: {{ file_setup_color_darken }} !important;}
|
||
.file-setup-color-text.text-darken {color: {{ file_setup_color_darken }} !important;}
|
||
.file-setup-color.lighten {background-color: {{ file_setup_color_lighten }} !important;}
|
||
.file-setup-color-text.text-lighten {color: {{ file_setup_color_lighten }} !important;}
|
||
|
||
.ocr-color {background-color: {{ ocr_color }} !important;}
|
||
.ocr-color-text {color: {{ ocr_color }} !important;}
|
||
.ocr-color.darken {background-color: {{ ocr_color_darken }} !important;}
|
||
.ocr-color-text.text-darken {color: {{ ocr_color_darken }} !important;}
|
||
.ocr-color.lighten {background-color: {{ ocr_color_lighten }} !important;}
|
||
.ocr-color-text.text-lighten {color: {{ ocr_color_lighten }} !important;}
|
||
|
||
.nlp-color {background-color: {{ nlp_color }} !important;}
|
||
.nlp-color-text {color: {{ nlp_color }} !important;}
|
||
.nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
|
||
.nlp-color-text.text-darken {color: {{ nlp_color_darken }} !important;}
|
||
.nlp-color.lighten {background-color: {{ nlp_color_lighten }} !important;}
|
||
.nlp-color-text.text-lighten {color: {{ nlp_color_lighten }} !important;}
|
||
|
||
.pagination li.active {background-color: {{ primary_color }};}
|
||
.table-of-contents a.active {border-color: {{ primary_color }};}
|
||
.tabs .tab a {color: inherit; /* Custom Text Color */}
|
||
.tabs .tab a:hover {color: {{ primary_color }}; /* Custom Color On Hover */}
|
||
.tabs .tab a.active, .tabs .tab a:focus.active {
|
||
color: {{ primary_color }}; /* Custom Text Color While Active */
|
||
background-color: {{ primary_color }}28; /* Custom Background Color While Active */
|
||
}
|
||
.tabs .indicator {background-color: {{ primary_color }}; /* Custom Color Of Indicator */}
|
||
{% if current_user.is_authenticated %}
|
||
/*
|
||
* ### Start sidenav-fixed offset ###
|
||
* The sidenav-fixed class is used which causes the sidenav to be fixed and open
|
||
* on large screens and hides to the regular functionality on smaller screens.
|
||
* In order to prevent the sidenav to overlap the content, the content (in our
|
||
* case header, main and footer) gets an offset equal to the width of the
|
||
* sidenav.
|
||
*/
|
||
@media only screen and (min-width : 993px) {
|
||
header, main, footer {padding-left: 300px;}
|
||
.modal:not(.bottom-sheet) {left: 300px;}
|
||
.navbar-fixed > nav {width: calc(100% - 300px)}
|
||
}
|
||
/* ### End sidenav-fixed offset ### */
|
||
{% endif %}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="navbar-fixed">
|
||
<nav class="nav-extended primary-color white-text">
|
||
<div class="nav-wrapper">
|
||
<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;"></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;"></a>
|
||
{% if current_user.is_authenticated %}
|
||
<a href="#" data-target="sidenav-main" class="sidenav-trigger"><i class="material-icons">menu</i></a>
|
||
{% endif %}
|
||
<ul class="right">
|
||
{% if current_user.is_authenticated %}
|
||
<li>
|
||
<a id="nav-notifications" class="dropdown-trigger no-autoinit" href="{{ url_for('main.news') }}" data-target="nav-notifications-dropdown">
|
||
<span class="hide-on-small-only">News</span>
|
||
<i class="material-icons right">notifications</i>
|
||
</a>
|
||
</li>
|
||
{% endif %}
|
||
<li>
|
||
<a id="nav-account" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-account-dropdown">
|
||
{% if current_user.is_authenticated %}
|
||
<span class="hide-on-small-only">{{ current_user.username }}</span><i class="material-icons right">account_circle</i>
|
||
{% else %}
|
||
<i class="material-icons">account_circle</i>
|
||
{% endif %}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-content">
|
||
<noscript>
|
||
<div class="card z-depth-0" style="background-color: inherit;">
|
||
<div class="card-content">
|
||
<span class="card-title">JavaScript is disabled</span>
|
||
<p>
|
||
You have JavaScript disabled. Nopaque uses javascript and
|
||
sockets to send data in realtime to you. For example showing
|
||
you the status of your jobs and your corpora.
|
||
Please activate JavaScript to make full use of nopaque.</p>
|
||
<p>Some services are still useable without Javascript.</p>
|
||
</div>
|
||
<div class="card-action">
|
||
<a href="#">What services can I still use?</a>
|
||
<a href="#">What services and functions are not available?</a>
|
||
</div>
|
||
</div>
|
||
</noscript>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Dropdown menus for the navbar -->
|
||
<div id="nav-notifications-dropdown" class="dropdown-content">
|
||
<li>
|
||
<a href="{{ url_for('main.news', _anchor='beta-launch') }}"><i class="material-icons">error_outline</i>nopaque's beta launch</a>
|
||
</li>
|
||
</div>
|
||
<ul id="nav-account-dropdown" class="dropdown-content">
|
||
{% if current_user.is_authenticated %}
|
||
<li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
|
||
<li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
|
||
{% else %}
|
||
<li><a href="{{ url_for('auth.login') }}"><i class="material-icons">login</i>Log in</a></li>
|
||
<li><a href="{{ url_for('auth.register') }}"><i class="material-icons">assignment</i>Register</a></li>
|
||
{% endif %}
|
||
</ul>
|
||
|
||
<ul id="sidenav-main" class="sidenav sidenav-fixed{% if not current_user.is_authenticated %} hide{% endif %}">
|
||
<li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>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: {{ file_setup_color }}; border-left: 10px solid {{ file_setup_color_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: {{ ocr_color }}; border-left: 10px solid {{ ocr_color_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: {{ nlp_color }}; border-left: 10px solid {{ nlp_color_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: {{ corpus_analysis_color }}; border-left: 10px solid {{ corpus_analysis_color_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>
|
||
{% if current_user.is_authenticated %}
|
||
<li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
|
||
<li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
|
||
{% else %}
|
||
<li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
|
||
<li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</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 tools</a></li>
|
||
{% endif %}
|
||
</ul>
|
||
</header>
|
||
|
||
{% if parallax %}
|
||
<main>
|
||
{{ insert_content() }}
|
||
</main>
|
||
{% else %}
|
||
<main class="{{ main_class }}">
|
||
{% if not full_width %}
|
||
<div class="container">
|
||
{% endif %}
|
||
<div class="row">
|
||
<div class="col s12" id="headline">
|
||
<h2>{{ headline }}</h2>
|
||
</div>
|
||
{{ insert_content() }}
|
||
</div>
|
||
{% if not full_width %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
{% endif %}
|
||
</main>
|
||
|
||
<footer class="page-footer secondary-color white-text">
|
||
<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 white-text">
|
||
<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>
|
||
<a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.CONTACT_EMAIL_ADRESS }}?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.CONTACT_EMAIL_ADRESS }}?subject={{ config.NOPAQUE_MAIL_SUBJECT_PREFIX }} Feedback"><i class="left material-icons">feedback</i>Feedback</a>
|
||
<a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/opaque"><i class="left material-icons">code</i>GitLab</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<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/materialize.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.is_authenticated %}
|
||
{% if current_user.setting_dark_mode %}
|
||
DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
|
||
{% endif %}
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
nopaque.socket.init();
|
||
nopaque.socket.emit('user_data_stream_init');
|
||
});
|
||
{% endif %}
|
||
nopaque.flashedMessages = {{ get_flashed_messages(with_categories=True)|tojson }};
|
||
</script>
|
||
</body>
|
||
</html>
|