Add preferences and privacy policy
This commit is contained in:
@@ -20,7 +20,8 @@
|
||||
IconDialpad,
|
||||
IconSettings,
|
||||
IconHelp,
|
||||
IconDots
|
||||
IconDots,
|
||||
IconSpy,
|
||||
} from '@tabler/icons-svelte-runes';
|
||||
|
||||
onMount(async () => {
|
||||
@@ -47,13 +48,14 @@
|
||||
{ label: 'Home', path: '/', icon: IconHome },
|
||||
{ label: 'PIS', path: '/pis/', icon: IconDialpad },
|
||||
{ label: 'Options', path: '/preferences/', icon: IconSettings },
|
||||
{ label: 'About', path: '/about/', icon: IconHelp }
|
||||
{ label: 'About', path: '/about/', icon: IconHelp },
|
||||
{ label: 'Privacy Policy', path: '/privacy/', icon: IconSpy },
|
||||
];
|
||||
|
||||
let navWidth = $state(0);
|
||||
let menuOpen = $state(false);
|
||||
const ITEM_WIDTH = 70;
|
||||
const MORE_BUTTON_WIDTH = 70;
|
||||
const ITEM_WIDTH = 110;
|
||||
const MORE_BUTTON_WIDTH = 110;
|
||||
|
||||
const activePath = $derived(page.url?.pathname ?? '');
|
||||
|
||||
|
||||
54
src/routes/preferences/+page.svelte
Normal file
54
src/routes/preferences/+page.svelte
Normal file
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
|
||||
import Button from '$lib/components/ui/form-elements/Button.svelte';
|
||||
import Toggle from '$lib/components/ui/form-elements/Toggle.svelte';
|
||||
import { quickLinks } from '$lib/quick-links.svelte';
|
||||
import { prefs } from '$lib/preferences.svelte';
|
||||
</script>
|
||||
|
||||
<section class="page-body">
|
||||
<BaseCard header={'Display Settings'}>
|
||||
<section class="card-content">
|
||||
<Button onclick={() => quickLinks.reset()}>Reset QuickLinks</Button>
|
||||
<div class="toggle-container">
|
||||
<Toggle
|
||||
label={'Show stations near to you'}
|
||||
id={'toggle-nearby-stations'}
|
||||
checked={prefs.current.NearToMe}
|
||||
onchange={(checked) => prefs.toggleNearToMe(checked)}
|
||||
/>
|
||||
<Toggle
|
||||
label={'Show passsing trains on boards'}
|
||||
id={'toggle-passing-trains'}
|
||||
checked={prefs.current.ShowPassingTrains}
|
||||
onchange={(checked) => prefs.toggleShowPassingTrains(checked)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</BaseCard>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem 0 1rem 0;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
5
src/routes/preferences/+page.ts
Normal file
5
src/routes/preferences/+page.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export const load = () => {
|
||||
return {
|
||||
title: 'Preferences'
|
||||
};
|
||||
};
|
||||
218
src/routes/privacy/+page.svelte
Normal file
218
src/routes/privacy/+page.svelte
Normal file
@@ -0,0 +1,218 @@
|
||||
<script lang="ts">
|
||||
</script>
|
||||
|
||||
<section class="policy-block-container">
|
||||
<p class="policy-meta"><em>Last updated: May 2026</em></p>
|
||||
|
||||
<p class="policy-intro">
|
||||
The OwlBoard project is built to help you track trains, not track you. Here is exactly what data
|
||||
is used, how it is used, and why.
|
||||
</p>
|
||||
|
||||
<hr class="policy-divider" />
|
||||
|
||||
<section class="policy-section">
|
||||
<h3 class="section-heading">1. The Data Processed (And What Is Discarded)</h3>
|
||||
|
||||
<ul class="policy-list">
|
||||
<li class="list-item">
|
||||
<strong class="highlight-text">Email Addresses:</strong> During sign-up, an email address is
|
||||
requested solely to send a verification code. This needs to happen, as some data is
|
||||
restricted to rail staff only due to licensing restrictions.
|
||||
<strong
|
||||
>The moment the verification code is sent, the email address is permanently deleted
|
||||
from the system.</strong
|
||||
> It is not stored, it is not logged, and it cannot be looked up later.
|
||||
</li>
|
||||
<li class="list-item">
|
||||
<strong class="highlight-text">Platform Identity:</strong> Instead of an email, an account
|
||||
is identified by two things:
|
||||
<ol class="policy-nested-list">
|
||||
<li>
|
||||
A unique alphanumeric <strong class="code-text">"key"</strong> generated randomly for the
|
||||
device upon verification.
|
||||
</li>
|
||||
<li>The <strong class="code-text">domain portion</strong> of the registration email.</li>
|
||||
</ol>
|
||||
<blockquote class="policy-example">
|
||||
<strong>Example:</strong> If signing up as <code>user@owlboard.info</code>, the email is
|
||||
wiped, and the account identifier becomes <code>[Your-Secret-Key] @ owlboard.info</code>.
|
||||
This allows OwlBoard to manage access without knowing who you are.
|
||||
</blockquote>
|
||||
</li>
|
||||
<li class="list-item">
|
||||
<strong class="highlight-text">Fuzzy Location Data:</strong> If the "Near to Me" toggle is
|
||||
enabled, exact GPS coordinates are calculated, but never leave your device. Your device compresses the position
|
||||
into a <strong class="highlight-text">"fuzzy location block"</strong> (a geohash) roughly 1.2km
|
||||
by 0.6km in size before contacting the server to request nearby stations. OwlBoard only processes
|
||||
that neighborhood block—never an exact location.
|
||||
</li>
|
||||
<li class="list-item">
|
||||
<strong class="highlight-text">Server Logs & IP Addresses:</strong> Like any web application,
|
||||
self-hosted security tools and the Web Application Firewall (WAF) temporarily process network
|
||||
IP addresses. This is strictly for system health, infrastructure monitoring, and blocking malicious or
|
||||
automated attacks.
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<hr class="policy-divider" />
|
||||
|
||||
<section class="policy-section">
|
||||
<h3 class="section-heading">2. What Is Considered "Personal Data"?</h3>
|
||||
|
||||
<p class="policy-text">
|
||||
Under the GDPR, "Personal Data" is anything that can directly or indirectly pinpoint a living
|
||||
individual.
|
||||
</p>
|
||||
<p class="policy-text">
|
||||
Because email addresses are discarded instantly and location hardware telemetry is fuzzed
|
||||
directly on the device, <strong
|
||||
>station boards, preferences, and account keys are completely pseudonymized.</strong
|
||||
> However, because network IP addresses are technically classified as personal data under European
|
||||
law, transient security logs are treated with the highest level of guardrail protection.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<hr class="policy-divider" />
|
||||
|
||||
<section class="policy-section">
|
||||
<h3 class="section-heading">
|
||||
3. Subject Access Requests (SAR) & The Right to be Forgotten
|
||||
</h3>
|
||||
|
||||
<p class="policy-text">
|
||||
Absolute sovereignty over your digital footprint should be standard, without jumping through
|
||||
bureaucratic hoops. There is no need to send an email to exercise GDPR rights:
|
||||
</p>
|
||||
|
||||
<ul class="policy-list">
|
||||
<li class="list-item">
|
||||
<strong class="highlight-text">Instant SAR (Right of Access):</strong> The
|
||||
<strong>Account</strong> dashboard contains a dedicated section displaying
|
||||
every single line of data which can be identified with the account key block. It can be viewed or copied instantly.
|
||||
</li>
|
||||
<li class="list-item">
|
||||
<strong class="highlight-text">The Right to be Forgotten (Instant Erasure):</strong> A
|
||||
prominent <strong>"Delete Account"</strong> button is available on that same page. Clicking this
|
||||
instantly wipes the account key. You will be able to re-register at any time, and all of your preferences remain only on your device.
|
||||
</li>
|
||||
</ul>
|
||||
<p class="policy-text">
|
||||
While the pseudonymized settings left behind are not technically personal data once
|
||||
disconnected from an identity, the OwlBoard project operates on a simple philosophy.
|
||||
When the delete button is pressed, the data is erased.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<hr class="policy-divider" />
|
||||
|
||||
<section class="policy-section">
|
||||
<h3 class="section-heading">4. No Third-Party Conglomerates</h3>
|
||||
|
||||
<p class="policy-text">
|
||||
All data is hosted transparently on isolated, self-hosted server infrastructure in Somerset. OwlBoard does
|
||||
not use third-party analytics trackers, tracking cookies, or advertising networks.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.policy-block-container {
|
||||
margin: 1rem auto;
|
||||
width: 90%;
|
||||
max-width: 650px;
|
||||
font-family: 'URW Gothic', sans-serif;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.policy-block-container:last-child {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.policy-meta {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted, #64748b);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.policy-intro {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.policy-divider {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: var(--color-border, #e2e8f0);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
/* --- Section Blocks --- */
|
||||
.policy-section {
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.policy-text {
|
||||
line-height: 1.6;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* --- Lists & Typography Elements --- */
|
||||
.policy-list {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0 0 1.5rem 0;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.policy-nested-list {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.policy-nested-list li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.policy-example {
|
||||
background-color: var(--color-bg-light);
|
||||
border-left: 4px solid var(--color-accent);
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
font-style: normal;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.code-text,
|
||||
.policy-example code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.875rem;
|
||||
background-color: var(--color-accent);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
5
src/routes/privacy/+page.ts
Normal file
5
src/routes/privacy/+page.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export const load = () => {
|
||||
return {
|
||||
title: 'Privacy'
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user