refactor: Centralize state management into a state object and update UI rendering logic and element structure.
This commit is contained in:
parent
1522cf6975
commit
bde8f2b693
6 changed files with 864 additions and 642 deletions
144
Røsstad.html
144
Røsstad.html
|
|
@ -6,135 +6,147 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Røsstad Familietre</title>
|
<title>Røsstad Familietre</title>
|
||||||
|
|
||||||
<!-- Ikoner -->
|
<!-- Icons -->
|
||||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||||
|
|
||||||
<!-- Leaflet Kart CSS -->
|
<!-- Leaflet Map CSS -->
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||||
|
|
||||||
|
<!-- Main Styles -->
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- APP CONTAINER -->
|
<div id="app-root">
|
||||||
<div id="app-container">
|
<!-- HEADER -->
|
||||||
<header>
|
<header class="app-header">
|
||||||
<div class="brand">
|
<div class="brand-logo">
|
||||||
<i class="ph-fill ph-tree-evergreen"></i>
|
<i class="ph-fill ph-tree-evergreen"></i>
|
||||||
<span>Røsstad Familietre</span>
|
<span>Røsstad Familietre</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Navigasjon -->
|
<!-- TABS -->
|
||||||
<div class="nav-tabs">
|
<nav class="nav-tabs">
|
||||||
<button class="nav-tab active" data-tab="tree">Familietre</button>
|
<button class="nav-tab active" data-view="tree">Familietre</button>
|
||||||
<button class="nav-tab" data-tab="map">Kart</button>
|
<button class="nav-tab" data-view="map">Kart</button>
|
||||||
<button class="nav-tab" data-tab="timeline">Tidslinje</button>
|
<button class="nav-tab" data-view="timeline">Tidslinje</button>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<div class="controls">
|
<!-- CONTROLS -->
|
||||||
|
<div class="header-controls">
|
||||||
<button id="btn-zoom-out" class="icon-btn" title="Zoom ut"><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"
|
<span id="zoom-display"
|
||||||
style="font-size: 0.9rem; font-weight: 600; color: var(--text-muted); width: 50px; text-align: center;">100%</span>
|
style="font-size:0.9rem; font-weight:600; width:40px; text-align:center;">100%</span>
|
||||||
<button id="btn-zoom-in" class="icon-btn" title="Zoom inn"><i class="ph ph-plus-circle"></i></button>
|
<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 style="width:1px; height:24px; background:#cbd5e1; margin:0 0.5rem;"></div>
|
||||||
|
|
||||||
|
<button id="btn-logout" class="btn-logout">Logg ut</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main>
|
<!-- MAIN CONTENT -->
|
||||||
<!-- 1. TRE VISNING -->
|
<main style="flex:1; position:relative; overflow:hidden;">
|
||||||
<div id="tree-view" class="view-section">
|
|
||||||
|
<!-- VIEW: TREE -->
|
||||||
|
<div id="view-tree" class="view-section">
|
||||||
|
<div id="tree-container">
|
||||||
<div id="tree-grid" class="tree-grid">
|
<div id="tree-grid" class="tree-grid">
|
||||||
<div id="row-parents" class="row-parents"></div>
|
<div id="row-parents" class="tree-row"></div>
|
||||||
<div id="row-focus" class="row-focus"></div>
|
<div id="row-focus" class="tree-row"></div>
|
||||||
<div id="row-children" class="row-children"></div>
|
<div id="row-children" class="tree-row children"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2. KART VISNING -->
|
<!-- VIEW: MAP -->
|
||||||
<div id="map-view" class="view-section hidden">
|
<div id="view-map" class="view-section hidden">
|
||||||
<div id="map-container"></div>
|
<div id="map-container"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 3. TIDSLINJE VISNING -->
|
<!-- VIEW: TIMELINE -->
|
||||||
<div id="timeline-view" class="view-section hidden">
|
<div id="view-timeline" class="view-section hidden">
|
||||||
<div class="timeline-container" id="timeline-content">
|
<div class="timeline-wrapper" id="timeline-list">
|
||||||
<!-- Tidslinje elementer genereres her -->
|
<!-- Events injected here -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- MODAL (Popup) -->
|
<!-- MODAL -->
|
||||||
<div id="modal-overlay" class="modal-overlay hidden">
|
<div id="modal-overlay" class="modal-overlay hidden">
|
||||||
<div class="modal">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h3 id="modal-title">Legg til Person</h3>
|
<h3 id="modal-title" class="modal-title">Legg til Person</h3>
|
||||||
<button id="btn-close-modal" class="btn-icon"
|
<button id="btn-close-modal" class="icon-btn"><i class="ph ph-x"></i></button>
|
||||||
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>
|
||||||
|
|
||||||
<div class="toggle-group" id="mode-toggle">
|
<div style="background:#f1f5f9; padding:4px; border-radius:8px; display:flex; margin-bottom:1.5rem;">
|
||||||
<button class="toggle-btn active" data-mode="new">Opprett Ny</button>
|
<button class="nav-tab active full-width" id="tab-new" onclick="window.setModalMode('new')">Ny
|
||||||
<button class="toggle-btn" data-mode="existing">Velg fra Database</button>
|
Person</button>
|
||||||
|
<button class="nav-tab full-width" id="tab-existing"
|
||||||
|
onclick="window.setModalMode('existing')">Eksisterende</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body">
|
|
||||||
<div id="form-new">
|
<div id="form-new">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Navn</label>
|
<label class="form-label">Navn</label>
|
||||||
<input type="text" id="inp-name" placeholder="Fullt navn">
|
<input type="text" id="inp-name" class="input-field" placeholder="Fullt navn">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<div class="form-group"><label>Fødselsdato</label><input type="date" id="inp-birth"></div>
|
<div class="form-group" style="flex:1">
|
||||||
<div class="form-group"><label>Dødsdato</label><input type="date" id="inp-death"></div>
|
<label class="form-label">Fødselsdato</label>
|
||||||
|
<input type="date" id="inp-birth" class="input-field">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group" style="flex:1">
|
||||||
<label>Kjønn</label>
|
<label class="form-label">Dødsdato</label>
|
||||||
<div class="radio-group" style="display:flex; gap:1rem;">
|
<input type="date" id="inp-death" class="input-field">
|
||||||
<label style="font-weight:normal; display:flex; align-items:center; gap:0.5rem;"><input
|
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- NYTT: Sted for kart -->
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Bosted / Opprinnelse (for Kart)</label>
|
<label class="form-label">Kjønn</label>
|
||||||
<input type="text" id="inp-location" placeholder="F.eks. 'Grimstad, Norge' eller koordinater">
|
<div style="display:flex; gap:1.5rem;">
|
||||||
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem;">Brukes til å
|
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
|
||||||
plassere personen på kartet.</p>
|
<input type="radio" name="gender" value="M" checked> Mann
|
||||||
|
</label>
|
||||||
|
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
|
||||||
|
<input type="radio" name="gender" value="F"> Kvinne
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Beskrivelse</label>
|
<label class="form-label">Sted (for Kart)</label>
|
||||||
<textarea id="inp-desc" rows="3" placeholder="Kort historie eller notater..."></textarea>
|
<input type="text" id="inp-location" class="input-field" placeholder="F.eks. Grimstad, Norge">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Notater</label>
|
||||||
|
<textarea id="inp-desc" class="input-field" rows="3" placeholder="Kort beskrivelse..."></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="form-existing" class="hidden">
|
<div id="form-existing" class="hidden">
|
||||||
<input type="text" id="search-existing" placeholder="Søk etter navn..."
|
<input type="text" id="search-existing" class="input-field" placeholder="Søk etter navn...">
|
||||||
style="width:100%;margin-bottom:0.8rem;">
|
<div id="existing-list"
|
||||||
<div id="existing-list" class="person-select-list"></div>
|
style="max-height:200px; overflow-y:auto; border:1px solid #cbd5e1; border-radius:0.5rem;"></div>
|
||||||
<input type="hidden" id="selected-existing-id">
|
<input type="hidden" id="selected-existing-id">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top:1.5rem;">
|
<button id="btn-save" class="btn-primary" style="margin-top:1rem;">Lagre</button>
|
||||||
<button id="btn-save" class="btn-primary full-width">Lagre Person</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Leaflet Kart JS -->
|
<!-- Leaflet JS -->
|
||||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||||
|
|
||||||
<!-- Linker til hoved-scriptet -->
|
<!-- App Logic -->
|
||||||
<script type="module" src="script.js"></script>
|
<script type="module" src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
460
Script.js
460
Script.js
|
|
@ -3,156 +3,176 @@ import { getAuth, onAuthStateChanged, signOut } from "https://www.gstatic.com/fi
|
||||||
import { getFirestore, collection, addDoc, updateDoc, doc, onSnapshot, query } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";
|
import { getFirestore, collection, addDoc, updateDoc, doc, onSnapshot, query } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";
|
||||||
import { firebaseConfig } from "./config.js";
|
import { firebaseConfig } from "./config.js";
|
||||||
|
|
||||||
// --- INIT ---
|
// --- INITIALIZATION ---
|
||||||
const app = initializeApp(firebaseConfig);
|
const app = initializeApp(firebaseConfig);
|
||||||
const auth = getAuth(app);
|
const auth = getAuth(app);
|
||||||
const db = getFirestore(app);
|
const db = getFirestore(app);
|
||||||
|
|
||||||
// --- VARIABLER ---
|
// --- STATE ---
|
||||||
let currentUser = null;
|
const state = {
|
||||||
let people = [];
|
user: null,
|
||||||
let focusPersonId = null;
|
people: [],
|
||||||
let currentScale = 1.0;
|
focusId: null,
|
||||||
let modalAction = null;
|
scale: 1.0,
|
||||||
let modalMode = 'new';
|
modal: {
|
||||||
let mapInstance = null; // Leaflet map
|
action: null, // 'add-child', 'add-parent-m', etc.
|
||||||
|
mode: 'new' // 'new' or 'existing'
|
||||||
|
},
|
||||||
|
map: null
|
||||||
|
};
|
||||||
|
|
||||||
// --- SIKKERHETSSJEKK (Kjøres med en gang) ---
|
// --- AUTHENTICATION ---
|
||||||
onAuthStateChanged(auth, (user) => {
|
onAuthStateChanged(auth, (user) => {
|
||||||
if (user) {
|
if (user) {
|
||||||
currentUser = user;
|
state.user = user;
|
||||||
startDataListener();
|
initApp();
|
||||||
} else {
|
} else {
|
||||||
window.location.href = "index.html";
|
window.location.href = "index.html";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Logg ut knapp
|
document.getElementById('btn-logout')?.addEventListener('click', () => {
|
||||||
const logoutBtn = document.getElementById('btn-logout');
|
signOut(auth).then(() => window.location.href = "index.html");
|
||||||
if (logoutBtn) {
|
|
||||||
logoutBtn.addEventListener('click', () => {
|
|
||||||
signOut(auth).then(() => {
|
|
||||||
window.location.href = "index.html";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- DATABASE LYTTER ---
|
|
||||||
function startDataListener() {
|
|
||||||
const q = query(collection(db, 'familyMembers'));
|
|
||||||
|
|
||||||
onSnapshot(q, (snapshot) => {
|
|
||||||
people = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
|
|
||||||
|
|
||||||
if (!focusPersonId && people.length > 0) {
|
|
||||||
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) ---
|
// --- APP LOGIC ---
|
||||||
|
function initApp() {
|
||||||
|
// Start Data Listener
|
||||||
|
const q = query(collection(db, 'familyMembers'));
|
||||||
|
onSnapshot(q, (snapshot) => {
|
||||||
|
state.people = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));
|
||||||
|
|
||||||
|
// Set initial focus if needed
|
||||||
|
if (!state.focusId && state.people.length > 0) {
|
||||||
|
const me = state.people.find(p => p.name && (p.name.toLowerCase().includes('eivind') || p.name.toLowerCase() === 'meg'));
|
||||||
|
state.focusId = me ? me.id : state.people[0].id;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAll();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Setup Navigation
|
||||||
|
setupTabs();
|
||||||
|
setupZoom();
|
||||||
|
setupModal();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderAll() {
|
||||||
|
renderTree();
|
||||||
|
renderMap();
|
||||||
|
renderTimeline();
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- TAB NAVIGATION ---
|
||||||
|
function setupTabs() {
|
||||||
|
document.querySelectorAll('.nav-tab[data-view]').forEach(btn => {
|
||||||
|
btn.addEventListener('click', () => {
|
||||||
|
// Update Active Tab
|
||||||
|
document.querySelectorAll('.nav-tab[data-view]').forEach(b => b.classList.remove('active'));
|
||||||
|
btn.classList.add('active');
|
||||||
|
|
||||||
|
// Show View
|
||||||
|
document.querySelectorAll('.view-section').forEach(v => v.classList.add('hidden'));
|
||||||
|
const viewId = `view-${btn.dataset.view}`;
|
||||||
|
document.getElementById(viewId).classList.remove('hidden');
|
||||||
|
|
||||||
|
// Special handling for Map resize
|
||||||
|
if (btn.dataset.view === 'map' && state.map) {
|
||||||
|
setTimeout(() => state.map.invalidateSize(), 100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- TREE RENDERER ---
|
||||||
function renderTree() {
|
function renderTree() {
|
||||||
const rowParents = document.getElementById('row-parents');
|
const parentsRow = document.getElementById('row-parents');
|
||||||
const rowFocus = document.getElementById('row-focus');
|
const focusRow = document.getElementById('row-focus');
|
||||||
const rowChildren = document.getElementById('row-children');
|
const childrenRow = document.getElementById('row-children');
|
||||||
|
|
||||||
if (!rowParents || !rowFocus || !rowChildren) return;
|
if (!parentsRow || !focusRow || !childrenRow) return;
|
||||||
|
|
||||||
rowParents.innerHTML = '';
|
parentsRow.innerHTML = '';
|
||||||
rowFocus.innerHTML = '';
|
focusRow.innerHTML = '';
|
||||||
rowChildren.innerHTML = '';
|
childrenRow.innerHTML = '';
|
||||||
|
|
||||||
if (people.length === 0) {
|
if (state.people.length === 0) {
|
||||||
rowFocus.innerHTML = `<button class="btn-primary" onclick="window.openModal('create-first')">Start familietreet</button>`;
|
focusRow.innerHTML = `<button class="btn-primary" onclick="window.openModal('create-first')">Start familietreet</button>`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const focusPerson = people.find(p => p.id === focusPersonId);
|
const focusPerson = state.people.find(p => p.id === state.focusId);
|
||||||
if (!focusPerson) return;
|
if (!focusPerson) return;
|
||||||
|
|
||||||
// A. Foreldre
|
// 1. Parents
|
||||||
const father = people.find(p => p.id === focusPerson.fatherId);
|
const father = state.people.find(p => p.id === focusPerson.fatherId);
|
||||||
const mother = people.find(p => p.id === focusPerson.motherId);
|
const mother = state.people.find(p => p.id === focusPerson.motherId);
|
||||||
rowParents.appendChild(createSlot(father, 'Far', 'add-parent-m'));
|
parentsRow.appendChild(createSlot(father, 'Far', 'add-parent-m'));
|
||||||
rowParents.appendChild(createSlot(mother, 'Mor', 'add-parent-f'));
|
parentsRow.appendChild(createSlot(mother, 'Mor', 'add-parent-f'));
|
||||||
|
|
||||||
// B. Partner
|
// 2. Partner (Left of Focus)
|
||||||
const partner = people.find(p => p.id === focusPerson.partnerId);
|
const partner = state.people.find(p => p.id === focusPerson.partnerId);
|
||||||
if (partner) {
|
if (partner) {
|
||||||
const pCard = createCard(partner);
|
const pCard = createCard(partner);
|
||||||
pCard.onclick = () => { focusPersonId = partner.id; renderTree(); };
|
pCard.onclick = () => setFocus(partner.id);
|
||||||
rowFocus.appendChild(pCard);
|
focusRow.appendChild(pCard);
|
||||||
|
|
||||||
|
// Heart Icon
|
||||||
const heart = document.createElement('div');
|
const heart = document.createElement('div');
|
||||||
heart.innerHTML = '<i class="ph-fill ph-heart" style="color:var(--female-color); font-size:1.5rem;"></i>';
|
heart.innerHTML = '<i class="ph-fill ph-heart" style="color:var(--color-female); font-size:1.5rem;"></i>';
|
||||||
rowFocus.appendChild(heart);
|
focusRow.appendChild(heart);
|
||||||
}
|
}
|
||||||
|
|
||||||
// C. Fokus Person
|
// 3. Focus Person
|
||||||
rowFocus.appendChild(createCard(focusPerson, true));
|
focusRow.appendChild(createCard(focusPerson, true));
|
||||||
|
|
||||||
// D. Barn
|
// 4. Children
|
||||||
const children = people.filter(p => p.fatherId === focusPersonId || p.motherId === focusPersonId);
|
const children = state.people.filter(p => p.fatherId === state.focusId || p.motherId === state.focusId);
|
||||||
children.forEach(child => {
|
children.forEach(child => {
|
||||||
const cCard = createCard(child);
|
const cCard = createCard(child);
|
||||||
cCard.onclick = () => { focusPersonId = child.id; renderTree(); };
|
cCard.onclick = () => setFocus(child.id);
|
||||||
rowChildren.appendChild(cCard);
|
childrenRow.appendChild(cCard);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setFocus(id) {
|
||||||
|
state.focusId = id;
|
||||||
|
renderTree();
|
||||||
|
}
|
||||||
|
|
||||||
function createCard(person, isFocus = false) {
|
function createCard(person, isFocus = false) {
|
||||||
const el = document.createElement('div');
|
const el = document.createElement('div');
|
||||||
el.className = `card ${isFocus ? 'focus' : ''} ${person.gender === 'F' ? 'female' : 'male'}`;
|
el.className = `card ${isFocus ? 'focus' : ''} ${person.gender === 'F' ? 'female' : 'male'}`;
|
||||||
|
|
||||||
const year = person.birthDate ? new Date(person.birthDate).getFullYear() : '????';
|
const year = person.birthDate ? new Date(person.birthDate).getFullYear() : '';
|
||||||
const dead = person.deathDate ? '✝ ' : '';
|
const dead = person.deathDate ? '✝ ' : '';
|
||||||
|
const loc = person.location ? person.location.split(',')[0] : '';
|
||||||
|
|
||||||
el.innerHTML = `
|
el.innerHTML = `
|
||||||
<i class="card-icon ph ${person.gender === 'F' ? 'ph-user' : 'ph-user'}"></i>
|
<i class="ph-fill ph-user card-avatar"></i>
|
||||||
<h3>${person.name}</h3>
|
<div class="card-name">${person.name}</div>
|
||||||
<p>${dead}${year}</p>
|
<div class="card-dates">${dead}${year}</div>
|
||||||
${person.location ? '<span class="info-badge"><i class="ph-bold ph-map-pin"></i> ' + person.location.split(',')[0] + '</span>' : ''}
|
${loc ? `<div class="card-location"><i class="ph-bold ph-map-pin"></i> ${loc}</div>` : ''}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
if (isFocus) {
|
if (isFocus) {
|
||||||
const actions = document.createElement('div');
|
const actions = document.createElement('div');
|
||||||
actions.className = 'focus-actions';
|
actions.className = 'mini-actions';
|
||||||
|
|
||||||
|
// Add Child Button
|
||||||
const btnChild = document.createElement('button');
|
const btnChild = document.createElement('button');
|
||||||
btnChild.className = 'btn-mini-add add-child';
|
btnChild.className = 'btn-mini btn-add-child';
|
||||||
btnChild.innerHTML = '<i class="ph-bold ph-plus"></i>';
|
btnChild.innerHTML = '<i class="ph-bold ph-plus"></i>';
|
||||||
|
btnChild.title = "Legg til barn";
|
||||||
btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); };
|
btnChild.onclick = (e) => { e.stopPropagation(); window.openModal('add-child'); };
|
||||||
actions.appendChild(btnChild);
|
actions.appendChild(btnChild);
|
||||||
|
|
||||||
|
// Add Partner Button (if none)
|
||||||
if (!person.partnerId) {
|
if (!person.partnerId) {
|
||||||
const btnPartner = document.createElement('button');
|
const btnPartner = document.createElement('button');
|
||||||
btnPartner.className = 'btn-mini-add add-partner';
|
btnPartner.className = 'btn-mini btn-add-partner';
|
||||||
btnPartner.innerHTML = '<i class="ph-bold ph-heart"></i>';
|
btnPartner.innerHTML = '<i class="ph-bold ph-heart"></i>';
|
||||||
|
btnPartner.title = "Legg til partner";
|
||||||
btnPartner.onclick = (e) => { e.stopPropagation(); window.openModal('add-partner'); };
|
btnPartner.onclick = (e) => { e.stopPropagation(); window.openModal('add-partner'); };
|
||||||
actions.appendChild(btnPartner);
|
actions.appendChild(btnPartner);
|
||||||
}
|
}
|
||||||
|
|
@ -161,257 +181,221 @@ function createCard(person, isFocus = false) {
|
||||||
return el;
|
return el;
|
||||||
}
|
}
|
||||||
|
|
||||||
function createSlot(person, label, actionType) {
|
function createSlot(person, label, action) {
|
||||||
const wrapper = document.createElement('div');
|
const wrapper = document.createElement('div');
|
||||||
wrapper.className = 'slot-container';
|
wrapper.className = 'slot';
|
||||||
wrapper.innerHTML = `<span class="slot-label">${label}</span>`;
|
wrapper.innerHTML = `<span class="slot-label">${label}</span>`;
|
||||||
|
|
||||||
if (person) {
|
if (person) {
|
||||||
const card = createCard(person);
|
const card = createCard(person);
|
||||||
card.onclick = () => { focusPersonId = person.id; renderTree(); };
|
card.onclick = () => setFocus(person.id);
|
||||||
wrapper.appendChild(card);
|
wrapper.appendChild(card);
|
||||||
} else {
|
} else {
|
||||||
const btn = document.createElement('div');
|
const btn = document.createElement('div');
|
||||||
btn.className = 'btn-add-slot';
|
btn.className = 'btn-slot';
|
||||||
btn.innerHTML = '<i class="ph-bold ph-plus"></i>';
|
btn.innerHTML = '<i class="ph-bold ph-plus"></i>';
|
||||||
btn.onclick = () => window.openModal(actionType);
|
btn.onclick = () => window.openModal(action);
|
||||||
wrapper.appendChild(btn);
|
wrapper.appendChild(btn);
|
||||||
}
|
}
|
||||||
return wrapper;
|
return wrapper;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- KART FUNKSJONALITET (Leaflet) ---
|
// --- MAP RENDERER ---
|
||||||
function initMap() {
|
function renderMap() {
|
||||||
if (mapInstance) {
|
if (!state.map) {
|
||||||
mapInstance.invalidateSize(); // Viktig når kartet vises etter å ha vært skjult
|
state.map = L.map('map-container').setView([65.0, 13.0], 5);
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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', {
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
||||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
attribution: '© OpenStreetMap © CARTO',
|
||||||
subdomains: 'abcd',
|
subdomains: 'abcd',
|
||||||
maxZoom: 19
|
maxZoom: 19
|
||||||
}).addTo(mapInstance);
|
}).addTo(state.map);
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Clear existing markers
|
||||||
|
state.map.eachLayer(layer => {
|
||||||
|
if (layer instanceof L.Marker) state.map.removeLayer(layer);
|
||||||
});
|
});
|
||||||
|
|
||||||
for (const p of people) {
|
// Add markers
|
||||||
|
state.people.forEach(p => {
|
||||||
if (p.location) {
|
if (p.location) {
|
||||||
// Prøv å finne koordinater. For nå, antar vi at input KAN være "lat,lng"
|
// Simple geocoding simulation for demo
|
||||||
// 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;
|
let lat = 0, lng = 0;
|
||||||
|
|
||||||
if (p.location.includes(',')) {
|
if (p.location.includes(',')) {
|
||||||
const parts = p.location.split(',');
|
const parts = p.location.split(',');
|
||||||
if (!isNaN(parseFloat(parts[0]))) {
|
|
||||||
lat = parseFloat(parts[0]);
|
lat = parseFloat(parts[0]);
|
||||||
lng = parseFloat(parts[1]);
|
lng = parseFloat(parts[1]);
|
||||||
}
|
|
||||||
} else if (p.location.toLowerCase().includes('grimstad')) {
|
} else if (p.location.toLowerCase().includes('grimstad')) {
|
||||||
lat = 58.34 + (Math.random() * 0.05 - 0.025);
|
lat = 58.34 + (Math.random() * 0.02); lng = 8.59 + (Math.random() * 0.02);
|
||||||
lng = 8.59 + (Math.random() * 0.05 - 0.025);
|
|
||||||
} else if (p.location.toLowerCase().includes('oslo')) {
|
} else if (p.location.toLowerCase().includes('oslo')) {
|
||||||
lat = 59.91; lng = 10.75;
|
lat = 59.91; lng = 10.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lat !== 0) {
|
if (lat && lng) {
|
||||||
L.marker([lat, lng])
|
L.marker([lat, lng]).addTo(state.map)
|
||||||
.addTo(mapInstance)
|
|
||||||
.bindPopup(`<b>${p.name}</b><br>${p.location}`);
|
.bindPopup(`<b>${p.name}</b><br>${p.location}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- TIDSLINJE FUNKSJONALITET ---
|
// --- TIMELINE RENDERER ---
|
||||||
function renderTimeline() {
|
function renderTimeline() {
|
||||||
const container = document.getElementById('timeline-content');
|
const container = document.getElementById('timeline-list');
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
container.innerHTML = '';
|
container.innerHTML = '';
|
||||||
|
|
||||||
// Lag en liste av hendelser (Fødsel og Død)
|
|
||||||
const events = [];
|
const events = [];
|
||||||
people.forEach(p => {
|
|
||||||
if (p.birthDate) {
|
state.people.forEach(p => {
|
||||||
events.push({ date: p.birthDate, type: 'Født', person: p.name, desc: p.description });
|
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 });
|
||||||
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.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||||||
|
|
||||||
events.forEach(ev => {
|
events.forEach(ev => {
|
||||||
const item = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
item.className = 'timeline-item';
|
div.className = 'timeline-event';
|
||||||
|
|
||||||
const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' });
|
const dateStr = new Date(ev.date).toLocaleDateString('no-NO', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||||
|
|
||||||
item.innerHTML = `
|
div.innerHTML = `
|
||||||
<div class="timeline-date">${dateStr}</div>
|
<div class="event-date">${dateStr}</div>
|
||||||
<div class="timeline-content">
|
<div class="event-card">
|
||||||
<strong>${ev.person}</strong> ${ev.type.toLowerCase()}
|
<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>` : ''}
|
${ev.desc ? `<p style="font-size:0.85rem; color:var(--color-text-muted); margin-top:0.5rem;">${ev.desc}</p>` : ''}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
container.appendChild(item);
|
container.appendChild(div);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- MODAL LOGIC ---
|
||||||
|
function setupModal() {
|
||||||
|
window.openModal = (action) => {
|
||||||
|
state.modal.action = action;
|
||||||
|
document.getElementById('modal-overlay').classList.remove('hidden');
|
||||||
|
|
||||||
// --- MODAL & LAGRING ---
|
// Reset Form
|
||||||
window.openModal = (action) => {
|
document.querySelectorAll('.input-field').forEach(i => i.value = '');
|
||||||
modalAction = action;
|
|
||||||
const overlay = document.getElementById('modal-overlay');
|
|
||||||
if (overlay) overlay.classList.remove('hidden');
|
|
||||||
|
|
||||||
// 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 = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// Set Title
|
||||||
const title = document.getElementById('modal-title');
|
const title = document.getElementById('modal-title');
|
||||||
const genderRadios = document.getElementsByName('gender');
|
if (action === 'add-parent-m') title.textContent = "Legg til Far";
|
||||||
|
else if (action === 'add-parent-f') title.textContent = "Legg til Mor";
|
||||||
|
else if (action === 'add-child') title.textContent = "Legg til Barn";
|
||||||
|
else if (action === 'add-partner') title.textContent = "Legg til Partner";
|
||||||
|
else title.textContent = "Start Tre";
|
||||||
|
|
||||||
const setGender = (val, disabled) => {
|
// Default Mode
|
||||||
genderRadios.forEach(r => {
|
window.setModalMode('new');
|
||||||
r.disabled = disabled;
|
renderExistingList();
|
||||||
if (val && r.value === val) r.checked = true;
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (action === 'add-parent-m') { title.textContent = "Legg til Far"; setGender('M', true); }
|
window.setModalMode = (mode) => {
|
||||||
else if (action === 'add-parent-f') { title.textContent = "Legg til Mor"; setGender('F', true); }
|
state.modal.mode = mode;
|
||||||
else if (action === 'add-child') { title.textContent = "Legg til Barn"; setGender(null, false); }
|
document.getElementById('tab-new').classList.toggle('active', mode === 'new');
|
||||||
else if (action === 'add-partner') { title.textContent = "Legg til Partner"; setGender(null, false); }
|
document.getElementById('tab-existing').classList.toggle('active', mode === 'existing');
|
||||||
else { title.textContent = "Start Tre"; setGender(null, false); }
|
document.getElementById('form-new').classList.toggle('hidden', mode !== 'new');
|
||||||
|
document.getElementById('form-existing').classList.toggle('hidden', mode !== 'existing');
|
||||||
|
};
|
||||||
|
|
||||||
setMode('new');
|
document.getElementById('btn-close-modal').onclick = () => {
|
||||||
renderExistingList();
|
document.getElementById('modal-overlay').classList.add('hidden');
|
||||||
};
|
};
|
||||||
|
|
||||||
const closeBtn = document.getElementById('btn-close-modal');
|
document.getElementById('btn-save').onclick = async () => {
|
||||||
if (closeBtn) closeBtn.onclick = () => document.getElementById('modal-overlay').classList.add('hidden');
|
const focusP = state.people.find(p => p.id === state.focusId);
|
||||||
|
|
||||||
const saveBtn = document.getElementById('btn-save');
|
|
||||||
if (saveBtn) {
|
|
||||||
saveBtn.onclick = async () => {
|
|
||||||
if (!currentUser) return;
|
|
||||||
const focusP = people.find(p => p.id === focusPersonId);
|
|
||||||
let targetId = null;
|
let targetId = null;
|
||||||
|
|
||||||
if (modalMode === 'new') {
|
if (state.modal.mode === 'new') {
|
||||||
const newPerson = {
|
const newPerson = {
|
||||||
name: document.getElementById('inp-name').value,
|
name: document.getElementById('inp-name').value,
|
||||||
birthDate: document.getElementById('inp-birth').value,
|
birthDate: document.getElementById('inp-birth').value,
|
||||||
deathDate: document.getElementById('inp-death').value,
|
deathDate: document.getElementById('inp-death').value,
|
||||||
|
location: document.getElementById('inp-location').value,
|
||||||
description: document.getElementById('inp-desc').value,
|
description: document.getElementById('inp-desc').value,
|
||||||
location: document.getElementById('inp-location').value, // NYTT
|
|
||||||
gender: document.querySelector('input[name="gender"]:checked').value,
|
gender: document.querySelector('input[name="gender"]:checked').value,
|
||||||
fatherId: null, motherId: null, partnerId: null
|
fatherId: null, motherId: null, partnerId: null
|
||||||
};
|
};
|
||||||
|
|
||||||
if (modalAction === 'add-child' && focusP) {
|
// Auto-link logic
|
||||||
|
if (state.modal.action === 'add-child' && focusP) {
|
||||||
if (focusP.gender === 'M') newPerson.fatherId = focusP.id;
|
if (focusP.gender === 'M') newPerson.fatherId = focusP.id;
|
||||||
else newPerson.motherId = focusP.id;
|
else newPerson.motherId = focusP.id;
|
||||||
|
|
||||||
if (focusP.partnerId) {
|
if (focusP.partnerId) {
|
||||||
const part = people.find(p => p.id === focusP.partnerId);
|
const part = state.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);
|
const docRef = await addDoc(collection(db, 'familyMembers'), newPerson);
|
||||||
targetId = docRef.id;
|
targetId = docRef.id;
|
||||||
if (modalAction === 'create-first') focusPersonId = targetId;
|
if (state.modal.action === 'create-first') state.focusId = targetId;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
targetId = document.getElementById('selected-existing-id').value;
|
targetId = document.getElementById('selected-existing-id').value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Link Relations
|
||||||
if (focusP && targetId) {
|
if (focusP && targetId) {
|
||||||
const col = collection(db, 'familyMembers');
|
const col = collection(db, 'familyMembers');
|
||||||
const updates = [];
|
const updates = [];
|
||||||
|
|
||||||
if (modalAction === 'add-parent-m') updates.push(updateDoc(doc(col, focusPersonId), { fatherId: targetId }));
|
if (state.modal.action === 'add-parent-m') updates.push(updateDoc(doc(col, state.focusId), { fatherId: targetId }));
|
||||||
else if (modalAction === 'add-parent-f') updates.push(updateDoc(doc(col, focusPersonId), { motherId: targetId }));
|
else if (state.modal.action === 'add-parent-f') updates.push(updateDoc(doc(col, state.focusId), { motherId: targetId }));
|
||||||
else if (modalAction === 'add-partner') {
|
else if (state.modal.action === 'add-partner') {
|
||||||
updates.push(updateDoc(doc(col, focusPersonId), { partnerId: targetId }));
|
updates.push(updateDoc(doc(col, state.focusId), { partnerId: targetId }));
|
||||||
updates.push(updateDoc(doc(col, targetId), { partnerId: focusPersonId }));
|
updates.push(updateDoc(doc(col, targetId), { partnerId: state.focusId }));
|
||||||
}
|
} else if (state.modal.action === 'add-child' && state.modal.mode === 'existing') {
|
||||||
else if (modalAction === 'add-child' && modalMode === 'existing') {
|
|
||||||
const upd = {};
|
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));
|
updates.push(updateDoc(doc(col, targetId), upd));
|
||||||
}
|
}
|
||||||
await Promise.all(updates);
|
await Promise.all(updates);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.getElementById('modal-overlay').classList.add('hidden');
|
document.getElementById('modal-overlay').classList.add('hidden');
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
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');
|
|
||||||
document.getElementById('form-new').className = mode === 'new' ? '' : 'hidden';
|
|
||||||
document.getElementById('form-existing').className = mode === 'existing' ? '' : 'hidden';
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelectorAll('.toggle-btn').forEach(btn => {
|
|
||||||
btn.onclick = () => setMode(btn.dataset.mode);
|
|
||||||
});
|
|
||||||
|
|
||||||
function renderExistingList() {
|
function renderExistingList() {
|
||||||
const list = document.getElementById('existing-list');
|
const list = document.getElementById('existing-list');
|
||||||
if (!list) return;
|
|
||||||
list.innerHTML = '';
|
list.innerHTML = '';
|
||||||
const candidates = people.filter(p => p.id !== focusPersonId);
|
state.people.filter(p => p.id !== state.focusId).forEach(p => {
|
||||||
candidates.forEach(p => {
|
const div = document.createElement('div');
|
||||||
const d = document.createElement('div');
|
div.style.padding = '0.5rem';
|
||||||
d.className = 'person-option';
|
div.style.borderBottom = '1px solid #f1f5f9';
|
||||||
d.innerHTML = `<span>${p.name}</span>`;
|
div.style.cursor = 'pointer';
|
||||||
d.onclick = () => {
|
div.textContent = p.name;
|
||||||
document.querySelectorAll('.person-option').forEach(x => x.classList.remove('selected'));
|
div.onclick = () => {
|
||||||
d.classList.add('selected');
|
|
||||||
document.getElementById('selected-existing-id').value = p.id;
|
document.getElementById('selected-existing-id').value = p.id;
|
||||||
|
div.style.background = '#f0fdf4';
|
||||||
};
|
};
|
||||||
list.appendChild(d);
|
list.appendChild(div);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- ZOOM ---
|
// --- ZOOM ---
|
||||||
const zoomIn = document.getElementById('btn-zoom-in');
|
function setupZoom() {
|
||||||
if (zoomIn) zoomIn.onclick = () => {
|
const grid = document.getElementById('tree-grid');
|
||||||
currentScale += 0.1;
|
const display = document.getElementById('zoom-display');
|
||||||
document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
|
|
||||||
document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
|
|
||||||
};
|
|
||||||
|
|
||||||
const zoomOut = document.getElementById('btn-zoom-out');
|
document.getElementById('btn-zoom-in').onclick = () => {
|
||||||
if (zoomOut) zoomOut.onclick = () => {
|
state.scale += 0.1;
|
||||||
if (currentScale > 0.4) currentScale -= 0.1;
|
updateZoom();
|
||||||
document.getElementById('tree-grid').style.transform = `scale(${currentScale})`;
|
};
|
||||||
document.getElementById('zoom-level').textContent = Math.round(currentScale * 100) + '%';
|
document.getElementById('btn-zoom-out').onclick = () => {
|
||||||
};
|
if (state.scale > 0.4) state.scale -= 0.1;
|
||||||
|
updateZoom();
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateZoom() {
|
||||||
|
grid.style.transform = `scale(${state.scale})`;
|
||||||
|
display.textContent = Math.round(state.scale * 100) + '%';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
// --- FIREBASE CONFIG ---
|
// --- FIREBASE CONFIGURATION ---
|
||||||
// Prosjekt: roesstad-9fd48
|
|
||||||
export const firebaseConfig = {
|
export const firebaseConfig = {
|
||||||
apiKey: "AIzaSyD-E58BdRwFCHDmsgRG9-PEWzMaQoheJ-0",
|
apiKey: "AIzaSyD-E58BdRwFCHDmsgRG9-PEWzMaQoheJ-0",
|
||||||
authDomain: "roesstad-9fd48.firebaseapp.com",
|
authDomain: "roesstad-9fd48.firebaseapp.com",
|
||||||
|
|
@ -8,5 +7,3 @@ export const firebaseConfig = {
|
||||||
messagingSenderId: "704119736902",
|
messagingSenderId: "704119736902",
|
||||||
appId: "1:704119736902:web:bc47f2b6a1383de0479847"
|
appId: "1:704119736902:web:bc47f2b6a1383de0479847"
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
30
index.html
30
index.html
|
|
@ -1,33 +1,37 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="no">
|
<html lang="no">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Logg Inn - Røsstad Arkivet</title>
|
<title>Logg Inn - Røsstad Arkivet</title>
|
||||||
|
<!-- Icons -->
|
||||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||||
|
<!-- Styles -->
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="login-page">
|
<body class="login-page">
|
||||||
|
|
||||||
<div class="login-box">
|
<div class="login-container">
|
||||||
<i class="ph-fill ph-tree-evergreen logo-icon"></i>
|
<i class="ph-fill ph-tree-evergreen login-logo"></i>
|
||||||
|
|
||||||
<h2>Røsstad Arkivet</h2>
|
<h1 class="login-title">Røsstad Arkivet</h1>
|
||||||
<p style="margin-bottom: 2rem; color: rgba(255,255,255,0.8); font-weight: 300;">Logg inn for å se familiens historie</p>
|
<p class="login-subtitle">Logg inn for å utforske familiens historie</p>
|
||||||
|
|
||||||
<div style="margin-bottom: 1rem;">
|
<form id="login-form" onsubmit="event.preventDefault();">
|
||||||
<input type="email" id="inp-email" class="login-input" placeholder="E-postadresse">
|
<input type="email" id="inp-email" class="input-field" placeholder="E-postadresse" required
|
||||||
</div>
|
autocomplete="email">
|
||||||
|
<input type="password" id="inp-password" class="input-field" placeholder="Passord" required
|
||||||
|
autocomplete="current-password">
|
||||||
|
|
||||||
<div style="margin-bottom: 2rem;">
|
<button type="submit" id="btn-login" class="btn-primary">Logg Inn</button>
|
||||||
<input type="password" id="inp-password" class="login-input" placeholder="Passord">
|
</form>
|
||||||
</div>
|
|
||||||
|
|
||||||
<button id="btn-login" class="btn-primary full-width" style="font-size: 1.1rem; padding: 1rem;">Logg Inn</button>
|
<div id="error-msg" class="error-message"></div>
|
||||||
|
|
||||||
<p id="error-msg" class="error-msg"></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="login.js"></script>
|
<script type="module" src="login.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
95
login.js
95
login.js
|
|
@ -2,46 +2,91 @@ import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/fireba
|
||||||
import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
|
import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
|
||||||
import { firebaseConfig } from "./config.js";
|
import { firebaseConfig } from "./config.js";
|
||||||
|
|
||||||
// Init
|
// --- INIT ---
|
||||||
const app = initializeApp(firebaseConfig);
|
const app = initializeApp(firebaseConfig);
|
||||||
const auth = getAuth(app);
|
const auth = getAuth(app);
|
||||||
|
|
||||||
// Håndter klikk på Logg Inn
|
// --- DOM ELEMENTS ---
|
||||||
|
const form = document.getElementById('login-form');
|
||||||
|
const emailInput = document.getElementById('inp-email');
|
||||||
|
const passwordInput = document.getElementById('inp-password');
|
||||||
const loginBtn = document.getElementById('btn-login');
|
const loginBtn = document.getElementById('btn-login');
|
||||||
|
const errorMsg = document.getElementById('error-msg');
|
||||||
|
|
||||||
if (loginBtn) {
|
// --- LOGIN LOGIC ---
|
||||||
loginBtn.addEventListener('click', async () => {
|
if (form) {
|
||||||
const email = document.getElementById('inp-email').value;
|
form.addEventListener('submit', async (e) => {
|
||||||
const password = document.getElementById('inp-password').value;
|
e.preventDefault();
|
||||||
const msg = document.getElementById('error-msg');
|
|
||||||
|
const email = emailInput.value.trim();
|
||||||
|
const password = passwordInput.value;
|
||||||
|
|
||||||
// Enkel sjekk at feltene ikke er tomme
|
|
||||||
if (!email || !password) {
|
if (!email || !password) {
|
||||||
msg.textContent = "Du må skrive inn både e-post og passord.";
|
showError("Vennligst fyll ut både e-post og passord.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
loginBtn.textContent = "Sjekker...";
|
setLoading(true);
|
||||||
msg.textContent = "";
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Prøver å logge inn med e-post og passord
|
|
||||||
await signInWithEmailAndPassword(auth, email, password);
|
await signInWithEmailAndPassword(auth, email, password);
|
||||||
|
// Redirect on success
|
||||||
// Suksess -> Gå til hovedsiden
|
|
||||||
window.location.href = "Røsstad.html";
|
window.location.href = "Røsstad.html";
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error("Login error:", error);
|
||||||
// Gi en forståelig feilmelding
|
handleError(error);
|
||||||
if (error.code === 'auth/invalid-credential' || error.code === 'auth/user-not-found' || error.code === 'auth/wrong-password') {
|
setLoading(false);
|
||||||
msg.textContent = "Feil e-post eller passord.";
|
|
||||||
} else if (error.code === 'auth/too-many-requests') {
|
|
||||||
msg.textContent = "For mange forsøk. Prøv igjen senere.";
|
|
||||||
} else {
|
|
||||||
msg.textContent = "Feil: " + error.message;
|
|
||||||
}
|
|
||||||
loginBtn.textContent = "Logg Inn";
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setLoading(isLoading) {
|
||||||
|
if (isLoading) {
|
||||||
|
loginBtn.textContent = "Logger inn...";
|
||||||
|
loginBtn.disabled = true;
|
||||||
|
errorMsg.textContent = "";
|
||||||
|
} else {
|
||||||
|
loginBtn.textContent = "Logg Inn";
|
||||||
|
loginBtn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleError(error) {
|
||||||
|
let message = "En ukjent feil oppstod.";
|
||||||
|
|
||||||
|
switch (error.code) {
|
||||||
|
case 'auth/invalid-credential':
|
||||||
|
case 'auth/user-not-found':
|
||||||
|
case 'auth/wrong-password':
|
||||||
|
message = "Feil e-post eller passord.";
|
||||||
|
break;
|
||||||
|
case 'auth/too-many-requests':
|
||||||
|
message = "For mange forsøk. Vennligst vent litt og prøv igjen.";
|
||||||
|
break;
|
||||||
|
case 'auth/invalid-email':
|
||||||
|
message = "Ugyldig e-postadresse.";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
showError(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showError(msg) {
|
||||||
|
errorMsg.textContent = msg;
|
||||||
|
// Shake animation effect
|
||||||
|
const container = document.querySelector('.login-container');
|
||||||
|
container.style.animation = 'none';
|
||||||
|
container.offsetHeight; /* trigger reflow */
|
||||||
|
container.style.animation = 'shake 0.5s';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add shake keyframes dynamically
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.innerHTML = `
|
||||||
|
@keyframes shake {
|
||||||
|
0%, 100% { transform: translateX(0); }
|
||||||
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
|
||||||
|
20%, 40%, 60%, 80% { transform: translateX(5px); }
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
|
|
||||||
722
style.css
722
style.css
|
|
@ -1,389 +1,569 @@
|
||||||
/* --- VARIABLER (Røsstad Premium) --- */
|
/* --- RØSSTAD DESIGN SYSTEM --- */
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* Palette: Deep Forest Green / Blue-Green Mix */
|
/* --- PALETTE: Røsstad Green --- */
|
||||||
--primary-dark: #0f2f24; /* Deepest Forest */
|
--color-primary-dark: #0f2f24;
|
||||||
--primary-main: #134e4a; /* Røsstad Green/Teal */
|
/* Deep Forest */
|
||||||
--primary-light: #2dd4bf; /* Bright Teal Highlight */
|
--color-primary: #134e4a;
|
||||||
|
/* Røsstad Teal */
|
||||||
|
--color-primary-light: #2dd4bf;
|
||||||
|
/* Bright Teal */
|
||||||
|
|
||||||
--accent-gold: #d97706; /* Bronze/Gold */
|
--color-accent: #d97706;
|
||||||
--accent-red: #be123c; /* Deep Berry (for errors/females) */
|
/* Gold/Bronze */
|
||||||
|
--color-danger: #be123c;
|
||||||
|
/* Berry Red */
|
||||||
|
|
||||||
--bg-color: #f0fdf4; /* Soft Mist Green */
|
--color-bg: #f0fdf4;
|
||||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
/* Soft Mist Green */
|
||||||
--glass-border: rgba(255, 255, 255, 0.5);
|
--color-surface: #ffffff;
|
||||||
|
/* Pure White */
|
||||||
|
--color-surface-glass: rgba(255, 255, 255, 0.85);
|
||||||
|
|
||||||
--text-main: #1e293b; /* Slate 800 */
|
--color-text-main: #1e293b;
|
||||||
--text-muted: #64748b; /* Slate 500 */
|
/* Slate 800 */
|
||||||
|
--color-text-muted: #64748b;
|
||||||
|
/* Slate 500 */
|
||||||
|
|
||||||
--male-color: #0ea5e9; /* Sky Blue */
|
--color-male: #0ea5e9;
|
||||||
--female-color: #be123c; /* Rose */
|
/* Sky Blue */
|
||||||
|
--color-female: #be123c;
|
||||||
|
/* Rose */
|
||||||
|
|
||||||
|
/* --- SHADOWS & EFFECTS --- */
|
||||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
--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-md: 0 4px 6px -1px 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);
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||||
|
--blur-glass: blur(12px);
|
||||||
|
|
||||||
|
/* --- SPACING & RADIUS --- */
|
||||||
|
--radius-sm: 0.5rem;
|
||||||
|
--radius-md: 0.75rem;
|
||||||
|
--radius-lg: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- GLOBAL RESET --- */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: 'Outfit', sans-serif;
|
font-family: 'Outfit', sans-serif;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--color-bg);
|
||||||
color: var(--text-main);
|
color: var(--color-text-main);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
/* Subtle background pattern */
|
||||||
background-image:
|
background-image:
|
||||||
radial-gradient(at 0% 0%, rgba(19, 78, 74, 0.1) 0px, transparent 50%),
|
radial-gradient(at 0% 0%, rgba(15, 47, 36, 0.05) 0px, transparent 50%),
|
||||||
radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.1) 0px, transparent 50%);
|
radial-gradient(at 100% 100%, rgba(217, 119, 6, 0.05) 0px, transparent 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- HJELPEKLASSER --- */
|
/* --- UTILITIES --- */
|
||||||
.hidden { display: none !important; }
|
.hidden {
|
||||||
.full-width { width: 100%; }
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* --- LOGIN SIDE STIL --- */
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- LOGIN PAGE --- */
|
||||||
body.login-page {
|
body.login-page {
|
||||||
display: flex; justify-content: center; align-items: center;
|
display: flex;
|
||||||
background: linear-gradient(135deg, #0f2f24 0%, #134e4a 100%);
|
justify-content: center;
|
||||||
position: relative;
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
body.login-page::before {
|
.login-container {
|
||||||
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);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
backdrop-filter: blur(12px);
|
backdrop-filter: var(--blur-glass);
|
||||||
-webkit-backdrop-filter: blur(12px);
|
padding: 3rem;
|
||||||
padding: 3.5rem;
|
border-radius: var(--radius-lg);
|
||||||
border-radius: 1.5rem;
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
box-shadow: var(--shadow-lg);
|
||||||
width: 100%;
|
|
||||||
max-width: 420px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-icon {
|
.login-logo {
|
||||||
font-size: 4.5rem;
|
font-size: 4rem;
|
||||||
color: var(--primary-light);
|
color: var(--color-primary-light);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1rem;
|
||||||
filter: drop-shadow(0 0 15px rgba(45, 212, 191, 0.4));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-box h2 {
|
.login-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: -0.5px;
|
margin: 0 0 0.5rem 0;
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-input {
|
.login-subtitle {
|
||||||
background: rgba(255,255,255,0.95);
|
font-size: 0.9rem;
|
||||||
border: none;
|
opacity: 0.8;
|
||||||
padding: 1rem;
|
margin-bottom: 2rem;
|
||||||
border-radius: 0.75rem;
|
font-weight: 300;
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
}
|
||||||
.login-input:focus {
|
|
||||||
|
.input-field {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.5);
|
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-msg {
|
.btn-primary {
|
||||||
margin-top: 1rem;
|
width: 100%;
|
||||||
color: #fda4af;
|
padding: 1rem;
|
||||||
font-size: 0.9rem;
|
border: none;
|
||||||
min-height: 1.2em;
|
border-radius: var(--radius-md);
|
||||||
font-weight: 500;
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- HEADER (Hovedside) --- */
|
.btn-primary:hover {
|
||||||
header {
|
transform: translateY(-2px);
|
||||||
background: rgba(255, 255, 255, 0.8);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #fda4af;
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
min-height: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- MAIN APP LAYOUT --- */
|
||||||
|
#app-root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.app-header {
|
||||||
|
background: var(--color-surface-glass);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
-webkit-backdrop-filter: blur(10px);
|
padding: 0.8rem 2rem;
|
||||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: sticky; top: 0; z-index: 100;
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
z-index: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand-logo {
|
||||||
font-size: 1.4rem;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.8rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary-dark);
|
color: var(--color-primary-dark);
|
||||||
display: flex; align-items: center; gap: 0.75rem;
|
|
||||||
}
|
}
|
||||||
.brand i { color: var(--primary-main); }
|
|
||||||
|
|
||||||
|
.brand-logo i {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Tabs */
|
||||||
.nav-tabs {
|
.nav-tabs {
|
||||||
display: flex; gap: 0.5rem;
|
display: flex;
|
||||||
background: rgba(0,0,0,0.05);
|
gap: 0.5rem;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
padding: 0.3rem;
|
padding: 0.3rem;
|
||||||
border-radius: 0.75rem;
|
border-radius: var(--radius-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab {
|
.nav-tab {
|
||||||
padding: 0.5rem 1.2rem;
|
padding: 0.5rem 1.2rem;
|
||||||
border-radius: 0.5rem;
|
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--text-muted);
|
border-radius: var(--radius-sm);
|
||||||
|
color: var(--color-text-muted);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
font-family: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab.active {
|
.nav-tab.active {
|
||||||
background: white;
|
background: white;
|
||||||
color: var(--primary-dark);
|
color: var(--color-primary);
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-tab:hover:not(.active) {
|
.nav-tab:hover:not(.active) {
|
||||||
color: var(--primary-main);
|
color: var(--color-primary);
|
||||||
background: rgba(255,255,255,0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls {
|
/* Controls */
|
||||||
display: flex; align-items: center; gap: 1rem;
|
.header-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.controls button.icon-btn {
|
.icon-btn {
|
||||||
background: none; border: none; color: var(--text-muted);
|
background: none;
|
||||||
font-size: 1.5rem; cursor: pointer; transition: color 0.2s;
|
border: none;
|
||||||
display: flex; align-items: center; justify-content: center;
|
font-size: 1.5rem;
|
||||||
}
|
color: var(--color-text-muted);
|
||||||
.controls button.icon-btn:hover { color: var(--primary-main); transform: scale(1.1); }
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
/* --- KNAPPER --- */
|
display: flex;
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, var(--primary-main), var(--primary-dark));
|
|
||||||
color: white; border: none; padding: 0.8rem 1.5rem;
|
|
||||||
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-outline {
|
.icon-btn:hover {
|
||||||
font-size: 0.9rem !important;
|
color: var(--color-primary);
|
||||||
border: 1px solid var(--primary-main) !important;
|
}
|
||||||
color: var(--primary-main) !important;
|
|
||||||
|
.btn-logout {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 0.4rem 1rem;
|
||||||
|
border: 1px solid var(--color-primary);
|
||||||
|
color: var(--color-primary);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0.4rem 1rem; border-radius: 0.5rem;
|
border-radius: var(--radius-sm);
|
||||||
font-weight: 600; cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
font-weight: 600;
|
||||||
.btn-outline:hover {
|
|
||||||
background: var(--primary-main);
|
|
||||||
color: white !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- MAIN CONTENT AREAS --- */
|
.btn-logout:hover {
|
||||||
#app-container {
|
background: var(--color-primary);
|
||||||
display: flex; height: 100vh; flex-direction: column;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
/* --- VIEW SECTIONS --- */
|
||||||
flex: 1; overflow: hidden; position: relative;
|
.view-section {
|
||||||
}
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
/* --- TREET (GRID LAYOUT) --- */
|
|
||||||
#tree-view {
|
|
||||||
display: flex; justify-content: center; align-items: center;
|
|
||||||
padding: 3rem;
|
|
||||||
overflow: auto;
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
#tree-view:active { cursor: grabbing; }
|
|
||||||
|
|
||||||
.tree-grid {
|
|
||||||
display: flex; flex-direction: column; align-items: center;
|
|
||||||
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;
|
position: relative;
|
||||||
}
|
}
|
||||||
.row-parents { gap: 4rem; }
|
|
||||||
.row-focus { gap: 3rem; }
|
|
||||||
.row-children { gap: 2rem; flex-wrap: wrap; }
|
|
||||||
|
|
||||||
/* --- KORT --- */
|
/* Tree View */
|
||||||
|
#tree-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4rem;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tree-container:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5rem;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-row.children {
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Person Card */
|
||||||
.card {
|
.card {
|
||||||
background: rgba(255, 255, 255, 0.9);
|
width: 200px;
|
||||||
backdrop-filter: blur(8px);
|
min-height: 130px;
|
||||||
width: 200px; min-height: 130px;
|
background: var(--color-surface-glass);
|
||||||
border-radius: 1rem;
|
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
box-shadow: var(--shadow-md);
|
border-radius: var(--radius-md);
|
||||||
padding: 1.2rem;
|
padding: 1.2rem;
|
||||||
display: flex; flex-direction: column; align-items: center;
|
display: flex;
|
||||||
position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card:hover {
|
.card:hover {
|
||||||
transform: translateY(-5px) scale(1.02);
|
transform: translateY(-5px);
|
||||||
box-shadow: var(--shadow-lg);
|
box-shadow: var(--shadow-lg);
|
||||||
border-color: var(--primary-light);
|
border-color: var(--color-primary-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.focus {
|
.card.focus {
|
||||||
border: 2px solid var(--primary-main);
|
|
||||||
background: white;
|
|
||||||
transform: scale(1.15);
|
transform: scale(1.15);
|
||||||
z-index: 10;
|
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);
|
border: 2px solid var(--color-primary);
|
||||||
|
background: white;
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card h3 { margin: 0.75rem 0 0.25rem 0; font-size: 1rem; text-align: center; font-weight: 700; color: var(--text-main); }
|
.card-avatar {
|
||||||
.card p { margin: 0; font-size: 0.8rem; color: var(--text-muted); font-family: 'Outfit', monospace; font-weight: 500; }
|
font-size: 2rem;
|
||||||
.card .info-badge {
|
padding: 0.5rem;
|
||||||
font-size: 0.7rem; color: var(--primary-dark);
|
border-radius: 50%;
|
||||||
background: var(--primary-light);
|
margin-bottom: 0.5rem;
|
||||||
background: rgba(45, 212, 191, 0.2);
|
|
||||||
padding: 2px 8px; border-radius: 12px; margin-top: 8px; font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-icon {
|
.card.male .card-avatar {
|
||||||
font-size: 1.8rem; padding: 10px; border-radius: 50%;
|
color: var(--color-male);
|
||||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
|
background: #e0f2fe;
|
||||||
}
|
}
|
||||||
.male .card-icon { color: var(--male-color); background: #e0f2fe; }
|
|
||||||
.female .card-icon { color: var(--female-color); background: #ffe4e6; }
|
|
||||||
|
|
||||||
/* --- PLUSS-KNAPPER --- */
|
.card.female .card-avatar {
|
||||||
.slot-container {
|
color: var(--color-female);
|
||||||
display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
|
background: #ffe4e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0.2rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-dates {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-location {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: rgba(45, 212, 191, 0.15);
|
||||||
|
color: var(--color-primary-dark);
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add Buttons (Mini) */
|
||||||
|
.mini-actions {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mini {
|
||||||
|
pointer-events: auto;
|
||||||
|
position: absolute;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mini:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
background: var(--color-primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add-child {
|
||||||
|
bottom: -16px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add-partner {
|
||||||
|
top: 50%;
|
||||||
|
right: -16px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Empty Slot */
|
||||||
|
.slot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.slot-label {
|
.slot-label {
|
||||||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px;
|
font-size: 0.7rem;
|
||||||
font-weight: 700; color: var(--text-muted); opacity: 0.7;
|
font-weight: 700;
|
||||||
}
|
text-transform: uppercase;
|
||||||
.btn-add-slot {
|
color: var(--color-text-muted);
|
||||||
width: 48px; height: 48px; border-radius: 50%;
|
opacity: 0.7;
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.focus-actions {
|
.btn-slot {
|
||||||
position: absolute; width: 100%; height: 100%; pointer-events: none;
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px dashed #cbd5e1;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
color: #94a3b8;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.btn-mini-add {
|
|
||||||
pointer-events: auto; position: absolute;
|
.btn-slot:hover {
|
||||||
width: 32px; height: 32px;
|
border-color: var(--color-primary);
|
||||||
background: var(--primary-main);
|
color: var(--color-primary);
|
||||||
color: white; border-radius: 50%; border: none;
|
background: white;
|
||||||
display: flex; justify-content: center; align-items: center;
|
}
|
||||||
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);
|
/* Map & Timeline */
|
||||||
|
#map-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-wrapper {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-event {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-left: 2px solid var(--color-primary-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-event::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -6px;
|
||||||
|
top: 0;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-date {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card {
|
||||||
|
background: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
.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 --- */
|
||||||
.modal-overlay {
|
.modal-overlay {
|
||||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
position: fixed;
|
||||||
background: rgba(15, 47, 36, 0.6); backdrop-filter: blur(4px);
|
inset: 0;
|
||||||
display: flex; justify-content: center; align-items: center; z-index: 3000;
|
background: rgba(15, 47, 36, 0.6);
|
||||||
opacity: 0; animation: fadeIn 0.2s forwards;
|
backdrop-filter: blur(4px);
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeIn 0.2s forwards;
|
||||||
}
|
}
|
||||||
@keyframes fadeIn { to { opacity: 1; } }
|
|
||||||
|
|
||||||
.modal {
|
@keyframes fadeIn {
|
||||||
background: white; width: 90%; max-width: 550px;
|
to {
|
||||||
border-radius: 1.5rem; padding: 2rem;
|
opacity: 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;
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background: white;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 500px;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
transform: scale(0.95);
|
||||||
|
animation: popIn 0.3s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes popIn {
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@keyframes popIn { to { transform: scale(1); } }
|
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex; justify-content: space-between; align-items: center;
|
display: flex;
|
||||||
border-bottom: 1px solid var(--glass-border); padding-bottom: 1.5rem; margin-bottom: 1.5rem;
|
justify-content: space-between;
|
||||||
}
|
align-items: center;
|
||||||
.modal-header h3 { margin: 0; font-size: 1.5rem; color: var(--primary-dark); }
|
margin-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid #f1f5f9;
|
||||||
.toggle-group {
|
padding-bottom: 1rem;
|
||||||
display: flex; background: #f1f5f9; padding: 5px; border-radius: 10px; margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
.toggle-btn {
|
|
||||||
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(--primary-main);
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group { margin-bottom: 1.2rem; }
|
.modal-title {
|
||||||
.form-group label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-main); }
|
font-size: 1.4rem;
|
||||||
.form-row { display: flex; gap: 1rem; }
|
font-weight: 700;
|
||||||
.form-row .form-group { flex: 1; }
|
color: var(--color-primary-dark);
|
||||||
|
margin: 0;
|
||||||
input, select, textarea {
|
|
||||||
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 {
|
.form-group {
|
||||||
max-height: 200px; overflow-y: auto;
|
margin-bottom: 1rem;
|
||||||
border: 1px solid #cbd5e1; border-radius: 0.75rem;
|
|
||||||
}
|
|
||||||
.person-option {
|
|
||||||
padding: 0.8rem; border-bottom: 1px solid #f1f5f9; cursor: pointer;
|
|
||||||
display: flex; justify-content: space-between; transition: background 0.1s;
|
|
||||||
}
|
|
||||||
.person-option:hover { background: #f8fafc; }
|
|
||||||
.person-option.selected {
|
|
||||||
background: #f0fdf4; border-left: 4px solid var(--primary-main);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- KART OG TIDSLINJE (Placeholder) --- */
|
.form-label {
|
||||||
#map-view, #timeline-view {
|
display: block;
|
||||||
width: 100%; height: 100%;
|
font-size: 0.85rem;
|
||||||
}
|
font-weight: 700;
|
||||||
#map-container {
|
margin-bottom: 0.4rem;
|
||||||
width: 100%; height: 100%;
|
|
||||||
background: #e2e8f0; /* Placeholder grå */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Timeline specific */
|
.form-row {
|
||||||
.timeline-container {
|
display: flex;
|
||||||
max-width: 800px; margin: 0 auto; padding: 3rem 1rem;
|
gap: 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; }
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue