From 1522cf6975dc2247c16d63075c04293ba37785f9 Mon Sep 17 00:00:00 2001 From: Anaru Date: Tue, 25 Nov 2025 11:49:04 +0100 Subject: [PATCH] feat: introduce map and timeline views with Leaflet integration and enhance person cards with location data. --- Røsstad.html | 89 ++++++++++--- Script.js | 258 +++++++++++++++++++++++++------------- index.html | 10 +- style.css | 344 ++++++++++++++++++++++++++++++++++++++------------- 4 files changed, 504 insertions(+), 197 deletions(-) diff --git a/Røsstad.html b/Røsstad.html index 7a0c942..2cd3d64 100644 --- a/Røsstad.html +++ b/Røsstad.html @@ -1,12 +1,21 @@ + Røsstad Familietre - + + + + + + + + @@ -16,19 +25,44 @@ Røsstad Familietre + + +
+ + + +
+
- - 100% - + + 100% + +
-
-
-
-
-
+
+ +
+
+
+
+
+
+
+ + + + + +
@@ -38,9 +72,11 @@
- +
- +
@@ -50,7 +86,7 @@
- +
@@ -59,30 +95,47 @@
- - + +
+ + +
+ + +

Brukes til å + plassere personen på kartet.

+
+
- +
-
- +
+
+ + + + \ No newline at end of file diff --git a/Script.js b/Script.js index 4e5b92f..42d7f02 100644 --- a/Script.js +++ b/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; - - // Tøm alt innhold først + + if (!rowParents || !rowFocus || !rowChildren) return; + rowParents.innerHTML = ''; rowFocus.innerHTML = ''; rowChildren.innerHTML = ''; - - // Hvis databasen er tom + if (people.length === 0) { rowFocus.innerHTML = ``; 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 = ''; 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 = `

${person.name}

${dead}${year}

- ${person.description ? 'Info' : ''} + ${person.location ? ' ' + person.location.split(',')[0] + '' : ''} `; - // 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 = ''; 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 = `${label}`; - + 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: '© OpenStreetMap contributors © CARTO', + 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(`${p.name}
${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 = ` +
${dateStr}
+
+ ${ev.person} ${ev.type.toLowerCase()} + ${ev.desc ? `

${ev.desc}

` : ''} +
+ `; + container.appendChild(item); + }); +} + + +// --- MODAL & LAGRING --- window.openModal = (action) => { modalAction = action; const overlay = document.getElementById('modal-overlay'); - 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 = ''; + if (overlay) overlay.classList.remove('hidden'); - const selExist = document.getElementById('selected-existing-id'); - if(selExist) selExist.value = ''; + // Nullstill skjema + ['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); - if(part) { if(part.gender==='M') newPerson.fatherId=part.id; else newPerson.motherId=part.id; } + const part = people.find(p => p.id === focusP.partnerId); + 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; - - // Hvis dette var første person i treet - if(modalAction === 'create-first') focusPersonId = targetId; + 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})); - else if(modalAction === 'add-parent-f') updates.push(updateDoc(doc(col, focusPersonId), {motherId: targetId})); - else if(modalAction === 'add-partner') { - updates.push(updateDoc(doc(col, focusPersonId), {partnerId: targetId})); - updates.push(updateDoc(doc(col, targetId), {partnerId: focusPersonId})); + + 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-partner') { + updates.push(updateDoc(doc(col, focusPersonId), { partnerId: targetId })); + 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 = `${p.name}`; - d.onclick = () => { - document.querySelectorAll('.person-option').forEach(x=>x.classList.remove('selected')); + d.onclick = () => { + 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) + '%'; diff --git a/index.html b/index.html index 20481d4..e1a518b 100644 --- a/index.html +++ b/index.html @@ -13,17 +13,17 @@

Røsstad Arkivet

-

Logg inn for tilgang

+

Logg inn for å se familiens historie

- +
-
- +
+
- +

