File size: 13,259 Bytes
7774eb1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 | <!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">
<!-- ============ LOGIN 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>
<!-- ============ DASHBOARD ============ -->
<div id="dashboard" class="hidden min-h-screen">
<!-- Top Nav -->
<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>
<!-- Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Header -->
<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>
<!-- Stats -->
<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>
<!-- Product Cards -->
<div id="productCards" class="grid gap-6">
<!-- Rendered by JS -->
</div>
</div>
</div>
<!-- ============ EDIT MODAL ============ -->
<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">
<!-- Rendered by JS -->
</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>
<!-- Toast Notification -->
<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> |