|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Full Shoes - Product Editor</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
.gradio-container { |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.preview-container { |
|
|
background: #f8fafc; |
|
|
padding: 20px; |
|
|
border-radius: 8px; |
|
|
margin-top: 20px; |
|
|
border: 1px solid #e2e8f0; |
|
|
} |
|
|
|
|
|
.copy-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.copy-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen py-10"> |
|
|
<div class="container mx-auto px-4"> |
|
|
|
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">Full Shoes</h1> |
|
|
<p class="text-xl text-gray-600">Product Editor Dashboard</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradio-container"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">🛠️ Product Entry Form</h2> |
|
|
|
|
|
|
|
|
<div id="gradio-app"> |
|
|
|
|
|
<div class="text-center py-10"> |
|
|
<div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div> |
|
|
<p>Loading product editor...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="preview-container mt-8"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-lg font-medium text-gray-800">HTML Code Preview</h3> |
|
|
<button id="copy-btn" class="copy-btn bg-blue-600 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /> |
|
|
</svg> |
|
|
Copy Code |
|
|
</button> |
|
|
</div> |
|
|
<pre id="html-code" class="bg-gray-800 text-gray-100 p-4 rounded-md overflow-x-auto text-sm"></pre> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-3xl mx-auto mt-10 bg-white p-6 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-semibold mb-4 text-gray-800">How to Use This Editor</h3> |
|
|
<ol class="list-decimal pl-5 space-y-2 text-gray-700"> |
|
|
<li>Fill in the product details (name, description, price, and image URL)</li> |
|
|
<li>View the product preview in the card display</li> |
|
|
<li>Copy the generated HTML code</li> |
|
|
<li>Paste it into your website's product page</li> |
|
|
</ol> |
|
|
<div class="mt-6 p-4 bg-blue-50 rounded-lg"> |
|
|
<h4 class="font-medium text-blue-800 mb-2">Pro Tip:</h4> |
|
|
<p class="text-blue-700">For best results, use high-quality product images with a white or neutral background.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const htmlCodeElement = document.getElementById('html-code'); |
|
|
const copyBtn = document.getElementById('copy-btn'); |
|
|
|
|
|
|
|
|
function generateProductHTML(name, description, price, imageUrl) { |
|
|
return ` |
|
|
<div style="border:2px solid #000; padding:20px; border-radius:10px; background:#fff; text-align:center; max-width:300px; margin:auto;"> |
|
|
<img src="${imageUrl}" alt="${name}" style="max-width:100%; border-radius:10px; margin-bottom:15px;"><br> |
|
|
<h2 style="font-size:1.5rem; font-weight:bold; margin-bottom:10px;">${name}</h2> |
|
|
<p style="color:#555; margin-bottom:15px;">${description}</p> |
|
|
<strong style="font-size:1.25rem; color:#000;">${price}</strong> |
|
|
</div> |
|
|
`.trim(); |
|
|
} |
|
|
|
|
|
|
|
|
function updatePreview() { |
|
|
const name = document.querySelector('input[aria-label="Nombre del producto"]')?.value || "Sample Product"; |
|
|
const description = document.querySelector('input[aria-label="Descripción"]')?.value || "This is a sample product description."; |
|
|
const price = document.querySelector('input[aria-label="Precio (ej: $120)"]')?.value || "$99.99"; |
|
|
const imageUrl = document.querySelector('input[aria-label="URL de la imagen"]')?.value || "https://via.placeholder.com/300x300"; |
|
|
|
|
|
const html = generateProductHTML(name, description, price, imageUrl); |
|
|
htmlCodeElement.textContent = html; |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('input').forEach(input => { |
|
|
input.addEventListener('input', updatePreview); |
|
|
}); |
|
|
|
|
|
|
|
|
copyBtn.addEventListener('click', function() { |
|
|
const html = htmlCodeElement.textContent; |
|
|
navigator.clipboard.writeText(html).then(() => { |
|
|
copyBtn.innerHTML = ` |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> |
|
|
</svg> |
|
|
Copied! |
|
|
`; |
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = ` |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /> |
|
|
</svg> |
|
|
Copy Code |
|
|
`; |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
updatePreview(); |
|
|
}); |
|
|
</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=widson/shoes509" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
