Spaces:

BruceBanners
/

sk-yen-split-flapper-3000

Running

App Files Files Community

BruceBanners commited on Oct 12, 2025

Commit

94a1c7e

verified ·

1 Parent(s): 7767bb2

Make my display more like a slat flip board with the correcct animation. Think of a retro style split flap board in a train station or such,

Browse files

<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skøyen Stasjon – Avganger per retning</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
body { font-family: 'JetBrains Mono', monospace; background: #111; color: #fff; min-height: 100vh; overflow-x: hidden; }
.split-flap{ background:#1a1a1a; color:#ffcc00; border:1px solid #333; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; box-shadow:0 1px 2px rgba(0,0,0,.5); overflow:hidden }
.retro-border{ border:4px solid #444; border-radius:8px; box-shadow: inset 0 0 10px #000, 0 0 20px rgba(0,0,0,.5) }
.board-grid{ min-width:800px }
.badge{ font-size:.65rem; padding:.15rem .35rem; border:1px solid #555; border-radius:.25rem; background:#1b1b1b; color:#bbb }
</style>
</head>
<body class="flex flex-col items-center justify-center p-4">
<div class="w-full max-w-7xl mx-auto">
<div class="mb-3 flex items-center justify-between">
<h1 class="text-3xl md:text-4xl font-bold text-yellow-400">SKØYEN STASJON</h1>
<div id="dbg" class="hidden md:flex items-center gap-2 text-xs text-gray-300"></div>
</div>

<div class="mb-4 flex flex-col items-center text-orange-400">
<div class="flex items-center gap-2">
<i data-feather="clock" class="w-5 h-5"></i>
<span id="current-time" class="text-lg font-mono">00:00:00</span>
</div>
<div class="text-xs text-gray-300"><span id="current-date"> </span></div>
</div>

<div class="w-full max-w-7xl mx-auto mt-2 mb-4">
<div class="flex flex-wrap items-end gap-3 text-sm">
<label class="flex flex-col">
<span class="mb-1 text-gray-300">Linjer</span>
<input id="lines-input" class="px-2 py-1 rounded bg-[#1b1b1b] border border-[#444] text-gray-100" placeholder="20,21,31,L1" />
</label>
<label class="flex flex-col">
<span class="mb-1 text-gray-300">Antall per retning</span>
<select id="perline-select" class="px-2 py-1 rounded bg-[#1b1b1b] border border-[#444] text-gray-100">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</label>
<button id="apply-btn" class="px-3 py-1 rounded bg-yellow-500 text-black font-bold">Oppdater</button>
</div>
</div>

<div class="retro-border bg-[#222] p-6 rounded-lg">
<div class="text-center text-yellow-400 font-bold text-lg mb-2">NESTE AVGANGER</div>
<div class="board-grid grid grid-cols-12 gap-2 mb-4 text-center text-yellow-400 font-bold text-sm">
<div class="col-span-1">TYPE</div>
<div class="col-span-2">TID</div>
<div class="col-span-2">LINJE</div>
<div class="col-span-4">DESTINASJON</div>
<div class="col-span-1">PL</div>
<div class="col-span-2">STATUS</div>
</div>
<div id="departures-container"></div>
</div>
</div>

<script type="module">
feather.replace();

class SplitFlap { constructor(el,val){ this.el=el; this.val=val; this.el.innerHTML=`<div>${val}</div>` } setValue(v){ if(v!==this.val){ this.val=v; this.el.innerHTML=`<div>${v}</div>` } } }
const splitFlapDisplays={};
function createSplitFlapDisplay(id,val,len){ const c=document.createElement('div'); c.className='flex'; for(let i=0;i<len;i++){ const ch=val[i]||' '; const d=document.createElement('div'); d.className='split-flap w-6 h-8 md:w-8 md:h-10 mx-0.5 text-lg md:text-xl'; c.appendChild(d); splitFlapDisplays[`${id}_${i}`]=new SplitFlap(d,ch) } return c }
function updateSplitFlapDisplay(id,val,len){ const p=(val||'').padEnd(len,' '); for(let i=0;i<len;i++){ splitFlapDisplays[`${id}_${i}`]?.setValue(p[i]) } }

const SETTINGS = {
clientName: 'echo-skoyen-board/1.3',
wantedLines: ['20','21','31','L1'],
perLineCount: 2,
stopQueryTerms: ['Skøyen', 'Skoyen', 'Skøyen stasjon', 'Skoyen stasjon'],
knownStopIds: ['NSR:StopPlace:59651','NSR:StopPlace:152','NSR:StopPlace:59747','NSR:StopPlace:58287']
};

function parsePlatform(quayName){ if(!quayName) return ''; const m=String(quayName).match(/(\d+|[A-Z])$/i); return m?m[1]:String(quayName).slice(-1); }
function dbgSet(pairs){ const el=document.getElementById('dbg'); if(!el) return; el.innerHTML=pairs.filter(Boolean).map(([k,v])=>`<span class="badge">${k}: ${v}</span>`).join(' '); el.classList.remove('hidden'); }
function normDest(s){ return String(s||'').trim().toUpperCase().replace(/\s+/g,' '); }

async function geocodeStopPlace(term){
const url=`https://api.entur.io/geocoder/v1/autocomplete?text=${encodeURIComponent(term)}&size=10&lang=no`;
const res=await fetch(url,{ headers:{ 'ET-Client-Name': SETTINGS.clientName }});
if(!res.ok) return null;
const js=await res.json();
const features=Array.isArray(js.features)?js.features:[];
const hit=features.find(f=>/StopPlace/.test(f?.properties?.id||'') && /sk[øo]yen/i.test(f?.properties?.name||''));
return hit?hit.properties.id:null;
}

async function resolveStopPlaceId(){
for(const id of SETTINGS.knownStopIds){ if(id){ const ok=await probeStopPlace(id); if(ok) return id; } }
const cached=localStorage.getItem('skoyen_stop_id'); if(cached){ const ok=await probeStopPlace(cached); if(ok) return cached; }
for(const term of SETTINGS.stopQueryTerms){ const id=await geocodeStopPlace(term); if(id){ const ok=await probeStopPlace(id); if(ok){ localStorage.setItem('skoyen_stop_id',id); return id; } } }
throw new Error('Fant ikke StopPlace for Skøyen');
}

async function probeStopPlace(id){
const query=`query($id:String!){ stopPlace(id:$id){ id } }`;
const res=await fetch('https://api.entur.io/journey-planner/v3/graphql',{ method:'POST', headers:{ 'Content-Type':'application/json','ET-Client-Name':SETTINGS.clientName }, body:JSON.stringify({ query, variables:{ id } }) });
if(!res.ok) return false; const js=await res.json(); return Boolean(js?.data?.stopPlace?.id);
}

async function fetchDepartures(stopId){
const query=`query($id:String!){
stopPlace(id:$id){
name
estimatedCalls(numberOfDepartures: 200, timeRange: 21600){
expectedDepartureTime
destinationDisplay{ frontText }
quay{ name publicCode }
serviceJourney{ journeyPattern{ line{ publicCode transportMode transportSubmode } } }
}
}
}`;
const res=await fetch('https://api.entur.io/journey-planner/v3/graphql',{ method:'POST', headers:{ 'Content-Type':'application/json','ET-Client-Name':SETTINGS.clientName }, body:JSON.stringify({ query, variables:{ id: stopId } }) });
if(!res.ok) throw new Error('Entur HTTP '+res.status);
const js=await res.json();
const calls=js?.data?.stopPlace?.estimatedCalls||[];
const placeName=js?.data?.stopPlace?.name||'';

const wantedArr=Array.from(new Set(SETTINGS.wantedLines.map(String)));
const items=calls
.map(c=>({
iso:c?.expectedDepartureTime,
line:c?.serviceJourney?.journeyPattern?.line?.publicCode||'',
mode:(c?.serviceJourney?.journeyPattern?.line?.transportMode||'').toLowerCase(),
submode:(c?.serviceJourney?.journeyPattern?.line?.transportSubmode||'').toLowerCase(),
destination:normDest(c?.destinationDisplay?.frontText||''),
platform:(c?.quay?.publicCode||parsePlatform(c?.quay?.name||'')),
status:'PÅ TID'
}))
.filter(x=>wantedArr.some(w=>String(x.line).startsWith(w)))
.sort((a,b)=>new Date(a.iso)-new Date(b.iso));

const perKey=new Map();
for(const it of items){
const base=wantedArr.find(w=>String(it.line).startsWith(w))||it.line;
const dirKey=it.destination;
const key=`${base}__${dirKey}`;
if(!perKey.has(key)) perKey.set(key,[]);
const arr=perKey.get(key);
if(arr.length < Number(SETTINGS.perLineCount)) arr.push(it);
}
const kept=Array.from(perKey.values()).flat();

const rows=kept
.sort((a,b)=>new Date(a.iso)-new Date(b.iso))
.map(x=>({
time:new Date(x.iso).toLocaleTimeString('no-NO',{ hour:'2-digit', minute:'2-digit' }),
line:x.line,
destination:x.destination,
platform:x.platform||'',
status:x.status,
mode:x.mode,
submode:x.submode
}));

dbgSet([["StopPlace", stopId],["Navn", placeName],["Linjer", wantedArr.join(',')],["Per retning", String(SETTINGS.perLineCount)],["Viser", String(rows.length)]]);
return rows;
}

function getModeIcon(mode, submode){
switch(mode){
case 'bus':
return '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="13" rx="2"/><path d="M3 11h18"/><circle cx="7" cy="19" r="1"/><circle cx="17" cy="19" r="1"/></svg>';
case 'rail':
case 'train':
return '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="3" width="14" height="12" rx="2"/><path d="M8 15l-3 6"/><path d="M16 15l3 6"/><path d="M5 10h14"/></svg>';
case 'metro':
return '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="12" rx="2"/><path d="M8 21l4-3 4 3"/></svg>';
case 'tram':
return '<svg xmlns="http://www.

Files changed (2) hide show

README.md +7 -4
index.html +546 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Sk Yen Split Flapper 3000
-emoji: 📈
 colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Skøyen Split-Flapper 3000 🚂
 colorFrom: red
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,547 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="no">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Skøyen Stasjon – Split-Flapp Avganger</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+    body {
+      font-family: 'JetBrains Mono', monospace;
+      background: #0a0a0a;
+      color: #ffcc00;
+      min-height: 100vh;
+      overflow-x: hidden;
+      background-image: radial-gradient(circle at 1% 1%, #222 0%, #0a0a0a 20%);
+    }
+    .retro-border {
+      border: 6px solid #333;
+      border-radius: 12px;
+      box-shadow:
+        inset 0 0 20px rgba(0,0,0,0.8),
+        0 0 30px rgba(0,0,0,0.6),
+        0 0 0 2px #555;
+      background: linear-gradient(145deg, #1a1a1a, #222);
+    }
+    .split-flap {
+      background: #111;
+      color: #ffcc00;
+      border: 2px solid #333;
+      border-radius: 4px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      box-shadow:
+        inset 0 -2px 4px rgba(0,0,0,0.5),
+        inset 0 2px 4px rgba(255,255,255,0.1),
+        0 2px 4px rgba(0,0,0,0.8);
+      overflow: hidden;
+      position: relative;
+      perspective: 200px;
+    }
+    .split-flap > div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      backface-visibility: hidden;
+      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    .split-flap.flipping > div:first-child {
+      transform: rotateX(-90deg);
+    }
+    .split-flap.flipping > div:last-child {
+      transform: rotateX(0deg);
+    }
+    .split-flap > div:last-child {
+      transform: rotateX(90deg);
+    }
+    .mechanical-sound {
+      position: fixed;
+      top: -100px;
+      left: -100px;
+      opacity: 0;
+      pointer-events: none;
+    }
+    .glow-text {
+      text-shadow: 0 0 10px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ff9900;
+    }
+    .flicker {
+      animation: flicker 2s infinite alternate;
+    }
+    @keyframes flicker {
+      0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+        opacity: 1;
+      }
+      20%, 24%, 55% {
+        opacity: 0.6;
+      }
+    }
+    .scan-line {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: linear-gradient(to bottom, rgba(255,204,0,0.3), transparent);
+      animation: scan 3s linear infinite;
+      pointer-events: none;
+      z-index: 9999;
+    }
+    @keyframes scan {
+      0% { top: 0; }
+      100% { top: 100vh; }
+    }
+  </style>
+</head>
+<body class="flex flex-col items-center justify-center p-4 pt-8">
+  <div class="scan-line"></div>
+  <audio id="flapSound" class="mechanical-sound" preload="auto">
+    <source src="https://assets.mixkit.co/sfx/preview/mixkit-mechanical-clock-pulse-1001.mp3" type="audio/mpeg">
+  </audio>
+  <div class="w-full max-w-6xl mx-auto">
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-4xl md:text-5xl font-bold glow-text flicker">SKØYEN STASJON</h1>
+      <div id="dbg" class="hidden md:flex items-center gap-2 text-xs text-gray-400"></div>
+    </div>
+    <div class="mb-6 flex flex-col items-center text-orange-300">
+      <div class="flex items-center gap-3">
+        <i data-feather="clock" class="w-6 h-6 text-yellow-400"></i>
+        <span id="current-time" class="text-xl md:text-2xl font-mono glow-text">00:00:00</span>
+      </div>
+      <div class="text-sm text-gray-400 mt-1"><span id="current-date">&nbsp;</span></div>
+    </div>
+    <div class="w-full max-w-6xl mx-auto mt-4 mb-6">
+      <div class="flex flex-wrap items-end gap-4 text-sm bg-[#1a1a1a] p-3 rounded-lg border border-[#333]">
+        <label class="flex flex-col">
+          <span class="mb-1 text-gray-300">Linjer</span>
+          <input id="lines-input" class="px-3 py-2 rounded bg-[#111] border border-[#444] text-gray-100 focus:border-yellow-500 focus:outline-none" placeholder="20,21,31,L1" />
+        </label>
+        <label class="flex flex-col">
+          <span class="mb-1 text-gray-300">Antall per retning</span>
+          <select id="perline-select" class="px-3 py-2 rounded bg-[#111] border border-[#444] text-gray-100 focus:border-yellow-500 focus:outline-none">
+            <option value="1">1</option>
+            <option value="2" selected>2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+          </select>
+        </label>
+        <button id="apply-btn" class="px-4 py-2 rounded bg-yellow-600 hover:bg-yellow-500 text-black font-bold transition-colors duration-200">
+          OPPDATER
+        </button>
+      </div>
+    </div>
+    <div class="retro-border p-6 md:p-8">
+      <div class="text-center text-yellow-400 font-bold text-xl mb-4 glow-text">NESTE AVGANGER</div>
+      <div class="grid grid-cols-12 gap-3 mb-5 text-center text-yellow-400 font-bold text-sm border-b border-[#444] pb-2">
+        <div class="col-span-1">TYPE</div>
+        <div class="col-span-2">TID</div>
+        <div class="col-span-2">LINJE</div>
+        <div class="col-span-4">DESTINASJON</div>
+        <div class="col-span-1">PL</div>
+        <div class="col-span-2">STATUS</div>
+      </div>
+      <div id="departures-container" class="min-h-[300px]"></div>
+    </div>
+  </div>
+  <script type="module">
+    feather.replace();
+    class SplitFlap {
+      constructor(el, initialVal) {
+        this.el = el;
+        this.val = initialVal;
+        this.el.innerHTML = `<div>${initialVal}</div><div>${initialVal}</div>`;
+        this.el.classList.add('split-flap');
+      }
+      setValue(newVal) {
+        if (newVal !== this.val) {
+          const oldVal = this.val;
+          this.val = newVal;
+          // Update the back face with new value
+          this.el.lastElementChild.textContent = newVal;
+          // Trigger flip animation
+          this.el.classList.add('flipping');
+          // Play sound effect
+          const sound = document.getElementById('flapSound');
+          if (sound) {
+            sound.currentTime = 0;
+            sound.play().catch(() => {});
+          }
+          // Reset animation after completion
+          setTimeout(() => {
+            this.el.classList.remove('flipping');
+            this.el.firstElementChild.textContent = newVal;
+          }, 300);
+        }
+      }
+    }
+    const splitFlapDisplays = {};
+    function createSplitFlapDisplay(id, val, len) {
+      const container = document.createElement('div');
+      container.className = 'flex';
+      for (let i = 0; i < len; i++) {
+        const char = val[i] || ' ';
+        const flap = document.createElement('div');
+        flap.className = 'split-flap w-7 h-10 md:w-8 md:h-12 mx-0.5 text-xl md:text-2xl';
+        container.appendChild(flap);
+        splitFlapDisplays[`${id}_${i}`] = new SplitFlap(flap, char);
+      }
+      return container;
+    }
+    function updateSplitFlapDisplay(id, val, len) {
+      const padded = (val || '').padEnd(len, ' ');
+      for (let i = 0; i < len; i++) {
+        if (splitFlapDisplays[`${id}_${i}`]) {
+          setTimeout(() => {
+            splitFlapDisplays[`${id}_${i}`].setValue(padded[i]);
+          }, 100 * i);
+        }
+      }
+    }
+    const SETTINGS = {
+      clientName: 'echo-skoyen-board/1.3',
+      wantedLines: ['20','21','31','L1'],
+      perLineCount: 2,
+      stopQueryTerms: ['Skøyen', 'Skoyen', 'Skøyen stasjon', 'Skoyen stasjon'],
+      knownStopIds: ['NSR:StopPlace:59651','NSR:StopPlace:152','NSR:StopPlace:59747','NSR:StopPlace:58287']
+    };
+    function parsePlatform(quayName) {
+      if (!quayName) return '';
+      const m = String(quayName).match(/(\d+|[A-Z])$/i);
+      return m ? m[1] : String(quayName).slice(-1);
+    }
+    function dbgSet(pairs) {
+      const el = document.getElementById('dbg');
+      if (!el) return;
+      el.innerHTML = pairs.filter(Boolean).map(([k, v]) => `<span class="badge bg-[#222] border-[#444] text-gray-300 px-2 py-1 rounded">${k}: ${v}</span>`).join(' ');
+      el.classList.remove('hidden');
+    }
+    function normDest(s) {
+      return String(s || '').trim().toUpperCase().replace(/\s+/g, ' ');
+    }
+    async function geocodeStopPlace(term) {
+      const url = `https://api.entur.io/geocoder/v1/autocomplete?text=${encodeURIComponent(term)}&size=10&lang=no`;
+      const res = await fetch(url, { headers: { 'ET-Client-Name': SETTINGS.clientName } });
+      if (!res.ok) return null;
+      const js = await res.json();
+      const features = Array.isArray(js.features) ? js.features : [];
+      const hit = features.find(f => /StopPlace/.test(f?.properties?.id || '') && /sk[øo]yen/i.test(f?.properties?.name || ''));
+      return hit ? hit.properties.id : null;
+    }
+    async function probeStopPlace(id) {
+      const query = `query($id:String!){ stopPlace(id:$id){ id } }`;
+      const res = await fetch('https://api.entur.io/journey-planner/v3/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'ET-Client-Name': SETTINGS.clientName },
+        body: JSON.stringify({ query, variables: { id } })
+      });
+      if (!res.ok) return false;
+      const js = await res.json();
+      return Boolean(js?.data?.stopPlace?.id);
+    }
+    async function resolveStopPlaceId() {
+      for (const id of SETTINGS.knownStopIds) {
+        if (id) {
+          const ok = await probeStopPlace(id);
+          if (ok) return id;
+        }
+      }
+      const cached = localStorage.getItem('skoyen_stop_id');
+      if (cached) {
+        const ok = await probeStopPlace(cached);
+        if (ok) return cached;
+      }
+      for (const term of SETTINGS.stopQueryTerms) {
+        const id = await geocodeStopPlace(term);
+        if (id) {
+          const ok = await probeStopPlace(id);
+          if (ok) {
+            localStorage.setItem('skoyen_stop_id', id);
+            return id;
+          }
+        }
+      }
+      throw new Error('Fant ikke StopPlace for Skøyen');
+    }
+    async function fetchDepartures(stopId) {
+      const query = `query($id:String!){
+        stopPlace(id:$id){
+          name
+          estimatedCalls(numberOfDepartures: 200, timeRange: 21600){
+            expectedDepartureTime
+            destinationDisplay{ frontText }
+            quay{ name publicCode }
+            serviceJourney{ journeyPattern{ line{ publicCode transportMode transportSubmode } } }
+          }
+        }
+      }`;
+      const res = await fetch('https://api.entur.io/journey-planner/v3/graphql', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'ET-Client-Name': SETTINGS.clientName },
+        body: JSON.stringify({ query, variables: { id: stopId } })
+      });
+      if (!res.ok) throw new Error('Entur HTTP ' + res.status);
+      const js = await res.json();
+      const calls = js?.data?.stopPlace?.estimatedCalls || [];
+      const placeName = js?.data?.stopPlace?.name || '';
+      const wantedArr = Array.from(new Set(SETTINGS.wantedLines.map(String)));
+      const items = calls
+        .map(c => ({
+          iso: c?.expectedDepartureTime,
+          line: c?.serviceJourney?.journeyPattern?.line?.publicCode || '',
+          mode: (c?.serviceJourney?.journeyPattern?.line?.transportMode || '').toLowerCase(),
+          submode: (c?.serviceJourney?.journeyPattern?.line?.transportSubmode || '').toLowerCase(),
+          destination: normDest(c?.destinationDisplay?.frontText || ''),
+          platform: (c?.quay?.publicCode || parsePlatform(c?.quay?.name || '')),
+          status: 'PÅ TID'
+        }))
+        .filter(x => wantedArr.some(w => String(x.line).startsWith(w)))
+        .sort((a, b) => new Date(a.iso) - new Date(b.iso));
+      const perKey = new Map();
+      for (const it of items) {
+        const base = wantedArr.find(w => String(it.line).startsWith(w)) || it.line;
+        const dirKey = it.destination;
+        const key = `${base}__${dirKey}`;
+        if (!perKey.has(key)) perKey.set(key, []);
+        const arr = perKey.get(key);
+        if (arr.length < Number(SETTINGS.perLineCount)) arr.push(it);
+      }
+      const kept = Array.from(perKey.values()).flat();
+      const rows = kept
+        .sort((a, b) => new Date(a.iso) - new Date(b.iso))
+        .map(x => ({
+          time: new Date(x.iso).toLocaleTimeString('no-NO', { hour: '2-digit', minute: '2-digit' }),
+          line: x.line,
+          destination: x.destination,
+          platform: x.platform || '',
+          status: x.status,
+          mode: x.mode,
+          submode: x.submode
+        }));
+      dbgSet([
+        ["StopPlace", stopId],
+        ["Navn", placeName],
+        ["Linjer", wantedArr.join(',')],
+        ["Per retning", String(SETTINGS.perLineCount)],
+        ["Viser", String(rows.length)]
+      ]);
+      return rows;
+    }
+    function getModeIcon(mode, submode) {
+      switch(mode) {
+        case 'bus':
+          return '<i data-feather="truck"></i>';
+        case 'rail':
+        case 'train':
+          return '<i data-feather="train"></i>';
+        case 'metro':
+          return '<i data-feather="layers"></i>';
+        case 'tram':
+          return '<i data-feather="grid"></i>';
+        case 'water':
+        case 'ferry':
+          return '<i data-feather="anchor"></i>';
+        default:
+          return '<i data-feather="circle"></i>';
+      }
+    }
+    function updateBoard(type, data) {
+      const container = document.getElementById(`${type}-container`) || document.getElementById('departures-container');
+      container.innerHTML = '';
+      if (!data || !data.length) {
+        const row = document.createElement('div');
+        row.className = 'w-full text-center text-sm text-red-300 py-4';
+        row.textContent = 'INGEN AVGANGER FOR VALGTE LINJER';
+        container.appendChild(row);
+        return;
+      }
+      data.forEach((item, index) => {
+        const row = document.createElement('div');
+        row.className = 'grid grid-cols-12 gap-3 mb-3 items-center text-center py-2 border-b border-[#333] last:border-b-0';
+        // Type icon
+        const iconCell = document.createElement('div');
+        iconCell.className = 'col-span-1 flex justify-center items-center';
+        iconCell.innerHTML = `<div class="split-flap w-7 h-10 md:w-8 md:h-12 mx-0.5 flex items-center justify-center">${getModeIcon(item.mode, item.submode)}</div>`;
+        row.appendChild(iconCell);
+        // Time
+        const timeCell = document.createElement('div');
+        timeCell.className = 'col-span-2 flex justify-center';
+        timeCell.appendChild(createSplitFlapDisplay(`${type}_t_${index}`, item.time, 5));
+        row.appendChild(timeCell);
+        // Line
+        const lineCell = document.createElement('div');
+        lineCell.className = 'col-span-2 flex justify-center';
+        lineCell.appendChild(createSplitFlapDisplay(`${type}_l_${index}`, item.line, 4));
+        row.appendChild(lineCell);
+        // Destination
+        const destCell = document.createElement('div');
+        destCell.className = 'col-span-4 flex justify-center';
+        destCell.appendChild(createSplitFlapDisplay(`${type}_d_${index}`, item.destination, 12));
+        row.appendChild(destCell);
+        // Platform
+        const platformCell = document.createElement('div');
+        platformCell.className = 'col-span-1 flex justify-center';
+        platformCell.appendChild(createSplitFlapDisplay(`${type}_p_${index}`, item.platform, 2));
+        row.appendChild(platformCell);
+        // Status
+        const statusCell = document.createElement('div');
+        statusCell.className = 'col-span-2 flex justify-center';
+        statusCell.appendChild(createSplitFlapDisplay(`${type}_s_${index}`, item.status, 6));
+        row.appendChild(statusCell);
+        container.appendChild(row);
+        // Animate the flaps with staggered timing
+        setTimeout(() => {
+          updateSplitFlapDisplay(`${type}_t_${index}`, item.time, 5);
+          updateSplitFlapDisplay(`${type}_l_${index}`, item.line, 4);
+          updateSplitFlapDisplay(`${type}_d_${index}`, item.destination, 12);
+          updateSplitFlapDisplay(`${type}_p_${index}`, item.platform, 2);
+          updateSplitFlapDisplay(`${type}_s_${index}`, item.status, 6);
+        }, 150 * index);
+      });
+      // Refresh feather icons after update
+      setTimeout(() => feather.replace(), 500);
+    }
+    function updateClock() {
+      const now = new Date();
+      const timeElement = document.getElementById('current-time');
+      const dateElement = document.getElementById('current-date');
+      if (timeElement) {
+        timeElement.textContent = now.toLocaleTimeString('no-NO');
+      }
+      if (dateElement) {
+        dateElement.textContent = now.toLocaleDateString('no-NO', {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric'
+        });
+      }
+    }
+    setInterval(updateClock, 1000);
+    updateClock();
+    (async function main() {
+      const linesInput = document.getElementById('lines-input');
+      const perLineSelect = document.getElementById('perline-select');
+      if (linesInput) linesInput.value = SETTINGS.wantedLines.join(',');
+      if (perLineSelect) perLineSelect.value = String(SETTINGS.perLineCount);
+      let stopId;
+      try {
+        stopId = await resolveStopPlaceId();
+        const rows = await fetchDepartures(stopId);
+        updateBoard('departures', rows);
+      } catch (e) {
+        console.error(e);
+        dbgSet([["Error", String(e.message || e)]]);
+        updateBoard('departures', []);
+      }
+      const applyButton = document.getElementById('apply-btn');
+      if (applyButton) {
+        applyButton.addEventListener('click', async () => {
+          const rawLines = (document.getElementById('lines-input') || {}).value;
+          const perLine = Number((document.getElementById('perline-select') || {}).value) || 2;
+          const linesArray = Array.from(
+            new Set(
+              String(rawLines || '').split(/[ ,;]+/).map(s => s.trim()).filter(Boolean)
+            )
+          );
+          SETTINGS.wantedLines = linesArray.length ? linesArray : [];
+          SETTINGS.perLineCount = perLine;
+          if (stopId) {
+            const rows = await fetchDepartures(stopId);
+            updateBoard('departures', rows);
+          }
+        });
+      }
+      // Auto-refresh every 30 seconds
+      setInterval(async () => {
+        try {
+          if (stopId) {
+            const rows = await fetchDepartures(stopId);
+            updateBoard('departures', rows);
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }, 30000);
+    })();
+  </script>
+</body>
 </html>