Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VinylVault Pro - eBay Listing Generator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://imgbb.com/upload.js" async></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#7c3aed', | |
| secondary: '#06b6d4', | |
| accent: '#f59e0b', | |
| surface: '#0f172a', | |
| 'surface-light': '#1e293b', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-surface text-gray-100 min-h-screen"> | |
| <!-- Navigation --> | |
| <vinyl-nav></vinyl-nav> | |
| <!-- Collection Import Banner --> | |
| <div id="collectionBanner" class="hidden fixed top-16 left-0 right-0 z-40 bg-gradient-to-r from-primary/20 to-purple-600/20 border-b border-primary/30 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="database" class="w-5 h-5 text-primary"></i> | |
| <span class="text-sm text-gray-200">Loading record from your collection...</span> | |
| </div> | |
| <button onclick="clearCollectionImport()" class="text-sm text-gray-400 hover:text-white flex items-center gap-1"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| Clear | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="pt-20 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> | |
| <!-- Hero Section --> | |
| <section class="mb-12 text-center"> | |
| <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/30 mb-6"> | |
| <i data-feather="disc" class="w-4 h-4 text-primary"></i> | |
| <span class="text-sm font-medium text-primary">Professional eBay Listing Tool</span> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent"> | |
| VinylVault Pro | |
| </h1> | |
| <p class="text-gray-400 max-w-2xl mx-auto text-lg"> | |
| Upload your record photos and get optimized eBay titles, pricing strategies, | |
| and professional HTML descriptions in minutes. | |
| </p> | |
| </section> | |
| <!-- Quick Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12"> | |
| <stat-card icon="check-circle" label="Listings Generated" value="2,847" trend="+12%"></stat-card> | |
| <stat-card icon="trending-up" label="Avg. Sale Price" value="£34.50" trend="+8%"></stat-card> | |
| <stat-card icon="clock" label="Time Saved" value="15 min/listing" trend="per listing"></stat-card> | |
| </div> | |
| <!-- Upload Section --> | |
| <section class="mb-12"> | |
| <div class="bg-surface-light rounded-2xl p-8 border border-gray-800"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Upload Zone --> | |
| <div class="flex-1"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center gap-2"> | |
| <i data-feather="upload-cloud" class="w-5 h-5 text-secondary"></i> | |
| Upload Record Photos | |
| </h2> | |
| <!-- AI Chat Interface --> | |
| <ai-chat id="aiChatBox" class="mb-4"></ai-chat> | |
| <div id="dropZone" class="border-2 border-dashed border-gray-600 rounded-xl p-12 text-center transition-all hover:border-primary hover:bg-primary/5 cursor-pointer group relative"> | |
| <div id="uploadSpinner" class="absolute inset-0 bg-surface-light/90 rounded-xl flex flex-col items-center justify-center hidden z-10"> | |
| <div class="w-12 h-12 border-4 border-primary/30 border-t-primary rounded-full animate-spin mb-3"></div> | |
| <p class="text-sm text-gray-400 mb-4">Analyzing images with AI...</p> | |
| <!-- Analysis Progress Bar --> | |
| <div class="w-64 max-w-[80%]"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span id="analysisStageText" class="text-xs text-gray-500">Initializing...</span> | |
| <span id="analysisPercent" class="text-xs text-primary font-medium">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden"> | |
| <div id="analysisBar" class="bg-gradient-to-r from-primary to-secondary h-2 rounded-full transition-all duration-300 ease-out" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-800 flex items-center justify-center group-hover:bg-primary/20 transition-colors"> | |
| <i data-feather="camera" class="w-8 h-8 text-gray-400 group-hover:text-primary"></i> | |
| </div> | |
| <p class="text-gray-300 font-medium mb-2">Drop photos here or click to browse</p> | |
| <p class="text-sm text-gray-500">Front, back, labels, deadwax, inner sleeve, inserts</p> | |
| <p class="text-xs text-primary mt-2 opacity-0 group-hover:opacity-100 transition-opacity">AI will auto-detect record details</p> | |
| <input type="file" id="photoInput" multiple accept="image/*" class="hidden"> | |
| </div> | |
| <!-- Photo Preview Grid --> | |
| <div id="photoGrid" class="grid grid-cols-3 sm:grid-cols-4 gap-3 mt-6 hidden"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| <!-- Upload Progress --> | |
| <div id="uploadProgress" class="hidden mt-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm text-gray-400">Uploading to image host...</span> | |
| <span id="uploadPercent" class="text-sm text-primary">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden"> | |
| <div id="uploadBar" class="bg-gradient-to-r from-primary to-purple-600 h-2 rounded-full transition-all duration-300 ease-out" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Info Form --> | |
| <div class="md:w-80 space-y-4"> | |
| <h3 class="text-lg font-medium text-gray-300">Quick Details (Optional)</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Artist</label> | |
| <input type="text" id="artistInput" placeholder="e.g. Pink Floyd" | |
| class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Title</label> | |
| <input type="text" id="titleInput" placeholder="e.g. The Dark Side of the Moon" | |
| class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Catalogue #</label> | |
| <input type="text" id="catInput" placeholder="e.g. SHVL 804" | |
| class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Year</label> | |
| <input type="text" id="yearInput" placeholder="1973" | |
| class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">What did you pay? (£)</label> | |
| <input type="number" id="costInput" placeholder="0.00" step="0.01" | |
| class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Days Owned</label> | |
| <input type="number" id="daysOwnedInput" placeholder="0" | |
| class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Condition (Vinyl/Sleeve)</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <select id="vinylConditionInput" class="px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| <option value="M">M</option> | |
| <option value="NM">NM</option> | |
| <option value="VG+">VG+</option> | |
| <option value="VG" selected>VG</option> | |
| <option value="G+">G+</option> | |
| <option value="G">G</option> | |
| </select> | |
| <select id="sleeveConditionInput" class="px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| <option value="M">M</option> | |
| <option value="NM">NM</option> | |
| <option value="VG+">VG+</option> | |
| <option value="VG" selected>VG</option> | |
| <option value="G+">G+</option> | |
| <option value="G">G</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Selling Goal</label> | |
| <select id="goalSelect" class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| <option value="balanced">Balanced (fair price, reasonable time)</option> | |
| <option value="quick">Quick Sale (price to move fast)</option> | |
| <option value="max">Maximum Profit (hold for top dollar)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Marketplace</label> | |
| <select id="marketSelect" class="w-full px-3 py-2 bg-surface border border-gray-700 rounded-lg focus:border-primary focus:outline-none text-sm"> | |
| <option value="uk">eBay UK (£ GBP)</option> | |
| <option value="us">eBay US ($ USD)</option> | |
| <option value="eu">eBay EU (€ EUR)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Collection Data Indicator --> | |
| <div id="collectionDataIndicator" class="hidden p-3 bg-primary/10 border border-primary/30 rounded-lg"> | |
| <div class="flex items-center gap-2 text-sm text-primary"> | |
| <i data-feather="database" class="w-4 h-4"></i> | |
| <span>Loaded from collection</span> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Purchase data and ownership history included</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-wrap gap-3 mt-8 pt-6 border-t border-gray-700"> | |
| <button id="generateListingBtn" class="px-6 py-3 bg-gradient-to-r from-primary to-purple-600 rounded-lg font-medium hover:shadow-lg hover:shadow-primary/25 transition-all flex items-center gap-2"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| Generate Full Listing | |
| </button> | |
| <button id="draftAnalysisBtn" class="px-6 py-3 bg-surface border border-gray-600 rounded-lg font-medium hover:border-secondary hover:text-secondary transition-all flex items-center gap-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| Quick Preview | |
| </button> | |
| <button id="requestHelpBtn" class="px-6 py-3 text-gray-400 hover:text-gray-200 transition-all flex items-center gap-2 ml-auto"> | |
| <i data-feather="help-circle" class="w-4 h-4"></i> | |
| Need Help? | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section (Hidden by default) --> | |
| <section id="resultsSection" class="hidden space-y-6"> | |
| <!-- Title Options --> | |
| <div class="bg-surface-light rounded-xl p-6 border border-gray-800"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2"> | |
| <i data-feather="type" class="w-5 h-5 text-primary"></i> | |
| Optimized Title Options | |
| </h3> | |
| <span class="text-xs text-gray-500">Max 80 characters each</span> | |
| </div> | |
| <div id="titleOptions" class="space-y-3"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| <!-- Pricing Strategy --> | |
| <div class="bg-surface-light rounded-xl p-6 border border-gray-800"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2 mb-4"> | |
| <i data-feather="dollar-sign" class="w-5 h-5 text-accent"></i> | |
| Pricing Strategy & Comps | |
| </h3> | |
| <div id="pricingStrategy" class="grid md:grid-cols-2 gap-6"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| <!-- Fee Floor Calculator --> | |
| <div class="bg-surface-light rounded-xl p-6 border border-gray-800"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2 mb-4"> | |
| <i data-feather="shield" class="w-5 h-5 text-green-500"></i> | |
| "Don't Lose Money" Floor | |
| </h3> | |
| <div id="feeFloor" class="grid sm:grid-cols-4 gap-4"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| <!-- HTML Description --> | |
| <div class="bg-surface-light rounded-xl p-6 border border-gray-800"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2"> | |
| <i data-feather="code" class="w-5 h-5 text-secondary"></i> | |
| eBay HTML Description | |
| </h3> | |
| <button id="copyHTMLBtn" class="px-3 py-1.5 bg-primary/20 text-primary rounded-lg text-sm hover:bg-primary/30 transition-colors flex items-center gap-2"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| Copy HTML | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <textarea id="htmlOutput" rows="12" readonly | |
| class="w-full px-4 py-3 bg-surface border border-gray-700 rounded-lg font-mono text-sm text-gray-300 focus:outline-none resize-y"></textarea> | |
| </div> | |
| <div class="mt-4 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg"> | |
| <p class="text-sm text-yellow-400 flex items-start gap-2"> | |
| <i data-feather="alert-triangle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> | |
| <span>Preview this in eBay's listing editor before publishing. Some inline styles may need adjustment.</span> | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Tags --> | |
| <div class="bg-surface-light rounded-xl p-6 border border-gray-800"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2"> | |
| <i data-feather="hash" class="w-5 h-5 text-pink-500"></i> | |
| eBay Item Specifics / Tags | |
| </h3> | |
| <button id="copyTagsBtn" class="px-3 py-1.5 bg-pink-500/20 text-pink-400 rounded-lg text-sm hover:bg-pink-500/30 transition-colors flex items-center gap-2"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| Copy Tags | |
| </button> | |
| </div> | |
| <div id="tagsOutput" class="flex flex-wrap gap-2"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| <!-- Photo Shot List --> | |
| <div class="bg-surface-light rounded-xl p-6 border border-gray-800"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold flex items-center gap-2"> | |
| <i data-feather="camera" class="w-5 h-5 text-orange-500"></i> | |
| Recommended Photo Shot List | |
| </h3> | |
| <button id="analyzePhotoTypesBtn" class="px-3 py-1.5 bg-orange-500/20 text-orange-400 rounded-lg text-sm hover:bg-orange-500/30 transition-colors flex items-center gap-2"> | |
| <i data-feather="refresh-cw" class="w-4 h-4"></i> | |
| Auto-Detect Shots | |
| </button> | |
| </div> | |
| <div id="shotList" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3"> | |
| <!-- Dynamically populated --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Empty State / Help --> | |
| <section id="emptyState" class="text-center py-16"> | |
| <div class="w-24 h-24 mx-auto mb-6 rounded-2xl bg-surface-light border border-gray-700 flex items-center justify-center"> | |
| <i data-feather="disc" class="w-12 h-12 text-gray-600"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-300 mb-2">Ready to list your vinyl?</h3> | |
| <p class="text-gray-500 max-w-md mx-auto"> | |
| Upload clear photos of your record and we'll analyze, grade, and generate a complete eBay listing with competitive pricing. | |
| </p> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <vinyl-footer></vinyl-footer> | |
| <!-- Components --> | |
| <script src="components/vinyl-nav.js"></script> | |
| <script src="components/vinyl-footer.js"></script> | |
| <script src="components/stat-card.js"></script> | |
| <script src="components/ocr-service.js"></script> | |
| <script src="components/enhanced-ocr-service.js"></script> | |
| <script src="components/discogs-service.js"></script> | |
| <script src="components/deepseek-service.js"></script> | |
| <script src="components/ai-chat.js"></script> | |
| <!-- Main Script --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |