feat: introduce map and timeline views with Leaflet integration and enhance person cards with location data.

Røsstad.html

@@ -1,12 +1,21 @@
 <!DOCTYPE html>
 <html lang="no">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Røsstad Familietre</title>
-    <script src="[https://unpkg.com/@phosphor-icons/web](https://unpkg.com/@phosphor-icons/web)"></script>
+
+    <!-- Ikoner -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+
+    <!-- Leaflet Kart CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+
     <link rel="stylesheet" href="style.css">
 </head>
+
 <body>
 
     <!-- APP CONTAINER -->
@@ -16,19 +25,44 @@
                 <i class="ph-fill ph-tree-evergreen"></i>
                 <span>Røsstad Familietre</span>
             </div>
+
+            <!-- Navigasjon -->
+            <div class="nav-tabs">
+                <button class="nav-tab active" data-tab="tree">Familietre</button>
+                <button class="nav-tab" data-tab="map">Kart</button>
+                <button class="nav-tab" data-tab="timeline">Tidslinje</button>
+            </div>
+
             <div class="controls">
-                <button id="btn-zoom-out"><i class="ph ph-minus-circle"></i></button>
+                <button id="btn-zoom-out" class="icon-btn" title="Zoom ut"><i class="ph ph-minus-circle"></i></button>
-                <span id="zoom-level">100%</span>
+                <span id="zoom-level"
-                <button id="btn-zoom-in"><i class="ph ph-plus-circle"></i></button>
+                    style="font-size: 0.9rem; font-weight: 600; color: var(--text-muted); width: 50px; text-align: center;">100%</span>
+                <button id="btn-zoom-in" class="icon-btn" title="Zoom inn"><i class="ph ph-plus-circle"></i></button>
+                <div style="width: 1px; height: 24px; background: #cbd5e1; margin: 0 0.5rem;"></div>
                 <button id="btn-logout" class="btn-outline">Logg ut</button>
             </div>
         </header>
 
-        <main id="tree-view">
+        <main>
-            <div id="tree-grid" class="tree-grid">
+            <!-- 1. TRE VISNING -->
-                <div id="row-parents" class="row-parents"></div>
+            <div id="tree-view" class="view-section">
-                <div id="row-focus" class="row-focus"></div>
+                <div id="tree-grid" class="tree-grid">
-                <div id="row-children" class="row-children"></div>
+                    <div id="row-parents" class="row-parents"></div>
+                    <div id="row-focus" class="row-focus"></div>
+                    <div id="row-children" class="row-children"></div>
+                </div>
+            </div>
+
+            <!-- 2. KART VISNING -->
+            <div id="map-view" class="view-section hidden">
+                <div id="map-container"></div>
+            </div>
+
+            <!-- 3. TIDSLINJE VISNING -->
+            <div id="timeline-view" class="view-section hidden">
+                <div class="timeline-container" id="timeline-content">
+                    <!-- Tidslinje elementer genereres her -->
+                </div>
             </div>
         </main>
     </div>
@@ -38,9 +72,11 @@
         <div class="modal">
             <div class="modal-header">
                 <h3 id="modal-title">Legg til Person</h3>
-                <button id="btn-close-modal" class="btn-icon" style="background:none;border:none;cursor:pointer;"><i class="ph ph-x" style="font-size:1.5rem"></i></button>
+                <button id="btn-close-modal" class="btn-icon"
+                    style="background:none;border:none;cursor:pointer;color:var(--text-muted);"><i class="ph ph-x"
+                        style="font-size:1.5rem"></i></button>
             </div>
-            
+
             <div class="toggle-group" id="mode-toggle">
                 <button class="toggle-btn active" data-mode="new">Opprett Ny</button>
                 <button class="toggle-btn" data-mode="existing">Velg fra Database</button>
@@ -50,7 +86,7 @@
                 <div id="form-new">
                     <div class="form-group">
                         <label>Navn</label>
-                        <input type="text" id="inp-name">
+                        <input type="text" id="inp-name" placeholder="Fullt navn">
                     </div>
                     <div class="form-row">
                         <div class="form-group"><label>Fødselsdato</label><input type="date" id="inp-birth"></div>
@@ -59,30 +95,47 @@
                     <div class="form-group">
                         <label>Kjønn</label>
                         <div class="radio-group" style="display:flex; gap:1rem;">
-                            <label><input type="radio" name="gender" value="M" checked> Mann</label>
+                            <label style="font-weight:normal; display:flex; align-items:center; gap:0.5rem;"><input
-                            <label><input type="radio" name="gender" value="F"> Kvinne</label>
+                                    type="radio" name="gender" value="M" checked> Mann</label>
+                            <label style="font-weight:normal; display:flex; align-items:center; gap:0.5rem;"><input
+                                    type="radio" name="gender" value="F"> Kvinne</label>
                         </div>
                     </div>
+
+                    <!-- NYTT: Sted for kart -->
+                    <div class="form-group">
+                        <label>Bosted / Opprinnelse (for Kart)</label>
+                        <input type="text" id="inp-location" placeholder="F.eks. 'Grimstad, Norge' eller koordinater">
+                        <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem;">Brukes til å
+                            plassere personen på kartet.</p>
+                    </div>
+
                     <div class="form-group">
                         <label>Beskrivelse</label>
