365 lines
21 KiB
HTML
365 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Channels - AfterSales CRM</title>
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet"/>
|
|
<!-- Material Symbols -->
|
|
<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"/>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Tailwind Theme Configuration -->
|
|
<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>
|
|
</head>
|
|
<body class="bg-background text-on-surface antialiased min-h-screen flex flex-col relative font-body-base">
|
|
<!-- TopNavBar Shared Component -->
|
|
<header class="w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm font-manrope text-sm font-medium sticky top-0 z-40">
|
|
<div class="sticky top-0 z-50 flex items-center justify-between w-full h-14 px-6 max-w-[1280px] mx-auto">
|
|
<!-- Brand -->
|
|
<div class="flex items-center gap-8">
|
|
<span class="text-xl font-bold text-blue-600 dark:text-blue-400">AfterSales CRM</span>
|
|
<!-- Navigation Links -->
|
|
<nav class="hidden md:flex items-center gap-6 h-full">
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Feedback</a>
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Products</a>
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Customers</a>
|
|
<!-- Active State -->
|
|
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Channels</a>
|
|
<a class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 flex items-center h-full mt-1" href="#">Tags</a>
|
|
</nav>
|
|
</div>
|
|
<!-- Trailing Icons -->
|
|
<div class="flex items-center gap-4 text-gray-600 dark:text-gray-400">
|
|
<button class="hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-surface-variant ml-2 overflow-hidden border border-outline-variant">
|
|
<img alt="User profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional woman with neutral expression, soft lighting, corporate headshot style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCtgcCRGIvrzLtU0fbqKycm4HDiWOwCuBpUZCh9684mb56LbSsAiOc1KP6lAl5U-f5om6q8tn-60-QCEk-O-QMhlMN_nfWn2uV7dzwncfuL5-2XtOvRb16sOEPgP8RQAY5xVnYbcmx66lO8OiQhuAPPICGSIVMx40snqA-zQhSNjDIezJlouwfTm2zq0nL_wN8ZOpOkfWpcGmH1KBLaVqUuVHOiIGEHBwlxz3aSElv2OoEsaF8Pe7xx9YSGDdTDcSmmyGt4USXaniA"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-grow w-full max-w-[1280px] mx-auto px-margin-x py-8 flex flex-col gap-stack-gap">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="font-h1 text-h1 text-on-surface">Channels</h1>
|
|
<p class="font-body-base text-body-base text-on-surface-variant mt-1">Manage intake sources and communication pathways.</p>
|
|
</div>
|
|
<button class="inline-flex items-center justify-center gap-2 bg-primary text-on-primary font-button text-button px-4 py-2 rounded-lg shadow-sm hover:brightness-110 transition-all self-start sm:self-auto">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="add">add</span>
|
|
Add Channel
|
|
</button>
|
|
</div>
|
|
<!-- Data Table Card -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse min-w-[800px]">
|
|
<thead class="bg-surface border-b border-outline-variant">
|
|
<tr>
|
|
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[25%]">Name</th>
|
|
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[20%]">Slug</th>
|
|
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[15%]">Status</th>
|
|
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[15%] text-right">Feedbacks</th>
|
|
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[15%]">Created</th>
|
|
<th class="py-3 px-4 font-label-semibold text-label-semibold text-on-surface-variant w-[10%] text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-surface transition-colors group">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="language">language</span>
|
|
</div>
|
|
<span class="font-label-semibold text-label-semibold text-on-surface">Web Portal</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">web-portal</td>
|
|
<td class="py-3 px-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-body-sm text-body-sm border border-primary-fixed-dim">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
Active
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">12,450</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Oct 12, 2023</td>
|
|
<td class="py-3 px-4 text-right">
|
|
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-surface transition-colors group">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="smartphone">smartphone</span>
|
|
</div>
|
|
<span class="font-label-semibold text-label-semibold text-on-surface">iOS App</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">ios-app</td>
|
|
<td class="py-3 px-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-body-sm text-body-sm border border-primary-fixed-dim">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
Active
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">8,204</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Nov 05, 2023</td>
|
|
<td class="py-3 px-4 text-right">
|
|
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="hover:bg-surface transition-colors group">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="android">android</span>
|
|
</div>
|
|
<span class="font-label-semibold text-label-semibold text-on-surface">Android App</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">android-app</td>
|
|
<td class="py-3 px-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-surface-variant text-on-surface-variant font-body-sm text-body-sm border border-outline-variant">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="cancel">cancel</span>
|
|
Inactive
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">542</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Jan 22, 2024</td>
|
|
<td class="py-3 px-4 text-right">
|
|
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-surface transition-colors group">
|
|
<td class="py-3 px-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="mail">mail</span>
|
|
</div>
|
|
<span class="font-label-semibold text-label-semibold text-on-surface">Email Parsing</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant font-mono text-sm">email-parsing</td>
|
|
<td class="py-3 px-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-primary-fixed text-on-primary-fixed-variant font-body-sm text-body-sm border border-primary-fixed-dim">
|
|
<span class="material-symbols-outlined text-[14px]" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
|
Active
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface text-right">45,102</td>
|
|
<td class="py-3 px-4 font-body-base text-body-base text-on-surface-variant">Sep 01, 2023</td>
|
|
<td class="py-3 px-4 text-right">
|
|
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-1.5 rounded hover:bg-surface-variant text-on-surface-variant hover:text-on-surface transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination Footer (Decorative) -->
|
|
<div class="bg-surface border-t border-outline-variant py-3 px-4 flex items-center justify-between text-sm text-on-surface-variant">
|
|
<span>Showing 1 to 4 of 4 results</span>
|
|
<div class="flex gap-1">
|
|
<button class="px-2 py-1 rounded border border-outline-variant opacity-50 cursor-not-allowed">Prev</button>
|
|
<button class="px-2 py-1 rounded border border-outline-variant opacity-50 cursor-not-allowed">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Footer Shared Component -->
|
|
<footer class="w-full py-8 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 font-manrope text-xs text-gray-500 mt-auto">
|
|
<div class="w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto transition-all">
|
|
<!-- Brand Logo explicitly hidden via JSON -->
|
|
<div class="mb-4 md:mb-0">
|
|
© 2024 AfterSales CRM. All rights reserved.
|
|
</div>
|
|
<div class="flex items-center gap-4 text-gray-500">
|
|
<a class="hover:underline transition-all" href="#">Support</a>
|
|
<a class="hover:underline transition-all" href="#">Privacy Policy</a>
|
|
<a class="hover:underline transition-all" href="#">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!--
|
|
Modal Overlay for Create/Edit
|
|
(Positioned fixed to demonstrate Level 2 Elevation,
|
|
representing an active "Edit iOS App" state for context)
|
|
-->
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-on-background/40 backdrop-blur-sm">
|
|
<!-- Modal Card (Level 2 Elevation) -->
|
|
<div class="w-full max-w-md bg-surface-container-lowest rounded-xl shadow-lg border border-outline-variant flex flex-col overflow-hidden animate-fade-in-up">
|
|
<!-- Modal Header -->
|
|
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-surface">
|
|
<h2 class="font-h2 text-h2 text-on-surface">Edit Channel</h2>
|
|
<button class="text-on-surface-variant hover:text-on-surface transition-colors p-1 rounded-md hover:bg-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal Body (Form) -->
|
|
<div class="p-6 flex flex-col gap-form-gap">
|
|
<!-- Input Group: Name -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Channel Name</label>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 font-body-base text-body-base text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" type="text" value="iOS App"/>
|
|
</div>
|
|
<!-- Input Group: Slug -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Slug Identifier</label>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg px-3 py-2 font-body-base text-body-base text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" type="text" value="ios-app"/>
|
|
<span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Used for API routing. Must be unique.</span>
|
|
</div>
|
|
<!-- Input Group: Icon -->
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Icon Name</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[18px]" data-icon="smartphone">smartphone</span>
|
|
</span>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg pl-10 pr-3 py-2 font-body-base text-body-base text-on-surface focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" type="text" value="smartphone"/>
|
|
</div>
|
|
<span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">Use Material Symbol names (e.g., 'mail', 'android').</span>
|
|
</div>
|
|
<!-- Toggle: Active Status -->
|
|
<div class="flex items-center justify-between pt-2">
|
|
<div class="flex flex-col">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Active Status</label>
|
|
<span class="font-body-sm text-body-sm text-on-surface-variant">Allow new intake from this channel.</span>
|
|
</div>
|
|
<!-- Toggle Switch UI -->
|
|
<button aria-checked="true" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2" role="switch" type="button">
|
|
<span aria-hidden="true" class="translate-x-5 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Modal Footer -->
|
|
<div class="px-6 py-4 border-t border-outline-variant bg-surface flex justify-end gap-3">
|
|
<button class="bg-surface-container-lowest border border-outline-variant text-on-surface-variant px-4 py-2 rounded-lg font-button text-button hover:bg-surface-variant transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-button text-button shadow-sm hover:brightness-110 transition-colors">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body></html> |