Add 1 files

index.html

@@ -61,20 +61,20 @@
             <div class="text-center mb-8">
                 <i class="fas fa-utensils text-5xl text-green-500 mb-4"></i>
                 <h1 class="text-3xl font-bold text-gray-800">Middagsplanlegger</h1>
-                <p class="text-gray-600 mt-2">Planlegg ukens middager</p>
+                <p class="text-gray-600 mt-2">Planlegg ukens middager for din familie</p>
             </div>
             
             <form id="loginForm" class="space-y-6">
                 <div>
-                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Tilgangskode</label>
+                    <label for="familyCode" class="block text-sm font-medium text-gray-700 mb-1">Familiekode</label>
                     <div class="relative">
                         <input 
                             type="password" 
-                            id="password" 
-                            name="password"
+                            id="familyCode" 
+                            name="familyCode"
                             required
                             class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
-                            placeholder="Skriv inn koden"
+                            placeholder="Skriv inn din familie-kode"
                         >
                         <button 
                             type="button" 
@@ -85,10 +85,21 @@
                         </button>
                     </div>
                     <p id="errorMessage" class="text-red-500 text-sm mt-2 hidden">
-                        Feil kode, prøv igjen
+                        Ukjent familie-kode, prøv igjen
                     </p>
                 </div>
                 
+                <div>
+                    <label for="userName" class="block text-sm font-medium text-gray-700 mb-1">Ditt navn (valgfri)</label>
+                    <input 
+                        type="text" 
+                        id="userName" 
+                        name="userName"
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition"
+                        placeholder="Hva heter du?"
+                    >
+                </div>
+                
                 <button 
                     type="submit" 
                     class="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center"
@@ -97,7 +108,82 @@
                 </button>
                 
                 <div class="text-center text-sm text-gray-500">
-                    <p>Kontakt administrator for tilgangskode</p>
+                    <p>Familieadministrator kan opprette ny familie-kode</p>
+                    <button 
+                        type="button" 
+                        id="createFamilyBtn"
+                        class="mt-2 text-green-600 hover:text-green-800 font-medium"
+                    >
+                        Opprett ny familie
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Create Family Page (hidden by default) -->
+    <div id="createFamilyPage" class="hidden flex items-center justify-center min-h-screen">
+        <div class="bg-white rounded-xl shadow-lg p-8 w-full max-w-md">
+            <div class="text-center mb-8">
+                <i class="fas fa-users text-5xl text-blue-500 mb-4"></i>
+                <h1 class="text-3xl font-bold text-gray-800">Opprett ny familie</h1>
+                <p class="text-gray-600 mt-2">Opprett en unik kode for din familie</p>
+            </div>
+            
+            <form id="createFamilyForm" class="space-y-6">
+                <div>
+                    <label for="newFamilyName" class="block text-sm font-medium text-gray-700 mb-1">Familienavn</label>
+                    <input 
+                        type="text" 
+                        id="newFamilyName" 
+                        name="newFamilyName"
+                        required
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                        placeholder="F.eks. Andersen-familien"
+                    >
+                </div>
+                
+                <div>
+                    <label for="newFamilyCode" class="block text-sm font-medium text-gray-700 mb-1">Velg en familie-kode</label>
+                    <input 
+                        type="password" 
+                        id="newFamilyCode" 
+                        name="newFamilyCode"
+                        required
+                        minlength="4"
+                        maxlength="8"
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                        placeholder="Velg en 4-8 siffer kode"
+                    >
+                    <p class="text-xs text-gray-500 mt-1">Dette er koden alle familiemedlemmer bruker for å logge inn</p>
+                </div>
+                
+                <div>
+                    <label for="adminName" class="block text-sm font-medium text-gray-700 mb-1">Ditt navn (administrator)</label>
+                    <input 
+                        type="text" 
+                        id="adminName" 
+                        name="adminName"
+                        required
+                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+                        placeholder="Ditt navn"
+                    >
+                </div>
+                
+                <div class="flex gap-4">
+                    <button 
+                        type="button" 
+                        id="cancelCreateFamily"
+                        class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-lg transition duration-200"
+                    >
+                        Avbryt
+                    </button>
+                    <button 
+                        type="submit" 
+                        class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center"
+                    >
+                        <i class="fas fa-users mr-2"></i> Opprett familie
+                    </button>
                 </div>
             </form>
         </div>
