-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (148 loc) · 9.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en" class="bg-yellow overflow-x-hidden">
<head>
<title>WCMW - When Coffee Meets Whisky</title>
<meta name="description" content="WHEN COFFEE MEETS WHISKY ☕️ Specialty Coffee 🥃 Japanese Whisky 📻 Listening Bar Run by @tstudiolv">
<!-- Google Tag Manager -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-MKS33536"></script>
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://wcmw.bar">
<meta property="og:type" content="website">
<meta property="og:title" content="WCMW - When Coffee Meets Whisky">
<meta property="og:description" content="WHEN COFFEE MEETS WHISKY ☕️ Specialty Coffee 🥃 Japanese Whisky 📻 Listening Bar Run by @tstudiolv">
<meta property="og:image" content="https://opengraph.b-cdn.net/production/documents/152f14e3-d016-4a56-8f34-838274b69e12.jpg?token=zt8LzwEuH_tmnFVU6AT83PPqgMbcFMbAebMQ3lWTXrk&height=312&width=820&expires=33243308366">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="wcmw.bar">
<meta property="twitter:url" content="https://wcmw.bar">
<meta name="twitter:title" content="WCMW - When Coffee Meets Whisky">
<meta name="twitter:description" content="WHEN COFFEE MEETS WHISKY ☕️ Specialty Coffee 🥃 Japanese Whisky 📻 Listening Bar Run by @tstudiolv">
<meta name="twitter:image" content="https://opengraph.b-cdn.net/production/documents/152f14e3-d016-4a56-8f34-838274b69e12.jpg?token=zt8LzwEuH_tmnFVU6AT83PPqgMbcFMbAebMQ3lWTXrk&height=312&width=820&expires=33243308366">
<link rel="icon" href="./img/favicon.svg" sizes="any" type="image/svg+xml">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="./src/styles.css">
</head>
<body class="text-lightBlack flex flex-col justify-between align-top p-4 h-auto items-center">
<background class="fixed w-full h-full overflow-hidden -z-10 -m-4 opacity-10 sm:opacity-15">
<img src="./img/WCMW_logo_12.svg" alt="WCMW Background dancing guy" class="w-full h-full object-contain">
</background>
<section class="flex flex-col justify-between sm:h-svh h-auto w-full max-w-[2560px] lg:px-16">
<top class="flex flex-row flex-wrap justify-between align-top max-h-48">
<img src="./img/WCMW_16.svg" alt="WCMW Logo" class="w-1/5 max-h-32">
<img src="./img/WCMW_5.svg" alt="When Coffee Meets Whisky" class="w-3/5 max-h-10 md:w-2/5">
</top>
<main class="flex flex-row flex-wrap justify-center my-12 sm:mb-0 sm:mt-0" id="boom">
<img src="./img/WCMW_BOOM.svg" alt="WCMW boom" id="spinner" class="max-h-40">
<img src="./img/WCMW_BOOM_LINE.svg" alt="WCMW boom" class="opacity-40 absolute -z-10 max-h-40 animate-ping-slow">
</main>
<bottom class="flex flex-col mb-6 justify-end items-center font-BoldBold h-full pb-6 sm:justify-between sm:flex-row sm:space-y-0 sm:items-end sm:h-max sm:pb-0">
<div class="flex flex-col items-start text-xl mb-12 sm:mb-0">
<h3 class="sm:hidden flex text-2xl uppercase flex-row space-x-2">Darba Laiks</h3>
<h3 class="hidden sm:flex sm:text-4xl uppercase flex-row space-x-2">Darba Laiks</h3>
<div class="flex flex-col w-full px-6 sm:px-12 font-SequelSans">
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>I</span>
<span>-</span>
</div>
</div>
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>II</span>
<span>10 - 18</span>
</div>
</div>
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>III</span>
<span>10 - 18</span>
</div>
</div>
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>IV</span>
<span>10 - 23</span>
</div>
</div>
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>V</span>
<span>10 - 02</span>
</div>
</div>
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>VI</span>
<span>18 - 02</span>
</div>
</div>
<div class="group flex flex-col">
<div class="flex flex-row justify-between space-x-2">
<span>VII</span>
<span>-</span>
</div>
</div>
</div>
</div>
<div class="flex flex-col font-BoldBold text-xl sm:items-end items-center">
<h3 class="text-2xl uppercase flex flex-row space-x-2 sm:text-4xl sm:mb-5 sm:flex-row-reverse sm:space-x-0">Kontakti</h3>
<p><a class="font-SequelSans text-lg underline hover:no-underline" href="https://www.google.com/maps/dir/?api=1&destination=Baznīcas+iela+20%2F22%2C+Rīga">Baznīcas iela 20/22, Rīga</a></p>
<p>tteeellll<a class=" cursor-pointer font-SequelSans text-lg ml-2 underline hover:no-underline" href="tel:+37123009200">+371 23009200</a></p>
<p>eemaiilll<a class=" cursor-pointer font-SequelSans text-lg ml-2 underline hover:no-underline" href="mailto:hi@wcmw.bar">hi@wcmw.bar</a></p>
<p>insttttaaa<a class=" cursor-pointer font-SequelSans text-lg ml-2 underline hover:no-underline" href="https://instagr.am/wcmw.bar">@wcmw.bar</a></p>
<p>faceboook<a class=" cursor-pointer font-SequelSans text-lg ml-2 underline hover:no-underline" href="https://fb.com/wcmw.bar">/wcmw.bar</a></p>
</div>
</bottom>
</section>
<section class="flex flex-col justify-between align-center w-full h-[40dvh] sm:h-[80dvh] sm:mt-16 max-w-[2560px] lg:px-16">
<iframe src="https://ra.co/promoters/108567/widget/events?theme=light&transparentBackground=true&customBackgroundColor=&customTextColor=%23000" height="100%" width="100%" style="border:none; overflow: hidden;" scrolling="no" seamless="seamless"></iframe>
</section>
<section class="flex flex-col justify-between align-center h-dvh">
<h3 class="text-2xl uppercase self-center sm:text-4xl font-BoldBold">Driiiiinnnksss</h3>
<img src="./menu/menu_1.jpg" alt="WCMW Menu 1" class="hidden sm:block w-full mix-blend-darken max-w-[2560px]">
<img src="./menu/menu_2.jpg" alt="WCMW Menu 1" class="hidden sm:block w-full mix-blend-darken max-w-[2560px]">
<img src="./menu/menu_3.jpg" alt="WCMW Menu 1" class="hidden sm:block w-full mix-blend-darken max-w-[2560px]">
<img src="./menu/menu_1_l.jpg" alt="WCMW Menu 1" class="sm:hidden w-full mix-blend-darken">
<img src="./menu/menu_1_r.jpg" alt="WCMW Menu 1" class="sm:hidden w-full mix-blend-darken">
<img src="./menu/menu_2_l.jpg" alt="WCMW Menu 1" class="sm:hidden w-full mix-blend-darken">
<img src="./menu/menu_2_r.jpg" alt="WCMW Menu 1" class="sm:hidden w-full mix-blend-darken">
<img src="./menu/menu_3_m.jpg" alt="WCMW Menu 1" class="sm:hidden w-full mix-blend-darken">
</section>
</body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MKS33536" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
const spinner = document.getElementById('spinner');
const spinEvents = [
'touchstart',
'mouseenter',
'mousedown',
];
spinEvents.forEach(function(event) {
spinner.addEventListener(event, doBackspin);
});
function doBackspin() {
if (!spinner.classList.contains('animate-backspin')){
spinner.classList.add('animate-backspin');
setTimeout(function() {
spinner.classList.remove('animate-backspin');
}, 3100);
}
}
const boomElement = document.getElementById('boom');
const vibrateEvents = [
'touchstart',
];
vibrateEvents.forEach(function(event) {
boomElement.addEventListener(event, doVibration);
});
boomElement.addEventListener('touchend', clearInterval(vibrationInterval));
function doVibration() {
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
navigator.vibrate([200]);
}
}
</script>
</html>