Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vectorware | Professional Image Vectorization</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> | |
| .dropzone { | |
| border: 2px dashed #94a3b8; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| .comparison-slider { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .comparison-slider input { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| margin: 0; | |
| opacity: 0; | |
| cursor: ew-resize; | |
| z-index: 10; | |
| } | |
| .comparison-slider .slider-line { | |
| position: absolute; | |
| width: 2px; | |
| height: 100%; | |
| background: #3b82f6; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| pointer-events: none; | |
| z-index: 5; | |
| } | |
| .comparison-slider .slider-handle { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| z-index: 6; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| } | |
| .color-chip { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| border: 1px solid rgba(0,0,0,0.1); | |
| } | |
| .color-chip.selected { | |
| box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6; | |
| } | |
| .canvas-container { | |
| position: relative; | |
| overflow: hidden; | |
| background-image: | |
| linear-gradient(45deg, #e5e7eb 25%, transparent 25%), | |
| linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), | |
| linear-gradient(45deg, transparent 75%, #e5e7eb 75%), | |
| linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); | |
| background-size: 20px 20px; | |
| background-position: 0 0, 0 10px, 10px -10px, -10px 0px; | |
| } | |
| .zoom-controls { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 20; | |
| background: white; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background-color: #e5e7eb; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 0%; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .progress-bar.active::after { | |
| width: 100%; | |
| animation: progress 2s linear infinite; | |
| } | |
| @keyframes progress { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 40px 0; } | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .tooltip-text { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #1e293b; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -60px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm py-4 px-6"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-blue-700 rounded-md flex items-center justify-center"> | |
| <i class="fas fa-vector-square text-white text-sm"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800">Vectorware</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-blue-600 font-medium">Home</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Features</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Pricing</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Docs</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Support</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:block text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-user-circle text-xl"></i> | |
| </button> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Tabs Navigation --> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-blue-500 text-blue-600" data-tab="upload"> | |
| <i class="fas fa-upload mr-2"></i> Upload Image | |
| </button> | |
| <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="settings"> | |
| <i class="fas fa-sliders-h mr-2"></i> Vector Settings | |
| </button> | |
| <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="preview"> | |
| <i class="fas fa-eye mr-2"></i> Preview & Compare | |
| </button> | |
| <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="edit"> | |
| <i class="fas fa-pen mr-2"></i> Manual Edit | |
| </button> | |
| <button class="tab-button py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" data-tab="export"> | |
| <i class="fas fa-download mr-2"></i> Export | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="p-6"> | |
| <!-- Upload Tab --> | |
| <div id="upload" class="tab-content active"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6">Upload Your Image</h2> | |
| <p class="text-gray-600 mb-8">Drag and drop your image file here or click to browse. Supported formats: JPEG, PNG, PDF, TIFF, WebP, BMP (Max 100MB)</p> | |
| <div class="dropzone rounded-lg p-12 text-center mb-6" id="dropzone"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i> | |
| <h3 class="text-lg font-medium mb-2">Drag & Drop Your File Here</h3> | |
| <p class="text-gray-500 mb-4">or</p> | |
| <button id="browse-button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-200"> | |
| Browse Files | |
| </button> | |
| <input type="file" id="file-input" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.tiff,.webp,.bmp"> | |
| </div> | |
| </div> | |
| <div class="progress-bar mb-6" id="upload-progress"></div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-bolt text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium">Fast Processing</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Our optimized algorithms vectorize images in seconds, not minutes.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-palette text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium">Color Control</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Precise color extraction with up to 100 colors supported.</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-expand text-blue-600"></i> | |
| </div> | |
| <h3 class="font-medium">Lossless Scaling</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm">Vector output can be scaled infinitely without quality loss.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Tab --> | |
| <div id="settings" class="tab-content"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6">Vectorization Settings</h2> | |
| <p class="text-gray-600 mb-8">Adjust the vectorization parameters to get the perfect result for your image.</p> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Settings --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <h3 class="font-medium text-lg mb-4">Color Settings</h3> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Color Mode</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Automatic (Recommended)</option> | |
| <option>Black & White</option> | |
| <option>2 Colors</option> | |
| <option>8 Colors</option> | |
| <option>16 Colors</option> | |
| <option>32 Colors</option> | |
| <option>64 Colors</option> | |
| <option>100 Colors</option> | |
| <option>Full Color (Experimental)</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Custom Color Count</label> | |
| <div class="flex items-center space-x-4"> | |
| <input type="range" min="2" max="100" value="16" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm font-medium text-gray-700 w-10 text-center">16</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Preserve transparency</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Auto-detect background</span> | |
| </label> | |
| </div> | |
| <h3 class="font-medium text-lg mb-4 mt-8">Path Settings</h3> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Path Detail</label> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm text-gray-500">Low</span> | |
| <input type="range" min="1" max="10" value="6" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm text-gray-500">High</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Smooth curves</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <span class="text-gray-700">Corner snapping</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Optimize paths</span> | |
| </label> | |
| </div> | |
| <button id="process-button" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md transition duration-200"> | |
| Process Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column - Preview --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <h3 class="font-medium text-lg mb-4">Preview</h3> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium hover:bg-gray-50"> | |
| Original | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium hover:bg-gray-50"> | |
| Vector | |
| </button> | |
| <button class="bg-blue-100 border border-blue-200 text-blue-700 rounded-md px-3 py-1 text-sm font-medium"> | |
| Side by Side | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| <span class="tooltip-text">Zoom Out</span> | |
| </button> | |
| <span class="text-sm text-gray-600">100%</span> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| <span class="tooltip-text">Zoom In</span> | |
| </button> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-expand"></i> | |
| <span class="tooltip-text">Fit to View</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="canvas-container rounded-md overflow-hidden border border-gray-300" style="height: 500px;"> | |
| <div class="comparison-slider"> | |
| <input type="range" min="1" max="100" value="50" class="slider" id="comparison-slider"> | |
| <div class="slider-line"></div> | |
| <div class="slider-handle"> | |
| <i class="fas fa-arrows-alt-h text-xs"></i> | |
| </div> | |
| <div class="absolute inset-0 flex"> | |
| <div class="w-1/2 h-full bg-gray-100 flex items-center justify-center"> | |
| <img id="original-image" src="https://via.placeholder.com/800x500?text=Original+Image" alt="Original" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="w-1/2 h-full bg-gray-100 flex items-center justify-center"> | |
| <img id="vector-preview" src="https://via.placeholder.com/800x500?text=Vector+Preview" alt="Vector" class="max-w-full max-h-full"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="zoom-controls"> | |
| <div class="flex divide-x divide-gray-200"> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Detected Colors</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <div class="color-chip" style="background-color: #3b82f6;" title="#3b82f6"></div> | |
| <div class="color-chip" style="background-color: #ef4444;" title="#ef4444"></div> | |
| <div class="color-chip" style="background-color: #10b981;" title="#10b981"></div> | |
| <div class="color-chip" style="background-color: #f59e0b;" title="#f59e0b"></div> | |
| <div class="color-chip" style="background-color: #8b5cf6;" title="#8b5cf6"></div> | |
| <div class="color-chip" style="background-color: #ec4899;" title="#ec4899"></div> | |
| <div class="color-chip" style="background-color: #000000;" title="#000000"></div> | |
| <div class="color-chip" style="background-color: #ffffff;" title="#ffffff"></div> | |
| <div class="color-chip selected" style="background-color: #64748b;" title="#64748b"></div> | |
| <div class="color-chip" style="background-color: #f97316;" title="#f97316"></div> | |
| <div class="color-chip" style="background-color: #14b8a6;" title="#14b8a6"></div> | |
| <div class="color-chip" style="background-color: #6366f1;" title="#6366f1"></div> | |
| <button class="text-xs text-gray-500 hover:text-blue-600 flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview & Compare Tab --> | |
| <div id="preview" class="tab-content"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6">Preview & Compare</h2> | |
| <p class="text-gray-600 mb-8">Inspect your vectorized image and compare it with the original.</p> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Controls --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <h3 class="font-medium text-lg mb-4">Comparison Mode</h3> | |
| <div class="space-y-3 mb-6"> | |
| <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 cursor-pointer"> | |
| <input type="radio" name="comparison-mode" class="form-radio h-4 w-4 text-blue-600" checked> | |
| <span class="text-gray-700">Side by Side</span> | |
| </label> | |
| <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 cursor-pointer"> | |
| <input type="radio" name="comparison-mode" class="form-radio h-4 w-4 text-blue-600"> | |
| <span class="text-gray-700">Overlay (Slider)</span> | |
| </label> | |
| <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 cursor-pointer"> | |
| <input type="radio" name="comparison-mode" class="form-radio h-4 w-4 text-blue-600"> | |
| <span class="text-gray-700">Difference Map</span> | |
| </label> | |
| <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-100 cursor-pointer"> | |
| <input type="radio" name="comparison-mode" class="form-radio h-4 w-4 text-blue-600"> | |
| <span class="text-gray-700">Toggle Flicker</span> | |
| </label> | |
| </div> | |
| <h3 class="font-medium text-lg mb-4 mt-8">View Options</h3> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Show grid</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <span class="text-gray-700">Show paths</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Show color regions</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Zoom Level</label> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <select class="flex-grow border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Fit to View</option> | |
| <option>25%</option> | |
| <option>50%</option> | |
| <option selected>100%</option> | |
| <option>200%</option> | |
| <option>400%</option> | |
| <option>800%</option> | |
| </select> | |
| <button class="p-1 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-medium text-lg mb-4 mt-8">Color Management</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Active Color</label> | |
| <div class="flex items-center space-x-3"> | |
| <div class="color-chip selected" style="background-color: #64748b;"></div> | |
| <div class="text-sm"> | |
| <div>#64748b</div> | |
| <div class="text-gray-500">5.2% coverage</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-2 mb-6"> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100"> | |
| <span>Show/Hide</span> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100"> | |
| <span>Edit Color</span> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100"> | |
| <span>Merge with...</span> | |
| <i class="fas fa-object-group"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100 text-red-500"> | |
| <span>Delete Color</span> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Comparison --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-100 border border-blue-200 text-blue-700 rounded-md px-3 py-1 text-sm font-medium"> | |
| Side by Side | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium hover:bg-gray-50"> | |
| Overlay | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium hover:bg-gray-50"> | |
| Difference | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| <span class="tooltip-text">Zoom Out</span> | |
| </button> | |
| <span class="text-sm text-gray-600">100%</span> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| <span class="tooltip-text">Zoom In</span> | |
| </button> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-expand"></i> | |
| <span class="tooltip-text">Fit to View</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="canvas-container rounded-md overflow-hidden border border-gray-300" style="height: 500px;"> | |
| <div class="absolute inset-0 flex"> | |
| <div class="w-1/2 h-full bg-gray-100 flex items-center justify-center border-r border-gray-300"> | |
| <img id="original-image-preview" src="https://via.placeholder.com/800x500?text=Original+Image" alt="Original" class="max-w-full max-h-full"> | |
| </div> | |
| <div class="w-1/2 h-full bg-gray-100 flex items-center justify-center"> | |
| <img id="vector-image-preview" src="https://via.placeholder.com/800x500?text=Vector+Result" alt="Vector" class="max-w-full max-h-full"> | |
| </div> | |
| </div> | |
| <div class="zoom-controls"> | |
| <div class="flex divide-x divide-gray-200"> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium text-sm mb-2">Original Image</h4> | |
| <div class="text-xs text-gray-600 space-y-1"> | |
| <div class="flex justify-between"> | |
| <span>Dimensions:</span> | |
| <span>1200 × 800 px</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>File size:</span> | |
| <span>450 KB</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Colors:</span> | |
| <span>~16,000</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Format:</span> | |
| <span>JPEG</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="font-medium text-sm mb-2">Vector Result</h4> | |
| <div class="text-xs text-gray-600 space-y-1"> | |
| <div class="flex justify-between"> | |
| <span>Dimensions:</span> | |
| <span>Scalable</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>File size:</span> | |
| <span>78 KB (estimated)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Colors:</span> | |
| <span>16</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Paths:</span> | |
| <span>~320</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Manual Edit Tab --> | |
| <div id="edit" class="tab-content"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6">Manual Editing</h2> | |
| <p class="text-gray-600 mb-8">Fine-tune your vector paths and colors for perfect results.</p> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Column - Tools --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <h3 class="font-medium text-lg mb-4">Editing Tools</h3> | |
| <div class="grid grid-cols-4 gap-2 mb-6"> | |
| <button class="p-2 bg-blue-100 border border-blue-200 rounded-md text-blue-700 tooltip"> | |
| <i class="fas fa-mouse-pointer"></i> | |
| <span class="tooltip-text">Select Tool</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-pen"></i> | |
| <span class="tooltip-text">Pen Tool</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-vector-square"></i> | |
| <span class="tooltip-text">Rectangle</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-circle"></i> | |
| <span class="tooltip-text">Ellipse</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-font"></i> | |
| <span class="tooltip-text">Text</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-cut"></i> | |
| <span class="tooltip-text">Knife</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-tint"></i> | |
| <span class="tooltip-text">Paint Bucket</span> | |
| </button> | |
| <button class="p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 tooltip"> | |
| <i class="fas fa-eye-dropper"></i> | |
| <span class="tooltip-text">Eyedropper</span> | |
| </button> | |
| </div> | |
| <h3 class="font-medium text-lg mb-4">Path Options</h3> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Stroke Width</label> | |
| <div class="flex items-center space-x-4"> | |
| <input type="range" min="0" max="20" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="text-sm font-medium text-gray-700 w-10 text-center">1px</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Corner Type</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Miter Join</option> | |
| <option>Round Join</option> | |
| <option>Bevel Join</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Show anchor points</span> | |
| </label> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <span class="text-gray-700">Snap to grid</span> | |
| </label> | |
| </div> | |
| <h3 class="font-medium text-lg mb-4">History</h3> | |
| <div class="space-y-2 mb-6"> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100"> | |
| <span>Added path #321</span> | |
| <span class="text-gray-500 text-xs">2 sec ago</span> | |
| </button> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100"> | |
| <span>Modified color #5</span> | |
| <span class="text-gray-500 text-xs">15 sec ago</span> | |
| </button> | |
| <button class="w-full flex items-center justify-between text-sm p-2 rounded hover:bg-gray-100"> | |
| <span>Simplified paths</span> | |
| <span class="text-gray-500 text-xs">1 min ago</span> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-200"> | |
| Undo | |
| </button> | |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-200"> | |
| Redo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Canvas --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button class="bg-blue-100 border border-blue-200 text-blue-700 rounded-md px-3 py-1 text-sm font-medium"> | |
| <i class="fas fa-mouse-pointer mr-1"></i> Select | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium hover:bg-gray-50"> | |
| <i class="fas fa-pen mr-1"></i> Pen | |
| </button> | |
| <button class="bg-white border border-gray-300 rounded-md px-3 py-1 text-sm font-medium hover:bg-gray-50"> | |
| <i class="fas fa-tint mr-1"></i> Fill | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| <span class="tooltip-text">Zoom Out</span> | |
| </button> | |
| <span class="text-sm text-gray-600">200%</span> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| <span class="tooltip-text">Zoom In</span> | |
| </button> | |
| <button class="tooltip p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-expand"></i> | |
| <span class="tooltip-text">Fit to View</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="canvas-container rounded-md overflow-hidden border border-gray-300" style="height: 500px;"> | |
| <svg id="vector-canvas" width="100%" height="100%" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Background --> | |
| <rect width="100%" height="100%" fill="#f8fafc" /> | |
| <!-- Example vector paths --> | |
| <path d="M100,100 L200,100 L200,200 L100,200 Z" fill="#3b82f6" stroke="#1d4ed8" stroke-width="1" /> | |
| <path d="M250,150 C300,50 350,250 400,150" fill="none" stroke="#ef4444" stroke-width="2" /> | |
| <path d="M450,100 L550,100 L500,200 Z" fill="#10b981" stroke="#047857" stroke-width="1" /> | |
| <circle cx="600" cy="150" r="50" fill="#f59e0b" stroke="#b45309" stroke-width="1" /> | |
| <!-- Anchor points (visible when selected) --> | |
| <circle cx="100" cy="100" r="4" fill="#1e40af" class="anchor-point" style="display: none;" /> | |
| <circle cx="200" cy="100" r="4" fill="#1e40af" class="anchor-point" style="display: none;" /> | |
| <circle cx="200" cy="200" r="4" fill="#1e40af" class="anchor-point" style="display: none;" /> | |
| <circle cx="100" cy="200" r="4" fill="#1e40af" class="anchor-point" style="display: none;" /> | |
| </svg> | |
| <div class="zoom-controls"> | |
| <div class="flex divide-x divide-gray-200"> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-blue-600"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium text-sm mb-2">Selected Path</h4> | |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-700 mb-1">Fill</label> | |
| <div class="flex items-center"> | |
| <div class="color-chip mr-2" style="background-color: #3b82f6;"></div> | |
| <input type="text" value="#3b82f6" class="text-xs border border-gray-300 rounded px-2 py-1 w-20"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-700 mb-1">Stroke</label> | |
| <div class="flex items-center"> | |
| <div class="color-chip mr-2" style="background-color: #1d4ed8;"></div> | |
| <input type="text" value="#1d4ed8" class="text-xs border border-gray-300 rounded px-2 py-1 w-20"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-xs font-medium py-1 px-2 rounded transition duration-200"> | |
| <i class="fas fa-copy mr-1"></i> Copy | |
| </button> | |
| <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 text-xs font-medium py-1 px-2 rounded transition duration-200"> | |
| <i class="fas fa-paste mr-1"></i> Paste | |
| </button> | |
| <button class="flex-1 bg-red-100 hover:bg-red-200 text-red-800 text-xs font-medium py-1 px-2 rounded transition duration-200"> | |
| <i class="fas fa-trash mr-1"></i> Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Tab --> | |
| <div id="export" class="tab-content"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-2xl font-bold mb-6">Export Vector Image</h2> | |
| <p class="text-gray-600 mb-8">Choose your preferred format and settings for exporting the vectorized image.</p> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200 mb-8"> | |
| <h3 class="font-medium text-lg mb-4">Export Settings</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Format</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>SVG (Scalable Vector Graphics)</option> | |
| <option>PDF (Portable Document Format)</option> | |
| <option>EPS (Encapsulated PostScript)</option> | |
| <option>PNG (Raster Preview)</option> | |
| <option>JPEG (Raster Preview)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Resolution (for raster formats)</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>72 DPI (Web)</option> | |
| <option>150 DPI (Medium Quality)</option> | |
| <option selected>300 DPI (High Quality)</option> | |
| <option>600 DPI (Ultra Quality)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">File Name</label> | |
| <input type="text" value="vectorized-image" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="space-y-3 mb-6"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Include metadata (author, creation date)</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded" checked> | |
| <span class="text-gray-700">Embed color profile</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <span class="text-gray-700">Flatten all layers</span> | |
| </label> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md transition duration-200"> | |
| <i class="fas fa-download mr-2"></i> Download Now | |
| </button> | |
| <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-6 rounded-md transition duration-200"> | |
| <i class="fas fa-save mr-2"></i> Save to Project | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6 border border-gray-200"> | |
| <h3 class="font-medium text-lg mb-4">Batch Export</h3> | |
| <p class="text-gray-600 mb-6">Export multiple formats at once or prepare files for bulk download.</p> | |
| <div class="space-y-3 mb-6"> | |
| <label class="flex items-center space-x-3 p-3 rounded border border-gray-200 hover:bg-gray-100 cursor-pointer"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <div> | |
| <div class="font-medium">SVG + PNG</div> | |
| <div class="text-xs text-gray-500">Vector with raster preview</div> | |
| </div> | |
| </label> | |
| <label class="flex items-center space-x-3 p-3 rounded border border-gray-200 hover:bg-gray-100 cursor-pointer"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <div> | |
| <div class="font-medium">PDF + EPS</div> | |
| <div class="text-xs text-gray-500">Print-ready formats</div> | |
| </div> | |
| </label> | |
| <label class="flex items-center space-x-3 p-3 rounded border border-gray-200 hover:bg-gray-100 cursor-pointer"> | |
| <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded"> | |
| <div> | |
| <div class="font-medium">All Formats</div> | |
| <div class="text-xs text-gray-500">SVG, PDF, EPS, PNG, JPEG</div> | |
| </div> | |
| </label> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-md transition duration-200"> | |
| <i class="fas fa-file-archive mr-2"></i> Download as ZIP | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-8 px-6"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Vectorware</h3> | |
| <p class="text-gray-600 text-sm">Professional image vectorization software for designers, artists, and engineers.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Product</h3> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li><a href="#" class="hover:text-blue-600">Features</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Pricing</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Examples</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Updates</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Resources</h3> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li><a href="#" class="hover:text-blue-600">Documentation</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Tutorials</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Blog</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-medium mb-4">Company</h3> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li><a href="#" class="hover:text-blue-600">About</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Careers</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Privacy</a></li> | |
| <li><a href="#" class="hover:text-blue-600">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-gray-500 mb-4 md:mb-0">© 2023 Vectorware. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-600"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Tab switching functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all tabs and buttons | |
| document.querySelectorAll('.tab-button').forEach(btn => { | |
| btn.classList.remove('border-blue-500', 'text-blue-600'); | |
| btn.classList.add('border-transparent', 'text-gray-500'); | |
| }); | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Add active class to clicked button and corresponding tab | |
| button.classList.remove('border-transparent', 'text-gray-500'); | |
| button.classList.add('border-blue-500', 'text-blue-600'); | |
| const tabId = button.getAttribute('data-tab'); | |
| document.getElementById(tabId).classList.add('active'); | |
| }); | |
| }); | |
| // File upload functionality | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('file-input'); | |
| const browseButton = document.getElementById('browse-button'); | |
| const uploadProgress = document.getElementById('upload-progress'); | |
| // Highlight dropzone when file is dragged over | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('active'); | |
| }); | |
| }); | |
| // Remove highlight when file leaves | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('active'); | |
| }); | |
| }); | |
| // Handle dropped files | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| const files = e.dataTransfer.files; | |
| if (files.length) { | |
| handleFiles(files); | |
| } | |
| }); | |
| // Handle clicked files | |
| browseButton.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', () => { | |
| if (fileInput.files.length) { | |
| handleFiles(fileInput.files); | |
| } | |
| }); | |
| // Process uploaded files | |
| function handleFiles(files) { | |
| const file = files[0]; | |
| const validTypes = ['image/jpeg', 'image/png', 'image/pdf', 'image/tiff', 'image/webp', 'image/bmp']; | |
| if (!validTypes.includes(file.type) && !file.name.match(/\.(jpe?g|png|pdf|tiff?|webp|bmp)$/i)) { | |
| alert('Please upload a valid image file (JPEG, PNG, PDF, TIFF, WebP, BMP)'); | |
| return; | |
| } | |
| if (file.size > 100 * 1024 * 1024) { // 100MB | |
| alert('File size exceeds 100MB limit'); | |
| return; | |
| } | |
| // Simulate upload progress | |
| uploadProgress.classList.add('active'); | |
| // In a real app, you would upload the file to your server here | |
| setTimeout(() => { | |
| uploadProgress.classList.remove('active'); | |
| // Switch to the settings tab | |
| document.querySelector('[data-tab="settings"]').click(); | |
| // Display the uploaded image | |
| const reader = new FileReader(); | |
| reader.onload = (e) => { | |
| document.getElementById('original-image').src = e.target.result; | |
| document.getElementById('original-image-preview').src = e.target.result; | |
| // In a real app, you would process the image and display the vector preview | |
| // For demo purposes, we'll just use a placeholder | |
| document.getElementById('vector-preview').src = e.target.result; | |
| document.getElementById('vector-image-preview').src = e.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| }, 1500); | |
| } | |
| // Process button click | |
| document.getElementById('process-button').addEventListener('click', () => { | |
| // In a real app, this would send the settings to your backend for processing | |
| // For demo purposes, we'll just switch to the preview tab | |
| document.querySelector('[data-tab="preview"]').click(); | |
| }); | |
| // Comparison slider functionality | |
| const slider = document.getElementById('comparison-slider'); | |
| if (slider) { | |
| slider.addEventListener('input', (e) => { | |
| const value = e.target.value; | |
| document.querySelector('.comparison-slider .slider-line').style.left = `${value}%`; | |
| document.querySelector('.comparison-slider .slider-handle').style.left = `${value}%`; | |
| }); | |
| } | |
| // Manual edit canvas interaction | |
| const vectorCanvas = document.getElementById('vector-canvas'); | |
| if (vectorCanvas) { | |
| // Example: Show anchor points when path is clicked | |
| vectorCanvas.addEventListener('click', (e) => { | |
| if (e.target.tagName === 'path') { | |
| // Hide all anchor points first | |
| document.querySelectorAll('.anchor-point').forEach(point => { | |
| point.style.display = 'none'; | |
| }); | |
| // Show anchor points for this path | |
| // In a real app, you would calculate these based on the path data | |
| const path = e.target; | |
| if (path.getAttribute('d').includes('100,100')) { | |
| document.querySelectorAll('.anchor-point').forEach(point => { | |
| point.style.display = 'block'; | |
| }); | |
| } | |
| } | |
| }); | |
| } | |
| </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=marcosyago/vectorware" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |