redplanet
/
reservation.ck.si
1
0
Креирај огранак 0
Код Дискусије 0 Захтеви за спајање 0 Издања 0 Вики Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8 Комити
1 Грана
28 MiB
 
 
 
Дрво: 35057e8e03
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from '35057e8e03'
${ noResults }
reservation.ck.si/src/views/events/ignaz/Ignaz.vue

509 lines
15 KiB
Датотека Blame Историја 

  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="dj in djs" :key="dj">

  21.               {{dj}} ///

  22.             </span>

  23.             <span v-for="dj in djs" :key="`${dj}1`">

  24.               {{dj}} ///

  25.             </span>

  26.           </div>

  27.         </div>

  28.       </div>

  29. 

  30. 

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

  32.       </div> -->

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

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

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

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

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

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

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

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

  41.             </div>

  42.   

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

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

  45.               oh no something went wrong!<br>

  46.               {{errorReason.detail}}

  47.             </div>

  48.           </form>

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

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

  51.           </div>

  52.           <div v-if="success" style="text-align: center;">

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

  54.               thanks!

  55.             </p>

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

  57.           </div>

  58.         </div>

  59.       </template>

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

  61.         {{status.reason}}

  62.       </template>

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

  64.       <div class="misch">

  65.         <vue-word-cloud 

  66.           class="wordcloud" 

  67.           style="min-height: 60vh; width: 100%;" 

  68.           :words="words"

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

  70.           font-family="'Barlow Condensed'"

  71.         />

  72.         <img src="/ignaz-tanzt.gif" class="beinchen" alt="">

  73.         <!-- <video autoplay loop muted playsinline class="beinchen">

  74.           <source src="/ignaz-tanz.mp4" type="video/mp4">

  75.         </video> -->

  76.       </div>

  77. 

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

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

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

  81.         </div>

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

  83.           hockegasse 37 // haus 4

  84.         </div>

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

  86.           semmelweisklinik

  87.         </div>

  88. 

  89.         <small>

  90.         </small>

  91.       </div>

  92.       <div class="share">

  93.         <div

  94.           v-if="canShare"

  95.           @click="share"

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

  97.         >

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

  99.         </div>

  100.         <a

  101.           v-else

  102.           href="mailto:?subject=25.%20november%202022%20at%20semmelweisklinik&body=reservation.ck.si%2F%23%2Fevent%2Fignaz "

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

  104.         >

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

  106.         </a>        

  107.       </div>

  108.     </div>

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

  110.   </div>

  111. </template>

  112. 

  113. <script>

  114.   import VueWordCloud from 'vuewordcloud';

  115.   export default {

  116.     name: 'Invitation',

  117.     data() {

  118.       return {

  119.         anzeigename: '',

  120.         name: '',

  121.         email: '',

  122.         status: null,

  123.         newsletter: false,

  124.         guests: [],

  125.         sending: false,

  126.         showHelp: false,

  127.         selection: null,

  128.         selectionText: null,

  129.         success: false,

  130.         error: false,

  131.         errorReason: null,

  132.       }

  133.     },

  134.     components: {

  135.       [VueWordCloud.name]: VueWordCloud,

  136.     },

  137.     computed: {

  138.       djs () {

  139.         return [

  140.           'Lenia [Gassen aus Zucker]',

  141.           'Tilard Kraeftbauer [Semmelweisklinik]',

  142.           'Marcell Wallet [Untere Willkyr]',

  143.           'Flocker Lockig [Taborama]',

  144.           'TBA',

  145.           'TBA',

  146.           'TBA'

  147.         ]

  148.       },

  149.       nameColors() {

  150.         return ['#ff8c00']

  151.       },

  152.       marqueenames() {

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

  154.           return guest.anzeigename

  155.         })

  156.       },

  157.       words() {

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

  159.           return guest.anzeigename

  160.         })

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

  162.           return name.length

  163.         })

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

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

  166.           const nameLength = guest.anzeigename.length

  167.           let size = maxNameLength - nameLength + 12

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

  169.         })

  170.       },

  171. 

  172.       canShare () {

  173.         return navigator && !!navigator.share

  174.       },

  175.       // guestlist() {

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

  177.       //     g.name = g.anzeigename

  178.       //     return g

  179.       //   })

  180.       // }

  181.     },

  182.     methods: {

  183.       async fetchStatus() {

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

  185.         const data = await response.json()

  186.         this.status = data

  187.       },

  188.       async fetchGuests() {

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

  190.         const data = await response.json()

  191.         this.guests = data

  192.       },

  193.       async onClickTheButton() {

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

  195.           this.showHelp = true

  196.           return false

  197.         }

  198.         this.showHelp = false

  199.         this.sending = true

  200.         let data = {

  201.           anzeigename: this.anzeigename,

  202.           name: this.name,

  203.           email: this.email,

  204.           newsletter: false,

  205.         }

  206.         const response = await fetch(

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

  208.             method: 'POST',

  209.             headers: {

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

  211.             },

  212.             body: JSON.stringify(data),

  213.           }

  214.         )

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

  216.           this.anzeigename = ''

  217.           this.name = ''

  218.           this.email = ''

  219.           this.success = true

  220.           this.fetchGuests()

  221.         } else {

  222.           this.success = false

  223.           this.fetchGuests()

  224.           this.error = true

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

  226.         }

  227.         this.sending = false

  228.         return false

  229.       },

  230.       resetForm () {

  231.         this.anzeigename = ''

  232.         this.name = ''

  233.         this.email = ''

  234.         this.success = false

  235.       },

  236.       async share () {

  237.         // location.href = "#";

  238.         try {

  239.           await navigator.share({ url:"https://reservation.ck.si/#/event/ignaz" })

  240.         } catch (err) {

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

  242.         }

  243.       },

  244.     },

  245.     mounted() {

  246.       this.fetchStatus()

  247.       this.fetchGuests()

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

  249.         this.selection = document.getSelection()

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

  251.         if (this.selection) {

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

  253.         }

  254.       });

  255.       

  256.       // this.$refs.details.$el

  257.     },

  258.   }

  259. </script>

  260. 

  261. <style>

  262. 

  263. 

  264.   :root {

  265.     --primary-color: #ff8c00;

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

  267.   }

  268.   html {

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

  270.     background-size: cover;

  271.     background-attachment: fixed;

  272.     background-position: bottom;

  273.     background-color: #000;

  274.   }

  275.   body {

  276.     margin: 0;

  277.   }

  278.   #ignaz {

  279.     border: 3px solid #fff;

  280.     padding-bottom: 200px;

  281.     margin: 20px;

  282.   }

  283.   .ignaz-header {

  284.     position: relative;

  285.     z-index: 1;

  286.     text-align: center;

  287.   }

  288.   .ignaz-header > img {

  289.     max-width: 90%;

  290.   }

  291.   .beinchen {

  292.     /* position: fixed; */

  293.     margin-top: -500px;

  294. 

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

  296.     max-width: 100%;

  297.     max-height: 100vh;

  298.     width: 40em;

  299.     z-index: 0;

  300.     mix-blend-mode: screen;

  301.   }

  302.   a {

  303.     color: inherit;

  304.     cursor: inherit;

  305.   }

  306.   .otf {

  307.     width: 100%;

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

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

  310.     background-size: cover;

  311.     display: flex;

  312.     flex-direction: column;

  313.     align-items: center;

  314.     min-height: 100vh;

  315.     position: relative;

  316.   }

  317. 

  318. 

  319.   

  320.   .input-headline {

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

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

  323.     font-size: 4vh;

  324.     margin-bottom: .8vh;

  325.     text-align: center;

  326.   }

  327. 

  328.   .input-form {

  329.     display: flex;

  330.     flex-direction: column;

  331.     max-width: 90%;

  332.     width: 500px;

  333.     margin-top: 4vh;

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

  335.   }

  336.   .ignaz-form {

  337.     z-index: 9;

  338.     position: relative;

  339.     display: flex;

  340.     align-items: center;

  341.     flex-direction: column;

  342.     max-width: 100%;

  343.   }

  344.   .input-fields {

  345.     

  346.   }

  347. 

  348.   .input-text,

  349.   .input-btn, 

  350.   .input-cb {

  351.     color: #000;

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

  353.     font-size: 2.8vh;

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

  355.     border: 0;

  356.     padding: .5em 1em;

  357.     line-height: 1.4;

  358.     max-width: 100%;

  359.     cursor: inherit;

  360.   }

  361.   .input-btn {

  362.     color: #000;

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

  364.   }

  365. 

  366.   .input-btn:hover {

  367.     background: #ffbb00;

  368.   }

  369.   .input-checkbox {

  370.     margin: 0 1em 0 0;    

  371.   }

  372. 

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

  374.     .form-wrapper {

  375.       margin-top: 4em;

  376.     }

  377. 

  378.     .input-text,

  379.     .input-btn {

  380.       width: 100%;

  381.       max-width: 100%;

  382.       min-width: 0;

  383.       text-align: center;

  384.     }

  385.     /* .input-form {

  386.       position: absolute;

  387.       bottom: 0;

  388.       display: flex;

  389.       flex-direction: column;

  390.     } */

  391.   }

  392. 

  393. 

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

  395. 

  396.   /* .beinchen {

  397.   margin-top: 20em;

  398.   } */

  399. 

  400.   }

  401. 

  402.   .input-text {

  403.     width: auto;

  404.     flex-grow: 1;

  405.   }

  406. 

  407. 

  408.   .misch {

  409.     position: relative;

  410.     display: flex;

  411.     flex-direction: column;

  412.     align-items: center;

  413.   }

  414.   .wordcloud {

  415.     /* mix-blend-mode: overlay; */

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

  417.     margin-bottom: 10em;

  418.   }

  419. 

  420.   .details {

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

  422.     font-size: 30px;

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

  424.     max-width: 80em;

  425.     margin: 16% 3% 200px;

  426.     padding: 3%;

  427.     display: flex;

  428.     white-space: nowrap;

  429.   }

  430. 

  431.   .details-address,

  432.   .details-location,

  433.   .details-date {

  434.     max-width: 20vw;

  435.   }

  436. 

  437.   .details-address {

  438.     transform: rotateZ(90deg);

  439.   }

  440. 

  441.   .details-location {

  442.     transform: rotateZ(80deg);

  443.   }

  444. 

  445.   .details-date {

  446.     transform: rotateZ(83deg);

  447.   }

  448. 

  449. 

  450. 

  451.   .share {

  452.     max-width: 30em;

  453.     width: 80%;

  454.     z-index: 99;

  455.     position: relative;

  456.     text-align: center;

  457.   }

  458.   .share:hover {

  459.     mix-blend-mode: difference;

  460.   }

  461. 

  462.   .selection-text {

  463.     position: fixed;

  464.     z-index: 9999;

  465.     font-size: 10vh;

  466.     line-height: 1em;

  467.     pointer-events: none;

  468.     color: #fff;

  469.     mix-blend-mode: difference;

  470.     top: 10%;

  471.   }

  472. 

  473. 

  474. 

  475. .marquee {

  476.   position: relative;

  477.   width: 100vw;

  478.   max-width: 100%;

  479.   height: 200px;

  480.   overflow-x: hidden;

  481.   font-size: 10em;

  482.   z-index: 0;

  483. }

  484. .marquee {

  485.   position: fixed;

  486.   bottom: .5em;

  487.   font-size: 5em;

  488.   background: #ba0394;

  489.   height: 1.3em;

  490.   color: #000;

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

  492.   mix-blend-mode: lighten;

  493. }

  494. 

  495. 

  496. .track {

  497.   position: absolute;

  498.   white-space: nowrap;

  499.   will-change: transform;

  500.   animation: marquee 10s linear infinite;

  501. }

  502. 

  503. @keyframes marquee {

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

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

  506. }

  507. 

  508. 

  509. </style>