Designpatch 1/2

This commit is contained in:
Patrick Jentsch 2021-05-04 17:27:57 +02:00
parent 430bcf53ea
commit 04e53fef98
3 changed files with 53 additions and 49 deletions

View File

@ -126,15 +126,16 @@
<div id="new-job-modal" class="modal">
<div class="modal-content">
<h4>Select a service</h4>
<p>&nbsp;</p>
<div class="row">
<div class="col s12 m4">
<div class="card-panel center-align hoverable">
<br>
<a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="file-setup"></i>
<a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="file-setup" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="file-setup-color-text"><b>File setup</b></p>
<br><br>
<p class="file-setup-color-text darken"><b>File setup</b></p>
<p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
<a href="{{ url_for('services.service', service='file-setup') }}" class="waves-effect waves-light btn file-setup-color darken">Create Job</a>
</div>
@ -142,11 +143,11 @@
<div class="col s12 m4">
<div class="card-panel center-align hoverable">
<br>
<a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="ocr"></i>
<a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="ocr" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="ocr-color-text"><b>Optical Character Recognition</b></p>
<br><br>
<p class="ocr-color-text darken"><b>Optical Character Recognition</b></p>
<p class="light">nopaque converts your image data like photos or scans into text data through a process called OCR. This step enables you to proceed with further computational analysis of your documents.</p>
<a href="{{ url_for('services.service', service='ocr') }}" class="waves-effect waves-light btn ocr-color darken">Create Job</a>
</div>
@ -154,11 +155,11 @@
<div class="col s12 m4">
<div class="card-panel center-align hoverable">
<br>
<a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="nlp"></i>
<a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="nlp" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="nlp-color-text"><b>Natural Language Processing</b></p>
<br><br>
<p class="nlp-color-text darken"><b>Natural Language Processing</b></p>
<p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
<a href="{{ url_for('services.service', service='nlp') }}" class="waves-effect waves-light btn nlp-color darken">Create Job</a>
</div>

View File

@ -24,23 +24,23 @@
<div class="col s12">
<div class="row">
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">A</i>
<p class="primary-color-text"><b>Speeds up your work</b></p>
<i class="large nopaque-icons secondary-color-text">A</i><br>
<b class="primary-color-text">Speeds up your work</b>
<p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without being held up by compatibility issues.</p>
</div>
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">B</i>
<p class="primary-color-text"><b>Cloud infrastructure</b></p>
<i class="large nopaque-icons secondary-color-text">B</i><br>
<b class="primary-color-text">Cloud infrastructure</b>
<p class="light">All computational work is processed within nopaques cloud infrastructure. You don't need to install any software. Great, right?</p>
</div>
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">C</i>
<p class="primary-color-text"><b>User friendly</b></p>
<i class="large nopaque-icons secondary-color-text">C</i><br>
<b class="primary-color-text">User friendly</b>
<p class="light">You can start right away without having to read mile-long manuals. All services come with default settings that make it easy for you to just get going. Also great, right?</p>
</div>
<div class="col s12 m6 l3 center-align">
<i class="large nopaque-icons secondary-color-text">D</i>
<p class="primary-color-text"><b>Meshing processes</b></p>
<i class="large nopaque-icons secondary-color-text">D</i><br>
<b class="primary-color-text">Meshing processes</b>
<p class="light">No matter where you step in, nopaque facilitates and accompanies your research. Its workflow perfectly ties in with your research process.</p>
</div>
</div>
@ -76,38 +76,38 @@
</div>
<div class="col s12">
<br class="hide-on-small-only">
<p class="hide-on-small-only">&nbsp;</p>
<div class="row">
<div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="file-setup"></i>
<a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="file-setup" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="file-setup-color-text"><b>File setup</b></p>
<br><br>
<p class="file-setup-color-text text-darken"><b>File setup</b></p>
<p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
</div>
<div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="ocr"></i>
<a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="ocr" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="ocr-color-text"><b>Optical Character Recognition</b></p>
<br><br>
<p class="ocr-color-text text-darken"><b>Optical Character Recognition</b></p>
<p class="light">nopaque converts your image data like photos or scans into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
</div>
<div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="nlp"></i>
<a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="nlp" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="nlp-color-text"><b>Natural Language Processing</b></p>
<br><br>
<p class="nlp-color-text text-darken"><b>Natural Language Processing</b></p>
<p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
</div>
<div class="col s12 m6 l3 center-align">
<a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="corpus-analysis"></i>
<a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="nopaque-icons service" data-service="corpus-analysis" style="font-size: 2.5rem;"></i>
</a>
<p>&nbsp;</p>
<p class="corpus-analysis-color-text"><b>Corpus analysis</b></p>
<br><br>
<p class="corpus-analysis-color-text text-darken"><b>Corpus analysis</b></p>
<p class="light">nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</p>
</div>
</div>

View File

