Skip to content

Commit c906dd1

Browse files
mcguinlumcguinlu
committed
Changes
1 parent 32c74c6 commit c906dd1

3 files changed

Lines changed: 150 additions & 39 deletions

File tree

‎dartDown.css‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ body {
99
font-size: 20em;
1010
letter-spacing: 0.02em;
1111
margin: 0;
12-
line-height: 0.9em;
12+
line-height: 0.8em;
1313
font-weight: bold;
1414
}
1515

@@ -23,24 +23,46 @@ body {
2323
color: #d2d469;
2424
}
2525

26-
.malahide, .greystones {
26+
.howth-title, .bray-title {
27+
color: #d2d469;
28+
font-size: 0.25em;
29+
opacity: 0;
30+
line-height: 0.25em;
31+
transition: opacity 0.1s ease;
32+
}
33+
34+
.malahide-title, .greystones-title {
2735
color: #4c6a44;
36+
font-size: 0.25em;
37+
opacity: 0;
38+
line-height: 0.25em;
39+
transition: opacity 0.1s ease;
2840
}
2941

30-
.red {
31-
color: #d00f0f;
42+
.malahide, .greystones {
43+
color: #4c6a44;
3244
}
3345

34-
.green {
35-
color: #2d8d13;
46+
.line-container {
47+
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
cursor: default;
3651
}
3752

38-
.blue {
39-
color: #3e60f5;
53+
.titles {
54+
display: flex;
55+
gap: 1em;
56+
height: 0.25em;
57+
pointer-events: none;
4058
}
4159

42-
.white {
43-
color: #fff;
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 {
65+
opacity: 1;
4466
}
4567

4668
#lines {
@@ -59,16 +81,16 @@ body {
5981

6082
#disconnected{
6183
display: none;
84+
color: white;
85+
font-size: 0.25em;
6286
justify-content: center;
63-
height: 100%;
64-
}
65-
66-
#disconnected img {
67-
width: 50%;
87+
height: 10%;
6888
}
6989

7090
#no-trains {
7191
display: none;
7292
color: white;
93+
font-size: 0.25em;
94+
color: white;
7395
text-align: center;
7496
}

‎dartDown.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,14 @@ async function dartDown() {
4141

4242
// Filter and process estimates
4343
const estimates = estimatesForStation
44-
.filter((estimate) => parseInt(estimate.Duein) >= MINUTE_CUTOFF) // Keep trains that are due in less than the cutoff
45-
.filter((estimate) => estimate.Traintype === 'DART') // Keep only DART trains
46-
.map((estimate) => {
47-
estimate.Duein = estimate.Duein === 'Leaving' ? '00' : estimate.Duein;
48-
estimate.Duein = estimate.Duein.length < 2 ? '0' + estimate.Duein : estimate.Duein;
49-
return estimate;
50-
})
51-
.sort((a, b) => parseInt(a.Duein) - parseInt(b.Duein));
44+
.map((estimate) => {
45+
estimate.Duein = estimate.Duein === 'Leaving' ? '00' : estimate.Duein;
46+
estimate.Duein = estimate.Duein.length < 2 ? '0' + estimate.Duein : estimate.Duein;
47+
return estimate;
48+
})
49+
.filter((estimate) => parseInt(estimate.Duein) >= MINUTE_CUTOFF) // Keep trains that are due in less than the cutoff
50+
.filter((estimate) => estimate.Traintype === 'DART10') // Keep only DART trains
51+
.sort((a, b) => parseInt(a.Duein) - parseInt(b.Duein));
5252

5353
// Hide the error state
5454
document.getElementById('disconnected').style.display = 'none';
@@ -88,11 +88,10 @@ function displayErrorState(error) {
8888

8989
// If API is showing no trains, say that
9090
// Otherwise, show disconnected symbol on error
91-
if (trains_available) {
92-
document.getElementById('disconnected').style.display = 'flex';
91+
if (!window.navigator.onLine) {
92+
document.getElementById('disconnected').style.display = 'inline';
9393
} else {
94-
document.getElementById('no-trains').style.display = 'flex';
95-
document.getElementById('no-trains').style.fontSize = `${fontWidth}vw`;
94+
document.getElementById('no-trains').style.display = 'inline';
9695
}
9796
}
9897

‎index.html‎

Lines changed: 102 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,115 @@
11
<html>
22

33
<head>
4-
<title>dartDown</title>
5-
<meta name="twitter:card" content="summary_large_image" />
6-
<meta name="twitter:site" content="https://github.com/mcguinlu/dartDown" />
7-
<meta name="twitter:title" content="dartDown" />
8-
<meta name="twitter:description" content="Aesthetically pleasing display for DART train departure times" />
9-
<meta name="twitter:image"
10-
content="https://raw.githubusercontent.com/mcguinlu/dartDown/master/screenshots/dartDown.jpg" />
4+
<!-- Basic Meta Tags -->
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="dartDown: An aesthetically pleasing DART departure board for home display. Shows real-time northbound and southbound train times with color-coded destinations. Customizable station selection, display limits, and time cutoffs.">
8+
<meta name="keywords" content="DART, Irish Rail, departure board, home display, Grand Canal Dock, Malahide, Howth, Greystones, Bray, real-time trains, Dublin transport, aesthetic transit display">
9+
<meta name="author" content="dartDown">
10+
11+
<!-- Open Graph Meta Tags for Social Media -->
12+
<meta property="og:title" content="dartDown - Aesthetic DART Departure Display">
13+
<meta property="og:description" content="Beautiful, customizable DART departure board showing real-time trains. Color-coded by destination distance, perfect for home display. Supports all DART stations with customizable views.">
14+
<meta property="og:type" content="website">
15+
<meta property="og:site_name" content="dartDown">
16+
<meta property="og:image" content="https://raw.githubusercontent.com/mcguinlu/dartDown/master/screenshots/dartDown.jpg">
17+
<meta property="og:image:alt" content="dartDown DART departure board display showing train times">
18+
<meta property="og:image:type" content="image/jpeg">
19+
<meta property="og:url" content="https://mcguinlu.github.io/dartDown/">
20+
21+
<!-- Twitter Card Meta Tags -->
22+
<meta name="twitter:card" content="summary_large_image">
23+
<meta name="twitter:title" content="dartDown - Aesthetic DART Departure Display">
24+
<meta name="twitter:description" content="Beautiful DART departure board for your home. Shows north/southbound trains with color-coded destinations. Customizable station selection and display options.">
25+
<meta name="twitter:image" content="https://raw.githubusercontent.com/mcguinlu/dartDown/master/screenshots/dartDown.jpg">
26+
<meta name="twitter:image:alt" content="dartDown DART departure board display showing train times">
27+
28+
<!-- Additional SEO Meta Tags -->
29+
<meta name="robots" content="index, follow">
30+
<meta http-equiv="refresh" content="180">
31+
<meta name="language" content="English">
32+
<meta name="revisit-after" content="1 day">
33+
<meta name="application-name" content="dartDown">
34+
35+
<!-- Schema.org Markup for Rich Snippets -->
36+
<script type="application/ld+json">
37+
{
38+
"@context": "https://schema.org",
39+
"@type": "WebApplication",
40+
"name": "dartDown",
41+
"description": "An aesthetically pleasing display of DART train departures, designed for home use. Features color-coded destinations and customizable views.",
42+
"applicationCategory": "Transportation Service",
43+
"operatingSystem": "Any",
44+
"image": "https://raw.githubusercontent.com/mcguinlu/dartDown/master/screenshots/dartDown.jpg",
45+
"screenshot": "https://raw.githubusercontent.com/mcguinlu/dartDown/master/screenshots/dartDown.jpg",
46+
"offers": {
47+
"@type": "Offer",
48+
"price": "0",
49+
"priceCurrency": "EUR"
50+
},
51+
"featureList": [
52+
"Real-time DART departure times",
53+
"Color-coded destination displays",
54+
"Customizable station selection",
55+
"Adjustable number of displayed trains",
56+
"Configurable minimum departure time cutoff",
57+
"North and South-bound train separation",
58+
"URL parameter customization"
59+
],
60+
"url": "https://mcguinlu.github.io/dartDown/",
61+
"sameAs": "https://mcguinlu.github.io/dartDown/",
62+
"parameters": [
63+
{
64+
"@type": "PropertyValue",
65+
"name": "station",
66+
"value": "Station code (e.g., gcdk for Grand Canal Dock)"
67+
},
68+
{
69+
"@type": "PropertyValue",
70+
"name": "limit",
71+
"value": "Number of trains per direction (default: 3)"
72+
},
73+
{
74+
"@type": "PropertyValue",
75+
"name": "minute_cutoff",
76+
"value": "Minimum minutes until departure (default: 3)"
77+
}
78+
]
79+
}
80+
</script>
81+
82+
<!-- Canonical URL -->
83+
<link rel="canonical" href="https://mcguinlu.github.io/dartDown/">
84+
85+
<!-- Additional Meta Tags for Features -->
86+
<meta name="customization" content="station=gcdk&limit=5&minute_cutoff=2">
87+
<meta name="coverage" content="Dublin DART Line: Malahide, Howth, Bray, Greystones">
88+
<meta name="format-detection" content="telephone=no">
1189
</head>
1290

1391
<body>
1492
<script src="dartDown.js" type="text/javascript"></script>
1593
<link rel="stylesheet" href="dartDown.css" />
1694
<div id="lines">
17-
<div id="no-trains" class="line">No trains</div>
18-
<div id="northbound" class="line"></div>
19-
<div id="southbound" class="line"></div>
20-
<div id="disconnected" class="line">
21-
<img src="offline.svg" />
95+
<div class="line-container">
96+
<div class="titles">
97+
<span class="howth-title">Howth</span>
98+
<span class="malahide-title">Malahide</span>
99+
</div>
100+
<div id="northbound" class="line"></div>
101+
</div>
102+
103+
<div class="line-container">
104+
<div id="southbound" class="line"></div>
105+
<div class="titles">
106+
<span class="bray-title">Bray</span>
107+
<span class="greystones-title">Greystones</span>
108+
</div>
22109
</div>
110+
111+
<div id="disconnected" class="line">Disconnected</div>
112+
<div id="no-trains" class="line">No trains</div>
23113
</div>
24114
</body>
25115

0 commit comments

Comments
 (0)