redplanet
/
reservation.ck.si
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
7 Incheckningar
1 Gren
28 MiB
 
 
 
Träd: 1aac7eb597
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '1aac7eb597'
${ noResults }
reservation.ck.si/src/views/events/ignaz/Ignaz.vue

472 rader
14 KiB
Rå Blame Historik 

  1. <template>

  2.   <div id="ignaz">

  3. 

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

  5.     <div class="otf">

  6. <!-- 

  7.       <video autoplay muted loop style="width: 100%; height: 200px;">

  8.         <source src="/iganz-bg.mp4" type="video/mp4">

  9.       </video> -->

  10. 

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

  12. 

  13.       <h1 class="ignaz-header">

  14.         <img src="/IGNAZbunt.png" alt="">

  15.       </h1>

  16. 

  17.       <div class="marquee">

  18.         <div class="track">

  19.           <div class="content">

  20.             <span v-for="n in marqueenames" :key="n">

  21.               {{n}} ///

  22.             </span>

  23.             <span v-for="n in marqueenames" :key="n">

  24.               {{n}} ///

  25.             </span>

  26.             <span v-for="n in marqueenames" :key="n">

  27.               {{n}} ///

  28.             </span>

  29.           </div>

  30.         </div>

  31.       </div>

  32. 

  33. 

  34.       <!-- <div class="form-wrapper">

  35.       </div> -->

  36.       <template v-if="status && status.open">

  37.         <div class="ignaz-form">

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

  39.             <div class="input-headline">rsvp</div>

  40.             <div class="input-fields" style="display: flex; flex-direction: column;">

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

  42.               <input class="input-text" v-model="name" placeholder="full name (for orga reasons)" size="1" />

  43.               <input class="input-text" v-model="email" placeholder="email (for self service)" size="1" />

  44.             </div>

  45.   

  46.             <input class="input-btn" type="submit" :value="(sending ? 'sending ...' : 'join')" :disabled="(sending ? true : false)" />

  47.             <div v-if="error">

  48.               oh no something went wrong!<br>

  49.               {{errorReason.detail}}

  50.             </div>

  51.           </form>

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

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

  54.           </div>

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

  56.             <p style="font-size: 6vw; text-align: center;">

  57.               thanks!

  58.             </p>

  59.             <button @click="resetForm" class="input-btn">✓ see you there!</button>

  60.           </div>

  61.         </div>

  62.       </template>

  63.       <template v-if="status && !status.open">

  64.         {{status.reason}}

  65.       </template>

  66.       <!-- {{words}} -->

  67. 

  68.       <video autoplay muted loop class="beinchen">

  69.         <source src="/ignaz-bg.mp4" type="video/mp4">

  70.       </video>

  71. 

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

  73.       font-family="'Barlow Condensed'" /> -->

  74.       <div v-if="status && status.open" class="details" ref="details">

  75.         <div class="details-date">

  76.           25. nov. // 22 - 06 h

  77.         </div>

  78.         <div class="details-address">

  79.           hockegasse 37 // haus 4

  80.         </div>

  81. 

  82.         <div class="details-location">

  83.           semmelweissklinik

  84.         </div>

  85. 

  86.         <small>

  87.         </small>

  88.       </div>

  89.       <div class="share">

  90.         <div

  91.           v-if="canShare"

  92.           @click="share"

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

  94.         >

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

  96.         </div>

  97.         <a

  98.           v-else

  99.           href="mailto:?subject=25.%20november%202022%20at%20semmelweisklinik&body=https%3A%2F%2Freservation.ck.si%2F%23%2Fevent%2Fignaz "

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

  101.         >

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

  103.         </a>        

  104.       </div>

  105.     </div>

  106.     <!-- :color="() => { return nameColors[Math.floor(Math.random() * nameColors.length)] }" -->

  107.   </div>

  108. </template>

  109. 

  110. <script>

  111.   // import VueWordCloud from 'vuewordcloud';

  112.   export default {

  113.     name: 'Invitation',

  114.     data() {

  115.       return {

  116.         anzeigename: '',

  117.         name: '',

  118.         email: '',

  119.         status: null,

  120.         newsletter: false,

  121.         guests: [],

  122.         sending: false,

  123.         showHelp: false,

  124.         selection: null,

  125.         selectionText: null,

  126.         success: false,

  127.         error: false,

  128.         errorReason: null,

  129.       }

  130.     },

  131.     components: {

  132.       // [VueWordCloud.name]: VueWordCloud,

  133.     },

  134.     computed: {

  135.       nameColors() {

  136.         return ['White']

  137.       },

  138.       marqueenames() {

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

  140.           return guest.anzeigename

  141.         })

  142.       },

  143.       words() {

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

  145.           return guest.anzeigename

  146.         })

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

  148.           return name.length

  149.         })

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

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

  152.           const nameLength = guest.anzeigename.length

  153.           let size = maxNameLength - nameLength + 12

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

  155.         })

  156.       },

  157. 

  158.       canShare () {

  159.         return !!navigator.share

  160.       },

  161.       // guestlist() {

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

  163.       //     g.name = g.anzeigename

  164.       //     return g

  165.       //   })

  166.       // }

  167.     },

  168.     methods: {

  169.       async fetchStatus() {

  170.         const response = await fetch(`${process.env.VUE_APP_API_URL}status`)

  171.         const data = await response.json()

  172.         this.status = data

  173.       },

  174.       async fetchGuests() {

  175.         const response = await fetch(`${process.env.VUE_APP_API_URL}guest`)

  176.         const data = await response.json()

  177.         this.guests = data

  178.       },

  179.       async onClickTheButton() {

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

  181.           this.showHelp = true

  182.           return false

  183.         }

  184.         this.showHelp = false

  185.         this.sending = true

  186.         let data = {

  187.           anzeigename: this.anzeigename,

  188.           name: this.name,

  189.           email: this.email,

  190.           newsletter: false,

  191.         }

  192.         const response = await fetch(

  193.           `${process.env.VUE_APP_API_URL}guest`, {

  194.             method: 'POST',

  195.             headers: {

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

  197.             },

  198.             body: JSON.stringify(data),

  199.           }

  200.         )

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

  202.           this.anzeigename = ''

  203.           this.name = ''

  204.           this.email = ''

  205.           this.success = true

  206.           this.fetchGuests()

  207.         } else {

  208.           this.success = false

  209.           this.fetchGuests()

  210.           this.error = true

  211.           this.errorReason = await response.json()

  212.         }

  213.         this.sending = false

  214.         return false

  215.       },

  216.       resetForm () {

  217.         this.anzeigename = ''

  218.         this.name = ''

  219.         this.email = ''

  220.         this.success = false

  221.       },

  222.     },

  223.     mounted() {

  224.       this.fetchStatus()

  225.       this.fetchGuests()

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

  227.         this.selection = document.getSelection()

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

  229.         if (this.selection) {

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

  231.         }

  232.       });

  233.       

  234.       // this.$refs.details.$el

  235.     },

  236.   }

  237. </script>

  238. 

  239. <style>

  240. 

  241. 

  242.   :root {

  243.     --primary-color: #ff8c00;

  244.     cursor: url('cursor.png'), auto;

  245.   }

  246.   body {

  247.     margin: 0;

  248.     background-image: url('/ignaz-background.jpg');

  249.     background-size: cover;

  250.     background-attachment: fixed;

  251.     background-position: bottom;

  252.   }

  253.   #ignaz {

  254.     border: 3px solid #fff;

  255.     padding-bottom: 200px;

  256.     margin: 20px;

  257.   }

  258.   .ignaz-header {

  259.     position: relative;

  260.     z-index: 1;

  261.     text-align: center;

  262.   }

  263.   .ignaz-header > img {

  264.     max-width: 90%;

  265.   }

  266.   .beinchen {

  267.     position: fixed;

  268.     margin-top: calc(50vh - 400px);

  269. 

  270.     /* margin-bottom: 80px; */

  271.     max-width: 100%;

  272.     max-height: 100vh;

  273.     width: 40em;

  274.     z-index: 0;

  275.     mix-blend-mode: screen;

  276.   }

  277.   a {

  278.     color: inherit;

  279.     cursor: inherit;

  280.   }

  281.   .otf {

  282.     width: 100%;

  283.     /* background-color: rgb(167, 204, 247); */

  284.     /* background-image: url('bg.gif'); */

  285.     background-size: cover;

  286.     display: flex;

  287.     flex-direction: column;

  288.     align-items: center;

  289.     min-height: 100vh;

  290.     position: relative;

  291.   }

  292. 

  293. 

  294.   

  295.   .input-headline {

  296.     color: var(--primary-color);

  297.     /* mix-blend-mode: multiply; */

  298.     font-size: 4vh;

  299.     margin-bottom: .8vh;

  300.     text-align: center;

  301.   }

  302. 

  303.   .input-form {

  304.     display: flex;

  305.     flex-direction: column;

  306.     max-width: 90%;

  307.     width: 500px;

  308.     margin-top: 4vh;

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

  310.   }

  311.   .ignaz-form {

  312.     z-index: 9;

  313.     position: relative;

  314.     display: flex;

  315.     align-items: center;

  316.     flex-direction: column;    

  317.   }

  318.   .input-fields {

  319.     

  320.   }

  321. 

  322.   .input-text,

  323.   .input-btn, 

  324.   .input-cb {

  325.     color: #000;

  326.     background: rgba(255, 255, 255, 0.9);

  327.     font-size: 2.8vh;

  328.     font-family: 'Barlow Condensed', sans-serif;

  329.     border: 0;

  330.     padding: .5em 1em;

  331.     line-height: 1.4;

  332.     max-width: 100%;

  333.     cursor: inherit;

  334.   }

  335.   .input-btn {

  336.     color: #000;

  337.     background-color: var(--primary-color);

  338.   }

  339. 

  340.   .input-btn:hover {

  341.     background: #ffbb00;

  342.   }

  343.   .input-checkbox {

  344.     margin: 0 1em 0 0;    

  345.   }

  346. 

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

  348.     .form-wrapper {

  349.       margin-top: 4em;

  350.     }

  351. 

  352.     .input-text,

  353.     .input-btn {

  354.       width: 100%;

  355.       max-width: 100%;

  356.       min-width: 0;

  357.       text-align: center;

  358.     }

  359.     /* .input-form {

  360.       position: absolute;

  361.       bottom: 0;

  362.       display: flex;

  363.       flex-direction: column;

  364.     } */

  365.   }

  366. 

  367. 

  368.   @media screen and (max-width: 700px) {

  369. 

  370.   .beinchen {

  371.   margin-top: 20em;

  372.   }

  373. 

  374.   }

  375. 

  376.   .input-text {

  377.     width: auto;

  378.     flex-grow: 1;

  379.   }

  380. 

  381.   .wordcloud {

  382.     mix-blend-mode: overlay;

  383.   }

  384. 

  385.   .details {

  386.     color: var(--primary-color);

  387.     font-size: 30px;

  388.     text-shadow: #000 1px -1px 0;

  389.     max-width: 80em;

  390.     margin: 16% 3% 200px;

  391.     padding: 3%;

  392.     display: flex;

  393.     white-space: nowrap;

  394.   }

  395. 

  396.   .details-address,

  397.   .details-location,

  398.   .details-date {

  399.     max-width: 20vw;

  400.   }

  401. 

  402.   .details-address {

  403.     transform: rotateZ(90deg);

  404.   }

  405. 

  406.   .details-location {

  407.     transform: rotateZ(80deg);

  408.   }

  409. 

  410.   .details-date {

  411.     transform: rotateZ(83deg);

  412.   }

  413. 

  414. 

  415. 

  416.   .share {

  417.     max-width: 30em;

  418.     width: 80%;

  419.     z-index: 99;

  420.     position: relative;

  421.   }

  422.   .share:hover {

  423.     mix-blend-mode: difference;

  424.   }

  425. 

  426.   .selection-text {

  427.     position: fixed;

  428.     z-index: 9999;

  429.     font-size: 10vh;

  430.     line-height: 1em;

  431.     pointer-events: none;

  432.     color: #fff;

  433.     mix-blend-mode: difference;

  434.     top: 10%;

  435.   }

  436. 

  437. 

  438. 

  439. .marquee {

  440.   position: relative;

  441.   width: 100vw;

  442.   max-width: 100%;

  443.   height: 200px;

  444.   overflow-x: hidden;

  445.   font-size: 10em;

  446.   z-index: 0;

  447. }

  448. .marquee {

  449.   position: fixed;

  450.   bottom: .5em;

  451.   font-size: 5em;

  452.   background: #ba0394;

  453.   height: 1.3em;

  454.   color: #000;

  455.   transform: rotateZ(7deg) scale(1.1);

  456. }

  457. 

  458. 

  459. .track {

  460.   position: absolute;

  461.   white-space: nowrap;

  462.   will-change: transform;

  463.   animation: marquee 2s linear infinite;

  464. }

  465. 

  466. @keyframes marquee {

  467.   from { transform: translateX(0); }

  468.   to { transform: translateX(-50%); }

  469. }

  470. 

  471. 

  472. </style>