diff --git a/web/app/static/css/nopaque.css b/web/app/static/css/nopaque.css
index f1e6f5e0c17a029bf2844a6f2e3e329bc5b6a26f..66421a7d9519ecfab0267bb5bfaa68e27620905e 100644
--- a/web/app/static/css/nopaque.css
+++ b/web/app/static/css/nopaque.css
@@ -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 {
diff --git a/web/app/templates/main/index.html.j2 b/web/app/templates/main/index.html.j2
index 208a1e72fec6d73a1478956aa428f08b152a958a..a8d1c5f9394c76d357b8cf3f986a9b6d831977a3 100644
--- a/web/app/templates/main/index.html.j2
+++ b/web/app/templates/main/index.html.j2
@@ -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 nopaque’s 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> </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> </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> </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> </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>
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 58b532e608892c71749d2fa730756a7660f4b120..1717b658c6d9a2b35ed10b111904ae7ddca1a807 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -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 ###
diff --git a/web/app/templates/playground/index.html.j2 b/web/app/templates/playground/index.html.j2
index 7ed676defab4b5cacf177f7192819cf3208ffda6..6ac6acc2c4afbde5ec7bbd3984912f1f6245c290 100644
--- a/web/app/templates/playground/index.html.j2
+++ b/web/app/templates/playground/index.html.j2
@@ -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>
diff --git a/web/app/templates/services/corpus_analysis.html.j2 b/web/app/templates/services/corpus_analysis.html.j2
index 02f6e8cf88b13e2cbf9bc5288754d46e44923400..d339cc907a01f4203b96539685d84a2c0a3834e1 100644
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/web/app/templates/services/corpus_analysis.html.j2
@@ -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>