@@ -111,6 +197,8 @@
             </h1>
             <p class="text-gray-600 mt-2">Planlegg ukens middager og vurder rettene</p>
             <p id="currentWeek" class="text-sm text-gray-500 mt-1"></p>
+            <p id="familyNameDisplay" class="text-lg font-medium text-blue-600 mt-2"></p>
+            <p id="currentUserDisplay" class="text-sm text-gray-500"></p>
         </header>
 
         <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
@@ -209,14 +297,24 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // DOM elements
             const loginForm = document.getElementById('loginForm');
-            const passwordInput = document.getElementById('password');
+            const createFamilyForm = document.getElementById('createFamilyForm');
+            const familyCodeInput = document.getElementById('familyCode');
             const togglePassword = document.getElementById('togglePassword');
             const errorMessage = document.getElementById('errorMessage');
             const loginPage = document.getElementById('loginPage');
+            const createFamilyPage = document.getElementById('createFamilyPage');
             const appPage = document.getElementById('appPage');
             const currentWeekDisplay = document.getElementById('currentWeek');
-            const correctPassword = '1555'; // Hardcoded password for demo
+            const familyNameDisplay = document.getElementById('familyNameDisplay');
+            const currentUserDisplay = document.getElementById('currentUserDisplay');
+            const createFamilyBtn = document.getElementById('createFamilyBtn');
+            const cancelCreateFamily = document.getElementById('cancelCreateFamily');
+            
+            // Current family data
+            let currentFamily = null;
+            let currentUser = null;
             
             // Get current week number and year
             function getWeekNumber(date) {
@@ -228,10 +326,10 @@
                 return { week: weekNo, year: d.getFullYear() };
             }
             
-            // Get storage key for current week
-            function getCurrentWeekKey() {
+            // Get storage key for current week and family
+            function getCurrentWeekKey(familyCode) {
                 const { week, year } = getWeekNumber(new Date());
-                return `middagsplanlegger_${year}_${week}`;
+                return `middagsplanlegger_${familyCode}_${year}_${week}`;
             }
             
             // Display current week
@@ -242,26 +340,39 @@
             
             // Toggle password visibility
             togglePassword.addEventListener('click', function() {
-                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
-                passwordInput.setAttribute('type', type);
+                const type = familyCodeInput.getAttribute('type') === 'password' ? 'text' : 'password';
+                familyCodeInput.setAttribute('type', type);
                 this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
             });
             
-            // Form submission
+            // Form submission - Login
             loginForm.addEventListener('submit', function(e) {
                 e.preventDefault();
                 
-                const enteredPassword = passwordInput.value.trim();
+                const enteredCode = familyCodeInput.value.trim();
+                const userName = document.getElementById('userName').value.trim() || 'Familiemedlem';
+                
+                // Check if family exists
+                const families = JSON.parse(localStorage.getItem('middagsplanlegger_families') || '[]');
+                const family = families.find(f => f.code === enteredCode);
                 
-                if (enteredPassword === correctPassword) {
-                    // Successful login - show the app
+                if (family) {
+                    // Successful login
                     errorMessage.classList.add('hidden');
-                    passwordInput.classList.remove('border-red-500');
+                    familyCodeInput.classList.remove('border-red-500');
+                    
+                    // Set current family and user
+                    currentFamily = family;
+                    currentUser = userName;
                     
                     // Hide login and show app
                     loginPage.classList.add('hidden');
                     appPage.classList.remove('hidden');
                     
+                    // Display family info
+                    familyNameDisplay.textContent = family.name;
+                    currentUserDisplay.textContent = `Logget inn som: ${userName}`;
+                    
                     // Display current week
                     displayCurrentWeek();
                     
@@ -270,7 +381,7 @@
                 } else {
                     // Failed login
                     errorMessage.classList.remove('hidden');
-                    passwordInput.classList.add('border-red-500');
+                    familyCodeInput.classList.add('border-red-500');
                     loginForm.classList.add('shake');
                     
                     // Remove shake class after animation completes
@@ -279,13 +390,79 @@
                     }, 500);
                     
                     // Focus and select the password field
-                    passwordInput.focus();
-                    passwordInput.select();
+                    familyCodeInput.focus();
+                    familyCodeInput.select();
+                }
+            });
+            
+            // Create new family button
+            createFamilyBtn.addEventListener('click', function() {
+                loginPage.classList.add('hidden');
+                createFamilyPage.classList.remove('hidden');
+            });
+            
+            // Cancel create family
+            cancelCreateFamily.addEventListener('click', function() {
+                createFamilyPage.classList.add('hidden');
+                loginPage.classList.remove('hidden');
+            });
+            
+            // Form submission - Create new family
+            createFamilyForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                
+                const familyName = document.getElementById('newFamilyName').value.trim();
+                const familyCode = document.getElementById('newFamilyCode').value.trim();
+                const adminName = document.getElementById('adminName').value.trim();
+                
+                // Validate code length
+                if (familyCode.length < 4 || familyCode.length > 8) {
+                    alert('Familie-koden må være mellom 4 og 8 tegn');
+                    return;
+                }
+                
+                // Check if code is already taken
+                const families = JSON.parse(localStorage.getItem('middagsplanlegger_families') || '[]');
+                const codeExists = families.some(f => f.code === familyCode);
+                
+                if (codeExists) {
+                    alert('Denne koden er allerede i bruk. Vennligst velg en annen.');
+                    return;
                 }
