madplaner/templates/plan_result.html

{% 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 %}