index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Metascanner</title>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="icon" href="/assets/favicon.svg" type="image/x-icon">
    <!-- Google Fonts: Share Tech Mono -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Michroma&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/src/style.css">

</head>

<body>
    <!-- Preloader Start -->
    <div id="preloader">
        <div class="loader">
            <svg viewBox="0 0 80 80">
                <rect x="8" y="8" width="64" height="64"></rect>
            </svg>
        </div>
    </div>
    <!-- Preloader End -->

    <header class="navbar">
        <div class="container" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
            <a href="#" class="nav-logo">
                <div class="nav-logo-icon">
                    <i data-lucide="scan-qr-code"></i>
                </div>
                <div>METASCANNER</div>
            </a>
            <div class="menu-toggle" id="mobile-menu-toggle">
                <i data-lucide="menu"></i>
            </div>
            <nav class="nav-links">
                <a href="#features">_FEATURES</a>
                <a href="/contributors.html">_CONTRIBUTORS</a>
                <a href="#how-it-works">_PROCESS</a>
                <a href="https://app.metascanner.site/auth" class="btn">LAUNCH METASCANNER</a>
            </nav>
        </div>
    </header>

    <main>
        <!-- Hero Section -->
        <section id="hero" class="container reveal" style="transition-delay: 0.3s;">
            <div class="hero-content reveal">
                <h1 data-text="">FIND DATA BEHIND THE PIXELS</h1>
                <p>> Metascanner is a forensic-grade analysis tool that fuses deep metadata extraction with powerful AI content analysis.</p>
                <a href="https://app.metascanner.site/auth" class="btn pulse">UPLOAD & ANALYZE →</a>
            </div>
            <div class="dashboard-image-container reveal" style="transition-delay: 0.3s;">
                <svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" font-family="Share Tech Mono, monospace" font-size="12" fill="#00ff00">
                    <rect width="800" height="450" fill="#0A0A0A"/>
                    <rect x="1" y="1" width="798" height="448" fill="none" stroke="#00ff00" stroke-width="1"/>
                    <rect x="1" y="1" width="798" height="24" fill="#00ff00"/>
                    <text x="5" y="17" fill="#000000" font-weight="bold">METASCANNER ANALYZER ENGINE</text>
                    <text x="788" y="17" fill="#000000" font-weight="bold" text-anchor="end">[-][ ][X]</text>
                    <g transform="translate(10, 35)">
                        <rect x="0" y="0" width="780" height="400" fill="#001100" stroke="#00ff00" stroke-width="0.5"/>
                        <text x="5" y="15" class="terminal-text">GEOLOCATION ANALYSIS: GLOBAL OVERVIEW</text>
                        <g transform="translate(90, 00) scale(0.7)">
                            <path class="map-path" d="M300 150 L280 100 L250 80 L200 70 L150 80 L100 120 L80 180 L100 250 L150 300 L200 320 L250 300 L280 250 Z"/>
                            <path class="map-path" d="M200 350 L180 400 L150 450 L180 500 L220 520 L250 480 L230 400 Z"/>
                            <path class="map-path" d="M400 100 L420 80 L450 70 L480 80 L500 120 L480 150 L450 160 L420 140 Z"/>
                            <path class="map-path" d="M450 200 L480 250 L470 300 L450 350 L400 380 L350 370 L330 320 L350 250 Z"/>
                            <path class="map-path" d="M550 50 L600 70 L650 100 L700 150 L720 200 L700 250 L650 280 L600 270 L550 200 Z"/>
                            <path class="map-path" d="M650 350 L680 380 L670 420 L640 430 L610 400 L620 370 Z"/>
                        </g>
                        <line x1="0" y1="50" x2="780" y2="50" class="scan-line-h-b"/>
                        
                        <circle cx="210" cy="150" r="3" class="pulse-circle"/>
                        <circle cx="150" cy="280" r="3" class="pulse-circle" style="animation-delay: 0.5s;"/>
                        <circle cx="400" cy="100" r="3" class="pulse-circle" style="animation-delay: 1s;"/>
                        <circle cx="380" cy="220" r="3" class="pulse-circle" style="animation-delay: 1.5s;"/>
                        <circle cx="580" cy="150" r="3" class="pulse-circle" style="animation-delay: 2s;"/>
                        <circle cx="620" cy="300" r="3" class="pulse-circle" style="animation-delay: 2.5s;"/>
                        <text x="20" y="300" class="terminal-text">SYSTEM STATUS:</text>
                        <circle cx="25" cy="315" r="3" class="status-indicator"/>
                        <text x="40" y="320" class="terminal-text">CORE ONLINE</text>
                        <circle cx="25" cy="330" r="3" class="status-indicator" style="animation-delay: 0.2s;"/>
                        <text x="40" y="335" class="terminal-text">AI MODULE ACTIVE</text>
                        <circle cx="25" cy="345" r="3" class="status-indicator" style="animation-delay: 0.4s;"/>
                        <text x="40" y="350" class="terminal-text">NETWORK SECURE</text>
                        <text x="20" y="370" class="terminal-text">APP: METASCANNER</text>
                        <text x="20" y="385" class="terminal-text">USER: USERNAME666</text>
                    </g>
                </svg>
            </div>
        </section>

        <!-- ... (Rest of your sections: features, tech-stack, use-cases, etc.) ... -->
        <section id="features" class="container"><h2 class="reveal">A COMPLETE FORENSIC TOOLKIT</h2><div class="features-grid"><div class="feature-card reveal"><div class="icon"><i data-lucide="database-zap"></i></div><h3>Deep Metadata Extraction</h3><p>Extract and decipher comprehensive data sets including EXIF, IPTC, and XMP to reveal camera models, lens specifications, and edit history.</p></div><div class="feature-card reveal" style="transition-delay: 0.1s;"><div class="icon"><i data-lucide="map-pin"></i></div><h3>Precision Geolocation</h3><p>Pinpoint the exact location an image was captured. Visualize GPS coordinates on an interactive map to track origins and verify location claims.</p></div><div class="feature-card reveal" style="transition-delay: 0.2s;"><div class="icon"><i data-lucide="brain-circuit"></i></div><h3>Intelligent AI Analysis</h3><p>Our proprietary AI engine analyzes visual content to identify objects, scenes, and potential manipulations, providing unmatched contextual understanding.</p></div><div class="feature-card reveal" style="transition-delay: 0.3s;"><div class="icon"><i data-lucide="shield-check"></i></div><h3>Secure Analysis History</h3><p>Your analysis history is securely stored. Access previous sessions and compressed image previews at any time via your encrypted user dashboard.</p></div><div class="feature-card reveal" style="transition-delay: 0.4s;"><div class="icon"><i data-lucide="file-text" size="36"></i></div><h3>Comprehensive Reporting</h3><p>Generate detailed, shareable reports of your findings. Perfect for case files, journalistic verification, or personal archival purposes.</p></div><div class="feature-card reveal" style="transition-delay: 0.5s;"><div class="icon"><i data-lucide="lock" size="36"></i></div><h3>Secure & Anonymous</h3><p>Your analysis sessions are private. We operate on a zero-knowledge principle, ensuring your uploaded data is purged after every session.</p></div></div></section>
        
        <section id="tech-stack" class="container"><h2 class="reveal">System Architecture & Key Technologies</h2><div class="tech-grid-full"><div class="tech-card reveal"><img src="/assets/firebase.svg" alt="Firebase Logo"><h3>Firebase</h3><p>Powers our secure user authentication and stores your analysis history in a real-time Firestore database.</p></div><div class="tech-card reveal" style="transition-delay: 0.1s;"><img src="/assets/gemini.svg" alt="Google Gemini Logo"><h3>Google Gemini</h3><p>The advanced multimodal AI model that provides contextual visual analysis and descriptions for your images.</p></div><div class="tech-card reveal" style="transition-delay: 0.2s;"><img src="/assets/vite.svg" alt="Vite.js Logo"><h3>Vite.js</h3><p>Provides a lightning-fast development experience and bundles the application into a highly optimized production build.</p></div><div class="tech-card reveal" style="transition-delay: 0.3s;"><img src="/assets/leafletjs.png" alt="Leaflet.js Logo"><h3>Leaflet.js</h3><p>The engine behind our interactive, lightweight, and high-performance geolocation mapping.</p></div><div class="tech-card reveal" style="transition-delay: 0.4s;"><img src="/assets/opencage.svg" alt="OpenCage API Logo"><h3>OpenCage API</h3><p>Provides fast and reliable reverse geocoding to translate GPS coordinates into human-readable addresses.</p></div><div class="tech-card reveal" style="transition-delay: 0.5s;"><img src="/assets/exifr.png" alt="Exifr.js Logo"><h3>Exifr.js</h3><p>A high-performance parsing engine for rapidly extracting even the most complex metadata from any image file.</p></div></div></section>
        
        <section id="use-cases" class="container"><h2 class="reveal">USE CASES</h2><div class="use-case-grid"><div class="feature-card reveal"><div class="icon"><i data-lucide="newspaper"></i></div><h3>For the Investigative Journalist</h3><p>Verify the source and location of whistleblower photos. Uncover alterations in images provided by sources to ensure your story is accurate and defensible.</p></div><div class="feature-card reveal" style="transition-delay: 0.2s;"><div class="icon"><i data-lucide="fingerprint"></i></div><h3>For the Digital Forensics Analyst</h3><p>Establish a chain of custody for digital evidence. Extract crucial timestamps, device serial numbers, and GPS data for legal proceedings and case reports.</p></div><div class="feature-card reveal" style="transition-delay: 0.4s;"><div class="icon"><i data-lucide="shield-check"></i></div><h3>For the Security Researcher</h3><p>Analyze images for embedded malware or tracking information. Identify the software and versions used to create a file, exposing potential vulnerabilities.</p></div></div></section>
        
        <section id="how-it-works" class="container">
            <h2 class="reveal">How It Works</h2>

            <div class="steps-container">
                <div class="step-card reveal">
                    <div class="step-number">01</div>
                    <h3>Submit Your Image</h3>
                    <p>Securely upload your image file. Our platform accepts a wide range of formats and ensures your data is handled with strict confidentiality.</p>
                </div>

                <div class="step-card reveal" style="transition-delay: 0.2s;">
                    <div class="step-number">02</div>
                    <h3>Initiate Analysis</h3>
                    <p>Metascanner initiates a multi-layered analysis, cross-referencing metadata with our AI content evaluation. The process is swift and precise.</p>
                </div>

                <div class="step-card reveal" style="transition-delay: 0.4s;">
                    <div class="step-number">03</div>
                    <h3>Uncover the Report</h3>
                    <p>Receive and explore your detailed report. Navigate through interactive data points, maps, and AI-generated insights to uncover the full story.</p>
                </div>
            </div>
        </section>
        
        <section id="testimonials" class="container">
            <h2 class="reveal">Engineered for Accuracy. Trusted by Experts.</h2>
            <div class="testimonials-rect-grid">
                <div class="testimonial-rect-card reveal">
                    <blockquote><i data-lucide="quote" class="quote-icon"></i>Metascanner revealed geolocation data that was critical for our investigation. An indispensable tool.</blockquote>
                </div>
                <div class="testimonial-rect-card reveal">
                    <blockquote><i data-lucide="quote" class="quote-icon"></i>The ability to cross-reference EXIF data with AI analysis provides a level of verification I can't get anywhere else.</blockquote>
                </div>
                <div class="testimonial-rect-card reveal">
                    <blockquote><i data-lucide="quote" class="quote-icon"></i>Metascanner's reports are clear, detailed, and easy to share with my team. The UI is top-notch!</blockquote>
                </div>
                <div class="testimonial-rect-card reveal">
                    <blockquote><i data-lucide="quote" class="quote-icon"></i>Zero-knowledge privacy and instant deletion of uploads make Metascanner my go-to for sensitive cases.</blockquote>
                </div>
            </div>
        </section>
        
        <section id="faq" class="container"><h2 class="reveal">Frequently Asked Questions</h2><div class="faq-container reveal"><div class="faq-item"><div class="faq-question"><h3>What types of metadata can Metascanner extract?</h3></div><div class="faq-answer"><p>Metascanner extracts a comprehensive range of data, including EXIF (camera settings, date/time), IPTC (copyright, keywords), and XMP (edit history, author information), providing a complete picture of an image's origin and lifecycle.</p></div></div><div class="faq-item"><div class="faq-question"><h3>Is my data secure and private?</h3></div><div class="faq-answer"><p>Absolutely. We prioritize your privacy and security. All uploads are encrypted in transit and at rest. We do not share, sell, or analyze your images for any purpose other than providing you with your requested report. Your data is your own.</p></div></div><div class="faq-item"><div class="faq-question"><h3>Can Metascanner detect if an image has been edited?</h3></div><div class="faq-answer"><p>Yes. By analyzing metadata tags related to software (like Adobe Photoshop or GIMP) and comparing data inconsistencies, Metascanner can provide strong indicators of digital alteration. Our AI also scans for visual artifacts associated with manipulation.</p></div></div><div class="faq-item"><div class="faq-question"><h3>What file formats are supported?</h3></div><div class="faq-answer"><p>We support all major image formats, including JPEG, PNG, TIFF, HEIC, and various camera RAW formats (e.g., .CR2, .NEF, .ARW). Our system is continuously updated to support new and emerging file types.</p></div></div></div></section>
        
        <section id="final-cta" class="container reveal">
            <h2 class="reveal">Ready to See the Unseen?</h2>
            <p>> Begin your journey into deep image analysis and unlock a new dimension of information.</p>
            <a href="https://app.metascanner.site/auth" class="btn">LAUNCH SCANNER →</a>
        </section>

        <div class="chatbot-container">
            <button class="chatbot-toggle-button" id="chatbotToggle"><i data-lucide="bot"></i></button>
            <div class="chat-window" id="chatWindow">
                <div class="chat-header">
                    Metascan AI
                    <button class="close-btn" id="closeChat">×</button>
                </div>
                <div class="chat-messages" id="chatMessages"></div>
                <div class="chat-input-container">
                    <textarea id="chatInput" rows="1" placeholder="Type your message..."></textarea>
                    <button id="sendMessageBtn"><i data-lucide="forward"></i></button>
                </div>
            </div>
        </div>
    </main>

    <footer class="container">
        <div class="footer-content">
            <div class="footer-section">
                <div class="footer-brand">
                    <div class="footer-logo">
                        <i data-lucide="scan-qr-code"></i>
                        <span>METASCANNER</span>
                    </div>
                    <p class="footer-description">Advanced metadata extraction and AI powered image analysis for digital forensics and investigative journalism.</p>
                </div>
            </div>
            
           
            <div class="footer-section">
                <h4>QUICK LINKS</h4>
                <ul class="footer-links">
                    <li><a href="#features">Features</a></li>
                    <li><a href="#how-it-works">How It Works</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="https://app.metascanner.site/auth">Launch App</a></li>
                </ul>
            </div>
            
            <div class="footer-section">
                <h4>SUPPORT</h4>
                <ul class="footer-links">
                    <li><a href="privacy-policy.html">Privacy Policy</a></li>
                    <li><a href="terms-of-service.html">Terms of Service</a></li>
                    <li><a href="data-protection.html">Data Protection</a></li>
                    <li><a href="contributors.html">Contributors</a></li>
                </ul>
            </div>
        </div>
        
        <div class="footer-bottom">
            <div class="footer-copyright">
                <p>&copy; 2025 Metascanner. All rights reserved.</p>
                <p class="version-info">v1.0 // Built with advanced forensic protocols</p>
            </div>
            <div class="footer-social">
                <a href="https://github.com/debmalyamondal/metascanner" class="social-link" title="GitHub">
                    <i data-lucide="github"></i>
                </a>
                <a href="https://x.com/Meta_Scanner" class="social-link" title="Twitter">
                    <i data-lucide="twitter"></i>
                </a>
                <a href="https://www.linkedin.com/company/metascanner" class="social-link" title="LinkedIn">
                    <i data-lucide="linkedin"></i>
                </a>
            </div>
        </div>
    </footer>

    <script type="module" src="/src/main.js"></script>
    
    <!-- SCRIPT FOR PRELOADER -->
    <script>
      window.addEventListener('load', () => {
        const preloader = document.getElementById('preloader');
        // Wait at least 5 seconds before hiding the preloader
        setTimeout(() => {
          preloader.classList.add('hidden');
          document.body.classList.add('loaded');
        }, 3000); // 3000ms = 3s
      });
    </script>
</body>
</html>