bugfix: correct color of edit pencil from red to black

client/src/assets/icons/edit.svg

@@ -62,7 +62,7 @@
       />
       <rect
           id="rect5338-48"
-          style="fill:#ff0200"
+          style="fill:#000000"
           transform="matrix(-.26499 -.96425 .70711 -.70711 0 0)"
           rx="1.8358"
           ry="1.8187"
@@ -74,7 +74,7 @@
       <rect
           id="rect5338-4-2"
           ry="1.8187"
-          style="fill:#ff0200"
+          style="fill:#000000"
           rx="1.377"
           transform="rotate(225)"
           height="53.819"
@@ -84,7 +84,7 @@
       />
       <rect
           id="rect5338-1-1"
-          style="fill:#ff0200"
+          style="fill:#000000"
           transform="matrix(.96593 .25882 .70711 -.70711 0 0)"
           rx="1.836"
           ry="1.8187"

client/src/components/QuoteExplainationBox.vue

@@ -1,8 +1,19 @@
 <template>
   <div v-if="show" class="quote-explaination-box__container">
     <DialogBox :title="$t('how-to-play')" @close="close">
-      <p>{{ $t('explain-game-p-1') }}</p>
+      <p class="quote-explaination-box__p">{{ $t('explain-game-p-1') }}</p>
-      <p>{{ $t('explain-game-p-2') }}</p>
+      <p class="quote-explaination-box__p">{{ $t('explain-game-p-2') }}</p>
+      <div class="quote-explaination-box__example">
+        <div class="quote-explaination-box__example-title">{{ $t('examples') }}</div>
+        <div class="quote-explaination-box__example-subtitle">{{ $t('click-for-next') }}</div>
+      </div>
+      <div class="quote-explaination-box__example-container" @click="showNextExampleQuote">
+        <transition name="quote-explaination-box__example-container__fade" mode="out-in">
+          <div class="quote-explaination-box__example-text" :key="quoteNr">
+            {{ $t(`example-quote-${quoteNr}`) }}
+          </div>
+        </transition>
+      </div>
       <template v-slot:footer>
         <Button @click="close">{{ $t('dismiss') }}</Button>
       </template>
@@ -11,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onBeforeUnmount } from 'vue'
 import useI18n from '@/composables/useI18n'
 
 const { $t } = useI18n({
@@ -56,6 +67,21 @@ const { $t } = useI18n({
 
 const show = ref(true)
 const close = () => { show.value = false }
+
+const quoteNr = ref(0)
+let lastUpdate = new Date().getTime()
+const showNextExampleQuote = () => {
+  quoteNr.value = (quoteNr.value + 1) % 7
+  lastUpdate = new Date().getTime()
+}
+
+const timer = window.setInterval(() => {
+  if (new Date().getTime() > lastUpdate + 15000) {
+    showNextExampleQuote()
+  }
+}, 2000)
+
+onBeforeUnmount(() => { window.clearInterval(timer) })
 </script>
 
 <style lang="scss">
@@ -65,7 +91,47 @@ const close = () => { show.value = false }
   &__container {
     padding: 16px;
     font-family: $font-secondary;
-    font-size: 18px;
+    font-size: 24px;
   }
+
+  &__p {
+    margin: 0 0 1em 0;
+  }
+
+  &__example {
+    &-title {
+      font-size: 24px;
+    }
+
+    &-subtitle {
+      font-size: 16px;
+      margin-bottom: 10px;
+    }
+
+    &-container {
+      height: 3em;
+    }
+
+    &-text {
+      cursor: pointer;
+
+      &:before {
+        content: '„';
+      }
+
+      &:after {
+        content: '“';
+      }
+    }
+  }
+
+}
+.quote-explaination-box__example-container__fade-enter-active,
+.quote-explaination-box__example-container__fade-leave-active {
+  transition: all 0.4s ease;
+}
+.quote-explaination-box__example-container__fade-enter-from,
+.quote-explaination-box__example-container__fade-leave-to {
+  opacity: 0;
 }
 </style>