| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AutoApply MasterBot Wizard</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <style> |
| .wizard-gradient { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen wizard-gradient"> |
| <div class="container mx-auto px-4 py-12"> |
| <div class="max-w-6xl mx-auto bg-white bg-opacity-90 rounded-2xl shadow-2xl overflow-hidden"> |
| |
| <div class="p-8 bg-white border-b border-gray-200"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center mb-4"> |
| <i data-feather="zap" class="text-white w-8 h-8"></i> |
| </div> |
| <h1 class="text-3xl font-bold text-gray-800">AutoApply MasterBot Wizard</h1> |
| <p class="text-gray-600 mt-2">Automatically apply to services using your saved profiles</p> |
| </div> |
| </div> |
|
|
| |
| <div class="p-8"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-6">Select Services to Apply For</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="service-card bg-white p-6 rounded-xl border border-gray-200 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 overflow-hidden"> |
| <img src="https://logo.clearbit.com/chase.com" alt="Chase" class="w-full h-full object-contain"> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800">Credit Cards</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Automatically apply for credit cards from top banks</p> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="chase" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="chase" class="ml-2 text-sm text-gray-700">Chase</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="amex" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="amex" class="ml-2 text-sm text-gray-700">American Express</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="citi" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="citi" class="ml-2 text-sm text-gray-700">Citi Bank</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="bofa" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="bofa" class="ml-2 text-sm text-gray-700">Bank of America</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="wells" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="wells" class="ml-2 text-sm text-gray-700">Wells Fargo</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="capitalone" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="capitalone" class="ml-2 text-sm text-gray-700">Capital One</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="discover" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="discover" class="ml-2 text-sm text-gray-700">Discover</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="barclays" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="barclays" class="ml-2 text-sm text-gray-700">Barclays</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="usbank" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="usbank" class="ml-2 text-sm text-gray-700">U.S. Bank</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="pnc" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="pnc" class="ml-2 text-sm text-gray-700">PNC Bank</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="td" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="td" class="ml-2 text-sm text-gray-700">TD Bank</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="ally" class="rounded text-blue-600 focus:ring-blue-500"> |
| <label for="ally" class="ml-2 text-sm text-gray-700">Ally Bank</label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="service-card bg-white p-6 rounded-xl border border-gray-200 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 overflow-hidden"> |
| <img src="https://logo.clearbit.com/fns.usda.gov" alt="EBT" class="w-full h-full object-contain"> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800">Government Benefits</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Apply for government assistance programs</p> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="ebt" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="ebt" class="ml-2 text-sm text-gray-700">EBT/SNAP</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="medicaid" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="medicaid" class="ml-2 text-sm text-gray-700">Medicaid</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="medicare" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="medicare" class="ml-2 text-sm text-gray-700">Medicare</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="ssi" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="ssi" class="ml-2 text-sm text-gray-700">SSI</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="tanf" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="tanf" class="ml-2 text-sm text-gray-700">TANF</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="wic" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="wic" class="ml-2 text-sm text-gray-700">WIC</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="housing" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="housing" class="ml-2 text-sm text-gray-700">Housing Assistance</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="unemployment" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="unemployment" class="ml-2 text-sm text-gray-700">Unemployment</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="lifeline" class="rounded text-green-600 focus:ring-green-500"> |
| <label for="lifeline" class="ml-2 text-sm text-gray-700">Lifeline</label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="service-card bg-white p-6 rounded-xl border border-gray-200 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 overflow-hidden"> |
| <img src="https://logo.clearbit.com/costco.com" alt="Costco" class="w-full h-full object-contain"> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800">Retail Memberships</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Sign up for store loyalty programs</p> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="costco" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="costco" class="ml-2 text-sm text-gray-700">Costco</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="amazon" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="amazon" class="ml-2 text-sm text-gray-700">Amazon Prime</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="target" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="target" class="ml-2 text-sm text-gray-700">Target Circle</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="walmart" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="walmart" class="ml-2 text-sm text-gray-700">Walmart+</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="sams" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="sams" class="ml-2 text-sm text-gray-700">Sam's Club</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="bestbuy" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="bestbuy" class="ml-2 text-sm text-gray-700">Best Buy</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="kroger" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="kroger" class="ml-2 text-sm text-gray-700">Kroger</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="ulta" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="ulta" class="ml-2 text-sm text-gray-700">Ulta Beauty</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="sephora" class="rounded text-purple-600 focus:ring-purple-500"> |
| <label for="sephora" class="ml-2 text-sm text-gray-700">Sephora</label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="service-card bg-white p-6 rounded-xl border border-gray-200 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 overflow-hidden"> |
| <img src="https://logo.clearbit.com/duke-energy.com" alt="Electric" class="w-full h-full object-contain"> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800">Utilities</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Set up new utility accounts</p> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="electric" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="electric" class="ml-2 text-sm text-gray-700">Electricity</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="water" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="water" class="ml-2 text-sm text-gray-700">Water</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="gas" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="gas" class="ml-2 text-sm text-gray-700">Natural Gas</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="internet" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="internet" class="ml-2 text-sm text-gray-700">Internet</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="cable" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="cable" class="ml-2 text-sm text-gray-700">Cable TV</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="phone" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="phone" class="ml-2 text-sm text-gray-700">Phone Service</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="security" class="rounded text-yellow-600 focus:ring-yellow-500"> |
| <label for="security" class="ml-2 text-sm text-gray-700">Home Security</label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="service-card bg-white p-6 rounded-xl border border-gray-200 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center mr-3 overflow-hidden"> |
| <img src="https://logo.clearbit.com/netflix.com" alt="Netflix" class="w-full h-full object-contain"> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800">Subscriptions</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Sign up for digital services</p> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="netflix" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="netflix" class="ml-2 text-sm text-gray-700">Netflix</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="spotify" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="spotify" class="ml-2 text-sm text-gray-700">Spotify</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="disney" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="disney" class="ml-2 text-sm text-gray-700">Disney+</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="hulu" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="hulu" class="ml-2 text-sm text-gray-700">Hulu</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="hbo" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="hbo" class="ml-2 text-sm text-gray-700">HBO Max</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="apple" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="apple" class="ml-2 text-sm text-gray-700">Apple Music</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="youtube" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="youtube" class="ml-2 text-sm text-gray-700">YouTube Premium</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="prime" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="prime" class="ml-2 text-sm text-gray-700">Amazon Prime Video</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="peacock" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="peacock" class="ml-2 text-sm text-gray-700">Peacock</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="gym" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="gym" class="ml-2 text-sm text-gray-700">Gym Membership</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="checkbox" id="audible" class="rounded text-red-600 focus:ring-red-500"> |
| <label for="audible" class="ml-2 text-sm text-gray-700">Audible</label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="service-card bg-white p-6 rounded-xl border border-gray-200 transition-all duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
| <i data-feather="plus" class="text-indigo-600 w-5 h-5"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-800">Custom Service</h3> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Add your own custom application</p> |
| <div class="space-y-3"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Website URL</label> |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
| </div> |
| <button class="mt-2 w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition-colors"> |
| Add Custom Service |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-10"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Select Profile to Use</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div class="border-2 border-blue-500 rounded-xl p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i data-feather="user" class="text-blue-600 w-6 h-6"></i> |
| </div> |
| <div> |
| <h3 class="font-medium text-gray-800">Personal Profile</h3> |
| <p class="text-sm text-gray-500">John Doe</p> |
| </div> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">Primary profile with personal information</p> |
| <button class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors"> |
| Select Profile |
| </button> |
| </div> |
|
|
| <div class="border border-gray-200 rounded-xl p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
| <i data-feather="briefcase" class="text-purple-600 w-6 h-6"></i> |
| </div> |
| <div> |
| <h3 class="font-medium text-gray-800">Business Profile</h3> |
| <p class="text-sm text-gray-500">Doe Enterprises</p> |
| </div> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">For business applications and services</p> |
| <button class="w-full border border-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-50 transition-colors"> |
| Select Profile |
| </button> |
| </div> |
|
|
| <div class="border border-gray-200 rounded-xl p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
| <i data-feather="plus" class="text-green-600 w-6 h-6"></i> |
| </div> |
| <div> |
| <h3 class="font-medium text-gray-800">Create New Profile</h3> |
| <p class="text-sm text-gray-500">Custom application profile</p> |
| </div> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">Set up a specialized profile for specific needs</p> |
| <button class="w-full border border-gray-300 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-50 transition-colors"> |
| Create New |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-12 bg-blue-50 rounded-xl p-6"> |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Ready to AutoApply</h2> |
| <div class="flex flex-col md:flex-row items-center justify-between"> |
| <div> |
| <p class="text-gray-600 mb-4 md:mb-0">The wizard will automatically fill out all selected applications using your profile information.</p> |
| <div class="flex items-center text-sm text-gray-500"> |
| <i data-feather="shield" class="w-4 h-4 mr-1"></i> |
| <span>Your data is encrypted and secure</span> |
| </div> |
| </div> |
| <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-8 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-colors shadow-lg"> |
| <i data-feather="zap" class="w-5 h-5 mr-2 inline"></i> |
| Start AutoApplying |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.service-card').forEach(card => { |
| card.addEventListener('click', (e) => { |
| if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'LABEL') { |
| const checkbox = card.querySelector('input[type="checkbox"]'); |
| if (checkbox) { |
| checkbox.checked = !checkbox.checked; |
| card.classList.toggle('border-blue-500', checkbox.checked); |
| card.classList.toggle('bg-blue-50', checkbox.checked); |
| } |
| } |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
