305 lines
17 KiB
HTML
305 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Contact Import Wizard | ZappCare</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": {
|
|
"secondary-fixed": "#c5e7ff",
|
|
"primary": "#0c6780",
|
|
"on-error-container": "#93000a",
|
|
"on-secondary-container": "#36647e",
|
|
"surface": "#f7f9fc",
|
|
"surface-container-low": "#f2f4f6",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-fixed-dim": "#feb876",
|
|
"surface-container-high": "#e6e8ea",
|
|
"on-primary-fixed": "#001f29",
|
|
"outline": "#6f787d",
|
|
"on-secondary-fixed": "#001e2d",
|
|
"surface-tint": "#0c6780",
|
|
"error": "#ba1a1a",
|
|
"on-surface-variant": "#3f484c",
|
|
"primary-fixed": "#baeaff",
|
|
"on-tertiary-container": "#76450c",
|
|
"secondary-container": "#b2e0fe",
|
|
"secondary": "#35637d",
|
|
"surface-container-lowest": "#ffffff",
|
|
"outline-variant": "#bfc8cd",
|
|
"on-tertiary": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"background": "#f7f9fc",
|
|
"surface-bright": "#f7f9fc",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"on-surface": "#191c1e",
|
|
"on-background": "#191c1e",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"surface-dim": "#d8dadc",
|
|
"surface-container": "#eceef0",
|
|
"surface-variant": "#e0e3e5",
|
|
"inverse-primary": "#89d0ed",
|
|
"tertiary": "#865219",
|
|
"secondary-fixed-dim": "#9fccea",
|
|
"on-secondary-fixed-variant": "#194c64",
|
|
"inverse-surface": "#2d3133",
|
|
"on-primary-fixed-variant": "#004d62",
|
|
"tertiary-container": "#fbb674",
|
|
"on-tertiary-fixed": "#2d1600",
|
|
"on-tertiary-fixed-variant": "#6a3b01",
|
|
"tertiary-fixed": "#ffdcbf",
|
|
"primary-container": "#87ceeb",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed-dim": "#89d0ed",
|
|
"on-primary-container": "#005870",
|
|
"on-primary": "#ffffff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {},
|
|
"fontFamily": {
|
|
"headline": ["Manrope"],
|
|
"body": ["Inter"],
|
|
"label": ["Inter"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
h1, h2, h3 { font-family: 'Manrope', sans-serif; }
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface min-h-screen">
|
|
<!-- SideNavBar Shell -->
|
|
<aside class="h-screen fixed left-0 top-0 w-64 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-xl flex flex-col py-8 px-4 space-y-2 z-50">
|
|
<div class="mb-8 px-2">
|
|
<h1 class="text-xl font-black tracking-tighter text-sky-900 dark:text-sky-100">ZappCare</h1>
|
|
<p class="text-xs font-semibold text-slate-500 uppercase tracking-widest mt-1">Architectural Inbox</p>
|
|
</div>
|
|
<nav class="flex-1 space-y-1">
|
|
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
|
<span class="material-symbols-outlined" data-icon="inbox">inbox</span>
|
|
<span>Inbox</span>
|
|
</a>
|
|
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
|
<span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span>
|
|
<span>Analytics</span>
|
|
</a>
|
|
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
|
<span class="material-symbols-outlined" data-icon="campaign">campaign</span>
|
|
<span>Campaigns</span>
|
|
</a>
|
|
<!-- Active State: Team -->
|
|
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold bg-white/90 text-sky-700 rounded-xl shadow-sm scale-98 transition-transform duration-200" href="#">
|
|
<span class="material-symbols-outlined" data-icon="group" style="font-variation-settings: 'FILL' 1;">group</span>
|
|
<span>Team</span>
|
|
</a>
|
|
<a class="flex items-center space-x-3 px-3 py-2 text-sm font-semibold text-slate-500 hover:bg-sky-50/50 transition-all duration-200 ease-in-out rounded-xl" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span>Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="pt-4">
|
|
<button class="w-full flex items-center justify-center space-x-2 py-3 bg-gradient-to-br from-primary to-primary-container text-on-primary rounded-full font-bold shadow-sm hover:scale-98 active:scale-95 transition-all duration-200">
|
|
<span class="material-symbols-outlined" data-icon="chat">chat</span>
|
|
<span>New Chat</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar Shell -->
|
|
<header class="sticky top-0 w-full z-40 bg-[#f7f9fc]/95 backdrop-blur-md flex items-center justify-between h-16 px-8 ml-64">
|
|
<div class="flex items-center space-x-6">
|
|
<nav class="flex items-center space-x-8">
|
|
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">Overview</a>
|
|
<a class="text-slate-500 font-['Inter'] text-sm tracking-normal hover:text-sky-900 transition-colors duration-200" href="#">History</a>
|
|
<a class="text-sky-700 font-bold border-b-2 border-sky-600 pb-1 font-['Inter'] text-sm tracking-normal" href="#">Audit Logs</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center space-x-5">
|
|
<div class="flex items-center bg-surface-container-low px-4 py-2 rounded-full">
|
|
<span class="material-symbols-outlined text-outline text-xl" data-icon="search">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-sm ml-2 w-48 font-body" placeholder="Search resources..." type="text"/>
|
|
</div>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<button class="text-on-surface-variant hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
</button>
|
|
<div class="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center text-xs font-bold text-on-secondary-container overflow-hidden">
|
|
<img alt="Admin User Profile" data-alt="close-up portrait of a professional woman with a friendly smile in a modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB7VSKdLcrF558FC3g5LsJ2s2wInAPtoZeeaG0VulYU_Aq5Mf1CpKs8MdNukmrjBn9wK4xSJhnobYj9YsdJckSgnXNz58Lcq9-kOej5xga5ZKrT91HOQnkMRnTDdCuAOJ5VYLGpngJIrTNRwrT2UUPa8hp7Pvlsvxry7YUmlJlBTUdOmLNV6Cc0xRxKgsPwTnQTFlGbQzwpROjVrSEN6kiVv5N6n7pB4CXDG9YT6Zay7m9PzZWXV0DPgu5_pnIwc2FKqsXnXGik4NU"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Canvas -->
|
|
<main class="ml-64 p-12 max-w-7xl">
|
|
<header class="mb-12">
|
|
<h2 class="text-4xl font-extrabold text-on-surface tracking-tight mb-2">Import Contacts</h2>
|
|
<p class="text-on-surface-variant text-lg max-w-2xl">Effortlessly synchronize your workforce data. Our architectural import tool ensures data integrity through structured mapping and real-time validation.</p>
|
|
</header>
|
|
<!-- Stepper -->
|
|
<div class="flex items-center space-x-4 mb-10 overflow-x-auto pb-4">
|
|
<div class="flex items-center space-x-3 shrink-0">
|
|
<div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold">1</div>
|
|
<span class="font-headline font-bold text-on-surface">Upload Source</span>
|
|
</div>
|
|
<div class="w-12 h-px bg-outline-variant opacity-30"></div>
|
|
<div class="flex items-center space-x-3 shrink-0 opacity-50">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant font-bold">2</div>
|
|
<span class="font-headline font-semibold text-on-surface-variant">Map Fields</span>
|
|
</div>
|
|
<div class="w-12 h-px bg-outline-variant opacity-30"></div>
|
|
<div class="flex items-center space-x-3 shrink-0 opacity-50">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container-highest flex items-center justify-center text-on-surface-variant font-bold">3</div>
|
|
<span class="font-headline font-semibold text-on-surface-variant">Validation</span>
|
|
</div>
|
|
</div>
|
|
<!-- Bento Grid Layout for Steps -->
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Step 1: Drag and Drop Area -->
|
|
<div class="col-span-12 lg:col-span-8 bg-surface-container-lowest rounded-full p-12 transition-all duration-300">
|
|
<div class="border-2 border-dashed border-outline-variant rounded-full h-80 flex flex-col items-center justify-center text-center p-8 group hover:bg-surface-container-low transition-colors">
|
|
<div class="w-20 h-20 bg-primary-fixed rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<span class="material-symbols-outlined text-primary text-4xl" data-icon="cloud_upload">cloud_upload</span>
|
|
</div>
|
|
<h3 class="text-2xl font-headline font-bold text-on-surface mb-2">Drop your CSV file here</h3>
|
|
<p class="text-on-surface-variant mb-8 max-w-xs mx-auto">Support for UTF-8 encoded .csv and .xlsx files up to 50MB.</p>
|
|
<button class="bg-surface-container-highest px-8 py-3 rounded-full font-bold text-on-surface hover:bg-outline-variant transition-colors">Browse Files</button>
|
|
</div>
|
|
</div>
|
|
<!-- Contextual Info Card -->
|
|
<div class="col-span-12 lg:col-span-4 space-y-6">
|
|
<div class="glass-card p-8 rounded-full border-none shadow-sm">
|
|
<h4 class="text-lg font-headline font-bold text-primary mb-4 flex items-center">
|
|
<span class="material-symbols-outlined mr-2" data-icon="info">info</span>
|
|
Best Practices
|
|
</h4>
|
|
<ul class="space-y-4 text-sm text-on-surface-variant">
|
|
<li class="flex items-start">
|
|
<span class="material-symbols-outlined text-primary text-sm mr-2" data-icon="check_circle">check_circle</span>
|
|
Ensure first row contains headers.
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="material-symbols-outlined text-primary text-sm mr-2" data-icon="check_circle">check_circle</span>
|
|
Use international phone formats (e.g., +1...).
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="material-symbols-outlined text-primary text-sm mr-2" data-icon="check_circle">check_circle</span>
|
|
Check for duplicate email entries.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-secondary-container/30 p-8 rounded-full border-none">
|
|
<h4 class="text-lg font-headline font-bold text-on-secondary-container mb-2">Template Ready?</h4>
|
|
<p class="text-sm text-on-secondary-container/80 mb-4">Download our pre-formatted architecture template to ensure zero mapping errors.</p>
|
|
<a class="inline-flex items-center text-sm font-bold text-on-secondary-container hover:underline" href="#">
|
|
Download Template
|
|
<span class="material-symbols-outlined ml-1 text-sm" data-icon="download">download</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Step 2: Field Mapping Preview (Simulated as upcoming) -->
|
|
<div class="col-span-12 mt-8 opacity-40 select-none grayscale">
|
|
<div class="bg-surface-container-low rounded-full p-10">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h3 class="text-xl font-headline font-bold">Field Mapping Architecture</h3>
|
|
<span class="px-4 py-1 bg-surface-container-highest rounded-full text-xs font-bold uppercase tracking-widest">Locked</span>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-x-12 gap-y-6">
|
|
<div class="space-y-4">
|
|
<p class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">ZappCare Field</p>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between">
|
|
<span class="font-medium">Full Name</span>
|
|
<span class="material-symbols-outlined text-outline" data-icon="link">link</span>
|
|
</div>
|
|
<div class="bg-surface-container-lowest p-4 rounded-xl flex items-center justify-between">
|
|
<span class="font-medium">Email Address</span>
|
|
<span class="material-symbols-outlined text-outline" data-icon="link">link</span>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<p class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">CSV Header</p>
|
|
<div class="bg-surface-container-highest p-4 rounded-xl flex items-center justify-between border-b-2 border-primary">
|
|
<span class="text-primary font-bold italic">Select Header...</span>
|
|
<span class="material-symbols-outlined text-primary" data-icon="arrow_drop_down">arrow_drop_down</span>
|
|
</div>
|
|
<div class="bg-surface-container-highest p-4 rounded-xl flex items-center justify-between border-b-2 border-primary">
|
|
<span class="text-primary font-bold italic">Select Header...</span>
|
|
<span class="material-symbols-outlined text-primary" data-icon="arrow_drop_down">arrow_drop_down</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Step 3: Validation Preview (Asymmetric Feature) -->
|
|
<div class="col-span-12 lg:col-span-7 mt-8">
|
|
<div class="glass-card p-10 rounded-full flex flex-col h-full justify-between">
|
|
<div>
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-3 h-3 bg-error rounded-full"></div>
|
|
<h3 class="text-xl font-headline font-bold">Validation Preview</h3>
|
|
</div>
|
|
<p class="text-on-surface-variant mb-6">Once uploaded, our AI validates each entry against architectural constraints to prevent data pollution.</p>
|
|
</div>
|
|
<div class="bg-surface-container-low rounded-xl p-6 space-y-4">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-on-surface-variant font-medium">Potential Duplicates</span>
|
|
<span class="bg-error-container text-on-error-container px-3 py-1 rounded-full font-bold">--</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-on-surface-variant font-medium">Invalid Formats</span>
|
|
<span class="bg-tertiary-container text-on-tertiary-container px-3 py-1 rounded-full font-bold">--</span>
|
|
</div>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-on-surface-variant font-medium">Ready to Import</span>
|
|
<span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full font-bold">--</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 lg:col-span-5 mt-8">
|
|
<div class="relative overflow-hidden rounded-full h-full min-h-[320px] group">
|
|
<img alt="Data visualization background" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="clean abstract data visualization with flowing blue lines and soft glowing nodes representing information connectivity and flow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlVaEF_XzPYETA_aJNhWU5OBcZ4gjMENojJKmUenE-oSXK3QAKFo52RvenTY0SSXr29k4SHwT6lJghbFqoCTaAdr2POg0uf5pdxZ0400D5qDvm_H5LQkjCJju7Z2EDwGOAiswYTO6qjwmjs9n9gifC7ELaIA3xUO915IvAU4y8WTXEmycr-Qfqd0Y9x5b2y5Yhh8ailCNl0JlTFp6a6CsvQvPlFxCE6V9swwS1-NjD6J-tdcRqKKmFSgsBmdD5_JgnT2MvCn8nFzU"/>
|
|
<div class="absolute inset-0 bg-primary/20 backdrop-blur-[2px]"></div>
|
|
<div class="absolute inset-0 p-10 flex flex-col justify-end text-white">
|
|
<h4 class="text-2xl font-headline font-bold mb-2">Automated Sync</h4>
|
|
<p class="text-sm opacity-90">Set up recurring imports from your CRM to keep ZappCare synchronized without manual intervention.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sticky Footer Action Bar -->
|
|
<footer class="fixed bottom-8 left-64 right-8 z-30">
|
|
<div class="mx-auto max-w-5xl glass-card px-8 py-4 rounded-full shadow-lg flex items-center justify-between border-none">
|
|
<button class="text-on-surface-variant font-bold px-6 py-2 hover:bg-surface-container-low rounded-full transition-colors">Cancel</button>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="bg-surface-container-highest text-on-surface-variant font-bold px-6 py-2 rounded-full cursor-not-allowed opacity-50">Back</button>
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary font-bold px-10 py-3 rounded-full hover:scale-105 active:scale-95 shadow-md transition-all">Next: Map Fields</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</body></html> |