-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (144 loc) · 5.81 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
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta charset="utf-8">
<script src="https://bonfiredog.co.uk/bots/js/vendor/jquery.min.js"></script>
<script src="https://bonfiredog.co.uk/bots/js/vendor/seedrandom.js"></script>
<script src="mods-eng-basic.js"></script>
<script src="tracery.js"></script>
<script src="placesgrammar.js"></script>
<title>County Nighthead | Redolence Survey Maps</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;0,700;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body>
<div id="mobilecover">
<span>❐<br/ >
This site doesn't work on mobile devices.<br/ >You'll have to find a bigger screen, or rotate your tablet into landscape mode.</span>
</div>
<div id="mapspace">
<div id="legendspace">
<div id="legendtitle">
<div id="logo">
<img src="legend/newlogo.png" id="oslogo" />
<span><strong>Redolence<br/>Survey</strong></span>
</div>
<div id="mapnumber">Subjunctive Series 151</div>
<div id="maptitle"><strong>County Nighthead</strong></div>
<div id="mapscale">1:25 000 scale</div>
</div>
<div id="legendinfo">
<div id="legendbox">
<h1>General Information</h1>
<span class="legendentry" style="font-size:0.8rem;">
<p>A mostly-dysfunctional English <a href="https://en.wikipedia.org/wiki/Toponymy">toponym</a> generator, built using <a href="http://tracery.io">Tracery</a>, <a href="https://jquery.com">jQuery</a> and a fingertip's grasp of phonology by <a href="http://robsherman.co.uk">Rob Sherman</a>.</p>
<p><strong>Find and tap the algorithm-generated placenames amongst the real ones, on the real map, below.</strong></p>
<div id="clicktext">0/4 Places Found</div>
</div>
<div id="legendbox">
<h1>Communications</h1>
<span class="legendlink" >
<img src="legend/icon.png" />
<span class="linktext"><a href="http://robsherman.co.uk">Rob's Website</a></span>
</span>
<span class="legendlink" >
<img src="legend/icon 2.png" />
<span class="linktext"><a href="http://bonfiredog.co.uk">Bonfire Dog Website</a></span>
</span>
<span class="legendlink">
<img src="legend/icon 3.png" />
<span class="linktext">
<a href="https://github.com/bonfiredog/english-placenames-bot">Github Repo</a></span>
</span>
<span class="legendlink">
<img src="legend/icon 4.png" />
<span class="linktext"><a href="mailto:rob@bonfiredog.co.uk">Email</a></span>
</span>
<span class="legendlink">
<img src="legend/icon 5.png" />
<span class="linktext"><a href="https://tracery.io/">Tracery Website</a></span>
</span>
</div>
<div id="legendbox">
<h1>Leisure Information</h1>
<span class="legendlink" >
<img src="legend/right1.png" />
<span class="linktext">Ornamental Szygzy</span>
</span>
<span class="legendlink" >
<img src="legend/right2.png" />
<span class="linktext">Sylvan Parking</span>
</span>
<span class="legendlink" >
<img src="legend/right3.png" />
<span class="linktext">Petrified (Other)</span>
</span>
<span class="legendlink" >
<img src="legend/right4.png" />
<span class="linktext">Inundations (Weekends Only)</span>
</span>
<span class="legendlink" >
<img src="legend/right5.png" />
<span class="linktext">Troubling Serpents</span>
</span>
</div>
<div id="legendbox">
<h1>Customer Information</h1>
<span class="legendentry" style="font-size:0.8rem;">Edition - B</span>
<span class="legendentry" style="font-size:0.8rem;">Revised 2022</span>
<span class="legendentry" style="font-size:0.8rem;">© Copyright <span id="year">1999</a></span></span>
<div id="refreshbutton"><span>↻</span> Get New Map</div>
<div id="cheatbox">Cheat Mode: Ctrl + A</div>
</div>
</div>
</div>
<div id="mainmapholder">
<div id="mapholder"><img id="mainmap" src="" /></div>
<!-- PLACENAMES -->
<div class="placename" id="1"><span></span></div>
<!-- ################# -->
<div class="placename" id="2"><span></span></div>
<!-- ################# -->
<div class="placename" id="3"><span></span>
</div>
<!-- ################# -->
<div class="placename" id="4"><span></span>
</div>
<div id="maploader"><span>Loading Map...</span></div>
<!-- Response Form -->
<div class="placenamepopup" id="pop">
<div class="cancelbutton">X</div>
<form name="submit-to-google-sheet">
<input name="placename" id="placenamerepo" placeholder="" readonly>
<p>
This name was generated by an algorithm that tries to replicate how English toponyms originate and change over time.
</p>
<p>All names have histories and stories behind them: even fake ones.</p>
<p>What do you think the story behind this place, and its name, might be? How did it come by it?</p>
<p>Write your answer in the box below, and click the button when you are finished.</p>
</p>
<textarea name="placenameetymology" id="etym" placeholder="Put your response here..."></textarea>
<div id="interact">
<div id="badgen">☠ Report Error</div>
<button type="submit" id="submitbutton">➔ Send</button>
</div>
</form>
</div>
<!-- ################# -->
</div>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbxhuHk9uyjBLLtMh2e6MAjN0lmn552XMHjsAk_3QhB9o7_0Uis/exec'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
</script>
<div id="apologia">Map images all © Crown Copyright. This website is intended as a non-commercial artwork, and as a tribute to the work of the OS. If somebody confuses this for a real OS product, I think we can agree that they aren't the ideal customer for something that requires very close reading. To that end, please kindly consider not suing me.</div>
<div id="arrow1">→</div>
<div id="arrow2">↓</div>
</body>
</html>