198 lines
11 KiB
HTML
198 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Create Channel - AfterSales CRM</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@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": {
|
|
"tertiary-container": "#b75b00",
|
|
"surface-container-highest": "#e1e2ec",
|
|
"on-tertiary-fixed-variant": "#723600",
|
|
"on-secondary": "#ffffff",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-tertiary-container": "#fffbff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary-container": "#fefcff",
|
|
"error": "#ba1a1a",
|
|
"primary": "#0058be",
|
|
"primary-container": "#2170e4",
|
|
"background": "#f9f9ff",
|
|
"secondary-fixed-dim": "#c0c7d6",
|
|
"surface-container-low": "#f2f3fd",
|
|
"outline": "#727785",
|
|
"on-primary-fixed": "#001a42",
|
|
"secondary-fixed": "#dce2f3",
|
|
"outline-variant": "#c2c6d6",
|
|
"on-tertiary-fixed": "#311400",
|
|
"on-surface-variant": "#424754",
|
|
"surface": "#f9f9ff",
|
|
"on-error": "#ffffff",
|
|
"surface-bright": "#f9f9ff",
|
|
"secondary": "#585f6c",
|
|
"on-secondary-container": "#5e6572",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-container": "#dce2f3",
|
|
"on-primary-fixed-variant": "#004395",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#404754",
|
|
"primary-fixed-dim": "#adc6ff",
|
|
"on-surface": "#191b23",
|
|
"on-secondary-fixed": "#151c27",
|
|
"tertiary-fixed-dim": "#ffb786",
|
|
"surface-tint": "#005ac2",
|
|
"surface-container-high": "#e6e7f2",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"on-primary": "#ffffff",
|
|
"tertiary": "#924700",
|
|
"on-background": "#191b23",
|
|
"tertiary-fixed": "#ffdcc6",
|
|
"surface-variant": "#e1e2ec",
|
|
"primary-fixed": "#d8e2ff",
|
|
"inverse-primary": "#adc6ff",
|
|
"inverse-surface": "#2e3038",
|
|
"surface-container": "#ecedf7"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"stack-gap": "1.5rem",
|
|
"gutter": "1rem",
|
|
"margin-x": "1.5rem",
|
|
"form-gap": "1.25rem",
|
|
"container-max": "1280px",
|
|
"nav-height": "56px",
|
|
"grid-columns-desktop": "12"
|
|
},
|
|
"fontFamily": {
|
|
"button": ["Inter"],
|
|
"label-semibold": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"h2": ["Manrope"],
|
|
"body-sm": ["Inter"],
|
|
"h3": ["Manrope"],
|
|
"h1": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"button": ["14px", {"lineHeight": "20px", "fontWeight": "500"}],
|
|
"label-semibold": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"h2": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
|
|
"h3": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"h1": ["24px", {"lineHeight": "32px", "fontWeight": "600"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-low min-h-screen font-body-base text-body-base text-on-surface antialiased">
|
|
<!-- Main Content Canvas (Navigation suppressed for task-focused view) -->
|
|
<main class="w-full max-w-[800px] mx-auto px-margin-x py-10">
|
|
<!-- Header Section -->
|
|
<header class="mb-stack-gap">
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="Breadcrumb" class="flex items-center space-x-2 text-body-sm font-body-sm text-on-surface-variant mb-4">
|
|
<a class="hover:text-primary transition-colors flex items-center gap-1" href="#">
|
|
<span class="material-symbols-outlined text-[16px]">home</span>
|
|
Dashboard
|
|
</a>
|
|
<span class="material-symbols-outlined text-[14px] text-outline-variant">chevron_right</span>
|
|
<a class="hover:text-primary transition-colors" href="#">Channels</a>
|
|
<span class="material-symbols-outlined text-[14px] text-outline-variant">chevron_right</span>
|
|
<span aria-current="page" class="text-on-surface font-medium">New Channel</span>
|
|
</nav>
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="font-h1 text-h1 text-on-surface tracking-tight">Create New Channel</h1>
|
|
</div>
|
|
<p class="font-body-base text-body-base text-on-surface-variant mt-2">
|
|
Define a new distribution or communication channel for your products.
|
|
</p>
|
|
</header>
|
|
<!-- Form Card -->
|
|
<div class="bg-surface-container-lowest border border-outline-variant rounded-xl shadow-sm overflow-hidden">
|
|
<form action="#" method="POST">
|
|
<div class="p-8">
|
|
<h2 class="font-h3 text-h3 text-on-surface mb-6 pb-4 border-b border-surface-variant">Channel Details</h2>
|
|
<!-- 2-Column Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-form-gap">
|
|
<!-- Name Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_name">
|
|
Channel Name <span class="text-error">*</span>
|
|
</label>
|
|
<input class="h-10 px-3 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-outline transition-all" id="channel_name" name="channel_name" placeholder="e.g., Retail Partners EMEA" required="" type="text"/>
|
|
</div>
|
|
<!-- Slug Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_slug">
|
|
Identifier (Slug) <span class="text-error">*</span>
|
|
</label>
|
|
<div class="flex shadow-sm rounded border border-outline-variant focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all overflow-hidden bg-surface-container-lowest">
|
|
<span class="inline-flex items-center px-3 bg-surface-container text-on-surface-variant border-r border-outline-variant font-body-base text-body-base select-none">
|
|
ch_
|
|
</span>
|
|
<input class="flex-1 h-10 px-3 border-none bg-transparent text-on-surface font-body-base text-body-base focus:ring-0 placeholder:text-outline" id="channel_slug" name="channel_slug" placeholder="retail-emea" required="" type="text"/>
|
|
</div>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Used for API integration.</p>
|
|
</div>
|
|
<!-- Icon Field -->
|
|
<div class="flex flex-col gap-2">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface" for="channel_icon">
|
|
Display Icon
|
|
</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-outline">
|
|
<span class="material-symbols-outlined text-[20px]">search</span>
|
|
</span>
|
|
<input class="w-full h-10 pl-10 pr-10 border border-outline-variant rounded bg-surface-container-lowest text-on-surface font-body-base text-body-base focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 placeholder:text-outline transition-all" id="channel_icon" name="channel_icon" placeholder="Search icon name..." type="text" value="storefront"/>
|
|
<span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-primary">
|
|
<span class="material-symbols-outlined text-[20px]">storefront</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Active Toggle -->
|
|
<div class="flex flex-col gap-2 justify-center pt-2">
|
|
<label class="font-label-semibold text-label-semibold text-on-surface mb-1">Status</label>
|
|
<label class="relative inline-flex items-center cursor-pointer select-none">
|
|
<input checked="" class="sr-only peer" name="is_active" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-variant peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/20 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-primary"></div>
|
|
<div class="ml-3 flex flex-col">
|
|
<span class="font-body-base text-body-base text-on-surface font-medium">Active</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer Actions -->
|
|
<div class="px-8 py-5 bg-surface border-t border-outline-variant flex items-center justify-end gap-3 rounded-b-xl">
|
|
<button class="h-10 px-4 inline-flex items-center justify-center font-button text-button text-on-surface bg-surface-container-lowest border border-outline-variant rounded hover:bg-surface-variant transition-colors focus:outline-none focus:ring-2 focus:ring-primary/20" type="button">
|
|
Cancel
|
|
</button>
|
|
<button class="h-10 px-6 inline-flex items-center justify-center font-button text-button text-on-primary bg-primary rounded hover:brightness-110 transition-all shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-surface-container-lowest" type="submit">
|
|
Save Channel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</body></html> |