<!--
=================================================================
PROJEKTREGLER OCH STATUS
=================================================================
LIVSKARTAN | DOKUMENTATIONSPROTOTYP v0.1 | 2026-10-28
VIKTIGT TILL FRAMTIDA AI-ASSISTENTER OCH UTVECKLARE
1. LÄS HELA DOKUMENTATIONEN FÖRST, inklusive projektbibeln och Lovable-prompten.
2. Skilj alltid mellan VISION, PLANERAT och IMPLEMENTERAT.
3. Bevara projektets ursprungliga vision. Ändra inte fungerande beteenden utan skäl.
4. Vid varje kodändring: uppdatera berörda kommentarer och versionsanteckningar.
5. Navigering och trygg datalagring prioriteras före visuella extrafunktioner.
6. Under utveckling: behåll denna dokumentation i HTML-källan.
7. Inför överföring till Lovable eller publicering: skapa först en säkerhetskopia,
avlägsna sedan omfattande planeringskommentarer från produktionskoden.
8. Publicera aldrig personuppgifter, lösenord eller annan känslig information i kommentarer.
9. Läs igenom aktuell kod innan du påstår att en funktion finns eller fungerar.
10. Om endast en del av koden delas: be om fullständig fil innan helhetsbedömning.
STATUS
VISION: Definierad i projektbibeln nedan.
PLANERAT: Funktionerna i projektbibeln och Lovable-testprompten.
IMPLEMENTERAT: Ingenting ännu. Denna fil innehåller enbart kommentarer.
KÄLLOR
A. Livskartan_Projektbibel_v1(2).docx, full text återgiven nedan.
B. Livskartan_Lovable_Testprompt_v1(2).txt, full text återgiven nedan.
VERSIONSHISTORIK
v0.0 (2026-10-28): Dokumentationsgrund. Ingen UI, CSS eller JavaScript.
-->
<!--
=================================================================
ARBETSSÄTT, VERSIONSHANTERING OCH ÖVERLÄMNING
=================================================================
SYFTE MED HTMLDROP
- HTMLDrop är en gratis experimentverkstad för visuella prototyper på iPhone.
- Vi provar interaktion, utseende och funktioner innan utvalda idéer
förs över till det separata Lovable-projektet.
- HTMLDrop-versionen och Lovable-versionen är separata utvecklingsspår.
- Att något fungerar i HTMLDrop betyder inte att det redan finns i Lovable.
DOKUMENTATION UNDER UTVECKLING
- Behåll hela projektbibeln och hela Lovable-testprompten i kommentarer
under prototyparbetet, som läsbart projektunderlag.
- Läs dessa kommentarer före kodändringar och håll lokala tekniska
kommentarer intill de funktioner de beskriver.
- Lägg inte privata data, hemligheter eller inloggningsuppgifter i kommentarer.
- Om hela HTML-filen skickas till en AI-assistent ska assistenten först läsa
projektinstruktionerna, sedan originalkraven och sist faktisk kod/status.
- Kommentarer är krav och dokumentation, inte bevis på implementering.
VERSIONER OCH ORIGINAL
- Användaren behåller originalen Projektbibel v1 och Lovable Testprompt v1
oförändrade. Skriv aldrig över dem.
- Nya HTML-versioner får stigande versionsnummer (v0.1, v0.2 osv.).
- Vid viktiga milstolpar skapas nya, separat namngivna sammanställningar:
Projektbibel v2, Lovable Testprompt v2 osv.
- Dessa sammanställningar skiljer tydligt mellan vision, planerat,
implementerat, testat, kända fel och öppna designbeslut.
- För varje ny version dokumenteras datum, ändringar och återstående arbete.
RENSNING INFÖR LOVABLE / SLUTPRODUKT
- Skapa och bevara först en fullständig dokumenterad säkerhetskopia.
- Skapa sedan en separat ren överförings-/produktionsversion.
- Ta bort omfattande planeringskommentarer och tillfälliga arbetsanteckningar
ur den rena versionen; behåll korta nödvändiga tekniska kommentarer.
- Bifoga relevant kravspecifikation separat vid överföring till Lovable.
- Ta aldrig bort dokumentation från enda kvarvarande kopian.
STATUS 2026-10-28
VISION: Projektbibel 1.0 och Lovable Testprompt v1 nedan.
PLANERAT: Visuell och funktionell prototyp av Livskartan.
IMPLEMENTERAT I DENNA FIL: Endast dokumentationskommentarer.
TESTAT I DENNA FIL: Inga appfunktioner.
VERSIONSHISTORIK
v0.0: Ursprunglig dokumentationsgrund.
v0.1: Tydligare arbetsflöde, parallella utvecklingsspår,
versionspolicy, framtida sammanställningar och rensningsregler.
=================================================================
-->
<!--
=================================================================
KÄLLDOKUMENT A – PROJEKTBIBEL 1.0 (ORIGINALTEXT)
=================================================================
LIVSKARTAN
PROJEKTBIBEL 1.0
28 oktober 2026 • Produktvision, design, funktioner och utvecklingsplan
Arbetsdokument som sammanfattar våra hittills kända beslut och idéer. Inte en ordagrann utskrift av chatten. Funktioner kan justeras efter prototyptest.
1. Vision och löfte
Livskartan är en vacker, lugn och intuitiv personlig livskarta – inte en traditionell kalender eller att-göra-lista. Användaren står i mitten av ett levande universum av färgade bubblor, där tankar, planer, åtaganden och drömmar får egna platser.
Kärnan är dubbel: (1) det ska kännas skönt och lustfyllt att öppna appen och strukturera livet; (2) det ska kännas befriande att få ut allt ur huvudet och kunna lita på att det finns kvar. Användaren ska vilja återvända, inte känna sig tvingad.
Målgruppen är bred, men särskilt relevant för människor som ogillar kalendrar och texttunga planeringsverktyg eller har svårt att komma igång med struktur. Eventuella fördelar för personer med koncentrations- eller exekutiva svårigheter ska testas, inte utlovas som medicinsk effekt.
Ledstjärna: Det ska vara enkelt att skapa oreda i sin tankebubbla, men nästan omöjligt att skapa oreda i sin Livskarta.
2. Design och känsla
Mörkt, djupt och rogivande gränssnitt med neonfärgade, glasliknande, svagt glödande bubblor. Organiska böjda kopplingslinjer, diskret djup och långsam mjuk rörelse. Inspirerat av lugnet i Alto-spelen och himlen i Minecraft, men med egen identitet och egna tillgångar.
Mobil först, särskilt iPhone: stora tryckytor, tydliga hierarkier, minimalt med textfält och friktion, enhandsgrepp, flytande zoomövergångar och intuitiv navigering. Aldrig visuellt överlastat.
Standardkategorier att börja med: Familj, Hemmet/Hus, Ekonomi, Hälsa/Personlig hälsa, Inköp, Bil och Projekt & mål. Namn, färger och antal kategorier ska kunna ändras.
Varje bubbla kan ha eget namn, färg, storlek, eventuell bild, beskrivning, underbubblor och uppgifter. Storlek uttrycker visuell betydelse, inte automatiskt brådska.
3. Mindmap och navigation
En central bubbla ”Mitt liv” med färgkodade huvudbubblor och obegränsat djupa underkartor. Tryck på en bubbla för att zooma in till dess egen värld; brödsmulor/tillbaka gör det lätt att hitta hem.
Fokusläge tonar bort orelaterade bubblor utan att radera eller flytta dem. Normal svepning panorerar kartan och två fingrar zoomar. Mjuka, sparsamma rörelser ger liv utan att störa.
Fotobubblor: valfri personlig bild beskuren i en rund bubbla med neonring, flytta/zooma bilden i en beskärningsvy, lagra beskärningen och komprimera bilden så telefonen inte blir tung.
Storleksändring och flytt ska inte ske av misstag. Långtryck cirka 0,5 sekunder aktiverar särskilt redigeringsläge med markerad ring och handtag; drag i handtaget ändrar storlek. Tryck utanför avslutar läget.
4. Tankesläpp – den buckliga bubblan
En särskild mjukt bucklig/organiskt oregelbunden bubbla fungerar som en separat, trygg uppsamlingsplats för osorterade tankar. Den syns som en egen satellit vid sidan av den ordnade kartan, utan att störa kategoriernas layout.
Användaren kan dumpa text snabbt, flera tankar på en gång, eller använda telefonens inbyggda diktering. Ingen kategori, deadline eller prioritet krävs vid insamlingen. Tankarna sparas först i en separat inkorg.
Varje tanke kan senare uttryckligen flyttas till valfri kategori och bli en riktig bubbla eller uppgift. Inget flyttas automatiskt. Undvik stressande antal och skuldskapande etiketter.
Ljudidé: varje tanke som släpps i inkorgen kan få ett diskret, dämpat vattendropps-/ploppljud, som en liten droppe i en stilla pöl, med en mjuk ringanimation. Ljudet är valbart och lågmält.
5. Säker struktur och tillit
Navigeringsläge är alltid standard. Flytt, storleksändring och annan layoutredigering kräver avsiktligt redigeringsläge. Ingen autosortering eller automatisk omplacering av existerande bubblor.
Tydlig Ångra för förändringar; återställningshistorik och regelbundna säkerhetskopior i senare versioner. Destruktiv radering av bubblor med innehåll kräver bekräftelse; gärna mjuk radering/papperskorg.
Ändringar ska sparas pålitligt lokalt, överleva omladdning och appstängning. Export/import av JSON inklusive bilder när möjligt. Ge användaren kontroll och undvik oväntade ändringar.
Påminnelser ska vara vänliga och valfria. Ingen aggressiv röd skuldmarkering, inga bestraffningar för inaktivitet och ingen manipulerande streakmekanik.
6. Uppgifter, datum och veckovy
Inuti bubblor: uppgifter med kryssruta, anteckning, datum, klockslag, prioritet, länk och valfri uppskattad kostnad i SEK. Uppgifter kan bockas av och finnas kvar i historiken.
En enkel vy ”Min vecka” med Idag, Imorgon, Denna vecka och Försenat. Tanken är en lugn överblick snarare än ett klassiskt kalendergränssnitt.
Valfria dagliga sammanfattningar/påminnelser. Riktiga schemalagda pushnotiser på iPhone i webbapp kräver särskild teknisk implementation och behörigheter; lova inte sådant i första prototypen.
7. Framsteg – diskret EXP-bar
En valbar, gömbar, lång och lätt transparent stapel inspirerad av EXP-mätare i rollspel. Varje huvudkategori har sin egen färg och ett segment i stapeln. Segmentens bredd kan representera antal aktuella uppgifter i respektive kategori.
Färgen i varje segment fylls mjukt när uppgifter blir avklarade. Standardläget visar aktuella uppgifter; en liten ∞-knapp växlar till total historik över avklarade uppgifter genom tiderna.
Nya uppgifter får inte upplevas som ett straff eller som förlorade prestationer. Skilj tydligt mellan aktuellt återstående arbete och ackumulerade prestationer. Endast riktiga avbockningsbara uppgifter räknas – inte lösa anteckningar eller osorterade tankar.
Vid avbockning: kort mjuk ljuspuls, mjuk fyllnadsanimation och kanske 6–8 små långsamt stigande glödande pixelgnistor, som gnistor från en Minecraft-eld, inte stora fyrverkerier. Effekten kan stängas av.
8. Levande himmel och väder
Bakgrunden liknar upplevelsen av att titta rakt upp i en Minecraft-inspirerad himmel från en öken, utan mark, horisont eller landskap. Stor, sömlös himmel som fortsätter bortom skärmen; dagtid klar blå ton, nattetid mörk himmel med sparsamma små fyrkantiga stjärnor.
Mycket långsam himmelsrörelse, mjuk dag-/nattövergång och diskret djup/parallax. Lägen: verklig lokal tid, valbar snabbare spelinspirerad dygnscykel samt manuell ”Evig natt”.
Vid regn: något mörkare moln, mjukt långsamt drivande pixelliknande moln och tunt, lågintensivt pixelregn bakom bubblorna. Lägen: auto via väderdata i senare version, klart, mysregn, av. Intensitet justerbar; natt och regn kan kombineras.
På iPhone kräver rörelsesensorer ofta uttryckligt tillstånd. Parallax ska vara mycket diskret, ungefär 2–4 mm upplevd förskjutning, och får aldrig göra tryckytor svårträffade. Respektera minskad rörelse.
9. Ljud, musik och haptik
Valbar ambient ljudvärld med originalkomponerad minimalistisk musik: mjuka toner, långa pauser, varm och luftig klang, inspirerad av lugnet i Minecraft och Alto utan att kopiera deras musik, melodier eller ljudfiler.
Valbara mikro-ljudeffekter vid specifika interaktioner: mjukt dropp/plopp när en tanke landar i den buckliga bubblan, lätt glasklick när en bubbla öppnas, diskret bekräftelseljud vid avbockning och kanske ett svagt luftigt svep vid fokusläge. Ljuden får aldrig bli frekventa eller distraherande.
Separata reglage för musik, effekter och visuella belöningar; allt av som standard tills användaren aktivt slår på ljud. Webbläsare begränsar automatisk ljuduppspelning, särskilt i iOS.
Soft Haptics: mycket små, behagliga taktila klick vid medvetna handlingar (öppna bubbla, gå in i redigering, släppa storlekshandtag, bocka av). Vanliga iPhone-webbappar saknar i regel vibrations-API; riktig iOS-haptik kräver sannolikt native wrapper/Capacitor senare.
10. Tekniska ramar och plattform
Första prototyp: Lovable, React + TypeScript + mobilanpassad styling, fungerande interaktiv mindmap, lokal lagring i IndexedDB, inga obligatoriska konton och ingen backend om den inte behövs. PWA och hemskärmsikon är önskvärda.
Bygg för touch, enkel prestanda och batterihänsyn. Begränsa partikeleffekter och tunga animationer. Använd gärna SVG/Canvas för bakgrund och kopplingslinjer, med tillgängliga klickbara kontroller ovanpå.
Följ användarens Reduced Motion-inställning, erbjuda animationer av/på och ljud av/på. Spara användarens val lokalt.
Ingen användning av upphovsrättsskyddade Minecraft-/Alto-tillgångar utan rättigheter. All grafik, musik och ljud ska vara egen eller korrekt licensierad.
11. Utvecklingsprioritering
Fas 1 – känslotest: mörkt vackert gränssnitt, levande himmel, huvudbubblor och underbubblor, bucklig tankebubbla med snabbt inflöde, manuell sortering, uppgifter med avbockning, progressbar med ∞, lokal lagring, trygg navigering och enkel ångra.
Fas 2 – fördjupning: datum/tid, veckovy, fotobubblor och beskärning, långtrycksredigering av storlek, export/import, fokusläge, mer genomarbetade animationer och ljudinställningar.
Fas 3 – atmosfär och plattform: riktig väderintegration, iPhone rörelseparallax, originalljud och ambientmusik, avancerade glödpartiklar, PWA-polering, tillgänglighet, säkerhetskopior och eventuell native-app med haptik.
Faserna är förslag för att spara utvecklingstid och Lovable-krediter, inte ett avstående från den långsiktiga visionen.
12. Öppna designbeslut och testfrågor
Exakt placering av den buckliga tankebubblan: satellit nära ”Mitt liv” föredras för närvarande, men bör testas på liten iPhone-skärm.
Hur flera tankar i en mening delas upp, och hur användaren snabbt kan rätta till uppdelningen, behöver provas i prototyp.
Hur progressbaren ska bete sig när uppgifter återkommer, skjuts upp eller nya uppgifter tillkommer måste utformas utan känsla av bakslag.
Vilken animationsnivå, ljudnivå och partikelmängd som känns lugnande snarare än distraherande måste testas med verkliga användare.
Pålitlighet, enkelhet och känslan av trygghet går alltid före ytterligare visuella effekter.
-->
<!--
=================================================================
KÄLLDOKUMENT B – LOVABLE TESTPROMPT V1 (ORIGINALTEXT)
=================================================================
BUILD A WORKING, MOBILE-FIRST PROTOTYPE OF “LIVSKARTAN” (Swedish UI)
GOAL
Livskartan is a calming, delightful, touch-first visual life mind map, NOT a conventional to-do list or calendar. The central promise: make planning feel beautiful and inviting, and make unloading thoughts feel like relief. It should be safe and almost impossible to accidentally disrupt an organized map. The user will test it on an iPhone. Build actual working interactions and persistence, not a static mockup.
PRIORITY: Spend effort on the core experience and reliable behavior. Avoid overengineering, paid integrations, authentication, and placeholder buttons. Implement the essentials completely before extras. All visible UI copy must be in Swedish.
TECH
Use React + TypeScript + Tailwind (or existing Lovable stack). Mobile-first responsive layout, dark mode only initially. Persist map, tasks, inbox, progress history and settings locally with IndexedDB (a well-maintained library such as idb is fine); do not rely on in-memory state. No login/backend. Make it usable in iPhone Safari and as a home-screen PWA where feasible. Use performant SVG or CSS for connecting lines and simple background. Respect prefers-reduced-motion. No copyrighted Minecraft/Alto assets or music.
VISUAL DESIGN
A premium dark night-sky atmosphere, soft luminous neon glass-like circular bubbles, gently curved glowing connector lines, subtle floating animation. Central bubble “MITT LIV”. Default branches: Familj (green), Hemmet (warm red), Ekonomi (gold), Hälsa (blue), Inköp (pink), Bil (cyan), Projekt & mål (violet). User can rename/recolor/add branches. Strong visual polish: generous spacing, calm typography, rounded controls, tasteful soft gradients, not busy, not childish. Behind everything: original pixel-inspired sky viewed straight upward (no landscape/horizon/ground), sparse square stars, subtle slow drifting, manual toggle for “Evig natt” and day. Do NOT put UI elements over a busy illustration.
CORE FUNCTIONAL REQUIREMENTS (MUST WORK)
1. Interactive nested mind map. Tap a bubble to open/zoom into its submap, with clear back navigation/breadcrumbs. Create, rename, recolor and remove nodes. All changes persist after reload. Keep connections visually correct. Pan by dragging empty canvas and pinch-zoom if practical; prioritize reliable taps and no gesture conflicts.
2. PROTECTED ORGANIZATION: Default state is navigation, not editing. Never rearrange existing bubbles automatically after the user has positioned them. Moving/resizing requires explicit edit mode activated by long press (~500ms) or a clear Edit button; in edit mode, visibly indicate edit state. Normal swipes must not move bubbles. Ask for confirmation before deleting a node with children. Provide Undo for recent edits and deletions; keep a small trash/recovery mechanism if feasible.
3. “TANKESLÄPP”: An irregular, slightly lumpy softly glowing bubble separate from the structured mind map, like a satellite near the central life bubble. Tap to open a dedicated unstructured thought inbox. Fast capture: type one thought or multiple lines; each line becomes an inbox item, editable afterwards. iPhone keyboard dictation should work through standard text input. Do not require categories or dates. Thoughts remain separate from map until the user explicitly chooses “Placera i Livskartan” and selects a destination. Never auto-place. Do not display guilt-inducing backlog counters by default. Add a subtle droplet/ripple animation when a thought is captured.
4. TASKS: Within each organized bubble, add/edit/check off tasks. Minimal fields: title and optional date; completed tasks remain recorded in history. Clear save confirmation, persistent checkboxes, no confusing modal stacks.
5. EXP PROGRESS BAR: A thin, semi-transparent horizontal segmented bar with category colors, optionally hideable. Segment width proportional to number of CURRENT tasks in that category; colored fill indicates completed/current task share. Small ∞ button toggles to ALL-TIME completed totals, clearly labeled. Progress changes smoothly on completion; new tasks should never erase the all-time count. Notes and unsorted thoughts are not counted as tasks. If a category has zero tasks, handle gracefully. Persist completed history.
6. MICRO-REWARD: Checking a task triggers a restrained soft glow and a handful of slow, tiny pixel-like glowing embers that fade over 2–3 seconds. Never full-screen fireworks, flashing, or loud effects. Turn effects off for reduced motion and via settings.
7. SETTINGS: toggle background motion, “Evig natt” / day sky, visual reward effects, progress bar visibility and optional sound effects. Save settings locally.
8. SAFE DATA: Provide simple JSON export and import with clear validation and confirmation before replacing data, if achievable in this first build. No silent data loss. Include friendly empty states.
SOUND (OPTIONAL IF IT DOES NOT COMPROMISE CORE FEATURES)
Provide a sound on/off setting, OFF by default. When enabled after an explicit user gesture, play a very soft original/synthesized watery “plop” on capturing a thought and a faint warm completion chime on checking a task. Avoid downloading copyrighted audio. Do not autoplay. Music is NOT required for this first build; leave a clearly marked future integration point for original minimalist ambient music with separate volume controls. iPhone Safari web haptics/vibration are generally unavailable: do not claim real haptic support; use visual feedback and structure code for possible native haptics later.
OUT OF SCOPE FOR FIRST TEST (DO NOT FAKE THESE)
Real weather API and location permissions, live rain sync, iPhone gyroscope parallax, native iOS haptics, reliable scheduled iPhone push notifications, complex audio soundtrack, accounts/cloud sync, photo cropping, advanced weekly calendar, heavy 3D graphics. These are documented future features. If time remains, implement simple manual subtle pixel rain toggle, but only after all core flows work.
UX REQUIREMENTS
- Delightful from the first second; no onboarding wall or lengthy forms.
- Thumb-friendly touch targets, accessible labels, readable contrast, responsive layout for iPhone 13-ish screen sizes.
- No aggressive red overdue warnings, streak punishment, guilt messages, or surprise movements.
- Clear separation of navigation vs edit mode; no accidental drag/reorder.
- Stable node positions and persistent data on reload.
- The user must be able to: create a branch, open it, create a task, check it off, watch the progress bar change, capture a thought in the irregular inbox bubble, and deliberately move that thought into a chosen branch.
IMPLEMENTATION PROCESS
First implement a complete functional app with a polished interface. Test these user journeys, fix broken gestures/state/persistence, and ensure the app is usable on mobile. If a feature is incomplete, be transparent rather than showing an inert control. End with a concise Swedish summary of what is implemented, what is not, and how to test the core flows. The overall mood must feel soothing, magical, trustworthy and genuinely useful — not gamified noise.
-->
<!--
=================================================================
FRAMTIDA ARBETSLOGG
=================================================================
När vi börjar koda: dokumentera ändringar här med datum, versionsnummer, implementerat, planerat och kända problem. Ingen funktion är implementerad i v0.0.
-->