Initial commit
This commit is contained in:
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
11
src/app.html
Normal file
11
src/app.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
11
src/routes/+layout.svelte
Normal file
11
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
{@render children()}
|
||||
151
src/routes/+page.svelte
Normal file
151
src/routes/+page.svelte
Normal file
@@ -0,0 +1,151 @@
|
||||
<script lang="ts">
|
||||
import { vehicles, type VehicleData } from "./vehicles";
|
||||
let lengthVal: number = $state(0);
|
||||
let vehicleVal: number = $state(0);
|
||||
let vehicleId: string = $state(vehicles[0].id);
|
||||
let calcVal: string = $state("");
|
||||
let outputText: string = $state("");
|
||||
|
||||
function getVehicle(id: string): VehicleData {
|
||||
// dumbass javascript can't break out of a forEach loop so we need for-of here
|
||||
for (let v of vehicles) {
|
||||
if (v.id === id) {
|
||||
return v;
|
||||
}
|
||||
};
|
||||
return vehicles[0];
|
||||
}
|
||||
|
||||
function getVehicleAlt(id: string): string {
|
||||
let v = getVehicle(id);
|
||||
return `A ${v.name} ${v.type} photographed by ${v.imgCredit}.`
|
||||
}
|
||||
|
||||
function getPlural(type: string): string {
|
||||
return `${type}(${type == "bus" ? "e" : ""}s)`;
|
||||
}
|
||||
|
||||
function calcToVehicles() {
|
||||
let vehicle = getVehicle(vehicleId);
|
||||
calcVal = ((lengthVal * 1000) / vehicle.length).toFixed(2);
|
||||
outputText = `${lengthVal} metre(s) is equal to the length of ${calcVal} ${vehicle.name} ${getPlural(vehicle.type)}!`
|
||||
vehicleVal = Number(calcVal);
|
||||
}
|
||||
|
||||
function calcToLength() {
|
||||
let vehicle = getVehicle(vehicleId);
|
||||
calcVal = (vehicleVal * (vehicle.length / 1000)).toFixed(2);
|
||||
outputText = `${vehicleVal} ${vehicle.name} ${getPlural(vehicle.type)} is equal to the length of ${calcVal} metre(s)!`
|
||||
lengthVal = Number(calcVal);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- <link rel="icon" href="%sveltekit.assets%/favicon.webp" /> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</svelte:head>
|
||||
|
||||
<h1>bsag conv</h1>
|
||||
|
||||
<div style="width: 100%; background-color: aquamarine; height: 2px;"></div>
|
||||
<div class="split-container">
|
||||
<div class="length-input-container">
|
||||
<div class="half-split-container">
|
||||
<input bind:value={lengthVal}>
|
||||
<p>metre(s)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="button-container">
|
||||
<button onclick={() => calcToVehicles()}>→</button>
|
||||
<button onclick={() => calcToLength()}>←</button>
|
||||
</div>
|
||||
|
||||
<div class="vehicle-input-container">
|
||||
<select name="vehicle" id="vehicle" bind:value={vehicleId}>
|
||||
{#each vehicles as vehicle}
|
||||
<option value="{vehicle.id}">{vehicle.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
<div class="half-split-container">
|
||||
<input bind:value={vehicleVal}>
|
||||
<p>vehicle(s)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="img-container">
|
||||
<img src="{getVehicle(vehicleId).img}" alt="{getVehicleAlt(vehicleId)}">
|
||||
<p class="img-credit">image credit: {getVehicle(vehicleId).imgCredit}</p>
|
||||
</div>
|
||||
|
||||
<p>{outputText}</p>
|
||||
|
||||
<p class="credit-text">Unless credited to denizk0461 (me), all images courtesy of their respective photographers. Images and vehicle information sourced from <a href="https://wiki.bre-forum.de">wiki.bre-forum.de</a></p>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
max-width: 800px;
|
||||
interpolate-size: allow-sizes;
|
||||
}
|
||||
|
||||
.split-container {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr 3fr;
|
||||
gap: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.half-split-container {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
box-sizing: border-box;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.half-split-container * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.img-container {
|
||||
position: relative;
|
||||
max-width: 80%;
|
||||
height: 400px;
|
||||
margin: 12px auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.img-credit {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
padding: 4px 6px;
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.credit-text, .credit-text a {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.credit-text a {
|
||||
text-decoration: dashed 1px underline;
|
||||
}
|
||||
</style>
|
||||
222
src/routes/vehicles.ts
Normal file
222
src/routes/vehicles.ts
Normal file
@@ -0,0 +1,222 @@
|
||||
export interface VehicleData {
|
||||
id: string;
|
||||
name: string;
|
||||
|
||||
type: string;
|
||||
|
||||
// year the vehicle model went into service
|
||||
serviceStart: string;
|
||||
|
||||
// length in millimetres
|
||||
length: number;
|
||||
|
||||
img: string;
|
||||
imgCredit: string;
|
||||
}
|
||||
|
||||
export let vehicles: VehicleData[] = [
|
||||
// trams
|
||||
{
|
||||
id: "gt8n2",
|
||||
name: "Siemens Avenio / GT8N-2 'Nordlicht'",
|
||||
type: "tram",
|
||||
serviceStart: "2020",
|
||||
length: 36900,
|
||||
img: "/trams/gt8n-2.jpg",
|
||||
imgCredit: "Martin Kursawe",
|
||||
},
|
||||
{
|
||||
id: "gt8n1",
|
||||
name: "Bombardier Flexity Classic / GT8N-1",
|
||||
type: "tram",
|
||||
serviceStart: "2005",
|
||||
length: 35390,
|
||||
img: "/trams/gt8n-1.jpg",
|
||||
imgCredit: "denizk0461",
|
||||
},
|
||||
{
|
||||
id: "gt8n",
|
||||
name: "AEG/ADtranz GT8N",
|
||||
type: "tram",
|
||||
serviceStart: "1994",
|
||||
length: 35800,
|
||||
img: "/trams/gt8n.jpg",
|
||||
imgCredit: "Martin Kursawe",
|
||||
},
|
||||
{
|
||||
id: "gt6",
|
||||
name: "Wegmann GT6a-b",
|
||||
type: "tram",
|
||||
serviceStart: "1977",
|
||||
length: 25320,
|
||||
img: "/trams/gt6.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
{
|
||||
id: "gt4",
|
||||
name: "Hansa GT4 a-c",
|
||||
type: "tram",
|
||||
serviceStart: "1959",
|
||||
length: 16700,
|
||||
img: "/trams/gt4.jpg",
|
||||
imgCredit: "denizk0461",
|
||||
},
|
||||
{
|
||||
id: "gt3",
|
||||
name: "Hansa GT3",
|
||||
type: "tram",
|
||||
serviceStart: "1955",
|
||||
length: 16440,
|
||||
img: "/trams/gt3.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
// Mercedes buses
|
||||
{
|
||||
id: "ecitaro",
|
||||
name: "Mercedes-Benz eCitaro O 530 C2",
|
||||
type: "bus",
|
||||
serviceStart: "2022",
|
||||
length: 12135,
|
||||
img: "/solobuses/ecitaroc2.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
{
|
||||
id: "ecitarog",
|
||||
name: "Mercedes-Benz eCitaro O 530 G C2",
|
||||
type: "bus",
|
||||
serviceStart: "2025",
|
||||
length: 18125,
|
||||
img: "/artbuses/ecitarogc2.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
{
|
||||
id: "citaro",
|
||||
name: "Mercedes-Benz Citaro O 530 C2 (Hybrid)",
|
||||
type: "bus",
|
||||
serviceStart: "2020",
|
||||
length: 12135,
|
||||
img: "/solobuses/citaroc2.jpg",
|
||||
imgCredit: "Martin Kursawe",
|
||||
},
|
||||
{
|
||||
id: "citarog",
|
||||
name: "Mercedes-Benz Citaro O 530 G C2 (Hybrid)",
|
||||
type: "bus",
|
||||
serviceStart: "2013",
|
||||
length: 18125,
|
||||
img: "/artbuses/citarogc2.jpg",
|
||||
imgCredit: "Martin Kursawe",
|
||||
},
|
||||
{
|
||||
id: "o405g",
|
||||
name: "Mercedes-Benz O 405 GN2",
|
||||
type: "bus",
|
||||
serviceStart: "1997",
|
||||
length: 17900,
|
||||
img: "/artbuses/o405gn2.jpg",
|
||||
imgCredit: "Andreas Arfmann",
|
||||
},
|
||||
{
|
||||
id: "o405n",
|
||||
name: "Mercedes-Benz O 405 N",
|
||||
type: "bus",
|
||||
serviceStart: "1990",
|
||||
length: 11885,
|
||||
img: "/solobuses/o405n.jpg",
|
||||
imgCredit: "Andreas Arfmann",
|
||||
},
|
||||
{
|
||||
id: "o405n2",
|
||||
name: "Mercedes-Benz O 405 N2",
|
||||
type: "bus",
|
||||
serviceStart: "1994",
|
||||
length: 11910,
|
||||
img: "/solobuses/o405n2.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
// Irizar buses
|
||||
{
|
||||
id: "ie18",
|
||||
name: "Irizar iebus 18",
|
||||
type: "bus",
|
||||
serviceStart: "2025",
|
||||
length: 18100,
|
||||
img: "/artbuses/ie18.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
// MAN buses
|
||||
{
|
||||
id: "lion",
|
||||
name: "MAN Lion's City A37 NL 290",
|
||||
type: "bus",
|
||||
serviceStart: "2009",
|
||||
length: 11950,
|
||||
img: "/solobuses/mana37.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
{
|
||||
id: "liong",
|
||||
name: "MAN Lion's City GL A23 NG 320",
|
||||
type: "bus",
|
||||
serviceStart: "2009",
|
||||
length: 18750,
|
||||
img: "/artbuses/mana23.jpg",
|
||||
imgCredit: "Martin Kursawe",
|
||||
},
|
||||
// Solaris buses
|
||||
{
|
||||
id: "urb18",
|
||||
name: "Solaris Urbino 18",
|
||||
type: "bus",
|
||||
serviceStart: "2006",
|
||||
length: 18000,
|
||||
img: "/artbuses/urbino18.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
{
|
||||
id: "urb12",
|
||||
name: "Solaris Urbino 12",
|
||||
type: "bus",
|
||||
serviceStart: "2008",
|
||||
length: 12000,
|
||||
img: "/solobuses/urb12.jpg",
|
||||
imgCredit: "Martin Kursawe",
|
||||
},
|
||||
{
|
||||
id: "urb89",
|
||||
name: "Solaris Urbino 8.9 LE",
|
||||
type: "bus",
|
||||
serviceStart: "2021",
|
||||
length: 8950,
|
||||
img: "/solobuses/urb89.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
{
|
||||
id: "urb86",
|
||||
name: "Solaris Urbino 8.6",
|
||||
type: "bus",
|
||||
serviceStart: "2008",
|
||||
length: 8600,
|
||||
img: "/solobuses/urb86.JPG",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
// Neoplan buses
|
||||
{
|
||||
id: "neoplang",
|
||||
name: "Neoplan N 4021",
|
||||
type: "bus",
|
||||
serviceStart: "1988",
|
||||
length: 17500,
|
||||
img: "/artbuses/neoplan4021.jpg",
|
||||
imgCredit: "denizk0461",
|
||||
},
|
||||
{
|
||||
id: "neoplan",
|
||||
name: "Neoplan N 4016",
|
||||
type: "bus",
|
||||
serviceStart: "1990",
|
||||
length: 12000,
|
||||
img: "/solobuses/neoplan4016.jpg",
|
||||
imgCredit: "Ingo Teschke",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user