293 lines
19 KiB
HTML
293 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Feedback - 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&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;
|
|
}
|
|
.icon-fill {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-base min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<nav class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm docked full-width top-0 sticky z-50 w-full h-14">
|
|
<div class="flex items-center justify-between w-full h-full px-6 max-w-[1280px] mx-auto">
|
|
<div class="flex items-center gap-8">
|
|
<div class="text-xl font-bold text-blue-600 dark:text-blue-400 font-h2">AfterSales CRM</div>
|
|
<div class="hidden md:flex items-center gap-6">
|
|
<a class="text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 pb-1 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Feedback</a>
|
|
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Products</a>
|
|
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Customers</a>
|
|
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Channels</a>
|
|
<a class="text-gray-600 dark:text-gray-400 font-manrope text-sm font-medium hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80" href="#">Tags</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative flex items-center bg-surface-container-low rounded-full px-3 py-1.5 border border-outline-variant focus-within:border-primary focus-within:ring-1 focus-within:ring-primary w-64">
|
|
<span class="material-symbols-outlined text-outline text-[20px] mr-2">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-full p-0 text-on-surface placeholder:text-outline-variant" placeholder="Search..." type="text"/>
|
|
</div>
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80 relative">
|
|
<span class="material-symbols-outlined text-[24px]">notifications</span>
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
|
|
</button>
|
|
<button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition-colors cursor-pointer active:opacity-80">
|
|
<span class="material-symbols-outlined text-[24px]">settings</span>
|
|
</button>
|
|
<img alt="User profile" class="w-8 h-8 rounded-full border border-outline-variant" data-alt="Close-up of a professional user profile picture with neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuADV3_Q1lBAyb061SRswKMVcRp6hCPgwfwmdMbQO58iyUWL0oabxofYIwpIuotiAScsRO4d8MUCxBw6_tcjGnA-Ced7gbwuOMgpMdu_2AcnrmgIdx7zboNGcwZvL5sGqZPSNAgJRnUVJsnKSNHlzVcahNAIfIi53csIQ0vb0zMIzVVMiu_2o1S-Ibp_QqOgOdeg8roj8OZ77JbPgBdLK_23B084Gz7csOxroTonJ-ObTMPAvxsV24mxTmDmaNoGARnl0_F0XMcKHHY"/>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-1 w-full max-w-[1280px] mx-auto px-6 py-8">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h1 class="font-h1 text-h1 text-on-surface">Create Feedback</h1>
|
|
<div class="flex items-center gap-3">
|
|
<button class="px-4 py-2 bg-surface-container-lowest border border-outline-variant rounded text-on-surface font-button text-button hover:bg-surface-container-low transition-colors shadow-sm" type="button">Cancel</button>
|
|
<button class="px-4 py-2 bg-primary text-on-primary rounded font-button text-button hover:bg-primary-container hover:text-on-primary-container transition-colors shadow-sm" type="submit">Create Feedback</button>
|
|
</div>
|
|
</div>
|
|
<form class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
|
<!-- Left Column: Core Details (8 cols) -->
|
|
<div class="lg:col-span-8 flex flex-col gap-6">
|
|
<!-- Customer & Channel Group -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-form-gap">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Customer</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[18px]">search</span>
|
|
<input class="w-full pl-9 pr-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface" placeholder="Search customer..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Channel <span class="text-error">*</span></label>
|
|
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none">
|
|
<option disabled="" selected="" value="">Select channel</option>
|
|
<option value="email">Email</option>
|
|
<option value="phone">Phone</option>
|
|
<option value="portal">Customer Portal</option>
|
|
<option value="social">Social Media</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-9 pointer-events-none text-outline text-[18px]">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-2 border-t border-outline-variant border-opacity-30 mt-2">
|
|
<input class="w-4 h-4 text-primary bg-surface-container-lowest border-outline-variant rounded focus:ring-primary" id="general-feedback" type="checkbox"/>
|
|
<label class="font-body-base text-body-base text-on-surface cursor-pointer select-none" for="general-feedback">This is general feedback (no specific product)</label>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Product</label>
|
|
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none" disabled="">
|
|
<option disabled="" selected="" value="">Select a customer first to filter products</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-9 pointer-events-none text-outline text-[18px] opacity-50">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
<!-- Feedback Content Group -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Title <span class="text-error">*</span></label>
|
|
<input class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface" placeholder="Brief summary of feedback" type="text"/>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Content</label>
|
|
<textarea class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface resize-y" placeholder="Detailed feedback description..." rows="6"></textarea>
|
|
</div>
|
|
</div>
|
|
<!-- Attachments Group -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="font-h3 text-h3 text-on-surface">Attachments</h2>
|
|
<span class="text-body-sm text-on-surface-variant font-body-sm">General, Proof, Evidence</span>
|
|
</div>
|
|
<div class="border-2 border-dashed border-outline-variant rounded-lg p-8 flex flex-col items-center justify-center bg-surface-container-low hover:bg-surface-container transition-colors cursor-pointer group">
|
|
<div class="w-12 h-12 rounded-full bg-secondary-container flex items-center justify-center mb-3 group-hover:bg-primary-container transition-colors">
|
|
<span class="material-symbols-outlined text-on-secondary-container group-hover:text-on-primary-container text-[24px]">cloud_upload</span>
|
|
</div>
|
|
<p class="font-label-semibold text-label-semibold text-on-surface mb-1">Click to upload or drag and drop</p>
|
|
<p class="font-body-sm text-body-sm text-outline">SVG, PNG, JPG or PDF (max. 10MB)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right Column: Metadata & Assignment (4 cols) -->
|
|
<div class="lg:col-span-4 flex flex-col gap-6">
|
|
<!-- Status & Classification -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Status</label>
|
|
<div class="w-full px-3 py-2 bg-surface-container border border-outline-variant border-opacity-50 rounded text-body-base text-on-surface-variant flex items-center justify-between cursor-not-allowed">
|
|
<span>Pending</span>
|
|
<span class="material-symbols-outlined text-[18px] text-outline">pending</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Tags</label>
|
|
<div class="w-full min-h-[42px] px-2 py-1.5 bg-surface-container-lowest border border-outline-variant rounded focus-within:border-primary focus-within:ring-1 focus-within:ring-primary flex flex-wrap gap-2 items-center cursor-text">
|
|
<div class="flex items-center gap-1 bg-surface-variant text-on-surface-variant px-2 py-0.5 rounded text-body-sm font-body-sm">
|
|
Feature Request
|
|
<span class="material-symbols-outlined text-[14px] cursor-pointer hover:text-on-surface">close</span>
|
|
</div>
|
|
<input class="flex-1 min-w-[80px] bg-transparent border-none focus:ring-0 p-0 text-body-base text-on-surface placeholder:text-outline-variant" placeholder="Add tag..." type="text"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Assignment & Routing -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm border border-outline-variant p-6 flex flex-col gap-form-gap">
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Department</label>
|
|
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none">
|
|
<option disabled="" selected="" value="">Select department</option>
|
|
<option value="support">Support</option>
|
|
<option value="product">Product Team</option>
|
|
<option value="engineering">Engineering</option>
|
|
<option value="sales">Sales</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-9 mt-[34px] pointer-events-none text-outline text-[18px]">arrow_drop_down</span>
|
|
</div>
|
|
<div class="flex flex-col gap-1.5">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Assign To</label>
|
|
<select class="w-full px-3 py-2 bg-surface-container-lowest border border-outline-variant rounded focus:border-primary focus:ring-1 focus:ring-primary text-body-base text-on-surface appearance-none">
|
|
<option selected="" value="unassigned">Unassigned (Queue)</option>
|
|
<option value="user1">Alex Johnson</option>
|
|
<option value="user2">Sarah Smith</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-9 mt-[34px] pointer-events-none text-outline text-[18px]">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
<!-- Admin Only Panel -->
|
|
<div class="bg-error-container bg-opacity-20 rounded-xl shadow-sm border border-error border-opacity-30 p-6 flex flex-col gap-form-gap">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h3 class="font-label-semibold text-label-semibold text-error flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[18px]">admin_panel_settings</span>
|
|
Admin Controls
|
|
</h3>
|
|
</div>
|
|
<div class="flex items-center justify-between py-2">
|
|
<div class="flex flex-col">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface">Escalate Feedback</label>
|
|
<span class="font-body-sm text-body-sm text-on-surface-variant">Flag for immediate manager review</span>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox" value=""/>
|
|
<div class="w-11 h-6 bg-surface-variant 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-outline-variant after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-error"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-50 dark:bg-gray-950 border-t border-gray-200 dark:border-gray-800 full-width py-8 flat no shadows mt-auto">
|
|
<div class="w-full flex flex-col md:flex-row justify-between items-center px-6 max-w-[1280px] mx-auto">
|
|
<div class="font-manrope text-xs text-gray-500 mb-4 md:mb-0">
|
|
© 2024 AfterSales CRM. All rights reserved.
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<a class="text-gray-500 font-manrope text-xs hover:underline transition-all" href="#">Support</a>
|
|
<a class="text-gray-500 font-manrope text-xs hover:underline transition-all" href="#">Privacy Policy</a>
|
|
<a class="text-gray-500 font-manrope text-xs hover:underline transition-all" href="#">Terms of Service</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body></html> |