Hugging Face's logo

Spaces:
Sudeep679
/
test2
Running

App Files Community
test2 / lead-capture.html
Sudeep679's picture
Sudeep679
Make one Lead Listing Page , Then LEad Creation Page
ef5bca2 verified
Raw History Blame Contribute Delete
25.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unified Lead Capture</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
.form-section {
transition: all 0.3s ease;
}
.form-section:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.dropdown-arrow {
pointer-events: none;
}
.file-upload {
border: 2px dashed #d1d5db;
transition: all 0.3s ease;
}
.file-upload:hover {
border-color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-50">
<div class="max-w-6xl mx-auto px-4 py-8">
<header class="mb-10 text-center">
<h1 class="text-3xl font-bold text-gray-800 mb-2">Unified Lead Capture</h1>
<p class="text-gray-600">Capture leads from all channels in one place</p>
</header>
<form class="space-y-8">
<!-- Section 1: Lead Source & Channel -->
<div class="form-section bg-white rounded-lg p-6 shadow-sm" data-aos="fade-up">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
<i data-feather="source"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Lead Source & Channel</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Channel</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Channel</option>
<option>Online</option>
<option>WhatsApp</option>
<option>Excel</option>
<option>Social Media</option>
<option>Walk-In</option>
<option>Website</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Source</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Source</option>
<option>Campaign</option>
<option>Referral</option>
<option>Event</option>
<option>Dealer Partner</option>
<option>Service Department</option>
</select>
</div>
</div>
</div>
<!-- Section 2: Customer Information -->
<div class="form-section bg-white rounded-lg p-6 shadow-sm" data-aos="fade-up">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
<i data-feather="user"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Customer Information</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Primary Contact Number</label>
<input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Alternate Contact Number</label>
<input type="tel" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Email ID</label>
<input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Customer Type</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Type</option>
<option>Individual</option>
<option>Corporate</option>
<option>Fleet</option>
</select>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option>Select Country</option>
<option>India</option>
<option>USA</option>
<option>UK</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">State</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option>Select State</option>
<option>Maharashtra</option>
<option>California</option>
<option>London</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">City</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option>Select City</option>
<option>Mumbai</option>
<option>Los Angeles</option>
<option>Manchester</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Preferred Communication</label>
<div class="flex flex-wrap gap-3 mt-2">
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">Call</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">SMS</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">WhatsApp</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">Email</span>
</label>
</div>
</div>
</div>
</div>
<!-- Section 3: Lead Type & Assignment -->
<div class="form-section bg-white rounded-lg p-6 shadow-sm" data-aos="fade-up">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
<i data-feather="clipboard"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Lead Type & Assignment</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Lead Status</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Status</option>
<option>New</option>
<option>In Progress</option>
<option>Negotiation</option>
<option>Won</option>
<option>Lost</option>
<option>Not in Stock</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Assigned Sales Executive</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Executive</option>
<option>John Doe</option>
<option>Jane Smith</option>
<option>Robert Johnson</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Dealership Location</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Location</option>
<option>Main Branch</option>
<option>Westside Branch</option>
<option>Downtown Branch</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Expected Closure Date</label>
<input type="date" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
</div>
<!-- Section 4: Vehicle / Service Details -->
<div class="form-section bg-white rounded-lg p-6 shadow-sm" data-aos="fade-up">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
<i data-feather="car"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Vehicle / Service Details</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Requirement Type</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Type</option>
<option>Buy Car</option>
<option>Sell Car</option>
<option>Insurance</option>
<option>Service</option>
<option>Finance</option>
</select>
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Make</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option>Select Make</option>
<option>Toyota</option>
<option>Honda</option>
<option>BMW</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Model</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option>Select Model</option>
<option>Camry</option>
<option>Civic</option>
<option>X5</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Variant/Year</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option>Select Variant/Year</option>
<option>LX</option>
<option>EX</option>
<option>2023</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Condition (for used cars)</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
<option value="">Select Condition</option>
<option>Excellent</option>
<option>Good</option>
<option>Fair</option>
<option>Poor</option>
</select>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Min Budget</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Max Budget</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Lead Value</label>
<div class="relative rounded-md shadow-sm">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<span class="text-gray-500 sm:text-sm">₹</span>
</div>
<input type="text" class="block w-full pl-8 pr-12 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
</div>
</div>
</div>
<!-- Section 5: Additional Information -->
<div class="form-section bg-white rounded-lg p-6 shadow-sm" data-aos="fade-up">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
<i data-feather="info"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Additional Information</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Reference/Referral Name</label>
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tags</label>
<div class="flex flex-wrap gap-3 mt-2">
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">Hot Lead</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">Priority</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">Repeat Customer</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<span class="ml-2">Corporate</span>
</label>
</div>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
<textarea rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea>
</div>
<div class="md:col-span-2">
<label class="block text-sm font-medium text-gray-700 mb-1">Documents Upload</label>
<div class="file-upload mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
<div class="space-y-1 text-center">
<div class="flex text-sm text-gray-600">
<label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
<span>Upload files</span>
<input type="file" class="sr-only" multiple>
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-gray-500">PNG, JPG, PDF up to 10MB</p>
</div>
</div>
</div>
</div>
</div>
<!-- Section 6: Engagement / Activity Tracking -->
<div class="form-section bg-white rounded-lg p-6 shadow-sm" data-aos="fade-up">
<div class="flex items-center mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white mr-3">
<i data-feather="activity"></i>
</div>
<h2 class="text-xl font-semibold text-gray-800">Engagement / Activity Tracking</h2>
</div>
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Activity Log</label>
<div class="bg-gray-50 p-4 rounded-md">
<p class="text-sm text-gray-500">No activities logged yet. Activities will appear here after submission.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<button type="button" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<i data-feather="mail" class="mr-2"></i> Send Email
</button>
<button type="button" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<i data-feather="message-square" class="mr-2"></i> Send WhatsApp Message
</button>
<button type="button" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i data-feather="phone" class="mr-2"></i> Schedule Call
</button>
<button type="button" class="flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<i data-feather="calendar" class="mr-2"></i> Schedule Test Drive
</button>
</div>
</div>
</div>
<!-- Form Actions -->
<div class="flex justify-end space-x-4">
<button type="button" class="px-6 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Cancel
</button>
<button type="submit" class="px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Save Lead
</button>
</div>
</form>
</div>
<script>
AOS.init();
feather.replace();
</script>
</body>
</html>