ignaz2

.env.development

@@ -1 +1 @@
-VUE_APP_API_URL=http://localhost:1234/api/
+VUE_APP_API_URL=http://10.0.0.118:1234/api/

src/router/index.js

@@ -9,12 +9,12 @@ const routes = [
     name: 'Home',
     component: () => import('../views/Home.vue')
   },
-  // {
-  //   path: '/event/gtblank-init',
-  //   name: 'GtblankInit',
-  //   meta: { title: 'gtblank - init (content warning: flashy lights)' },
-  //   component: () => import('../views/events/gtblank-init/GtblankInit.vue')
-  // },
+  {
+    path: '/event/gtblank-init',
+    name: 'GtblankInit',
+    meta: { title: 'gtblank - init (content warning: flashy lights)' },
+    component: () => import('../views/events/gtblank-init/GtblankInit.vue')
+  },
   {
     path: '/event/gtblank-init/directions',
     name: 'GtblankInit',

src/views/events/gtblank-init/GtblankInit.vue

@@ -1,8 +1,11 @@
 <template>
   <div id="gtblank-init">
-    <video autoplay muted loop class="video-bg">
+    debug1: {{debug1}}<br>
+    debug2: {{debug2}}<br>
+    status: {{status}}
+    <!-- <video autoplay muted loop class="video-bg">
       <source src="/gt-blank-init-bg.mp4" type="video/mp4">
-    </video>
+    </video> -->
 
 
     <div class="selection-text">{{selectionText}}</div>
@@ -71,6 +74,8 @@
         success: false,
         error: false,
         errorReason: null,
+        debug1: null,
+        debug2: null
       }
     },
     components: {
@@ -104,7 +109,9 @@
     methods: {
       async fetchStatus() {
         const response = await fetch(`${process.env.VUE_APP_API_URL}status`)
+        this.debug1 = `${process.env.VUE_APP_API_URL}status`
         const data = await response.json()
+        this.debug2 = data
         this.status = data
       },
       async fetchGuests() {

src/views/events/ignaz/Ignaz.vue

@@ -17,14 +17,11 @@
       <div class="marquee">
         <div class="track">
           <div class="content">
-            <span v-for="n in marqueenames" :key="n">
-              {{n}} ///
+            <span v-for="dj in djs" :key="dj">
+              {{dj}} ///
             </span>
-            <span v-for="n in marqueenames" :key="n">
-              {{n}} ///
-            </span>
-            <span v-for="n in marqueenames" :key="n">
-              {{n}} ///
+            <span v-for="dj in djs" :key="`${dj}1`">
+              {{dj}} ///
             </span>
           </div>
         </div>
@@ -52,7 +49,7 @@
           <div v-if="showHelp" style="margin-bottom: 1em;">
             *robot voice* give us your data for the reservation!
           </div>
-          <div v-if="success">
+          <div v-if="success" style="text-align: center;">
             <p style="font-size: 6vw; text-align: center;">
               thanks!
             </p>
@@ -64,13 +61,20 @@
         {{status.reason}}
       </template>
       <!-- {{words}} -->
+      <div class="misch">
+        <vue-word-cloud 
+          class="wordcloud" 
+          style="min-height: 60vh; width: 100%;" 
+          :words="words"
+          :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }"
+          font-family="'Barlow Condensed'"
+        />
+        <img src="/ignaz-tanzt.gif" class="beinchen" alt="">
+        <!-- <video autoplay loop muted playsinline class="beinchen">
+          <source src="/ignaz-tanz.mp4" type="video/mp4">
+        </video> -->
+      </div>
 
-      <video autoplay muted loop class="beinchen">
-        <source src="/ignaz-bg.mp4" type="video/mp4">
-      </video>
-
-      <!-- <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words"
-      font-family="'Barlow Condensed'" /> -->
       <div v-if="status && status.open" class="details" ref="details">
         <div class="details-date">
           25. nov. // 22 - 06 h
@@ -78,9 +82,8 @@
         <div class="details-address">
           hockegasse 37 // haus 4
         </div>
-
         <div class="details-location">
-          semmelweissklinik
+          semmelweisklinik
         </div>
 
         <small>
@@ -96,7 +99,7 @@
         </div>
         <a
           v-else
-          href="mailto:?subject=25.%20november%202022%20at%20semmelweisklinik&body=https%3A%2F%2Freservation.ck.si%2F%23%2Fevent%2Fignaz "
+          href="mailto:?subject=25.%20november%202022%20at%20semmelweisklinik&body=reservation.ck.si%2F%23%2Fevent%2Fignaz "
           style="cursor: pointer; margin-top: 5em;"
         >
           <svg class="share" fill="#ff8c00" version="1.1" viewBox="0 0 350.22 180.68" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-622.81 -392.3)"><path d="m659.49 392.3v16.427h-16.299v19.182h-20.385v50.605h21.942v18.918h17.175v19.63h55.254l-37.054 55.916h30.57l37.054-55.916h190.84v-16.06h15.991v-18.048h18.443v-50.605h-19.999v-20.05h-16.867v-19.998zm6.9343 23.419h263.37v19.998h19.999v41.866h-18.443v16.06h-263.37v-19.63h-21.942v-41.866h20.385z" stroke-width="0" style="paint-order:stroke fill markers"/><g transform="matrix(.42673 0 0 .42673 457.43 276.68)" aria-label="WILLTEILEN"><path d="m590.71 451.07h-21.891l-6.5625-29.859q-0.46875-1.875-1.5-7.4531-0.98437-5.5781-1.4531-9.3281-0.375 3.0469-1.2188 7.5938-0.84375 4.5-1.6875 8.2969-0.79688 3.7969-6.7969 30.75h-21.891l-16.969-68.531h17.859l7.4531 34.359q2.5312 11.391 3.4688 18.141 0.60937-4.7812 2.1562-12.984 1.5938-8.2031 2.9531-13.594l6.0469-25.922h17.156l5.8594 25.922q1.5 6.2344 3.0469 14.391 1.5469 8.1562 2.0625 12.188 0.60937-5.2031 3.3281-18.047l7.5938-34.453h17.859z"/><path d="m616.44 451.07v-68.531h18.609v68.531z"/><path d="m649.86 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m705.74 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m791.85 451.07h-18.516v-53.391h-16.734v-15.141h51.938v15.141h-16.688z"/><path d="m859.02 451.07h-40.688v-68.531h40.688v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m871.02 451.07v-68.531h18.609v68.531z"/><path d="m904.44 451.07v-68.531h18.516v53.578h26.391v14.953z"/><path d="m1001 451.07h-40.687v-68.531h40.687v14.859h-22.172v10.781h20.531v14.859h-20.531v12.938h22.172z"/><path d="m1078.3 451.07h-24.281l-25.031-48.281h-0.4218q0.8906 11.391 0.8906 17.391v30.891h-16.406v-68.531h24.188l24.938 47.625h0.2813q-0.6563-10.359-0.6563-16.641v-30.984h16.5z"/></g></g></svg>
@@ -108,7 +111,7 @@
 </template>
 
 <script>
-  // import VueWordCloud from 'vuewordcloud';
+  import VueWordCloud from 'vuewordcloud';
   export default {
     name: 'Invitation',
     data() {
@@ -129,11 +132,22 @@
       }
     },
     components: {
-      // [VueWordCloud.name]: VueWordCloud,
+      [VueWordCloud.name]: VueWordCloud,
     },
     computed: {
+      djs () {
+        return [
+          'Lenia [Gassen aus Zucker]',
+          'Tilard Kraeftbauer [Semmelweisklinik]',
+          'Marcell Wallet [Untere Willkyr]',
+          'Flocker Lockig [Taborama]',
+          'TBA',
+          'TBA',
+          'TBA'
+        ]
+      },
       nameColors() {
-        return ['White']
+        return ['#ff8c00']
       },
       marqueenames() {
         return this.guests.map(guest => {
@@ -156,7 +170,7 @@
       },
 
       canShare () {
-        return !!navigator.share
+        return navigator && !!navigator.share
       },
       // guestlist() {
       //   return this.guests.map( (g) => {
@@ -219,6 +233,14 @@
         this.email = ''
         this.success = false
       },
+      async share () {
+        // location.href = "#";
+        try {
+          await navigator.share({ url:"https://reservation.ck.si/#/event/ignaz" })
+        } catch (err) {
+          console.log(`Error: ${err}`)
+        }
+      },
     },
     mounted() {
       this.fetchStatus()
@@ -243,12 +265,15 @@
     --primary-color: #ff8c00;
     cursor: url('cursor.png'), auto;
   }
-  body {
-    margin: 0;
+  html {
     background-image: url('/ignaz-background.jpg');
     background-size: cover;
     background-attachment: fixed;
     background-position: bottom;
+    background-color: #000;
+  }
+  body {
+    margin: 0;
   }
   #ignaz {
     border: 3px solid #fff;
@@ -264,8 +289,8 @@
     max-width: 90%;
   }
   .beinchen {
-    position: fixed;
-    margin-top: calc(50vh - 400px);
+    /* position: fixed; */
+    margin-top: -500px;
 
     /* margin-bottom: 80px; */
     max-width: 100%;
@@ -313,7 +338,8 @@
     position: relative;
     display: flex;
     align-items: center;
-    flex-direction: column;    
+    flex-direction: column;
+    max-width: 100%;
   }
   .input-fields {
     
@@ -367,9 +393,9 @@
 
   @media screen and (max-width: 700px) {
 
-  .beinchen {
+  /* .beinchen {
   margin-top: 20em;
-  }
+  } */
 
   }
 
@@ -378,8 +404,17 @@
     flex-grow: 1;
   }
 
+
+  .misch {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
   .wordcloud {
-    mix-blend-mode: overlay;
+    /* mix-blend-mode: overlay; */
+    color:  var(--primary-color);
+    margin-bottom: 10em;
   }
 
   .details {
@@ -418,6 +453,7 @@
     width: 80%;
     z-index: 99;
     position: relative;
+    text-align: center;
   }
   .share:hover {
     mix-blend-mode: difference;
@@ -453,6 +489,7 @@
   height: 1.3em;
   color: #000;
   transform: rotateZ(7deg) scale(1.1);
+  mix-blend-mode: lighten;
 }
 
 
@@ -460,7 +497,7 @@
   position: absolute;
   white-space: nowrap;
   will-change: transform;
-  animation: marquee 2s linear infinite;
+  animation: marquee 10s linear infinite;
 }
 
 @keyframes marquee {