nang cap san sang import
This commit is contained in:
290
webappUI/product_list_desktop/code.html
Normal file
290
webappUI/product_list_desktop/code.html
Normal file
@@ -0,0 +1,290 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Products - AfterSales CRM</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"outline": "#727785",
|
||||
"on-tertiary-fixed": "#311400",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary": "#0058be",
|
||||
"surface-container-highest": "#e1e2ec",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container": "#ecedf7",
|
||||
"secondary-container": "#dce2f3",
|
||||
"on-tertiary-fixed-variant": "#723600",
|
||||
"secondary-fixed": "#dce2f3",
|
||||
"tertiary-fixed": "#ffdcc6",
|
||||
"on-primary-fixed": "#001a42",
|
||||
"surface-variant": "#e1e2ec",
|
||||
"inverse-on-surface": "#eff0fa",
|
||||
"background": "#f9f9ff",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-bright": "#f9f9ff",
|
||||
"surface": "#f9f9ff",
|
||||
"on-tertiary-container": "#fffbff",
|
||||
"surface-container-high": "#e6e7f2",
|
||||
"on-primary": "#ffffff",
|
||||
"outline-variant": "#c2c6d6",
|
||||
"on-background": "#191b23",
|
||||
"inverse-surface": "#2e3038",
|
||||
"surface-dim": "#d8d9e3",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-primary": "#adc6ff",
|
||||
"primary-fixed-dim": "#adc6ff",
|
||||
"on-secondary-fixed": "#151c27",
|
||||
"on-secondary-container": "#5e6572",
|
||||
"on-primary-container": "#fefcff",
|
||||
"tertiary-container": "#b75b00",
|
||||
"surface-tint": "#005ac2",
|
||||
"on-primary-fixed-variant": "#004395",
|
||||
"on-secondary-fixed-variant": "#404754",
|
||||
"on-error-container": "#93000a",
|
||||
"primary-fixed": "#d8e2ff",
|
||||
"on-surface": "#191b23",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-fixed-dim": "#ffb786",
|
||||
"surface-container-low": "#f2f3fd",
|
||||
"tertiary": "#924700",
|
||||
"secondary": "#585f6c",
|
||||
"on-surface-variant": "#424754",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary-fixed-dim": "#c0c7d6",
|
||||
"primary-container": "#2170e4"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"nav-height": "56px",
|
||||
"margin-x": "1.5rem",
|
||||
"gutter": "1rem",
|
||||
"container-max": "1280px",
|
||||
"grid-columns-desktop": "12",
|
||||
"stack-gap": "1.5rem",
|
||||
"form-gap": "1.25rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"h1": ["Manrope"],
|
||||
"body-base": ["Inter"],
|
||||
"h2": ["Manrope"],
|
||||
"button": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-semibold": ["Inter"],
|
||||
"h3": ["Manrope"]
|
||||
},
|
||||
"fontSize": {
|
||||
"h1": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
|
||||
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
|
||||
"h2": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
|
||||
"button": ["14px", { "lineHeight": "20px", "fontWeight": "500" }],
|
||||
"body-sm": ["12px", { "lineHeight": "16px", "fontWeight": "400" }],
|
||||
"label-semibold": ["14px", { "lineHeight": "20px", "fontWeight": "600" }],
|
||||
"h3": ["18px", { "lineHeight": "24px", "fontWeight": "600" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body-base min-h-screen flex flex-col">
|
||||
<header class="sticky top-0 z-50 w-full bg-surface-container-lowest border-b border-outline-variant shadow-sm h-[56px] flex justify-center">
|
||||
<div class="flex items-center justify-between w-full h-full px-margin-x max-w-container-max mx-auto">
|
||||
<div class="flex items-center gap-8">
|
||||
<span class="font-h2 text-h2 text-primary tracking-tight">AfterSales CRM</span>
|
||||
<nav class="hidden md:flex items-center gap-6 h-full pt-[2px]">
|
||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Feedback</a>
|
||||
<a class="font-body-base text-body-base text-primary border-b-2 border-primary pb-[14px] cursor-pointer active:opacity-80 pt-[14px]" href="#">Products</a>
|
||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Customers</a>
|
||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Channels</a>
|
||||
<a class="font-body-base text-body-base text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:opacity-80" href="#">Tags</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors hidden md:block">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="search">search</span>
|
||||
</button>
|
||||
<button class="relative text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-0 right-0 w-[8px] h-[8px] bg-error rounded-full ring-2 ring-surface-container-lowest"></span>
|
||||
</button>
|
||||
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full border border-outline-variant object-cover" data-alt="Headshot of a smiling professional man wearing a collared shirt with a blurred background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrC3Lo7CX2FOxbLaL60WQ0BSNvnS3yXyjNHJlyZ-TyzsDkyuWoU4ouFCUGsQQgkeZYsIohcVdX9mzd0_q_MAZnXQC2pAl_veRJTsxBwZRfecu5cNujEW7Gt6YbKVhmGhYuo1yxMKFAKXIefgGMJ_oBeIYXIM9IVWhs42GgLlaor0mOtDHzzQTlkrQuRuRoGayrWsucJcSg_kjOTTZMELb2CaAKl1slxJe_C3gOEJxzUaOWZxKImvg37wNJJV0tzoXZNKXVhFwsw98"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 w-full max-w-container-max mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
|
||||
<div class="flex flex-col gap-2">
|
||||
<nav aria-label="Breadcrumb" class="flex text-body-sm font-body-sm text-on-surface-variant">
|
||||
<ol class="inline-flex items-center space-x-1 md:space-x-2">
|
||||
<li class="inline-flex items-center">
|
||||
<a class="hover:text-primary transition-colors" href="#">Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px] mx-1">chevron_right</span>
|
||||
<span class="text-on-surface">Products</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mt-2">
|
||||
<h1 class="font-h1 text-h1 text-on-background">Products</h1>
|
||||
<div class="flex items-center gap-3 w-full sm:w-auto">
|
||||
<div class="relative flex-1 sm:flex-none">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px]">search</span>
|
||||
<input class="w-full sm:w-64 pl-9 pr-4 py-2 border border-outline-variant rounded-DEFAULT bg-surface-container-lowest text-body-base font-body-base text-on-surface focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-shadow placeholder:text-on-surface-variant/70" placeholder="Search products..." type="text"/>
|
||||
</div>
|
||||
<button class="bg-primary text-on-primary font-button text-button px-4 py-2 rounded-DEFAULT hover:brightness-110 transition-all flex items-center gap-2 whitespace-nowrap shadow-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
New Product
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest shadow-sm rounded-lg border border-outline-variant flex flex-col mt-4">
|
||||
<div class="p-4 border-b border-outline-variant flex flex-col sm:flex-row sm:items-center gap-4 bg-surface-bright rounded-t-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-body-sm font-label-semibold text-on-surface-variant flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[16px]">filter_list</span> Filter:
|
||||
</span>
|
||||
<div class="relative">
|
||||
<select class="appearance-none border border-outline-variant rounded-DEFAULT bg-surface-container-lowest text-body-base font-body-base text-on-surface py-1.5 pl-3 pr-8 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none cursor-pointer">
|
||||
<option>All Statuses</option>
|
||||
<option>Active</option>
|
||||
<option>Inactive</option>
|
||||
<option>Sold Out</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-2 top-1/2 -translate-y-1/2 text-on-surface-variant text-[18px] pointer-events-none">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse min-w-[800px]">
|
||||
<thead class="bg-surface-container-low text-body-sm font-label-semibold text-on-surface-variant border-b border-outline-variant">
|
||||
<tr>
|
||||
<th class="py-3 px-4 font-label-semibold w-[25%]">Name</th>
|
||||
<th class="py-3 px-4 font-label-semibold w-[15%]">Status</th>
|
||||
<th class="py-3 px-4 font-label-semibold w-[35%]">Description</th>
|
||||
<th class="py-3 px-4 font-label-semibold w-[10%] text-right">Owners</th>
|
||||
<th class="py-3 px-4 font-label-semibold w-[15%]">Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-body-base font-body-base text-on-surface divide-y divide-outline-variant">
|
||||
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
|
||||
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Enterprise Server Rack Q4</td>
|
||||
<td class="py-4 px-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-primary-fixed text-on-primary-fixed-variant border border-primary-fixed-dim">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="High-density server rack designed for optimal airflow and cable management in large data centers.">
|
||||
High-density server rack designed for optimal ai...
|
||||
</td>
|
||||
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">1,402</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Oct 12, 2023</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
|
||||
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Cloud Gateway Pro</td>
|
||||
<td class="py-4 px-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-primary-fixed text-on-primary-fixed-variant border border-primary-fixed-dim">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="Secure Edge routing gateway with integrated threat management and VPN tunneling.">
|
||||
Secure Edge routing gateway with integrated thre...
|
||||
</td>
|
||||
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">845</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Nov 05, 2023</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
|
||||
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Legacy Switch Module X1</td>
|
||||
<td class="py-4 px-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-surface-container-highest text-on-surface border border-outline-variant">
|
||||
Inactive
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="Deprecated 24-port switch module. Scheduled for end-of-life support next quarter.">
|
||||
Deprecated 24-port switch module. Scheduled for ...
|
||||
</td>
|
||||
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">312</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Jan 18, 2021</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
|
||||
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Quantum Encryption Key V2</td>
|
||||
<td class="py-4 px-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-error-container text-on-error-container border border-[#ffb4ab]">
|
||||
Sold Out
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="Hardware security module for post-quantum cryptographic key generation.">
|
||||
Hardware security module for post-quantum crypto...
|
||||
</td>
|
||||
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">2,055</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Feb 22, 2024</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-surface-container-low transition-colors group cursor-pointer">
|
||||
<td class="py-4 px-4 font-label-semibold text-primary group-hover:underline">Optical Transceiver 100G</td>
|
||||
<td class="py-4 px-4">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-label-semibold bg-primary-fixed text-on-primary-fixed-variant border border-primary-fixed-dim">
|
||||
Active
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant truncate max-w-[250px]" title="High-speed optical module for long-haul fiber connections up to 40km.">
|
||||
High-speed optical module for long-haul fiber co...
|
||||
</td>
|
||||
<td class="py-4 px-4 text-right font-label-semibold text-on-surface">4,190</td>
|
||||
<td class="py-4 px-4 text-on-surface-variant text-body-sm">Mar 10, 2024</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 border-t border-outline-variant text-body-sm font-body-sm text-on-surface-variant flex flex-col sm:flex-row justify-between items-center gap-4 bg-surface-bright rounded-b-lg">
|
||||
<span>Showing 1 to 5 of 124 entries</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-1 rounded-DEFAULT hover:bg-surface-container-high text-on-surface-variant transition-colors disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 rounded-DEFAULT bg-primary text-on-primary font-button flex items-center justify-center">1</button>
|
||||
<button class="w-8 h-8 rounded-DEFAULT hover:bg-surface-container-high text-on-surface font-button flex items-center justify-center transition-colors">2</button>
|
||||
<button class="w-8 h-8 rounded-DEFAULT hover:bg-surface-container-high text-on-surface font-button flex items-center justify-center transition-colors">3</button>
|
||||
<span class="px-1 text-on-surface-variant">...</span>
|
||||
<button class="w-8 h-8 rounded-DEFAULT hover:bg-surface-container-high text-on-surface font-button flex items-center justify-center transition-colors">25</button>
|
||||
<button class="p-1 rounded-DEFAULT hover:bg-surface-container-high text-on-surface transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="w-full py-8 border-t border-outline-variant bg-surface-container-lowest mt-auto">
|
||||
<div class="w-full flex flex-col md:flex-row justify-between items-center px-margin-x max-w-container-max mx-auto gap-4">
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant">© 2024 AfterSales CRM. All rights reserved.</span>
|
||||
<div class="flex items-center gap-6">
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary hover:underline transition-all" href="#">Support</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary hover:underline transition-all" href="#">Privacy Policy</a>
|
||||
<a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary hover:underline transition-all" href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
webappUI/product_list_desktop/code.html:Zone.Identifier
Normal file
BIN
webappUI/product_list_desktop/code.html:Zone.Identifier
Normal file
Binary file not shown.
BIN
webappUI/product_list_desktop/screen.png
Normal file
BIN
webappUI/product_list_desktop/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 165 KiB |
BIN
webappUI/product_list_desktop/screen.png:Zone.Identifier
Normal file
BIN
webappUI/product_list_desktop/screen.png:Zone.Identifier
Normal file
Binary file not shown.
Reference in New Issue
Block a user