Spaces:
Sleeping
Sleeping
File size: 8,310 Bytes
90537f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
{% extends "base.html" %}
{% block title %}Tabble-v3 - Modern Restaurant Management System{% endblock %}
{% block content %}
<!-- Hero Section -->
<div class="header-section">
<div class="container text-center">
<h1 class="display-4 mb-3">
<i class="fas fa-utensils me-3"></i>
Welcome to Tabble-v3
</h1>
<p class="lead mb-4">
Modern Restaurant Management System with QR Code Ordering, Real-time Analytics, and Multi-Database Support
</p>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="badge bg-light text-dark fs-6 mb-3">
<i class="fas fa-rocket me-2"></i>
Powered by FastAPI, SQLAlchemy & Firebase
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div class="container">
<div class="row mb-5">
<div class="col-12 text-center mb-4">
<h2>Choose Your Interface</h2>
<p class="text-muted">Access different areas of the restaurant management system</p>
</div>
</div>
<div class="row g-4 mb-5">
<!-- Customer Interface -->
<div class="col-md-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="mb-3">
<i class="fas fa-mobile-alt fa-3x text-primary"></i>
</div>
<h5 class="card-title">Customer Interface</h5>
<p class="card-text text-muted">
QR code ordering, real-time cart management, payment processing with loyalty discounts
</p>
<ul class="list-unstyled text-start mb-4">
<li><i class="fas fa-check text-success me-2"></i>Phone OTP Authentication</li>
<li><i class="fas fa-check text-success me-2"></i>Live Cart Updates</li>
<li><i class="fas fa-check text-success me-2"></i>Special Offers</li>
<li><i class="fas fa-check text-success me-2"></i>Order History</li>
</ul>
<a href="/customer" class="btn btn-primary">
<i class="fas fa-user me-2"></i>Customer Login
</a>
</div>
</div>
</div>
<!-- Chef Dashboard -->
<div class="col-md-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="mb-3">
<i class="fas fa-hat-chef fa-3x text-success"></i>
</div>
<h5 class="card-title">Chef Dashboard</h5>
<p class="card-text text-muted">
Real-time order management, kitchen operations, and instant status updates
</p>
<ul class="list-unstyled text-start mb-4">
<li><i class="fas fa-check text-success me-2"></i>Live Order Notifications</li>
<li><i class="fas fa-check text-success me-2"></i>Kitchen Operations</li>
<li><i class="fas fa-check text-success me-2"></i>Status Management</li>
<li><i class="fas fa-check text-success me-2"></i>Order Queue</li>
</ul>
<a href="/chef" class="btn btn-success">
<i class="fas fa-hat-chef me-2"></i>Chef Dashboard
</a>
</div>
</div>
</div>
<!-- Admin Panel -->
<div class="col-md-4">
<div class="card feature-card h-100">
<div class="card-body text-center p-4">
<div class="mb-3">
<i class="fas fa-cogs fa-3x text-warning"></i>
</div>
<h5 class="card-title">Admin Panel</h5>
<p class="card-text text-muted">
Complete restaurant management, analytics, and multi-database operations
</p>
<ul class="list-unstyled text-start mb-4">
<li><i class="fas fa-check text-success me-2"></i>Menu Management</li>
<li><i class="fas fa-check text-success me-2"></i>Order Tracking</li>
<li><i class="fas fa-check text-success me-2"></i>Analytics Dashboard</li>
<li><i class="fas fa-check text-success me-2"></i>Settings Control</li>
</ul>
<a href="/admin" class="btn btn-warning">
<i class="fas fa-cog me-2"></i>Admin Panel
</a>
</div>
</div>
</div>
</div>
<!-- Key Features -->
<div class="row mb-5">
<div class="col-12 text-center mb-4">
<h2>Key Features</h2>
<p class="text-muted">Everything you need for modern restaurant management</p>
</div>
</div>
<div class="row g-4 mb-5">
<div class="col-md-3 col-sm-6">
<div class="text-center">
<i class="fas fa-qrcode fa-2x text-primary mb-3"></i>
<h6>QR Code Ordering</h6>
<small class="text-muted">Contactless table ordering system</small>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="text-center">
<i class="fas fa-database fa-2x text-info mb-3"></i>
<h6>Multi-Database</h6>
<small class="text-muted">Independent hotel operations</small>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="text-center">
<i class="fas fa-chart-line fa-2x text-success mb-3"></i>
<h6>Real-time Analytics</h6>
<small class="text-muted">Business intelligence dashboard</small>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="text-center">
<i class="fas fa-shield-alt fa-2x text-danger mb-3"></i>
<h6>Secure Authentication</h6>
<small class="text-muted">Firebase phone OTP system</small>
</div>
</div>
</div>
<!-- API Documentation -->
<div class="row">
<div class="col-12">
<div class="card bg-light">
<div class="card-body text-center p-4">
<h5>API Documentation</h5>
<p class="text-muted mb-3">
Explore the comprehensive API documentation for developers
</p>
<div class="d-flex gap-3 justify-content-center">
<a href="/docs" target="_blank" class="btn btn-outline-primary">
<i class="fas fa-book me-2"></i>Swagger UI
</a>
<a href="/redoc" target="_blank" class="btn btn-outline-secondary">
<i class="fas fa-file-alt me-2"></i>ReDoc
</a>
<a href="/health" target="_blank" class="btn btn-outline-success">
<i class="fas fa-heartbeat me-2"></i>Health Check
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
// Add some interactivity
document.addEventListener('DOMContentLoaded', function() {
// Add hover effects
const cards = document.querySelectorAll('.feature-card');
cards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px)';
this.style.boxShadow = '0 4px 20px rgba(0,0,0,0.15)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
});
});
});
</script>
{% endblock %} |