Add CH Design Document

src/components/info-box.vue

@@ -32,7 +32,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawz0vq"></span>
+                  <span v-html="rawqqf3"></span>
                 </span>
                 <span>
                   Intensive Momente und Emotionen ermöglichen, die in Erinnerung
@@ -42,7 +42,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="raw0nsu"></span>
+                  <span v-html="raws8q6"></span>
                 </span>
                 <span>
                   Persönliche Auseinandersetzungen der Spieler mit nicht
@@ -53,7 +53,7 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawslf3"></span>
+                  <span v-html="rawlrnh"></span>
                 </span>
                 <span>
                   Interne Charakterentwicklung oder -verfestigung durch externe
@@ -63,14 +63,14 @@
                 <br />
                 <span>
                    ·
-                  <span v-html="rawhqdr"></span>
+                  <span v-html="rawl2vy"></span>
                 </span>
                 <span>Dilemmata mit sich selbst und mit anderen.</span>
                 <br />
                 <br />
                 <span>
                    ·
-                  <span v-html="raw06u1"></span>
+                  <span v-html="raw972m"></span>
                 </span>
                 <span>
                   Weder dauernder Zusammenhalt noch konstanter Konflikt, sondern
@@ -254,7 +254,7 @@
                 <br />
                 <span>
                   Wir werden das
-                  <span v-html="raworlt"></span>
+                  <span v-html="rawzx3n"></span>
                 </span>
                 <router-link to="/larpkonzept" class="info-box-navlink">
                   Open Visor Larpkonzept
@@ -518,7 +518,7 @@
                 <br />
                 <span>
                   Parkplatz:
-                  <span v-html="raw9py6"></span>
+                  <span v-html="rawfncl"></span>
                 </span>
                 <a
                   href="https://goo.gl/maps/KgqAwRdw8pJSdmjTA"
@@ -1458,13 +1458,13 @@ export default {
   },
   data() {
     return {
-      rawz0vq: ' ',
+      rawqqf3: ' ',
-      raw0nsu: ' ',
+      raws8q6: ' ',
-      rawslf3: ' ',
+      rawlrnh: ' ',
-      rawhqdr: ' ',
+      rawl2vy: ' ',
-      raw06u1: ' ',
+      raw972m: ' ',
-      raworlt: ' ',
+      rawzx3n: ' ',
-      raw9py6: ' ',
+      rawfncl: ' ',
     }
   },
 }

src/components/row1.vue

@@ -12,7 +12,7 @@
           <h1 class="row1-header1">
             <span>
               Leitung der Justizvollzugsanstalt
-              <span v-html="rawwtyj"></span>
+              <span v-html="raw7z79"></span>
             </span>
             <br />
           </h1>
@@ -117,7 +117,7 @@ export default {
   },
   data() {
     return {
-      rawwtyj: ' ',
+      raw7z79: ' ',
     }
   },
 }

src/components/row5.vue

@@ -83,7 +83,7 @@
           Tabellen und Graphen auf Notizzettel. Die Wärter mussten Jenatsch schon
           mehrmals dafür bestrafen, als Jenatsch diese trotz Warnungen überall
           wieder liegen liess.
-          <span v-html="rawf9ji"></span>
+          <span v-html="rawdynm"></span>
         </span>
         <span>Ab und zu spielt Jenatsch Karten mit Collins und Krüger.</span>
         <br />
@@ -114,7 +114,7 @@ export default {
   },
   data() {
     return {
-      rawf9ji: ' ',
+      rawdynm: ' ',
     }
   },
 }

src/views/ein-orden-fr-eine-gute-tat.vue

@@ -10,53 +10,154 @@
       <br />
     </span>
     <div class="ein-orden-fr-eine-gute-tat-beschreibung text-body">
