-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
170 lines (143 loc) · 5.3 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
<!DOCTYPE HTML>
<!--
Solid State by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>LuxembourgJS Meetup</title>
<meta name="description"
content="The finest JavaScript User Group in Luxembourg - Meeting the first Wednesday of each month">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="theme/assets/css/main.css" />
<noscript>
<link rel="stylesheet" href="theme/assets/css/noscript.css" /></noscript>
<style>
#banner .logo img {
width: 200px;
height: 200px;
}
#banner {
padding: 0;
}
.meetup_widget {
background-color: #f6c347;
color: black;
border-radius: 6px;
margin-left: 20px;
padding: 10px;
text-align: left;
font-size: 83%;
width: 350px;
}
#m_date {
font-size: 120%;
font-weight: bold;
}
#m_link a {
color: black;
font-weight: bold;
font-size: 110%;
border-bottom: dotted 1px black;
}
#m_nr_going {
font-size: 90%;
}
body.jslu {
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("img/bg.jpg");
}
@media screen and (max-width: 480px) {
.meetup_widget {
margin-left: 0;
margin-bottom: 40px;
width: 100%;
}
}
</style>
<script>
// get data from meetup.com API
function updateEvent(response) {
let next = response.data.next_event;
let date = new Date(next.time);
document.getElementById("m_date").innerHTML = date.toLocaleString('en-UK');
document.getElementById("m_link").innerHTML = `<a href="https://www.meetup.com/luxembourgjs/events/${next.id}/">${next.name.replace("JavaScript Meetup Luxembourg", "")}</a>`
document.getElementById("m_nr_going").innerHTML = next.yes_rsvp_count;
}
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function () {
// JSONP because meetup.com does not know about CORS headers...
let script = document.createElement('script');
script.src = 'https://api.meetup.com/luxembourgjs?&sign=true&callback=updateEvent&photo-host=public&fields=next_event';
document.body.appendChild(script);
})
</script>
</head>
<body class="is-preload jslu">
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Banner -->
<!-- FIXME, remove this style things and fix the css styling for mobile devices-->
<section id="banner" style="margin-bottom: 0">
<div class="inner">
<a href="./index.html">
<div class="logo"><img src="img/jslu-logo.jpg" alt="LuxembourgJS"></div>
<h1>LuxembourgJS</h1>
<p>The finest JavaScript User Group in Luxembourg</p>
</a>
<a href="https://docs.google.com/forms/d/1AAFDPYBTODLPgB82S1auSCqmN7Z5M8DYqYcEeC3r_8k/prefill" class="special">Call
for papers</a>
<a href="https://live.luxembourgjs.com/b/adm-7am-efn" class="special" title="Open when holding meetups!">live.luxembourgjs.com</a>
</div>
</section>
<!-- Wrapper -->
<section id="wrapper">
<!-- One -->
<section id="one" class="wrapper spotlight style1">
<div class="inner">
<div class="meetup_widget">
Next meetup:<br />
<span id="m_date"></span><br />
<span id="m_link"></span><br />
<span id="m_nr_going"></span> people going
</div>
<div class="content">
<h2 class="major">When is the next event?</h2>
<p>We usually have one event per month, the first wednesday of the month. Each event is announced on
meetup.com., where we kindly ask you to RSVP for organisational reasons. The location of the event changes
regularly, so be sure to check the event page on meetup.com for more details. </p>
<a href="https://www.meetup.com/luxembourgjs/" class="special">LuxembourgJS on Meetup.com</a>
</div>
</div>
</section>
<!-- Two -->
<section id="two" class="wrapper alt spotlight style2">
<div class="inner">
<div class="content">
<h2 class="major">KEEP IN TOUCH</h2>
<a href="https://docs.google.com/forms/d/1AAFDPYBTODLPgB82S1auSCqmN7Z5M8DYqYcEeC3r_8k/prefill" class="special">Call for papers</a>
<a href="https://twitter.com/luxembourgjs" class="special">Our Twitter</a>
<a href="https://www.linkedin.com/feed/" class="special">Our LinkedIn</a>
<a href="https://www.meetup.com/luxembourgjs/" class="special">Become a member</a>
<a href="./code-of-conduct.html" class="special">Code of conduct</a>
</div>
</div>
</section>
</section>
</div>
<!-- Scripts -->
<script src="theme/assets/js/jquery.min.js"></script>
<script src="theme/assets/js/jquery.scrollex.min.js"></script>
<script src="theme/assets/js/browser.min.js"></script>
<script src="theme/assets/js/breakpoints.min.js"></script>
<script src="theme/assets/js/util.js"></script>
<script src="theme/assets/js/main.js"></script>
</body>
</html>