BiryaniHubflaskImplent

Running

App Files Files Community

lokesh341 commited on Apr 18

Commit

b707184

verified ·

1 Parent(s): e86255a

Create combined_summary.html

Browse files

Files changed (1) hide show

templates/combined_summary.html +566 -0

templates/combined_summary.html ADDED Viewed

	@@ -0,0 +1,566 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Order Summary</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes lightMoveUp {
+            0% { background-position: 0 100%; }
+            100% { background-position: 0 0%; }
+        }
+        @keyframes shine {
+            from { transform: rotate(0deg) translateX(-100%); }
+            to { transform: rotate(25deg) translateX(100%); }
+        }
+        .modal, .popup {
+            animation: fadeIn 0.2s ease-in-out;
+        }
+        .progress-bar {
+            transition: width 0.6s ease-in-out;
+        }
+        .ingredient-image {
+            transition: transform 0.3s ease-in-out;
+        }
+        .ingredient-button:hover .ingredient-image {
+            transform: scale(1.1);
+        }
+        .tier-badge {
+            position: relative;
+            overflow: hidden;
+            background-color: #F97316;
+        }
+        .tier-badge::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+            animation: shine 3s infinite;
+        }
+        /* Custom class for order items */
+        .custom-class {
+            text-align: center;
+            border-radius: 8px;
+            border-width: 1px;
+            border-color: #E5E7EB;
+            padding: 20px !important;
+            margin-bottom: 12px;
+            background-color: #FFFFFF;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+        .history {
+            display: flex;
+            justify-content: center;
+            font-size: 1.75rem;
+            font-weight: 700;
+            padding: 1.5rem;
+        }
+        /* Scrollable sector images */
+        .sector-images-container {
+            display: flex;
+            overflow-x: auto;
+            padding: 10px 0;
+            gap: 15px;
+        }
+        .sector-image {
+            max-width: 150px;
+            height: 100px;
+            object-fit: cover;
+            cursor: pointer;
+            border-radius: 6px;
+        }
+        .sector-name {
+            text-align: center;
+            font-size: 0.75rem;
+            font-weight: 600;
+            margin-top: 6px;
+            max-width: 100px;
+            color: #1F2937;
+        }
+        /* Full-width orange header */
+        .back-to-menu {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            padding: 14px 24px;
+            background-color: #F97316;
+            color: #FFFFFF;
+            font-size: 1.125rem;
+            font-weight: 600;
+            text-decoration: none;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+        }
+        .back-to-menu:hover {
+            background-color: #EA580C;
+            transform: translateY(-1px);
+        }
+        /* Content spacing */
+        .container {
+            margin-top: 90px;
+        }
+        /* Sector popup */
+        #sector-popup {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(17, 24, 39, 0.6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 10000;
+            animation: fadeIn 0.2s ease-in-out;
+        }
+        #popup-content {
+            background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
+            padding: 24px;
+            border-radius: 12px;
+            width: 90%;
+            max-width: 550px;
+            max-height: 85vh;
+            overflow-y: auto;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+            border: 1px solid #E5E7EB;
+            position: relative;
+            contain: layout;
+        }
+        .popup-header {
+            position: relative;
+            padding-bottom: 12px;
+            margin-bottom: 16px;
+            border-bottom: 2px solid #F97316;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .popup-close {
+            background: #F97316;
+            color: #FFFFFF;
+            border-radius: 50%;
+            width: 36px; /* Increased for better usability */
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 22px; /* Adjusted to fit new size */
+            font-weight: bold;
+            border: none;
+            cursor: pointer;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            line-height: 1;
+            padding: 0;
+            position: relative;
+            overflow: hidden;
+            will-change: transform, background;
+        }
+        .popup-close::before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+            animation: lightMoveUp 1.5s infinite linear;
+            z-index: 0;
+        }
+        .popup-close:hover {
+            background: #EA580C;
+            transform: scale(1.1);
+        }
+        .popup-close span {
+            position: relative;
+            z-index: 1;
+        }
+        /* Ingredient modal */
+        .ingredient-modal-container {
+            display: none;
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.6);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 10000;
+            animation: fadeIn 0.2s ease-in-out;
+        }
+        .ingredient-modal {
+            background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
+            border-radius: 12px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+            border: 1px solid #E5E7EB;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            position: relative;
+            contain: layout;
+        }
+        .modal-section {
+            padding: 16px;
+            border-left: 4px solid #2DD4BF;
+            margin-bottom: 16px;
+            background: #F9FAFB;
+            border-radius: 6px;
+        }
+        /* Green border for ingredient images when section is visible */
+        .ingredients-section:not(.hidden) .ingredient-image {
+            border: 2px solid #10B981;
+            border-radius: 6px;
+        }
+        /* Prevent body scroll when modal is open */
+        body.modal-open {
+            overflow: hidden;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 640px) {
+            .back-to-menu {
+                padding: 12px 16px;
+                font-size: 1rem;
+            }
+            .container {
+                margin-top: 70px;
+            }
+            .history {
+                font-size: 1.5rem;
+                padding: 1rem;
+            }
+            .custom-class {
+                padding: 16px !important;
+            }
+            .sector-image {
+                max-width: 120px;
+                height: 80px;
+            }
+            #popup-content {
+                width: 95%;
+                padding: 16px;
+                max-height: 80vh;
+            }
+            .ingredient-modal {
+                width: 95%;
+                max-height: 80vh;
+            }
+            .popup-close {
+                width: 40px; /* Increased for touch target (WCAG) */
+                height: 40px;
+                font-size: 24px; /* Adjusted to fit new size */
+            }
+            .popup-close::before {
+                animation: lightMoveUp 1.2s infinite linear;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <a href="/menu" class="back-to-menu" aria-label="Go back to menu">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M15 18l-6-6 6-6"></path>
+        </svg>
+        Back to Menu
+    </a>
+    <div class="container mx-auto p-6 pt-2">
+        <!-- Order Confirmation -->
+        <div class="section bg-white shadow-sm rounded-xl p-6 mb-6">
+            <h1 class="text-center text-2xl font-bold text-orange-500">Order Confirmed!</h1>
+            <p class="text-center text-gray-600 mt-2">Estimated delivery time: 35 minutes</p>
+        </div>
+        <!-- Reward Status Section -->
+        <div class="section bg-white rounded-xl shadow-lg p-6 mb-6">
+            <div class="flex items-center justify-between mb-4 cursor-pointer" onclick="toggleTierDetails()">
+                <div id="tierBadge" class="w-8 h-8 p-1 rounded-full flex items-center justify-center tier-badge">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="text-white">
+                        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
+                        <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
+                        <path d="M4 22h16"></path>
+                        <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path>
+                        <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path>
+                        <path d="M9 9c0 .97.64 1.79 1.5 2.05A2 2 0 0 1 12 13c.82 0 1.54-.39 2-1"></path>
+                        <path d="M18 9H6a4 4 0 0 1 0-8h12a4 4 0 0 1 0 8Z"></path>
+                    </svg>
+                </div>
+                <span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }} Tier</span>
+                <svg id="arrowIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                    class="text-gray-600">
+                    <path id="arrowPath" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </div>
+            <!-- Collapsible Content Section -->
+            <div id="tierDetails" class="tier-details hidden">
+                <div class="text-center mb-6">
+                    <p class="text-gray-600">Valid through December 2024</p>
+                    <p class="text-lg font-semibold mt-2 text-yellow-600" id="pointsDisplay">{{ user_points }} points</p>
+                </div>
+                <!-- Progress Bar -->
+                <div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
+                    <div id="progressBar" class="absolute left-0 top-0 h-full progress-bar bg-teal-400"
+                        style="width: {{ progress_percentage }}%"></div>
+                </div>
+                <div class="flex justify-between text-sm text-gray-600 mb-4">
+                    <span id="startPoint">{{ start_point }}</span>
+                    <span id="endPoint">{{ end_point }}</span>
+                </div>
+                <p class="text-center text-gray-700">
+                    You need <span class="font-semibold text-gray-800" id="pointsNeeded">{{ points_needed_for_next_tier }}</span> more
+                    points to reach
+                    <span class="font-semibold text-orange-500" id="nextTier">{{ next_tier }}</span>
+                </p>
+                <!-- Tier Benefits -->
+                <div class="mt-6 bg-gray-50 rounded-xl p-4">
+                    <h3 class="text-lg font-semibold mb-4 text-gray-800" id="benefitsTitle">
+                        Benefits of Reaching {{ next_tier }} Tier
+                    </h3>
+                    <ul class="space-y-3" id="benefitsList">
+                        {% if next_tier == "Silver" %}
+                        <li class="flex items-center">
+                            <span class="text-2xl mr-3">🏷️</span>
+                            <span class="text-gray-700">10% discount on next purchase</span>
+                        </li>
+                        <li class="flex items-center">
+                            <span class="text-2xl mr-3">🍹</span>
+                            <span class="text-gray-700">Free soft drink with your next order</span>
+                        </li>
+                        {% elif next_tier == "Gold" %}
+                        <li class="flex items-center">
+                            <span class="text-2xl mr-3">🏷️</span>
+                            <span class="text-gray-700">15% discount on next purchase</span>
+                        </li>
+                        <li class="flex items-center">
+                            <span class="text-2xl mr-3">🍰</span>
+                            <span class="text-gray-700">Free dessert on next order</span>
+                        </li>
+                        {% elif next_tier == "Platinum" %}
+                        <li class="flex items-center">
+                            <span class="text-2xl mr-3">🏷️</span>
+                            <span class="text-gray-700">20% discount on next purchase</span>
+                        </li>
+                        <li class="flex items-center">
+                            <span class="text-2xl mr-3">🍴</span>
+                            <span class="text-gray-700">Free entrée with your next order</span>
+                        </li>
+                        {% endif %}
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <!-- Ingredient History -->
+        <div class="history">
+            <h1 class="text-center text-2xl font-bold text-orange-500">Ingredient History</h1>
+        </div>
+        <div class="sector-images-container">
+            {% for sector_name, sector in sector_details.items() %}
+            <div class="sector-item">
+                <img src="{{ sector.image_url }}" alt="{{ sector_name }}" class="sector-image lazyload" loading="lazy"
+                    onclick="showSectorDescription('{{ sector.description }}')">
+                <h3 class="sector-name">{{ sector_name }}</h3>
+            </div>
+            {% endfor %}
+        </div>
+        <!-- Popup for Sector Description -->
+        <div id="sector-popup" class="popup" style="display:none;" role="dialog" aria-modal="true">
+            <div id="popup-content">
+                <div class="popup-header flex justify-between items-center">
+                    <h3 class="text-xl font-semibold text-gray-800">Origin History</h3>
+                    <button onclick="closePopup()" class="popup-close"><span>×</span></button>
+                </div>
+                <p id="sector-description" class="text-gray-700 leading-relaxed"></p>
+            </div>
+        </div>
+        <!-- Order Items Section -->
+        <div class="text-center text-2xl font-bold text-orange-500 mb-6">Previous Orders</div>
+        {% for item in order_items %}
+        <div class="custom-class">
+            <img src="{{ item.image_url }}" alt="{{ item.name }}" class="w-full h-48 object-cover rounded-xl mb-4 lazyload" loading="lazy" />
+            <h3 class="text-lg font-semibold text-gray-800">{{ item.name }}</h3>
+            <p class="text-gray-600 mb-2">${{ "%.2f"|format(item.price) }}</p>
+            {% if item.ingredients %}
+            <button id="ingredientsToggleButton{{ loop.index }}" class="text-green-600 text-sm font-semibold mt-2 ml-2 text-left pb-4 hover:text-green-700" onclick="toggleIngredients({{ loop.index }})">
+                Show Ingredients
+            </button>
+            <div id="ingredientsSection{{ loop.index }}" class="ingredients-section hidden mt-4">
+                <div class="grid grid-cols-2 gap-4">
+                    {% for ingredient in item.ingredients %}
+                    <button
+                        onclick="showIngredientDetails(
+                        '{{ loop.index }}',
+                        '{{ ingredient.name }}',
+                        '{{ ingredient.image }}',
+                        '{{ ingredient.health_benefits }}',
+                        '{{ ingredient.fun_facts }}'
+                    )"
+                        class="relative group ingredient-button"
+                    >
+                        <div class="overflow-hidden rounded-lg">
+                            <img
+                                src="{{ ingredient.image }}"
+                                alt="{{ ingredient.name }}"
+                                class="w-full h-32 object-cover ingredient-image lazyload"
+                                loading="lazy"
+                            />
+                        </div>
+                        <p class="mt-2 text-center text-sm font-medium text-gray-800">{{ ingredient.name }}</p>
+                    </button>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+        <!-- Modal for Ingredients -->
+        <div id="ingredientModal{{ loop.index }}" class="ingredient-modal-container hidden modal" role="dialog" aria-modal="true">
+            <div class="ingredient-modal">
+                <div class="p-6">
+                    <div class="popup-header flex justify-between items-center mb-4">
+                        <h3 id="modalTitle{{ loop.index }}" class="text-xl font-semibold text-gray-800"></h3>
+                        <button onclick="closeModal({{ loop.index }})" class="popup-close"><span>×</span></button>
+                    </div>
+                    <img id="modalImage{{ loop.index }}" src="" alt="" class="w-full h-48 object-cover rounded-xl mb-4 border border-gray-200 lazyload" loading="lazy" />
+                    <div class="space-y-4">
+                        <div class="modal-section">
+                            <h4 class="font-semibold mb-2 text-gray-800 flex items-center">
+                                <svg class="w-5 h-5 mr-2 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                </svg>
+                                Health Benefits
+                            </h4>
+                            <ul id="healthBenefits{{ loop.index }}" class="list-disc list-inside text-gray-700"></ul>
+                        </div>
+                        <div class="modal-section">
+                            <h4 class="font-semibold mb-2 text-gray-800 flex items-center">
+                                <svg class="w-5 h-5 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                </svg>
+                                Fun Facts
+                            </h4>
+                            <ul id="funFacts{{ loop.index }}" class="list-disc list-inside text-gray-700"></ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    <script>
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        function showSectorDescription(description) {
+            document.getElementById('sector-description').innerText = description;
+            document.getElementById('sector-popup').style.display = 'flex';
+            document.body.classList.add('modal-open');
+        }
+        function closePopup() {
+            document.getElementById('sector-popup').style.display = 'none';
+            document.body.classList.remove('modal-open');
+        }
+        function toggleTierDetails() {
+            const tierDetails = document.getElementById('tierDetails');
+            const arrowPath = document.getElementById('arrowPath');
+            tierDetails.classList.toggle('hidden');
+            arrowPath.setAttribute('d', tierDetails.classList.contains('hidden') ? 'M19 9l-7 7-7-7' : 'M19 15l-7-7-7 7');
+        }
+        const ingredients = {{ order_items|tojson }};
+        function toggleIngredients(index) {
+            const currentSection = document.getElementById('ingredientsSection' + index);
+            const currentButton = document.getElementById('ingredientsToggleButton' + index);
+            const isCurrentlyVisible = !currentSection.classList.contains('hidden');
+            document.querySelectorAll('[id^="ingredientsSection"]').forEach(section => section.classList.add('hidden'));
+            document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(button => button.textContent = 'Show Ingredients');
+            if (!isCurrentlyVisible) {
+                currentSection.classList.remove('hidden');
+                currentButton.textContent = 'Hide Ingredients';
+            }
+        }
+        function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
+            const healthBenefitsList = healthBenefits.split(',');
+            const funFactsList = funFacts.split(',');
+            document.getElementById("modalTitle" + index).textContent = name;
+            document.getElementById("modalImage" + index).src = image;
+            const healthBenefitsUl = document.getElementById("healthBenefits" + index);
+            const funFactsUl = document.getElementById("funFacts" + index);
+            healthBenefitsUl.innerHTML = '';
+            funFactsUl.innerHTML = '';
+            healthBenefitsList.forEach(item => {
+                const li = document.createElement("li");
+                li.textContent = item.trim();
+                healthBenefitsUl.appendChild(li);
+            });
+            funFactsList.forEach(item => {
+                const li = document.createElement("li");
+                li.textContent = item.trim();
+                funFactsUl.appendChild(li);
+            });
+            document.getElementById("ingredientModal" + index).style.display = "flex";
+            document.body.classList.add('modal-open');
+        }
+        function closeModal(index) {
+            document.getElementById("ingredientModal" + index).style.display = "none";
+            document.body.classList.remove('modal-open');
+        }
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('#sector-popup') && e.target === document.getElementById('sector-popup')) {
+                closePopup();
+            }
+            document.querySelectorAll('.ingredient-modal-container').forEach(modal => {
+                if (e.target.closest(modal) && e.target === modal) {
+                    const index = modal.id.replace('ingredientModal', '');
+                    closeModal(index);
+                }
+            });
+        });
+    </script>
+</body>
+</html>