moved to server

Update readme.md Signed-off-by: rasmus <rsbendtsen@gmail.com> Update readme.md Update Dockerfile Update Dockerfile
2025-12-29 06:19:31 +01:00
commit dd2c15ba67
15 changed files with 1022 additions and 0 deletions
--- a/templates/plan_result.html
+++ b/templates/plan_result.html
@@ -0,0 +1,144 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="max-w-5xl mx-auto px-4 py-6">
+    <div class="flex justify-between items-center mb-8 no-print">
+        <a href="{{ url_for('dashboard') }}" class="text-gray-500 hover:text-green-600 transition flex items-center gap-2">
+            <span class="text-xl">←</span> Dashboard
+        </a>
+        <div class="flex gap-3">
+            <button onclick="window.print()" class="bg-black text-white px-5 py-2 rounded-xl font-bold text-sm shadow-lg hover:bg-gray-800 transition">
+                Print Full Plan 🖨️
+            </button>
+        </div>
+    </div>
+
+    <div class="flex border-b border-gray-200 mb-8 no-print sticky top-0 bg-gray-50 z-10 py-2 overflow-x-auto gap-2">
+        <button onclick="showTab('summary')" class="tab-btn active-tab px-6 py-2 font-bold text-green-600 border-b-2 border-green-600 whitespace-nowrap">Overview</button>
+        <button onclick="showTab('shopping')" class="tab-btn px-6 py-2 text-gray-500 hover:text-green-600 whitespace-nowrap">Shopping List 🛒</button>
+        <button onclick="showTab('recipes')" class="tab-btn px-6 py-2 text-gray-500 hover:text-green-600 whitespace-nowrap">Recipes 👨‍🍳</button>
+    </div>
+
+    <div class="bg-white p-8 rounded-3xl shadow-xl border border-gray-100 min-h-[60vh]">
+        <div id="summary" class="tab-content prose prose-slate max-w-none">
+            {{ plan.summary | safe }}
+        </div>
+
+        <div id="shopping" class="tab-content hidden prose prose-slate max-w-none">
+            {{ plan.shopping | safe }}
+        </div>
+
+        <div id="recipes" class="tab-content hidden prose prose-slate max-w-none">
+            {{ plan.recipes | safe }}
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Styling for the interactive shopping list */
+    .active-tab { color: #059669 !important; border-bottom: 2px solid #059669 !important; }
+    
+    input[type="checkbox"]:checked + .checkbox-text {
+        text-decoration: line-through;
+        color: #9ca3af;
+        transition: all 0.2s ease;
+    }
+
+    #shopping ul { list-style-type: none; padding-left: 0; }
+    #shopping li { margin-bottom: 0.5rem; }
+
+    @media print {
+        .no-print { display: none !important; }
+        .tab-content { display: block !important; margin-bottom: 50px; page-break-after: always; }
+        .bg-white { box-shadow: none !important; border: none !important; }
+    }
+
+
+</style>
+<style>
+    /* 1. Your existing tab and checkbox styles */
+    .active-tab { color: #059669 !important; border-bottom: 2px solid #059669 !important; }
+    
+    input[type="checkbox"]:checked + .checkbox-text {
+        text-decoration: line-through;
+        color: #9ca3af;
+        transition: all 0.2s ease;
+    }
+
+    #shopping ul { list-style-type: none; padding-left: 0; }
+    #shopping li { margin-bottom: 0.5rem; }
+
+    /* 2. PASTE THE NEW TABLE STYLES HERE */
+    .prose table {
+        width: 100% !important;
+        border-collapse: collapse !important;
+        border: 1px solid #e5e7eb !important;
+        margin-top: 1.5rem !important;
+        border-radius: 0.75rem !important;
+        overflow: hidden !important;
+    }
+
+    .prose th {
+        background-color: #f8fafc !important;
+        padding: 0.75rem !important;
+        border: 1px solid #e5e7eb !important;
+        text-transform: uppercase !important;
+        font-size: 0.75rem !important;
+        letter-spacing: 0.05em !important;
+    }
+
+    .prose td {
+        padding: 0.75rem !important;
+        border: 1px solid #e5e7eb !important;
+        text-align: left !important;
+    }
+
+    .prose td:has(span.matrix-x),
+    .prose td:empty {
+        text-align: center !important;
+    }
+
+    .tab-content {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* 3. Your existing print logic stays at the bottom */
+    @media print {
+        .no-print { display: none !important; }
+        .tab-content { display: block !important; margin-bottom: 50px; page-break-after: always; }
+        .bg-white { box-shadow: none !important; border: none !important; }
+    }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script>
+    // 1. Tab Switching Logic
+    function showTab(tabId) {
+        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active-tab', 'font-bold', 'text-green-600', 'border-b-2', 'border-green-600'));
+        
+        document.getElementById(tabId).classList.remove('hidden');
+        event.currentTarget.classList.add('active-tab', 'font-bold', 'text-green-600', 'border-b-2', 'border-green-600');
+    }
+
+    // 2. Render Markdown and Add Interactive Elements
+    window.onload = function() {
+        // Render each section
+        document.querySelectorAll('.tab-content').forEach(div => {
+            const rawContent = div.textContent.trim();
+            div.innerHTML = marked.parse(rawContent);
+        });
+
+        // Add checkboxes to shopping list
+        const listItems = document.querySelectorAll('#shopping li');
+        listItems.forEach(item => {
+            const text = item.innerHTML;
+            item.innerHTML = `
+                <label class="flex items-center space-x-3 cursor-pointer p-2 hover:bg-gray-50 rounded-lg group">
+                    <input type="checkbox" class="w-5 h-5 rounded border-gray-300 text-green-600 focus:ring-green-500 transition cursor-pointer">
+                    <span class="text-gray-700 checkbox-text">${text}</span>
+                </label>
+            `;
+        });
+    };
+</script>
+{% endblock %}