TeamApp er en digital platform til sportshold, der samler coaching, spillerudvikling, træningsplanlægning og taktik på ét sted. Platformen styrker kommunikationen mellem trænere og spillere og giver bedre overblik over holdets udvikling.

Systemet består af to primære brugerflader: Coach-siden (browser-baseret) til trænere og administratorer, og Spiller-appen (PWA) der er optimeret til mobilbrug for spillere.

Assistent har fuld adgang til de daglige coach-værktøjer på linje med træner, men ikke til link-bibliotek eller omkostnings-satser/afregning. Spiller har slet ingen adgang til coach-værktøjerne eller til omkostninger (kun til spiller-appen, samt læsning i Beach og link-bibliotek). Håndhæves to steder: i api.php blokerer requireTraener() skrivekald server-side (assistent slipper igennem, undtagen ved requireTraenerKunIkkeAssistent()-endpoints), og et separat rolle-tjek blokerer al adgang (læsning og skrivning) for spiller til de coach-specifikke endpoints. Siderne selv omdirigerer en spiller væk med det samme (til spiller.html), og deaktiverer skriveknapper for assistent/spiller hvor relevant.

Alle brugere logger ind via login.html med brugernavn og kodeord. Systemet gemmer en JWT-token lokalt og omdirigerer automatisk til den korrekte side baseret på brugerens rolle.

1. Gå til login.html og indtast brugernavn + kodeord
2. Systemet validerer og udsteder en JWT-token
3. Trænere og admins videresendes til dashboard.html
4. Spillere videresendes til spiller.html (PWA)
5. Tokens udløber automatisk og kræver nyt login

Hoveddashboardet for trænere. Her oprettes og styres kampe, kampnoter, taktiske åbninger og spillerindhold. Sidebjælken giver hurtig navigation imellem funktioner.

1. Log ind som træner og åbn dashboard.html
2. Vælg eller opret en kamp i kampmenuen til venstre
3. Tilføj taktiske noter, åbninger og spillerobservationer
4. Del indhold med spillere via "Spiller-indhold" (spiller-admin.html)
5. Se spillernes reaktioner og kommentarer på delt indhold

Den mobilvenlige spiller-app er implementeret som en PWA og kan installeres på spillerens telefon direkte fra browseren uden app store.

1. Spilleren åbner spiller.html i mobilbrowseren og installerer appen
2. Forside: Overblik over næste kamp og seneste opslag fra træneren
3. Åbninger: Taktiske angrebsåbninger med video og tegning
4. Kampe: Kampforberedelse og evaluering med noter og video
5. Udvikling: Personlig udviklingsindhold opdelt i kategorier
6. Refleksion: Personlige refleksioner efter kamp/træning — guidede spørgsmål med hurtigsvar, gemt lokalt på spillerens egen telefon (ingen serveradgang)
7. Spilleren kan like og kommentere på alt delt indhold

Det interaktive tegneværktøj bruges til at illustrere taktiske spillesekvenser på et baneudsnit. Tegningerne gemmes og kan vedhæftes åbninger.

1. Åbn tegneværktøjet fra dashboardet eller direkte via tegning.html
2. Placer spillere (hold A / hold B) på banen med drag & drop
3. Tegn bevægelses- og pasningslinjer med penselværktøjet
4. Brug pileredskabet til at vise retning og spillerflow
5. Gem tegningen – den tilknyttes automatisk den aktuelle åbning

Et scouting-ark pr. modstanderhold, hvor trænerteamet samler observationer før en kamp. Arket er koblet til dashboardet, hvor den aktuelle modstander får et link til sit ark, og noterne kan foldes ud i kampnoter.html under den aktuelle kamp.

1. Søg i listen efter modstanderholdet, eller opret et nyt ark med holdets navn
2. Noter typisk forsvarsformation (fx 6-0, 5-1) og angrebsstil
3. Beskriv farlige spillere og målvogter-tendenser
4. Tilføj generelle noter til resten af holdet
5. Arket kan tilgås igen fra dashboardet, når holdet igen møder modstanderen

Træningsmodulet bruges til at planlægge og dokumentere træningssessioner med et struktureret øvelsesbibliotek.

