New 10-foot display option

.pugrc.js

@@ -5,21 +5,21 @@ module.exports = {
         app_name: "Fappen",
         manifest: require('./manifest.json'),
         navigation: {
-            Frontpage: "/pages/index.pug",
-            Stregsystem: "/pages/stregsystem.pug",
-            Songbook: "/pages/songbook/index.pug",
-            Events: "/pages/events.pug",
-            Links: "/pages/links.pug",
-            Offline: "/pages/offline.pug"
+            Frontpage: ["/pages/index.pug", "🏠", "Frontpage"],
+            Stregsystem: ["/pages/stregsystem.pug", "💵", "Browse our collection of wares"],
+            Songbook: ["/pages/songbook/index.pug", "🎼", "Browser our collection of songs"],
+            Events: ["/pages/events.pug", "📅", "List upcoming events"],
+            Links: ["/pages/links.pug", "🌐", "Look at nice links"],
+            Offline: ["/pages/offline.pug", "✈", "Enter offline-mode"],
+            TenFoot: ["/pages/tenfoot/toggle.pug", "➜]", "Toggle 10-foot display"],
         },
         links: {
-            Slack: "https://fklubben.slack.com",
-            Discord: "https://discord.gg/6DBvANjs3g",
-            Facebook: "https://www.facebook.com/fklub",
-            Github: "https://github.com/f-klubben",
-            Fiki: "https://fklub.dk",
-            Stregsystem: "https://stregsystem.fklub.dk"
-
+            Slack: ["https://fklubben.slack.com"],
+            Discord: ["https://discord.gg/6DBvANjs3g"],
+            Facebook: ["https://www.facebook.com/fklub"],
+            Github: ["https://github.com/f-klubben"],
+            Fiki: ["https://fklub.dk"],
+            Stregsystem: ["https://stregsystem.fklub.dk"]
         },
         disable_worker: process.env.disable_worker === "true" || true,
     }

components/base_layout.pug → components/page_layout.pug

@@ -17,7 +17,7 @@ html(lang="en")
             ul.border-outer
                 each key in Object.keys(navigation)
                     .border-inner
-                        a(href=navigation[key])
+                        a(href=navigation[key][0])
                             li= key
                 button.darkmode-button darkmode
         main
@@ -28,4 +28,8 @@ html(lang="en")
             if hide_frit_fit !== true
                 p.frit-fit #fritfit (for real)
         +scripts
+            script.
+                // Determine mode from localStorage (or default)
+                const tenFoot = localStorage.getItem('tenFoot') === '1';
+                if (tenFoot) document.body.classList.add('ten-foot');
             block scripts

components/service_menu.pug

@@ -1,7 +1,12 @@
 mixin menu(links, target)
     link(rel="stylesheet" href="/styles/service-menu.scss")
-    section.service-links.border-outer
+    link(rel="stylesheet" href="/styles/service-menu_10foot.scss")
+    section.service-menu.border-outer
         each key in Object.keys(links)
-            a(href=links[key] target=target)
+            a.service-link(href=links[key][0] target=target)
+                if links[key].length > 1
+                    .service-icon=links[key][1]
                 .border-inner
                     h3=key
+                if links[key].length > 2
+                    .service-description=links[key][2]

components/tenfoot_layout.pug

@@ -0,0 +1,40 @@
+include core
+
+block pug_meta
+
+- const title = typeof page_title === 'string' ? `${page_title} - ${app_name}` : app_name;
+
+doctype html
+html(lang="en")
+    +head(title)
+        link(rel="stylesheet" href="/styles/tenfoot.scss")
+    body
+        header.header-with-logo
+            .logo-title-container
+                a.logo-wrapper(href="/tenfoot/")
+                    img.logo(src="/media/flogo_w.svg" alt="Logo")
+                .title-wrapper
+                    h1= app_name
+                    block title
+
+        main
+            if show_load_indicator
+                #loading-indicator.spinner
+                    img(width="200" src="/media/fstjerne.svg")
+
+            .nav-hint
+                span Navigate with
+                kbd ↑
+                kbd ↓
+                kbd ←
+                kbd →
+                kbd Enter
+            block content
+
+        footer
+            if hide_frit_fit !== true
+                p.frit-fit #fritfit (for real)
+
+        +scripts
+            script(type="module" src="/scripts/tenfoot/tenfoot-navigation.ts")
+            block scripts