-                        <textarea id="inp-desc" rows="3"></textarea>
+                        <textarea id="inp-desc" rows="3" placeholder="Kort historie eller notater..."></textarea>
                     </div>
                 </div>
 
                 <div id="form-existing" class="hidden">
-                    <input type="text" id="search-existing" placeholder="Søk..." style="width:100%;margin-bottom:0.5rem;">
+                    <input type="text" id="search-existing" placeholder="Søk etter navn..."
+                        style="width:100%;margin-bottom:0.8rem;">
                     <div id="existing-list" class="person-select-list"></div>
                     <input type="hidden" id="selected-existing-id">
                 </div>
 
-                <div style="margin-top:1rem;">
+                <div style="margin-top:1.5rem;">
-                    <button id="btn-save" class="btn-primary full-width">Lagre</button>
+                    <button id="btn-save" class="btn-primary full-width">Lagre Person</button>
                 </div>
             </div>
         </div>
     </div>
 
+    <!-- Leaflet Kart JS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
     <!-- Linker til hoved-scriptet -->
     <script type="module" src="script.js"></script>
 </body>
+
 </html>

Script.js

@@ -13,17 +13,16 @@ let currentUser = null;
 let people = [];
 let focusPersonId = null;
 let currentScale = 1.0;
-let modalAction = null; 
+let modalAction = null;
 let modalMode = 'new';
+let mapInstance = null; // Leaflet map
 
 // --- SIKKERHETSSJEKK (Kjøres med en gang) ---
 onAuthStateChanged(auth, (user) => {
     if (user) {
-        // Bruker er logget inn
         currentUser = user;
-        startDataListener(); 
+        startDataListener();
     } else {
-        // Ingen bruker -> Kast tilbake til logg inn
         window.location.href = "index.html";
     }
 });
