Spaces:

oyvsar
/

middagsplanlegger

Running

App Files Files Community

oyvsar commited on Apr 13, 2025

Commit

14f4849

verified ·

1 Parent(s): f9b855c

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +471 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Middagsplanlegger
-emoji: 📉
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: middagsplanlegger
+emoji: 🐳
+colorFrom: gray
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,471 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Middagsplanlegger</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+            20%, 40%, 60%, 80% { transform: translateX(5px); }
+        }
+        .shake {
+            animation: shake 0.5s;
+        }
+        .star-rating {
+            display: inline-flex;
+            direction: rtl;
+        }
+        .star-rating input {
+            display: none;
+        }
+        .star-rating label {
+            color: #d1d5db;
+            font-size: 1.5rem;
+            padding: 0 0.1rem;
+            cursor: pointer;
+        }
+        .star-rating input:checked ~ label,
+        .star-rating label:hover,
+        .star-rating label:hover ~ label {
+            color: #f59e0b;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <!-- Login Page (shown by default) -->
+    <div id="loginPage" class="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-utensils text-5xl text-green-500 mb-4"></i>
+                <h1 class="text-3xl font-bold text-gray-800">Middagsplanlegger</title>
+                <p class="text-gray-600 mt-2">Planlegg ukens middager</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>
+                    <div class="relative">
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            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"
+                        >
+                        <button
+                            type="button"
+                            id="togglePassword"
+                            class="absolute right-3 top-3 text-gray-400 hover:text-gray-600"
+                        >
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    </div>
+                    <p id="errorMessage" class="text-red-500 text-sm mt-2 hidden">
+                        Feil kode, prøv igjen
+                    </p>
+                </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"
+                >
+                    <i class="fas fa-sign-in-alt mr-2"></i> Logg inn
+                </button>
+                <div class="text-center text-sm text-gray-500">
+                    <p>Kontakt administrator for tilgangskode</p>
+                </div>
+            </form>
+        </div>
+    </div>
+    <!-- Middagsplanlegger App (hidden by default) -->
+    <div id="appPage" class="hidden p-6 max-w-4xl mx-auto">
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-gray-800 flex items-center justify-center">
+                <i class="fas fa-utensils text-green-500 mr-3"></i> Middagsplanlegger
+            </h1>
+            <p class="text-gray-600 mt-2">Planlegg ukens middager og vurder rettene</p>
+        </header>
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
+            <h2 class="text-xl font-semibold text-gray-700 mb-4">Ukens middager</h2>
+            <div class="space-y-4">
+                <!-- Monday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Mandag:</label>
+                    <input type="text" id="monday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+                <!-- Tuesday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Tirsdag:</label>
+                    <input type="text" id="tuesday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+                <!-- Wednesday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Onsdag:</label>
+                    <input type="text" id="wednesday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+                <!-- Thursday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Torsdag:</label>
+                    <input type="text" id="thursday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+                <!-- Friday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Fredag:</label>
+                    <input type="text" id="friday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+                <!-- Saturday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Lørdag:</label>
+                    <input type="text" id="saturday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+                <!-- Sunday -->
+                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                    <label class="w-24 font-medium text-gray-700">Søndag:</label>
+                    <input type="text" id="sunday" class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 transition" placeholder="Hva skal vi spise?">
+                </div>
+            </div>
+            <div class="mt-6 flex justify-end">
+                <button id="saveBtn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-lg transition duration-200 flex items-center">
+                    <i class="fas fa-save mr-2"></i> Lagre plan
+                </button>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
+            <h2 class="text-xl font-semibold text-gray-700 mb-4">Denne ukens middager</h2>
+            <div id="dinnersList" class="space-y-6">
+                <!-- This will be populated with JavaScript -->
+                <p class="text-gray-500 italic">Ingen middager lagt til ennå</p>
+            </div>
+            <div id="ratingSummary" class="mt-4 pt-4 border-t border-gray-200 hidden">
+                <h3 class="font-medium text-gray-700 mb-2">Gjennomsnittlig vurdering:</h3>
+                <div id="averageRating" class="text-yellow-500 text-xl"></div>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-lg p-6">
+            <h2 class="text-xl font-semibold text-gray-700 mb-4">Inspirasjon</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <a href="https://vegetarmat.org//" target="_blank" class="bg-green-50 hover:bg-green-100 p-4 rounded-lg transition flex items-center">
+                    <i class="fas fa-leaf text-green-500 text-2xl mr-3"></i>
+                    <div>
+                        <h3 class="font-medium text-gray-800">Vegetarmat.no</h3>
+                        <p class="text-sm text-gray-600">Vegetariske oppskrifter</p>
+                    </div>
+                </a>
+                <a href="https://www.godfisk.no/oppskrifter/" target="_blank" class="bg-blue-50 hover:bg-blue-100 p-4 rounded-lg transition flex items-center">
+                    <i class="fas fa-fish text-blue-500 text-2xl mr-3"></i>
+                    <div>
+                        <h3 class="font-medium text-gray-800">Godfisk</h3>
+                        <p class="text-sm text-gray-600">Pescetariske oppskrifter</p>
+                    </div>
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const loginForm = document.getElementById('loginForm');
+            const passwordInput = document.getElementById('password');
+            const togglePassword = document.getElementById('togglePassword');
+            const errorMessage = document.getElementById('errorMessage');
+            const loginPage = document.getElementById('loginPage');
+            const appPage = document.getElementById('appPage');
+            const correctPassword = '1555'; // Hardcoded password for demo
+            // Toggle password visibility
+            togglePassword.addEventListener('click', function() {
+                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+                passwordInput.setAttribute('type', type);
+                this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
+            });
+            // Form submission
+            loginForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const enteredPassword = passwordInput.value.trim();
+                if (enteredPassword === correctPassword) {
+                    // Successful login - show the app
+                    errorMessage.classList.add('hidden');
+                    passwordInput.classList.remove('border-red-500');
+                    // Hide login and show app
+                    loginPage.classList.add('hidden');
+                    appPage.classList.remove('hidden');
+                    // Load any saved data
+                    loadSavedData();
+                } else {
+                    // Failed login
+                    errorMessage.classList.remove('hidden');
+                    passwordInput.classList.add('border-red-500');
+                    loginForm.classList.add('shake');
+                    // Remove shake class after animation completes
+                    setTimeout(() => {
+                        loginForm.classList.remove('shake');
+                    }, 500);
+                    // Focus and select the password field
+                    passwordInput.focus();
+                    passwordInput.select();
+                }
+            });
+            // Clear error when typing
+            passwordInput.addEventListener('input', function() {
+                errorMessage.classList.add('hidden');
+                this.classList.remove('border-red-500');
+            });
+            // Save button functionality
+            document.getElementById('saveBtn').addEventListener('click', function() {
+                saveData();
+                updateDinnersList();
+            });
+            // Function to save data to localStorage
+            function saveData() {
+                const weekData = {
+                    monday: {
+                        meal: document.getElementById('monday').value,
+                        rating: 0 // Ratings are now handled separately
+                    },
+                    tuesday: {
+                        meal: document.getElementById('tuesday').value,
+                        rating: 0
+                    },
+                    wednesday: {
+                        meal: document.getElementById('wednesday').value,
+                        rating: 0
+                    },
+                    thursday: {
+                        meal: document.getElementById('thursday').value,
+                        rating: 0
+                    },
+                    friday: {
+                        meal: document.getElementById('friday').value,
+                        rating: 0
+                    },
+                    saturday: {
+                        meal: document.getElementById('saturday').value,
+                        rating: 0
+                    },
+                    sunday: {
+                        meal: document.getElementById('sunday').value,
+                        rating: 0
+                    }
+                };
+                localStorage.setItem('middagsplanlegger', JSON.stringify(weekData));
+                // Show a temporary success message
+                const btn = this;
+                const originalText = btn.innerHTML;
+                btn.innerHTML = '<i class="fas fa-check mr-2"></i> Lagret!';
+                btn.classList.remove('bg-green-500');
+                btn.classList.add('bg-green-600');
+                setTimeout(() => {
+                    btn.innerHTML = originalText;
+                    btn.classList.remove('bg-green-600');
+                    btn.classList.add('bg-green-500');
+                }, 2000);
+            }
+            // Function to load saved data from localStorage
+            function loadSavedData() {
+                const savedData = localStorage.getItem('middagsplanlegger');
+                if (savedData) {
+                    const weekData = JSON.parse(savedData);
+                    // Populate the form fields
+                    document.getElementById('monday').value = weekData.monday.meal || '';
+                    document.getElementById('tuesday').value = weekData.tuesday.meal || '';
+                    document.getElementById('wednesday').value = weekData.wednesday.meal || '';
+                    document.getElementById('thursday').value = weekData.thursday.meal || '';
+                    document.getElementById('friday').value = weekData.friday.meal || '';
+                    document.getElementById('saturday').value = weekData.saturday.meal || '';
+                    document.getElementById('sunday').value = weekData.sunday.meal || '';
+                    // Update the dinners list
+                    updateDinnersList();
+                }
+            }
+            // Function to update the dinners list display
+            function updateDinnersList() {
+                const dinnersList = document.getElementById('dinnersList');
+                const ratingSummary = document.getElementById('ratingSummary');
+                const averageRating = document.getElementById('averageRating');
+                const savedData = localStorage.getItem('middagsplanlegger');
+                if (!savedData) {
+                    dinnersList.innerHTML = '<p class="text-gray-500 italic">Ingen middager lagt til ennå</p>';
+                    ratingSummary.classList.add('hidden');
+                    return;
+                }
+                const weekData = JSON.parse(savedData);
+                let hasMeals = false;
+                let html = '';
+                let totalRatings = 0;
+                let ratedMeals = 0;
+                const days = [
+                    { name: 'Mandag', key: 'monday' },
+                    { name: 'Tirsdag', key: 'tuesday' },
+                    { name: 'Onsdag', key: 'wednesday' },
+                    { name: 'Torsdag', key: 'thursday' },
+                    { name: 'Fredag', key: 'friday' },
+                    { name: 'Lørdag', key: 'saturday' },
+                    { name: 'Søndag', key: 'sunday' }
+                ];
+                days.forEach(day => {
+                    const mealData = weekData[day.key];
+                    if (mealData.meal) {
+                        hasMeals = true;
+                        // Create rating HTML for each meal
+                        let ratingHtml = '';
+                        if (mealData.rating > 0) {
+                            ratingHtml = `
+                                <div class="mt-2">
+                                    <span class="text-yellow-500">
+                                        ${'★'.repeat(mealData.rating)}${'☆'.repeat(5 - mealData.rating)}
+                                    </span>
+                                    <span class="text-sm text-gray-500 ml-2">${mealData.rating} av 5</span>
+                                </div>
+                            `;
+                            totalRatings += parseInt(mealData.rating);
+                            ratedMeals++;
+                        }
+                        html += `
+                            <div class="border-b border-gray-100 pb-4 last:border-0">
+                                <div class="flex justify-between items-start">
+                                    <div>
+                                        <p class="font-medium">${day.name}: ${mealData.meal}</p>
+                                        ${ratingHtml}
+                                    </div>
+                                    <div class="flex items-center gap-2">
+                                        <div class="star-rating">
+                                            <input type="radio" id="${day.key}-5" name="${day.key}-rating" value="5">
+                                            <label for="${day.key}-5">★</label>
+                                            <input type="radio" id="${day.key}-4" name="${day.key}-rating" value="4">
+                                            <label for="${day.key}-4">★</label>
+                                            <input type="radio" id="${day.key}-3" name="${day.key}-rating" value="3">
+                                            <label for="${day.key}-3">★</label>
+                                            <input type="radio" id="${day.key}-2" name="${day.key}-rating" value="2">
+                                            <label for="${day.key}-2">★</label>
+                                            <input type="radio" id="${day.key}-1" name="${day.key}-rating" value="1">
+                                            <label for="${day.key}-1">★</label>
+                                        </div>
+                                        <button
+                                            onclick="rateMeal('${day.key}')"
+                                            class="bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium py-1 px-3 rounded transition duration-200"
+                                        >
+                                            Rate
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                    }
+                });
+                if (!hasMeals) {
+                    html = '<p class="text-gray-500 italic">Ingen middager lagt til ennå</p>';
+                    ratingSummary.classList.add('hidden');
+                } else {
+                    // Calculate and show average rating if there are any rated meals
+                    if (ratedMeals > 0) {
+                        const avgRating = (totalRatings / ratedMeals).toFixed(1);
+                        averageRating.innerHTML = `${avgRating} av 5`;
+                        // Create visual stars for average rating
+                        const fullStars = Math.floor(avgRating);
+                        const hasHalfStar = (avgRating % 1) >= 0.5;
+                        let starsHtml = '';
+                        for (let i = 0; i < fullStars; i++) {
+                            starsHtml += '★';
+                        }
+                        if (hasHalfStar) {
+                            starsHtml += '½';
+                        }
+                        const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
+                        for (let i = 0; i < emptyStars; i++) {
+                            starsHtml += '☆';
+                        }
+                        averageRating.innerHTML += ` ${starsHtml}`;
+                        ratingSummary.classList.remove('hidden');
+                    } else {
+                        ratingSummary.classList.add('hidden');
+                    }
+                }
+                dinnersList.innerHTML = html;
+            }
+            // Add rateMeal function to the window object so it can be called from inline onclick
+            window.rateMeal = function(dayKey) {
+                const selectedRating = document.querySelector(`input[name="${dayKey}-rating"]:checked`);
+                if (!selectedRating) {
+                    alert('Velg en vurdering først!');
+                    return;
+                }
+                const rating = parseInt(selectedRating.value);
+                const savedData = localStorage.getItem('middagsplanlegger');
+                if (savedData) {
+                    const weekData = JSON.parse(savedData);
+                    weekData[dayKey].rating = rating;
+                    localStorage.setItem('middagsplanlegger', JSON.stringify(weekData));
+                    // Update the display
+                    updateDinnersList();
+                    // Show a temporary success message
+                    const rateBtn = selectedRating.closest('div').querySelector('button');
+                    const originalText = rateBtn.innerHTML;
+                    rateBtn.innerHTML = '<i class="fas fa-check mr-1"></i> Lagret';
+                    rateBtn.classList.remove('bg-blue-500');
+                    rateBtn.classList.add('bg-green-500');
+                    setTimeout(() => {
+                        rateBtn.innerHTML = 'Rate';
+                        rateBtn.classList.remove('bg-green-500');
+                        rateBtn.classList.add('bg-blue-500');
+                    }, 2000);
+                }
+            };
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=oyvsar/middagsplanlegger" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>