From b5f7478e14152753729920af7e45b191077107ca Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Thu, 21 Nov 2024 11:12:11 +0100
Subject: [PATCH] Update templates

---
 app/static/css/height.css                     |  47 ++
 app/static/css/width.css                      |  47 ++
 app/templates/_base/dropdowns.html.j2         |  60 ++
 app/templates/_base/footer.html.j2            |  45 ++
 app/templates/_base/icons.html.j2             |   1 +
 app/templates/_base/metas.html.j2             |   2 +
 app/templates/_base/modals.html.j2            |  34 ++
 app/templates/_base/navbar.html.j2            | 105 ++++
 app/templates/_base/scripts.html.j2           | 113 ++++
 app/templates/_base/sidenav.html.j2           | 123 ++++
 app/templates/_base/stylesheets.html.j2       |  23 +
 app/templates/base.html.j2                    | 568 ++----------------
 .../services/corpus_analysis.html.j2          |   4 +-
 .../services/file_setup_pipeline.html.j2      |   8 +-
 .../services/spacy_nlp_pipeline.html.j2       |   6 +-
 .../services/tesseract_ocr_pipeline.html.j2   |   6 +-
 .../services/transkribus_htr_pipeline.html.j2 |   4 +-
 17 files changed, 665 insertions(+), 531 deletions(-)
 create mode 100644 app/static/css/height.css
 create mode 100644 app/static/css/width.css
 create mode 100644 app/templates/_base/dropdowns.html.j2
 create mode 100644 app/templates/_base/footer.html.j2
 create mode 100644 app/templates/_base/icons.html.j2
 create mode 100644 app/templates/_base/metas.html.j2
 create mode 100644 app/templates/_base/modals.html.j2
 create mode 100644 app/templates/_base/navbar.html.j2
 create mode 100644 app/templates/_base/scripts.html.j2
 create mode 100644 app/templates/_base/sidenav.html.j2
 create mode 100644 app/templates/_base/stylesheets.html.j2

