Hugging Face's logo

Spaces:
Testudines
/
stocksync-pro
Running

App Files Community
stocksync-pro / index.html
Testudines's picture
Testudines
mach eine profisionelle webapp: Anforderungen: react, typescript, mariadb, sequelized unsere webapp ist eine smart inventory und sales managment website für kleine läden und unternehmen zur übersicht der bestellten waren, lieferungen, matierialien im lager usw. sales mit intelligten grafiken anzeigen lassen, basierend auf den waren und den lieferungen vorschläge zur nachbestellung und ersparnissen geben powered by AI. Layout: Hauptseite: Oben links Unser Logo SISM (Smart inventory & Sales inventory ausgeschrieben) in der selben Zeile rechts kommt der Profilbutton unter den beiden kommt die navbar die gut smart und responsible ist, mit den kategorien: Dashboard, Sales, Lieferungen, Empfehlungen von AI, Analysen mit der Zeit, Lieferungen usw.; Designe jede website auch passend responsible und profisionell. du kannst entscheiden wie alles ausschaut bei den sub websites, zb sales oder analyse. framer-motion
ef3065a verified
Raw History Blame Contribute Delete
18.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StockSync Pro | Smart Inventory Dashboard</title>
<link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
:root {
--primary: #6366f1;
--secondary: #10b981;
}
body {
font-family: 'Space Grotesk', sans-serif;
overflow-x: hidden;
}
.gradient-text {
background: linear-gradient(90deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gray-50" id="vanta-bg">
<!-- Navigation -->
<nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold gradient-text">SISM</span>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sales</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deliveries</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">AI Recs</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Analytics</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none">
<i data-feather="bell"></i>
</button>
<div class="ml-3 relative">
<div>
<button type="button" class="flex text-sm rounded-full focus:outline-none" id="user-menu-button">
<img class="h-8 w-8 rounded-full" src="https://static.photos/people/200x200/23" alt="">
</button>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<div class="pt-16 pb-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Header -->
<div class="mt-8">
<div class="flex justify-between items-center">
<h1 class="text-3xl font-bold text-gray-900">Dashboard Overview</h1>
<div class="flex space-x-4">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300 flex items-center">
<i data-feather="plus" class="mr-2"></i> New Order
</button>
<button class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition duration-300 flex items-center">
<i data-feather="refresh-cw" class="mr-2"></i> Refresh
</button>
</div>
</div>
<p class="mt-2 text-gray-600">Last updated: <span class="font-medium">Just now</span></p>
</div>
<!-- KPI Cards -->
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm card-hover transition duration-300">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-indigo-50">
<i data-feather="box" class="text-indigo-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-500">Total Stock</h3>
<p class="text-2xl font-bold mt-1">1,842 <span class="text-sm text-green-500 ml-1">(+2.3%)</span></p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm card-hover transition duration-300">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-red-50">
<i data-feather="alert-triangle" class="text-red-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-500">Low Stock</h3>
<p class="text-2xl font-bold mt-1">37 <span class="text-sm text-red-500 ml-1">(+5.7%)</span></p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm card-hover transition duration-300">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-yellow-50">
<i data-feather="truck" class="text-yellow-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-500">Delayed</h3>
<p class="text-2xl font-bold mt-1">12 <span class="text-sm text-yellow-500 ml-1">(-1.2%)</span></p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm card-hover transition duration-300">
<div class="flex items-center">
<div class="p-3 rounded-lg bg-green-50">
<i data-feather="dollar-sign" class="text-green-600"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-500">Today's Sales</h3>
<p class="text-2xl font-bold mt-1">$24,892 <span class="text-sm text-green-500 ml-1">(+8.1%)</span></p>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold text-gray-900">Sales Trend (Last 7 Days)</h2>
<select class="text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
<option>This Week</option>
<option>Last Week</option>
<option>This Month</option>
</select>
</div>
<div class="mt-6 h-64 bg-gray-50 rounded-lg flex items-center justify-center">
<p class="text-gray-500">Interactive chart will appear here</p>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold text-gray-900">Top Products</h2>
<select class="text-sm border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
<option>By Revenue</option>
<option>By Units Sold</option>
<option>By Profit</option>
</select>
</div>
<div class="mt-6 space-y-4">
<div class="flex items-center">
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
<span class="text-xs font-bold text-indigo-800">1</span>
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between">
<span class="text-sm font-medium text-gray-900">Wireless Earbuds Pro</span>
<span class="text-sm font-medium text-gray-900">$12,482</span>
</div>
<div class="mt-1 w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 72%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
<span class="text-xs font-bold text-emerald-800">2</span>
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between">
<span class="text-sm font-medium text-gray-900">Smart Watch X9</span>
<span class="text-sm font-medium text-gray-900">$9,845</span>
</div>
<div class="mt-1 w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-emerald-600 h-1.5 rounded-full" style="width: 58%"></div>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
<span class="text-xs font-bold text-purple-800">3</span>
</div>
<div class="ml-4 flex-1">
<div class="flex justify-between">
<span class="text-sm font-medium text-gray-900">Bluetooth Speaker</span>
<span class="text-sm font-medium text-gray-900">$5,673</span>
</div>
<div class="mt-1 w-full bg-gray-200 rounded-full h-1.5">
<div class="bg-purple-600 h-1.5 rounded-full" style="width: 42%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity & Alerts -->
<div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<h2 class="text-xl font-bold text-gray-900">Recent Activity</h2>
<div class="mt-6 space-y-6">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://static.photos/people/200x200/45" alt="">
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Alex Johnson <span class="text-gray-500">placed order #1892</span></p>
<p class="text-sm text-gray-500">2 Smart Watches, 1 Wireless Earbuds</p>
<p class="text-xs text-gray-400 mt-1">15 minutes ago</p>
</div>
</div>
<div class="flex">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://static.photos/people/200x200/28" alt="">
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-900">Sarah Miller <span class="text-gray-500">updated inventory</span></p>
<p class="text-sm text-gray-500">Added 50 units of Bluetooth Speakers</p>
<p class="text-xs text-gray-400 mt-1">1 hour ago</p>
</div>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
<h2 class="text-xl font-bold text-gray-900">Critical Alerts</h2>
<div class="mt-6 space-y-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-1 rounded-full bg-red-100">
<i data-feather="alert-circle" class="text-red-600"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Low stock alert!</p>
<p class="text-sm text-gray-500">Wireless Earbuds Pro (only 3 left)</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-1 rounded-full bg-yellow-100">
<i data-feather="clock" class="text-yellow-600"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">Delayed delivery</p>
<p class="text-sm text-gray-500">Order #1872 from TechSuppliers Inc.</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0">
<div class="p-1 rounded-full bg-blue-100">
<i data-feather="zap" class="text-blue-600"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">AI Recommendation</p>
<p class="text-sm text-gray-500">Restock Smart Watch X9 (high demand)</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200 mt-12 py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-sm text-gray-500">© 2023 StockSync Pro. All rights reserved.</p>
<div class="mt-4 md:mt-0 flex space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<i data-feather="linkedin"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x6366f1,
backgroundColor: 0xf8fafc,
size: 0.8
});
// Feather icons
feather.replace();
// Simple animation for cards on load
document.addEventListener('DOMContentLoaded', () => {
const cards = document.querySelectorAll('.card-hover');
cards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'all 0.4s ease-out';
setTimeout(() => {
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100 * index);
});
});
</script>
</body>
</html>