pages/events.pug

@@ -1,4 +1,4 @@
-extends ../components/base_layout
+extends ../components/page_layout
 
 block pug_meta
     - const page_title = "Events";

pages/index.pug

@@ -1,4 +1,4 @@
-extends ../components/base_layout
+extends ../components/page_layout
 include ../components/service_menu
 
 block content

pages/links.pug

@@ -1,4 +1,4 @@
-extends ../components/base_layout
+extends ../components/page_layout
 include ../components/service_menu
 
 block content

pages/offline.pug

@@ -1,4 +1,4 @@
-extends ../components/base_layout
+extends ../components/page_layout
 
 block head
     link(rel="stylesheet", href="/styles/offline.scss")

pages/songbook/index.pug

@@ -1,4 +1,4 @@
-extends  ../../components/base_layout.pug
+extends  ../../components/page_layout
 block head
     link(rel="stylesheet" href="/styles/songbook.scss")
     script(type="module", src="/scripts/songbook.ts")

pages/stregsystem.pug

@@ -1,4 +1,4 @@
-extends ../components/base_layout
+extends ../components/page_layout
 
 block pug_meta
     - const page_title = "Stregsystemet";

pages/tenfoot/index.pug

@@ -0,0 +1,9 @@
+extends ../../components/tenfoot_layout
+
+block title
+    h2 Welcome
+        .subtitle Select a service to continue
+
+block content
+    link(rel="stylesheet" href="/styles/menu10foot.scss")
+    section.menu10foot

pages/tenfoot/toggle.pug

@@ -0,0 +1,13 @@
+include ../../components/core
+
+doctype html
+html(lang="en")
+    body
+        script.
+            // Read current mode from localStorage
+            const tenFoot = localStorage.getItem('tenFoot') === '1';
+
+            localStorage.setItem('tenFoot', tenFoot ? '0' : '1');
+
+            // Redirect after flipping
+            window.location.href = '/';

scripts/tenfoot/menu.ts

@@ -0,0 +1,84 @@
+// Keyboard navigation for 10-foot interface
+interface ServiceSelected {
+    service: string;
+}
+
+export interface GotoPage {
+    navigateTo(page: string): Promise<void>;
+}
+
+export class TenFootMenu {
+    private cards: NodeListOf<HTMLElement>;
+    private nav: GotoPage;
+    private currentIndex: number;
+
+    constructor(navigator: GotoPage, cardContainer: Element) {
+        this.nav = navigator;
+        this.cards = cardContainer.querySelectorAll<HTMLElement>('.menu10foot-card');
+        this.currentIndex = 0;
+        this.init();
+    }
+
+    private init(): void {
+        console.log("Initialized Tenfoot Menu");
+        this.setupKeyboardNavigation();
+        this.setupClickHandlers();
+
+        // Focus first card on load
+        if (this.cards.length > 0) {
+            this.focusCard(0);
+        }
+    }
+
+    private focusCard(index: number): void {
+        if (index >= 0 && index < this.cards.length) {
+            this.cards[index].focus();
+            this.currentIndex = index;
+        }
+    }
+
+    private setupKeyboardNavigation(): void {
+        document.addEventListener('keydown', (e: KeyboardEvent) => {
+            switch(e.key) {
+                case 'ArrowRight':
+                    e.preventDefault();
+                    this.focusCard((this.currentIndex + 1) % this.cards.length);
+                    break;
+
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    this.focusCard((this.currentIndex - 1 + this.cards.length) % this.cards.length);
+                    break;
+
+                case 'Enter':
+                    e.preventDefault();
+                    this.cards[this.currentIndex].click();
+                    break;
+            }
+        });
+    }
+
+    private setupClickHandlers(): void {
+        this.cards.forEach((card: HTMLElement, index: number) => {
+            card.addEventListener('click', async () => {
+                const link = card.dataset.link || '';
+                const titleElement = card.querySelector('.service-title');
+                const title = titleElement?.textContent || '';
+
+                console.log(`Selected: ${title} (${link})`);
+
+                await this.nav.navigateTo(link);
+            });
+
+            card.addEventListener('focus', () => {
+                this.currentIndex = index;
+
+                card.scrollIntoView({
+                    behavior: 'smooth',
+                    inline: 'center',
+                    block: 'nearest'
+                });
+            });
+        });
+    }
+}