Hugging Face's logo

Spaces:
bala41
/
kitchen
Running

App Files Community
kitchen / index.html
bala41's picture
bala41
Add 2 files
5bd00e7 verified
Raw History Blame Contribute Delete
19.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kitchen Stock - Track Out-of-Stock Items</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>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #f8fafc;
}
.gradient-bg {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.item-card {
transition: all 0.3s ease;
}
.item-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
}
}
</style>
</head>
<body class="min-h-screen gradient-bg">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex justify-between items-center mb-8">
<div class="flex items-center">
<div class="w-12 h-12 rounded-full bg-white shadow-md flex items-center justify-center mr-4">
<i class="fas fa-utensils text-2xl text-emerald-500"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800">Kitchen Stock</h1>
</div>
<button id="addItemBtn" class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 rounded-full shadow-md flex items-center transition-all">
<i class="fas fa-plus mr-2"></i> Add Item
</button>
</header>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-emerald-100 text-emerald-600 mr-4">
<i class="fas fa-box-open text-xl"></i>
</div>
<div>
<p class="text-gray-500 text-sm">Out of Stock</p>
<h3 class="text-2xl font-bold" id="outOfStockCount">0</h3>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
<i class="fas fa-list text-xl"></i>
</div>
<div>
<p class="text-gray-500 text-sm">Total Items</p>
<h3 class="text-2xl font-bold" id="totalItemsCount">0</h3>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center">
<div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
<i class="fas fa-history text-xl"></i>
</div>
<div>
<p class="text-gray-500 text-sm">Recently Added</p>
<h3 class="text-2xl font-bold" id="recentItemsCount">0</h3>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h2 class="text-xl font-semibold text-gray-800">Out of Stock Items</h2>
<div class="relative">
<input type="text" id="searchInput" placeholder="Search items..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
</div>
<div class="p-4" id="itemsContainer">
<!-- Empty state -->
<div id="emptyState" class="text-center py-12">
<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gray-100 flex items-center justify-center">
<i class="fas fa-box-open text-3xl text-gray-400"></i>
</div>
<h3 class="text-xl font-medium text-gray-700 mb-2">No out-of-stock items</h3>
<p class="text-gray-500 mb-6">Add items that are out of stock to keep track</p>
<button id="addFirstItemBtn" class="bg-emerald-500 hover:bg-emerald-600 text-white px-6 py-2 rounded-full shadow-md inline-flex items-center transition-all">
<i class="fas fa-plus mr-2"></i> Add Your First Item
</button>
</div>
<!-- Items will be added here dynamically -->
</div>
</div>
</div>
<!-- Add Item Modal -->
<div id="addItemModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Add Out-of-Stock Item</h3>
<button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="addItemForm">
<div class="mb-4">
<label for="itemName" class="block text-sm font-medium text-gray-700 mb-1">Item Name</label>
<input type="text" id="itemName" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent" placeholder="e.g. Milk, Eggs, Bread" required>
</div>
<div class="mb-4">
<label for="itemCategory" class="block text-sm font-medium text-gray-700 mb-1">Category</label>
<select id="itemCategory" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
<option value="Dairy">Dairy</option>
<option value="Produce">Produce</option>
<option value="Pantry">Pantry</option>
<option value="Meat">Meat</option>
<option value="Beverages">Beverages</option>
<option value="Frozen">Frozen</option>
<option value="Other">Other</option>
</select>
</div>
<div class="mb-4">
<label for="itemNotes" class="block text-sm font-medium text-gray-700 mb-1">Notes (Optional)</label>
<textarea id="itemNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent" placeholder="Any specific details..."></textarea>
</div>
<div class="flex justify-end space-x-3">
<button type="button" id="cancelAddBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-all">
Cancel
</button>
<button type="submit" class="px-6 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg shadow-md transition-all flex items-center">
<i class="fas fa-save mr-2"></i> Save Item
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Restock Confirmation Modal -->
<div id="restockModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Item Restocked</h3>
<button id="closeRestockModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<p class="mb-6 text-gray-700">Are you sure you want to mark <span id="restockItemName" class="font-semibold"></span> as restocked? This will remove it from your out-of-stock list.</p>
<input type="hidden" id="restockItemId">
<div class="flex justify-end space-x-3">
<button type="button" id="cancelRestockBtn" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-all">
Cancel
</button>
<button type="button" id="confirmRestockBtn" class="px-6 py-2 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg shadow-md transition-all flex items-center">
<i class="fas fa-check mr-2"></i> Confirm Restock
</button>
</div>
</div>
</div>
</div>
<script>
// Initialize with empty arrays if localStorage is empty
let items = JSON.parse(localStorage.getItem('kitchenStockItems')) || [];
let recentItems = JSON.parse(localStorage.getItem('recentKitchenItems')) || [];
// Clear recent items if no items exist
if (items.length === 0) {
recentItems = [];
localStorage.setItem('recentKitchenItems', JSON.stringify(recentItems));
}
// DOM Elements
const itemsContainer = document.getElementById('itemsContainer');
const emptyState = document.getElementById('emptyState');
const addItemBtn = document.getElementById('addItemBtn');
const addFirstItemBtn = document.getElementById('addFirstItemBtn');
const addItemModal = document.getElementById('addItemModal');
const closeModalBtn = document.getElementById('closeModalBtn');
const cancelAddBtn = document.getElementById('cancelAddBtn');
const addItemForm = document.getElementById('addItemForm');
const searchInput = document.getElementById('searchInput');
const restockModal = document.getElementById('restockModal');
const closeRestockModalBtn = document.getElementById('closeRestockModalBtn');
const cancelRestockBtn = document.getElementById('cancelRestockBtn');
const confirmRestockBtn = document.getElementById('confirmRestockBtn');
const restockItemName = document.getElementById('restockItemName');
const restockItemId = document.getElementById('restockItemId');
const outOfStockCount = document.getElementById('outOfStockCount');
const totalItemsCount = document.getElementById('totalItemsCount');
const recentItemsCount = document.getElementById('recentItemsCount');
// Event Listeners
addItemBtn.addEventListener('click', openAddItemModal);
addFirstItemBtn.addEventListener('click', openAddItemModal);
closeModalBtn.addEventListener('click', closeAddItemModal);
cancelAddBtn.addEventListener('click', closeAddItemModal);
addItemForm.addEventListener('submit', handleAddItem);
searchInput.addEventListener('input', filterItems);
closeRestockModalBtn.addEventListener('click', closeRestockModal);
cancelRestockBtn.addEventListener('click', closeRestockModal);
confirmRestockBtn.addEventListener('click', handleRestock);
// Initialize the app
document.addEventListener('DOMContentLoaded', init);
function init() {
renderItems();
updateStats();
}
// Render all items
function renderItems(filteredItems = null) {
const itemsToRender = filteredItems || items;
if (itemsToRender.length === 0) {
emptyState.classList.remove('hidden');
itemsContainer.innerHTML = '';
itemsContainer.appendChild(emptyState);
return;
}
emptyState.classList.add('hidden');
itemsContainer.innerHTML = '';
itemsToRender.forEach((item, index) => {
const itemCard = document.createElement('div');
itemCard.className = 'item-card bg-white rounded-lg shadow-sm p-4 mb-3 border-l-4 border-red-500 hover:shadow-md';
itemCard.innerHTML = `
<div class="flex justify-between items-start">
<div>
<h3 class="font-semibold text-lg text-gray-800">${item.name}</h3>
<div class="flex items-center mt-1">
<span class="text-xs px-2 py-1 rounded-full ${getCategoryColor(item.category)} mr-2">${item.category}</span>
<span class="text-xs text-gray-500"><i class="far fa-clock mr-1"></i> ${formatDate(item.dateAdded)}</span>
</div>
${item.notes ? `<p class="text-sm text-gray-600 mt-2">${item.notes}</p>` : ''}
</div>
<button class="restock-btn px-3 py-1 bg-emerald-500 hover:bg-emerald-600 text-white text-sm rounded-full transition-all" data-id="${index}">
<i class="fas fa-check mr-1"></i> Restocked
</button>
</div>
`;
itemsContainer.appendChild(itemCard);
});
// Add event listeners to all restock buttons
document.querySelectorAll('.restock-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const itemId = e.currentTarget.getAttribute('data-id');
openRestockModal(itemId);
});
});
}
// Get category color class
function getCategoryColor(category) {
const colors = {
'Dairy': 'bg-blue-100 text-blue-800',
'Produce': 'bg-green-100 text-green-800',
'Pantry': 'bg-yellow-100 text-yellow-800',
'Meat': 'bg-red-100 text-red-800',
'Beverages': 'bg-indigo-100 text-indigo-800',
'Frozen': 'bg-purple-100 text-purple-800',
'Other': 'bg-gray-100 text-gray-800'
};
return colors[category] || 'bg-gray-100 text-gray-800';
}
// Format date
function formatDate(dateString) {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}
// Open Add Item Modal
function openAddItemModal() {
addItemModal.classList.remove('hidden');
document.getElementById('itemName').focus();
}
// Close Add Item Modal
function closeAddItemModal() {
addItemModal.classList.add('hidden');
addItemForm.reset();
}
// Open Restock Modal
function openRestockModal(itemId) {
const item = items[itemId];
restockItemName.textContent = item.name;
restockItemId.value = itemId;
restockModal.classList.remove('hidden');
}
// Close Restock Modal
function closeRestockModal() {
restockModal.classList.add('hidden');
}
// Handle Add Item Form Submission
function handleAddItem(e) {
e.preventDefault();
const name = document.getElementById('itemName').value.trim();
const category = document.getElementById('itemCategory').value;
const notes = document.getElementById('itemNotes').value.trim();
const newItem = {
name,
category,
notes,
dateAdded: new Date().toISOString()
};
// Add to items list
items.unshift(newItem);
// Add to recent items (only if not already there)
if (!recentItems.some(item => item.name === newItem.name && item.dateAdded === newItem.dateAdded)) {
recentItems.unshift(newItem);
// Keep only the 5 most recent items
if (recentItems.length > 5) {
recentItems = recentItems.slice(0, 5);
}
}
saveItems();
renderItems();
updateStats();
closeAddItemModal();
// Show success animation
const successIcon = document.createElement('div');
successIcon.className = 'fixed bottom-6 right-6 w-16 h-16 rounded-full bg-emerald-500 flex items-center justify-center text-white text-2xl shadow-lg pulse';
successIcon.innerHTML = '<i class="fas fa-check"></i>';
document.body.appendChild(successIcon);
setTimeout(() => {
successIcon.classList.remove('pulse');
setTimeout(() => {
successIcon.remove();
}, 300);
}, 2000);
}
// Handle Restock
function handleRestock() {
const itemId = restockItemId.value;
const restockedItem = items[itemId];
// Remove from items list
items.splice(itemId, 1);
// Add to recent items (only if not already there)
if (!recentItems.some(item => item.name === restockedItem.name && item.dateAdded === restockedItem.dateAdded)) {
recentItems.unshift(restockedItem);
// Keep only the 5 most recent items
if (recentItems.length > 5) {
recentItems = recentItems.slice(0, 5);
}
}
saveItems();
renderItems();
updateStats();
closeRestock
</html>