From 216385b638a26268d1b8f6e5a80ae0affa2c37cf Mon Sep 17 00:00:00 2001
From: Anaru <eivindrosstadskeie@gmail.com>
Date: Thu, 27 Nov 2025 17:12:07 +0100
Subject: [PATCH] refactor: Extract login form into a dedicated modal,
 reorganize member modal, and relocate script tags.

---
 index.html | 225 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 118 insertions(+), 107 deletions(-)

diff --git a/index.html b/index.html
index da21618..7372f09 100644
--- a/index.html
+++ b/index.html
@@ -55,120 +55,131 @@
             <div class="history-container">
                 <h2>Slektshistorie</h2>
                 <ul id="history-list">
-                    <form id="login-form">
-                        <input type="email" id="email" placeholder="E-post" required>
-                        <input type="password" id="password" placeholder="Passord" required>
-                        <button type="submit" class="primary-btn">Logg inn</button>
-                    </form>
-                    <p id="login-error" class="error-msg"></p>
-            </div>
+                    <!-- History items will be injected here -->
+                </ul>
             </div>
+        </section>
+    </main>
 
-            <!-- Add/Edit Member Modal -->
-            <div id="member-modal" class="modal" style="display: none;">
-                <div class="modal-content glass-panel">
-                    <span class="close-modal">&times;</span>
-                    <h2 id="modal-title">Legg til person</h2>
-                    <form id="member-form">
-                        <input type="hidden" id="member-id">
+    <!-- Login Modal -->
+    <div id="login-modal" class="modal">
+        <div class="modal-content glass-panel login-box">
+            <h2>Velkommen til Røsstad</h2>
+            <p>Vennligst logg inn for å se slektstreet.</p>
+            <form id="login-form">
+                <input type="email" id="email" placeholder="E-post" required>
+                <input type="password" id="password" placeholder="Passord" required>
+                <button type="submit" class="primary-btn">Logg inn</button>
+            </form>
+            <p id="login-error" class="error-msg"></p>
+        </div>
+    </div>
 
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label>Fornavn</label>
-                                <input type="text" id="firstName" required>
-                            </div>
-                            <div class="form-group">
-                                <label>Etternavn</label>
-                                <input type="text" id="lastName" required>
-                            </div>
-                        </div>
+    <!-- Add/Edit Member Modal -->
+    <div id="member-modal" class="modal" style="display: none;">
+        <div class="modal-content glass-panel">
+            <span class="close-modal">&times;</span>
+            <h2 id="modal-title">Legg til person</h2>
+            <form id="member-form">
+                <input type="hidden" id="member-id">
 
-                        <div class="form-group">
-                            <label>Kjønn</label>
-                            <div class="radio-group">
-                                <label><input type="radio" name="gender" value="male"> Mann</label>
-                                <label><input type="radio" name="gender" value="female"> Kvinne</label>
-                                <label><input type="radio" name="gender" value="other"> Annet</label>
-                            </div>
-                        </div>
-
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label>Fødselsdato</label>
-                                <input type="date" id="birthDate">
-                            </div>
-                            <div class="form-group">
-                                <label>Dødsdato</label>
-                                <input type="date" id="deathDate">
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label>Sted</label>
-                            <input type="text" id="location" placeholder="F.eks. Kristiansand">
-                        </div>
-
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label>Breddegrad (Lat)</label>
-                                <input type="number" id="lat" step="any" placeholder="58.16">
-                            </div>
-                            <div class="form-group">
-                                <label>Lengdegrad (Lng)</label>
-                                <input type="number" id="lng" step="any" placeholder="8.25">
-                            </div>
-                        </div>
-
-                        <!-- Relationships -->
-                        <div class="form-section">
-                            <h3>Relasjoner</h3>
-                            <div class="form-group">
-                                <label>Mor</label>
-                                <select id="motherId">
-                                    <option value="">Ingen valgt</option>
-                                </select>
-                            </div>
-                            <div class="form-group">
-                                <label>Far</label>
-                                <select id="fatherId">
-                                    <option value="">Ingen valgt</option>
-                                </select>
-                            </div>
-                            <div class="form-group">
-                                <label>Ektefelle/Samboer</label>
-                                <select id="spouseId">
-                                    <option value="">Ingen valgt</option>
-                                </select>
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label>Notater</label>
-                            <textarea id="notes" rows="3"></textarea>
-                        </div>
-
-                        <div class="form-section">
-                            <h3>Barn</h3>
-                            <ul id="children-list" style="list-style: none; padding: 0; margin-bottom: 10px;">
-                                <!-- Populated by JS -->
-                            </ul>
-                            <button type="button" id="addChildBtn" class="text-btn"
-                                style="color: var(--color-forest); border-color: var(--color-forest); font-size: 0.9rem;">+
-                                Legg
-                                til barn</button>
-                        </div>
-
-                        <button type="submit" class="primary-btn">Lagre</button>
-                    </form>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Fornavn</label>
+                        <input type="text" id="firstName" required>
+                    </div>
+                    <div class="form-group">
+                        <label>Etternavn</label>
+                        <input type="text" id="lastName" required>
+                    </div>
                 </div>
-            </div>
 
-            <!-- Firebase SDKs -->
-            <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
-            <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
-            <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
+                <div class="form-group">
+                    <label>Kjønn</label>
+                    <div class="radio-group">
+                        <label><input type="radio" name="gender" value="male"> Mann</label>
+                        <label><input type="radio" name="gender" value="female"> Kvinne</label>
+                        <label><input type="radio" name="gender" value="other"> Annet</label>
+                    </div>
+                </div>
 
-            <script src="script.js"></script>
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Fødselsdato</label>
+                        <input type="date" id="birthDate">
+                    </div>
+                    <div class="form-group">
+                        <label>Dødsdato</label>
+                        <input type="date" id="deathDate">
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Sted</label>
+                    <input type="text" id="location" placeholder="F.eks. Kristiansand">
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label>Breddegrad (Lat)</label>
+                        <input type="number" id="lat" step="any" placeholder="58.16">
+                    </div>
+                    <div class="form-group">
+                        <label>Lengdegrad (Lng)</label>
+                        <input type="number" id="lng" step="any" placeholder="8.25">
+                    </div>
+                </div>
+
+                <!-- Relationships -->
+                <div class="form-section">
+                    <h3>Relasjoner</h3>
+                    <div class="form-group">
+                        <label>Mor</label>
+                        <select id="motherId">
+                            <option value="">Ingen valgt</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Far</label>
+                        <select id="fatherId">
+                            <option value="">Ingen valgt</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Ektefelle/Samboer</label>
+                        <select id="spouseId">
+                            <option value="">Ingen valgt</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label>Notater</label>
+                    <textarea id="notes" rows="3"></textarea>
+                </div>
+
+                <div class="form-section">
+                    <h3>Barn</h3>
+                    <ul id="children-list" style="list-style: none; padding: 0; margin-bottom: 10px;">
+                        <!-- Populated by JS -->
+                    </ul>
+                    <button type="button" id="addChildBtn" class="text-btn"
+                        style="color: var(--color-forest); border-color: var(--color-forest); font-size: 0.9rem;">+
+                        Legg
+                        til barn</button>
+                </div>
+
+                <button type="submit" class="primary-btn">Lagre</button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Firebase SDKs -->
+    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
+
+    <script src="script.js"></script>
 </body>
 
 </html>
\ No newline at end of file