redplanet
/
reservation.ck.si
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 커밋
1 브렌치
28 MiB
 
 
 
트리: e5933150dd
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'e5933150dd'
${ noResults }
reservation.ck.si/src/App.vue

386 lines
13 KiB
Raw Blame 히스토리 

  1. <template>

  2.   <div id="app">

  3.     <div class="selection-text">{{selectionText}}</div>

  4.     <div class="otf" id="teilnehmen">

  5.       <!-- <h1 style="padding-top:1em">Party</h1> -->

  6.       <div class="form-wrapper">

  7.       </div>

  8.       <form v-if="!success" class="input-form" @submit.prevent="onClickTheButton" style="margin-top: 5vh">

  9.         <div class="input-headline">Ticketreservierung</div>

  10.         <input class="input-text" v-model="anzeigename" placeholder="nickname (public)" size="1" />

  11.         <input class="input-text" v-model="name" placeholder="real name" size="1" />

  12.         <input class="input-text" v-model="email" placeholder="email" size="1" />

  13.         <!-- <label class="input-cb" for="newsletter">

  14.           <input name="newsletter" id="newsletter" type="checkbox" class="input-checkbox" />stay informed

  15.         </label> -->

  16.         <input class="input-btn" type="submit" :value="(sending ? 'send ...' : 'reserve')" />

  17.         <div v-if="error">oh no something went wrong!</div>

  18.       </form>

  19.       <div v-if="showHelp" style="margin-bottom: 1em;">

  20.         *robot voice* give us your data for the reservation!

  21.       </div>

  22.       <div v-if="success">

  23.         <p style="font-size: 8vw">

  24.           Thanks!

  25.         </p>

  26.         <button @click="resetForm" class="input-btn">Noch eine Reservierung aufgeben</button>

  27.       </div>

  28.       <vue-word-cloud class="wordcloud" style="height: 70vh; width: 80%" :words="words"

  29.         :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }"

  30.         font-family="'JetBrains Mono'" />

  31.     </div>

  32.     <div class="details" ref="details">

  33. 

  34.       TEXT!

  35. 

  36.       

  37.       

  38.       

  39.     </div>

  40.     <div

  41.       @click="share"

  42.       style="cursor: pointer; margin-top: 5em;"

  43.     >

  44. 

  45.       <svg

  46.       version="1.1"

  47.       id="svg5225"

  48.       xml:space="preserve"

  49.       width="350.21805"

  50.       height="180.67772"

  51.       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

  52.       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

  53.       xmlns="http://www.w3.org/2000/svg"

  54.       xmlns:svg="http://www.w3.org/2000/svg"><defs

  55.         id="defs5229" /><sodipodi:namedview

  56.         id="namedview5227"

  57.         pagecolor="#ffffff"

  58.         bordercolor="#999999"

  59.         borderopacity="1"

  60.         inkscape:showpageshadow="0"

  61.         inkscape:pageopacity="0"

  62.         inkscape:pagecheckerboard="0"

  63.         inkscape:deskcolor="#d1d1d1" /><inkscape:clipboard

  64.         min="622.8099,381.05079"

  65.         max="973.02795,561.72851"

  66.         geom-min="622.8099,381.05079"

  67.         geom-max="973.02795,561.72851" /><g

  68.         id="g5231"

  69.         transform="translate(-622.8099,-392.30077)"><path

  70.           id="rect666"

  71.           style="opacity:1;stroke-width:0;paint-order:stroke fill markers;stop-color:#000000"

  72.           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

  73.           aria-label="WILLTEILEN"

  74.           id="text1443"

  75.           style="font-size:96px;line-height:1.25;letter-spacing:0px;word-spacing:0px"

  76.           transform="matrix(0.42672625,0,0,0.42672625,457.42597,276.68463)"><path

  77.             d="m 590.70676,451.06763 h -21.89063 l -6.5625,-29.85938 q -0.46875,-1.875 -1.5,-7.45312 -0.98437,-5.57813 -1.45312,-9.32813 -0.375,3.04688 -1.21875,7.59375 -0.84375,4.5 -1.6875,8.29688 -0.79688,3.79687 -6.79688,30.75 h -21.89062 l -16.96875,-68.53125 h 17.85937 l 7.45313,34.35937 q 2.53125,11.39063 3.46875,18.14063 0.60937,-4.78125 2.15625,-12.98438 1.59375,-8.20312 2.95312,-13.59375 l 6.04688,-25.92187 h 17.15625 l 5.85937,25.92187 q 1.5,6.23438 3.04688,14.39063 1.54687,8.15625 2.0625,12.1875 0.60937,-5.20313 3.32812,-18.04688 l 7.59375,-34.45312 h 17.85938 z"

  78.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  79.             id="path4358" /><path

  80.             d="m 616.44113,451.06763 v -68.53125 h 18.60938 v 68.53125 z"

  81.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  82.             id="path4360" /><path

  83.             d="m 649.86301,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"

  84.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  85.             id="path4362" /><path

  86.             d="m 705.73801,451.06763 v -68.53125 h 18.51562 v 53.57812 h 26.39063 v 14.95313 z"

  87.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  88.             id="path4364" /><path

  89.             d="M 791.84738,451.06763 H 773.33176 V 397.677 h -16.73438 v -15.14062 h 51.9375 V 397.677 h -16.6875 z"

  90.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  91.             id="path4366" /><path

  92.             d="m 859.01926,451.06763 h -40.6875 v -68.53125 h 40.6875 v 14.85937 H 836.84738 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17188 z"

  93.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  94.             id="path4368" /><path

  95.             d="m 871.01926,451.06763 v -68.53125 h 18.60937 v 68.53125 z"

  96.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  97.             id="path4370" /><path

  98.             d="m 904.44113,451.06763 v -68.53125 h 18.51563 v 53.57812 h 26.39062 v 14.95313 z"

  99.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  100.             id="path4372" /><path

  101.             d="m 1001.0036,451.06763 h -40.68747 v -68.53125 h 40.68747 v 14.85937 H 978.83176 V 408.177 h 20.53125 v 14.85938 h -20.53125 v 12.9375 h 22.17184 z"

  102.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  103.             id="path4374" /><path

  104.             d="m 1078.2536,451.06763 h -24.2812 l -25.0313,-48.28125 h -0.4218 q 0.8906,11.39062 0.8906,17.39062 v 30.89063 h -16.4063 v -68.53125 h 24.1875 l 24.9375,47.625 h 0.2813 q -0.6563,-10.35938 -0.6563,-16.64063 v -30.98437 h 16.5 z"

  105.             style="font-weight:bold;font-family:'Open Sans ExtraBold';-inkscape-font-specification:'Open Sans ExtraBold,  Bold'"

  106.             id="path4376" /></g></g></svg>

  107.     </div>

  108.   </div>

  109. </template>

  110. 

  111. <script>

  112.   import VueWordCloud from 'vuewordcloud';

  113.   export default {

  114.     name: 'App',

  115.     data() {

  116.       return {

  117.         anzeigename: '',

  118.         name: '',

  119.         email: '',

  120.         newsletter: false,

  121.         guests: [],

  122.         sending: false,

  123.         showHelp: false,

  124.         selection: null,

  125.         selectionText: null,

  126.         success: false,

  127.         error: false,

  128.       }

  129.     },

  130.     components: {

  131.       [VueWordCloud.name]: VueWordCloud,

  132.     },

  133.     computed: {

  134.       nameColors() {

  135.         return ['DeepPink', 'Crimson', 'Blue', 'BlueViolet', 'Fuchsia', 'Navy', 'Indigo']

  136.       },

  137.       words() {

  138.         const names = this.guests.map(guest => {

  139.           return guest.anzeigename

  140.         })

  141.         const nameLengths = names.map(name => {

  142.           return name.length

  143.         })

  144.         const maxNameLength = Math.max(...nameLengths)

  145.         return this.guests.map(guest => {

  146.           const nameLength = guest.anzeigename.length

  147.           let size = maxNameLength - nameLength + 12

  148.           return [`  ${guest.anzeigename}  `, size]

  149.         })

  150.       },

  151.       // guestlist() {

  152.       //   return this.guests.map( (g) => {

  153.       //     g.name = g.anzeigename

  154.       //     return g

  155.       //   })

  156.       // }

  157.     },

  158.     methods: {

  159.       async fetchGuests() {

  160.         const response = await fetch('http://localhost:1234/guest')

  161.         const data = await response.json()

  162.         this.guests = data

  163.       },

  164.       async onClickTheButton() {

  165.         if (this.name.length == 0) {

  166.           this.showHelp = true

  167.           return false

  168.         }

  169.         this.showHelp = false

  170.         this.sending = true

  171.         let data = {

  172.           anzeigename: this.anzeigename,

  173.           name: this.name,

  174.           email: this.email,

  175.           newsletter: false,

  176.         }

  177.         const response = await fetch(

  178.           'http://localhost:1234/guest', {

  179.             method: 'POST',

  180.             headers: {

  181.               'Content-Type': 'application/json',

  182.             },

  183.             body: JSON.stringify(data),

  184.           }

  185.         )

  186.         if (response.status === 200) {

  187.           this.anzeigename = ''

  188.           this.name = ''

  189.           this.email = ''

  190.           this.success = true

  191.           this.fetchGuests()

  192.         } else {

  193.           this.anzeigename = ''

  194.           this.name = ''

  195.           this.email = ''

  196.           this.success = true

  197.           this.fetchGuests()

  198.           // this.error = true

  199.         }

  200.         this.sending = false

  201.         return false

  202.       },

  203.       resetForm () {

  204.         this.anzeigename = ''

  205.         this.name = ''

  206.         this.email = ''

  207.         this.success = false

  208.       },

  209.       async share () {

  210.         location.href = "#";

  211.         location.href = "#teilnehmen";

  212.         try {

  213.           await navigator.share({ url:"https://okt-28.ck.si/" })

  214.         } catch (err) {

  215.           console.log(`Error: ${err}`)

  216.         }

  217.       }

  218.     },

  219.     mounted() {

  220.       this.fetchGuests()

  221.       document.addEventListener('selectionchange', () => {

  222.         this.selection = document.getSelection()

  223.         // console.log(this.selection)

  224.         if (this.selection) {

  225.           this.selectionText = this.selection.toString()

  226.         }

  227.       });

  228.       // this.$refs.details.$el

  229.     },

  230.   }

  231. </script>

  232. 

  233. <style>

  234. /* jetbrains-mono-600 - latin */

  235. @font-face {

  236.   font-family: 'JetBrains Mono';

  237.   font-style: normal;

  238.   font-weight: 600;

  239.   src: url('fonts/jetbrains-mono-v13-latin-600.eot'); /* IE9 Compat Modes */

  240.   src: local(''),

  241.        url('fonts/jetbrains-mono-v13-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  242.        url('fonts/jetbrains-mono-v13-latin-600.woff2') format('woff2'), /* Super Modern Browsers */

  243.        url('fonts/jetbrains-mono-v13-latin-600.woff') format('woff'), /* Modern Browsers */

  244.        url('fonts/jetbrains-mono-v13-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */

  245.        url('fonts/jetbrains-mono-v13-latin-600.svg#JetBrainsMono') format('svg'); /* Legacy iOS */

  246. }

  247. 

  248.   

  249. 

  250.   ::selection {

  251.     color: #fcfa86;

  252.     background: #000;

  253.   }

  254. 

  255.   body {

  256.     background-color: rgb(167, 204, 247);

  257.     background-image: url('bg.gif');

  258.     background-size: cover;

  259.     color: #000;

  260.     margin: 0 0 100px;

  261.   }

  262. 

  263.   .otf {

  264.     width: 100%;

  265.     background-color: rgb(167, 204, 247);

  266.     background-image: url('bg.gif');

  267.     background-size: cover;

  268.   }

  269. 

  270.   #app {

  271.     font-family: 'JetBrains Mono', monospace;

  272.     -webkit-font-smoothing: antialiased;

  273.     -moz-osx-font-smoothing: grayscale;

  274.     text-align: center;

  275.     display: flex;

  276.     flex-direction: column;

  277.     align-items: center;

  278.   }

  279. 

  280.   .otf {

  281.     display: flex;

  282.     flex-direction: column;

  283.     align-items: center;

  284.     min-height: 100vh;

  285.     position: relative;

  286.   }

  287. 

  288. 

  289.   

  290.   .input-headline {

  291.     color: #000;

  292.     font-size: 2.8vh;

  293.     margin-bottom: .8vh;

  294.   }

  295. 

  296.   .input-form {

  297.     display: flex;

  298.     flex-direction: column;

  299.     width: 100%;

  300.     max-width: 800px;

  301.     mix-blend-mode: hard-light;

  302.     margin-top: 4vh;

  303.   }

  304. 

  305.   .input-text,

  306.   .input-btn, 

  307.   .input-cb {

  308.     color: #000;

  309.     background: #fff;

  310.     font-size: 2.8vh;

  311.     font-family: 'JetBrains Mono', monospace;

  312.     border: 0;

  313.     padding: .5em 1em;

  314.     line-height: 1.4;

  315.     max-width: 100%;

  316.   }

  317.   .input-btn {

  318.     border-top: 2px solid rgb(0, 0, 0);

  319.     cursor: pointer;

  320.   }

  321. 

  322.   .input-btn:hover {

  323.     border-top: 2px solid rgb(207, 207, 207);

  324.     color: rgb(87, 87, 87);

  325.     background: rgb(255, 255, 255);

  326.   }

  327. 

  328.   .input-checkbox {

  329.     margin: 0 1em 0 0;    

  330.   }

  331. 

  332. 

  333.   @media screen and (max-width: 1000px) {

  334.     .form-wrapper {

  335.       margin-top: 4em;

  336.     }

  337. 

  338.     .input-text,

  339.     .input-btn {

  340.       width: 100%;

  341.       max-width: 100%;

  342.       min-width: 0;

  343.       text-align: center;

  344.     }

  345.     .input-form {

  346.       position: absolute;

  347.       bottom: 0;

  348.       display: flex;

  349.       flex-direction: column;

  350.     }

  351.   }

  352. 

  353. 

  354.   .input-text {

  355.     width: auto;

  356.     flex-grow: 1;

  357.   }

  358. 

  359.   .input-btn {

  360.     color: #fff;

  361.     background-color: #000000;

  362.   }

  363. 

  364. 

  365.   .details {

  366.     color: #fff;

  367.     background-color: #000;

  368.     font-size: 10vw;

  369.     max-width: 80em;

  370.     margin: 3% 3% 200px;

  371.     padding: 3%;

  372.   }

  373. 

  374. 

  375. 

  376.   .selection-text {

  377.     position: fixed;

  378.     z-index: 9999;

  379.     font-size: 10vh;

  380.     line-height: 1em;

  381.     pointer-events: none;

  382.     color: #ec4b73;

  383.     mix-blend-mode: multiply;

  384.     top: 10%;

  385.   }

  386. </style>