| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PrintPro Admin - Pricing Management</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| 'sans': ['Inter', 'system-ui', 'sans-serif'], |
| }, |
| colors: { |
| brand: { |
| 50: '#eff6ff', |
| 100: '#dbeafe', |
| 200: '#bfdbfe', |
| 300: '#93c5fd', |
| 400: '#60a5fa', |
| 500: '#3b82f6', |
| 600: '#2563eb', |
| 700: '#1d4ed8', |
| 800: '#1e40af', |
| 900: '#1e3a8a', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| * { scroll-behavior: smooth; } |
| .toast { animation: slideIn 0.4s ease, fadeOut 0.4s ease 2.6s forwards; } |
| @keyframes slideIn { |
| from { transform: translateX(120%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| @keyframes fadeOut { |
| from { opacity: 1; } |
| to { opacity: 0; } |
| } |
| .modal-overlay { animation: fadeInOverlay 0.25s ease; } |
| @keyframes fadeInOverlay { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .modal-content { animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1); } |
| @keyframes slideUp { |
| from { transform: translateY(40px); opacity: 0; } |
| to { transform: translateY(0); opacity: 1; } |
| } |
| input[type="number"]::-webkit-inner-spin-button, |
| input[type="number"]::-webkit-outer-spin-button { |
| opacity: 1; |
| } |
| .tier-row { transition: all 0.2s ease; } |
| .tier-row:hover { background-color: #f8fafc; } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-100 text-gray-800 antialiased min-h-screen"> |
|
|
| |
| <div id="loginScreen" class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-brand-900 to-gray-800 p-4"> |
| <div class="w-full max-w-md"> |
| <div class="bg-white rounded-2xl shadow-2xl p-8"> |
| <div class="text-center mb-8"> |
| <div class="w-16 h-16 bg-brand-600 rounded-2xl flex items-center justify-center mx-auto mb-4"> |
| <i data-lucide="shield" class="text-white w-8 h-8"></i> |
| </div> |
| <h1 class="text-2xl font-extrabold text-gray-900">Admin Panel</h1> |
| <p class="text-gray-500 text-sm mt-1">Manage your printing pricing</p> |
| </div> |
| <form id="loginForm" class="space-y-5"> |
| <div> |
| <label class="block text-sm font-semibold text-gray-700 mb-1.5">Username</label> |
| <div class="relative"> |
| <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i> |
| <input type="text" id="username" value="admin" required |
| class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-all text-gray-900"> |
| </div> |
| </div> |
| <div> |
| <label class="block text-sm font-semibold text-gray-700 mb-1.5">Password</label> |
| <div class="relative"> |
| <i data-lucide="lock" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i> |
| <input type="password" id="password" value="admin123" required |
| class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none transition-all text-gray-900"> |
| </div> |
| </div> |
| <p id="loginError" class="text-red-500 text-sm hidden text-center"></p> |
| <button type="submit" |
| class="w-full bg-brand-600 text-white font-bold py-3 rounded-xl hover:bg-brand-700 transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-2"> |
| <i data-lucide="log-in" class="w-5 h-5"></i> Sign In |
| </button> |
| </form> |
| <p class="text-xs text-gray-400 text-center mt-6">Default: admin / admin123</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="dashboard" class="hidden min-h-screen"> |
| |
| <nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-40"> |
| <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 gap-3"> |
| <div class="w-9 h-9 bg-brand-600 rounded-lg flex items-center justify-center"> |
| <i data-lucide="printer" class="text-white w-5 h-5"></i> |
| </div> |
| <span class="text-xl font-extrabold text-gray-900 tracking-tight">Print<span class="text-brand-600">Pro</span> <span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full font-medium ml-1">Admin</span></span> |
| </div> |
| <div class="flex items-center gap-4"> |
| <a href="index.html" class="text-sm text-gray-600 hover:text-brand-600 transition-colors flex items-center gap-1.5"> |
| <i data-lucide="external-link" class="w-4 h-4"></i> View Site |
| </a> |
| <button onclick="logout()" class="text-sm text-red-600 hover:text-red-700 transition-colors flex items-center gap-1.5 font-medium"> |
| <i data-lucide="log-out" class="w-4 h-4"></i> Logout |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <div class="flex flex-wrap items-center justify-between gap-4 mb-8"> |
| <div> |
| <h1 class="text-2xl font-extrabold text-gray-900">Pricing Management</h1> |
| <p class="text-gray-500 text-sm mt-1">Manage base prices, options, quantity tiers, and turnaround pricing for all products.</p> |
| </div> |
| <div class="flex gap-3"> |
| <button onclick="resetToDefault()" |
| class="px-4 py-2.5 bg-white border border-gray-300 rounded-xl text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-all flex items-center gap-2"> |
| <i data-lucide="rotate-ccw" class="w-4 h-4"></i> Reset to Defaults |
| </button> |
| <button onclick="saveAllPricing()" |
| class="px-5 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-semibold hover:bg-brand-700 transition-all shadow-lg flex items-center gap-2"> |
| <i data-lucide="save" class="w-4 h-4"></i> Save All Changes |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> |
| <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center"> |
| <i data-lucide="package" class="w-5 h-5 text-blue-600"></i> |
| </div> |
| <div> |
| <p class="text-2xl font-extrabold text-gray-900" id="statProducts">8</p> |
| <p class="text-xs text-gray-500">Products</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center"> |
| <i data-lucide="dollar-sign" class="w-5 h-5 text-green-600"></i> |
| </div> |
| <div> |
| <p class="text-2xl font-extrabold text-gray-900" id="statAvgPrice">--</p> |
| <p class="text-xs text-gray-500">Avg Base Price</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center"> |
| <i data-lucide="layers" class="w-5 h-5 text-purple-600"></i> |
| </div> |
| <div> |
| <p class="text-2xl font-extrabold text-gray-900" id="statTiers">--</p> |
| <p class="text-xs text-gray-500">Total Tiers</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center"> |
| <i data-lucide="clock" class="w-5 h-5 text-amber-600"></i> |
| </div> |
| <div> |
| <p class="text-2xl font-extrabold text-gray-900" id="statLastSaved">Never</p> |
| <p class="text-xs text-gray-500">Last Saved</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="productCards" class="grid gap-6"> |
| |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="editModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 modal-overlay" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);"> |
| <div class="bg-white rounded-2xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-y-auto modal-content"> |
| <div class="sticky top-0 bg-white border-b border-gray-100 px-6 py-4 rounded-t-2xl flex items-center justify-between z-10"> |
| <h3 class="text-lg font-extrabold text-gray-900 flex items-center gap-2"> |
| <i data-lucide="edit-3" class="w-5 h-5 text-brand-600"></i> |
| Edit: <span id="modalProductName" class="text-brand-600">--</span> |
| </h3> |
| <button onclick="closeModal()" class="p-2 hover:bg-gray-100 rounded-lg transition-colors"> |
| <i data-lucide="x" class="w-5 h-5 text-gray-500"></i> |
| </button> |
| </div> |
| <div id="modalContent" class="p-6"> |
| |
| </div> |
| <div class="sticky bottom-0 bg-gray-50 border-t border-gray-100 px-6 py-4 rounded-b-2xl flex justify-end gap-3"> |
| <button onclick="closeModal()" class="px-5 py-2.5 bg-white border border-gray-300 rounded-xl text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-all"> |
| Cancel |
| </button> |
| <button onclick="saveModalChanges()" class="px-5 py-2.5 bg-brand-600 text-white rounded-xl text-sm font-semibold hover:bg-brand-700 transition-all shadow-lg flex items-center gap-2"> |
| <i data-lucide="check" class="w-4 h-4"></i> Save Changes |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="toast" class="fixed top-6 right-6 z-[100] hidden bg-gray-900 text-white px-5 py-3 rounded-xl shadow-2xl flex items-center gap-2 text-sm font-medium toast"> |
| <i data-lucide="check-circle" class="w-4 h-4 text-green-400"></i> |
| <span id="toastMsg">Saved!</span> |
| </div> |
|
|
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="admin.js"></script> |
| <script> |
| lucide.createIcons(); |
| </script> |
| </body> |
| </html> |
