Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FPD Auto-Setup</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <custom-header></custom-header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Left Sidebar --> | |
| <div class="md:col-span-1"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-purple-800">Quick Actions</h2> | |
| <ul class="space-y-2"> | |
| <li> | |
| <button class="w-full text-left bg-purple-100 text-purple-800 px-4 py-2 rounded-lg hover:bg-purple-200 transition"> | |
| <i class="fas fa-bolt mr-2"></i>Run Auto-Setup | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left bg-white border border-purple-200 text-purple-800 px-4 py-2 rounded-lg hover:bg-purple-50 transition"> | |
| <i class="fas fa-tasks mr-2"></i>Bulk Process Products | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left bg-white border border-purple-200 text-purple-800 px-4 py-2 rounded-lg hover:bg-purple-50 transition"> | |
| <i class="fas fa-book mr-2"></i>Templates Library | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left bg-white border border-purple-200 text-purple-800 px-4 py-2 rounded-lg hover:bg-purple-50 transition"> | |
| <i class="fas fa-history mr-2"></i>Setup History | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-purple-800">Plugin Status</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">FPD Installed:</span> | |
| <span class="text-green-600 font-semibold"> | |
| <i class="fas fa-check-circle mr-1"></i>Active | |
| </span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">Version:</span> | |
| <span class="text-purple-800 font-semibold">2.3.1</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">Last Run:</span> | |
| <span class="text-purple-800 font-semibold">2 hours ago</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-600">Processed Products:</span> | |
| <span class="text-purple-800 font-semibold">42</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Panel --> | |
| <div class="md:col-span-2"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold text-purple-800">Product Setup Wizard</h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-purple-100 text-purple-800 px-4 py-1 rounded-lg hover:bg-purple-200 transition"> | |
| <i class="fas fa-save mr-1"></i>Save Template | |
| </button> | |
| <button class="bg-purple-600 text-white px-4 py-1 rounded-lg hover:bg-purple-700 transition"> | |
| <i class="fas fa-play mr-1"></i>Execute | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Wizard Steps --> | |
| <div class="mb-6"> | |
| <div class="flex md:space-x-2 mb-4"> | |
| <div class="w-1/4 md:w-auto"> | |
| <button class="w-full text-center bg-purple-600 text-white px-4 py-2 rounded-lg transition fpd-pulse"> | |
| <i class="fas fa-layer-group mr-1"></i>1. Layers | |
| </button> | |
| </div> | |
| <div class="w-1/4 md:w-auto"> | |
| <button class="w-full text-center bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-palette mr-1"></i>2. Colors | |
| </button> | |
| </div> | |
| <div class="w-1/4 md:w-auto"> | |
| <button class="w-full text-center bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-font mr-1"></i>3. Text Options | |
| </button> | |
| </div> | |
| <div class="w-1/4 md:w-auto"> | |
| <button class="w-full text-center bg-gray-200 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-sliders-h mr-1"></i>4. Advanced | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Layer Configuration --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-purple-800">Product Layers Configuration</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="mr-3 h-5 w-5 text-purple-600" checked> | |
| <span class="font-medium">Base Layer</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <div class="tooltip"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| <span class="tooltip-text">Base design layer that serves as foundation</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="mr-3 h-5 w-5 text-purple-600" checked> | |
| <span class="font-medium">Text Layer</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <div class="tooltip"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| <span class="tooltip-text">Customizable text customers can add</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="mr-3 h-5 w-5 text-purple-600" checked> | |
| <span class="font-medium">Image Upload Layer</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-purple-600 hover:text-purple-800"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <div class="tooltip"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| <span class="tooltip-text">Allow customers to upload their own images</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="flex items-center text-purple-600 hover:text-purple-800 mt-3"> | |
| <i class="fas fa-plus-circle mr-2"></i>Add New Layer | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Product Selection --> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 text-purple-800">Apply to Products</h3> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm flex items-center"> | |
| T-Shirt #1024 <button class="ml-2 text-purple-600 hover:text-purple-800"><i class="fas fa-times"></i></button> | |
| </span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm flex items-center"> | |
| Hoodie #2048 <button class="ml-2 text-purple-600 hover:text-purple-800"><i class="fas fa-times"></i></button> | |
| </span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm flex items-center"> | |
| Coffee Mug #3056 <button class="ml-2 text-purple-600 hover:text-purple-800"><i class="fas fa-times"></i></button> | |
| </span> | |
| <button class="text-purple-600 hover:text-purple-800 text-sm flex items-center"> | |
| <i class="fas fa-plus-circle mr-1"></i>Add Product | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>All Products</option> | |
| <option>Print-on-Demand Category</option> | |
| <option>Customizable Category</option> | |
| <option>Selected Products Only</option> | |
| <option>Coffee Mugs Category</option> | |
| </select> | |
| </div> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"> | |
| <i class="fas fa-search mr-1"></i>Filter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-purple-800">Recent Activity</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="bg-green-100 text-green-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Successfully updated 5 products</h4> | |
| <p class="text-sm text-gray-500">2 hours ago</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="bg-blue-100 text-blue-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Bulk processing started</h4> | |
| <p class="text-sm text-gray-500">5 hours ago</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-start p-3 hover:bg-gray-50 rounded-lg transition"> | |
| <div class="bg-purple-100 text-purple-800 p-2 rounded-full mr-3"> | |
| <i class="fas fa-file-import"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h4 class="font-medium">Imported template "Premium T-Shirt"</h4> | |
| <p class="text-sm text-gray-500">Yesterday</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-gray-400">FPD Auto-Setup Plugin v1.0.0</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-wordpress"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script src="components/header.js"></script> | |
| <script src="script.js"></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=kaidjuric/fpd-auto-setup" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |