Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DoNotPay - The World's First Robot Lawyer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .chat-bubble { | |
| border-radius: 20px 20px 20px 0; | |
| } | |
| .user-bubble { | |
| border-radius: 20px 20px 0 20px; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .document-preview { | |
| border: 2px dashed #a777e3; | |
| background-color: #f9fafb; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-robot text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">DoNotPay</span> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-purple-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Services</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Success Stories</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Sign In</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Fight Corporations, Beat Bureaucracy | |
| </h1> | |
| <p class="mt-6 max-w-3xl mx-auto text-xl"> | |
| The world's first robot lawyer that helps you fight parking tickets, sue robocallers, and more - all for free. | |
| </p> | |
| <div class="mt-10 flex justify-center space-x-4"> | |
| <a href="#" class="bg-white text-purple-600 px-6 py-3 rounded-md text-base font-medium hover:bg-gray-100 transition duration-150 ease-in-out"> | |
| Get Started | |
| </a> | |
| <a href="#" class="bg-purple-800 text-white px-6 py-3 rounded-md text-base font-medium hover:bg-purple-700 transition duration-150 ease-in-out"> | |
| Watch Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Services</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What can DoNotPay help you with? | |
| </p> | |
| </div> | |
| <div class="mt-10"> | |
| <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm transition duration-150 ease-in-out card-hover"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-car"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Fight Parking Tickets</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Automatically generate appeal letters to fight unfair parking tickets with a 70% success rate. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm transition duration-150 ease-in-out card-hover"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-phone-slash"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Sue Robocallers</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Get compensation from illegal robocalls by automatically generating small claims court filings. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm transition duration-150 ease-in-out card-hover"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Housing Issues</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Fight evictions, security deposit disputes, and get repairs done by your landlord. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm transition duration-150 ease-in-out card-hover"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-credit-card"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Cancel Subscriptions</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Automatically generate cancellation letters for gym memberships and other difficult-to-cancel services. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm transition duration-150 ease-in-out card-hover"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-plane"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Flight Compensation</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Get compensation for delayed or canceled flights under EU and US regulations. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm transition duration-150 ease-in-out card-hover"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <div class="mt-5"> | |
| <h3 class="text-lg font-medium text-gray-900">Small Claims Court</h3> | |
| <p class="mt-2 text-base text-gray-500"> | |
| Automatically generate court filings to sue companies in small claims court without a lawyer. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Chat Section --> | |
| <div class="bg-gray-100 py-16"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| How it works | |
| </h2> | |
| <p class="mt-4 text-lg text-gray-600"> | |
| Our AI-powered chatbot guides you through the process step by step. | |
| </p> | |
| </div> | |
| <div class="mt-10 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 bg-purple-600 text-white"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-purple-300 flex items-center justify-center"> | |
| <i class="fas fa-robot text-purple-700"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium">DoNotPay Bot</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 h-96 overflow-y-auto" id="chat-container"> | |
| <!-- Chat messages will be inserted here by JavaScript --> | |
| </div> | |
| <div class="border-t border-gray-200 p-4 bg-gray-50"> | |
| <div class="flex rounded-md shadow-sm"> | |
| <input type="text" id="chat-input" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md border-gray-300 focus:ring-purple-500 focus:border-purple-500 sm:text-sm" placeholder="Type your message..."> | |
| <button onclick="sendMessage()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> | |
| Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Generator (Hidden by default) --> | |
| <div id="document-generator" class="hidden bg-white py-16"> | |
| <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Your Generated Document | |
| </h2> | |
| <p class="mt-4 text-lg text-gray-600"> | |
| Review and download your automatically generated legal document | |
| </p> | |
| </div> | |
| <div class="mt-10 document-preview p-6 rounded-lg"> | |
| <div class="text-right mb-4"> | |
| <button onclick="downloadDocument()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| </div> | |
| <div id="document-content" class="p-4 bg-white"> | |
| <!-- Document content will be inserted here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-purple-600 font-semibold tracking-wide uppercase">Success Stories</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| What our users say | |
| </p> | |
| </div> | |
| <div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Sarah J.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 italic"> | |
| "I used DoNotPay to fight an unfair parking ticket. The bot generated a perfect appeal letter and the ticket was dismissed within a week. Saved me $120!" | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Michael T.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 italic"> | |
| "After months of trying to cancel my gym membership, DoNotPay generated a cancellation letter that worked immediately. No more $40/month charges!" | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="text-sm font-bold text-gray-900">Lisa M.</h4> | |
| <div class="flex mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-600 italic"> | |
| "I sued a robocaller using DoNotPay's automated small claims process and won $1,500! The whole process took less than 15 minutes." | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> | |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> | |
| <span class="block">Ready to fight back?</span> | |
| <span class="block text-purple-200">Join over 1 million users today.</span> | |
| </h2> | |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> | |
| <div class="inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-purple-600 bg-white hover:bg-gray-50"> | |
| Get Started | |
| </a> | |
| </div> | |
| <div class="ml-3 inline-flex rounded-md shadow"> | |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-purple-800 hover:bg-purple-700"> | |
| Learn More | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Disclaimers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Support</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Help Center</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Contact Us</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Status</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-4"> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Twitter</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Facebook</a></li> | |
| <li><a href="#" class="text-base text-gray-400 hover:text-white">Instagram</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <span class="sr-only">Twitter</span> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <span class="sr-only">Facebook</span> | |
| <i class="fab fa-facebook text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <span class="sr-only">Instagram</span> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 DoNotPay, Inc. All rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Chatbot functionality | |
| const chatMessages = [ | |
| {sender: 'bot', text: "Hi there! I'm the DoNotPay bot. What legal issue can I help you with today?", delay: 1000}, | |
| {sender: 'bot', text: "I can help with parking tickets, robocallers, housing issues, flight compensation, and more!", delay: 2000}, | |
| {sender: 'bot', text: "Just type what you need help with and I'll guide you through the process.", delay: 3000} | |
| ]; | |
| let currentMessage = 0; | |
| const chatContainer = document.getElementById('chat-container'); | |
| let currentCaseType = ''; | |
| let userDetails = {}; | |
| let documentGenerated = false; | |
| function displayMessages() { | |
| if (currentMessage < chatMessages.length) { | |
| const message = chatMessages[currentMessage]; | |
| setTimeout(() => { | |
| addMessage(message.sender, message.text); | |
| currentMessage++; | |
| displayMessages(); | |
| }, message.delay); | |
| } | |
| } | |
| function addMessage(sender, text) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `mb-4 flex ${sender === 'bot' ? 'justify-start' : 'justify-end'} fade-in`; | |
| const bubbleDiv = document.createElement('div'); | |
| bubbleDiv.className = sender === 'bot' | |
| ? 'max-w-xs lg:max-w-md px-4 py-2 rounded-lg bg-gray-200 text-gray-800 chat-bubble' | |
| : 'max-w-xs lg:max-w-md px-4 py-2 rounded-lg bg-purple-600 text-white user-bubble'; | |
| bubbleDiv.textContent = text; | |
| messageDiv.appendChild(bubbleDiv); | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function generateDocument() { | |
| const docContent = document.getElementById('document-content'); | |
| let documentText = ''; | |
| switch(currentCaseType) { | |
| case 'parking': | |
| documentText = ` | |
| <h3 class="text-xl font-bold mb-4">Parking Ticket Appeal Letter</h3> | |
| <p class="mb-2">${new Date().toLocaleDateString()}</p> | |
| <p class="mb-2">Parking Violations Bureau</p> | |
| <p class="mb-2">City of ${userDetails.city || '[Your City]'}</p> | |
| <p class="mb-4">RE: Parking Ticket #${userDetails.ticketNumber || '[Ticket Number]'}</p> | |
| <p class="mb-4">Dear Parking Violations Bureau,</p> | |
| <p class="mb-4">I am writing to formally appeal the parking ticket I received on ${userDetails.ticketDate || '[Date]'} at ${userDetails.ticketLocation || '[Location]'}.</p> | |
| <p class="mb-4">The ticket was issued in error because:</p> | |
| <ul class="list-disc pl-5 mb-4"> | |
| <li>The parking signs were unclear or missing</li> | |
| <li>I had a valid parking permit displayed</li> | |
| <li>The parking meter was malfunctioning</li> | |
| </ul> | |
| <p class="mb-4">I have attached photographic evidence supporting my claim. Please dismiss this ticket at your earliest convenience.</p> | |
| <p class="mb-4">Sincerely,</p> | |
| <p>${userDetails.name || '[Your Name]'}</p> | |
| <p>${userDetails.address || '[Your Address]'}</p> | |
| <p>${userDetails.email || '[Your Email]'}</p> | |
| `; | |
| break; | |
| case 'robocall': | |
| documentText = ` | |
| <h3 class="text-xl font-bold mb-4">Small Claims Court Filing Against Robocaller</h3> | |
| <p class="mb-2">${new Date().toLocaleDateString()}</p> | |
| <p class="mb-2">Small Claims Court</p> | |
| <p class="mb-2">${userDetails.courtLocation || '[Your County]'} County</p> | |
| <p class="mb-4">Plaintiff: ${userDetails.name || '[Your Name]'}</p> | |
| <p class="mb-4">vs.</p> | |
| <p class="mb-4">Defendant: ${userDetails.callerName || '[Robocaller Company]'}</p> | |
| <h4 class="font-bold mb-2">Complaint:</h4> | |
| <p class="mb-4">I received an illegal robocall from ${userDetails.callerName || '[Robocaller Company]'} on ${userDetails.callDate || '[Date]'} at ${userDetails.callTime || '[Time]'}. The call violated the Telephone Consumer Protection Act (TCPA) because:</p> | |
| <ul class="list-disc pl-5 mb-4"> | |
| <li>I did not provide consent to receive automated calls</li> | |
| <li>The call was made using an automated dialing system</li> | |
| <li>The call was a sales call or contained a prerecorded message</li> | |
| </ul> | |
| <p class="mb-4">I am seeking $1,500 in statutory damages for this violation of the TCPA.</p> | |
| <h4 class="font-bold mb-2">Evidence:</h4> | |
| <ul class="list-disc pl-5 mb-4"> | |
| <li>Call log showing the phone number ${userDetails.callerNumber || '[Phone Number]'}</li> | |
| <li>Screenshot of call details</li> | |
| <li>Recording of the call (attached)</li> | |
| </ul> | |
| <p class="mb-4">Respectfully submitted,</p> | |
| <p>${userDetails.name || '[Your Name]'}</p> | |
| `; | |
| break; | |
| case 'subscription': | |
| documentText = ` | |
| <h3 class="text-xl font-bold mb-4">Subscription Cancellation Letter</h3> | |
| <p class="mb-2">${new Date().toLocaleDateString()}</p> | |
| <p class="mb-2">Customer Service Department</p> | |
| <p class="mb-2">${userDetails.companyName || '[Company Name]'}</p> | |
| <p class="mb-4">RE: Cancellation of ${userDetails.serviceName || '[Service Name]'} (Account #${userDetails.accountNumber || '[Your Account Number]'})</p> | |
| <p class="mb-4">Dear Customer Service,</p> | |
| <p class="mb-4">I am writing to formally cancel my ${userDetails.serviceName || '[Service Name]'} subscription effective immediately.</p> | |
| <p class="mb-4">My account details are:</p> | |
| <ul class="list-disc pl-5 mb-4"> | |
| <li>Full Name: ${userDetails.name || '[Your Name]'}</li> | |
| <li>Email: ${userDetails.email || '[Your Email]'}</li> | |
| <li>Account Number: ${userDetails.accountNumber || '[Your Account Number]'}</li> | |
| <li>Last 4 digits of payment card: ${userDetails.cardLast4 || '[Last 4]'}</li> | |
| </ul> | |
| <p class="mb-4">Per your cancellation policy, I request that you:</p> | |
| <ol class="list-decimal pl-5 mb-4"> | |
| <li>Immediately cancel my subscription and stop all future charges</li> | |
| <li>Provide written confirmation of cancellation</li> | |
| <li>Refund any unauthorized charges made after this notice</li> | |
| </ol> | |
| <p class="mb-4">Failure to comply with this request may result in legal action. I have retained a copy of this letter for my records.</p> | |
| <p class="mb-4">Sincerely,</p> | |
| <p>${userDetails.name || '[Your Name]'}</p> | |
| `; | |
| break; | |
| default: | |
| documentText = `<p>Document generation error. Please try again.</p>`; | |
| } | |
| docContent.innerHTML = documentText; | |
| document.getElementById('document-generator').classList.remove('hidden'); | |
| documentGenerated = true; | |
| } | |
| function downloadDocument() { | |
| if (!documentGenerated) return; | |
| const element = document.createElement('a'); | |
| const text = document.getElementById('document-content').innerText; | |
| element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); | |
| element.setAttribute('download', `DoNotPay_${currentCaseType}_${new Date().toISOString().slice(0,10)}.txt`); | |
| element.style.display = 'none'; | |
| document.body.appendChild(element); | |
| element.click(); | |
| document.body.removeChild(element); | |
| } | |
| function processUserInput(message) { | |
| const lowerMessage = message.toLowerCase(); | |
| if (!currentCaseType) { | |
| if (lowerMessage.includes('parking') || lowerMessage.includes('ticket')) { | |
| currentCaseType = 'parking'; | |
| addMessage('bot', "I can help with parking tickets! First, what city issued the ticket?"); | |
| } | |
| else if (lowerMessage.includes('robocall') || lowerMessage.includes('spam call')) { | |
| currentCaseType = 'robocall'; | |
| addMessage('bot', "Let's sue those robocallers! What company or phone number was calling you?"); | |
| } | |
| else if (lowerMessage.includes('cancel') || lowerMessage.includes('subscription') || lowerMessage.includes('membership')) { | |
| currentCaseType = 'subscription'; | |
| addMessage('bot', "I'll help you cancel that subscription. What's the name of the company or service?"); | |
| } | |
| else { | |
| addMessage('bot', "I can help with several issues. Please specify if you need help with: parking tickets, robocallers, or subscription cancellations."); | |
| } | |
| } | |
| else { | |
| switch(currentCaseType) { | |
| case 'parking': | |
| if (!userDetails.city) { | |
| userDetails.city = message; | |
| addMessage('bot', `Got it, ${message}. What's your parking ticket number?`); | |
| } | |
| else if (!userDetails.ticketNumber) { | |
| userDetails.ticketNumber = message; | |
| addMessage('bot', `Ticket #${message}. When did you receive this ticket? (MM/DD/YYYY)`); | |
| } | |
| else if (!userDetails.ticketDate) { | |
| userDetails.ticketDate = message; | |
| addMessage('bot', `On ${message}. Where exactly was the ticket issued? (Street address)`); | |
| } | |
| else if (!userDetails.ticketLocation) { | |
| userDetails.ticketLocation = message; | |
| addMessage('bot', `At ${message}. Finally, what's your full name for the appeal letter?`); | |
| } | |
| else if (!userDetails.name) { | |
| userDetails.name = message; | |
| addMessage('bot', `Thanks, ${message}. Generating your parking ticket appeal letter now...`); | |
| setTimeout(() => { | |
| generateDocument(); | |
| addMessage('bot', "I've generated your appeal letter! You can review and download it above."); | |
| }, 2000); | |
| } | |
| break; | |
| case 'robocall': | |
| if (!userDetails.callerName && !userDetails.callerNumber) { | |
| if (message.match(/\d{10}/)) { | |
| userDetails.callerNumber = message; | |
| addMessage('bot', `Number ${message}. When did you receive this call? (MM/DD/YYYY)`); | |
| } else { | |
| userDetails.callerName = message; | |
| addMessage('bot', `${message}. Do you have their phone number?`); | |
| } | |
| } | |
| else if (!userDetails.callDate) { | |
| userDetails.callDate = message; | |
| addMessage('bot', `On ${message}. What time was the call?`); | |
| } | |
| else if (!userDetails.callTime) { | |
| userDetails.callTime = message; | |
| addMessage('bot', `At ${message}. What county are you in for court filing purposes?`); | |
| } | |
| else if (!userDetails.courtLocation) { | |
| userDetails.courtLocation = message; | |
| addMessage('bot', `${message} County. What's your full name for the court documents?`); | |
| } | |
| else if (!userDetails.name) { | |
| userDetails.name = message; | |
| addMessage('bot', `Thanks, ${message}. Generating your small claims court filing now...`); | |
| setTimeout(() => { | |
| generateDocument(); | |
| addMessage('bot', "Your court filing is ready! Review and download it above."); | |
| }, 2000); | |
| } | |
| break; | |
| case 'subscription': | |
| if (!userDetails.companyName) { | |
| userDetails.companyName = message; | |
| addMessage('bot', `Cancelling with ${message}. What's the name of the specific service?`); | |
| } | |
| else if (!userDetails.serviceName) { | |
| userDetails.serviceName = message; | |
| addMessage('bot', `${message}. What's your account number or email with them?`); | |
| } | |
| else if (!userDetails.accountNumber) { | |
| userDetails.accountNumber = message; | |
| addMessage('bot', `Account ${message}. What's your full name on the account?`); | |
| } | |
| else if (!userDetails.name) { | |
| userDetails.name = message; | |
| addMessage('bot', `Got it, ${message}. Finally, what's your email address for confirmation?`); | |
| } | |
| else if (!userDetails.email) { | |
| userDetails.email = message; | |
| addMessage('bot', `At ${message}. Generating your cancellation letter now...`); | |
| setTimeout(() => { | |
| generateDocument(); | |
| addMessage('bot', "Your cancellation letter is ready! Download and send it to the company."); | |
| }, 2000); | |
| } | |
| break; | |
| } | |
| } | |
| } | |
| function sendMessage() { | |
| const input = document.getElementById('chat-input'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| addMessage('user', message); | |
| input.value = ''; | |
| processUserInput(message); | |
| } | |
| } | |
| // Initialize chat | |
| document.addEventListener('DOMContentLoaded', () => { | |
| displayMessages(); | |
| // Allow pressing Enter to send message | |
| document.getElementById('chat-input').addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=HuggingFatties/donotpay" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |