| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AutoDetect Damage Assessment</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> |
| .hero-bg { |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .upload-area { |
| border: 2px dashed #ccc; |
| transition: all 0.3s; |
| } |
| |
| .upload-area:hover { |
| border-color: #3b82f6; |
| background-color: #f8fafc; |
| } |
| |
| .damage-highlight { |
| position: relative; |
| } |
| |
| .damage-highlight::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(239, 68, 68, 0.3); |
| border: 2px solid rgba(239, 68, 68, 0.8); |
| border-radius: 0.5rem; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| |
| .animate-pulse { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <nav class="bg-white shadow-md sticky top-0 z-50"> |
| <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"> |
| <a href="#" class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-car-crash text-blue-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">AutoDetect</span> |
| </a> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-blue-500 text-sm font-medium">Home</a> |
| <a href="#how-it-works" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">How It Works</a> |
| <a href="#features" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Features</a> |
| <a href="#technologies" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Technologies</a> |
| <a href="contact.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Contact</a> |
| <a href="detect.html" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Detect Now</a> |
| <a href="admin.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Admin</a> |
| </div> |
| <div class="-mr-2 flex items-center md: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-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hidden md:hidden" id="mobile-menu"> |
| <div class="pt-2 pb-3 space-y-1"> |
| <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
| <a href="#how-it-works" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">How It Works</a> |
| <a href="#features" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> |
| <a href="#technologies" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Technologies</a> |
| <a href="contact.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Contact</a> |
| <a href="detect.html" class="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Admin</a> |
| <div class="mt-4 pl-3"> |
| <a href="detect.html" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-blue-600 hover:bg-blue-700">Detect Now</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero-bg text-white py-20 md:py-32"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Automated Car Damage Assessment</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Revolutionizing vehicle inspections with AI-powered damage detection and assessment using YOLOv9 and OCR technologies.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="detect.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md text-lg font-semibold">Detect Now</a> |
| <a href="#how-it-works" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-3 rounded-md text-lg font-semibold">Learn More</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Solving Real-World Problems</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Traditional car damage assessment is time-consuming, subjective, and prone to errors. Our solution addresses these challenges head-on.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-clock text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Slow Manual Inspections</h3> |
| <p class="text-gray-600">Reduce inspection time from hours to seconds with automated damage detection and assessment.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-money-bill-wave text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Repair Cost Disputes</h3> |
| <p class="text-gray-600">Objective damage assessment eliminates disagreements between repair shops and insurance companies.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-user-secret text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Insurance Fraud Prevention</h3> |
| <p class="text-gray-600">Detect inconsistencies and potential fraud with detailed damage reports and historical data analysis.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="how-it-works" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">How It Works</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Our three-step process makes damage assessment quick, accurate, and hassle-free.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="text-center"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <span class="text-blue-600 text-2xl font-bold">1</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Upload Images</h3> |
| <p class="text-gray-600">Simply upload clear photos of your vehicle from multiple angles.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <span class="text-blue-600 text-2xl font-bold">2</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">AI Processing</h3> |
| <p class="text-gray-600">Our YOLOv9 model analyzes images to detect and classify damage.</p> |
| </div> |
| |
| <div class="text-center"> |
| <div class="bg-blue-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <span class="text-blue-600 text-2xl font-bold">3</span> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Get Results</h3> |
| <p class="text-gray-600">Receive a detailed report with damage locations, severity, and repair estimates.</p> |
| </div> |
| </div> |
| |
| <div class="mt-16 bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">See It In Action</h3> |
| <p class="text-gray-600 mb-6">Our advanced computer vision system can identify various types of damage with remarkable accuracy, even in complex scenarios.</p> |
| <a href="detect.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> |
| Try Demo |
| <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| <div class="md:w-1/2 relative"> |
| <div class="border rounded-lg overflow-hidden"> |
| <img src="https://images.unsplash.com/photo-1609525310212-9f1e707aab0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Car damage detection example" class="w-full h-auto"> |
| <div class="absolute top-1/4 left-1/4 w-1/3 h-1/3 damage-highlight"></div> |
| <div class="absolute top-2/3 left-1/3 w-1/4 h-1/4 damage-highlight"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Key Features</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Comprehensive damage assessment powered by cutting-edge AI technology.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-bolt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Instant Detection</h3> |
| <p class="text-gray-600">Get immediate results with our optimized YOLOv9 model running on powerful GPU servers.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-car text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Vehicle Details Extraction</h3> |
| <p class="text-gray-600">Automatically extract make, model, year, and color from license plates and VIN numbers.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-search-dollar text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Damage Severity Analysis</h3> |
| <p class="text-gray-600">Classify damage by severity (minor, moderate, severe) for accurate repair estimates.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-file-invoice-dollar text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Repair Cost Estimation</h3> |
| <p class="text-gray-600">Get approximate repair costs based on damage type, severity, and regional labor rates.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-history text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Historical Comparison</h3> |
| <p class="text-gray-600">Compare current damage with previous reports to detect recurring issues or fraud attempts.</p> |
| </div> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> |
| <div class="text-blue-600 mb-4"> |
| <i class="fas fa-mobile-alt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Mobile Friendly</h3> |
| <p class="text-gray-600">Capture and upload images directly from your smartphone for on-the-spot assessments.</p> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-blue-50 p-6 rounded-lg"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-2/3 mb-6 md:mb-0 md:pr-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Supported Damage Types</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span class="text-gray-700">Dents</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span class="text-gray-700">Scratches</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span class="text-gray-700">Paint Damage</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span class="text-gray-700">Broken Glass</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span class="text-gray-700">Structural Damage</span> |
| </div> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span class="text-gray-700">Rust/Corrosion</span> |
| </div> |
| </div> |
| </div> |
| <div class="md:w-1/3 text-center"> |
| <div class="bg-blue-100 text-blue-800 p-4 rounded-lg inline-block"> |
| <i class="fas fa-shield-alt text-4xl mb-2"></i> |
| <p class="font-bold">95% Accuracy</p> |
| <p class="text-sm">in damage detection</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="technologies" class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Powered By Advanced Technologies</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Our solution leverages cutting-edge AI and computer vision technologies for unparalleled accuracy.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| <div class="bg-white p-6 rounded-lg shadow-sm flex flex-col items-center text-center"> |
| <div class="bg-gray-100 p-4 rounded-full mb-4"> |
| <i class="fas fa-robot text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">YOLOv9</h3> |
| <p class="text-gray-600">State-of-the-art object detection model for real-time damage identification.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm flex flex-col items-center text-center"> |
| <div class="bg-gray-100 p-4 rounded-full mb-4"> |
| <i class="fas fa-brain text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">PyTorch</h3> |
| <p class="text-gray-600">Powerful deep learning framework for model training and inference.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm flex flex-col items-center text-center"> |
| <div class="bg-gray-100 p-4 rounded-full mb-4"> |
| <i class="fas fa-font text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">OCR</h3> |
| <p class="text-gray-600">Optical Character Recognition for extracting vehicle details from images.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-lg shadow-sm flex flex-col items-center text-center"> |
| <div class="bg-gray-100 p-4 rounded-full mb-4"> |
| <i class="fas fa-server text-3xl text-blue-600"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">Flask</h3> |
| <p class="text-gray-600">Lightweight Python web framework for efficient API development.</p> |
| </div> |
| </div> |
| |
| <div class="mt-12 bg-white p-6 rounded-lg shadow-sm"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8"> |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Technical Architecture</h3> |
| <p class="text-gray-600 mb-4">Our system is built on a robust architecture that ensures scalability, reliability, and security.</p> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">GPU-accelerated inference for real-time processing</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">RESTful API for seamless integration with other systems</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">Secure user authentication and data encryption</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">Cloud-based deployment for high availability</span> |
| </li> |
| </ul> |
| </div> |
| <div class="md:w-1/2"> |
| <div class="bg-gray-100 p-4 rounded-lg"> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Frontend</div> |
| <div class="text-gray-500 text-sm">HTML/CSS/JavaScript</div> |
| </div> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Backend</div> |
| <div class="text-gray-500 text-sm">Python Flask</div> |
| </div> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="bg-blue-600 text-white px-3 py-1 rounded text-sm">AI Model</div> |
| <div class="text-gray-500 text-sm">YOLOv9 (PyTorch)</div> |
| </div> |
| <div class="flex justify-between items-center mb-4"> |
| <div class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Database</div> |
| <div class="text-gray-500 text-sm">PostgreSQL</div> |
| </div> |
| <div class="flex justify-between items-center"> |
| <div class="bg-blue-600 text-white px-3 py-1 rounded text-sm">Deployment</div> |
| <div class="text-gray-500 text-sm">Docker + AWS</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-blue-600 text-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Ready to Experience Automated Damage Assessment?</h2> |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join insurance companies, repair shops, and vehicle owners who are revolutionizing their damage assessment processes.</p> |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> |
| <a href="detect.html" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-3 rounded-md text-lg font-semibold">Try It Now</a> |
| <a href="contact.html" class="bg-blue-700 hover:bg-blue-800 text-white px-8 py-3 rounded-md text-lg font-semibold">Contact Sales</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-12 pb-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold mb-4">AutoDetect</h3> |
| <p class="text-gray-400">Advanced AI-powered vehicle damage assessment system for insurance, repair, and personal use.</p> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
| <li><a href="#how-it-works" class="text-gray-400 hover:text-white">How It Works</a></li> |
| <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li> |
| <li><a href="#technologies" class="text-gray-400 hover:text-white">Technologies</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold mb-4">Contact</h3> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> |
| <span class="text-gray-400">support@autodetect.ai</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt text-gray-400 mr-2"></i> |
| <span class="text-gray-400">+1 (555) 123-4567</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> |
| <span class="text-gray-400">123 AI Street, Tech City</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 AutoDetect. All rights reserved.</p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-github"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="detect-page" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto"> |
| <div class="min-h-screen"> |
| <nav class="bg-white shadow-md"> |
| <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"> |
| <a href="#" class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-car-crash text-blue-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">AutoDetect</span> |
| </a> |
| </div> |
| <div class="flex items-center"> |
| <button id="close-detect" class="text-gray-500 hover:text-gray-900"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <h1 class="text-3xl font-bold text-gray-900 mb-8">Damage Detection</h1> |
| |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div> |
| <div class="upload-area rounded-lg p-8 text-center mb-6 cursor-pointer" id="upload-container"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4"></i> |
| <p class="text-lg text-gray-600 mb-2">Drag & drop car images here</p> |
| <p class="text-sm text-gray-500 mb-4">or</p> |
| <label for="file-upload" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md text-sm font-medium cursor-pointer"> |
| Browse Files |
| </label> |
| <input id="file-upload" type="file" class="hidden" accept="image/*" multiple> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg mb-6 hidden" id="selected-files"> |
| <h3 class="font-medium text-gray-900 mb-2">Selected Files</h3> |
| <div class="space-y-2" id="file-list"></div> |
| </div> |
| |
| <div class="bg-gray-50 p-4 rounded-lg"> |
| <h3 class="font-medium text-gray-900 mb-3">Detection Settings</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Damage Sensitivity</label> |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
| <option>Standard</option> |
| <option>High (more sensitive)</option> |
| <option>Low (less sensitive)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Report Detail Level</label> |
| <select class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
| <option>Basic</option> |
| <option>Detailed</option> |
| <option>Technical</option> |
| </select> |
| </div> |
| <div class="flex items-center"> |
| <input id="include-estimate" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> |
| <label for="include-estimate" class="ml-2 block text-sm text-gray-700">Include repair cost estimate</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="bg-gray-50 rounded-lg p-6 mb-6 hidden" id="results-container"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-semibold text-gray-900">Detection Results</h2> |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Export Report</button> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="relative mb-4"> |
| <img src="https://images.unsplash.com/photo-1609525310212-9f1e707aab0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Detected damage" class="w-full rounded-lg"> |
| <div class="absolute top-1/4 left-1/4 w-1/3 h-1/3 damage-highlight"></div> |
| <div class="absolute top-2/3 left-1/3 w-1/4 h-1/4 damage-highlight"></div> |
| </div> |
| |
| <div class="grid grid-cols-3 gap-2 text-center mb-4"> |
| <div class="bg-red-100 text-red-800 p-2 rounded"> |
| <p class="font-bold">2</p> |
| <p class="text-xs">Damage Areas</p> |
| </div> |
| <div class="bg-yellow-100 text-yellow-800 p-2 rounded"> |
| <p class="font-bold">Moderate</p> |
| <p class="text-xs">Severity</p> |
| </div> |
| <div class="bg-blue-100 text-blue-800 p-2 rounded"> |
| <p class="font-bold">$1,200</p> |
| <p class="text-xs">Est. Repair Cost</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-900 mb-2">Vehicle Details</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <p class="text-sm text-gray-500">Make</p> |
| <p class="font-medium">Toyota</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Model</p> |
| <p class="font-medium">Camry</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Year</p> |
| <p class="font-medium">2020</p> |
| </div> |
| <div> |
| <p class="text-sm text-gray-500">Color</p> |
| <p class="font-medium">Silver</p> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-medium text-gray-900 mb-2">Damage Report</h3> |
| <div class="space-y-3"> |
| <div class="border-l-4 border-red-500 pl-3 py-1"> |
| <div class="flex justify-between"> |
| <p class="font-medium">Front right fender dent</p> |
| <p class="text-sm text-red-600">Severe</p> |
| </div> |
| <p class="text-sm text-gray-600">Approx. 15cm diameter dent with paint damage</p> |
| </div> |
| <div class="border-l-4 border-yellow-500 pl-3 py-1"> |
| <div class="flex justify-between"> |
| <p class="font-medium">Rear door scratch</p> |
| <p class="text-sm text-yellow-600">Moderate</p> |
| </div> |
| <p class="text-sm text-gray-600">30cm long scratch, down to primer layer</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-50 rounded-lg p-8 text-center" id="empty-results"> |
| <i class="fas fa-car text-4xl text-gray-300 mb-4"></i> |
| <p class="text-gray-500">Upload car images to begin damage detection analysis</p> |
| </div> |
| |
| <button id="analyze-button" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md text-lg font-medium mt-6 hidden"> |
| <i class="fas fa-search mr-2"></i> Analyze Images |
| </button> |
| |
| <div class="bg-blue-50 text-blue-800 p-4 rounded-lg mt-6 hidden" id="processing-message"> |
| <div class="flex items-center"> |
| <div class="animate-pulse mr-3"> |
| <i class="fas fa-circle-notch fa-spin"></i> |
| </div> |
| <div> |
| <p class="font-medium">Processing images</p> |
| <p class="text-sm">This may take a few moments...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="contact-page" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto"> |
| <div class="min-h-screen"> |
| <nav class="bg-white shadow-md"> |
| <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"> |
| <a href="#" class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-car-crash text-blue-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900">AutoDetect</span> |
| </a> |
| </div> |
| <div class="flex items-center"> |
| <button id="close-contact" class="text-gray-500 hover:text-gray-900"> |
| <i class="fas fa-times text-2xl"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="text-center mb-12"> |
| <h1 class="text-3xl font-bold text-gray-900 mb-4">Contact Us</h1> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto">Have questions or need support? Fill out the form below and our team will get back to you as soon as possible.</p> |
| </div> |
| |
| <div class="max-w-3xl mx-auto"> |
| <div class="bg-white shadow rounded-lg overflow-hidden"> |
| <div class="p-6"> |
| <form> |
| <div class="grid grid-cols-1 gap-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
| <input type="text" id="name" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
| <input type="email" id="email" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
| </div> |
| </div> |
| |
| <div> |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
| <input type="text" id="subject" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> |
| </div> |
| |
| <div> |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
| <textarea id="message" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea> |
| </div> |
| |
| <div class="flex items-center"> |
| <input id="subscribe" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"> |
| <label for="subscribe" class="ml-2 block text-sm text-gray-700">Subscribe to our newsletter</label> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-md text-lg font-medium"> |
| Send Message |
| </button> |
| </div> |
| </form> |
| </div> |
| |
| <div class="bg-gray-50 px-6 py-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-sm font-medium text-gray-900">Need immediate assistance?</h3> |
| <p class="text-sm text-gray-500">Call us at +1 (555) 123-4567</p> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-gray-500"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="admin-page" class="hidden fixed inset-0 bg-white z-50 overflow-y-auto"> |
| <div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-md w-full space-y-8"> |
| <div> |
| <a href="#" class="flex justify-center"> |
| <i class="fas fa-car-crash text-blue-600 text-4xl"></i> |
| </a> |
| <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> |
| Admin Portal |
| </h2> |
| <p class="mt-2 text-center text-sm text-gray-600"> |
| Sign in to access the administration dashboard |
| </p> |
| </div> |
| |
| <div class="bg-white shadow rounded-lg overflow-hidden"> |
| <div class="p-6"> |
| <form class="mt-8 space-y-6"> |
| <input type="hidden" name="remember" value="true"> |
| <div class="rounded-md shadow-sm space-y-4"> |
| <div> |
| <label for="email-address" class="sr-only">Email address</label> |
| <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" placeholder="Email address"> |
| </div> |
| <div> |
| <label for="password" class="sr-only">Password</label> |
| <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" placeholder="Password"> |
| </div> |
| </div> |
|
|
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> |
| <label for="remember-me" class="ml-2 block text-sm text-gray-900"> |
| Remember me |
| </label> |
| </div> |
|
|
| <div class="text-sm"> |
| <a href="#" class="font-medium text-blue-600 hover:text-blue-500"> |
| Forgot your password? |
| </a> |
| </div> |
| </div> |
|
|
| <div> |
| <button type="submit" class="group relative w-full flex justify-center py-3 px-4 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"> |
| <span class="absolute left-0 inset-y-0 flex items-center pl-3"> |
| <i class="fas fa-lock"></i> |
| </span> |
| Sign in |
| </button> |
| </div> |
| </form> |
| </div> |
| |
| <div class="bg-gray-50 px-6 py-4"> |
| <div class="text-center text-sm text-gray-500"> |
| <p>By signing in, you agree to our <a href="#" class="text-blue-600 hover:text-blue-500">Terms of Service</a> and <a href="#" class="text-blue-600 hover:text-blue-500">Privacy Policy</a>.</p> |
| </div> |
| </div> |
| </div> |
| |
| <button id="close-admin" class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> |
| <i class="fas fa-arrow-left mr-2"></i> Back to Home |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('[href="detect.html"]').forEach(button => { |
| button.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.getElementById('detect-page').classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| }); |
| |
| |
| document.getElementById('close-detect').addEventListener('click', function() { |
| document.getElementById('detect-page').classList.add('hidden'); |
| document.body.style.overflow = 'auto'; |
| }); |
| |
| |
| document.querySelectorAll('[href="contact.html"]').forEach(button => { |
| button.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.getElementById('contact-page').classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| }); |
| |
| |
| document.getElementById('close-contact').addEventListener('click', function() { |
| document.getElementById('contact-page').classList.add('hidden'); |
| document.body.style.overflow = 'auto'; |
| }); |
| |
| |
| document.querySelectorAll('[href="admin.html"]').forEach(button => { |
| button.addEventListener('click', function(e) { |
| e.preventDefault(); |
| document.getElementById('admin-page').classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| }); |
| |
| |
| document.getElementById('close-admin').addEventListener('click', function() { |
| document.getElementById('admin-page').classList.add('hidden'); |
| document.body.style.overflow = 'auto'; |
| }); |
| |
| |
| const fileUpload = document.getElementById('file-upload'); |
| const uploadContainer = document.getElementById('upload-container'); |
| const selectedFiles = document.getElementById('selected-files'); |
| const fileList = document.getElementById('file-list'); |
| const analyzeButton = document.getElementById('analyze-button'); |
| const emptyResults = document.getElementById('empty-results'); |
| const resultsContainer = document.getElementById('results-container'); |
| const processingMessage = document.getElementById('processing-message'); |
| |
| |
| uploadContainer.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| uploadContainer.classList.add('border-blue-500', 'bg-blue-50'); |
| }); |
| |
| uploadContainer.addEventListener('dragleave', () => { |
| uploadContainer.classList.remove('border-blue-500', 'bg-blue-50'); |
| }); |
| |
| uploadContainer.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| uploadContainer.classList.remove('border-blue-500', 'bg-blue-50'); |
| handleFiles(e.dataTransfer.files); |
| }); |
| |
| |
| fileUpload.addEventListener('change', () => { |
| if (fileUpload.files.length > 0) { |
| handleFiles(fileUpload.files); |
| } |
| }); |
| |
| |
| function handleFiles(files) { |
| fileList.innerHTML = ''; |
| |
| for (let i = 0; i < files.length; i++) { |
| const file = files[i]; |
| |
| if (!file.type.match('image.*')) continue; |
| |
| const reader = new FileReader(); |
| |
| reader.onload = (function(theFile) { |
| return function(e) { |
| const div = document.createElement('div'); |
| div.className = 'flex items-center justify-between p-2 bg-white rounded border'; |
| |
| const fileInfo = document.createElement('div'); |
| fileInfo.className = 'flex items-center'; |
| |
| const img = document.createElement('img'); |
| img.src = e.target.result; |
| img.className = 'w-10 h-10 object-cover rounded mr-3'; |
| |
| const fileName = document.createElement('span'); |
| fileName.className = 'text-sm text-gray-700 truncate'; |
| fileName.textContent = theFile.name; |
| |
| fileInfo.appendChild(img); |
| fileInfo.appendChild(fileName); |
| |
| const removeBtn = document.createElement('button'); |
| removeBtn.className = 'text-red-500 hover:text-red-700'; |
| removeBtn.innerHTML = '<i class="fas fa-times"></i>'; |
| removeBtn.onclick = function() { |
| div.remove(); |
| if (fileList.children.length === 0) { |
| selectedFiles.classList.add('hidden'); |
| analyzeButton.classList.add('hidden'); |
| emptyResults.classList.remove('hidden'); |
| resultsContainer.classList.add('hidden'); |
| } |
| }; |
| |
| div.appendChild(fileInfo); |
| div.appendChild(removeBtn); |
| fileList.appendChild(div); |
| }; |
| })(file); |
| |
| reader.readAsDataURL(file); |
| } |
| |
| if (fileList.children.length > 0) { |
| selectedFiles.classList.remove('hidden'); |
| analyzeButton.classList.remove('hidden'); |
| } else { |
| selectedFiles.classList.add('hidden'); |
| analyzeButton.classList.add('hidden'); |
| } |
| } |
| |
| |
| analyzeButton.addEventListener('click', function() { |
| processingMessage.classList.remove('hidden'); |
| analyzeButton.classList.add('hidden'); |
| |
| |
| setTimeout(function() { |
| processingMessage.classList.add('hidden'); |
| emptyResults.classList.add('hidden'); |
| resultsContainer.classList.remove('hidden'); |
| }, 3000); |
| }); |
| </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=harshk04/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