-      <span class="ein-orden-fr-eine-gute-tat-text04">
+      <div>
-        <span class="ein-orden-fr-eine-gute-tat-text05">
+        <div class="ein-orden-fr-eine-gute-tat-container2">
-          Ein brauner Schneehase besucht ein Rothörnchen und ein Grauhörnchen im
+          <DangerousHTML
-          vom Herbst bunt gefärbten Wald. Er hat einen Orden, den er für eine gute
+            html="<div id='product-component-1697646820730'></div>
-          Tat vergeben möchte. Doch welches Hörnchen schafft es, diesen zu
+  <script type='text/javascript'>
-          bekommen?
+  /*<![CDATA[*/
-        </span>
+  (function () {
-        <br class="ein-orden-fr-eine-gute-tat-text06" />
+    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
-        <br class="ein-orden-fr-eine-gute-tat-text07" />
+    if (window.ShopifyBuy) {
-        <span class="ein-orden-fr-eine-gute-tat-text08">
+      if (window.ShopifyBuy.UI) {
-          Diese Kurzgeschichte für Kinder und Eltern stellt spielerisch eine
+        ShopifyBuyInit();
-          moralische Frage dar, dessen Antwort das Elternteil oder das Kind selbst
+      } else {
-          finden muss. Es soll das Kind unterhalten und zugleich mit einer
+        loadScript();
-          einfachen aber doch spannenden Fragestellung bilden.
+      }
-        </span>
+    } else {
-        <br />
+      loadScript();
-        <br />
+    }
-        <span class="ein-orden-fr-eine-gute-tat-text11"> · 28 Seiten</span>
+    function loadScript() {
-        <br class="ein-orden-fr-eine-gute-tat-text12" />
+      var script = document.createElement('script');
-        <span class="ein-orden-fr-eine-gute-tat-text13">
+      script.async = true;
-           · 14 Illustrationen
+      script.src = scriptURL;
-        </span>
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
-        <br />
+      script.onload = ShopifyBuyInit;
-      </span>
+    }
-      <a
+    function ShopifyBuyInit() {
-        href="https://www.dropbox.com/s/eoygp44p801ddbt/OpenVisor_Ein_Orden_fuer_eine_gute_Tat.pdf?dl=0"
+      var client = ShopifyBuy.buildClient({
-        target="_blank"
+        domain: 'shop.openvisor.ch',
-        rel="noreferrer noopener"
+        storefrontAccessToken: '99ed5bcb1d89a858269164af0987ee2a',
-      >
+      });
-        <div class="button">
+      ShopifyBuy.UI.onReady(client).then(function (ui) {
-          <span class="button-text">
+        ui.createComponent('product', {
-            <span>PDF Download</span>
+          id: '8466633261324',
-            <br />
+          node: document.getElementById('product-component-1697646820730'),
-          </span>
+          moneyFormat: 'CHF%20%7B%7Bamount%7D%7D',
+          options: {
+    'product': {
+      'styles': {
+        'product': {
+          '@media (min-width: 601px)': {
+            'max-width': '100%',
+            'margin-left': '0',
+            'margin-bottom': '50px'
+          },
+          'text-align': 'left'
+        },
+        'title': {
+          'font-size': '26px'
+        },
+        'price': {
+          'font-size': '18px'
+        },
+        'compareAt': {
+          'font-size': '15.299999999999999px'
+        },
+        'unitPrice': {
+          'font-size': '15.299999999999999px'
+        }
+      },
+      'layout': 'horizontal',
+      'contents': {
+        'img': false,
+        'imgWithCarousel': true,
+        'description': true
+      },
+      'width': '100%',
+      'text': {
+        'button': 'Add to cart'
+      }
+    },
+    'productSet': {
+      'styles': {
+        'products': {
+          '@media (min-width: 601px)': {
+            'margin-left': '-20px'
+          }
+        }
+      }
+    },
+    'modalProduct': {
+      'contents': {
+        'img': false,
+        'imgWithCarousel': true,
+        'button': false,
+        'buttonWithQuantity': true
+      },
+      'styles': {
+        'product': {
+          '@media (min-width: 601px)': {
+            'max-width': '100%',
+            'margin-left': '0px',
+            'margin-bottom': '0px'
+          }
+        },
+        'title': {
+          'font-family': 'Helvetica Neue, sans-serif',
+          'font-weight': 'bold',
+          'font-size': '26px',
+          'color': '#4c4c4c'
+        },
+        'price': {
+          'font-family': 'Helvetica Neue, sans-serif',
+          'font-weight': 'normal',
+          'font-size': '18px',
+          'color': '#4c4c4c'
+        },
+        'compareAt': {
+          'font-family': 'Helvetica Neue, sans-serif',
+          'font-weight': 'normal',
+          'font-size': '15.299999999999999px',
+          'color': '#4c4c4c'
+        },
+        'unitPrice': {
+          'font-family': 'Helvetica Neue, sans-serif',
+          'font-weight': 'normal',
+          'font-size': '15.299999999999999px',
+          'color': '#4c4c4c'
+        }
+      },
+      'text': {
+        'button': 'Add to cart'
+      }
+    },
+    'option': {},
+    'cart': {
+      'text': {
+        'total': 'Subtotal',
+        'button': 'Checkout'
+      }
+    },
+    'toggle': {}
+  },
+        });
+      });
+    }
+  })();
+  /*]]>*/
+  </script>"
+          ></DangerousHTML>
         </div>
