brickmaster-pro / index.html
yadu321's picture
hey i want app ui should should must exactly to i stached video
486312d verified
Raw
History Blame Contribute Delete
6.32 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BrickMaster Pro - Factory ERP</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-1 container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row gap-6">
<!-- Left Sidebar -->
<aside class="w-full md:w-64 bg-white rounded-lg shadow-md p-4">
<div class="mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">Factory Menu</h2>
<nav class="space-y-2">
<a href="dashboard.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="home" class="w-5 h-5"></i>
<span>Dashboard</span>
</a>
<a href="production.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="package" class="w-5 h-5"></i>
<span>Production</span>
</a>
<a href="sales.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="shopping-cart" class="w-5 h-5"></i>
<span>Sales</span>
</a>
<a href="inventory.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="database" class="w-5 h-5"></i>
<span>Inventory</span>
</a>
<a href="reports.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="pie-chart" class="w-5 h-5"></i>
<span>Reports</span>
</a>
</nav>
</div>
<div class="border-t pt-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Settings</h2>
<nav class="space-y-2">
<a href="profile.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="user" class="w-5 h-5"></i>
<span>Profile</span>
</a>
<a href="subscription.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="credit-card" class="w-5 h-5"></i>
<span>Subscription</span>
</a>
</nav>
</div>
</aside>
<!-- Main Content -->
<div class="flex-1">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">Factory Dashboard</h1>
<div class="flex items-center gap-2">
<button class="bg-blue-50 text-blue-600 p-2 rounded-lg">
<i data-feather="calendar" class="w-5 h-5"></i>
</button>
<select class="bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm">
<option>Today</option>
<option>This Week</option>
<option selected>This Month</option>
<option>This Year</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
<h3 class="text-sm font-medium text-blue-800 mb-1">Today's Production</h3>
<p class="text-2xl font-bold text-blue-900">1,240</p>
<p class="text-xs text-blue-600">Bricks</p>
</div>
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
<h3 class="text-sm font-medium text-green-800 mb-1">Brick Stock</h3>
<p class="text-2xl font-bold text-green-900">5,680</p>
<p class="text-xs text-green-600">Pieces</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
<h3 class="text-sm font-medium text-purple-800 mb-1">Monthly Revenue</h3>
<p class="text-2xl font-bold text-purple-900">₹42,500</p>
<p class="text-xs text-purple-600">This month</p>
</div>
<div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
<h3 class="text-sm font-medium text-orange-800 mb-1">Outstanding Dues</h3>
<p class="text-2xl font-bold text-orange-900">₹18,300</p>
<p class="text-xs text-orange-600">From customers</p>
</div>
</div>
<quick-actions></quick-actions>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>
g