☕ Café Management System :root { –primary-color: #6f42c1; –primary-dark: #59359e; –secondary-color: #ff7e5f; –light-color: #f8f9fa; –dark-color: #343a40; –success-color: #28a745; –warning-color: #ffc107; –danger-color: #dc3545; –info-color: #17a2b8; –sidebar-width: 260px; –topbar-height: 70px; –transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fb; color: #333; overflow-x: hidden; } /* Sidebar Styles */ .sidebar { position: fixed; top: 0; left: 0; width: var(–sidebar-width); height: 100vh; background: linear-gradient(180deg, var(–primary-color), var(–primary-dark)); color: white; padding: 20px 0; transition: all var(–transition-speed); z-index: 1000; box-shadow: 3px 0 15px rgba(0, 0, 0, 0.1); } .sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .sidebar-header h3 { font-weight: 700; font-size: 1.5rem; margin-bottom: 5px; } .sidebar-header p { font-size: 0.85rem; opacity: 0.8; } .sidebar-menu { padding: 20px 0; height: calc(100vh – 150px); overflow-y: auto; } .sidebar-menu ul { list-style: none; padding: 0; } .sidebar-menu li { margin-bottom: 5px; } .sidebar-menu a { display: flex; align-items: center; padding: 12px 20px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: all 0.2s; border-left: 4px solid transparent; } .sidebar-menu a:hover, .sidebar-menu a.active { background-color: rgba(255, 255, 255, 0.1); color: white; border-left-color: var(–secondary-color); } .sidebar-menu i { width: 25px; font-size: 1.1rem; margin-right: 10px; } /* Main Content Styles */ .main-content { margin-left: var(–sidebar-width); padding: 20px; transition: all var(–transition-speed); } /* Topbar Styles */ .topbar { background-color: white; height: var(–topbar-height); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); border-radius: 10px; margin-bottom: 25px; } .topbar-left h4 { font-weight: 600; color: var(–dark-color); margin: 0; } .topbar-right { display: flex; align-items: center; gap: 20px; } .user-profile { display: flex; align-items: center; gap: 10px; cursor: pointer; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(–primary-color); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } /* Dashboard Cards */ .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .stat-card { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; border-left: 4px solid var(–primary-color); } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); } .stat-card.orders { border-left-color: var(–info-color); } .stat-card.revenue { border-left-color: var(–success-color); } .stat-card.inventory { border-left-color: var(–warning-color); } .stat-card.staff { border-left-color: var(–danger-color); } .stat-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 15px; } .orders .stat-icon { background-color: rgba(23, 162, 184, 0.15); color: var(–info-color); } .revenue .stat-icon { background-color: rgba(40, 167, 69, 0.15); color: var(–success-color); } .inventory .stat-icon { background-color: rgba(255, 193, 7, 0.15); color: var(–warning-color); } .staff .stat-icon { background-color: rgba(220, 53, 69, 0.15); color: var(–danger-color); } .stat-value { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; } .stat-label { color: #6c757d; font-size: 0.9rem; } /* Charts & Tables */ .chart-container, .table-container { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 25px; } .section-title { font-weight: 600; margin-bottom: 20px; color: var(–dark-color); display: flex; align-items: center; justify-content: space-between; } .section-title h5 { margin: 0; } /* Recent Orders Table */ .table-responsive { overflow-x: auto; } .table thead th { border-bottom: 2px solid #dee2e6; font-weight: 600; color: var(–dark-color); } .table tbody tr { transition: background-color 0.2s; } .table tbody tr:hover { background-color: rgba(0, 0, 0, 0.02); } .order-status { padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; } .status-pending { background-color: rgba(255, 193, 7, 0.2); color: #856404; } .status-preparing { background-color: rgba(23, 162, 184, 0.2); color: #0c5460; } .status-ready { background-color: rgba(40, 167, 69, 0.2); color: #155724; } .status-delivered { background-color: rgba(108, 117, 125, 0.2); color: #383d41; } /* Quick Action Buttons */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; } .action-btn { background-color: white; border-radius: 10px; padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); transition: all 0.3s; text-decoration: none; color: var(–dark-color); border: 1px solid transparent; } .action-btn:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); border-color: var(–primary-color); color: var(–primary-color); } .action-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 10px; background-color: rgba(111, 66, 193, 0.1); color: var(–primary-color); } .action-label { font-weight: 600; font-size: 0.9rem; } /* Mobile Sidebar Toggle */ .sidebar-toggle { display: none; background: none; border: none; font-size: 1.5rem; color: var(–dark-color); cursor: pointer; } /* Responsive Design */ @media (max-width: 992px) { .sidebar { transform: translateX(-100%); } .sidebar.active { transform: translateX(0); } .main-content { margin-left: 0; } .sidebar-toggle { display: block; } .dashboard-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (max-width: 768px) { .dashboard-cards, .quick-actions { grid-template-columns: repeat(2, 1fr); } .topbar-right { gap: 10px; } .user-name { display: none; } } @media (max-width: 576px) { .dashboard-cards, .quick-actions { grid-template-columns: 1fr; } .main-content { padding: 15px; } } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js https://cdn.jsdelivr.net/npm/sweetalert2@11 // Sidebar Toggle for Mobile document.querySelector(‘.sidebar-toggle’).addEventListener(‘click’, function() { document.querySelector(‘.sidebar’).classList.toggle(‘active’); }); // Sidebar Navigation document.querySelectorAll(‘.sidebar-menu a’).forEach(link => { link.addEventListener(‘click’, function(e) { e.preventDefault(); // Remove active class from all links document.querySelectorAll(‘.sidebar-menu a’).forEach(item => { item.classList.remove(‘active’); }); // Add active class to clicked link this.classList.add(‘active’); // Get the section to show const section = this.getAttribute(‘data-section’); const pageTitle = this.textContent.trim(); // Update page title document.getElementById(‘page-title’).textContent = pageTitle; // For now, we’ll just show a SweetAlert for sections other than dashboard if (section === ‘dashboard’) { document.getElementById(‘dashboard-content’).style.display = ‘block’; document.getElementById(‘other-sections’).style.display = ‘none’; } else { document.getElementById(‘dashboard-content’).style.display = ‘none’; document.getElementById(‘other-sections’).style.display = ‘block’; // Show a message about the section Swal.fire({ title: `${pageTitle} Section`, text: `This would load the ${section.replace(‘-‘, ‘ ‘)} management interface.`, icon: ‘info’, confirmButtonText: ‘OK’, confirmButtonColor: ‘#6f42c1’ }); } // Close sidebar on mobile after clicking a link if (window.innerWidth { if (result.isConfirmed) { Swal.fire({ title: ‘Logged Out’, text: ‘You have been successfully logged out.’, icon: ‘success’, confirmButtonColor: ‘#6f42c1’, confirmButtonText: ‘OK’ }).then(() => { // In a real app, this would redirect to login page // window.location.href = ‘login.html’; }); } }); }); // Notification Button document.getElementById(‘notification-btn’).addEventListener(‘click’, function() { Swal.fire({ title: ‘Notifications’, html: ` `, showCloseButton: true, showConfirmButton: false, width: 400 }); }); // Quick Action Buttons document.getElementById(‘new-order-btn’).addEventListener(‘click’, function(e) { e.preventDefault(); Swal.fire({ title: ‘Create New Order’, html: ` `, showCancelButton: true, confirmButtonText: ‘Start Order’, confirmButtonColor: ‘#6f42c1’, cancelButtonText: ‘Cancel’, preConfirm: () => { const orderType = document.getElementById(‘order-type’).value; const tableNumber = document.getElementById(‘table-number’).value; const customerName = document.getElementById(‘customer-name’).value; return { orderType, tableNumber, customerName }; } }).then((result) => { if (result.isConfirmed) { Swal.fire({ title: ‘Order Started!’, text: `New ${result.value.orderType} order created${result.value.tableNumber ? ‘ for table #’ + result.value.tableNumber : ”}.`, icon: ‘success’, confirmButtonColor: ‘#6f42c1’ }); } }); }); // Other Quick Actions const quickActions = [ { id: ‘table-management-btn’, title: ‘Table Management’, text: ‘This would open the table management interface where you can assign tables, see occupancy status, and manage reservations.’ }, { id: ‘inventory-check-btn’, title: ‘Inventory Check’, text: ‘This would open the inventory management system to check stock levels, add new items, or generate purchase orders.’ }, { id: ‘kitchen-view-btn’, title: ‘Kitchen Display System’, text: ‘This would show the kitchen display with current orders, preparation timers, and completion status.’ }, { id: ‘generate-report-btn’, title: ‘Generate Report’, text: ‘This would open the report generator where you can create sales, inventory, or staff performance reports.’ }, { id: ‘customer-insights-btn’, title: ‘Customer Insights’, text: ‘This would show customer analytics including visit frequency, average spend, and loyalty program status.’ }, { id: ‘view-all-orders’, title: ‘All Orders’, text: ‘This would load the complete order history with filtering and search options.’ } ]; quickActions.forEach(action => { document.getElementById(action.id).addEventListener(‘click’, function(e) { e.preventDefault(); Swal.fire({ title: action.title, text: action.text, icon: ‘info’, confirmButtonText: ‘OK’, confirmButtonColor: ‘#6f42c1’ }); }); }); // Simulate real-time updates for statistics function updateStats() { // In a real app, this would fetch data from an API const today = new Date(); const hour = today.getHours(); // Simulate some realistic fluctuations const orderBase = 142; const revenueBase = 24580; // More orders during peak hours (11 AM – 2 PM, 6 PM – 9 PM) let orderMultiplier = 1; if ((hour >= 11 && hour = 18 && hour { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp – startTimestamp) / duration, 1); const value = Math.floor(progress * (end – start) + start); element.textContent = `₹${value.toLocaleString()}`; if (progress < 1) { window.requestAnimationFrame(step); } }; window.requestAnimationFrame(step); } // Update stats every 30 seconds to simulate real-time data setInterval(updateStats, 30000); // Initialize with some random data updateStats(); // Close sidebar when clicking outside on mobile document.addEventListener('click', function(e) { const sidebar = document.querySelector('.sidebar'); const toggleBtn = document.querySelector('.sidebar-toggle'); if (window.innerWidth <= 992 && !sidebar.contains(e.target) && !toggleBtn.contains(e.target) && sidebar.classList.contains('active')) { sidebar.classList.remove('active'); } });