-      </a>
+      </div>
-      <img
-        alt="image"
-        src="/einordenfuereinegutetat-1100w.png"
-        class="ein-orden-fr-eine-gute-tat-image"
-      />
     </div>
     <app-kontakt rootClassName="kontakt-root-class-name4"></app-kontakt>
   </div>
 </template>
 
 <script>
+import DangerousHTML from 'dangerous-html/vue'
+
 import AppNavigation from '../components/navigation'
 import AppKontakt from '../components/kontakt'
 
@@ -64,6 +165,7 @@ export default {
   name: 'EinOrdenFrEineGuteTat',
   components: {
     AppNavigation,
+    DangerousHTML,
     AppKontakt,
   },
   metaInfo: {
@@ -120,20 +222,8 @@ export default {
   max-width: 1080px;
   align-content: center;
 }
-.ein-orden-fr-eine-gute-tat-text04 {
+.ein-orden-fr-eine-gute-tat-container2 {
-  color: rgb(255, 255, 255);
+  display: contents;
-}
-.ein-orden-fr-eine-gute-tat-text05 {
-  font-style: italic;
-}
-.ein-orden-fr-eine-gute-tat-text08 {
-  font-style: italic;
-}
-.ein-orden-fr-eine-gute-tat-image {
-  width: 100%;
-  height: 100%;
-  margin-top: var(--dl-space-space-twounits);
-  object-fit: cover;
 }
 @media(max-width: 991px) {
   .ein-orden-fr-eine-gute-tat-heading {
@@ -145,31 +235,6 @@ export default {
   .ein-orden-fr-eine-gute-tat-beschreibung {
     width: 90%;
   }
-  .ein-orden-fr-eine-gute-tat-text04 {
-    color: rgb(255, 255, 255);
-  }
-  .ein-orden-fr-eine-gute-tat-text05 {
-    font-style: italic;
-  }
-  .ein-orden-fr-eine-gute-tat-text06 {
-    font-style: italic;
-  }
-  .ein-orden-fr-eine-gute-tat-text07 {
-    font-style: italic;
-  }
-  .ein-orden-fr-eine-gute-tat-text08 {
-    font-style: normal;
-    font-weight: 400;
-  }
-  .ein-orden-fr-eine-gute-tat-text11 {
-    font-weight: 500;
-  }
-  .ein-orden-fr-eine-gute-tat-text12 {
-    font-weight: 500;
-  }
-  .ein-orden-fr-eine-gute-tat-text13 {
-    font-weight: 500;
-  }
 }
 @media(max-width: 767px) {
   .ein-orden-fr-eine-gute-tat-heading {
@@ -183,9 +248,6 @@ export default {
     font-family: Poppins;
     line-height: 24px;
   }
-  .ein-orden-fr-eine-gute-tat-text04 {
-    width: auto;
-  }
 }
 @media(max-width: 479px) {
   .ein-orden-fr-eine-gute-tat-heading {

src/views/letzte-gelegenheit.vue

@@ -47,20 +47,30 @@
     </section>
     <div class="letzte-gelegenheit-buttons">
       <a
-        href="https://docs.google.com/document/d/1i-cVj809RqJtO-VaXjUsPew67gtylkIzL_3qc6mI_kE/edit?usp=sharing"
+        href="https://docs.google.com/document/d/1K8iooPzdVv76UZY8lRtZfj2axTbuK-Z9me2cYAm87bc/edit?usp=sharing"
         target="_blank"
         rel="noreferrer noopener"
         class="letzte-gelegenheit-link"
+      >
+        <div class="letzte-gelegenheit-design-dokument button">
+          <span class="button-text">Infos Schweiz</span>
+        </div>
+      </a>
+      <a
+        href="https://docs.google.com/document/d/1i-cVj809RqJtO-VaXjUsPew67gtylkIzL_3qc6mI_kE/edit?usp=sharing"
+        target="_blank"
+        rel="noreferrer noopener"
+        class="letzte-gelegenheit-link1"
       >
         <div class="button">
-          <span class="button-text">Infos (Design-Dokument)</span>
+          <span class="button-text">Infos Deutschland</span>
         </div>
       </a>
       <a
         href="https://forms.gle/YL6fFSHqY43TsV4B7"
         target="_blank"
         rel="noreferrer noopener"
-        class="letzte-gelegenheit-link1"
+        class="letzte-gelegenheit-link2"
       >
         <div class="button"><span class="button-text">Anmeldung</span></div>
       </a>
@@ -68,7 +78,7 @@
         href="https://discord.gg/eKFCrEZaQ5"
         target="_blank"
         rel="noreferrer noopener"
-        class="letzte-gelegenheit-link2"
+        class="letzte-gelegenheit-link3"
       >
         <div class="button"><span class="button-text">Discord</span></div>
       </a>
@@ -83,7 +93,7 @@
           Geschlecht definiert die spielende Person. Es wird ein paar
           Nichtspielercharaktere geben die von Helfern bespielt werden, zum
           Beispiel Häftling Summers, der/die mit euch ins
-          <span v-html="raw1o48"></span>
+          <span v-html="raw5ghj"></span>
         </span>
         <span>Spiel startet.</span>
         <br />
@@ -146,6 +156,8 @@
           haben:
         </span>
         <br />
+        <span>- Björn</span>
+        <br />
         <span>- Florian H.</span>
         <br />
         <span>- Jan R.</span>
@@ -154,6 +166,12 @@
         <br />
         <span>- PeFox</span>
         <br />
+        <span>
+          -
+          <span v-html="raw948b"></span>
+        </span>
+        <span>Phil U.</span>
+        <br />
       </p>
     </div>
     <app-kontakt rootClassName="kontakt-root-class-name2"></app-kontakt>
@@ -186,7 +204,8 @@ export default {
   },
   data() {
     return {
-      raw1o48: ' ',
+      raw5ghj: ' ',
+      raw948b: ' ',
     }
   },
   metaInfo: {
@@ -209,7 +228,7 @@ export default {
       {
         property: 'og:image',
         content:
-          'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/f7f91f87-097b-4cfb-a31b-ef768130e437/c97eb9ef-8ad2-484c-ac83-73a36202b4f3?org_if_sml=1',
+          'https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/f7f91f87-097b-4cfb-a31b-ef768130e437/c97eb9ef-8ad2-484c-ac83-73a36202b4f3?org_if_sml=1&force_format=original',
       },
     ],
   },
@@ -285,9 +304,9 @@ export default {
 }
 .letzte-gelegenheit-buttons {
   gap: 10%;
-  flex: 0 0 auto;
   width: 100%;
   display: flex;
+  max-width: 1200px;
   align-items: center;
   flex-direction: row;
   justify-content: center;
@@ -295,12 +314,18 @@ export default {
 .letzte-gelegenheit-link {
   display: contents;
 }
+.letzte-gelegenheit-design-dokument {
+  text-decoration: none;
+}
 .letzte-gelegenheit-link1 {
   display: contents;
 }
 .letzte-gelegenheit-link2 {
   display: contents;
 }
+.letzte-gelegenheit-link3 {
+  display: contents;
+}
 .letzte-gelegenheit-container2 {
   width: 95%;
 }

src/views/rosenteufel.vue

@@ -68,7 +68,7 @@
           Aber... Edler, bei Gotts Gnad, ich wärt kein gut Christ Euch ohne Warn
           lass schreiten. Seit Geschehnem ist hie kein einzger entlang. Wer weiss
           was
-          <span v-html="rawwo1q"></span>
+          <span v-html="rawapfu"></span>
         </span>
         <span>Geziefer dort treibt...”</span>
         <br />
@@ -236,7 +236,7 @@
           nicht sauber gefragt und der Knecht viel zu blass als ihm vorzukommen.
           Letztlich doch die Augen sich schlossen. Doch wachten nur noch Ritter
           und Knecht. Des Ritters Petz Kling noch immer rot; des Knechts Haut
-          <span v-html="rawtup2"></span>
+          <span v-html="rawwj0j"></span>
         </span>
         <span>
           noch immer weiss und nass. Dieses Mal der Knecht nicht wagte zu fragen
@@ -287,7 +287,7 @@
           zuher. Sie starrten; auch kalt und hilflos wie Kind. Ich schritt nach
           vorn: In die Händ des Toten seh, weiss Ros. Ins Gesicht des Toten blick.
           Beulen zierten’s. Hässliche Beulen. Der Teufel aber wart woanders...
-          <span v-html="rawn6vs"></span>
+          <span v-html="raw54yj"></span>
         </span>
       </span>
     </div>
@@ -307,9 +307,9 @@ export default {
   },
   data() {
     return {
-      rawwo1q: ' ',
+      rawapfu: ' ',
-      rawtup2: ' ',
+      rawwj0j: ' ',
-      rawn6vs: ' ',
+      raw54yj: ' ',
     }
   },
   metaInfo: {