1. Opret en ny træningssession med dato og titel
2. Tilføj øvelser fra biblioteket eller opret nye øvelser
3. Angiv varighed og antal gentagelser per øvelse
4. Gem sessionen – den er synlig for hele coachingteamet

Modulet har to faner: et fælles øvelsesbibliotek for hele klubben (delt på tværs af hold) og programmer, som det enkelte hold sammensætter af øvelser fra biblioteket.

1. Bibliotek: Opret styrke-/skadeforebyggelsesøvelser med kategori, søg og filtrér i det klubfælles bibliotek
2. Programmer: Sammensæt et program for jeres hold ved at tilføje øvelser fra biblioteket
3. Programmer er hold-specifikke, mens biblioteket deles af hele klubben

En kurateret linksamling til håndbold-ressourcer (taktik, Instagram-profiler, regler, videokanaler m.m.), organiseret i op til to niveauer af kategorier. Den offentlige side links.html kræver ikke login — alle (spillere, forældre, trænere) kan browse og søge frit. Administrationen sker via links-admin.html (kræver login som træner/admin — assistent har kun læseadgang her, spiller slet ingen).

1. Log ind som træner/admin og åbn links-admin.html
2. Opret hovedkategorier (evt. med billede) og underkategorier under dem
3. Opret enkelte links manuelt via "+ Nyt link", eller importér mange på én gang via "⬆ Importer links": vælg en mål-kategori, upload en CSV-fil med kolonnerne titel, url og beskrivelse (en skabelon kan downloades i dialogen), gennemse forhåndsvisningen — rækker med manglende felter, ugyldige URL'er eller dubletter (i filen eller allerede i biblioteket) markeres og springes automatisk over — og bekræft importen
4. Brug "Tjek alle links" periodisk for at finde og rette døde links
5. Se klik-statistik pr. link for at identificere de mest brugte ressourcer

Admin-panelet bruges til systemadministration og er kun tilgængeligt for brugere med admin-rollen.

1. Overblik: Statistik over alle hold, brugere og data på tværs af systemet
2. Brugere: Opret, nulstil kodeord, spær/genaktivér og slet brugere og spillere — samt importér en eksisterende spiller som login-bruger
3. Database: Se diskforbrug og tabelstørrelser for alle tabeller
4. Skema: Visualiser databaseskemaet — tabeller grupperet i domæner med kolonner og relationer
5. Hold-værktøjer: Flyt spillere ved årgangsskifte, eller kopiér indhold (åbninger/øvelser) ikke-destruktivt til et andet hold
6. Hold-røntgen: Se alt tilknyttet data for ét hold i dybden — roster, adgang, sæson, historik og sundhedsadvarsler

TeamApp er en serverless-lean webapplikation baseret på statiske HTML/CSS/JS-sider der kommunikerer med en PHP-backend via REST API. Der er ingen build-pipeline – alt deployes direkte som statiske filer.

Systemet anvender JWT-baseret autentificering. Login-flowet er:

1. Brugeren sender brugernavn + kodeord via POST til api.php?action=login
2. Backend validerer credentials mod databasen (bcrypt-hashet kodeord)
3. Returnerer JWT-token med payload: { id, navn, rolle, hold_id, exp }
4. Frontend gemmer token i localStorage.kn_token
5. Alle efterfølgende API-kald sender token i Authorization: Bearer <token>
6. Backend validerer signaturen og udløbsdatoen på hvert kald

Token-levetid: Sættes af backend-konfiguration. Fornyelse kræver nyt login.

Der er to API-filer: api.php til generel brug og admin2.php til admin-funktioner (kræver admin-rolle i JWT).

Databasen er relationel MySQL med hold som central entitet. Al data er hold-isoleret via hold_id-fremmednøgler. Tabellisten herunder hentes live fra databasen (samme kilde som "Database"-siden), så den altid matcher den faktiske struktur.

Spiller-appen (spiller.html) er implementeret som en PWA og kan installeres på iOS og Android uden en app store.

Globalt modul uden hold_id – to tabeller: link_kategorier (hierarkisk via selvreferentiel parent_id, max to niveauer) og links (med klik-tæller og manuel sortering).

