-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.html
238 lines (184 loc) · 12.2 KB
/
template.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
<!DOCTYPE html>
<html lang="en">
<head>
<!--
These scripts/styles are intentionally inline for ease-of-use.
It's easier to define them inline then create separate files for this project.
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<style>
body {
font-family: Arial;
width: 1080px;
margin: 0 auto;
}
h1, h2 {
margin-top: 0;
}
h2 {
margin-bottom: 0;
}
.help {
font-size: 14px;
}
.section {
background-color: #fae4e8;
padding: 20px;
margin-bottom: 10px;
}
a {
color: #f64061;
}
button {
background-color: #f64061;
border-color: #f64060;
color: #FFF;
padding: 8px 16px;
border: none;
font-weight: bold;
transition: background-color .1s ease-in-out;
}
button:hover {
background-color: #f64061d0;
cursor: pointer;
}
pre {
overflow: scroll;
}
</style>
<script>
window.addEventListener('load', () => {
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', e => {
const clickedButton = e.currentTarget;
const originalText = clickedButton.textContent;
const { selectorToCopy } = e.currentTarget.dataset;
copyWithStyle(selectorToCopy);
clickedButton.textContent = 'Copied!'
setTimeout(() => {
clickedButton.textContent = originalText;
}, 1000);
});
});
});
function copyWithStyle(selector) {
console.log(`Copying ${selector} contents to clipboard.`);
const elementToCopy = document.querySelector(selector);
const range = document.createRange();
range.selectNodeContents(elementToCopy);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
}
</script>
</head>
<body>
<h1>
<svg viewBox="0 0 111 40" xmlns="http://www.w3.org/2000/svg" height="34px"><path d="M110.994 23.367a1.687 1.687 0 00-.11-.458c-.37-.962-2.054-.065-2.629.176-1.035.434-2.219 1.006-3.365.678-.317-.091-.224-.361 0-.499.112-.068 3.055-1.733 3.921-5.423 1.386-5.903-2.867-7.545-4.545-7.744-1.706-.202-3.609.061-4.411.384-2.273.913-2.866 2.943-3.023 4.159-.215 1.672-.24 4.59-.447 5.903-.136.865-.78 2.178-2.048 2.053-2.447-.241-3.571-1.18-3.493-2.722.054-1.084.039-1.3.38-3.704.293-2.06.478-2.551.478-3.022 0-1.349-1.813-1.621-2.419-1.014-.468.469-.585 1.426-.702 3.042-.11 1.519-.343 3.495-.644 4.7-.468 1.877-.656 2.014-1.083 2.551-.887 1.116-2.526.77-3.326.009-.47-.448-.534-.845-.443-2.16.091-1.315.306-3.606.608-5.995.263-2.09.082-2.404-.56-2.99-.597-.546-2.884-.465-3.943-.465-1.639 0-1.541.78-1.649 3.44-.047 1.161-.101 2.923-.217 4.287-.188 2.22-4.425 3.89-6.373 3.79-2.019-.104-2.213-3.873-2.34-4.75-.129-.876-.18-8.44.038-8.697.155-.18 1.37-.318 2.755-.589 3.067-.6 3.508-.994 3.512-1.954.002-.471-.028-1.13-.55-1.307-.306-.104-1.1-.222-2.153-.346-3.037-.358-3.465-.248-3.482-.633-.029-.674.035-1.971-.019-2.482C68.58.329 67.108-.093 65.45.017c-.327.021-.78.127-.816.565-.036.439-.033.777-.086 1.52-.117 1.651-.15 1.83-.79 1.827-.57-.003-5.312-.422-6.223-.13-.912.292-.875.913-.948 1.224-.073.31.09 2.173.182 2.977.091.803.267 1.896.376 2.06.11.165.452.631 1.404.512 3.234-.405 5.391-.894 5.829-1.003.437-.11.487-.165.492.182.002.197.084 4.146.098 5.319.023 2.006.362 7.817-5.044 8.718-2.249.375-4.357-.28-5.316-1.337-.544-.6-.277-.678-.037-1.068.364-.593 3.402-4.162.856-7.864-1.501-2.184-5.101-2.357-6.408-1.79-1.013.439-1.832 1.8-1.99 3.46-.488 5.12 2.442 8.287 2.556 8.482.136.234-.376.988-2.166 1.25-2.4.352-6.085-2.543-5.99-2.92.047-.18 1.679-2.853 1.718-5.436.013-.879-.277-2.036-.878-3.205-.602-1.169-2.496-2.973-4.546-2.577-4.824.93-4.274 5.696-3.94 6.997.694 2.69 2.319 5.064 2.584 5.539.361.645-10.207 4.839-10.616.913-.407-3.892 5.371-12.284 4.916-15.54-.41-2.933-2.382-3.547-4.097-3.577-1.667-.03-2.107.236-2.671.564-.325.189-.792.563-1.44-.055-.431-.411-.716-.699-1.172-1.064-.231-.185-.601-.42-1.221-.511-.62-.091-1.422 0-1.932.219-.51.22-.912.603-1.331.968-.42.365-1.483 1.559-2.474 1.119-.43-.191-1.887-.92-2.937-1.375-2.029-.88-4.955.545-6.008 2.421C3.815 10.193.72 21.161.252 22.607c-1.052 3.248 1.33 5.896 4.545 5.744 1.358-.065 2.263-.562 3.121-2.126.496-.903 5.156-13.097 5.502-13.681.252-.425 1.09-.984 1.8-.62.712.366.853 1.128.748 1.845-.17 1.16-3.456 8.6-3.582 9.441-.215 1.432.464 2.228 1.947 2.306 1.016.053 2.029-.313 2.833-1.832.45-.849 5.631-11.248 6.09-11.942.504-.762.91-1.013 1.422-.986.399.02 1.036.123.876 1.319-.156 1.172-4.322 8.803-4.76 10.671-.663 2.834 1.151 6.646 6.01 6.821 2.414.088 8.002-.966 11.15-3.357 1.143-.868.841-.943 1.553-.311 1.025.909 2.927 2.189 4.8 2.189 4.253 0 7.359-2.66 7.5-2.756a.111.111 0 01.145.017c.258.28 2.895 1.751 4.743 1.812 4.399.145 7.004-2.3 7.988-3.451a22.03 22.03 0 001.512-1.987.157.157 0 01.246-.018c.263.29 2.247 3.942 6.188 3.438 2.198-.281 5.467-2.139 5.696-2.39a.1.1 0 01.17.035c.115.318.618 2.11 2.633 3.535 1.652 1.169 4.832 1.403 6.243.626 1.17-.644 1.639-1.056 2.458-1.876.352-.353.888-.71 1.854-.505 1.08.229 3.934.735 4.116.822.205.097.237.47.176.86-.098.614-.33 2.766-.566 4.775-.237 2.009-.994 8.712.8 8.96 1.084.15 2.025-.878 2.274-1.881.624-2.517.738-5.35 1.148-7.78.49-2.893.684-3.704.86-4.027.146-.268.146-.205 2.167-.033 1.4.12 2.536.315 4.223.079 1.398-.196 4.267-1.256 4.113-2.976m-69.897-6.502c-.067.947-.31 1.547-.811 2.419-.313.544-.637.137-.825-.132-.27-.386-1.65-3.744-.596-4.437.297-.195.886-.307 1.312-.068.426.238.683.585.8.972.12.393.164.613.12 1.246m13.092.488c-.123 1.09-.585 1.707-.755 1.936-.301.404-.422.563-.71.27-.234-.238-1.109-2.02-1.235-3.195-.069-.632.106-1.535.636-1.747.558-.223 1.123-.122 1.52.397.623.817.632 1.564.544 2.339M101.7 22.13c-.657.27-.943.105-.905-.982.008-.234 1.063-5.687 3.08-6.675.572-.28 1.152-.268 1.554.18.76.847.56 2.152-.012 3.342-.828 1.727-2.814 3.764-3.717 4.135" fill="#F64060" fill-rule="evenodd"></path></svg>
walk template - {title}
</h1>
<p>Copy each section into its corresponding section on <a href="https://meetup.com">Meetup</a></p>
<p>Link to original WMWG walk: <a href="{wmwg_website_url}" target="_blank">{wmwg_website_url}</a></p>
<div class="section">
<h2>
Title
<button data-selector-to-copy=".title-text">Copy</button>
</h2>
<p class="help">Add this to <strong>Title (required)</strong> field.</p>
<div class="title-text">
{title}
</div>
</div>
<div class="section">
<h2>
Walk times
<button data-selector-to-copy=".start-text">Copy start</button>
<button data-selector-to-copy=".end-text">Copy end</button>
</h2>
<p class="help">Add this to <strong>Date and time</strong> field.</p>
<p><b>Starts on:</b> <div class="start-text">{start_datetime}</div></p>
<p><b>Finishes at:</b> <div class="end-text">{finish_datetime}</div></p>
</div>
<div class="section">
<h2>
How to find us
<button data-selector-to-copy=".howtofindus-text">Copy</button>
</h2>
<p class="help">Add this to <strong>How to find us</strong> field.</p>
<div class="howtofindus-text">
<p>Meet at {start_time} at {start_point}</p>
</div>
</div>
<div class="section">
<h2>
Description
<button data-selector-to-copy=".content-text">Copy</button>
</h2>
<p class="help">Add this to <strong>Description (required)</strong> field.</p>
<div class="content-text">
<p>{description}</p>
{additional_notes}
<br/>
<strong>🔍 How to find us</strong>
<p>
Meet at {start_time} at {start_point}<br/>
Postcode: {postcode}<br/>
Google Maps: <a href="{google_maps_url}">{google_maps_url}</a>
</p>
<br />
<strong>🅿️ Is parking available?</strong>
<p>{parking_text}</p>
<br />
<strong>👞 What should I wear?</strong>
<p>Wear walking boots/shoes or sturdy trainers - bringing a waterproof coat is also recommended.<br/><br/>
Additionally...<br/>
If it's cold: gloves, hat, scarf, warm trousers and a fleece/warm top.<br/>
If it's hot: sunscreen, hat, a pair of shades and a thin top - it may get hot.</p>
<br />
<strong>🥪 Do I need to bring food?</strong>
<p>{food_text}</p>
<br />
<strong>🚶 How hard is this walk?</strong>
<p>{walk_difficulty_text}</p>
<br />
<strong>I have never walked with the group before and/or don't know anyone, can I still come?</strong>
<p>Yes! This group is a great way to meet new people, socialise, get out in nature and improve your fitness. We welcome any and all people to come along.</p>
<br />
<strong>🚗 I can't get to the walk, are lift shares available?</strong>
<p>There are a few methods to look for lift shares:</p>
<ul>
<li>Post a comment on the event</li>
<li>Join our Discord and post in the #lift-sharing channel, don't forget to specify the walk you are looking for a lift for.</li>
</ul>
<p>We also encourage people that are coming along to offer lift shares to others when possible.</p>
<br />
<strong>🐶 Can I bring my dog?</strong>
<p>Unless stated in the description, dogs are welcome provided they are well behaved around people/other dogs and kept on a lead/under control in areas where there may be livestock. <br/>⚠️ Some walks may have stiles, and you may need to lift them over. ⚠️</p>
<br />
<strong>📞 How can I contact the event organiser?</strong>
<p>Walks are led by volunteers, and not all of them use Meetup.com. The best way to contact the walk leader is:</p>
<ul>
<li>The Rambler's website (<a href="{ramblers_contact_url}">{ramblers_contact_url}</a>)</li>
<li>Leaving a message on the event.</li>
</ul>
<p>It is unlikely the walk leader will read messages on the day, especially minutes before the event starts, so please try to contact them in advance with queries.</p>
<br />
<strong>🗒️ Who runs this group?</strong>
<p>
We are known as West Midlands Walking Group (WMWG), and are a Ramblers Association group, ran by volunteers. As well as walks almost every weekend, we regularly have social events and trips away multiple times per year. You can find more information on our website: <a href="https://www.wmwg.org.uk/">https://www.wmwg.org.uk/</a><br/>
You are allowed to attend 3 walks before you need to become a member of The Ramblers (around £35~ a year).<br/>
The Ramblers is a walking charity dedicated to removing barriers so everyone can enjoying walking in green spaces, as well as preserving and improving hundreds of thousands of miles of well-loved paths, tracks and trails across England, Scotland and Wales. Find out more on their website: <a href="https://www.ramblers.org.uk/">https://www.ramblers.org.uk/</a><br/><br/>
If you have any questions, please send us a message on Meetup.com.</p>
</div>
</div>
<p>Original JSON</p>
<pre>
{original_walk_json}
</pre>
</body>
</html>