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

276 lines
14 KiB
Plaintext
Raw Normal View History

2020-08-25 09:49:43 +00:00
{% import "utils/materialize.html.j2" as M %}
2020-02-24 08:18:49 +00:00
2020-08-25 09:49:43 +00:00
{% if title is not defined %}
2020-08-24 12:21:16 +00:00
{% set title = None %}
{% endif %}
{% if headline is not defined %}
{% set headline = title %}
{% endif %}
{% if main_class is not defined %}
{% set main_class = 'grey lighten-5' %}
{% endif %}
2020-08-25 09:49:43 +00:00
{% if parallax is not defined %}
{% set parallax = False %}
{% endif %}
2020-08-25 13:02:16 +00:00
{% set primary_color = '#00426f' %}
{% set secondary_color = '#b1b3b4' %}
2020-08-25 09:49:43 +00:00
2020-08-24 12:21:16 +00:00
{% 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' %}
2020-08-25 09:49:43 +00:00
{%- macro insert_content() -%}
{% block page_content %}{% endblock %}
{%- endmacro -%}
2019-07-04 09:59:52 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
2020-02-25 09:46:24 +00:00
<meta name="theme-color" content="#ee6e73">
2020-01-17 09:42:02 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2020-02-25 08:59:49 +00:00
<title>
nopaque
2020-08-25 09:49:43 +00:00
{% if request.path != url_for('main.index') %} {{ title }}{% endif %}
2020-02-25 08:59:49 +00:00
</title>
2020-02-24 14:47:13 +00:00
<link rel="icon" href="{{ url_for('static', filename='images/nopaque_logo.png') }}">
2020-01-17 09:42:02 +00:00
<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') }}">
2020-02-25 10:05:19 +00:00
<style>
2020-08-25 13:02:16 +00:00
.primary-color {background-color: {{ primary_color }} !important;}
2020-08-25 13:26:36 +00:00
.primary-color-text {color: {{ primary_color }} !important;}
2020-08-25 13:02:16 +00:00
.secondary-color {background-color: {{ secondary_color }} !important;}
2020-08-25 13:26:36 +00:00
.secondary-color-text {color: {{ secondary_color }} !important;}
2020-08-25 13:02:16 +00:00
2020-08-24 12:21:16 +00:00
.corpus-analysis-color {background-color: {{ corpus_analysis_color }} !important;}
2020-08-25 13:26:36 +00:00
.corpus-analysis-color-text {color: {{ corpus_analysis_color }} !important;}
2020-08-24 12:21:16 +00:00
.corpus-analysis-color.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
2020-08-25 13:26:36 +00:00
.corpus-analysis-color-text.text-darken {color: {{ corpus_analysis_color_darken }} !important;}
2020-08-24 12:21:16 +00:00
.corpus-analysis-color.lighten {background-color: {{ corpus_analysis_color_lighten }} !important;}
2020-08-25 13:26:36 +00:00
.corpus-analysis-color-text.text-lighten {color: {{ corpus_analysis_color_lighten }} !important;}
2020-08-24 12:21:16 +00:00
.file-setup-color {background-color: {{ file_setup_color }} !important;}
2020-08-25 13:26:36 +00:00
.file-setup-color-text {color: {{ file_setup_color }} !important;}
2020-08-24 12:21:16 +00:00
.file-setup-color.darken {background-color: {{ file_setup_color_darken }} !important;}
2020-08-25 13:26:36 +00:00
.file-setup-color-text.text-darken {color: {{ file_setup_color_darken }} !important;}
2020-08-24 12:21:16 +00:00
.file-setup-color.lighten {background-color: {{ file_setup_color_lighten }} !important;}
2020-08-25 13:26:36 +00:00
.file-setup-color-text.text-lighten {color: {{ file_setup_color_lighten }} !important;}
2020-08-24 12:21:16 +00:00
.ocr-color {background-color: {{ ocr_color }} !important;}
2020-08-25 13:26:36 +00:00
.ocr-color-text {color: {{ ocr_color }} !important;}
2020-08-24 12:21:16 +00:00
.ocr-color.darken {background-color: {{ ocr_color_darken }} !important;}
2020-08-25 13:26:36 +00:00
.ocr-color-text.text-darken {color: {{ ocr_color_darken }} !important;}
2020-08-24 12:21:16 +00:00
.ocr-color.lighten {background-color: {{ ocr_color_lighten }} !important;}
2020-08-25 13:26:36 +00:00
.ocr-color-text.text-lighten {color: {{ ocr_color_lighten }} !important;}
2020-08-24 12:21:16 +00:00
.nlp-color {background-color: {{ nlp_color }} !important;}
2020-08-25 13:26:36 +00:00
.nlp-color-text {color: {{ nlp_color }} !important;}
2020-08-24 12:21:16 +00:00
.nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
2020-08-25 13:26:36 +00:00
.nlp-color-text.text-darken {color: {{ nlp_color_darken }} !important;}
2020-08-24 12:21:16 +00:00
.nlp-color.lighten {background-color: {{ nlp_color_lighten }} !important;}
2020-08-25 13:26:36 +00:00
.nlp-color-text.text-lighten {color: {{ nlp_color_lighten }} !important;}
2020-08-25 13:02:16 +00:00
{% 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)}
2020-02-25 10:05:19 +00:00
}
2020-08-25 13:02:16 +00:00
/* ### End sidenav-fixed offset ### */
{% endif %}
{% block style_additions %}{% endblock %}
2020-02-25 10:05:19 +00:00
</style>
2020-01-13 14:33:05 +00:00
<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>
2020-01-17 09:42:02 +00:00
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
2020-01-29 09:50:31 +00:00
<script src="{{ url_for('static', filename='js/nopaque.lists.js') }}"></script>
<script>
{% if current_user.is_authenticated %}
{% if current_user.setting_dark_mode %}
2020-08-25 13:02:16 +00:00
DarkReader.enable({brightness: 150, contrast: 100, sepia: 0});
{% endif %}
2020-08-25 13:02:16 +00:00
document.addEventListener('DOMContentLoaded', () => {
nopaque.socket.init();
2020-08-25 13:02:16 +00:00
nopaque.socket.emit('user_data_stream_init');
});
{% endif %}
nopaque.flashedMessages = {{ get_flashed_messages(with_categories=True)|tojson }};
</script>
2019-07-04 09:59:52 +00:00
</head>
<body>
<header>
<div class="navbar-fixed">
2020-08-25 13:02:16 +00:00
<nav class="nav-extended primary-color white-text">
<div class="nav-wrapper">
2020-08-24 12:44:35 +00:00
<a href="{{ url_for('main.index') }}" class="brand-logo" style="margin-left: 25px;"><img src="{{ url_for('static', filename='images/logo_-_nopaque.png') }}" style="height: 64px;"></a>
2020-02-25 09:39:33 +00:00
{% if current_user.is_authenticated %}
2020-02-19 09:17:27 +00:00
<a href="#" data-target="sidenav-main" class="sidenav-trigger"><i class="material-icons">menu</i></a>
2020-02-25 09:39:33 +00:00
{% endif %}
2020-03-02 09:42:25 +00:00
<ul class="right">
2020-03-02 13:15:50 +00:00
<!--<li><a id="nav-notifications" class="dropdown-trigger no-autoinit" href="#!" data-target="nav-notifications-dropdown"><i class="material-icons">notifications</i></a></li>-->
2019-09-04 11:51:21 +00:00
<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>
2020-08-25 09:49:43 +00:00
<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>
2020-01-17 10:46:30 +00:00
<!-- 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 %}
2020-02-19 13:49:52 +00:00
<li><a href="{{ url_for('profile.settings') }}"><i class="material-icons">settings</i>Settings</a></li>
2020-01-17 10:46:30 +00:00
<li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
{% else %}
2020-02-19 15:24:58 +00:00
<li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
2020-01-17 10:46:30 +00:00
<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 %}">
2019-12-02 10:34:28 +00:00
<li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
2019-09-11 08:00:52 +00:00
<li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
2019-08-01 08:33:05 +00:00
<li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
2020-02-24 16:32:20 +00:00
<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>
2019-07-12 15:21:04 +00:00
<li><div class="divider"></div></li>
2020-08-24 12:44:35 +00:00
<li><a class="subheader">Processes & Services</a></li>
2020-08-24 12:21:16 +00:00
<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>
2020-08-24 12:44:35 +00:00
<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 %}
2020-02-19 13:49:52 +00:00
<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 %}
2020-02-19 15:24:58 +00:00
<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 %}
2019-09-04 11:51:21 +00:00
{% if current_user.is_administrator() %}
<li><div class="divider"></div></li>
<li><a class="subheader">Administration</a></li>
2019-11-15 11:51:53 +00:00
<li><a href="{{ url_for('admin.index') }}"><i class="material-icons">build</i>Administration tools</a></li>
2019-07-10 12:36:31 +00:00
{% endif %}
</ul>
</header>
2019-07-04 09:36:23 +00:00
2020-02-18 14:31:10 +00:00
{% if parallax %}
<main>
2020-08-25 09:49:43 +00:00
{{ insert_content() }}
2020-02-18 14:31:10 +00:00
</main>
{% else %}
2020-08-24 12:21:16 +00:00
<main class="{{ main_class }}">
2020-02-18 14:31:10 +00:00
{% if not full_width %}
<div class="container">
{% endif %}
2020-02-07 14:21:59 +00:00
<div class="row">
2020-08-24 12:21:16 +00:00
<div class="col s12">
<h2>{{ headline }}</h2>
2020-02-07 14:21:59 +00:00
</div>
2020-08-25 09:49:43 +00:00
{{ insert_content() }}
2020-02-18 14:31:10 +00:00
</div>
{% if not full_width %}
2020-02-07 14:21:59 +00:00
</div>
2020-02-18 14:31:10 +00:00
{% endif %}
2020-02-07 14:21:59 +00:00
</div>
2020-02-18 14:31:10 +00:00
{% endif %}
2019-07-04 10:23:09 +00:00
</main>
2019-07-04 08:40:23 +00:00
2020-08-25 13:02:16 +00:00
<footer class="page-footer secondary-color white-text">
2020-02-07 14:21:59 +00:00
<div class="container">
<div class="row">
2020-02-27 14:29:36 +00:00
<div class="col s6 m3">
2020-02-07 14:21:59 +00:00
<a href="https://www.dfg.de/">
<img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
2020-08-25 09:49:43 +00:00
</a>
2020-02-26 10:38:21 +00:00
</div>
2020-02-25 09:39:33 +00:00
<div class="col s6 m3 offset-m1 center-align">
2020-02-07 14:21:59 +00:00
<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>
2020-02-07 14:21:59 +00:00
<ul>
2020-08-03 08:23:11 +00:00
<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>
2020-07-03 09:17:47 +00:00
<li><a class="grey-text text-lighten-3" href="{{ url_for('main.terms_of_use') }}">Terms of use</a></li>
<li></li>
2020-02-07 14:21:59 +00:00
</ul>
</div>
</div>
</div>
2020-08-25 13:02:16 +00:00
<div class="footer-copyright primary-color white-text">
<div class="container">
2020-05-19 12:27:35 +00:00
<div class="row" style="margin-bottom: 0;">
2020-08-25 13:02:16 +00:00
<div class="col s12 m3">
2020-05-19 12:27:35 +00:00
<span>© 2020 Bielefeld University</span>
</div>
2020-08-25 13:02:16 +00:00
<div class="col s12 m9 right-align">
2020-05-19 12:27:35 +00:00
<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=""><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>
2020-03-07 19:20:58 +00:00
</footer>
2020-01-13 14:33:05 +00:00
<script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
2019-07-04 09:59:52 +00:00
</body>
2019-07-04 08:40:23 +00:00
</html>