diff --git a/style.css b/style.css index 0bedb43..0720c48 100644 --- a/style.css +++ b/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 */ - --leaf-green: #4e8d46; /* Lysere nåler */ - --bg-color: #f0f4f1; /* Lys grågrønn bakgrunn */ - --card-bg: #ffffff; - --text-main: #1c1c1c; - --text-muted: #666; - --border-color: #d1d5db; + /* Palette: Deep Forest Green / Blue-Green Mix */ + --primary-dark: #0f2f24; /* Deepest Forest */ + --primary-main: #134e4a; /* Røsstad Green/Teal */ + --primary-light: #2dd4bf; /* Bright Teal Highlight */ - --male-color: #2563eb; /* Blå */ - --female-color: #db2777; /* Rosa */ + --accent-gold: #d97706; /* Bronze/Gold */ + --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); - padding: 3rem; - border-radius: 1rem; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + 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; - color: #4ade80; - margin-bottom: 1rem; - filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.3)); + font-size: 4.5rem; + color: var(--primary-light); + margin-bottom: 1.5rem; + 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); - color: white; - padding: 0.8rem 1.5rem; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + -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-weight: bold; - display: flex; align-items: center; gap: 0.5rem; + font-size: 1.4rem; + font-weight: 700; + 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 { - background: none; border: none; color: #a7f3d0; +.controls button.icon-btn { + 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; - transition: background 0.2s; + border-radius: 0.75rem; font-weight: 600; cursor: pointer; + 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; - padding: 0.3rem 0.8rem; border-radius: 4px; + border: 1px solid var(--primary-main) !important; + 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); - background-size: 24px 24px; + overflow: auto; + 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-focus { gap: 2rem; } -.row-children { gap: 1.5rem; flex-wrap: wrap; } +.row-parents { gap: 4rem; } +.row-focus { gap: 3rem; } +.row-children { gap: 2rem; flex-wrap: wrap; } /* --- KORT --- */ .card { - background: white; width: 180px; min-height: 110px; - border-radius: 12px; border: 2px solid var(--border-color); - box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); - padding: 1rem; display: flex; flex-direction: column; align-items: center; - position: relative; cursor: pointer; transition: all 0.2s; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + width: 200px; min-height: 130px; + border-radius: 1rem; + 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; - transform: scale(1.1); z-index: 10; - box-shadow: 0 0 0 4px rgba(78, 141, 70, 0.2); + border: 2px solid var(--primary-main); + background: white; + 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 p { margin: 0; font-size: 0.75rem; color: var(--text-muted); font-family: monospace; } -.card .info-badge { font-size: 0.7rem; color: var(--forest-green); background: #dcfce7; padding: 2px 6px; border-radius: 10px; margin-top: 5px; } +.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.8rem; color: var(--text-muted); font-family: 'Outfit', monospace; font-weight: 500; } +.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%; } -.male .card-icon { color: var(--male-color); background: #eff6ff; } -.female .card-icon { color: var(--female-color); background: #fdf2f8; } +.card-icon { + font-size: 1.8rem; padding: 10px; border-radius: 50%; + 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%; - border: 2px dashed #9ca3af; background: rgba(255,255,255,0.5); - color: #9ca3af; display: flex; justify-content: center; align-items: center; - cursor: pointer; font-size: 1.2rem; transition: all 0.2s; + width: 48px; height: 48px; border-radius: 50%; + border: 2px dashed #cbd5e1; background: rgba(255,255,255,0.4); + color: #94a3b8; display: flex; justify-content: center; align-items: center; + 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); } -.add-child { bottom: -14px; left: 50%; transform: translateX(-50%); } -.add-partner { top: 50%; right: -14px; transform: translateY(-50%); } +.btn-mini-add:hover { background: var(--primary-dark); transform: scale(1.2); } +.add-child { bottom: -16px; left: 50%; transform: translateX(-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; - border-radius: 1rem; padding: 1.5rem; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); + background: white; width: 90%; max-width: 550px; + border-radius: 1.5rem; padding: 2rem; + 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; - cursor: pointer; border-radius: 6px; font-weight: 600; color: #6b7280; + flex: 1; padding: 10px; border: none; background: transparent; + 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; }