88 lines
No EOL
3.7 KiB
HTML
88 lines
No EOL
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="no">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Røsstad Familietre</title>
|
|
<script src="[https://unpkg.com/@phosphor-icons/web](https://unpkg.com/@phosphor-icons/web)"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- APP CONTAINER -->
|
|
<div id="app-container">
|
|
<header>
|
|
<div class="brand">
|
|
<i class="ph-fill ph-tree-evergreen"></i>
|
|
<span>Røsstad Familietre</span>
|
|
</div>
|
|
<div class="controls">
|
|
<button id="btn-zoom-out"><i class="ph ph-minus-circle"></i></button>
|
|
<span id="zoom-level">100%</span>
|
|
<button id="btn-zoom-in"><i class="ph ph-plus-circle"></i></button>
|
|
<button id="btn-logout" class="btn-outline">Logg ut</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="tree-view">
|
|
<div id="tree-grid" class="tree-grid">
|
|
<div id="row-parents" class="row-parents"></div>
|
|
<div id="row-focus" class="row-focus"></div>
|
|
<div id="row-children" class="row-children"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- MODAL (Popup) -->
|
|
<div id="modal-overlay" class="modal-overlay hidden">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">Legg til Person</h3>
|
|
<button id="btn-close-modal" class="btn-icon" style="background:none;border:none;cursor:pointer;"><i class="ph ph-x" style="font-size:1.5rem"></i></button>
|
|
</div>
|
|
|
|
<div class="toggle-group" id="mode-toggle">
|
|
<button class="toggle-btn active" data-mode="new">Opprett Ny</button>
|
|
<button class="toggle-btn" data-mode="existing">Velg fra Database</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div id="form-new">
|
|
<div class="form-group">
|
|
<label>Navn</label>
|
|
<input type="text" id="inp-name">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group"><label>Fødselsdato</label><input type="date" id="inp-birth"></div>
|
|
<div class="form-group"><label>Dødsdato</label><input type="date" id="inp-death"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Kjønn</label>
|
|
<div class="radio-group" style="display:flex; gap:1rem;">
|
|
<label><input type="radio" name="gender" value="M" checked> Mann</label>
|
|
<label><input type="radio" name="gender" value="F"> Kvinne</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Beskrivelse</label>
|
|
<textarea id="inp-desc" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-existing" class="hidden">
|
|
<input type="text" id="search-existing" placeholder="Søk..." style="width:100%;margin-bottom:0.5rem;">
|
|
<div id="existing-list" class="person-select-list"></div>
|
|
<input type="hidden" id="selected-existing-id">
|
|
</div>
|
|
|
|
<div style="margin-top:1rem;">
|
|
<button id="btn-save" class="btn-primary full-width">Lagre</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linker til hoved-scriptet -->
|
|
<script type="module" src="script.js"></script>
|
|
</body>
|
|
</html> |