|
@@ -17,14 +17,11 @@ |
|
|
<div class="marquee"> |
|
|
<div class="marquee"> |
|
|
<div class="track"> |
|
|
<div class="track"> |
|
|
<div class="content"> |
|
|
<div class="content"> |
|
|
<span v-for="n in marqueenames" :key="n"> |
|
|
|
|
|
{{n}} /// |
|
|
|
|
|
|
|
|
<span v-for="dj in djs" :key="dj"> |
|
|
|
|
|
{{dj}} /// |
|
|
</span> |
|
|
</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> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -52,7 +49,7 @@ |
|
|
<div v-if="showHelp" style="margin-bottom: 1em;"> |
|
|
<div v-if="showHelp" style="margin-bottom: 1em;"> |
|
|
*robot voice* give us your data for the reservation! |
|
|
*robot voice* give us your data for the reservation! |
|
|
</div> |
|
|
</div> |
|
|
<div v-if="success"> |
|
|
|
|
|
|
|
|
<div v-if="success" style="text-align: center;"> |
|
|
<p style="font-size: 6vw; text-align: center;"> |
|
|
<p style="font-size: 6vw; text-align: center;"> |
|
|
thanks! |
|
|
thanks! |
|
|
</p> |
|
|
</p> |
|
@@ -64,13 +61,20 @@ |
|
|
{{status.reason}} |
|
|
{{status.reason}} |
|
|
</template> |
|
|
</template> |
|
|
<!-- {{words}} --> |
|
|
<!-- {{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 v-if="status && status.open" class="details" ref="details"> |
|
|
<div class="details-date"> |
|
|
<div class="details-date"> |
|
|
25. nov. // 22 - 06 h |
|
|
25. nov. // 22 - 06 h |
|
@@ -78,9 +82,8 @@ |
|
|
<div class="details-address"> |
|
|
<div class="details-address"> |
|
|
hockegasse 37 // haus 4 |
|
|
hockegasse 37 // haus 4 |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="details-location"> |
|
|
<div class="details-location"> |
|
|
semmelweissklinik |
|
|
|
|
|
|
|
|
semmelweisklinik |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<small> |
|
|
<small> |
|
@@ -96,7 +99,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<a |
|
|
<a |
|
|
v-else |
|
|
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;" |
|
|
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> |
|
|
<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> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
// import VueWordCloud from 'vuewordcloud'; |
|
|
|
|
|
|
|
|
import VueWordCloud from 'vuewordcloud'; |
|
|
export default { |
|
|
export default { |
|
|
name: 'Invitation', |
|
|
name: 'Invitation', |
|
|
data() { |
|
|
data() { |
|
@@ -129,11 +132,22 @@ |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
components: { |
|
|
components: { |
|
|
// [VueWordCloud.name]: VueWordCloud, |
|
|
|
|
|
|
|
|
[VueWordCloud.name]: VueWordCloud, |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
|
|
|
djs () { |
|
|
|
|
|
return [ |
|
|
|
|
|
'Lenia [Gassen aus Zucker]', |
|
|
|
|
|
'Tilard Kraeftbauer [Semmelweisklinik]', |
|
|
|
|
|
'Marcell Wallet [Untere Willkyr]', |
|
|
|
|
|
'Flocker Lockig [Taborama]', |
|
|
|
|
|
'TBA', |
|
|
|
|
|
'TBA', |
|
|
|
|
|
'TBA' |
|
|
|
|
|
] |
|
|
|
|
|
}, |
|
|
nameColors() { |
|
|
nameColors() { |
|
|
return ['White'] |
|
|
|
|
|
|
|
|
return ['#ff8c00'] |
|
|
}, |
|
|
}, |
|
|
marqueenames() { |
|
|
marqueenames() { |
|
|
return this.guests.map(guest => { |
|
|
return this.guests.map(guest => { |
|
@@ -156,7 +170,7 @@ |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
canShare () { |
|
|
canShare () { |
|
|
return !!navigator.share |
|
|
|
|
|
|
|
|
return navigator && !!navigator.share |
|
|
}, |
|
|
}, |
|
|
// guestlist() { |
|
|
// guestlist() { |
|
|
// return this.guests.map( (g) => { |
|
|
// return this.guests.map( (g) => { |
|
@@ -219,6 +233,14 @@ |
|
|
this.email = '' |
|
|
this.email = '' |
|
|
this.success = false |
|
|
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() { |
|
|
mounted() { |
|
|
this.fetchStatus() |
|
|
this.fetchStatus() |
|
@@ -243,12 +265,15 @@ |
|
|
--primary-color: #ff8c00; |
|
|
--primary-color: #ff8c00; |
|
|
cursor: url('cursor.png'), auto; |
|
|
cursor: url('cursor.png'), auto; |
|
|
} |
|
|
} |
|
|
body { |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
|
html { |
|
|
background-image: url('/ignaz-background.jpg'); |
|
|
background-image: url('/ignaz-background.jpg'); |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
background-attachment: fixed; |
|
|
background-attachment: fixed; |
|
|
background-position: bottom; |
|
|
background-position: bottom; |
|
|
|
|
|
background-color: #000; |
|
|
|
|
|
} |
|
|
|
|
|
body { |
|
|
|
|
|
margin: 0; |
|
|
} |
|
|
} |
|
|
#ignaz { |
|
|
#ignaz { |
|
|
border: 3px solid #fff; |
|
|
border: 3px solid #fff; |
|
@@ -264,8 +289,8 @@ |
|
|
max-width: 90%; |
|
|
max-width: 90%; |
|
|
} |
|
|
} |
|
|
.beinchen { |
|
|
.beinchen { |
|
|
position: fixed; |
|
|
|
|
|
margin-top: calc(50vh - 400px); |
|
|
|
|
|
|
|
|
/* position: fixed; */ |
|
|
|
|
|
margin-top: -500px; |
|
|
|
|
|
|
|
|
/* margin-bottom: 80px; */ |
|
|
/* margin-bottom: 80px; */ |
|
|
max-width: 100%; |
|
|
max-width: 100%; |
|
@@ -313,7 +338,8 @@ |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
max-width: 100%; |
|
|
} |
|
|
} |
|
|
.input-fields { |
|
|
.input-fields { |
|
|
|
|
|
|
|
@@ -367,9 +393,9 @@ |
|
|
|
|
|
|
|
|
@media screen and (max-width: 700px) { |
|
|
@media screen and (max-width: 700px) { |
|
|
|
|
|
|
|
|
.beinchen { |
|
|
|
|
|
|
|
|
/* .beinchen { |
|
|
margin-top: 20em; |
|
|
margin-top: 20em; |
|
|
} |
|
|
|
|
|
|
|
|
} */ |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@@ -378,8 +404,17 @@ |
|
|
flex-grow: 1; |
|
|
flex-grow: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.misch { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
.wordcloud { |
|
|
.wordcloud { |
|
|
mix-blend-mode: overlay; |
|
|
|
|
|
|
|
|
/* mix-blend-mode: overlay; */ |
|
|
|
|
|
color: var(--primary-color); |
|
|
|
|
|
margin-bottom: 10em; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.details { |
|
|
.details { |
|
@@ -418,6 +453,7 @@ |
|
|
width: 80%; |
|
|
width: 80%; |
|
|
z-index: 99; |
|
|
z-index: 99; |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
.share:hover { |
|
|
.share:hover { |
|
|
mix-blend-mode: difference; |
|
|
mix-blend-mode: difference; |
|
@@ -453,6 +489,7 @@ |
|
|
height: 1.3em; |
|
|
height: 1.3em; |
|
|
color: #000; |
|
|
color: #000; |
|
|
transform: rotateZ(7deg) scale(1.1); |
|
|
transform: rotateZ(7deg) scale(1.1); |
|
|
|
|
|
mix-blend-mode: lighten; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -460,7 +497,7 @@ |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
white-space: nowrap; |
|
|
white-space: nowrap; |
|
|
will-change: transform; |
|
|
will-change: transform; |
|
|
animation: marquee 2s linear infinite; |
|
|
|
|
|
|
|
|
animation: marquee 10s linear infinite; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes marquee { |
|
|
@keyframes marquee { |
|
|