@@ -40,37 +39,54 @@ if (logoutBtn) {
 
 // --- DATABASE LYTTER ---
 function startDataListener() {
-    // Henter alle familiemedlemmer i sanntid
     const q = query(collection(db, 'familyMembers'));
-    
+
     onSnapshot(q, (snapshot) => {
         people = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
-        
+
-        // Hvis vi ikke har valgt en person å fokusere på ennå:
         if (!focusPersonId && people.length > 0) {
-            // Prøv å finne "Eivind" eller "Meg" som startperson, ellers ta den første
             const me = people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg'));
             focusPersonId = me ? me.id : people[0].id;
         }
+
+        // Oppdater alle visninger
         renderTree();
+        updateMapMarkers();
+        renderTimeline();
     });
 }
 
+// --- NAVIGASJON (TABS) ---
+document.querySelectorAll('.nav-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+        // 1. Visuell tab state
+        document.querySelectorAll('.nav-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+
+        // 2. Skjul/vis seksjoner
+        document.querySelectorAll('.view-section').forEach(s => s.classList.add('hidden'));
+        const targetId = tab.dataset.tab + '-view';
+        document.getElementById(targetId).classList.remove('hidden');
+
+        // 3. Spesialhåndtering
+        if (tab.dataset.tab === 'map') {
+            initMap(); // Sørg for at kartet tegnes riktig når det blir synlig
+        }
+    });
+});
+
 // --- TEGNE TREET (RENDERING) ---
 function renderTree() {
     const rowParents = document.getElementById('row-parents');
     const rowFocus = document.getElementById('row-focus');
     const rowChildren = document.getElementById('row-children');
-    
+
-    // Sjekk at elementene finnes før vi prøver å bruke dem
+    if (!rowParents || !rowFocus || !rowChildren) return;
-    if(!rowParents || !rowFocus || !rowChildren) return;
+
-    
-    // Tøm alt innhold først
     rowParents.innerHTML = '';
     rowFocus.innerHTML = '';
     rowChildren.innerHTML = '';
-    
+
-    // Hvis databasen er tom
     if (people.length === 0) {
         rowFocus.innerHTML = `<button class="btn-primary" onclick="window.openModal('create-first')">Start familietreet</button>`;
         return;
@@ -79,29 +95,28 @@ function renderTree() {
     const focusPerson = people.find(p => p.id === focusPersonId);
     if (!focusPerson) return;
 
-    // A. Foreldre (Over)
+    // A. Foreldre
     const father = people.find(p => p.id === focusPerson.fatherId);
     const mother = people.find(p => p.id === focusPerson.motherId);
     rowParents.appendChild(createSlot(father, 'Far', 'add-parent-m'));
     rowParents.appendChild(createSlot(mother, 'Mor', 'add-parent-f'));
 
-    // B. Partner (Ved siden av)
+    // B. Partner
     const partner = people.find(p => p.id === focusPerson.partnerId);
     if (partner) {
         const pCard = createCard(partner);
         pCard.onclick = () => { focusPersonId = partner.id; renderTree(); };
         rowFocus.appendChild(pCard);
-        
+
-        // Hjerte mellom dem
         const heart = document.createElement('div');
         heart.innerHTML = '<i class="ph-fill ph-heart" style="color:var(--female-color); font-size:1.5rem;"></i>';
         rowFocus.appendChild(heart);
     }
 
-    // C. Fokus Person (Midten)
+    // C. Fokus Person
     rowFocus.appendChild(createCard(focusPerson, true));
 
-    // D. Barn (Under)
+    // D. Barn
     const children = people.filter(p => p.fatherId === focusPersonId || p.motherId === focusPersonId);
     children.forEach(child => {
         const cCard = createCard(child);
@@ -110,34 +125,30 @@ function renderTree() {
     });
 }
 
-// --- HJELPER: LAG KORT ---
 function createCard(person, isFocus = false) {
     const el = document.createElement('div');
     el.className = `card ${isFocus ? 'focus' : ''} ${person.gender === 'F' ? 'female' : 'male'}`;
-    
+
     const year = person.birthDate ? new Date(person.birthDate).getFullYear() : '????';
     const dead = person.deathDate ? '✝ ' : '';
-    
+
     el.innerHTML = `
         <i class="card-icon ph ${person.gender === 'F' ? 'ph-user' : 'ph-user'}"></i>
         <h3>${person.name}</h3>
         <p>${dead}${year}</p>
-        ${person.description ? '<span class="info-badge">Info</span>' : ''}
+        ${person.location ? '<span class="info-badge"><i class="ph-bold ph-map-pin"></i> ' + person.location.split(',')[0] + '</span>' : ''}
     `;
 
-    // Hvis dette er hovedkortet, legg til små pluss-knapper
     if (isFocus) {
         const actions = document.createElement('div');
         actions.className = 'focus-actions';
-        
+
-        // Legg til barn (knapp nede)
         const btnChild = document.createElement('button');
         btnChild.className = 'btn-mini-add add-child';
         btnChild.innerHTML = '<i class="ph-bold ph-plus"></i>';
         btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); };
         actions.appendChild(btnChild);
 
-        // Legg til partner (knapp til høyre) hvis mangler
         if (!person.partnerId) {
             const btnPartner = document.createElement('button');
             btnPartner.className = 'btn-mini-add add-partner';
@@ -150,12 +161,11 @@ function createCard(person, isFocus = false) {
     return el;
 }
 
-// --- HJELPER: LAG SLOT (Tom plass eller kort) ---
 function createSlot(person, label, actionType) {
     const wrapper = document.createElement('div');
     wrapper.className = 'slot-container';
     wrapper.innerHTML = `<span class="slot-label">${label}</span>`;
-    
+
     if (person) {
         const card = createCard(person);
         card.onclick = () => { focusPersonId = person.id; renderTree(); };
@@ -170,34 +180,120 @@ function createSlot(person, label, actionType) {
     return wrapper;
 }
 
-// --- MODAL & LAGRING (Popups) ---
+// --- KART FUNKSJONALITET (Leaflet) ---
+function initMap() {
+    if (mapInstance) {
+        mapInstance.invalidateSize(); // Viktig når kartet vises etter å ha vært skjult
+        return;
+    }
 
-// Gjør funksjonen tilgjengelig i HTML (window.openModal)
+    // Startposisjon: Norge (omtrentlig)
+    mapInstance = L.map('map-container').setView([65.0, 13.0], 5);
+
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 19
+    }).addTo(mapInstance);
+
+    updateMapMarkers();
+}
+
+async function updateMapMarkers() {
+    if (!mapInstance) return;
+
+    // Fjern gamle markører (enklest å tømme og tegne på nytt for nå)
+    mapInstance.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+            mapInstance.removeLayer(layer);
+        }
+    });
+
+    for (const p of people) {
+        if (p.location) {
+            // Prøv å finne koordinater. For nå, antar vi at input KAN være "lat,lng"
+            // I en ekte app ville vi brukt en geocoding service her.
+            // For demo: Hvis location inneholder komma og tall, bruk det.
+            // Ellers, randomiser litt rundt Grimstad for demo-formål hvis det står "Grimstad"
+
+            let lat = 0, lng = 0;
+
+            if (p.location.includes(',')) {
+                const parts = p.location.split(',');
+                if (!isNaN(parseFloat(parts[0]))) {
+                    lat = parseFloat(parts[0]);
+                    lng = parseFloat(parts[1]);
+                }
+            } else if (p.location.toLowerCase().includes('grimstad')) {
+                lat = 58.34 + (Math.random() * 0.05 - 0.025);
+                lng = 8.59 + (Math.random() * 0.05 - 0.025);
+            } else if (p.location.toLowerCase().includes('oslo')) {
+                lat = 59.91; lng = 10.75;
+            }
+
+            if (lat !== 0) {
+                L.marker([lat, lng])
+                    .addTo(mapInstance)
+                    .bindPopup(`<b>${p.name}</b><br>${p.location}`);
+            }
+        }
+    }
+}
+
+// --- TIDSLINJE FUNKSJONALITET ---
+function renderTimeline() {
+    const container = document.getElementById('timeline-content');
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    // Lag en liste av hendelser (Fødsel og Død)
+    const events = [];
+    people.forEach(p => {
+        if (p.birthDate) {
+            events.push({ date: p.birthDate, type: 'Født', person: p.name, desc: p.description });
+        }
+        if (p.deathDate) {
+            events.push({ date: p.deathDate, type: 'Død', person: p.name });
+        }
+    });
+
+    // Sorter kronologisk
+    events.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    events.forEach(ev => {
+        const item = document.createElement('div');
+        item.className = 'timeline-item';
+
+        const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' });
+
+        item.innerHTML = `
+            <div class="timeline-date">${dateStr}</div>
+            <div class="timeline-content">
+                <strong>${ev.person}</strong> ${ev.type.toLowerCase()}
+                ${ev.desc ? `<p style="font-size:0.8rem; color:var(--text-muted); margin-top:0.3rem;">${ev.desc}</p>` : ''}
+            </div>
+        `;
+        container.appendChild(item);
+    });
+}
+
+
+// --- MODAL & LAGRING ---
 window.openModal = (action) => {
     modalAction = action;
     const overlay = document.getElementById('modal-overlay');
-    if(overlay) overlay.classList.remove('hidden');
+    if (overlay) overlay.classList.remove('hidden');
-    
-    // Nullstill skjema
-    const inpName = document.getElementById('inp-name');
-    if(inpName) inpName.value = '';
-    
-    const inpBirth = document.getElementById('inp-birth');
-    if(inpBirth) inpBirth.value = '';
-    
-    const inpDeath = document.getElementById('inp-death');
-    if(inpDeath) inpDeath.value = '';
-    
-    const inpDesc = document.getElementById('inp-desc');
-    if(inpDesc) inpDesc.value = '';
 
-    const selExist = document.getElementById('selected-existing-id');
+    // Nullstill skjema
-    if(selExist) selExist.value = '';
+    ['inp-name', 'inp-birth', 'inp-death', 'inp-desc', 'inp-location', 'selected-existing-id'].forEach(id => {
+        const el = document.getElementById(id);
+        if (el) el.value = '';
+    });
 
     const title = document.getElementById('modal-title');
     const genderRadios = document.getElementsByName('gender');
-    
+
-    // Hjelper for å sette kjønn
     const setGender = (val, disabled) => {
         genderRadios.forEach(r => {
             r.disabled = disabled;
@@ -205,7 +301,6 @@ window.openModal = (action) => {
         });
     };
 
-    // Tilpass tittel og kjønn basert på hva vi legger til
     if (action === 'add-parent-m') { title.textContent = "Legg til Far"; setGender('M', true); }
     else if (action === 'add-parent-f') { title.textContent = "Legg til Mor"; setGender('F', true); }
     else if (action === 'add-child') { title.textContent = "Legg til Barn"; setGender(null, false); }
@@ -216,66 +311,57 @@ window.openModal = (action) => {
     renderExistingList();
 };
 
-// Lukk modal knapp
 const closeBtn = document.getElementById('btn-close-modal');
-if(closeBtn) closeBtn.onclick = () => document.getElementById('modal-overlay').classList.add('hidden');
+if (closeBtn) closeBtn.onclick = () => document.getElementById('modal-overlay').classList.add('hidden');
 
-// Lagre knapp
 const saveBtn = document.getElementById('btn-save');
-if(saveBtn) {
+if (saveBtn) {
     saveBtn.onclick = async () => {
         if (!currentUser) return;
         const focusP = people.find(p => p.id === focusPersonId);
         let targetId = null;
 
-        // 1. Enten lag ny person
         if (modalMode === 'new') {
             const newPerson = {
                 name: document.getElementById('inp-name').value,
                 birthDate: document.getElementById('inp-birth').value,
                 deathDate: document.getElementById('inp-death').value,
                 description: document.getElementById('inp-desc').value,
+                location: document.getElementById('inp-location').value, // NYTT
                 gender: document.querySelector('input[name="gender"]:checked').value,
                 fatherId: null, motherId: null, partnerId: null
             };
-            
+
-            // Auto-koble foreldre hvis vi legger til et barn
             if (modalAction === 'add-child' && focusP) {
                 if (focusP.gender === 'M') newPerson.fatherId = focusP.id;
                 else newPerson.motherId = focusP.id;
-                
-                // Hvis fokuset har en partner, sett den som den andre forelderen
                 if (focusP.partnerId) {
-                    const part = people.find(p=>p.id === focusP.partnerId);
+                    const part = people.find(p => p.id === focusP.partnerId);
-                    if(part) { if(part.gender==='M') newPerson.fatherId=part.id; else newPerson.motherId=part.id; }
+                    if (part) { if (part.gender === 'M') newPerson.fatherId = part.id; else newPerson.motherId = part.id; }
                 }
             }
 
             const docRef = await addDoc(collection(db, 'familyMembers'), newPerson);
             targetId = docRef.id;
-            
+            if (modalAction === 'create-first') focusPersonId = targetId;
-            // Hvis dette var første person i treet
-            if(modalAction === 'create-first') focusPersonId = targetId;
 
         } else {
-            // 2. Eller velg eksisterende
             targetId = document.getElementById('selected-existing-id').value;
         }
 
-        // 3. Opprett relasjoner (linker) i databasen
+        if (focusP && targetId) {
-        if(focusP && targetId) {
             const col = collection(db, 'familyMembers');
             const updates = [];
-            
+
-            if(modalAction === 'add-parent-m') updates.push(updateDoc(doc(col, focusPersonId), {fatherId: targetId}));
+            if (modalAction === 'add-parent-m') updates.push(updateDoc(doc(col, focusPersonId), { fatherId: targetId }));
-            else if(modalAction === 'add-parent-f') updates.push(updateDoc(doc(col, focusPersonId), {motherId: targetId}));
+            else if (modalAction === 'add-parent-f') updates.push(updateDoc(doc(col, focusPersonId), { motherId: targetId }));
-            else if(modalAction === 'add-partner') {
+            else if (modalAction === 'add-partner') {
-                updates.push(updateDoc(doc(col, focusPersonId), {partnerId: targetId}));
+                updates.push(updateDoc(doc(col, focusPersonId), { partnerId: targetId }));
-                updates.push(updateDoc(doc(col, targetId), {partnerId: focusPersonId}));
+                updates.push(updateDoc(doc(col, targetId), { partnerId: focusPersonId }));
             }
-            else if(modalAction === 'add-child' && modalMode === 'existing') {
+            else if (modalAction === 'add-child' && modalMode === 'existing') {
                 const upd = {};
-                if(focusP.gender === 'M') upd.fatherId = focusP.id; else upd.motherId = focusP.id;
+                if (focusP.gender === 'M') upd.fatherId = focusP.id; else upd.motherId = focusP.id;
                 updates.push(updateDoc(doc(col, targetId), upd));
             }
             await Promise.all(updates);
@@ -284,12 +370,11 @@ if(saveBtn) {
     };
 }
 
-// Bytt mellom "Ny" og "Eksisterende" fane i modal
 function setMode(mode) {
     modalMode = mode;
     document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
     const btn = document.querySelector(`.toggle-btn[data-mode="${mode}"]`);
-    if(btn) btn.classList.add('active');
+    if (btn) btn.classList.add('active');
     document.getElementById('form-new').className = mode === 'new' ? '' : 'hidden';
     document.getElementById('form-existing').className = mode === 'existing' ? '' : 'hidden';
 }
@@ -298,18 +383,17 @@ document.querySelectorAll('.toggle-btn').forEach(btn => {
     btn.onclick = () => setMode(btn.dataset.mode);
 });
 
-// Liste over eksisterende personer (for valg)
 function renderExistingList() {
     const list = document.getElementById('existing-list');
-    if(!list) return;
+    if (!list) return;
     list.innerHTML = '';
     const candidates = people.filter(p => p.id !== focusPersonId);
     candidates.forEach(p => {
         const d = document.createElement('div');
         d.className = 'person-option';
         d.innerHTML = `<span>${p.name}</span>`;
-        d.onclick = () => { 
+        d.onclick = () => {
-            document.querySelectorAll('.person-option').forEach(x=>x.classList.remove('selected'));
+            document.querySelectorAll('.person-option').forEach(x => x.classList.remove('selected'));
             d.classList.add('selected');
             document.getElementById('selected-existing-id').value = p.id;
         };
@@ -317,16 +401,16 @@ function renderExistingList() {
     });
 }
 
-// --- ZOOM FUNKSJONALITET ---
+// --- ZOOM ---
 const zoomIn = document.getElementById('btn-zoom-in');
-if(zoomIn) zoomIn.onclick = () => {
+if (zoomIn) zoomIn.onclick = () => {
     currentScale += 0.1;
     document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
     document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
 };
 
 const zoomOut = document.getElementById('btn-zoom-out');
-if(zoomOut) zoomOut.onclick = () => {
+if (zoomOut) zoomOut.onclick = () => {
     if (currentScale > 0.4) currentScale -= 0.1;
     document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
     document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';

index.html

@@ -13,17 +13,17 @@
         <i class="ph-fill ph-tree-evergreen logo-icon"></i>
         
         <h2>Røsstad Arkivet</h2>
-        <p style="margin-bottom: 1.5rem; color: #a7f3d0;">Logg inn for tilgang</p>
+        <p style="margin-bottom: 2rem; color: rgba(255,255,255,0.8); font-weight: 300;">Logg inn for å se familiens historie</p>
         
         <div style="margin-bottom: 1rem;">
-            <input type="email" id="inp-email" placeholder="E-postadresse" style="background: rgba(255,255,255,0.9); color: #333;">
+            <input type="email" id="inp-email" class="login-input" placeholder="E-postadresse">
         </div>
 
-        <div style="margin-bottom: 1.5rem;">
+        <div style="margin-bottom: 2rem;">
-            <input type="password" id="inp-password" placeholder="Passord" style="background: rgba(255,255,255,0.9); color: #333;">
+            <input type="password" id="inp-password" class="login-input" placeholder="Passord">
         </div>
         
-        <button id="btn-login" class="btn-primary full-width">Logg Inn</button>
+        <button id="btn-login" class="btn-primary full-width" style="font-size: 1.1rem; padding: 1rem;">Logg Inn</button>
         
         <p id="error-msg" class="error-msg"></p>
     </div>

style.css

@@ -1,24 +1,40 @@
-/* --- VARIABLER (Norsk Skog) --- */
+/* --- VARIABLER (Røsstad Premium) --- */
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
+
 :root {
-    --forest-green: #1e5128;   /* Mørk gran */
+    /* Palette: Deep Forest Green / Blue-Green Mix */
-    --leaf-green: #4e8d46;     /* Lysere nåler */
+    --primary-dark: #0f2f24;    /* Deepest Forest */
-    --bg-color: #f0f4f1;       /* Lys grågrønn bakgrunn */
+    --primary-main: #134e4a;    /* Røsstad Green/Teal */
-    --card-bg: #ffffff;
+    --primary-light: #2dd4bf;   /* Bright Teal Highlight */
-    --text-main: #1c1c1c;
-    --text-muted: #666;
-    --border-color: #d1d5db;
     
-    --male-color: #2563eb;     /* Blå */
+    --accent-gold: #d97706;     /* Bronze/Gold */
-    --female-color: #db2777;   /* Rosa */
+    --accent-red: #be123c;      /* Deep Berry (for errors/females) */
+    
+    --bg-color: #f0fdf4;        /* Soft Mist Green */
+    --glass-bg: rgba(255, 255, 255, 0.7);
+    --glass-border: rgba(255, 255, 255, 0.5);
+    
+    --text-main: #1e293b;       /* Slate 800 */
+    --text-muted: #64748b;      /* Slate 500 */
+    
+    --male-color: #0ea5e9;      /* Sky Blue */
+    --female-color: #be123c;    /* Rose */
+    
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
 body {
     margin: 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Outfit', sans-serif;
     background-color: var(--bg-color);
     color: var(--text-main);
     height: 100vh;
     overflow: hidden;
+    background-image: 
+        radial-gradient(at 0% 0%, rgba(19, 78, 74, 0.1) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.1) 0px, transparent 50%);
 }
 
 /* --- HJELPEKLASSER --- */
@@ -28,192 +44,346 @@ body {
 /* --- LOGIN SIDE STIL --- */
 body.login-page {
     display: flex; justify-content: center; align-items: center;
-    background: linear-gradient(to bottom, #112d16, #0d1f10);
+    background: linear-gradient(135deg, #0f2f24 0%, #134e4a 100%);
+    position: relative;
+}
+
+body.login-page::before {
+    content: '';
+    position: absolute;
+    width: 100%; height: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .login-box {
     background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(12px);
-    padding: 3rem;
+    -webkit-backdrop-filter: blur(12px);
-    border-radius: 1rem;
+    padding: 3.5rem;
+    border-radius: 1.5rem;
     text-align: center;
     color: white;
     border: 1px solid rgba(255,255,255,0.2);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     width: 100%;
-    max-width: 400px;
+    max-width: 420px;
+    position: relative;
+    z-index: 10;
 }
 
 .logo-icon {
-    font-size: 4rem;
+    font-size: 4.5rem;
-    color: #4ade80;
+    color: var(--primary-light);
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
-    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.3));
+    filter: drop-shadow(0 0 15px rgba(45, 212, 191, 0.4));
+}
+
+.login-box h2 {
+    font-weight: 700;
+    letter-spacing: -0.5px;
+    margin-bottom: 0.5rem;
+}
+
+.login-input {
+    background: rgba(255,255,255,0.95);
+    border: none;
+    padding: 1rem;
+    border-radius: 0.75rem;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: inherit;
+    transition: all 0.2s;
+}
+.login-input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.5);
 }
 
 .error-msg {
     margin-top: 1rem;
-    color: #f87171;
+    color: #fda4af;
     font-size: 0.9rem;
     min-height: 1.2em;
+    font-weight: 500;
 }
 
 /* --- HEADER (Hovedside) --- */
 header {
-    background: var(--forest-green);
+    background: rgba(255, 255, 255, 0.8);
-    color: white;
+    backdrop-filter: blur(10px);
-    padding: 0.8rem 1.5rem;
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(0,0,0,0.05);
+    padding: 1rem 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+    position: sticky; top: 0; z-index: 100;
 }
 
 .brand {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
-    font-weight: bold;
+    font-weight: 700;
-    display: flex; align-items: center; gap: 0.5rem;
+    color: var(--primary-dark);
+    display: flex; align-items: center; gap: 0.75rem;
+}
+.brand i { color: var(--primary-main); }
+
+.nav-tabs {
+    display: flex; gap: 0.5rem;
+    background: rgba(0,0,0,0.05);
+    padding: 0.3rem;
+    border-radius: 0.75rem;
+}
+
+.nav-tab {
+    padding: 0.5rem 1.2rem;
+    border-radius: 0.5rem;
+    border: none;
+    background: transparent;
+    color: var(--text-muted);
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-family: inherit;
+}
+.nav-tab.active {
+    background: white;
+    color: var(--primary-dark);
+    box-shadow: var(--shadow-sm);
+}
+.nav-tab:hover:not(.active) {
+    color: var(--primary-main);
+    background: rgba(255,255,255,0.5);
 }
 
 .controls {
     display: flex; align-items: center; gap: 1rem;
 }
 
-.controls button {
+.controls button.icon-btn {
-    background: none; border: none; color: #a7f3d0;
+    background: none; border: none; color: var(--text-muted);
     font-size: 1.5rem; cursor: pointer; transition: color 0.2s;
+    display: flex; align-items: center; justify-content: center;
 }
-.controls button:hover { color: white; }
+.controls button.icon-btn:hover { color: var(--primary-main); transform: scale(1.1); }
 
 /* --- KNAPPER --- */
 .btn-primary {
-    background-color: var(--leaf-green);
+    background: linear-gradient(135deg, var(--primary-main), var(--primary-dark));
     color: white; border: none; padding: 0.8rem 1.5rem;
-    border-radius: 0.5rem; font-weight: bold; cursor: pointer;
+    border-radius: 0.75rem; font-weight: 600; cursor: pointer;
-    transition: background 0.2s;
+    transition: all 0.2s;
+    box-shadow: 0 4px 6px -1px rgba(19, 78, 74, 0.3);
+}
+.btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 8px -1px rgba(19, 78, 74, 0.4);
 }
-.btn-primary:hover { background-color: var(--forest-green); }
 
 .btn-outline {
     font-size: 0.9rem !important;
-    border: 1px solid rgba(255,255,255,0.3) !important;
+    border: 1px solid var(--primary-main) !important;
-    padding: 0.3rem 0.8rem; border-radius: 4px;
+    color: var(--primary-main) !important;
+    background: transparent;
+    padding: 0.4rem 1rem; border-radius: 0.5rem;
+    font-weight: 600; cursor: pointer;
+}
+.btn-outline:hover {
+    background: var(--primary-main);
+    color: white !important;
 }
 
-/* --- TREET (GRID LAYOUT) --- */
+/* --- MAIN CONTENT AREAS --- */
 #app-container {
     display: flex; height: 100vh; flex-direction: column;
 }
 
+main {
+    flex: 1; overflow: hidden; position: relative;
+}
+
+/* --- TREET (GRID LAYOUT) --- */
 #tree-view {
-    flex: 1; overflow: auto; position: relative;
     display: flex; justify-content: center; align-items: center;
     padding: 3rem;
-    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
+    overflow: auto;
-    background-size: 24px 24px;
+    cursor: grab;
 }
+#tree-view:active { cursor: grabbing; }
 
 .tree-grid {
     display: flex; flex-direction: column; align-items: center;
-    gap: 4rem; transition: transform 0.3s ease;
+    gap: 5rem; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .row-parents, .row-focus, .row-children {
     display: flex; justify-content: center; align-items: center;
     position: relative;
 }
-.row-parents { gap: 3rem; }
+.row-parents { gap: 4rem; }
-.row-focus { gap: 2rem; }
+.row-focus { gap: 3rem; }
-.row-children { gap: 1.5rem; flex-wrap: wrap; }
+.row-children { gap: 2rem; flex-wrap: wrap; }
 
 /* --- KORT --- */
 .card {
-    background: white; width: 180px; min-height: 110px;
+    background: rgba(255, 255, 255, 0.9);
-    border-radius: 12px; border: 2px solid var(--border-color);
+    backdrop-filter: blur(8px);
-    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
+    width: 200px; min-height: 130px;
-    padding: 1rem; display: flex; flex-direction: column; align-items: center;
+    border-radius: 1rem;
-    position: relative; cursor: pointer; transition: all 0.2s;
+    border: 1px solid white;
+    box-shadow: var(--shadow-md);
+    padding: 1.2rem;
+    display: flex; flex-direction: column; align-items: center;
+    position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-light);
 }
-.card:hover { transform: translateY(-3px); border-color: var(--leaf-green); }
 .card.focus {
-    border-color: var(--forest-green); background: #f0fdf4;
+    border: 2px solid var(--primary-main);
-    transform: scale(1.1); z-index: 10;
+    background: white;
-    box-shadow: 0 0 0 4px rgba(78, 141, 70, 0.2);
+    transform: scale(1.15);
+    z-index: 10;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(45, 212, 191, 0.2);
 }
 
-.card h3 { margin: 0.5rem 0 0.2rem 0; font-size: 0.95rem; text-align: center; }
+.card h3 { margin: 0.75rem 0 0.25rem 0; font-size: 1rem; text-align: center; font-weight: 700; color: var(--text-main); }
-.card p { margin: 0; font-size: 0.75rem; color: var(--text-muted); font-family: monospace; }
+.card p { margin: 0; font-size: 0.8rem; color: var(--text-muted); font-family: 'Outfit', monospace; font-weight: 500; }
-.card .info-badge { font-size: 0.7rem; color: var(--forest-green); background: #dcfce7; padding: 2px 6px; border-radius: 10px; margin-top: 5px; }
+.card .info-badge {
+    font-size: 0.7rem; color: var(--primary-dark);
+    background: var(--primary-light);
+    background: rgba(45, 212, 191, 0.2);
+    padding: 2px 8px; border-radius: 12px; margin-top: 8px; font-weight: 600;
+}
 
-.card-icon { font-size: 1.5rem; padding: 8px; border-radius: 50%; }
+.card-icon {
-.male .card-icon { color: var(--male-color); background: #eff6ff; }
+    font-size: 1.8rem; padding: 10px; border-radius: 50%;
-.female .card-icon { color: var(--female-color); background: #fdf2f8; }
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+}
+.male .card-icon { color: var(--male-color); background: #e0f2fe; }
+.female .card-icon { color: var(--female-color); background: #ffe4e6; }
 
 /* --- PLUSS-KNAPPER --- */
 .slot-container {
-    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
+    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
 }
 .slot-label {
-    font-size: 0.7rem; text-transform: uppercase; font-weight: bold; color: var(--text-muted);
+    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
+    font-weight: 700; color: var(--text-muted); opacity: 0.7;
 }
 .btn-add-slot {
-    width: 40px; height: 40px; border-radius: 50%;
+    width: 48px; height: 48px; border-radius: 50%;
-    border: 2px dashed #9ca3af; background: rgba(255,255,255,0.5);
+    border: 2px dashed #cbd5e1; background: rgba(255,255,255,0.4);
-    color: #9ca3af; display: flex; justify-content: center; align-items: center;
+    color: #94a3b8; display: flex; justify-content: center; align-items: center;
-    cursor: pointer; font-size: 1.2rem; transition: all 0.2s;
+    cursor: pointer; font-size: 1.4rem; transition: all 0.2s;
+}
+.btn-add-slot:hover {
+    border-color: var(--primary-main); color: var(--primary-main);
+    background: white; transform: rotate(90deg);
 }
-.btn-add-slot:hover { border-color: var(--forest-green); color: var(--forest-green); background: white; }
 
 .focus-actions {
     position: absolute; width: 100%; height: 100%; pointer-events: none;
 }
 .btn-mini-add {
     pointer-events: auto; position: absolute;
-    width: 28px; height: 28px; background: var(--leaf-green);
+    width: 32px; height: 32px;
+    background: var(--primary-main);
     color: white; border-radius: 50%; border: none;
     display: flex; justify-content: center; align-items: center;
-    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 20;
+    cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.2); z-index: 20;
+    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.btn-mini-add:hover { background: var(--forest-green); transform: scale(1.15); }
+.btn-mini-add:hover { background: var(--primary-dark); transform: scale(1.2); }
-.add-child { bottom: -14px; left: 50%; transform: translateX(-50%); }
+.add-child { bottom: -16px; left: 50%; transform: translateX(-50%); }
-.add-partner { top: 50%; right: -14px; transform: translateY(-50%); }
+.add-partner { top: 50%; right: -16px; transform: translateY(-50%); }
 
 /* --- MODAL --- */
 .modal-overlay {
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
+    background: rgba(15, 47, 36, 0.6); backdrop-filter: blur(4px);
     display: flex; justify-content: center; align-items: center; z-index: 3000;
+    opacity: 0; animation: fadeIn 0.2s forwards;
 }
+@keyframes fadeIn { to { opacity: 1; } }
+
 .modal {
-    background: white; width: 90%; max-width: 500px;
+    background: white; width: 90%; max-width: 550px;
-    border-radius: 1rem; padding: 1.5rem;
+    border-radius: 1.5rem; padding: 2rem;
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    transform: scale(0.95); animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }
+@keyframes popIn { to { transform: scale(1); } }
+
 .modal-header {
     display: flex; justify-content: space-between; align-items: center;
-    border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem;
+    border-bottom: 1px solid var(--glass-border); padding-bottom: 1.5rem; margin-bottom: 1.5rem;
 }
+.modal-header h3 { margin: 0; font-size: 1.5rem; color: var(--primary-dark); }
+
 .toggle-group {
-    display: flex; background: #f3f4f6; padding: 4px; border-radius: 8px; margin-bottom: 1rem;
+    display: flex; background: #f1f5f9; padding: 5px; border-radius: 10px; margin-bottom: 1.5rem;
 }
 .toggle-btn {
-    flex: 1; padding: 8px; border: none; background: transparent;
+    flex: 1; padding: 10px; border: none; background: transparent;
-    cursor: pointer; border-radius: 6px; font-weight: 600; color: #6b7280;
+    cursor: pointer; border-radius: 8px; font-weight: 600; color: var(--text-muted);
+    transition: all 0.2s;
 }
 .toggle-btn.active {
-    background: white; color: var(--forest-green); box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    background: white; color: var(--primary-main);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
-.form-group { margin-bottom: 1rem; }
+
-.form-group label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 0.3rem; }
+.form-group { margin-bottom: 1.2rem; }
+.form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-main); }
 .form-row { display: flex; gap: 1rem; }
 .form-row .form-group { flex: 1; }
+
 input, select, textarea {
-    width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 0.5rem; font-size: 1rem;
+    width: 100%; padding: 0.8rem;
+    border: 1px solid #cbd5e1; border-radius: 0.75rem;
+    font-size: 1rem; font-family: inherit;
+    transition: border 0.2s; box-sizing: border-box;
 }
+input:focus, select:focus, textarea:focus {
+    outline: none; border-color: var(--primary-main);
+    box-shadow: 0 0 0 3px rgba(19, 78, 74, 0.1);
+}
+
 .person-select-list {
-    max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 0.5rem;
+    max-height: 200px; overflow-y: auto;
+    border: 1px solid #cbd5e1; border-radius: 0.75rem;
 }
 .person-option {
-    padding: 0.75rem; border-bottom: 1px solid #f3f4f6; cursor: pointer; display: flex; justify-content: space-between;
+    padding: 0.8rem; border-bottom: 1px solid #f1f5f9; cursor: pointer;
+    display: flex; justify-content: space-between; transition: background 0.1s;
 }
-.person-option.selected { background: #ecfdf5; border-left: 4px solid var(--forest-green); }
+.person-option:hover { background: #f8fafc; }
+.person-option.selected {
+    background: #f0fdf4; border-left: 4px solid var(--primary-main);
+}
+
+/* --- KART OG TIDSLINJE (Placeholder) --- */
+#map-view, #timeline-view {
+    width: 100%; height: 100%;
+}
+#map-container {
+    width: 100%; height: 100%;
+    background: #e2e8f0; /* Placeholder grå */
+}
+
+/* Timeline specific */
+.timeline-container {
+    max-width: 800px; margin: 0 auto; padding: 3rem 1rem;
+}
+.timeline-item {
+    position: relative; padding-left: 2rem; margin-bottom: 2rem; border-left: 2px solid var(--primary-light);
+}
+.timeline-item::before {
+    content: ''; position: absolute; left: -6px; top: 0;
+    width: 10px; height: 10px; border-radius: 50%; background: var(--primary-main);
+}
+.timeline-date { font-size: 0.85rem; color: var(--primary-main); font-weight: 700; }
+.timeline-content { background: white; padding: 1rem; border-radius: 0.5rem; box-shadow: var(--shadow-sm); margin-top: 0.5rem; }