TeamApp følger et dark-first designprincip med et markant accent-orange der skaber energi og sportsfølelse. Interfacet er funktionelt frem for dekorativt – data er i centrum.

Kerneprincipper: Klarhed · Hastighed · Fokus · Sportsenergisk

Kilde til sandhed: alle farver og fonte er samlet i design.css (roden). Siderne bruger var(--token) frem for hardcodede værdier. Mørkt er standard (:root); lyst aktiveres via klassen .light på <html> og huskes i localStorage['kn_theme']. Fuld reference: docs/design-system.md.

Bløde flader (badges, hover, alerts): --accent-soft, --green-dim, --red-soft. Domæne-tokens (kampnoter/dashboard): --taktik, --spiller, --timeout m.fl. — aliaser oven på grundfarverne.

Farverne herunder læses live fra design.css via CSS-variablerne — ændres et token dér, opdateres denne side automatisk.

Knapper

Badges og tags

Alerts

Ikonerne er linje-baserede SVG'er tegnet på et 24×24-grid med ensartet streg. De arver farve fra teksten (stroke: currentColor) og skalerer frit. De defineres som <symbol>-sprites og bruges via <use href="#icon-…">; stregattributterne sættes af container-klassen (fx .nav-icon i design.css), ikke på selve symbolet.

Admin-modulets ikonsæt (eksempel på husstilen)

Ikonerne defineres i dag pr. side som inline-sprites (ca. 122 distinkte på tværs af appen; genbrugte ikoner deler bevidst identisk path-data for pixel-perfekt konsistens). En genereret reference med style-spec ligger under docs/icon-sets/. En samlet, central ikon-fil er et muligt næste skridt.

Projektet har en .claude/-mappe, der udvider Claude Code (og Cowork) med projekt-specifikke værktøjer til udvikling af TeamApp. Der er tre slags — de bruges på hver sin måde:

En skill er en mappe med en SKILL.md, der giver Claude specialiseret viden eller en arbejdsgang. Claude læser den automatisk ind, når din besked matcher skillens triggere — du aktiverer den ikke selv.

Sådan bruger du dem: beskriv bare opgaven. Fx udløser "fejlsøg et PHP-endpoint" web-udvikler, og "prioritér backloggen" udløser projektleder.

En subagent er en selvstændig Claude, der kører en afgrænset opgave i sit eget vindue og kun sender resultatet tilbage. Det sparer kontekst og giver den en snæver rolle. Projektets agenter ligger i .claude/agents/:

Sådan bruger du dem: beskriv opgaven ("reviewer kampnoter.html"), eller nævn agenten direkte ("brug web-tester på hele repoet"). Vil du kun have forslag, så sig "foreslå kun, lav ikke ændringer".

En slash-kommando er en genvej, du selv starter ved at skrive /navn. Den kører en forudskrevet arbejdsgang — ofte ved at kalde en eller flere agenter. De ligger i .claude/commands/:

Sådan bruger du dem: skriv kommandoen, evt. med et argument — fx /test kampnoter.html eller /ny-side statistik.html. Uden argument kører de deres standard.

Sådan hænger det sammen: en skill er passiv viden, en subagent er en aktiv proces (kan bruge en skill undervejs), og en kommando er knappen du selv trykker på for at sætte det i gang. Alle tre er værktøjer til at udvikle TeamApp — ikke funktioner i selve appen for trænere og spillere.

En samling statiske HTML-sider (vanilla JS, ingen build-step) med én fælles PHP-backend mod MySQL. Flere sider er installerbare PWA'er.

Sådan hænger TeamApp sammen — fra bruger til database. Statiske sider taler med én PHP-backend, beskyttet af JWT, og deployes via FTP. Diagrammet følger appens tema.

Ingen staging — main er produktion. config.local.php ligger kun på serveren og overskrives ikke ved deploy. HTML serveres med no-cache, så nye versioner hentes straks.

TeamApp består af 14 HTML-moduler der tilsammen dækker hele løsningen – fra spillerens mobil-app til administratorens systempanel. Alle moduler deler samme design-system og API-backend.