diff --git a/app/static/css/height.css b/app/static/css/height.css
new file mode 100644
index 00000000..87c1252d
--- /dev/null
+++ b/app/static/css/height.css
@@ -0,0 +1,47 @@
+.h-10 {
+    height: 10% !important;
+}
+
+.h-20 {
+    height: 20% !important;
+}
+
+.h-25 {
+    height: 25% !important;
+}
+
+.h-30 {
+    height: 30% !important;
+}
+
+.h-40 {
+    height: 40% !important;
+}
+
+.h-50 {
+    height: 50% !important;
+}
+
+.h-60 {
+    height: 60% !important;
+}
+
+.h-70 {
+    height: 70% !important;
+}
+
+.h-75 {
+    height: 75% !important;
+}
+
+.h-80 {
+    height: 80% !important;
+}
+
+.h-90 {
+    height: 90% !important;
+}
+
+.h-100 {
+    height: 100% !important;
+}
diff --git a/app/static/css/width.css b/app/static/css/width.css
new file mode 100644
index 00000000..b15abd06
--- /dev/null
+++ b/app/static/css/width.css
@@ -0,0 +1,47 @@
+.w-10 {
+    width: 10% !important;
+}
+
+.w-20 {
+    width: 20% !important;
+}
+
+.w-25 {
+    width: 25% !important;
+}
+
+.w-30 {
+    width: 30% !important;
+}
+
+.w-40 {
+    width: 40% !important;
+}
+
+.w-50 {
+    width: 50% !important;
+}
+
+.w-60 {
+    width: 60% !important;
+}
+
+.w-70 {
+    width: 70% !important;
+}
+
+.w-75 {
+    width: 75% !important;
+}
+
+.w-80 {
+    width: 80% !important;
+}
+
+.w-90 {
+    width: 90% !important;
+}
+
+.w-100 {
+    width: 100% !important;
+}
diff --git a/app/templates/_base/dropdowns.html.j2 b/app/templates/_base/dropdowns.html.j2
new file mode 100644
index 00000000..c648235d
--- /dev/null
+++ b/app/templates/_base/dropdowns.html.j2
@@ -0,0 +1,60 @@
+{% if current_user.is_authenticated %}
+<ul class="dropdown-content" id="navbar-data-processing-and-analysis-dropdown-content">
+  <li {% if request.path == url_for('services.file_setup_pipeline') %}class="active"{% endif %}>
+    <a href="{{ url_for('services.file_setup_pipeline') }}">
+      <i class="nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
+      File Setup Pipeline
+    </a>
+  </li>
+  <li {% if request.path == url_for('services.tesseract_ocr_pipeline') %}class="active"{% endif %}>
+    <a href="{{ url_for('services.tesseract_ocr_pipeline') }}">
+      <i class="nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
+      Tesseract OCR Pipeline
+    </a>
+  </li>
+  {% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
+  <li {% if request.path == url_for('services.transkribus_htr_pipeline') %}class="active"{% endif %}>
+    <a href="{{ url_for('services.transkribus_htr_pipeline') }}">
+      <i class="nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
+      Transkribus HTR Pipeline
+    </a>
+  </li>
+  {% endif %}
+  <li {% if request.path == url_for('services.spacy_nlp_pipeline') %}class="active"{% endif %}>
+    <a href="{{ url_for('services.spacy_nlp_pipeline') }}">
+      <i class="nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
+      SpaCy NLP Pipeline
+    </a>
+  </li>
+  <li class="divider" tabindex="-1"></li>
+  <li {% if request.path == url_for('services.corpus_analysis') %}class="active"{% endif %}>
+    <a href="{{ url_for('services.corpus_analysis') }}">
+      <i class="nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
+      Corpus Analyis
+    </a>
+  </li>
+</ul>
+{% endif %}
+
+{% if current_user.is_authenticated %}
+<ul class="dropdown-content" id="navbar-account-dropdown-content">
+  <li {% if request.path == url_for('users.user', user_id=current_user.id) %}class="active"{% endif %}>
+    <a href="{{ url_for('users.user', user_id=current_user.id) }}">
+      <i class="material-icons">person</i>
+      Your profile
+    </a>
+  </li>
+  <li {% if request.path == url_for('settings.settings') %}class="active"{% endif %}>
+    <a href="{{ url_for('settings.settings') }}">
+      <i class="material-icons">settings</i>
+      Settings
+    </a>
+  </li>
+  <li>
+    <a href="{{ url_for('auth.logout') }}">
+      <i class="material-icons">logout</i>
+      Log out
+    </a>
+  </li>
+</ul>
+{% endif %}
diff --git a/app/templates/_base/footer.html.j2 b/app/templates/_base/footer.html.j2
new file mode 100644
index 00000000..9e755ec9
--- /dev/null
+++ b/app/templates/_base/footer.html.j2
@@ -0,0 +1,45 @@
+<div class="container">
+  <div class="row">
+    <div class="col s12 l3">
+      <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>
+      </ul>
+    </div>
+
+    <div class="col s12 l3">
+      <h5 class="white-text">More Resources</h5>
+      <ul>
+        <li><a class="grey-text text-lighten-3" href="{{ url_for('main.faq') }}">Frequently asked questions</a></li>
+        <li><a class="grey-text text-lighten-3" href="mailto:{{ config.NOPAQUE_SERVICE_DESK }}">Report an issue</a></li>
+        <li><a class="grey-text text-lighten-3" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque">GitLab (source code)</a></li>
+      </ul>
+    </div>
+
+    <div class="col s12 l4">
+      <h5 class="white-text">Who made this?</h5>
+      <p class="grey-text text-lighten-4">
+        This software is developed by the SFB 1288 INF project at Bielefeld University.
+        Thanks to all the people who made nopaque possible.
+        <span class="red-text">&hearts;</span>
+      </p>
+    </div>
+
+    <div class="col s12 l2">
+      <br class="hide-on-med-and-down">
+      <br class="hide-on-med-and-down">
+      <a href="https://www.dfg.de/">
+        <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
+      </a>
+    </div>
+  </div>
+</div>
+
+<div class="footer-copyright">
+  <div class="container">
+    © 2024 Bielefeld University
+    <a class="grey-text text-lighten-4 right" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque/-/releases/{{ config.NOPAQUE_VERSION }}">Version {{ config.NOPAQUE_VERSION }}</a>
+  </div>
+</div>
diff --git a/app/templates/_base/icons.html.j2 b/app/templates/_base/icons.html.j2
new file mode 100644
index 00000000..f82a3958
--- /dev/null
+++ b/app/templates/_base/icons.html.j2
@@ -0,0 +1 @@
+<link href="{{ url_for('static', filename='images/nopaque_-_favicon.png') }}" rel="icon">
diff --git a/app/templates/_base/metas.html.j2 b/app/templates/_base/metas.html.j2
new file mode 100644
index 00000000..30185f8f
--- /dev/null
+++ b/app/templates/_base/metas.html.j2
@@ -0,0 +1,2 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/app/templates/_base/modals.html.j2 b/app/templates/_base/modals.html.j2
new file mode 100644
index 00000000..a00efa3a
--- /dev/null
+++ b/app/templates/_base/modals.html.j2
@@ -0,0 +1,34 @@
+{% if current_user.is_authenticated and not current_user.terms_of_use_accepted %}
+<div id="terms-of-use-modal" class="modal modal-fixed-footer">
+  <div class="modal-content">
+    <div class="container">
+      <div class="row">
+        <div class="col s12">
+          <h1 id="title">Terms of use</h1>
+        </div>
+        <div class="col s12">
+          <div class="switch">
+            <label>
+              DE
+              <input type="checkbox" id="terms-of-use-modal-switch">
+              <span class="lever"></span>
+              EN
+            </label>
+          </div>
+          <br>
+        </div>
+        <div class="terms-of-use-modal-content hide">
+          {% include "main/terms_of_use_en.html.j2" %}
+        </div>
+        <div class="terms-of-use-modal-content">
+          {% include "main/terms_of_use_de.html.j2" %}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <span style="margin-right:20px;">I have taken note of the new GTC and agree to their validity in the context of my further use.</span>
+    <a href="#!" class="modal-close waves-effect waves-green btn">Yes</a>
+  </div>
+</div>
+{% endif %}
diff --git a/app/templates/_base/navbar.html.j2 b/app/templates/_base/navbar.html.j2
new file mode 100644
index 00000000..00b64663
--- /dev/null
+++ b/app/templates/_base/navbar.html.j2
@@ -0,0 +1,105 @@
+<div class="navbar-fixed">
+  <nav>
+    <div class="nav-wrapper">
+      {# menu icon #}
+      {# small/medium devices #}
+      <a href="#!" class="sidenav-trigger" data-target="sidenav">
+        <i class="material-icons">menu</i>
+      </a>
+
+      {% if current_user.is_authenticated %}
+      {# nopaque logo #}
+      {# large devices #}
+      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down h-100">
+        <img src="{{ url_for('static', filename='images/nopaque_-_logo.png') }}" alt="" class="mx-3 py-3 h-100">
+      </a>
+
+      {# left aligned navigation items #}
+      {# large devices #}
+      <ul class="hide-on-med-and-down" style="margin-left: calc(57px + 1.5rem);">
+        {# dashboard #}
+        <li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
+          <a href="{{ url_for('main.dashboard') }}">
+            <i class="material-icons left">dashboard</i>
+            Dashboard
+          </a>
+        </li>
+
+        {# data processing & analysis #}
+        <li>
+          <a href="#!" class="dropdown-trigger no-autoinit" data-target="navbar-data-processing-and-analysis-dropdown-content" id="navbar-data-processing-and-analysis-dropdown-trigger">
+            <i class="material-icons left">miscellaneous_services</i>
+            Data Processing & Analysis
+          </a>
+        </li>
+
+        {# contributions #}
+        <li {% if request.path == url_for('contributions.index') %}class="active"{% endif %}>
+          <a href="{{ url_for('contributions.index') }}">
+            <i class="material-icons left">new_label</i>
+            Contributions
+          </a>
+        </li>
+
+        {# social #}
+        <li {% if request.path == url_for('main.social') %}class="active"{% endif %}>
+          <a href="{{ url_for('main.social') }}">
+            <i class="material-icons left">groups</i>
+            Social
+          </a>
+        </li>
+      </ul>
+      {% else %}
+      {# nopaque logo+wordmark+slogan #}
+      {# large devices #}
+      <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down h-100">
+        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark+slogan.png') }}" alt="" class="mx-3 py-3 h-100">
+      </a>
+      {% endif %}
+
+      {# nopaque logo+wordmark #}
+      {# small/medium devices #}
+      <a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only h-100">
+        <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3 h-100">
+      </a>
+
+      {# right aligned navigation items #}
+      {# large devices #}
+      <ul class="right hide-on-med-and-down h-100">
+        {# manual #}
+        <li class="tooltipped {% if request.path == url_for('main.manual') %}active{% endif %}" data-position="bottom" data-tooltip="Manual">
+          <a href="{{ url_for('main.manual') }}">
+            <i class="material-icons">help_outline</i>
+          </a>
+        </li>
+
+        {# news #}
+        <li class="tooltipped {% if request.path == url_for('main.news') %}active{% endif %}" data-position="bottom" data-tooltip="News">
+          <a href="{{ url_for('main.news') }}">
+            <i class="material-icons">newspaper</i>
+          </a>
+        </li>
+
+        {% if current_user.is_authenticated %}
+        {# avatar #}
+        <li class="h-100">
+          <a href="#!" class="dropdown-trigger no-autoinit h-100" data-target="navbar-account-dropdown-content" id="navbar-account-dropdown-trigger">
+            <span class="mr-3">{{ current_user.username }}</span>
+            <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="circle py-3 h-100 right">
+          </a>
+        </li>
+        {% else %}
+        {# log in #}
+        <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
+          <a href="{{ url_for('auth.login') }}">Log in</a>
+        </li>
+
+        {# register #}
+        <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
+          <a href="{{ url_for('auth.register') }}" class="btn waves-effect waves-light primary-color lighten">Register</a>
+        </li>
+        {% endif %}
+      </ul>
+    </div>
+  </nav>
+</div>
diff --git a/app/templates/_base/scripts.html.j2 b/app/templates/_base/scripts.html.j2
new file mode 100644
index 00000000..1f6d5af0
--- /dev/null
+++ b/app/templates/_base/scripts.html.j2
@@ -0,0 +1,113 @@
+<script src="{{ url_for('static', filename='external/materialize/js/materialize.min.js') }}"></script>
+<script src="{{ url_for('static', filename='external/JSON-Patch/js/fast-json-patch.min.js') }}"></script>
+<script src="{{ url_for('static', filename='external/list.js/js/list.min.js') }}"></script>
+<script src="{{ url_for('static', filename='external/pako/js/pako_inflate.min.js') }}"></script>
+<script src="{{ url_for('static', filename='external/plotly.js/js/plotly.min.js') }}"></script>
+<script src="{{ url_for('static', filename='external/socket.io/js/socket.io.min.js') }}"></script>
+{% assets
+    filters='rjsmin',
+    output='gen/nopaque.%(version)s.js',
+    'js/index.js',
+    'js/app.js',
+    'js/utils.js',
+
+    'js/forms/index.js',
+    'js/forms/base-form.js',
+    'js/forms/create-contribution-form.js',
+    'js/forms/create-corpus-file-form.js',
+    'js/forms/create-job-form.js',
+
+    'js/resource-displays/index.js',
+    'js/resource-displays/resource-display.js',
+    'js/resource-displays/corpus-display.js',
+    'js/resource-displays/job-display.js',
+
+    'js/resource-lists/index.js',
+    'js/resource-lists/resource-list.js',
+    'js/resource-lists/admin-user-list.js',
+    'js/resource-lists/corpus-file-list.js',
+    'js/resource-lists/corpus-follower-list.js',
+    'js/resource-lists/corpus-list.js',
+    'js/resource-lists/corpus-text-info-list.js',
+    'js/resource-lists/corpus-token-list.js',
+    'js/resource-lists/detailed-public-corpus-list.js',
+    'js/resource-lists/job-input-list.js',
+    'js/resource-lists/job-list.js',
+    'js/resource-lists/job-result-list.js',
+    'js/resource-lists/public-corpus-list.js',
+    'js/resource-lists/public-user-list.js',
+    'js/resource-lists/spacy-nlp-pipeline-model-list.js',
+    'js/resource-lists/tesseract-ocr-pipeline-model-list.js',
+
+    'js/requests/index.js',
+    'js/requests/admin.js',
+    'js/requests/contributions.js',
+    'js/requests/corpora.js',
+    'js/requests/jobs.js',
+    'js/requests/users.js',
+
+    'js/corpus-analysis/index.js',
+    'js/corpus-analysis/cqi/index.js',
+    'js/corpus-analysis/cqi/constants.js',
+    'js/corpus-analysis/cqi/errors.js',
+    'js/corpus-analysis/cqi/status.js',
+    'js/corpus-analysis/cqi/api/index.js',
+    'js/corpus-analysis/cqi/api/client.js',
+    'js/corpus-analysis/cqi/models/index.js',
+    'js/corpus-analysis/cqi/models/resource.js',
+    'js/corpus-analysis/cqi/models/attributes.js',
+    'js/corpus-analysis/cqi/models/subcorpora.js',
+    'js/corpus-analysis/cqi/models/corpora.js',
+    'js/corpus-analysis/cqi/client.js',
+    'js/corpus-analysis/query-builder/index.js',
+    'js/corpus-analysis/query-builder/element-references.js',
+    'js/corpus-analysis/query-builder/query-builder.js',
+    'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js',
+    'js/corpus-analysis/query-builder/token-attribute-builder-functions.js',
+    'js/corpus-analysis/app.js',
+    'js/corpus-analysis/concordance-extension.js',
+    'js/corpus-analysis/reader-extension.js',
+    'js/corpus-analysis/static-visualization-extension.js'
+-%}
+<script src="{{ ASSET_URL }}"></script>
+{% endassets -%}
+
+<script>
+    // TODO: Implement an app.run method and use this for all of the following
+    const app = new nopaque.App();
+    app.init();
+
+    {% if current_user.is_authenticated -%}
+    // TODO: Set this as a property of the app object
+    const currentUserId = {{ current_user.hashid|tojson }};
+
+    // Subscribe to the current user's data events
+    app.subscribeUser(currentUserId)
+    .catch((error) => {throw JSON.stringify(error);});
+
+    // Get the current user's data
+    app.getUser(currentUserId, true, true)
+    .catch((error) => {throw JSON.stringify(error);});
+
+    {% if not current_user.terms_of_use_accepted -%}
+    M.Modal.getInstance(document.querySelector('#terms-of-use-modal')).open();
+    {% endif -%}
+    {% endif -%}
+
+    // Display flashed messages
+    for (let [category, message] of {{ get_flashed_messages(with_categories=True)|tojson }}) {
+    app.flash(message, message);
+    }
+</script>
+
+<script>
+    let languageModalSwitch = document.querySelector('#terms-of-use-modal-switch');
+    let termsOfUseModalContent = document.querySelectorAll('.terms-of-use-modal-content');
+    if (languageModalSwitch) {
+    languageModalSwitch.addEventListener('change', function() {
+        termsOfUseModalContent.forEach(content => {
+        content.classList.toggle('hide');
+        });
+    });
+    }
+</script>
diff --git a/app/templates/_base/sidenav.html.j2 b/app/templates/_base/sidenav.html.j2
new file mode 100644
index 00000000..1d1a8e34
--- /dev/null
+++ b/app/templates/_base/sidenav.html.j2
@@ -0,0 +1,123 @@
+<ul class="sidenav" id="sidenav">
+  {% if current_user.is_authenticated %}
+  {# user view #}
+  <li>
+    <div class="user-view">
+      <div class="background primary-color"></div>
+      <a><img class="circle" src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt=""></a>
+      <a><span class="white-text name">{{ current_user.username }}</span></a>
+      <a><span class="white-text email">{{ current_user.email }}</span></a>
+    </div>
+  </li>
+  {% endif %}
+
+  {% if current_user.is_authenticated %}
+  {# dashboard #}
+  <li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
+    <a class="waves-effect" href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a>
+  </li>
+
+  {# contributions #}
+  <li {% if request.path == url_for('contributions.index') %}class="active"{% endif %}>
+    <a href="{{ url_for('contributions.index') }}">
+      <i class="material-icons left">new_label</i>
+      Contributions
+    </a>
+  </li>
+
+  {# social #}
+  <li {% if request.path == url_for('main.social') %}class="active"{% endif %}>
+    <a class="waves-effect" href="{{ url_for('main.social') }}"><i class="material-icons">groups</i>Social</a>
+  </li>
+  {% endif %}
+
+  {# news #}
+  <li {% if request.path == url_for('main.news') %}class="active"{% endif %}>
+    <a class="waves-effect" href="{{ url_for('main.news') }}"><i class="material-icons">newspaper</i>News</a>
+  </li>
+
+  {# manual #}
+  <li {% if request.path == url_for('main.manual') %}class="active"{% endif %}>
+    <a class="waves-effect" href="{{ url_for('main.manual') }}"><i class="material-icons">help_outline</i>Manual</a>
+  </li>
+
+  {% if current_user.is_authenticated %}
+  {# data processing & analysis section #}
+  <li><div class="divider"></div></li>
+  <li><a class="subheader">Data Processing & Analysis</a></li>
+
+  {# file setup pipeline #}
+  <li class="service-color service-color-border border-darken" data-service="file-setup-pipeline" style="border-left: 10px solid;">
+    <a class="waves-effect" href="{{ url_for('services.file_setup_pipeline') }}"><i class="nopaque-icons service-icons" data-service="file-setup-pipeline"></i>File setup</a>
+  </li>
+
+  {# tesseract ocr pipeline #}
+  <li class="service-color service-color-border border-darken mt-1" data-service="tesseract-ocr-pipeline" style="border-left: 10px solid;">
+    <a class="waves-effect" href="{{ url_for('services.tesseract_ocr_pipeline') }}"><i class="nopaque-icons service-icons" data-service="tesseract-ocr-pipeline"></i>OCR</a>
+  </li>
+
+  {% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
+  {# transkribus htr pipeline #}
+  <li class="service-color service-color-border border-darken mt-1" data-service="transkribus-htr-pipeline" style="border-left: 10px solid;">
+    <a class="waves-effect" href="{{ url_for('services.transkribus_htr_pipeline') }}"><i class="nopaque-icons service-icons" data-service="transkribus-htr-pipeline"></i>HTR</a>
+  </li>
+  {% endif %}
+
+  {# spacy nlp pipeline #}
+  <li class="service-color service-color-border border-darken mt-1" data-service="spacy-nlp-pipeline" style="border-left: 10px solid;">
+    <a class="waves-effect" href="{{ url_for('services.spacy_nlp_pipeline') }}"><i class="nopaque-icons service-icons" data-service="spacy-nlp-pipeline"></i>NLP</a>
+  </li>
+
+  {# corpus analysis #}
+  <li class="service-color service-color-border border-darken mt-1" data-service="corpus-analysis" style="border-left: 10px solid;">
+    <a class="waves-effect" href="{{ url_for('services.corpus_analysis') }}"><i class="nopaque-icons service-icons" data-service="corpus-analysis"></i>Corpus Analysis</a>
+  </li>
+  {% endif %}
+
+  {# account section #}
+  <li><div class="divider"></div></li>
+  <li><a class="subheader">Account</a></li>
+
+  {% if current_user.is_authenticated %}
+  {# my profile #}
+  <li {% if request.path == url_for('users.user', user_id=current_user.id) %}class="active"{% endif %}>
+    <a href="{{ url_for('users.user', user_id=current_user.id) }}"><i class="material-icons">person</i>My Profile</a>
+  </li>
+
+  {# settings #}
+  <li {% if request.path == url_for('settings.settings') %}class="active"{% endif %}>
+    <a class="waves-effect" href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>Settings</a>
+  </li>
+
+  {# log out #}
+  <li>
+    <a class="waves-effect" href="{{ url_for('auth.logout') }}"><i class="material-icons">logout</i>Log out</a>
+  </li>
+  {% else %}
+  {# log in #}
+  <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
+    <a href="{{ url_for('auth.login') }}">Log in</a>
+  </li>
+
+  {# register #}
+  <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
+    <a href="{{ url_for('auth.register') }}" class="btn waves-effect waves-light">Register</a>
+  </li>
+  {% endif %}
+
+  {% if current_user.is_authenticated and current_user.can('ADMINISTRATE') %}
+  {# administration section #}
+  <li><div class="divider"></div></li>
+  <li><a class="subheader">Administration</a></li>
+
+  {# corpora #}
+  <li>
+    <a class="waves-effect" href="{{ url_for('admin.corpora') }}"><i class="nopaque-icons">I</i>Corpora</a>
+  </li>
+
+  {# users #}
+  <li>
+    <a class="waves-effect" href="{{ url_for('admin.users') }}"><i class="material-icons">manage_accounts</i>Users</a>
+  </li>
+  {% endif %}
+</ul>
diff --git a/app/templates/_base/stylesheets.html.j2 b/app/templates/_base/stylesheets.html.j2
new file mode 100644
index 00000000..46f08b54
--- /dev/null
+++ b/app/templates/_base/stylesheets.html.j2
@@ -0,0 +1,23 @@
+<link href="{{ url_for('static', filename='external/material-design-icons/css/material-icons.css') }}" rel="stylesheet">
+{% assets
+    output='gen/nopaque.%(version)s.css',
+    'css/materialize.css',
+    'css/materialize.override.css',
+    'css/nopaque-icons.css',
+    'css/theme-colors.css',
+    'css/corpus-status-colors.css',
+    'css/corpus-status-text.css',
+    'css/height.css',
+    'css/job-status-colors.css',
+    'css/job-status-text.css',
+    'css/service-colors.css',
+    'css/pagination.css',
+    'css/service-icons.css',
+    'css/s-attr-colors.css',
+    'css/spacing.css',
+    'css/status-spinner.css',
+    'css/utils.css',
+    'css/width.css'
+%}
+<link href="{{ ASSET_URL }}" rel="stylesheet">
+{% endassets %}
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index 9b304005..d08a189c 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -1,544 +1,78 @@
+{% if title is not defined %}
+  {% set title = 'nopaque' %}
+{% endif %}
+
+{% block doc %}
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <!-- #region meta -->
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- #endregion meta -->
+<html {% block html_attributes %}lang="en"{% endblock html_attributes %}>
+  {% block html %}
+  <head {% block head_attributes %}{% endblock head_attributes %}>
+    {% block head %}
 
-    <title>{{ title if title is defined else 'nopaque' }}</title>
+    {% block metas %}
+    {% include '_base/metas.html.j2' %}
+    {% endblock metas %}
 
-    <link href="{{ url_for('static', filename='images/nopaque_-_favicon.png') }}" rel="icon">
+    <title {% block title_attribs %}{% endblock title_attribs %}>
+      {% block title %}
+      {{ title }}
+      {% endblock title %}
+    </title>
 
-    <!-- #region stylesheets -->
-    {% block stylesheets %}
-    <link href="{{ url_for('static', filename='external/material-design-icons/css/material-icons.css') }}" rel="stylesheet">
-    {% assets
-      output='gen/nopaque.%(version)s.css',
-      'css/materialize.css',
-      'css/materialize.override.css',
-      'css/nopaque-icons.css',
-      'css/theme-colors.css',
-      'css/corpus-status-colors.css',
-      'css/corpus-status-text.css',
-      'css/job-status-colors.css',
-      'css/job-status-text.css',
-      'css/service-colors.css',
-      'css/pagination.css',
-      'css/service-icons.css',
-      'css/s-attr-colors.css',
-      'css/spacing.css',
-      'css/status-spinner.css',
-      'css/utils.css'
-    -%}
-    <link href="{{ ASSET_URL }}" rel="stylesheet">
-    {% endassets -%}
-    {% endblock stylesheets %}
-    <!-- #endregion stylesheets -->
+    {% block icons %}
+    {% include '_base/icons.html.j2' %}
+    {% endblock icons %}
+
+    {% block styles %}
+    {% include '_base/stylesheets.html.j2' %}
+    {% endblock styles %}
+    {% endblock head %}
   </head>
-  <body>
-    <header>
-      <div class="navbar-fixed">
-        <nav>
-          <div class="nav-wrapper">
-            {# menu icon #}
-            {# small/medium devices #}
-            <a href="#!" class="sidenav-trigger" data-target="sidenav"><i class="material-icons">menu</i></a>
+  <body {% block body_attributes %}{% endblock body_attributes %}>
+    {% block body %}
+    <header {% block header_attributes %}{% endblock header_attributes %}>
+      {% block header %}
 
-            {% if current_user.is_authenticated %}
-            {# nopaque logo #}
-            {# large devices #}
-            <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
-              <img src="{{ url_for('static', filename='images/nopaque_-_logo.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
-            </a>
+      {% block navbar %}
+      {% include '_base/navbar.html.j2' %}
+      {% endblock navbar %}
 
-            {# left aligned navigation items #}
-            {# large devices #}
-            <ul class="hide-on-med-and-down" style="margin-left: calc(57px + 1.5rem);">
-              {# dashboard #}
-              <li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
-                <a href="{{ url_for('main.dashboard') }}">
-                  <i class="material-icons left">dashboard</i>
-                  Dashboard
-                </a>
-              </li>
+      {% block sidenav %}
+      {% include '_base/sidenav.html.j2' %}
+      {% endblock sidenav %}
 
-              {# data processing & analysis #}
-              <li>
-                <a href="#!" class="dropdown-trigger no-autoinit" data-target="navbar-data-processing-and-analysis-dropdown-content" id="navbar-data-processing-and-analysis-dropdown-trigger">
-                  <i class="material-icons left">miscellaneous_services</i>
-                  Data Processing & Analysis
-                </a>
-              </li>
-
-              {# contributions #}
-              <li {% if request.path == url_for('contributions.index') %}class="active"{% endif %}>
-                <a href="{{ url_for('contributions.index') }}">
-                  <i class="material-icons left">new_label</i>
-                  Contributions
-                </a>
-              </li>
-
-              {# social #}
-              <li {% if request.path == url_for('main.social') %}class="active"{% endif %}>
-                <a href="{{ url_for('main.social') }}">
-                  <i class="material-icons left">groups</i>
-                  Social
-                </a>
-              </li>
-            </ul>
-            {% else %}
-            {# nopaque logo+wordmark+slogan #}
-            {# large devices #}
-            <a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%;">
-              <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark+slogan.png') }}" alt="" class="mx-3 py-3" style="height: 100%;">
-            </a>
-            {% endif %}
-
-            {# nopaque logo+wordmark #}
-            {# small/medium devices #}
-            <a href="{{ url_for('main.index') }}" class="brand-logo center hide-on-large-only" style="height: 100%;">
-              <img src="{{ url_for('static', filename='images/nopaque_-_logo+wordmark.png') }}" alt="" class="py-3" style="height: 100%;">
-            </a>
-
-            {# right aligned navigation items #}
-            {# large devices #}
-            <ul class="right hide-on-med-and-down" style="height: 64px;">
-              {# manual #}
-              <li class="tooltipped {% if request.path == url_for('main.manual') %}active{% endif %}" data-position="bottom" data-tooltip="Manual">
-                <a href="{{ url_for('main.manual') }}">
-                  <i class="material-icons">help_outline</i>
-                </a>
-              </li>
-
-              {# news #}
-              <li class="tooltipped {% if request.path == url_for('main.news') %}active{% endif %}" data-position="bottom" data-tooltip="News">
-                <a href="{{ url_for('main.news') }}">
-                  <i class="material-icons">newspaper</i>
-                </a>
-              </li>
-
-              {% if current_user.is_authenticated %}
-              {# avatar #}
-              <li style="height: 100%;">
-                <a href="#!" class="dropdown-trigger no-autoinit" data-target="navbar-account-dropdown-content" id="navbar-account-dropdown-trigger" style="height: 100%;">
-                  <span class="mr-3">{{ current_user.username }}</span>
-                  <img src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt="" class="circle py-3 right" style="height: 100%;">
-                </a>
-              </li>
-              {% else %}
-              {# log in #}
-              <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
-                <a href="{{ url_for('auth.login') }}">Log in</a>
-              </li>
-
-              {# register #}
-              <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
-                <a href="{{ url_for('auth.register') }}" class="btn waves-effect waves-light primary-color lighten">Register</a>
-              </li>
-              {% endif %}
-            </ul>
-          </div>
-        </nav>
-      </div>
-
-      <ul class="sidenav" id="sidenav">
-        {% if current_user.is_authenticated %}
-        {# user view #}
-        <li>
-          <div class="user-view">
-            <div class="background primary-color"></div>
-            <a><img class="circle" src="{{ url_for('users.user_avatar', user_id=current_user.id) }}" alt=""></a>
-            <a><span class="white-text name">{{ current_user.username }}</span></a>
-            <a><span class="white-text email">{{ current_user.email }}</span></a>
-          </div>
-        </li>
-        {% endif %}
-
-        {% if current_user.is_authenticated %}
-        {# dashboard #}
-        <li {% if request.path == url_for('main.dashboard') %}class="active"{% endif %}>
-          <a class="waves-effect" href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a>
-        </li>
-
-        {# contributions #}
-        <li {% if request.path == url_for('contributions.index') %}class="active"{% endif %}>
-          <a href="{{ url_for('contributions.index') }}">
-            <i class="material-icons left">new_label</i>
-            Contributions
-          </a>
-        </li>
-
-        {# social #}
-        <li {% if request.path == url_for('main.social') %}class="active"{% endif %}>
-          <a class="waves-effect" href="{{ url_for('main.social') }}"><i class="material-icons">groups</i>Social</a>
-        </li>
-        {% endif %}
-
-        {# news #}
-        <li {% if request.path == url_for('main.news') %}class="active"{% endif %}>
-          <a class="waves-effect" href="{{ url_for('main.news') }}"><i class="material-icons">newspaper</i>News</a>
-        </li>
-
-        {# manual #}
-        <li {% if request.path == url_for('main.manual') %}class="active"{% endif %}>
-          <a class="waves-effect" href="{{ url_for('main.manual') }}"><i class="material-icons">help_outline</i>Manual</a>
-        </li>
-
-        {% if current_user.is_authenticated %}
-        {# data processing & analysis section #}
-        <li><div class="divider"></div></li>
-        <li><a class="subheader">Data Processing & Analysis</a></li>
-
-        {# file setup pipeline #}
-        <li class="service-color service-color-border border-darken" data-service="file-setup-pipeline" style="border-left: 10px solid;">
-          <a class="waves-effect" href="{{ url_for('services.file_setup_pipeline') }}"><i class="nopaque-icons service-icons" data-service="file-setup-pipeline"></i>File setup</a>
-        </li>
-
-        {# tesseract ocr pipeline #}
-        <li class="service-color service-color-border border-darken mt-1" data-service="tesseract-ocr-pipeline" style="border-left: 10px solid;">
-          <a class="waves-effect" href="{{ url_for('services.tesseract_ocr_pipeline') }}"><i class="nopaque-icons service-icons" data-service="tesseract-ocr-pipeline"></i>OCR</a>
-        </li>
-
-        {% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
-        {# transkribus htr pipeline #}
-        <li class="service-color service-color-border border-darken mt-1" data-service="transkribus-htr-pipeline" style="border-left: 10px solid;">
-          <a class="waves-effect" href="{{ url_for('services.transkribus_htr_pipeline') }}"><i class="nopaque-icons service-icons" data-service="transkribus-htr-pipeline"></i>HTR</a>
-        </li>
-        {% endif %}
-
-        {# spacy nlp pipeline #}
-        <li class="service-color service-color-border border-darken mt-1" data-service="spacy-nlp-pipeline" style="border-left: 10px solid;">
-          <a class="waves-effect" href="{{ url_for('services.spacy_nlp_pipeline') }}"><i class="nopaque-icons service-icons" data-service="spacy-nlp-pipeline"></i>NLP</a>
-        </li>
-
-        {# corpus analysis #}
-        <li class="service-color service-color-border border-darken mt-1" data-service="corpus-analysis" style="border-left: 10px solid;">
-          <a class="waves-effect" href="{{ url_for('services.corpus_analysis') }}"><i class="nopaque-icons service-icons" data-service="corpus-analysis"></i>Corpus Analysis</a>
-        </li>
-        {% endif %}
-
-        {# account section #}
-        <li><div class="divider"></div></li>
-        <li><a class="subheader">Account</a></li>
-
-        {% if current_user.is_authenticated %}
-        {# my profile #}
-        <li {% if request.path == url_for('users.user', user_id=current_user.id) %}class="active"{% endif %}>
-          <a href="{{ url_for('users.user', user_id=current_user.id) }}"><i class="material-icons">person</i>My Profile</a>
-        </li>
-
-        {# settings #}
-        <li {% if request.path == url_for('settings.settings') %}class="active"{% endif %}>
-          <a class="waves-effect" href="{{ url_for('settings.settings') }}"><i class="material-icons">settings</i>Settings</a>
-        </li>
-
-        {# log out #}
-        <li>
-          <a class="waves-effect" href="{{ url_for('auth.logout') }}"><i class="material-icons">logout</i>Log out</a>
-        </li>
-        {% else %}
-        {# log in #}
-        <li {% if request.path == url_for('auth.login') %}class="active"{% endif %}>
-          <a href="{{ url_for('auth.login') }}">Log in</a>
-        </li>
-
-        {# register #}
-        <li {% if request.path == url_for('auth.register') %}class="active"{% endif %}>
-          <a href="{{ url_for('auth.register') }}" class="btn waves-effect waves-light">Register</a>
-        </li>
-        {% endif %}
-
-        {% if current_user.is_authenticated and current_user.can('ADMINISTRATE') %}
-        {# administration section #}
-        <li><div class="divider"></div></li>
-        <li><a class="subheader">Administration</a></li>
-
-        {# corpora #}
-        <li>
-          <a class="waves-effect" href="{{ url_for('admin.corpora') }}"><i class="nopaque-icons">I</i>Corpora</a>
-        </li>
-
-        {# users #}
-        <li>
-          <a class="waves-effect" href="{{ url_for('admin.users') }}"><i class="material-icons">manage_accounts</i>Users</a>
-        </li>
-        {% endif %}
-      </ul>
+      {% endblock header %}
     </header>
 
-    <main {% block main_attribs %}{% endblock main_attribs %}>
+    <main {% block main_attributes %}{% endblock main_attributes %}>
+      {% block main %}
       {% block page_content %}{% endblock page_content %}
+      {% endblock main %}
     </main>
 
-    <footer class="page-footer">
-      <div class="container">
-        <div class="row">
-          <div class="col s12 l3">
-            <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>
-            </ul>
-          </div>
-
-          <div class="col s12 l3">
-            <h5 class="white-text">More Resources</h5>
-            <ul>
-              <li><a class="grey-text text-lighten-3" href="{{ url_for('main.faq') }}">Frequently asked questions</a></li>
-              <li><a class="grey-text text-lighten-3" href="mailto:{{ config.NOPAQUE_SERVICE_DESK }}">Report an issue</a></li>
-              <li><a class="grey-text text-lighten-3" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque">GitLab (source code)</a></li>
-            </ul>
-          </div>
-
-          <div class="col s12 l4">
-            <h5 class="white-text">Who made this?</h5>
-            <p class="grey-text text-lighten-4">
-              This software is developed by the SFB 1288 INF project at Bielefeld University.
-              Thanks to all the people who made nopaque possible.
-              <span class="red-text">&hearts;</span>
-            </p>
-          </div>
-
-          <div class="col s12 l2">
-            <br class="hide-on-med-and-down">
-            <br class="hide-on-med-and-down">
-            <a href="https://www.dfg.de/">
-              <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
-            </a>
-          </div>
-        </div>
-      </div>
-
-      <div class="footer-copyright">
-        <div class="container">
-          © 2024 Bielefeld University
-          <a class="grey-text text-lighten-4 right" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque/-/releases/{{ config.NOPAQUE_VERSION }}">Version {{ config.NOPAQUE_VERSION }}</a>
-        </div>
-      </div>
+    <footer {% block footer_attributes %}class="page-footer"{% endblock footer_attributes %}>
+      {% block footer %}
+      {% include '_base/footer.html.j2' %}
+      {% endblock footer %}
     </footer>
 
-    <div id="dropdowns">
+    <div {% block dropdowns_attributes %}id="dropdowns"{% endblock dropdowns_attributes %}>
       {% block dropdowns %}
-      {% if current_user.is_authenticated %}
-      <ul class="dropdown-content" id="navbar-data-processing-and-analysis-dropdown-content">
-        <li {% if request.path == url_for('services.file_setup_pipeline') %}class="active"{% endif %}>
-          <a href="{{ url_for('services.file_setup_pipeline') }}">
-            <i class="nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
-            File Setup Pipeline
-          </a>
-        </li>
-        <li {% if request.path == url_for('services.tesseract_ocr_pipeline') %}class="active"{% endif %}>
-          <a href="{{ url_for('services.tesseract_ocr_pipeline') }}">
-            <i class="nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
-            Tesseract OCR Pipeline
-          </a>
-        </li>
-        {% if config.NOPAQUE_TRANSKRIBUS_ENABLED %}
-        <li {% if request.path == url_for('services.transkribus_htr_pipeline') %}class="active"{% endif %}>
-          <a href="{{ url_for('services.transkribus_htr_pipeline') }}">
-            <i class="nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
-            Transkribus HTR Pipeline
-          </a>
-        </li>
-        {% endif %}
-        <li {% if request.path == url_for('services.spacy_nlp_pipeline') %}class="active"{% endif %}>
-          <a href="{{ url_for('services.spacy_nlp_pipeline') }}">
-            <i class="nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
-            SpaCy NLP Pipeline
-          </a>
-        </li>
-        <li class="divider" tabindex="-1"></li>
-        <li {% if request.path == url_for('services.corpus_analysis') %}class="active"{% endif %}>
-          <a href="{{ url_for('services.corpus_analysis') }}">
-            <i class="nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
-            Corpus Analyis
-          </a>
-        </li>
-      </ul>
-      {% endif %}
-
-      {% if current_user.is_authenticated %}
-      <ul class="dropdown-content" id="navbar-account-dropdown-content">
-        <li {% if request.path == url_for('users.user', user_id=current_user.id) %}class="active"{% endif %}>
-          <a href="{{ url_for('users.user', user_id=current_user.id) }}">
-            <i class="material-icons">person</i>
-            Your profile
-          </a>
-        </li>
-        <li {% if request.path == url_for('settings.settings') %}class="active"{% endif %}>
-          <a href="{{ url_for('settings.settings') }}">
-            <i class="material-icons">settings</i>
-            Settings
-          </a>
-        </li>
-        <li>
-          <a href="{{ url_for('auth.logout') }}">
-            <i class="material-icons">logout</i>
-            Log out
-          </a>
-        </li>
-      </ul>
-      {% endif %}
+      {% include '_base/dropdowns.html.j2' %}
       {% endblock dropdowns %}
     </div>
 
-    <div id="modals">
+    <div {% block modals_attributes %}id="modals"{% endblock modals_attributes %}>
       {% block modals %}
-      {% if current_user.is_authenticated and not current_user.terms_of_use_accepted %}
-      <div id="terms-of-use-modal" class="modal modal-fixed-footer">
-        <div class="modal-content">
-          <div class="container">
-            <div class="row">
-              <div class="col s12">
-                <h1 id="title">Terms of use</h1>
-              </div>
-              <div class="col s12">
-                <div class="switch">
-                  <label>
-                    DE
-                    <input type="checkbox" id="terms-of-use-modal-switch">
-                    <span class="lever"></span>
-                    EN
-                  </label>
-                </div>
-                <br>
-              </div>
-              <div class="terms-of-use-modal-content hide">
-                {% include "main/terms_of_use_en.html.j2" %}
-              </div>
-              <div class="terms-of-use-modal-content">
-                {% include "main/terms_of_use_de.html.j2" %}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="modal-footer">
-          <span style="margin-right:20px;">I have taken note of the new GTC and agree to their validity in the context of my further use.</span>
-          <a href="#!" class="modal-close waves-effect waves-green btn">Yes</a>
-        </div>
-      </div>
-      {% endif %}
+      {% include '_base/modals.html.j2' %}
       {% endblock modals %}
     </div>
 
-    <!-- #region scripts -->
     {% block scripts %}
-    <script src="{{ url_for('static', filename='external/materialize/js/materialize.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='external/JSON-Patch/js/fast-json-patch.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='external/list.js/js/list.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='external/pako/js/pako_inflate.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='external/plotly.js/js/plotly.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='external/socket.io/js/socket.io.min.js') }}"></script>
-    {% assets
-      filters='rjsmin',
-      output='gen/nopaque.%(version)s.js',
-      'js/index.js',
-      'js/app.js',
-      'js/utils.js',
-
-      'js/forms/index.js',
-      'js/forms/base-form.js',
-      'js/forms/create-contribution-form.js',
-      'js/forms/create-corpus-file-form.js',
-      'js/forms/create-job-form.js',
-
-      'js/resource-displays/index.js',
-      'js/resource-displays/resource-display.js',
-      'js/resource-displays/corpus-display.js',
-      'js/resource-displays/job-display.js',
-
-      'js/resource-lists/index.js',
-      'js/resource-lists/resource-list.js',
-      'js/resource-lists/admin-user-list.js',
-      'js/resource-lists/corpus-file-list.js',
-      'js/resource-lists/corpus-follower-list.js',
-      'js/resource-lists/corpus-list.js',
-      'js/resource-lists/corpus-text-info-list.js',
-      'js/resource-lists/corpus-token-list.js',
-      'js/resource-lists/detailed-public-corpus-list.js',
-      'js/resource-lists/job-input-list.js',
-      'js/resource-lists/job-list.js',
-      'js/resource-lists/job-result-list.js',
-      'js/resource-lists/public-corpus-list.js',
-      'js/resource-lists/public-user-list.js',
-      'js/resource-lists/spacy-nlp-pipeline-model-list.js',
-      'js/resource-lists/tesseract-ocr-pipeline-model-list.js',
-
-      'js/requests/index.js',
-      'js/requests/admin.js',
-      'js/requests/contributions.js',
-      'js/requests/corpora.js',
-      'js/requests/jobs.js',
-      'js/requests/users.js',
-
-      'js/corpus-analysis/index.js',
-      'js/corpus-analysis/cqi/index.js',
-      'js/corpus-analysis/cqi/constants.js',
-      'js/corpus-analysis/cqi/errors.js',
-      'js/corpus-analysis/cqi/status.js',
-      'js/corpus-analysis/cqi/api/index.js',
-      'js/corpus-analysis/cqi/api/client.js',
-      'js/corpus-analysis/cqi/models/index.js',
-      'js/corpus-analysis/cqi/models/resource.js',
-      'js/corpus-analysis/cqi/models/attributes.js',
-      'js/corpus-analysis/cqi/models/subcorpora.js',
-      'js/corpus-analysis/cqi/models/corpora.js',
-      'js/corpus-analysis/cqi/client.js',
-      'js/corpus-analysis/query-builder/index.js',
-      'js/corpus-analysis/query-builder/element-references.js',
-      'js/corpus-analysis/query-builder/query-builder.js',
-      'js/corpus-analysis/query-builder/structural-attribute-builder-functions.js',
-      'js/corpus-analysis/query-builder/token-attribute-builder-functions.js',
-      'js/corpus-analysis/app.js',
-      'js/corpus-analysis/concordance-extension.js',
-      'js/corpus-analysis/reader-extension.js',
-      'js/corpus-analysis/static-visualization-extension.js'
-    -%}
-    <script src="{{ ASSET_URL }}"></script>
-    {% endassets -%}
-
-    <script>
-      // TODO: Implement an app.run method and use this for all of the following
-      const app = new nopaque.App();
-      app.init();
-
-      {% if current_user.is_authenticated -%}
-      // TODO: Set this as a property of the app object
-      const currentUserId = {{ current_user.hashid|tojson }};
-
-      // Subscribe to the current user's data events
-      app.subscribeUser(currentUserId)
-        .catch((error) => {throw JSON.stringify(error);});
-
-      // Get the current user's data
-      app.getUser(currentUserId, true, true)
-        .catch((error) => {throw JSON.stringify(error);});
-
-      {% if not current_user.terms_of_use_accepted -%}
-      M.Modal.getInstance(document.querySelector('#terms-of-use-modal')).open();
-      {% endif -%}
-      {% endif -%}
-
-      // Display flashed messages
-      for (let [category, message] of {{ get_flashed_messages(with_categories=True)|tojson }}) {
-        app.flash(message, message);
-      }
-    </script>
-
-    <script>
-      let languageModalSwitch = document.querySelector('#terms-of-use-modal-switch');
-      let termsOfUseModalContent = document.querySelectorAll('.terms-of-use-modal-content');
-      if (languageModalSwitch) {
-        languageModalSwitch.addEventListener('change', function() {
-          termsOfUseModalContent.forEach(content => {
-            content.classList.toggle('hide');
-          });
-        });
-      }
-    </script>
+    {% include '_base/scripts.html.j2' %}
     {% endblock scripts %}
-    <!-- #endregion scripts -->
+    {% endblock body %}
   </body>
+  {% endblock html %}
 </html>
+{% endblock doc %}
diff --git a/app/templates/services/corpus_analysis.html.j2 b/app/templates/services/corpus_analysis.html.j2
index 17aa2701..ea5b07a6 100644
--- a/app/templates/services/corpus_analysis.html.j2
+++ b/app/templates/services/corpus_analysis.html.j2
@@ -1,6 +1,6 @@
 {% extends "base.html.j2" %}
 
-{% block main_attribs %}class="service-color lighten" data-service="corpus-analysis"{% endblock main_attribs %}
+{% block main_attributes %}class="service-color lighten" data-service="corpus-analysis"{% endblock main_attributes %}
 
 {% block page_content %}
 <div class="container">
@@ -11,7 +11,7 @@
 
     <div class="col s12 m3 push-m9">
       <div class="center-align">
-        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="corpus-analysis"></i>
+        <i class="large nopaque-icons service-icons service-color-text text-darken"></i>
       </div>
     </div>
 
diff --git a/app/templates/services/file_setup_pipeline.html.j2 b/app/templates/services/file_setup_pipeline.html.j2
index 70474dd8..1f397fbd 100644
--- a/app/templates/services/file_setup_pipeline.html.j2
+++ b/app/templates/services/file_setup_pipeline.html.j2
@@ -1,10 +1,10 @@
 {% extends "base.html.j2" %}
 {% import "wtf.html.j2" as wtf %}
 
-{% block main_attribs %}class="service-color lighten" data-service="file-setup-pipeline"{% endblock main_attribs %}
+{% block main_attributes %}class="service-color lighten" data-service="file-setup-pipeline"{% endblock main_attributes %}
 
 {% block page_content %}
-<div class="container" data-service="file-setup-pipeline">
+<div class="container">
   <div class="row">
     <div class="col s12">
       <h1 id="title">{{ title }}</h1>
@@ -14,12 +14,12 @@
       <div class="center-align">
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
-        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="file-setup-pipeline"></i>
+        <i class="large nopaque-icons service-icons service-color-text text-darken"></i>
       </div>
     </div>
 
     <div class="col s12 m9 pull-m3">
-      <div class="card service-color-border border-darken" data-service="file-setup-pipeline" style="border-top: 10px solid;">
+      <div class="card service-color-border border-darken" style="border-top: 10px solid;">
         <div class="card-content">
           <div class="row">
             <div class="col s12">
diff --git a/app/templates/services/spacy_nlp_pipeline.html.j2 b/app/templates/services/spacy_nlp_pipeline.html.j2
index d2cd395d..c621b218 100644
--- a/app/templates/services/spacy_nlp_pipeline.html.j2
+++ b/app/templates/services/spacy_nlp_pipeline.html.j2
@@ -1,7 +1,7 @@
 {% extends "base.html.j2" %}
 {% import "wtf.html.j2" as wtf %}
 
-{% block main_attribs %}class="service-color lighten" data-service="spacy-nlp-pipeline"{% endblock main_attribs %}
+{% block main_attributes %}class="service-color lighten" data-service="spacy-nlp-pipeline"{% endblock main_attributes %}
 
 {% block page_content %}
 <div class="container">
@@ -14,12 +14,12 @@
       <div class="center-align">
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
-        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="spacy-nlp-pipeline"></i>
+        <i class="large nopaque-icons service-icons service-color-text text-darken"></i>
       </div>
     </div>
 
     <div class="col s12 m9 pull-m3">
-      <div class="card service-color-border border-darken" data-service="spacy-nlp-pipeline" style="border-top: 10px solid;">
+      <div class="card service-color-border border-darken" style="border-top: 10px solid;">
         <div class="card-content">
           <div class="row">
             <div class="col s12 m6">
diff --git a/app/templates/services/tesseract_ocr_pipeline.html.j2 b/app/templates/services/tesseract_ocr_pipeline.html.j2
index 47e4c90d..12e0d393 100644
--- a/app/templates/services/tesseract_ocr_pipeline.html.j2
+++ b/app/templates/services/tesseract_ocr_pipeline.html.j2
@@ -1,7 +1,7 @@
 {% extends "base.html.j2" %}
 {% import "wtf.html.j2" as wtf %}
 
-{% block main_attribs %}class="service-color lighten" data-service="tesseract-ocr-pipeline"{% endblock main_attribs %}
+{% block main_attributes %}class="service-color lighten" data-service="tesseract-ocr-pipeline"{% endblock main_attributes %}
 
 {% block page_content %}
 <div class="container">
@@ -14,12 +14,12 @@
       <div class="center-align">
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
-        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="tesseract-ocr-pipeline"></i>
+        <i class="large nopaque-icons service-icons service-color-text text-darken"></i>
       </div>
     </div>
 
     <div class="col s12 m9 pull-m3">
-      <div class="card service-color-border border-darken" data-service="tesseract-ocr-pipeline" style="border-top: 10px solid;">
+      <div class="card service-color-border border-darken" style="border-top: 10px solid;">
         <div class="card-content">
           <div class="row">
             <div class="col s12">
diff --git a/app/templates/services/transkribus_htr_pipeline.html.j2 b/app/templates/services/transkribus_htr_pipeline.html.j2
index f2bc3a30..dde460c7 100644
--- a/app/templates/services/transkribus_htr_pipeline.html.j2
+++ b/app/templates/services/transkribus_htr_pipeline.html.j2
@@ -1,7 +1,7 @@
 {% extends "base.html.j2" %}
 {% import "wtf.html.j2" as wtf %}
 
-{% block main_attribs %}class="service-color lighten" data-service="transkribus-htr-pipeline"{% endblock main_attribs %}
+{% block main_attributes %}class="service-color lighten" data-service="transkribus-htr-pipeline"{% endblock main_attributes %}
 
 {% block page_content %}
 <div class="container">
@@ -14,7 +14,7 @@
       <div class="center-align">
         <p class="hide-on-small-only">&nbsp;</p>
         <p class="hide-on-small-only">&nbsp;</p>
-        <i class="large nopaque-icons service-icons service-color-text text-darken" data-service="transkribus-htr-pipeline"></i>
+        <i class="large nopaque-icons service-icons service-color-text text-darken"></i>
       </div>
     </div>