
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus Ultimate Converter Pro</title>
    <link rel="icon" href="assets/nexus.png" type="image/x-icon" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js"></script>
    <style>
        :root {
            --primary: #6366f1;
            --secondary: #4f46e5;
            --background: #ffffff;
            --surface: #f8fafc;
            --text: #1e293b;
            --border: #e2e8f0;
            --success: #10b981;
            --error: #ef4444;
        }

        [data-theme="dark"] {
            --primary: #818cf8;
            --secondary: #6366f1;
            --background: #0f172a;
            --surface: #1e293b;
            --text: #f8fafc;
            --border: #334155;
            --success: #10b981;
            --error: #ef4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, sans-serif;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            background: var(--background);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
        }

        .container {
            width: 100%;
            max-width: 800px;
            margin: auto;
            background: var(--surface);
            border-radius: 1.5rem;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .theme-toggle {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: var(--surface);
            border: 2px solid var(--border);
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            cursor: pointer;
            color: var(--text);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header {
            text-align: center;
            margin-bottom: 2rem;
            animation: fadeIn 0.5s ease-out;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .file-drop-area {
            border: 2px dashed var(--border);
            border-radius: 1rem;
            padding: 2rem;
            text-align: center;
            margin-bottom: 1.5rem;
            transition: all 0.3s;
            animation: slideUp 0.4s ease-out;
        }

        .file-drop-area.active {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.05);
        }

        .file-input-label {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 2rem;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 0.75rem;
            cursor: pointer;
            font-weight: 500;
            transition: transform 0.2s;
        }

        .file-input-label:hover {
            transform: translateY(-2px);
        }

        .preview-section {
            background: var(--background);
            border-radius: 1rem;
            padding: 1.5rem;
            margin-bottom: 2rem;
            animation: fadeIn 0.6s ease-out;
        }

        .conversion-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .conversion-category {
            background: var(--background);
            border-radius: 1rem;
            border: 1px solid var(--border);
            overflow: hidden;
        }

        .category-header {
            padding: 1rem 1.5rem;
            background: rgba(99, 102, 241, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .category-title {
            font-weight: 600;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .category-formats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.75rem;
            padding: 1rem;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease-out;
        }

        .category-formats.active {
            max-height: 500px;
        }

        .format-item {
            padding: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .format-item:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .format-item.active {
            background: var(--primary);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .spinner {
            width: 3rem;
            height: 3rem;
            border: 4px solid var(--primary);
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .menu-buttons {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            display: flex;
            flex-direction: column; /* Stack buttons vertically */
            gap: 0.5rem; /* Space between buttons */
        }

        .menu-button {
            background: var(--surface);
            border: 2px solid var(--border);
            padding: 0.5rem 1rem;
            border-radius: 0.75rem;
            cursor: pointer;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            font-size: 0.875rem;
            transition: all 0.2s;
        }
    
        .menu-button:hover {
            background: var(--primary);
            color: white;
            border-color: transparent;
            transform: translateY(-2px);
        }
    
        .menu-button i {
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    
    <div class="loading">
        <div class="spinner"></div>
    </div>

    <div class="menu-buttons">
        <div class="menu-button" onclick="window.location.href='/privacy-policy'">
            <i class="fas fa-bars"></i> Privacy Policy
        </div>
            
        <div class="menu-button" onclick="window.location.href='/terms-of-service'">
            <i class="fas fa-file-alt"></i> Terms of Service
        </div>
    </div>

    <button class="theme-toggle" id="themeToggle">
        <i class="fas fa-moon"></i>
    </button>

    <div class="container">
        <div class="header">
            <h1>Nexus Converter Web</h1>
            <p>Transform files instantly</p>
        </div>

        <div class="file-drop-area" id="dropZone">
            <input type="file" id="fileInput" hidden>
            <label for="fileInput" class="file-input-label">
                <i class="fas fa-cloud-upload-alt"></i> Choose File
            </label>
            <p class="mt-2 text-muted">Drag & drop files anywhere</p>
        </div>

        <div class="preview-section">
            <h3 class="preview-title">Preview</h3>
            <div class="preview-content" id="previewContent"></div>
        </div>

        <div class="conversion-list">
            <div class="conversion-category">
                <div class="category-header">
                    <span class="category-title">
                        <i class="fas fa-image"></i>
                        Images
                    </span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="category-formats">
                    <div class="format-item" data-format="jpg">JPG</div>
                    <div class="format-item" data-format="png">PNG</div>
                    <div class="format-item" data-format="webp">WEBP</div>
                    <div class="format-item" data-format="bmp">BMP</div>
                    <div class="format-item" data-format="gif">GIF</div>
                </div>
            </div>

            <div class="conversion-category">
                <div class="category-header">
                    <span class="category-title">
                        <i class="fas fa-file-alt"></i>
                        Documents
                    </span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="category-formats">
                    <div class="format-item" data-format="pdf">PDF</div>
                    <div class="format-item" data-format="txt">TXT</div>
                    <div class="format-item" data-format="csv">CSV</div>
                </div>
            </div>

            <div class="conversion-category">
                <div class="category-header">
                    <span class="category-title">
                        <i class="fas fa-file-archive"></i>
                        Archives
                    </span>
                    <i class="fas fa-chevron-down"></i>
                </div>
                <div class="category-formats">
                    <div class="format-item" data-format="zip">ZIP</div>
                </div>
            </div>
        </div>
    </div>
      
    <div class="demo-section" style="margin-top: 2rem;">
            <h3 class="demo-label" style="text-align: center; margin-bottom: 1rem; color: var(--text);">This is a web demo of the exe</h3>
            <button class="file-input-label" style="width: 100%; justify-content: center;" onclick="window.location.href='https://v0-nexus-docs-6iehy4.vercel.app/'">
                <i class="fas fa-external-link-alt"></i> Visit Nexus Converter Pro
            </button>
        </div>
    </div>

    <script>
        // Theme Management
        const themeToggle = document.getElementById('themeToggle');
        let isDark = localStorage.getItem('theme') === 'dark';

        const setTheme = () => {
            document.body.setAttribute('data-theme', isDark ? 'dark' : 'light');
            themeToggle.innerHTML = isDark ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        };
        setTheme();
        themeToggle.addEventListener('click', () => {
            isDark = !isDark;
            setTheme();
        });

        // Conversion Categories
        document.querySelectorAll('.category-header').forEach(header => {
            header.addEventListener('click', () => {
                const formats = header.nextElementSibling;
                formats.classList.toggle('active');
                header.querySelector('i:last-child').classList.toggle('fa-chevron-up');
            });
        });

        // File Handling
        let currentFile = null;
        let selectedFormat = null;

        // Conversion Functions
        const conversionFormats = {
            // Image conversions
            jpg: convertImage,
            png: convertImage,
            webp: convertImage,
            bmp: convertImage,
            gif: convertToGif,

            // Document conversions
            pdf: convertToPdf,
            txt: convertToText,
            csv: convertToCsv,

            // Archive conversions
            zip: convertToZip
        };

        // Base Image Converter
        async function convertImage(file) {
            const img = await createImageBitmap(file);
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            return new Promise(resolve => {
                canvas.toBlob(blob => resolve(blob), `image/${selectedFormat}`, 0.9);
            });
        }

        // GIF Converter
        async function convertToGif(file) {
            const img = await createImageBitmap(file);
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            return new Promise(resolve => {
                canvas.toBlob(blob => resolve(blob), 'image/gif');
            });
        }

        // PDF Converter
        async function convertToPdf(file) {
            const pdfDoc = await PDFLib.PDFDocument.create();
            const page = pdfDoc.addPage([612, 792]);
            
            if (file.type.startsWith('image/')) {
                const img = await pdfDoc.embedJpg(await file.arrayBuffer());
                const { width, height } = img.scale(0.5);
                page.drawImage(img, { x: 50, y: 50, width, height });
            } else {
                const text = await file.text();
                page.drawText(text, { x: 50, y: 742, size: 12 });
            }
            return pdfDoc.save();
        }

        // Text Converter
        async function convertToText(file) {
            return new Blob([await file.text()], { type: 'text/plain' });
        }

        // CSV Converter
        async function convertToCsv(file) {
            if (file.type === 'application/json') {
                const json = await file.text();
                const csv = Papa.unparse(JSON.parse(json));
                return new Blob([csv], { type: 'text/csv' });
            }
            throw new Error('CSV conversion requires JSON input');
        }

        // ZIP Converter
        async function convertToZip(file) {
            const zip = new JSZip();
            zip.file(`converted.${selectedFormat}`, file);
            return zip.generateAsync({ type: 'blob' });
        }

        // Event Listeners
        document.querySelectorAll('.format-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.format-item').forEach(i => i.classList.remove('active'));
                item.classList.add('active');
                selectedFormat = item.dataset.format;
                convertFile();
            });
        });

        // Drag & Drop Handling
        const dropZone = document.getElementById('dropZone');
        
        ['dragover', 'dragenter'].forEach(event => {
            dropZone.addEventListener(event, (e) => {
                e.preventDefault();
                dropZone.classList.add('active');
            });
        });

        ['dragleave', 'dragend'].forEach(event => {
            dropZone.addEventListener(event, () => {
                dropZone.classList.remove('active');
            });
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('active');
            currentFile = e.dataTransfer.files[0];
            showPreview(currentFile);
        });

        document.getElementById('fileInput').addEventListener('change', (e) => {
            currentFile = e.target.files[0];
            showPreview(currentFile);
        });

        // Preview Handling
        async function showPreview(file) {
            const previewContent = document.getElementById('previewContent');
            previewContent.innerHTML = '';

            if (file.type.startsWith('image/')) {
                const img = document.createElement('img');
                img.src = URL.createObjectURL(file);
                img.style.maxHeight = '200px';
                img.style.borderRadius = '8px';
                previewContent.appendChild(img);
            } else {
                previewContent.innerHTML = `
                    <div class="file-preview">
                        <i class="fas fa-file-alt fa-3x" style="color: var(--primary);"></i>
                        <div style="margin-top: 1rem;">
                            <h4>${file.name}</h4>
                            <p style="color: var(--text); opacity: 0.8;">${(file.size / 1024).toFixed(2)} KB</p>
                        </div>
                    </div>
                `;
            }
        }

        // Conversion Handler
        async function convertFile() {
            if (!currentFile || !selectedFormat) return;
            
            document.querySelector('.loading').style.display = 'flex';
            
            try {
                const converter = conversionFormats[selectedFormat];
                if (converter) {
                    const convertedBlob = await converter(currentFile);
                    handleConversionResult(convertedBlob);
                }
            } catch (error) {
                alert(`Conversion error: ${error.message}`);
            } finally {
                document.querySelector('.loading').style.display = 'none';
            }
        }

        // Result Handler
        function handleConversionResult(blob) {
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `converted.${selectedFormat}`;
            a.click();
            URL.revokeObjectURL(url);
        }
    </script>
</body>
</html>
