Skip to content

Commit e143bef

Browse files
mcguinlumcguinlu
committed
Final version plus builder
1 parent c906dd1 commit e143bef

3 files changed

Lines changed: 233 additions & 13 deletions

File tree

‎builder.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>dartDown Query Builder</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
10+
margin: 0;
11+
padding: 20px;
12+
line-height: 1.6;
13+
}
14+
.container {
15+
display: flex;
16+
gap: 20px;
17+
max-width: 1200px;
18+
margin: 0 auto;
19+
}
20+
.left-column {
21+
flex: 1;
22+
max-width: 500px;
23+
}
24+
.right-column {
25+
flex: 1;
26+
position: sticky;
27+
top: 20px;
28+
padding-left: 30px;
29+
height: 75vh;
30+
min-width: 400px;
31+
}
32+
.form-group {
33+
margin-bottom: 20px;
34+
}
35+
label {
36+
display: block;
37+
font-weight: bold;
38+
margin-bottom: 5px;
39+
}
40+
input, select {
41+
width: 100%;
42+
padding: 8px;
43+
border: 1px solid #ddd;
44+
border-radius: 4px;
45+
font-size: 16px;
46+
}
47+
.description {
48+
color: #666;
49+
font-size: 14px;
50+
margin-top: 5px;
51+
}
52+
.result {
53+
margin-top: 30px;
54+
padding: 15px;
55+
background: #f5f5f5;
56+
border-radius: 4px;
57+
}
58+
.preview {
59+
height: 100%;
60+
padding: 15px;
61+
border: 1px solid #ddd;
62+
border-radius: 4px;
63+
background: #f5f5f5;
64+
}
65+
h1 {
66+
color: #333;
67+
margin-bottom: 30px;
68+
}
69+
#generatedUrl {
70+
word-break: break-all;
71+
}
72+
button {
73+
background: #4CAF50;
74+
color: white;
75+
padding: 10px 20px;
76+
border: none;
77+
border-radius: 4px;
78+
cursor: pointer;
79+
font-size: 16px;
80+
}
81+
button:hover {
82+
background: #45a049;
83+
}
84+
#preview {
85+
width: 100%;
86+
height: calc(100% - 30px);
87+
border: none;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<div class="container">
93+
<div class="left-column">
94+
<h1>dartDown Customiser</h1>
95+
96+
<div class="form-group">
97+
<label for="station">Station Code:</label>
98+
<select id="station">
99+
<option value="mhide">Malahide</option>
100+
<option value="ptown">Portmarnock</option>
101+
<option value="clgty">Clongriffin</option>
102+
<option value="hwthj">Howth Junction</option>
103+
<option value="howth">Howth</option>
104+
<option value="suttn">Sutton</option>
105+
<option value="rahny">Raheny</option>
106+
<option value="skill">Kilbarrack</option>
107+
<option value="htown">Harmonstown</option>
108+
<option value="killr">Killester</option>
109+
<option value="ctarf">Clontarf Road</option>
110+
<option value="cpoint">Connolly</option>
111+
<option value="tara">Tara Street</option>
112+
<option value="pboro">Pearse</option>
113+
<option value="gcdk">Grand Canal Dock</option>
114+
<option value="ldwne">Lansdowne Road</option>
115+
<option value="shill">Sandymount</option>
116+
<option value="sidny">Sydney Parade</option>
117+
<option value="btstn">Booterstown</option>
118+
<option value="brock">Blackrock</option>
119+
<option value="seapt">Seapoint</option>
120+
<option value="salty">Salthill & Monkstown</option>
121+
<option value="dalkm">Dalkey</option>
122+
<option value="gford">Glenageary</option>
123+
<option value="skill">Killiney</option>
124+
<option value="shane">Shankill</option>
125+
<option value="bray">Bray</option>
126+
<option value="grey">Greystones</option>
127+
</select>
128+
<div class="description">Select your DART station of origin</div>
129+
</div>
130+
131+
<div class="form-group">
132+
<label for="limit">Number of Trains:</label>
133+
<input type="number" id="limit" value="3" min="1" max="10">
134+
<div class="description">Number of trains to display in each direction (default: 3)</div>
135+
</div>
136+
137+
<div class="form-group">
138+
<label for="cutoff">Minute Cutoff:</label>
139+
<input type="number" id="cutoff" value="3" min="0" max="60">
140+
<div class="description">Minimum minutes until departure - trains due sooner than this won't be shown (default: 3)</div>
141+
</div>
142+
143+
<div class="form-group">
144+
<label for="refresh">Refresh Interval (seconds):</label>
145+
<input type="number" id="refresh" value="180" min="30" max="600">
146+
<div class="description">How often to update the display in seconds (default: 180)</div>
147+
</div>
148+
149+
<button onclick="generateUrl()">Update URL</button>
150+
151+
<div class="result">
152+
<div>
153+
<a href="#" id="generatedUrl" target="_blank"></a>
154+
</div>
155+
</div>
156+
</div>
157+
158+
<div class="right-column">
159+
<div class="preview">
160+
<strong>Preview:</strong>
161+
<iframe id="preview"></iframe>
162+
</div>
163+
</div>
164+
</div>
165+
166+
<script>
167+
function generateUrl() {
168+
const station = document.getElementById('station').value;
169+
const limit = document.getElementById('limit').value;
170+
const cutoff = document.getElementById('cutoff').value;
171+
const refresh = document.getElementById('refresh').value;
172+
173+
const baseUrl = 'https://mcguinlu.github.io/dartDown';
174+
const params = new URLSearchParams();
175+
176+
if (station) params.append('station', station);
177+
if (limit) params.append('limit', limit);
178+
if (cutoff) params.append('minute_cutoff', cutoff);
179+
if (refresh) params.append('refresh', refresh);
180+
181+
const finalUrl = `${baseUrl}?${params.toString()}`;
182+
183+
const urlElement = document.getElementById('generatedUrl');
184+
urlElement.href = finalUrl;
185+
urlElement.textContent = finalUrl;
186+
document.getElementById('preview').src = finalUrl;
187+
}
188+
189+
// Generate URL on page load
190+
generateUrl();
191+
</script>
192+
</body>
193+
</html>

