126 lines
13 KiB
HTML
126 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="vi">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<title>Danh sách sản phẩm</title>
|
|
</head>
|
|
|
|
<body class="bg-gray-50 p-8">
|
|
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-800">Quản lý sản phẩm</h2>
|
|
<p class="text-gray-500">Danh sách các sản phẩm hiện có trong hệ thống</p>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-md rounded-lg overflow-hidden border border-gray-200">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-100 border-b border-gray-200">
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-700">ID</th>
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-700">Hình ảnh</th>
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-700">Tên sản phẩm</th>
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-700">Giá</th>
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-700">Trạng thái</th>
|
|
<th class="px-6 py-4 text-sm font-semibold text-gray-700 text-right">Thao tác</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<!-- <tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4 text-sm text-gray-600">-1</td>
|
|
<td class="px-6 py-4">
|
|
<img src="data:image/webp;base64,UklGRgwSAABXRUJQVlA4IAASAADwWwCdASrDAAIBPkEcjEQiqCYTKSYwgAQEs7cGWArVzjqaes/srVZ9huwk1XgR8t5PZAm4u53j/d/tH1uXU++i5+wHpufsr8Sv7rOUR/B8LjyV2wP8rwe4BPqn/n/zM93r63/j+iGmP0B/0V6KP+3/qfRV9O/+f3DP5t/WP9t/av3o+LH2Aeiv+txy4E4pbyT9zGyg2nw81tadbEpuo9E8SH3LTyBsIiLCEN3rWCsKJMC4+hnLC/b0KubaBe8NMMWckx2hIwSllsW6D5Ekq5U+vWlHhGi/fpmW0xR3o3C0Zc3tbCwzsDEri2BVZB1Ca+uYA1EXfLKw7edybxw9+OIDmJYwSv+dcK3lc1tfqv5KXRsZBX6nlVBH4HXbiCFl1FvE90lix56Iq8rMDgScG/ay4rTM2T7rZvdQNAOzXrf24u89aBl7DXWfCue812XeYlg70oW1ftITfuo72s0c1uL9Rb8bJYjJtkbuOJSK9e0dxzOuRHkryrVz9L+Nc77+U9rPzvK9m5jMikMrmhUf9mIJkaUzmBgBxHp/Ypdg6+eRoyOpoybmyx+M2ZAaVOvlvSpM1dwEfi8ZxDPLxYYxtTYh1xgVQvutVY2zVkxeoSHFEoCP0Xnte1R35QrPj9Dk7kEgvm52V+nWhnbcbwBcsh3mB2oEPuu/yiDPbLJqG3TNn/zdBg6fuMDqEXLOSWRi0OjyGsxrD+JjKwykTpE5+QVbGHXexgxfMc0M4T1DIlxb2fSvrthRL1zpOenR6zf7MbclnFLp52T+N08KNZyF4LMY4hOdYgQif9fhUZfpyUjLPCRFNGUV6NMyqgqWPL1aOxvtfeVHOabfzpumLzton8buUdtDk3WTkW5LbDTSV5Onn7WhkBscFM0rJd6Z5j5dDNtgoM3HJKhhChC1JoSeQrLM20wcRCYU0BuobINXmaqhl5mBDOOzsWly4DIOxhOGluvQgvp7SCHkEZ5MqWPGp+Ye0+w5ztFE+R4A/v4kZxrN8F4fhbL+t9JSnWEplbbw5h31WsZnE77gwpnlHK6TwRoNBZ9IlMC9HW0w5CE2m+Ew3PbJ9ze/F2OPCeRydPatKWn3FpHQgmhkSQ6N+RKvBaMHK3g5sLT0R5vj+QLUT/yv/WupEwqL90mfJ3A4bO5HJ/5k/MBdEnHkedPSnnZw9EX3ZU0knE/YQxLsc81KtvXXnQmqQW7wKUQpJxM3bihiUgx/XAVnp5rFYcbkF9iybgStwKT2qB9ELzgAqVN9tEWLItKtXpLGEtMmeaXcXglXGrC8LBdx4Lqx2dMZUfXoeuLjG85eos8wXlpGgNF81jO3sObaABfvm1Bkpc70A+aVtr8ZAJf0/bEm0GtjZj37gAI85bDANV1XCqkJ7l+v621Dmd46Bhv/XeBNBeq9w+d+jDrzaC17f/O+MIG5mnK1KbSV+TV7CLMLLtPjhqd1Sa5/eSDx7SWrtEbWBT/BxckRqfcWV1Q4Wb6hlh18w8HNLkdJC2mc4Zh1T1q2+/wB/pUtpR77/a56FQiEjQLc+u9ElnZBntFM0sesU9P/hnqo5hQFL1MvRw5W5L+ZfrD+DQeiXFJNtFV9rfT/4EXgLs7PwTNnP4/5G4sIILpKEEfs9qvdDRSVTzMUdmYwx2tdvCoJTpoaBDUpKl2UqYABjYMODaAtThjZpmXxDZOOe2w2/3jv7UGGpvGvxr3xJ/qOaAmUZ/HaQCOPv3+8l+AmQmYt2QmhsTjqQ1oRlDyBrAN/AOUS78wprtWJFtYI4cIzOfRB6tAdsgcp/rjDelfk3gjsG7MsgNlsx8/u1rPmqczamkc73Qtq/LP/nlrh4RhpzUtllavJbVsaHciV1+Yx1ODTbqoNCiPAfZuU+4GQKDHTJK/snKCvMMpeFFpt56BcvZ6ZxBdYpS/zupKO64fk3xnM1zuB29Igwv4U4mA2bcjftihY/Nm5gajMNQpyfAHjqPb3j+LosJZ8/5MyqZxYh+AM5Qc68QaWQ0f1OayskUyYJ945iVW+GHuvxGSOuYYj/CF3gcm+KnF7KbonrP0pBGlsrm49vgAGPheyJmZ02b8WJzq6kkoPsfr407ptTiH85D90H/zqTp5JkpabrnKvkt+gUnvLoKahHYEAjfX5kxBk+ccaXu6TMLa6unJ/BYUUN7CTo4ZFNTSP9NYEJ39ozfo2wN9B8P4bYDEP0vTmuMxzumJsmikVEhgk4UtQJvGyKfmz3Lna03dVTiREZlBLFEy+xxGYVu0UZ6ZriyefKphHUXq1Hk/zF8QOfE9ZPBZlhYFj/qlpwjC9HCorpd967Q7gLeK5z0ADPmcmqtZEes48+cJB0YP8lKJ2yYAKHi/VCfPxVm4KY9ChfjxQYOzk1v5PvM8zE/cjggyQXlpsk1o54ntHIstY7VukwHv+NGbJJYYy8kVGuB5LjDJM6vfxJmntVFewcB50Hix45eCJI+ZVr2yBlu7zIujkhcWi+iIDpnThH1FzGQS+tRnwClh1ni8JmErtbOjpTFjJGiqQUNtHxrts+V1pTyTjiY+uV0bDPJsgGgdFGFYrWyThAO+6rfgCT9f7PwyoS7+Z14IlGWfdn7+I7VB5jy9BwVFcQ7ovzBA1MTka8JRGzHkMptDfqOP3BT120eesc0Ts4ovnqV3nvx2NoplyIxwmvoc96qhIOxmJ6FcAyWyXAgu6FHCuZNegdfpx+L+OewOUqA0qQT+RLQuF3Nm2KKF+izE8Bpa98a+AY2uZJiCvoHFpj68rRMHoZDNk/fqiv5PgDuwSa81NO/YrEBOfFgHVPejd2DfzbIcZKFtkPjtGVo5rMvoN1Xut2PITle3IU9T4fu2V3cE7NyvOyciJuFYZPXLYxhnwGxAYKd4HNNjE7BIAMSom1NsQu6ZqHud2FyUzk52oIlOIojoPWm4jBQryRQas/wnPiZwQMIPQvWvuuGPCeiV3K8faEoIMN0Jpj+mP58LikhNjaAjtxsiAwXcXVgBMALzdNQm/zllI2U+k7NeO0hzrJR7U3T406Man36I8ynkiFMffu3CYTyh7EACgWTUJ+RfEnMjyJH9ntugv7D63e9I+U44fZrWpnYUpNjhqn0N3cv9n9PcFXDzlsq6w+k62jz7l/k07UUQDgK4XesxjSLsQ+LsLQ09MolKjqH6OMRLbQ+6Bh4H4Jgkp8lYuk9JZfVE3QhNx9OujLCXX8bOr0lbn6GS5etDkobZAU3xramoIQJkthHYhTlF94lvS5fysO7n3VRtuxDb3p6zZoxQks0BRELAXqispIxgJGayAkfqxXUAIkxCCUUqpOgiBpBiBx3euWSkU3/McgFDkb+pibWnnGq+rOZUOulZhDdGdmeMAJZgylCiE71VAL0H5pq2LbqPosGc1gxAinr3LplbWvHprUwGc0K1rUx/xXxFVa6pM5RhdOShJkOyPfSBNbdyF+f/WSMOLI0uuPDfpxX/Cs9ee4Q8aAIspEmjq8udf3Csl/Ht/wIZCQ76uQZ/LWzAu2hzpJdm4YzVu1BP4P+T+Lk2Xi59nB/QBHg8NMOdkgTUVg8Ey5AT/+X2ZwfkTvcxW52fbQSmIAk/K/H1uY47cXWmqr8Zi8HiORCdStdNPjExlpAyp8fU9+VMYjgnq7EJ95Z3Ij1I8iTs9kPoIEUUFbO69NQKMTQ2wfb+YasqK1npsp3wLqKAQtQKc3DytMzbTqRy2kk7j5aMSuHcHUtI3tZWdOSKp5v9cPkrmrMAiDm3/KoOvAeUDjUFF/j/9/7kuHtgZxPxSjEy1bAUpAd22vUBgAjmYM65njIsljUHyTvNy4AqSt3ircYcjy7APKgEtnH8UxfSGBMnAoSZxzrZePGdSaEZKSTnmwvGxFJuW190y8rFO4r7v0XLfFgeHXHPofX8UQd7ajfQuIplWEiBRXWZ0YwmT2H8glPJ9/ylrVrA0isFH9Zyws/QUCNMl10OO1+zwLUlKddYT4ysnw12Rgx2wZCBRRud/vRrR1IoPMsVcFiA+WXlZEwkCXCmGGKqmcpZtHbsr7q4TtHDbnZv7zXevxKWjWiVaEN3+l/Ll+SST0KDswbzYNGznh9YuPufgNzq/tLyMiNgbRU60ix1bvK4KyLcoEdHM58GK1RIOHdPhXWqWde12oarWtpYSjsDbnz5InyoruN5kReV+zE4ieXKeu759pGjuGjfOawoje1Jc45G1/nrFQV0LQNLyExYyctpafJ9K44UUERSJ6TN5xO6BkQpw2Wt1sJc9n/aG9vKLHXtV9wXW80XV2BZj2vcbVb9rFPdMN4mssmJ21QdwsQX7hXXN9gUEyNPzcJPZva5FpG6/MryxT6DKGZ3+rRNzJEHIGmTPOhM5wMaC0Oi6ou/NOCXtifJsd+67cWw9Q5Q9wZF/VvSpENJ1kZfShj/e6a/NFgDNFPk1X/7wNdhfyYhi5pv9edwa55Ju/MIfSj0e3XkA+6sPFowK6uVpe/s09fK/bM2VcSw96zrO8f4sRJsbitynBvb7x+/ErX9rn3TiN55+P6FYcim4h0/3VOkIMNGNdXrYB/zPYBhnUxaXBq17cHNy4kzW//METYCEwBORJaDsgrXV6cub3+Oyy6PSkrtmpBXxXN90y3+9Cshi1IgXfI+nBTHRzrBDFfWW15yMqTOUOCIR5vlQfZW9qHDecWmwOfo/3yyfNB1W98/GV3vANLAXS0TM9x2mvNJ6T72Ev111bi58g25Nhme1IYNgsco2Qilapp7a0G9m3eJJDWX0W5vr+PWnVdIF+6M+3GrGNzfmnUF4GmEj/yy5cRB/7kv1sX9/2uAu460D+lm8RulapOgYjaUL6EKs/r8FfHG0OYBBuUdcjb3Bvxj/Pe/Cc2Y/faKGSNm8rlPA5tDMAWqLSb8XUSkwcgHs//oq4nEjSnoxbWjKQ0FD5W4HqflGnJqoOpb3/qoh+dMfsxThOg151xulAkEH0ktaxYmRY4jPlbG8Z4ZfC/2W4X0OJ/F0dGvE9HwrC3vbX7j4XcYDlAHBf/Ec/QeP8Z93vC4/XrZ12+PitUoAAAVLxTy4UIruCM988n8giCT6lL+0bKv1pCdHgEUM5QJxTqfzib+AP/VADtFkYO5Dlo2ka3kW7xW2RcaGWwCEQx/8Y7KySfk2O83aH/ViOB736ASJyoNw5eU2bFPChYMocgunBmFYgkiQ4EirM7lIChRvemknDxL1V0eZ+iI8FSU8aNH/ww988XhN/93uSx/4VmV3cOeQZLrsavqVwU8nX3wR3yTFu0EGShyO0fkWPSWC2uyaWXzaTxAq+YZNAQXKKN6sEUTO8famLQtHrwZKX1vLvlLKZgV3ngDenHnLnxmy5t87/EVJ0DrUnA1W37cBdzflrVgHD/GTbbfQ4FGJdRqcfcQdukhopzQTlkhsMhfl45c0wQR3jyoS2Dug5tTOTbYsIYylPSlXDF7/MnATPoVDj/frHk/ko9ypdFlSsG/vIEp+7kln7qYaBzrB0oGpPtj7YdZtZXMmJZ2xAaaesNpXMk/m+1vZcOMNuctJalTXZHTK+P9qkJ0m5yOR86HWsLiw+ialLspZ5iFnclAoAM/SNbWgox/bgFLkxAJWZPG94lLBctP/EggRLjEtvoIYNEx0vKjb5+aWgVeRd4+WcmjhZyqdGySD1QIo7r/c/dTNUvAjCYSedrQlLf2o17Snw0zk2l1atfcaECJlMoTeVZX0OWaWtKooNFvYczS0j8hY8Gfk+1EG5o/BYGo0XbKZg7FO2lhTWgZRVc1+9N0/o1aPoZfVAERMUyrEbToaajKWwf5tzeGvpHLJ5n4XmdeC6bQEJgM/WODwBEFTwtxH406n+RS0Cex0J4lVCqsKDYVIr4Dpxu4MkyDS3RuzGDsf6M/ND6UUa0mkM/Tn55TACdpY7MiwHnLDkCj0ugx1WBjzC+pwurhgkwRu3p7WVgTiPW3ue8ay7UKDd4FpSRI7AYOVInl+srjUaywPLPCoSMeOtbxW2tpTKNCwrAYarPNvSNvrjBaQjBdBMbOBsyLMIPmnWnjnbAC6kFber6Sn68gO/nbYsSkCWjFudwhWlXS/uuup2cRrzLUzfUrXBEz6L9cnGUOfSzc/7YUEhuveprfZDU0IrAnP5rUn2qkGHwQTWxqH22Ll0uMhsQIv7d7Is6xv/DaletIkf6+HAcTKAAA="
|
|
alt="SP 1" class="w-12 h-12 object-cover rounded-md border border-gray-100">
|
|
</td>
|
|
<td class="px-6 py-4 text-sm font-medium text-gray-900">SP 1</td>
|
|
<td class="px-6 py-4 text-sm text-gray-700 font-mono">1,000 đ</td>
|
|
<td class="px-6 py-4 text-sm">
|
|
<span class="px-2 py-1 text-xs font-semibold text-green-700 bg-green-100 rounded-full">
|
|
Hoạt động
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-right">
|
|
<button class="text-blue-600 hover:text-blue-800 font-medium mr-3">Sửa</button>
|
|
<button class="text-red-600 hover:text-red-800 font-medium">Xóa</button>
|
|
</td>
|
|
</tr> -->
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between text-sm text-gray-500">
|
|
<span>Hiển thị 1 sản phẩm</span>
|
|
<div class="flex space-x-2">
|
|
<button class="px-3 py-1 border rounded bg-white hover:bg-gray-50 disabled:opacity-50"
|
|
disabled>Trước</button>
|
|
<button class="px-3 py-1 border rounded bg-white hover:bg-gray-50">Sau</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
/*Form Thêm*/
|
|
<div class="bg-white shadow-lg rounded-xl border border-gray-200 overflow-hidden">
|
|
<div class="bg-gray-800 p-4">
|
|
<h2 class="form_title text-xl font-semibold text-white">Thêm sản phẩm mới</h2>
|
|
</div>
|
|
|
|
<form onsubmit="save(event)" class="p-6 space-y-5">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Tên sản phẩm</label>
|
|
<input type="text" id="name" name="name" placeholder="Nhập tên sản phẩm (VD: SP 1)"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="price" class="block text-sm font-medium text-gray-700 mb-1">Giá bán (VNĐ)</label>
|
|
<input type="number" id="price" name="price" placeholder="1000"
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Hình ảnh (Base64 hoặc URL)</label>
|
|
<div class="mt-1 flex items-center space-x-4">
|
|
<div
|
|
class="w-16 h-16 bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center overflow-hidden">
|
|
<span class="text-gray-400 text-xs">No Img</span>
|
|
</div>
|
|
<input name="avatarUrl" type="text" placeholder="Dán chuỗi base64 hoặc link ảnh tại đây..."
|
|
class="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<span class="block text-sm font-medium text-gray-800">Trạng thái hoạt động</span>
|
|
<span class="text-xs text-gray-500">Sản phẩm sẽ được hiển thị ngay sau khi tạo</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input name="status" type="checkbox" value="" class="sr-only peer" checked>
|
|
<div
|
|
class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex space-x-3 pt-4 border-t border-gray-100">
|
|
<button type="submit"
|
|
class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors shadow-md shadow-blue-200">
|
|
Lưu sản phẩm
|
|
</button>
|
|
<button type="reset"
|
|
class="px-6 py-2 border border-gray-300 text-gray-600 font-medium rounded-lg hover:bg-gray-50 transition-colors">
|
|
Hủy
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |