Add text color classes

This commit is contained in:
Patrick Jentsch 2020-08-25 15:26:36 +02:00
parent 45b8beb053
commit 7d7d275dc4
5 changed files with 45 additions and 19 deletions

View File

@ -106,7 +106,7 @@ indicator will show up how the column is sorted right now.; */
.service[data-service]:before {
content: "help";
}
.service[data-service="corpus_analysis"]:before {
.service[data-service="corpus-analysis"]:before {
content: "search";
}
.service[data-service="file-setup"]:before {

View File

@ -30,23 +30,23 @@
<div class="col s12">
<div class="row">
<div class="col s12 m6 l3 center-align">
<i class="large material-icons" style="color: #ee6e73;">flash_on</i>
<p>Speeds up your work</p>
<i class="large material-icons secondary-color-text">flash_on</i>
<p class="primary-color-text"><b>Speeds up your work</b></p>
<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 material-icons" style="color: #ee6e73;">cloud</i>
<p>Cloud infrastructure</p>
<i class="large material-icons secondary-color-text">cloud</i>
<p class="primary-color-text"><b>Cloud infrastructure</b></p>
<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 material-icons" style="color: #ee6e73;">group</i>
<p>User friendly</p>
<i class="large material-icons secondary-color-text">group</i>
<p class="primary-color-text"><b>User friendly</b></p>
<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 material-icons" style="color: #ee6e73;">settings</i>
<p>Meshing processes</p>
<i class="large material-icons secondary-color-text">settings</i>
<p class="primary-color-text"><b>Meshing processes</b></p>
<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>
@ -85,23 +85,35 @@
<br class="hide-on-small-only">
<div class="row">
<div class="col s12 m6 l3 center-align">
<i class="large material-icons" style="color: #ee6e73;">burst_mode</i>
<p>File setup</p>
<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="material-icons service" data-service="file-setup"></i>
</a>
<p>&nbsp;</p>
<p class="file-setup-color-text"><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">
<i class="large material-icons" style="color: #ee6e73;">find_in_page</i>
<p>Optical Character Recognition</p>
<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="material-icons service" data-service="ocr"></i>
</a>
<p>&nbsp;</p>
<p class="ocr-color-text"><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">
<i class="large material-icons" style="color: #ee6e73;">format_textdirection_l_to_r</i>
<p>Natural Language Processing</p>
<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="material-icons service" data-service="nlp"></i>
</a>
<p>&nbsp;</p>
<p class="nlp-color-text"><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">
<i class="large material-icons" style="color: #ee6e73;">search</i>
<p>Corpus analysis</p>
<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="material-icons service" data-service="corpus-analysis"></i>
</a>
<p>&nbsp;</p>
<p class="corpus-analysis-color-text"><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

@ -58,23 +58,37 @@
<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;}
{% if current_user.is_authenticated %}
/*
* ### Start sidenav-fixed offset ###

View File

@ -131,7 +131,7 @@
<div class="card">
<div class="card-content">
<a class="btn-floating btn-large hoverable left" style="margin-right: 15px;">
<i class="material-icons service" data-service="corpus_analysis"></i>
<i class="material-icons service" data-service="corpus-analysis"></i>
</a>
<span class="card-title">Corpus analysis</span>
<i>Create 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.</i>

View File

@ -10,7 +10,7 @@
<div class="col s12 m3 push-m9">
<div class="center-align">
<a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
<i class="material-icons service" data-service="corpus_analysis"></i>
<i class="material-icons service" data-service="corpus-analysis"></i>
</a>
</div>
</div>