‎dartDown.css‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ body {
1717
color: #fff;
1818
margin-right: 0.1em;
1919
margin-left: 0.1em;
20+
-webkit-user-select: none; /* Safari */
21+
-moz-user-select: none; /* Firefox */
22+
-ms-user-select: none; /* IE10+/Edge */
23+
user-select: none; /* Standard */
2024
}
2125

2226
.howth, .bray {
@@ -27,16 +31,23 @@ body {
2731
color: #d2d469;
2832
font-size: 0.25em;
2933
opacity: 0;
30-
line-height: 0.25em;
31-
transition: opacity 0.1s ease;
34+
transition: opacity 0.5s ease;
35+
-webkit-user-select: none; /* Safari */
36+
-moz-user-select: none; /* Firefox */
37+
-ms-user-select: none; /* IE10+/Edge */
38+
user-select: none; /* Standard */
3239
}
3340

3441
.malahide-title, .greystones-title {
3542
color: #4c6a44;
3643
font-size: 0.25em;
3744
opacity: 0;
38-
line-height: 0.25em;
39-
transition: opacity 0.1s ease;
45+
46+
transition: opacity 0.5s ease;
47+
-webkit-user-select: none; /* Safari */
48+
-moz-user-select: none; /* Firefox */
49+
-ms-user-select: none; /* IE10+/Edge */
50+
user-select: none; /* Standard */
4051
}
4152

4253
.malahide, .greystones {
@@ -47,21 +58,19 @@ body {
4758
display: flex;
4859
flex-direction: column;
4960
align-items: center;
50-
cursor: default;
61+
5162
}
5263

5364
.titles {
5465
display: flex;
55-
gap: 1em;
56-
height: 0.25em;
57-
pointer-events: none;
66+
gap: 0.35em;
67+
line-height: 0.28em;
5868
}
5969

60-
61-
.line-container:hover .howth-title,
62-
.line-container:hover .bray-title,
63-
.line-container:hover .malahide-title,
64-
.line-container:hover .greystones-title {
70+
.show-titles .howth-title,
71+
.show-titles .bray-title,
72+
.show-titles .malahide-title,
73+
.show-titles .greystones-title {
6574
opacity: 1;
6675
}
6776

‎dartDown.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,24 @@ const UPDATE_MS = parseInt(urlParams.get('refresh')) * 1000 || 180000;
1414
const fontWidth = 100 / (MAX_TRAINS_PER_DIRECTION * 1.5);
1515
document.body.style.fontSize = `${fontWidth}vw`;
1616

17+
document.addEventListener('DOMContentLoaded', () => {
18+
// Add click handler to both line containers
19+
const containers = document.querySelectorAll('.line-container');
20+
containers.forEach(container => {
21+
container.addEventListener('click', () => {
22+
// Toggle show-titles class on all containers
23+
const shouldShow = !container.classList.contains('show-titles');
24+
containers.forEach(c => {
25+
if (shouldShow) {
26+
c.classList.add('show-titles');
27+
} else {
28+
c.classList.remove('show-titles');
29+
}
30+
});
31+
});
32+
});
33+
});
34+
1735
async function dartDown() {
1836
console.log('dartDown');
1937

0 commit comments

Comments
 (0)