@ -37,6 +37,7 @@
.corpus-analysis-color-text.text-darken {color: {{ colors.corpus_analysis_darken }} !important;}
.corpus-analysis-color.lighten {background-color: {{ colors.corpus_analysis_lighten }} !important;}
.corpus-analysis-color-text.text-lighten {color: {{ colors.corpus_analysis_lighten }} !important;}
.service[data-service="corpus-analysis"] {background-color: {{ colors.corpus_analysis_darken }} !important;}
.file-setup-color {background-color: {{ colors.file_setup }} !important;}
.file-setup-color-text {color: {{ colors.file_setup }} !important;}
@ -44,6 +45,7 @@
.file-setup-color-text.text-darken {color: {{ colors.file_setup_darken }} !important;}
.file-setup-color.lighten {background-color: {{ colors.file_setup_lighten }} !important;}
.file-setup-color-text.text-lighten {color: {{ colors.file_setup_lighten }} !important;}
.service[data-service="file-setup"] {background-color: {{ colors.file_setup_darken }} !important;}
.ocr-color {background-color: {{ colors.ocr }} !important;}
.ocr-color-text {color: {{ colors.ocr }} !important;}
@ -51,6 +53,7 @@
.ocr-color-text.text-darken {color: {{ colors.ocr_darken }} !important;}
.ocr-color.lighten {background-color: {{ colors.ocr_lighten }} !important;}
.ocr-color-text.text-lighten {color: {{ colors.ocr_lighten }} !important;}
.service[data-service="ocr"] {background-color: {{ colors.ocr_darken }} !important;}
.nlp-color {background-color: {{ colors.nlp }} !important;}
.nlp-color-text {color: {{ colors.nlp }} !important;}
@ -58,6 +61,7 @@
.nlp-color-text.text-darken {color: {{ colors.nlp_darken }} !important;}
.nlp-color.lighten {background-color: {{ colors.nlp_lighten }} !important;}
.nlp-color-text.text-lighten {color: {{ colors.nlp_lighten }} !important;}
.service[data-service="nlp"] {background-color: {{ colors.nlp_darken }} !important;}
{% if scheme_primary_color is not defined %}
{% set scheme_primary_color = colors.primary %}
@ -88,17 +92,12 @@
{% if current_user.is_authenticated %}
<a href="#" data-target="sidenav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
{% endif %}
<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-med-and-down" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;"></a>
<a href="{{ url_for('main.index') }}" class="brand-logo hide-on-large-only" style="height: 100%; overflow: hidden;"><img src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;"></a>
<a href="{{ url_for('main.index') }}" class="brand-logo" style="height: 100%; overflow: hidden;">
<img class="hide-on-small-only" src="{{ url_for('static', filename='images/nopaque_-_logo_name_slogan.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;">
<img class="hide-on-med-and-up" src="{{ url_for('static', filename='images/nopaque_-_logo.svg') }}" style="height: 128px; margin-top: -32px; margin-left: -32px;">
</a>
<ul class="right">
<li class="hide-on-med-and-down{% if request.path == url_for('main.news') %} active{% endif %}"><a href="{{ url_for('main.news') }}"><i class="material-icons left">notifications</i>News</a></li>
{% if current_user.is_authenticated %}
<li class="hide-on-med-and-down{% if request.path == url_for('main.dashboard') %} active{% endif %}"><a href="{{ url_for('main.dashboard') }}"><i class="material-icons left">dashboard</i>Dashboard</a></li>
<li class="hide-on-med-and-down"><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
{% else %}
<li{% if request.path == url_for('auth.register') %} class="active"{% endif %}><a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a></li>
<li{% if request.path == url_for('auth.login') %} class="active"{% endif %}><a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a></li>
{% endif %}
<li><a class="dropdown-trigger no-autoinit" data-target="nav-more-dropdown" href="#!" id="nav-more-dropdown-trigger"><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
<div class="nav-content secondary-color">
@ -110,13 +109,16 @@
</nav>
</div>
{% if current_user.is_authenticated %}
<ul class="dropdown-content" id="nav-more-dropdown">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('settings.index') }}"><i class="material-icons left">settings</i>Settings</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="{{ url_for('auth.logout') }}">Log out</a></li>
</ul>
{% else %}
<li{% if request.path == url_for('auth.register') %} class="active"{% endif %}><a href="{{ url_for('auth.register') }}"><i class="material-icons left">assignment</i>Register</a></li>
<li{% if request.path == url_for('auth.login') %} class="active"{% endif %}><a href="{{ url_for('auth.login') }}"><i class="material-icons left">login</i>Log in</a></li>
{% endif %}
</ul>
{% endblock navbar %}
{% block sidenav %}
@ -130,6 +132,7 @@
</div>
</li>
<li><a href="{{ url_for('main.index') }}">nopaque</a></li>
<li><a href="{{ url_for('main.news') }}"><i class="material-icons left">email</i>News</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="nopaque-icons">I</i>My Corpora</a></li>