+                
+                // Create new family
+                const newFamily = {
+                    name: familyName,
+                    code: familyCode,
+                    created: new Date().toISOString(),
+                    admin: adminName
+                };
+                
+                // Save to localStorage
+                families.push(newFamily);
+                localStorage.setItem('middagsplanlegger_families', JSON.stringify(families));
+                
+                // Set as current family
+                currentFamily = newFamily;
+                currentUser = adminName;
+                
+                // Show the app
+                createFamilyPage.classList.add('hidden');
+                appPage.classList.remove('hidden');
+                
+                // Display family info
+                familyNameDisplay.textContent = familyName;
+                currentUserDisplay.textContent = `Logget inn som: ${adminName} (Administrator)`;
+                
+                // Display current week
+                displayCurrentWeek();
+                
+                // Clear form
+                this.reset();
             });
             
             // Clear error when typing
-            passwordInput.addEventListener('input', function() {
+            familyCodeInput.addEventListener('input', function() {
                 errorMessage.classList.add('hidden');
                 this.classList.remove('border-red-500');
             });
@@ -298,7 +475,9 @@
             
             // Function to save data to localStorage
             function saveData() {
-                const weekKey = getCurrentWeekKey();
+                if (!currentFamily) return;
+                
+                const weekKey = getCurrentWeekKey(currentFamily.code);
                 const weekData = {
                     monday: {
                         meal: document.getElementById('monday').value,
@@ -361,7 +540,9 @@
             
             // Function to load saved data from localStorage
             function loadSavedData() {
-                const weekKey = getCurrentWeekKey();
+                if (!currentFamily) return;
+                
+                const weekKey = getCurrentWeekKey(currentFamily.code);
                 const savedData = localStorage.getItem(weekKey);
                 if (savedData) {
                     const weekData = JSON.parse(savedData);
@@ -382,10 +563,12 @@
             
             // Function to update the dinners list display
             function updateDinnersList() {
+                if (!currentFamily) return;
+                
                 const dinnersList = document.getElementById('dinnersList');
                 const ratingSummary = document.getElementById('ratingSummary');
                 const averageRating = document.getElementById('averageRating');
-                const weekKey = getCurrentWeekKey();
+                const weekKey = getCurrentWeekKey(currentFamily.code);
                 const savedData = localStorage.getItem(weekKey);
                 
                 if (!savedData) {
@@ -499,6 +682,8 @@
             
             // Add rateMeal function to the window object so it can be called from inline onclick
             window.rateMeal = function(dayKey) {
+                if (!currentFamily) return;
+                
                 const selectedRating = document.querySelector(`input[name="${dayKey}-rating"]:checked`);
                 if (!selectedRating) {
                     alert('Velg en vurdering først!');
@@ -506,7 +691,7 @@
                 }
                 
                 const rating = parseInt(selectedRating.value);
-                const weekKey = getCurrentWeekKey();
+                const weekKey = getCurrentWeekKey(currentFamily.code);
                 const savedData = localStorage.getItem(weekKey);
                 
                 if (savedData) {
@@ -518,7 +703,11 @@
                     }
                     
                     // Add the new rating
-                    weekData[dayKey].ratings.push(rating);
+                    weekData[dayKey].ratings.push({
+                        value: rating,
+                        user: currentUser || 'Anonym',
+                        timestamp: new Date().toISOString()
+                    });
                     
                     // Save back to localStorage
                     localStorage.setItem(weekKey, JSON.stringify(weekData));