300 lines
19 KiB
HTML
300 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>ZappCare - Tenant Settings</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;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": {
|
|
"on-primary-fixed-variant": "#004d62",
|
|
"error": "#ba1a1a",
|
|
"surface-bright": "#f7f9fc",
|
|
"background": "#f7f9fc",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-dim": "#d8dadc",
|
|
"surface-container-high": "#e6e8ea",
|
|
"outline": "#6f787d",
|
|
"on-secondary-container": "#36647e",
|
|
"on-tertiary-container": "#76450c",
|
|
"on-surface-variant": "#3f484c",
|
|
"surface-container-low": "#f2f4f6",
|
|
"secondary-fixed-dim": "#9fccea",
|
|
"tertiary": "#865219",
|
|
"on-primary-container": "#005870",
|
|
"inverse-primary": "#89d0ed",
|
|
"inverse-surface": "#2d3133",
|
|
"on-surface": "#191c1e",
|
|
"error-container": "#ffdad6",
|
|
"on-error": "#ffffff",
|
|
"surface-variant": "#e0e3e5",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"outline-variant": "#bfc8cd",
|
|
"tertiary-container": "#fbb674",
|
|
"on-tertiary-fixed-variant": "#6a3b01",
|
|
"on-tertiary-fixed": "#2d1600",
|
|
"tertiary-fixed": "#ffdcbf",
|
|
"surface": "#f7f9fc",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-fixed": "#001f29",
|
|
"on-background": "#191c1e",
|
|
"secondary-fixed": "#c5e7ff",
|
|
"surface-tint": "#0c6780",
|
|
"on-secondary-fixed": "#001e2d",
|
|
"primary-container": "#87ceeb",
|
|
"on-secondary-fixed-variant": "#194c64",
|
|
"secondary-container": "#b2e0fe",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-error-container": "#93000a",
|
|
"surface-container": "#eceef0",
|
|
"primary": "#0c6780",
|
|
"primary-fixed-dim": "#89d0ed",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"tertiary-fixed-dim": "#feb876",
|
|
"secondary": "#35637d",
|
|
"primary-fixed": "#baeaff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f7f9fc;
|
|
}
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
.primary-gradient {
|
|
background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface">
|
|
<header class="w-full top-0 sticky bg-[#f7f9fc] dark:bg-slate-900 flex justify-between items-center px-6 py-3 z-50">
|
|
<div class="flex items-center gap-8">
|
|
<span class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-['Manrope'] tracking-tight">ZappCare</span>
|
|
<nav class="hidden md:flex gap-6 items-center">
|
|
<a class="text-slate-500 dark:text-slate-400 font-['Manrope'] font-semibold hover:text-[#0c6780] transition-colors duration-200" href="#">Dashboard</a>
|
|
<a class="text-slate-500 dark:text-slate-400 font-['Manrope'] font-semibold hover:text-[#0c6780] transition-colors duration-200" href="#">Inbox</a>
|
|
<a class="text-[#0c6780] dark:text-[#87ceeb] border-b-2 border-[#0c6780] font-['Manrope'] font-semibold" href="#">Settings</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="material-symbols-outlined text-slate-500 hover:text-primary transition-colors">notifications</button>
|
|
<button class="material-symbols-outlined text-slate-500 hover:text-primary transition-colors">help</button>
|
|
<div class="w-8 h-8 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border border-outline-variant/20">
|
|
<img alt="Admin Profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional male administrator with a friendly expression in a brightly lit modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDjZB4Pw_UgI-0YyX2iB34NOr5cKncSoSeqsR10ia1JRH1sGqF7-ikvBmTWvS_FvHPZHP-esn0OkC5a5np5URi8kQ6S4GU-tLokHWaKZGiIiiPrJWq6JpVnlalNQQ9bSbq_3DVuWpAkA2r7c1wDxoOIQ0DkOUnZlchnYxO5hgeX9rd___Fux9rA3wAZixuryzxhNesoJIXglCCwVKYnGEAVCJiB5odRJRR7N4bV1dtoUWWfD6RebiSLlqQVa_rfJcVd2bT2Jg0kix0"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="flex min-h-[calc(100vh-64px)] overflow-hidden">
|
|
<aside class="h-screen w-72 left-0 top-16 sticky bg-[#f2f4f6] dark:bg-slate-900/80 backdrop-blur-xl shadow-[24px_0_24px_-4px_rgba(25,28,30,0.04)] flex flex-col p-4 gap-2 border-r border-outline-variant/10">
|
|
<div class="mb-6 px-2">
|
|
<h2 class="text-[#0c6780] font-headline font-bold text-lg">Client Settings</h2>
|
|
<p class="text-slate-500 text-xs font-body">Manage workspace configurations</p>
|
|
</div>
|
|
<nav class="flex-1 flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-primary">person</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Profile</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-[#87ceeb] text-[#005870] rounded-xl font-bold transition-all duration-200 group" href="#">
|
|
<span class="material-symbols-outlined text-xl">schedule</span>
|
|
<span class="font-bold font-['Inter'] text-sm">Business Hours</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-primary">rule</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Auto-Assignment</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-primary">label</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Tags</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-primary">chat_bubble</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Canned Responses</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all duration-200 hover:translate-x-1 group" href="#">
|
|
<span class="material-symbols-outlined text-xl group-hover:text-primary">webhook</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Webhook</span>
|
|
</a>
|
|
<div class="mt-4 px-2">
|
|
<button class="w-full primary-gradient text-on-primary py-3 rounded-xl font-semibold shadow-lg shadow-primary/20 active:scale-95 transition-transform flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined">add</span>
|
|
New Template
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div class="mt-auto pt-4 flex flex-col gap-1 border-t border-outline-variant/20">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined text-xl">support_agent</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Support</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-error/10 rounded-xl transition-all" href="#">
|
|
<span class="material-symbols-outlined text-xl">logout</span>
|
|
<span class="font-medium font-['Inter'] text-sm">Sign Out</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<main class="flex-1 bg-surface p-8 overflow-y-auto">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="flex justify-between items-end mb-10">
|
|
<div>
|
|
<h1 class="text-4xl font-headline font-extrabold text-on-surface tracking-tight mb-2">Business Hours</h1>
|
|
<p class="text-on-surface-variant max-w-lg">Define when your team is available to respond to messages. Outside these hours, auto-replies will be triggered.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-6 py-2.5 rounded-xl border border-outline-variant/30 text-on-surface font-semibold hover:bg-surface-container-low transition-colors">Reset</button>
|
|
<button class="px-6 py-2.5 rounded-xl primary-gradient text-on-primary font-semibold shadow-md active:scale-95 transition-all">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<section class="bg-surface-container-lowest rounded-full p-8 shadow-sm border border-outline-variant/5">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-primary-container/20 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary text-2xl">public</span>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-headline font-bold text-lg text-on-surface">Timezone Settings</h3>
|
|
<p class="text-on-surface-variant text-sm">Set your local timezone for accurate scheduling</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative min-w-[300px]">
|
|
<select class="w-full bg-surface-container-highest border-none rounded-xl py-3 px-4 text-on-surface focus:ring-2 focus:ring-primary appearance-none">
|
|
<option>(GMT-08:00) Pacific Time (US & Canada)</option>
|
|
<option>(GMT+00:00) Western European Time</option>
|
|
<option>(GMT+05:30) India Standard Time</option>
|
|
</select>
|
|
<span class="material-symbols-outlined absolute right-3 top-3 text-on-surface-variant pointer-events-none">expand_more</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl hover:bg-surface-container-low transition-colors group">
|
|
<div class="col-span-2">
|
|
<label class="inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-dim 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-primary relative"></div>
|
|
<span class="ml-3 font-semibold text-on-surface">Monday</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-span-10 flex items-center gap-4">
|
|
<div class="flex-1 flex items-center gap-3">
|
|
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="09:00"/>
|
|
<span class="text-on-surface-variant">to</span>
|
|
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="18:00"/>
|
|
</div>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors opacity-0 group-hover:opacity-100">delete</button>
|
|
<button class="material-symbols-outlined text-primary hover:bg-primary/10 p-1 rounded transition-colors">add_circle</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl hover:bg-surface-container-low transition-colors group">
|
|
<div class="col-span-2">
|
|
<label class="inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-dim 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-primary relative"></div>
|
|
<span class="ml-3 font-semibold text-on-surface">Tuesday</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-span-10 flex items-center gap-4">
|
|
<div class="flex-1 flex items-center gap-3">
|
|
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="09:00"/>
|
|
<span class="text-on-surface-variant">to</span>
|
|
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="18:00"/>
|
|
</div>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors opacity-0 group-hover:opacity-100">delete</button>
|
|
<button class="material-symbols-outlined text-primary hover:bg-primary/10 p-1 rounded transition-colors">add_circle</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl hover:bg-surface-container-low transition-colors group">
|
|
<div class="col-span-2">
|
|
<label class="inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-dim 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-primary relative"></div>
|
|
<span class="ml-3 font-semibold text-on-surface">Wednesday</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-span-10 flex items-center gap-4">
|
|
<div class="flex-1 flex items-center gap-3">
|
|
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="09:00"/>
|
|
<span class="text-on-surface-variant">to</span>
|
|
<input class="bg-surface-container-highest border-none rounded-lg text-sm px-3 py-2 w-full focus:ring-1 focus:ring-primary" type="time" value="18:00"/>
|
|
</div>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-error transition-colors opacity-0 group-hover:opacity-100">delete</button>
|
|
<button class="material-symbols-outlined text-primary hover:bg-primary/10 p-1 rounded transition-colors">add_circle</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-4 items-center p-4 rounded-2xl bg-surface-container shadow-inner opacity-60">
|
|
<div class="col-span-2">
|
|
<label class="inline-flex items-center cursor-pointer">
|
|
<input class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-dim 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-primary relative"></div>
|
|
<span class="ml-3 font-semibold text-slate-500">Saturday</span>
|
|
</label>
|
|
</div>
|
|
<div class="col-span-10 flex items-center justify-center border-2 border-dashed border-outline-variant/30 rounded-xl py-2">
|
|
<span class="text-xs font-bold uppercase tracking-widest text-on-surface-variant">Closed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<section class="glass-card rounded-full p-6 border border-outline-variant/10">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="material-symbols-outlined text-primary">auto_awesome</span>
|
|
<h4 class="font-headline font-bold text-on-surface">Holiday Mode</h4>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant mb-6">Automatically set your status to "Away" during national holidays.</p>
|
|
<label class="inline-flex items-center justify-between w-full p-4 rounded-xl bg-surface-container-low cursor-pointer">
|
|
<span class="font-medium text-sm">Enable Holiday Sync</span>
|
|
<input checked="" class="sr-only peer" type="checkbox"/>
|
|
<div class="w-11 h-6 bg-surface-dim 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-primary relative"></div>
|
|
</label>
|
|
</section>
|
|
<section class="glass-card rounded-full p-6 border border-outline-variant/10">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="material-symbols-outlined text-primary">campaign</span>
|
|
<h4 class="font-headline font-bold text-on-surface">Auto-Response</h4>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant mb-6">Message sent to customers who contact you during off-hours.</p>
|
|
<textarea class="w-full bg-surface-container-low border-none rounded-xl text-sm p-3 h-24 focus:ring-1 focus:ring-primary" placeholder="Thanks for reaching out! We are currently away but will get back to you during business hours."></textarea>
|
|
</section>
|
|
</div>
|
|
<div class="p-8 rounded-full bg-primary-container/10 border-2 border-dashed border-primary/20 flex flex-col items-center text-center">
|
|
<div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-4">
|
|
<span class="material-symbols-outlined text-primary text-3xl">event_available</span>
|
|
</div>
|
|
<h3 class="font-headline font-bold text-xl text-primary mb-2">Need a custom override?</h3>
|
|
<p class="text-on-surface-variant text-sm max-w-sm mb-6">Add specific dates for one-time office closures or team training sessions.</p>
|
|
<button class="px-8 py-3 rounded-full primary-gradient text-on-primary font-bold shadow-lg hover:shadow-primary/30 transition-shadow">Add Specific Date Exception</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |