Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digital Menu Availability Configuration</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> | |
| .shift-tag { | |
| transition: all 0.2s ease; | |
| } | |
| .shift-tag:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| .menu-card { | |
| transition: all 0.3s ease; | |
| } | |
| .menu-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #3b82f6; | |
| font-weight: 600; | |
| color: #1e40af; | |
| } | |
| .availability-badge { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.9; } | |
| 50% { opacity: 0.6; } | |
| 100% { opacity: 0.9; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800">Digital Menu Availability</h1> | |
| <p class="text-gray-600 mt-2">Configure when and how your menus appear to customers</p> | |
| </header> | |
| <!-- Tabs --> | |
| <div class="flex border-b border-gray-200 mb-8"> | |
| <button class="tab-active px-6 py-3 text-sm focus:outline-none"> | |
| <i class="fas fa-calendar-alt mr-2"></i>Availability Settings | |
| </button> | |
| <button class="px-6 py-3 text-sm text-gray-500 hover:text-blue-700 focus:outline-none"> | |
| <i class="fas fa-eye mr-2"></i>Visibility Preview | |
| </button> | |
| <button class="px-6 py-3 text-sm text-gray-500 hover:text-blue-700 focus:outline-none"> | |
| <i class="fas fa-cog mr-2"></i>Advanced Settings | |
| </button> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Configuration Panel --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Menu Availability Configuration</h2> | |
| <!-- Informational Banner --> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 rounded"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-info-circle text-blue-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-blue-700"> | |
| Configure whether menus should be <strong>visible all the time</strong> with informative schedules, | |
| or <strong>hidden outside their availability windows</strong>. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Toggle for Global Setting --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800">Availability Behavior</h3> | |
| <p class="text-sm text-gray-500">Choose how menus appear based on their schedules</p> | |
| </div> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="availability-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="availability-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="flex-1 bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-eye text-green-500 mr-2"></i> | |
| <span class="font-medium">Informative Mode</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Menus are always visible with clear schedule information. Customers can see future menus (like Christmas) but can't order them yet.</p> | |
| </div> | |
| <div class="flex-1 bg-gray-50 p-4 rounded-lg border border-gray-200 opacity-50"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-eye-slash text-red-500 mr-2"></i> | |
| <span class="font-medium">Restrictive Mode</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Menus are hidden outside their availability windows. Only current available menus are shown.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu List with Availability Settings --> | |
| <div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Menu Availability Settings</h3> | |
| <!-- Menu Item 1 --> | |
| <div class="menu-card bg-white border border-gray-200 rounded-lg p-4 mb-4 hover:shadow-md"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Daily Menu</h4> | |
| <p class="text-sm text-gray-500">Regular menu from Monday to Friday</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-clock text-gray-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-700">Availability Schedule</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="shift-tag bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-calendar-day mr-1"></i> Monday-Friday | |
| </span> | |
| <span class="shift-tag bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> 12:00-16:00 | |
| </span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> | |
| <span>This menu will be visible all the time with clear schedule information</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 2 --> | |
| <div class="menu-card bg-white border border-gray-200 rounded-lg p-4 mb-4 hover:shadow-md"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Weekend Menu</h4> | |
| <p class="text-sm text-gray-500">Special weekend offerings</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-clock text-gray-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-700">Availability Schedule</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="shift-tag bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-calendar-day mr-1"></i> Saturday-Sunday | |
| </span> | |
| <span class="shift-tag bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-clock mr-1"></i> 12:00-23:00 | |
| </span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> | |
| <span>Customers can see this menu during week but will know it's only available weekends</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Item 3 - Special Event --> | |
| <div class="menu-card bg-white border border-gray-200 rounded-lg p-4 mb-4 hover:shadow-md"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Easter Special Menu</h4> | |
| <p class="text-sm text-gray-500">Special dishes for Easter week</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-clock text-gray-500 mr-2"></i> | |
| <span class="text-sm font-medium text-gray-700">Availability Schedule</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-3"> | |
| <span class="shift-tag bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-calendar-day mr-1"></i> April 1-10 | |
| </span> | |
| <span class="shift-tag bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full flex items-center"> | |
| <i class="fas fa-eye mr-1"></i> Visible from March 1 | |
| </span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> | |
| <span>This menu will be visible starting March 1 but only available during Easter week</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Panel --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Customer Preview</h2> | |
| <!-- Date Selector --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Preview for date:</label> | |
| <div class="relative"> | |
| <input type="date" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 p-2 border" value="2023-04-05"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <i class="fas fa-calendar text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Content --> | |
| <div class="space-y-4"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-medium text-gray-800">Daily Menu</h3> | |
| <span class="availability-badge bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full"> | |
| Available now | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Available: Monday-Friday, 12:00-16:00</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-medium text-gray-800">Weekend Menu</h3> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full"> | |
| View only | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Available: Saturday-Sunday, 12:00-23:00</p> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="font-medium text-gray-800">Easter Special Menu</h3> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full"> | |
| Coming soon | |
| </span> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1">Available: April 1-10 (Visible from March 1)</p> | |
| </div> | |
| </div> | |
| <!-- Help Section --> | |
| <div class="mt-8 bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="text-sm font-medium text-blue-800 mb-2">How this works for customers:</h3> | |
| <ul class="text-xs text-blue-700 space-y-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>All menus are visible with clear availability information</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Customers can plan ahead by viewing future special menus</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> | |
| <span>Clear indicators show whether a menu is currently available</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer Actions --> | |
| <div class="mt-8 flex justify-end space-x-4"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| </html> |