From f57d08354973fc0ffd2fff141e900c2a96192b00 Mon Sep 17 00:00:00 2001
From: thilo <thilo.billerbeck@officerent.de>
Date: Sat, 21 Mar 2020 23:12:37 +0100
Subject: [PATCH] improved results page, improved styling

---
 src/App.vue            |  3 ++-
 src/views/HelpPage.vue |  4 +++-
 src/views/Results.vue  | 38 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a80cac9..7206058 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -63,6 +63,7 @@
     font-family: Zilla Slab;
     font-style: normal;
     font-weight: normal;
-    font-size: 30px;
+    line-height: 1.35em;
+    font-size: 24px;
   }
 </style>
diff --git a/src/views/HelpPage.vue b/src/views/HelpPage.vue
index ba349dc..c842949 100644
--- a/src/views/HelpPage.vue
+++ b/src/views/HelpPage.vue
@@ -17,5 +17,7 @@
 </script>
 
 <style scoped>
-
+.help {
+    padding: 1em;
+}
 </style>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 6fc8747..2f5cb62 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -1,6 +1,21 @@
 <template>
-    <div>
+    <div class="results">
         <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
+        <p>Auf Folgendes sollten Sie achten:</p>
+        <div class="card-advice alert">
+            <div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
+            <div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
+        </div>
+        <p>Hier können Sie sich noch verbessern:</p>
+        <div class="card-advice warning">
+            <div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
+            <div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
+        </div>
+        <p>Das machen Sie schon gut:</p>
+        <div class="card-advice success">
+            <div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div>
+            <div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
+        </div>
     </div>
 </template>
 
@@ -20,5 +35,24 @@
 </script>
 
 <style scoped>
-
+    .results {
+        padding: 1em;
+    }
+    .card-advice {
+        padding: 0.8em;
+        border-radius: 0.8em;
+    }
+    .card-advice .card-advice-title {
+        font-weight: bolder;
+        margin-bottom: 0.5em;
+    }
+    .card-advice.success {
+        background: rgba(98, 225, 96, 0.25);
+    }
+    .card-advice.warning {
+        background: rgba(255, 233, 36, 0.25);
+    }
+    .card-advice.alert {
+        background: rgba(233, 74, 71, 0.25);
+    }
 </style>