103 lines
4.2 KiB
HTML
103 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{% if let Some(title) = page_title %}
|
|
<title>{{ title }} | SEPTASTIC</title>
|
|
{% else %}
|
|
<title>SEPTASTIC</title>
|
|
{% endif %}
|
|
{% if let Some(desc) = page_desc %}
|
|
<meta name="{{ desc }}" />
|
|
{% else %}
|
|
<meta name="SEPTASTIC" />
|
|
{% endif %}
|
|
<link rel="stylesheet" href="/assets/style.css">
|
|
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
</head>
|
|
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
|
|
<script>
|
|
window.onload = function () {
|
|
setTimeout(() => {
|
|
const perfData = window.performance.timing;
|
|
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
|
|
|
|
const loadTimeElement = document.getElementById('js_load_time');
|
|
loadTimeElement.textContent += ` ${pageLoadTime}ms`;
|
|
}, 0); // Minimal delay to wait for `loadEventEnd` to be populated
|
|
};
|
|
</script>
|
|
<noscript>
|
|
<style>
|
|
.js-only {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</noscript>
|
|
<style>
|
|
.silverliner-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 200px; /* Fixed height matching the viewBox */
|
|
}
|
|
</style>
|
|
<body>
|
|
{% if widescreen %}
|
|
<div class="body">
|
|
{% else %}
|
|
<div class="body body-small">
|
|
{% endif %}
|
|
<div style="background-color: #ff0000;
|
|
color: #ffffff;
|
|
font-size: .7em;
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px">This website is not run by SEPTA. Data may be inaccurate.</div>
|
|
<nav>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<div>
|
|
<a class="nav-link" href="/">[ Home ]</a>
|
|
<a class="nav-link" href="/routes">[ Routes ]</a>
|
|
<a class="nav-link" href="/stops">[ Stops ]</a>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</nav>
|
|
<hr />
|
|
{{ content|safe }}
|
|
<footer>
|
|
<hr />
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<div>
|
|
<p style="margin-bottom: 0px; margin-top:0px;">
|
|
<b>SEPTASTIC!</b>
|
|
</p>
|
|
<p style="margin-bottom: 0px;margin-top: 0px;">
|
|
<small>Copyright © <a href="https://nickorlow.com">Nicholas Orlowsky</a> 2025</small>
|
|
</p>
|
|
{% if let Some(load_time) = load_time_ms %}
|
|
<p style="marin-top: 5px; color: #555555;">
|
|
<small><i>Data loaded in {{ *load_time | format_load_time }}</i></small>
|
|
</p>
|
|
{% endif %}
|
|
<p class="js-only" style="marin-top: 5px; color: #555555;">
|
|
<small><i id="js_load_time">Total load time</i></small>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
{% if widescreen %}
|
|
<a href="?widescreen=false"><small>[ disable widescreen ]</small></a>
|
|
{% else %}
|
|
<a href="?widescreen=true"><small>[ enable widescreen ]</small></a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<noscript>
|
|
<p style="margin-top: 10px;">
|
|
<small>[!] You do not have JavaScript enabled. Many features will be missing/broken!</small>
|
|
</p>
|
|
</noscript>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|