Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Multi-Marketplace Lister | Sell on Poshmark, Mercari & eBay</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .platform-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .platform-card { | |
| transition: all 0.3s ease; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #6e8efb; | |
| color: #6e8efb; | |
| } | |
| .image-preview { | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .loading-spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255,255,255,.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-store text-2xl"></i> | |
| <h1 class="text-2xl font-bold">CrossList</h1> | |
| </div> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:underline">Home</a></li> | |
| <li><a href="#" class="hover:underline">Pricing</a></li> | |
| <li><a href="#" class="hover:underline">FAQ</a></li> | |
| <li><a href="#" class="hover:underline">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <button class="bg-white text-purple-600 px-4 py-2 rounded-full font-semibold hover:bg-purple-100 transition">Sign In</button> | |
| </div> | |
| <div class="mt-12 text-center pb-16"> | |
| <h2 class="text-4xl font-bold mb-4">List Once, Sell Everywhere</h2> | |
| <p class="text-xl max-w-2xl mx-auto">Post your items to Poshmark, Mercari, and eBay simultaneously with one simple form.</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12 -mt-10"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <!-- Progress Bar --> | |
| <div class="bg-gray-200 h-2"> | |
| <div class="progress-bar bg-purple-600 h-2 w-1/4"></div> | |
| </div> | |
| <!-- Form Tabs --> | |
| <div class="flex border-b"> | |
| <button class="tab-active px-6 py-4 font-medium" data-tab="details">Item Details</button> | |
| <button class="px-6 py-4 font-medium text-gray-500" data-tab="options">Marketplace Options</button> | |
| <button class="px-6 py-4 font-medium text-gray-500" data-tab="review">Review & Post</button> | |
| <button class="px-6 py-4 font-medium text-gray-500" data-tab="success">Success</button> | |
| </div> | |
| <!-- Form Content - Item Details --> | |
| <div class="p-8 tab-content" id="details-tab"> | |
| <h3 class="text-2xl font-bold mb-6">Tell us about your item</h3> | |
| <!-- Image Upload --> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-2">Photos (up to 12)</label> | |
| <div class="grid grid-cols-3 md:grid-cols-6 gap-4" id="image-container"> | |
| <div class="image-preview border-2 border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center cursor-pointer hover:border-purple-400 transition"> | |
| <div class="text-center"> | |
| <i class="fas fa-camera text-gray-400 text-2xl mb-1"></i> | |
| <p class="text-xs text-gray-500">Add Photo</p> | |
| </div> | |
| <input type="file" id="image-upload" class="hidden" accept="image/*" multiple> | |
| </div> | |
| <div class="image-preview hidden"></div> | |
| <div class="image-preview hidden"></div> | |
| <div class="image-preview hidden"></div> | |
| <div class="image-preview hidden"></div> | |
| <div class="image-preview hidden"></div> | |
| </div> | |
| </div> | |
| <!-- Item Details Form --> | |
| <form id="item-form"> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="title" class="block text-gray-700 font-medium mb-2">Title*</label> | |
| <input type="text" id="title" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400" placeholder="e.g. Nike Air Jordan 1 Retro High OG"> | |
| </div> | |
| <div> | |
| <label for="category" class="block text-gray-700 font-medium mb-2">Category*</label> | |
| <select id="category" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400"> | |
| <option value="">Select a category</option> | |
| <option value="clothing">Clothing</option> | |
| <option value="shoes">Shoes</option> | |
| <option value="accessories">Accessories</option> | |
| <option value="electronics">Electronics</option> | |
| <option value="home">Home</option> | |
| <option value="beauty">Beauty</option> | |
| <option value="toys">Toys</option> | |
| <option value="other">Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="description" class="block text-gray-700 font-medium mb-2">Description*</label> | |
| <textarea id="description" required rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400" placeholder="Describe your item in detail..."></textarea> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div> | |
| <label for="brand" class="block text-gray-700 font-medium mb-2">Brand</label> | |
| <input type="text" id="brand" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400" placeholder="e.g. Nike, Apple"> | |
| </div> | |
| <div> | |
| <label for="condition" class="block text-gray-700 font-medium mb-2">Condition*</label> | |
| <select id="condition" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400"> | |
| <option value="">Select condition</option> | |
| <option value="new">New with tags</option> | |
| <option value="new_no_tags">New without tags</option> | |
| <option value="excellent">Excellent used condition</option> | |
| <option value="good">Good used condition</option> | |
| <option value="fair">Fair used condition</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="color" class="block text-gray-700 font-medium mb-2">Color</label> | |
| <input type="text" id="color" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400" placeholder="e.g. Black, Red"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6 mb-8"> | |
| <div> | |
| <label for="price" class="block text-gray-700 font-medium mb-2">Price*</label> | |
| <div class="relative"> | |
| <span class="absolute left-3 top-2 text-gray-500">$</span> | |
| <input type="number" id="price" required step="0.01" min="0" class="w-full pl-8 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400" placeholder="0.00"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="shipping" class="block text-gray-700 font-medium mb-2">Shipping Options</label> | |
| <select id="shipping" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-purple-400 focus:border-purple-400"> | |
| <option value="free">Free shipping</option> | |
| <option value="calculated">Calculated shipping</option> | |
| <option value="flat">Flat rate: $4.99</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button type="button" class="px-6 py-2 text-gray-600 font-medium rounded-lg border hover:bg-gray-50">Cancel</button> | |
| <button type="button" id="next-to-options" class="px-6 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition">Next: Marketplace Options</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Form Content - Marketplace Options --> | |
| <div class="p-8 tab-content hidden" id="options-tab"> | |
| <h3 class="text-2xl font-bold mb-6">Select Marketplaces</h3> | |
| <!-- Marketplace Selection --> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-4">Select Marketplaces*</label> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <!-- Poshmark Card --> | |
| <div class="platform-card bg-white border rounded-lg p-4 cursor-pointer hover:border-purple-400"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://play-lh.googleusercontent.com/5Xz2y0Z3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9" alt="Poshmark" class="w-8 h-8 rounded-full mr-2"> | |
| <h4 class="font-semibold">Poshmark</h4> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Best for clothing, shoes & accessories</p> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="poshmark" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-400" checked> | |
| <label for="poshmark" class="text-sm">List on Poshmark</label> | |
| </div> | |
| </div> | |
| <!-- Mercari Card --> | |
| <div class="platform-card bg-white border rounded-lg p-4 cursor-pointer hover:border-purple-400"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://play-lh.googleusercontent.com/5Xz2y0Z3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9" alt="Mercari" class="w-8 h-8 rounded-full mr-2"> | |
| <h4 class="font-semibold">Mercari</h4> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Great for electronics, home goods & more</p> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="mercari" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-400" checked> | |
| <label for="mercari" class="text-sm">List on Mercari</label> | |
| </div> | |
| </div> | |
| <!-- eBay Card --> | |
| <div class="platform-card bg-white border rounded-lg p-4 cursor-pointer hover:border-purple-400"> | |
| <div class="flex items-center mb-3"> | |
| <img src="https://play-lh.googleusercontent.com/5Xz2y0Z3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9" alt="eBay" class="w-8 h-8 rounded-full mr-2"> | |
| <h4 class="font-semibold">eBay</h4> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Ideal for collectibles and rare items</p> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="ebay" class="mr-2 h-4 w-4 text-purple-600 focus:ring-purple-400" checked> | |
| <label for="ebay" class="text-sm">List on eBay</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button type="button" id="back-to-details" class="px-6 py-2 text-gray-600 font-medium rounded-lg border hover:bg-gray-50">Back</button> | |
| <button type="button" id="next-to-review" class="px-6 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition">Next: Review & Post</button> | |
| </div> | |
| </div> | |
| <!-- Form Content - Review & Post --> | |
| <div class="p-8 tab-content hidden" id="review-tab"> | |
| <h3 class="text-2xl font-bold mb-6">Review Your Listing</h3> | |
| <div class="grid md:grid-cols-3 gap-8 mb-8"> | |
| <!-- Item Preview --> | |
| <div class="md:col-span-2"> | |
| <div class="bg-white border rounded-lg p-6"> | |
| <h4 class="font-semibold text-lg mb-4">Item Preview</h4> | |
| <div class="grid grid-cols-3 gap-2 mb-4" id="review-images"> | |
| <!-- Images will be added here by JavaScript --> | |
| </div> | |
| <h5 class="font-medium text-lg" id="review-title">Item Title</h5> | |
| <p class="text-gray-600 mb-2" id="review-price">$0.00</p> | |
| <p class="text-sm text-gray-500 mb-4" id="review-condition">Condition: New</p> | |
| <p class="text-gray-700" id="review-description">Item description goes here...</p> | |
| </div> | |
| </div> | |
| <!-- Marketplace Summary --> | |
| <div> | |
| <div class="bg-white border rounded-lg p-6"> | |
| <h4 class="font-semibold text-lg mb-4">Posting To</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center" id="poshmark-review"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Poshmark</span> | |
| </li> | |
| <li class="flex items-center" id="mercari-review"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Mercari</span> | |
| </li> | |
| <li class="flex items-center" id="ebay-review"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>eBay</span> | |
| </li> | |
| </ul> | |
| <div class="mt-6 pt-4 border-t"> | |
| <p class="text-sm text-gray-500">By clicking "Post Listings", you agree to our Terms of Service.</p> | |
| <button id="post-listings" class="w-full mt-4 px-6 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition flex items-center justify-center"> | |
| <span>Post Listings</span> | |
| <span class="loading-spinner ml-2 hidden"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button type="button" id="back-to-options" class="px-6 py-2 text-gray-600 font-medium rounded-lg border hover:bg-gray-50">Back</button> | |
| <button type="button" class="px-6 py-2 text-gray-600 font-medium rounded-lg border hover:bg-gray-50">Save Draft</button> | |
| </div> | |
| </div> | |
| <!-- Form Content - Success --> | |
| <div class="p-8 tab-content hidden" id="success-tab"> | |
| <div class="text-center py-12"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check text-green-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">Listings Posted Successfully!</h3> | |
| <p class="text-gray-600 mb-8 max-w-md mx-auto">Your item has been successfully posted to all selected marketplaces. You can view and manage your listings from your dashboard.</p> | |
| <div class="grid md:grid-cols-3 gap-4 max-w-2xl mx-auto mb-8"> | |
| <div class="bg-white border rounded-lg p-4"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <img src="https://play-lh.googleusercontent.com/5Xz2y0Z3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9" alt="Poshmark" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="font-medium">Poshmark</span> | |
| </div> | |
| <a href="#" class="text-sm text-purple-600 hover:underline" id="poshmark-link">View Listing</a> | |
| </div> | |
| <div class="bg-white border rounded-lg p-4"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <img src="https://play-lh.googleusercontent.com/5Xz2y0Z3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9" alt="Mercari" class="w-8 h-8 rounded-full mr-2> | |
| <span class="font-medium">Mercari</span> | |
| </div> | |
| <a href="#" class="text-sm text-purple-600 hover:underline" id="mercari-link">View Listing</a> | |
| </div> | |
| <div class="bg-white border rounded-lg p-4"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <img src="https://play-lh.googleusercontent.com/5Xz2y0Z3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9y9Q3XqQZQ0Q9" alt="eBay" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="font-medium">eBay</span> | |
| </div> | |
| <a href="#" class="text-sm text-purple-600 hover:underline" id="ebay-link">View Listing</a> | |
| </div> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button id="post-another" class="px-6 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition">Post Another Item</button> | |
| <button class="px-6 py-2 border border-gray-300 font-medium rounded-lg hover:bg-gray-50 transition">Go to Dashboard</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <section class="mt-16"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Why Use CrossList?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-stopwatch"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Save Time</h3> | |
| <p class="text-gray-600">List once and your item appears on multiple marketplaces simultaneously, saving you hours of work.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Maximize Exposure</h3> | |
| <p class="text-gray-600">Reach millions of potential buyers across Poshmark, Mercari, and eBay with a single listing.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> | |
| <div class="text-purple-600 text-4xl mb-4"> | |
| <i class="fas fa-sliders-h"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Customize Per Platform</h3> | |
| <p class="text-gray-600">Tailor your listings for each marketplace's unique requirements while maintaining consistency.</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12 mt-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">CrossList</h3> | |
| <p class="text-gray-400">The easiest way to sell across multiple marketplaces with one simple listing.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Marketplaces</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Poshmark</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Mercari</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">eBay</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Coming Soon</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Selling Tips</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pricing Guide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">API</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| <p class="text-gray-400">Subscribe to our newsletter</p> | |
| <div class="mt-2 flex"> | |
| <input type="email" placeholder="Your email" class="px-3 py-2 text-gray-800 rounded-l"> | |
| <button class="bg-purple-600 px-3 py-2 rounded-r hover:bg-purple-700"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 CrossList. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Global variables | |
| let uploadedImages = []; | |
| let selectedPlatforms = { | |
| poshmark: true, | |
| mercari: true, | |
| ebay: true | |
| }; | |
| // Mock API endpoints | |
| const mockAPIs = { | |
| poshmark: { | |
| postListing: function(item) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| resolve({ | |
| success: true, | |
| listingId: `posh_${Math.random().toString(36).substr(2, 9)}`, | |
| url: "https://poshmark.com/closet/listing/" + Math.random().toString(36).substr(2, 9) | |
| }); | |
| }, 1000); | |
| }); | |
| } | |
| }, | |
| mercari: { | |
| postListing: function(item) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| resolve({ | |
| success: true, | |
| listingId: `merc_${Math.random().toString(36).substr(2, 9)}`, | |
| url: "https://mercari.com/items/" + Math.random().toString(36).substr(2, 9) | |
| }); | |
| }, 1500); | |
| }); | |
| } | |
| }, | |
| ebay: { | |
| postListing: function(item) { | |
| return new Promise((resolve) => { | |
| setTimeout(() => { | |
| resolve({ | |
| success: true, | |
| listingId: `ebay_${Math.random().toString(36).substr(2, 9)}`, | |
| url: "https://ebay.com/itm/" + Math.random().toString(36).substr(2, 9) | |
| }); | |
| }, 2000); | |
| }); | |
| } | |
| } | |
| }; | |
| // Tab switching functionality | |
| function switchTab(tabName) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.add('hidden'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(`${tabName}-tab`).classList.remove('hidden'); | |
| // Update tab styling | |
| document.querySelectorAll('.flex.border-b button').forEach(tab => { | |
| tab.classList.remove('tab-active', 'text-purple-600'); | |
| tab.classList.add('text-gray-500'); | |
| if (tab.dataset.tab === tabName) { | |
| tab.classList.add('tab-active', 'text-purple-600'); | |
| tab.classList.remove('text-gray-500'); | |
| } | |
| }); | |
| // Update progress bar | |
| const progressBar = document.querySelector('.progress-bar'); | |
| if (tabName === 'details') { | |
| progressBar.style.width = '25%'; | |
| } else if (tabName === 'options') { | |
| progressBar.style.width = '50%'; | |
| } else if (tabName === 'review') { | |
| progressBar.style.width = '75%'; | |
| updateReviewSection(); | |
| } else if (tabName === 'success') { | |
| progressBar.style.width = '100%'; | |
| } | |
| } | |
| // Image upload functionality | |
| document.getElementById('image-upload').addEventListener('change', function(e) { | |
| const files = e.target.files; | |
| const previews = document.querySelectorAll('#image-container .image-preview'); | |
| // Clear previous uploads | |
| uploadedImages = []; | |
| previews.forEach((preview, index) => { | |
| if (index > 0) preview.classList.add('hidden'); | |
| preview.style.backgroundImage = ''; | |
| preview.innerHTML = ''; | |
| }); | |
| // Process new files | |
| for (let i = 0; i < Math.min(files.length, 6); i++) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| uploadedImages.push(event.target.result); | |
| const previewBox = previews[i]; | |
| previewBox.style.backgroundImage = `url(${event.target.result})`; | |
| previewBox.innerHTML = ''; | |
| previewBox.classList.remove('border-dashed'); | |
| if (i === 0) { | |
| // First box is the upload box, we've replaced it | |
| // Add a new upload box at the end if we have space | |
| if (files.length < 6) { | |
| const uploadBox = document.createElement('div'); | |
| uploadBox.className = 'image-preview border-2 border-dashed border-gray-300 rounded-lg h-24 flex items-center justify-center cursor-pointer hover:border-purple-400 transition'; | |
| uploadBox.innerHTML = ` | |
| <div class="text-center"> | |
| <i class="fas fa-camera text-gray-400 text-2xl mb-1"></i> | |
| <p class="text-xs text-gray-500">Add Photo</p> | |
| </div> | |
| <input type="file" class="hidden" accept="image/*" multiple> | |
| `; | |
| uploadBox.querySelector('input').addEventListener('change', function(e) { | |
| document.getElementById('image-upload').dispatchEvent(new Event('change')); | |
| }); | |
| document.getElementById('image-container').appendChild(uploadBox); | |
| } | |
| } | |
| } | |
| reader.readAsDataURL(files[i]); | |
| } | |
| }); | |
| // Marketplace selection | |
| document.getElementById('poshmark').addEventListener('change', function() { | |
| selectedPlatforms.poshmark = this.checked; | |
| }); | |
| document.getElementById('mercari').addEventListener('change', function() { | |
| selectedPlatforms.mercari = this.checked; | |
| }); | |
| document.getElementById('ebay').addEventListener('change', function() { | |
| selectedPlatforms.ebay = this.checked; | |
| }); | |
| // Navigation buttons | |
| document.getElementById('next-to-options').addEventListener('click', function() { | |
| // Validate form | |
| const form = document.getElementById('item-form'); | |
| const requiredFields = form.querySelectorAll('[required]'); | |
| let isValid = true; | |
| requiredFields.forEach(field => { | |
| if (!field.value) { | |
| field.classList.add('border-red-500'); | |
| isValid = false; | |
| } else { | |
| field.classList.remove('border-red-500'); | |
| } | |
| }); | |
| if (isValid) { | |
| switchTab('options'); | |
| } else { | |
| alert('Please fill in all required fields.'); | |
| } | |
| }); | |
| document.getElementById('back-to-details').addEventListener('click', function() { | |
| switchTab('details'); | |
| }); | |
| document.getElementById('next-to-review').addEventListener('click', function() { | |
| // Check if at least one platform is selected | |
| if (!selectedPlatforms.poshmark && !selectedPlatforms.mercari && !selectedPlatforms.ebay) { | |
| alert('Please select at least one marketplace to post to.'); | |
| return; | |
| } | |
| switchTab('review'); | |
| }); | |
| document.getElementById('back-to-options').addEventListener('click', function() { | |
| switchTab('options'); | |
| }); | |
| // Update review section with form data | |
| function updateReviewSection() { | |
| // Update images | |
| const reviewImagesContainer = document.getElementById('review-images'); | |
| reviewImagesContainer.innerHTML = ''; | |
| uploadedImages.slice(0, 3).forEach(image => { | |
| const imgDiv = document.createElement('div'); | |
| imgDiv.className = 'h-24 bg-cover bg-center rounded'; | |
| imgDiv.style.backgroundImage = `url(${image})`; | |
| reviewImagesContainer.appendChild(imgDiv); | |
| }); | |
| // Update item details | |
| document.getElementById('review-title').textContent = document.getElementById('title').value; | |
| document.getElementById('review-price').textContent = `$${parseFloat(document.getElementById('price').value).toFixed(2)}`; | |
| document.getElementById('review-condition').textContent = `Condition: ${document.getElementById('condition').options[document.getElementById('condition').selectedIndex].text}`; | |
| document.getElementById('review-description').textContent = document.getElementById('description').value; | |
| // Update platform selection | |
| document.getElementById('poshmark-review').style.display = selectedPlatforms.poshmark ? 'flex' : 'none'; | |
| document.getElementById('mercari-review').style.display = selectedPlatforms.mercari ? 'flex' : 'none'; | |
| document.getElementById('ebay-review').style.display = selectedPlatforms.ebay ? 'flex' : 'none'; | |
| } | |
| // Post listings to mock APIs | |
| document.getElementById('post-listings').addEventListener('click', async function() { | |
| const button = this; | |
| const spinner = button.querySelector('.loading-spinner'); | |
| // Show loading state | |
| button.disabled = true; | |
| spinner.classList.remove('hidden'); | |
| // Prepare item data | |
| const item = { | |
| title: document.getElementById('title').value, | |
| description: document.getElementById('description').value, | |
| price: parseFloat(document.getElementById('price').value).toFixed(2), | |
| images: uploadedImages, | |
| category: document.getElementById('category').value, | |
| brand: document.getElementById('brand').value, | |
| condition: document.getElementById('condition').value, | |
| color: document.getElementById('color').value, | |
| shipping: document.getElementById('shipping').value | |
| }; | |
| try { | |
| // Post to selected platforms | |
| const results = {}; | |
| if (selectedPlatforms.poshmark) { | |
| results.poshmark = await mockAPIs.poshmark.postListing(item); | |
| } | |
| if (selectedPlatforms.mercari) { | |
| results.mercari = await mockAPIs.mercari.postListing(item); | |
| } | |
| if (selectedPlatforms.ebay) { | |
| results.ebay = await mockAPIs.ebay.postListing(item); | |
| } | |
| // Update success links | |
| if (results.poshmark) { | |
| document.getElementById('poshmark-link').href = results.poshmark.url; | |
| } | |
| if (results.mercari) { | |
| document.getElementById('mercari-link').href = results.mercari.url; | |
| } | |
| if (results.ebay) { | |
| document.getElementById('ebay-link').href = results.ebay.url; | |
| } | |
| // Show success tab | |
| switchTab('success'); | |
| } catch (error) { | |
| console.error('Error posting listings:', error); | |
| alert('There was an error posting your listings. Please try again.'); | |
| } finally { | |
| button.disabled = false; | |
| spinner.classList.add('hidden'); | |
| } | |
| }); | |
| // Post another item | |
| document.getElementById('post-another').addEventListener('click', function() { | |
| // Reset form | |
| document.getElementById('item-form').reset(); | |
| uploadedImages = []; | |
| document.querySelectorAll('#image-container .image-preview').forEach((preview, index) => { | |
| if (index > 0) preview.classList.add('hidden'); | |
| preview.style.backgroundImage = ''; | |
| preview.innerHTML = ''; | |
| if (index === 0) { | |
| preview.innerHTML = ` | |
| <div class="text-center"> | |
| <i class="fas fa-camera text-gray-400 text-2xl mb-1"></i> | |
| <p class="text-xs text-gray-500">Add Photo</p> | |
| </div> | |
| `; | |
| preview.classList.add('border-dashed'); | |
| } | |
| }); | |
| // Reset platform selections | |
| selectedPlatforms = { | |
| poshmark: true, | |
| mercari: true, | |
| ebay: true | |
| }; | |
| document.getElementById('poshmark').checked = true; | |
| document.getElementById('mercari').checked = true; | |
| document.getElementById('ebay').checked = true; | |
| // Go back to first tab | |
| switchTab('details'); | |
| }); | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Make first image upload box clickable | |
| document.querySelector('.image-preview').addEventListener('click', function() { | |
| document.getElementById('image-upload').click(); | |
| }); | |
| // Initialize tab system | |
| switchTab('details'); | |
| }); | |
| </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=Philly123ez/multilisttool" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |