-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
379 lines (334 loc) · 17.5 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!doctype html>
<html lang="en">
<head>
<title>Main</title>
<meta property="og:url" content ="https://aniclover.com"/>
<meta property="og:title" content="AniCLover"/>
<meta property="og:description" content="Silicon Valley DJ music event featuring anime songs and various otaku music"/>
<meta property="og:image" content="https://aniclover.com/assets/anicloverbanner1500x500.png" />
<!-- <meta property="og:image" content="https://aniclover.com/assets/Announcement 4_5.jpg"/> -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@aniclover"/>
<meta name="twitter:title" content="AniCLover"/>
<meta name="twitter:description" content="Silicon Valley DJ music event featuring anime songs and various otaku music"/>
<meta name="twitter:image" content="https://aniclover.com/assets/anicloverbanner1500x500.png"/>
<!-- <meta name="twitter:image" content="https://aniclover.com/assets/Announcement 4_5.jpg"/> -->
<meta name="keywords" content="anime dj vocaloid anisong anison event ticket tickets registration anikura silicon valley san francisco bay area san jose"/>
<meta name="facebook-domain-verification" content="yyek588vi70zbr06qn5gdy1c3i8knv" />
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-N8ZJV5T');</script>
<!-- End Google Tag Manager -->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<style>
/* body { */
/* padding-top: 3.5rem; */
/* background-color: black; */
/* } */
.row {
padding-top: 3rem;
}
.jumbotron {
/* background-color: black; */
/* background-image: url("./assets/anicloverbanner1500x500.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height: 500px; */
padding: 0px;
}
.jumbotron p {
display: block;
text-align: bottom;
}
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: left;
}
.img-overlay:before {
content: ' ';
display: block;
/* adjust 'height' to position overlay content vertically */
height: 95%;
}
.display-3 {
color: white;
text-shadow: 2px 4px 3px rgba(255, 255, 255, 0.2);
font-weight: 700;
}
.fab {
font-size: 32px;
color: white;
background: steelblue;
border: 10px solid steelblue;
padding: 0px;
width: 60px;
height: 52px;
}
.btn {
padding: 1em 2px;
}
.btn-lg {
padding: 12px 30px 12px 30px;
}
.lead {
padding-bottom: 12pt;
}
.horiz-center {
margin: 0 auto;
text-align: center;
/* float: left; */
}
.fab:hover {
-webkit-transform: scale(1.25);
transform: scale(1.25)
}
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
width: 100% !important;
}
iframe {
margin: 0 auto;
display: block;
text-align: center;
display: block;
}
.tickets {
display: none;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/assets.webconnex.com/widgets/tickets/css/app.css">
<style type="text/css">
#container th {
color: rgba(0,0,0,1)
}
#container td {
color: rgba(255, 255, 255, 1);
text-align: left
}
#container {
border-top: 3em solid rgba(251, 255, 189, 1);
margin-bottom: 80px
}
.get-tickets {
color: #FFF;
background: #D00;
padding: 10px 30px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 24pt;
/* white-space: nowrap; */
border-radius: 10px;
/* float: none; */
/* margin-left: 20px; */
}
</style>
<script src="https://kit.fontawesome.com/a1391b5195.js"></script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '949142891921298');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=949142891921298&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- Twitter universal website tag code -->
<!-- <script>
!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js',
a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
// Insert Twitter Pixel ID and Standard Event data below
twq('init','o2oki');
twq('track','PageView');
</script> -->
<!-- End Twitter universal website tag code -->
<!-- <script async src="https://widgets.givebutter.com/latest.umd.cjs?acct=U6SIETbZGij8rNPi&p=other"></script> -->
<!-- Givebutter Elements -->
<!-- <script>
window.Givebutter=window.Givebutter||function(){(Givebutter.q=Givebutter.q||[]).push(arguments)};Givebutter.l=+new Date;
window.Givebutter('setOptions', {
accountId: "U6SIETbZGij8rNPi", // Visit your Dashboard to find your Account ID.
});
</script>
<script async src="https://js.givebutter.com/elements/latest.js"></script> -->
<!-- End Givebutter Elements -->
</head>
<body class="text-light bg-dark">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N8ZJV5T"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0" nonce="0HOLvqOT"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<div class="container horiz-center justify-content-center">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron d-flex align-items-end">
<div class="container img-wrapper">
<!--<h1 class="display-3">AniCLover</h1>-->
<img class="img-fluid" src="./assets/anicloverbanner1500x500.png">
<p class="btn-group img-overlay">
<a class="btn" href="https://twitter.com/aniclover" target="_blank"><i class="fab fa-twitter"></i></a>
<a class="btn" href="https://www.twitch.tv/anicloverclub" target="_blank"><i class="fab fa-twitch"></i></a>
<a class="btn" href="https://aniclover.com/discord" target="_blank"><i class="fab fa-discord"></i></a>
<a class="btn" href="https://www.instagram.com/anicloverclub/" target="_blank"><i class="fab fa-instagram"></i></a>
<a class="btn" href="https://www.facebook.com/AniCLoverClub" target="_blank"><i class="fab fa-facebook-f"></i></a>
</p>
</div>
</div>
<div class="row horiz-center justify-content-center">
<h1>Event Calendar</h1>
<div class="col-md-6">
<div class="row horiz-center justify-content-center">
<h1 class="display-3">
Tickets Available
</h1>
<p>
<small>(click below for tickets)</small>
</p>
<div class="btn-group-vertical">
<a href="https://givebutter.com/UjJHHP?utm_campaign=main&utm_source=website" class="btn btn-danger">
<h4>Anikura Unison San Jose Countdown 2025</h4>
Fuze in San Jose<br>
Tuesday, December 31 @ 9:00PM<br>
</a>
<a href="https://aniclover.com/tokyo?utm_campaign=main&utm_source=website" class="btn btn-primary">
<h4>Anikura Unison Tokyo 2025</h4>
CIRCUS TOKYO<br>
Thursday, January 2 @ 13:00<br>
</a>
</div>
</div>
</div>
<div class="col-md-6">
<p>
<a href="https://aniclover.com/direct">
<img class="img-fluid" src="./assets/anicloSchedule.png" alt="Calendar">
</a>
</p>
</div>
</div>
<div class="row w-75 horiz-center">
<h1>About Us</h1>
<div class="col text-start">
<p class="lead">
AniCLover is a DJ music event featuring anime, Vocaloid, and various otaku music, operating in the San Francisco Bay Area.
We host quarterly live events, within our local community, and online stream events featuring music performances by
local and global artists.
</p>
<p class="lead">
We are a project of the <a href="https://www.aniclover.org">AniCLover Charitable Council</a>, a 501(c)(3) charity with a
mission to create community performance opportunities and cross-cultural exchanges in Silicon Valley and beyond, through
anikura music and culture. Your donations are crucial to the continuation of
our events, so please consider donating to us
<a href="https://www.paypal.com/us/fundraiser/charity/4391430">via the PayPal Giving Fund</a>.
</p>
<!-- <p class="lead">
Donations made this way will have all processing fees covered by PayPal, and 100% of what you give will reach us. You will
receive a tax receipt for your donation immediately, and your contributions may be tax deductible.
</p> -->
<p class="lead">
Even better, check if your employer has a charity matching program and multiply your donation!
We're listed as "AniCLover" at Benevity, Cybergrants, and YourCause.
</p>
<p class="text-center">
<a class="btn btn-primary btn-lg" href="https://www.paypal.com/us/fundraiser/charity/4391430">
Donate Now
</a>
<button class="btn btn-primary btn-lg" type="button" data-toggle="modal" data-target="#MLModal">
Sign Up For Our Mailing List
</button>
<div class="modal fade" id="MLModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScz259gQETXr22adLxsj01FC9RCOGJcu65YPP_u6732T2lq_A/viewform?embedded=true" width="100%" height="950px" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
</div>
</div>
</div>
<!-- <button class="btn btn-primary btn-lg" formsappId=6553dd9f86d9f68a9edd29e8 onclick="formsappForm.open()"></button>
<script src="https://forms.app/static/embed.js" type="text/javascript" async defer onload="new formsapp('6553dd9f86d9f68a9edd29e8', 'popup', {'overlay':'rgba(45,45,45,0.5)','button':{'font-size':'1.25rem', 'text':'Sign Up For Our Mailing List'},'width':'800px','height':'600px'});"></script> -->
</div>
</div>
<div class="row">
<h1>Recent News</h1>
<!-- Place <div> tag where you want the feed to appear -->
<div id="curator-feed-default-feed-layout"><a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a></div><!-- The Javascript can be moved to the end of the html page before the </body> tag --><script type="text/javascript">
/* curator-feed-default-feed-layout */
(function(){
var i,e,d=document,s="script";i=d.createElement("script");i.async=1;i.charset="UTF-8";
i.src="https://cdn.curator.io/published/67e1c444-3d0a-45d2-903a-3b05b0b113b2.js";
e=d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e);
})();
</script>
<!-- <div class="col-md-6">
<a class="twitter-timeline" href="https://twitter.com/AniCLover" data-theme="dark" data-width="100%" data-height="600px">Tweets by AniCLover</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-md-6">
<div class="fb-page" data-href="https://www.facebook.com/AniCLoverClub/" data-tabs="timeline" data-width="500px" data-height="600px" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true">
<blockquote cite="https://www.facebook.com/AniCLoverClub/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/AniCLoverClub/">AniClover</a></blockquote>
</div>
</div> -->
</div>
<div class="row">
<h1>Live Stream</h1>
<div class="col-md-12">
<div id="twitch-embed"></div>
</div>
</div>
</div>
<hr>
</div>
<!-- /container -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: "100%",
height: 480,
layout: "video",
channel: "anicloverclub"
});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>