mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 09:15:41 +00:00
288 lines
15 KiB
Django/Jinja
288 lines
15 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') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/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>
|
||
<script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
|
||
<script type="module">
|
||
import {RessourceList} from '../../static/js/nopaque.lists.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>
|
||
</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">
|
||
<!--<li><a id="nav-notifications" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>-->
|
||
<li>
|
||
<a id="nav-account" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-account-dropdown">
|
||
{% if current_user.is_authenticated %}
|
||
{{ current_user.username }}<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 grey-text text-darken-4">
|
||
<p>Notifications</p>
|
||
</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">person</i>Log in</a></li>
|
||
<li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</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 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>
|
||
<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/Materialize/materialize.min.js') }}"></script>
|
||
</body>
|
||
</html>
|