118 lines
5.3 KiB
HTML
118 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inventory Label Creator</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-900 min-h-screen text-gray-100">
|
|
<!-- Navigation Menu -->
|
|
<nav class="bg-gray-800 shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-100">TCGPlayer Manager</a>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<a href="/" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Orders</a>
|
|
<a href="/manabox.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Manabox</a>
|
|
<a href="/transactions.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Transactions</a>
|
|
<a href="/inventory_labels.html" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-blue-600 rounded-lg">Inventory Labels</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="bg-gray-800 rounded-xl shadow-sm p-6 mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-100 mb-2">Inventory Label Creator</h1>
|
|
<p class="text-gray-400">Create QR code labels for inventory items with optional UPC codes and metadata</p>
|
|
</div>
|
|
|
|
<!-- Create Label Form -->
|
|
<div class="bg-gray-800 rounded-xl shadow-sm p-6 mb-8">
|
|
<h2 class="text-xl font-semibold text-gray-100 mb-6">Create New Label</h2>
|
|
|
|
<form id="createLabelForm" class="space-y-6">
|
|
<!-- UPC Code -->
|
|
<div>
|
|
<label for="upc" class="block text-sm font-medium text-gray-300 mb-2">UPC Code (Optional)</label>
|
|
<input
|
|
type="text"
|
|
id="upc"
|
|
name="upc"
|
|
placeholder="Enter UPC code..."
|
|
class="w-full rounded-lg border-gray-600 bg-gray-700 text-gray-100 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<p class="text-sm text-gray-400 mt-1">Enter a valid UPC-A, UPC-E, or EAN-13 code</p>
|
|
</div>
|
|
|
|
<!-- Metadata Section -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<label class="block text-sm font-medium text-gray-300">Metadata (Optional)</label>
|
|
<button
|
|
type="button"
|
|
onclick="addMetadataField()"
|
|
class="px-3 py-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors text-sm"
|
|
>
|
|
Add Field
|
|
</button>
|
|
</div>
|
|
<div id="metadataFields" class="space-y-3">
|
|
<!-- Metadata fields will be added here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Print Option -->
|
|
<div>
|
|
<label class="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
id="printLabel"
|
|
name="print"
|
|
checked
|
|
class="rounded border-gray-600 bg-gray-800 text-blue-600 focus:ring-blue-500"
|
|
>
|
|
<span class="text-gray-300">Print label immediately</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors font-medium"
|
|
>
|
|
Create Label
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Recent Labels Section -->
|
|
<div class="bg-gray-800 rounded-xl shadow-sm p-6">
|
|
<h2 class="text-xl font-semibold text-gray-100 mb-6">Recent Labels</h2>
|
|
<div id="recentLabels" class="space-y-4">
|
|
<!-- Recent labels will be displayed here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/inventory_labels.js"></script>
|
|
</body>
|
|
</html> |