more

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "vue": "^2.6.11",
+        "vue-router": "^3.6.5",
         "vuewordcloud": "^18.7.12"
       },
       "devDependencies": {
@@ -14659,6 +14660,11 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -27530,6 +27536,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
+      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
+    "vue-router": "^3.6.5",
     "vuewordcloud": "^18.7.12"
   },
   "devDependencies": {

src/App.vue

@@ -6,7 +6,7 @@
       <div class="form-wrapper">
       </div>
       <form v-if="!success" class="input-form" @submit.prevent="onClickTheButton" style="margin-top: 5vh">
-        <div class="input-headline">Ticketreservierung</div>
+        <div class="input-headline">reservation</div>
         <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" />
         <input class="input-text" v-model="name" placeholder="real name" size="1" />
         <input class="input-text" v-model="email" placeholder="email" size="1" />
@@ -23,26 +23,22 @@
         <p style="font-size: 8vw">
           Thanks!
         </p>
-        <button @click="resetForm" class="input-btn">Noch eine Reservierung aufgeben</button>
+        <button @click="resetForm" class="input-btn">✓ see you there!</button>
       </div>
       <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words"
         :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }"
         font-family="'JetBrains Mono'" />
     </div>
-    <div class="details" ref="details">
-
+    <!-- <div class="details" ref="details">
       TEXT!
-
-      
-      
-      
-    </div>
+    </div> -->
     <div
       @click="share"
       style="cursor: pointer; margin-top: 5em;"
     >
 
       <svg
+      style="fill: #fff"
       version="1.1"
       id="svg5225"
       xml:space="preserve"
@@ -68,7 +64,7 @@
         id="g5231"
         transform="translate(-622.8099,-392.30077)"><path
           id="rect666"
-          style="opacity:1;stroke-width:0;paint-order:stroke fill markers;stop-color:#000000"
+          style="opacity:1;stroke-width:0;paint-order:stroke fill markers;"
           d="m 659.49419,392.30077 v 16.42729 h -16.29894 v 19.18185 H 622.8099 v 50.60456 h 21.94223 v 18.91764 h 17.1749 v 19.63024 h 55.25355 l -37.05351,55.91614 h 30.5701 l 37.05351,-55.91614 H 938.594 v -16.05974 h 15.9914 v -18.04835 h 18.44255 v -50.6054 h -19.99946 v -20.0503 h -16.86734 v -19.99779 z m 6.9343,23.4191 h 263.36676 v 19.99779 h 19.99946 v 41.86585 h -18.44255 v 16.05974 H 667.98538 v -19.63024 h -21.94223 v -41.86584 h 20.38534 z" /><g
           aria-label="WILLTEILEN"
           id="text1443"
@@ -157,7 +153,7 @@
     },
     methods: {
       async fetchGuests() {
-        const response = await fetch('http://localhost:1234/guest')
+        const response = await fetch('/api/guest')
         const data = await response.json()
         this.guests = data
       },
@@ -175,7 +171,7 @@
           newsletter: false,
         }
         const response = await fetch(
-          'http://localhost:1234/guest', {
+          '/api/guest', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
@@ -210,7 +206,7 @@
         location.href = "#";
         location.href = "#teilnehmen";
         try {
-          await navigator.share({ url:"https://okt-28.ck.si/" })
+          await navigator.share({ url:"https://reservation.ck.si/" })
         } catch (err) {
           console.log(`Error: ${err}`)
         }
@@ -251,19 +247,20 @@
     color: #fcfa86;
     background: #000;
   }
-
   body {
     background-color: rgb(167, 204, 247);
     background-image: url('bg.gif');
     background-size: cover;
+    background-position: center center;
+    background-attachment: fixed;
     color: #000;
     margin: 0 0 100px;
   }
 
   .otf {
     width: 100%;
-    background-color: rgb(167, 204, 247);
-    background-image: url('bg.gif');
+    /* background-color: rgb(167, 204, 247); */
+    /* background-image: url('bg.gif'); */
     background-size: cover;
   }
 
@@ -288,7 +285,7 @@
 
   
   .input-headline {
-    color: #000;
+    color: rgb(255, 255, 255);
     font-size: 2.8vh;
     margin-bottom: .8vh;
   }
@@ -298,8 +295,10 @@
     flex-direction: column;
     width: 100%;
     max-width: 800px;
-    mix-blend-mode: hard-light;
+    mix-blend-mode: exclusion;
     margin-top: 4vh;
+    z-index: 9;
+    position: relative;
   }
 
   .input-text,
@@ -315,14 +314,16 @@
     max-width: 100%;
   }
   .input-btn {
+    color: #fff;
+    background-color: #1e3a8e;
     border-top: 2px solid rgb(0, 0, 0);
     cursor: pointer;
   }
 
   .input-btn:hover {
-    border-top: 2px solid rgb(207, 207, 207);
     color: rgb(87, 87, 87);
     background: rgb(255, 255, 255);
+    border-top: 2px solid rgb(207, 207, 207);
   }
 
   .input-checkbox {
@@ -342,12 +343,12 @@
       min-width: 0;
       text-align: center;
     }
-    .input-form {
+    /* .input-form {
       position: absolute;
       bottom: 0;
       display: flex;
       flex-direction: column;
-    }
+    } */
   }
 
 
@@ -356,10 +357,6 @@
     flex-grow: 1;
   }
 
-  .input-btn {
-    color: #fff;
-    background-color: #000000;
-  }
 
 
   .details {