|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Generador de Prompts para Plugins WordPress</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> |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.prompt-container { |
|
|
transition: all 0.3s ease; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.prompt-container.show { |
|
|
max-height: 1000px; |
|
|
} |
|
|
.customize-panel { |
|
|
transition: max-height 0.5s ease-in-out; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.customize-panel.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
#promptOutput { |
|
|
white-space: pre-wrap; |
|
|
word-break: break-word; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-indigo-700 mb-4">Generador de Prompts para Plugins WordPress</h1> |
|
|
<p class="text-gray-600 text-lg max-w-2xl mx-auto">Crea el prompt perfecto para generar plugins de WordPress con las caracter铆sticas que necesitas.</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Paso 1: Informaci贸n B谩sica</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Nombre del Plugin</label> |
|
|
<input type="text" id="pluginName" placeholder="Mi Plugin Incre铆ble" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Prop贸sito/Funcionalidad</label> |
|
|
<textarea id="pluginPurpose" rows="2" placeholder="Describe brevemente qu茅 debe hacer tu plugin..." |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Paso 2: Seleccionar Caracter铆sticas</h2> |
|
|
<p class="text-gray-600 mb-6">Selecciona las caracter铆sticas que debe incluir tu plugin:</p> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-8"> |
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'admin_panel')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="admin_panel" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="admin_panel" class="ml-3 font-medium text-gray-700">Panel de Administraci贸n</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Interfaz personalizada en el admin para configuraciones</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'shortcodes')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="shortcodes" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="shortcodes" class="ml-3 font-medium text-gray-700">Shortcodes</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Crea shortcodes personalizados para mostrar contenido</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'widgets')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="widgets" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="widgets" class="ml-3 font-medium text-gray-700">Widgets</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">A帽ade widgets personalizados para arrastrar y soltar</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'rest_api')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="rest_api" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="rest_api" class="ml-3 font-medium text-gray-700">REST API</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Expone endpoints para integraciones externas</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'cpt')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="cpt" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="cpt" class="ml-3 font-medium text-gray-700">Tipos de Entrada Personalizados</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Crea y gestiona tipos de contenido personalizados</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'taxonomy')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="taxonomy" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="taxonomy" class="ml-3 font-medium text-gray-700">Taxonom铆as Personalizadas</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">A帽ade sistemas de clasificaci贸n y organizaci贸n</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'settings_page')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="settings_page" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="settings_page" class="ml-3 font-medium text-gray-700">P谩gina de Configuraci贸n</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Crea opciones para personalizar el comportamiento</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'cron_jobs')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="cron_jobs" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="cron_jobs" class="ml-3 font-medium text-gray-700">Tareas Programadas</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Programa tareas autom谩ticas en segundo plano</p> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-gray-50 border border-gray-200 rounded-lg p-4 cursor-pointer transition-all" |
|
|
onclick="toggleFeature(this, 'multilingual')"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="multilingual" class="h-5 w-5 text-indigo-600"> |
|
|
<label for="multilingual" class="ml-3 font-medium text-gray-700">Multiling眉e</label> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2">Preparado para traducci贸n (i18n ready)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-center justify-center mb-6"> |
|
|
<button id="advancedToggle" class="flex items-center text-indigo-600 hover:text-indigo-800"> |
|
|
<span class="mr-2">Mostrar Opciones Avanzadas</span> |
|
|
<i class="fas fa-chevron-down text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="advancedOptions" class="customize-panel border-t border-gray-200 pt-6"> |
|
|
<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">Enfoque de Desarrollo</label> |
|
|
<select id="devApproach" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="oop">Programaci贸n Orientada a Objetos (POO)</option> |
|
|
<option value="functional">Programaci贸n Funcional</option> |
|
|
<option value="mixed">Enfoque Mixto</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Est谩ndares de C贸digo</label> |
|
|
<select id="codeStandards" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option value="wp">Est谩ndares de Codificaci贸n WordPress</option> |
|
|
<option value="psr">Est谩ndares PSR</option> |
|
|
<option value="custom">Est谩ndares personalizados</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Requisitos de Seguridad</label> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="nonces" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="nonces" class="ml-2 text-gray-700">Nonces para todos los formularios</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="sanitization" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="sanitization" class="ml-2 text-gray-700">Saneamiento de datos</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="escaping" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="escaping" class="ml-2 text-gray-700">Escape de salida</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="capabilities" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="capabilities" class="ml-2 text-gray-700">Verificaci贸n de capacidades</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Pruebas</label> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="unit_tests" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="unit_tests" class="ml-2 text-gray-700">Pruebas unitarias</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="integration_tests" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="integration_tests" class="ml-2 text-gray-700">Pruebas de integraci贸n</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="phpunit" class="h-4 w-4 text-indigo-600"> |
|
|
<label for="phpunit" class="ml-2 text-gray-700">Configuraci贸n PHPUnit</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Paso 3: Requisitos Adicionales</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Integraciones con Third-Party</label> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center" |
|
|
onclick="toggleIntegration(this)" data-value="woocommerce"> |
|
|
<input type="checkbox" class="hidden" id="int_woocommerce" value="woocommerce"> |
|
|
WooCommerce <i class="fas fa-check ml-2"></i> |
|
|
</span> |
|
|
<span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center" |
|
|
onclick="toggleIntegration(this)" data-value="gravity_forms"> |
|
|
<input type="checkbox" class="hidden" id="int_gravity_forms" value="gravity_forms"> |
|
|
Gravity Forms <i class="fas fa-check ml-2"></i> |
|
|
</span> |
|
|
<span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center" |
|
|
onclick="toggleIntegration(this)" data-value="cf7"> |
|
|
<input type="checkbox" class="hidden" id="int_cf7" value="cf7"> |
|
|
Contact Form 7 <i class="fas fa-check ml-2"></i> |
|
|
</span> |
|
|
<span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center" |
|
|
onclick="toggleIntegration(this)" data-value="elementor"> |
|
|
<input type="checkbox" class="hidden" id="int_elementor" value="elementor"> |
|
|
Elementor <i class="fas fa-check ml-2"></i> |
|
|
</span> |
|
|
<span class="integration-tag bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm flex items-center" |
|
|
onclick="toggleIntegration(this)" data-value="acf"> |
|
|
<input type="checkbox" class="hidden" id="int_acf" value="acf"> |
|
|
ACF <i class="fas fa-check ml-2"></i> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="customRequirements" class="block text-sm font-medium text-gray-700 mb-2">Requisitos Personalizados</label> |
|
|
<textarea id="customRequirements" rows="3" placeholder="Cualquier otro requisito espec铆fico para tu plugin..." |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 mb-4"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mt-8"> |
|
|
<button id="generatePrompt" class="px-8 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors flex items-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Generar Prompt |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="prompt-container bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Tu Prompt Generado</h2> |
|
|
<button id="copyPrompt" class="flex items-center text-sm text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-copy mr-1"></i> Copiar al Portapapeles |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="promptOutput" class="bg-gray-50 p-6 rounded-lg text-gray-800 font-mono text-sm overflow-x-auto"></div> |
|
|
|
|
|
<div class="mt-6 text-right"> |
|
|
<button id="copyPrompt" class="px-6 py-2 bg-indigo-100 text-indigo-700 font-medium rounded-lg hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors flex items-center ml-auto" onclick="copyToClipboard()"> |
|
|
<i class="fas fa-copy mr-2"></i> Copiar Prompt |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function toggleFeature(card, featureId) { |
|
|
const checkbox = card.querySelector('input[type="checkbox"]'); |
|
|
checkbox.checked = !checkbox.checked; |
|
|
|
|
|
if (checkbox.checked) { |
|
|
card.classList.add('bg-indigo-50', 'border-indigo-300'); |
|
|
} else { |
|
|
card.classList.remove('bg-indigo-50', 'border-indigo-300'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function toggleIntegration(tag) { |
|
|
const checkbox = tag.querySelector('input[type="checkbox"]'); |
|
|
checkbox.checked = !checkbox.checked; |
|
|
|
|
|
if (checkbox.checked) { |
|
|
tag.classList.add('bg-indigo-200', 'text-indigo-900'); |
|
|
} else { |
|
|
tag.classList.remove('bg-indigo-200', 'text-indigo-900'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('advancedToggle').addEventListener('click', function() { |
|
|
const panel = document.getElementById('advancedOptions'); |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
panel.classList.toggle('open'); |
|
|
|
|
|
if (panel.classList.contains('open')) { |
|
|
this.innerHTML = '<span class="mr-2">Ocultar Opciones Avanzadas</span><i class="fas fa-chevron-up text-sm"></i>'; |
|
|
} else { |
|
|
this.innerHTML = '<span class="mr-2">Mostrar Opciones Avanzadas</span><i class="fas fa-chevron-down text-sm"></i>'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generatePrompt').addEventListener('click', function() { |
|
|
const pluginName = document.getElementById('pluginName').value.trim(); |
|
|
const pluginPurpose = document.getElementById('pluginPurpose').value.trim(); |
|
|
|
|
|
if (!pluginName || !pluginPurpose) { |
|
|
alert('Por favor completa el nombre y prop贸sito del plugin antes de generar el prompt.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const features = []; |
|
|
document.querySelectorAll('.feature-card input[type="checkbox"]:checked').forEach(checkbox => { |
|
|
const label = checkbox.nextElementSibling.textContent; |
|
|
features.push(label); |
|
|
}); |
|
|
|
|
|
|
|
|
const devApproach = document.getElementById('devApproach').value; |
|
|
const codeStandards = document.getElementById('codeStandards').value; |
|
|
|
|
|
|
|
|
const security = []; |
|
|
document.querySelectorAll('#advancedOptions input[type="checkbox"]:checked').forEach(checkbox => { |
|
|
security.push(checkbox.nextElementSibling.textContent); |
|
|
}); |
|
|
|
|
|
|
|
|
const integrations = []; |
|
|
document.querySelectorAll('.integration-tag input[type="checkbox"]:checked').forEach(checkbox => { |
|
|
integrations.push(checkbox.value); |
|
|
}); |
|
|
|
|
|
const customRequirements = document.getElementById('customRequirements').value.trim(); |
|
|
|
|
|
|
|
|
let prompt = `Crea un plugin de WordPress llamado "${pluginName}" con las siguientes especificaciones:\n\n`; |
|
|
prompt += `=== PROP脫SITO ===\n${pluginPurpose}\n\n`; |
|
|
|
|
|
if (features.length > 0) { |
|
|
prompt += `=== CARACTER脥STICAS REQUERIDAS ===\n`; |
|
|
prompt += `${features.join('\n')}\n\n`; |
|
|
} |
|
|
|
|
|
if (integrations.length > 0) { |
|
|
prompt += `=== INTEGRACIONES ===\n`; |
|
|
prompt += integrations.map(int => { |
|
|
switch(int) { |
|
|
case 'woocommerce': return "Integraci贸n con WooCommerce"; |
|
|
case 'gravity_forms': return "Integraci贸n con Gravity Forms"; |
|
|
case 'cf7': return "Integraci贸n con Contact Form 7"; |
|
|
case 'elementor': return "Integraci贸n con Elementor"; |
|
|
case 'acf': return "Integraci贸n con Advanced Custom Fields"; |
|
|
default: return `Integraci贸n con ${int}`; |
|
|
} |
|
|
}).join('\n') + '\n\n'; |
|
|
} |
|
|
|
|
|
prompt += `=== ENFOQUE DE DESARROLLO ===\n`; |
|
|
switch(devApproach) { |
|
|
case 'oop': prompt += "Usa programaci贸n orientada a objetos con estructura de clases adecuada.\n"; break; |
|
|
case 'functional': prompt += "Usa enfoque de programaci贸n funcional.\n"; break; |
|
|
case 'mixed': prompt += "Usa una combinaci贸n de POO y programaci贸n funcional seg煤n corresponda.\n"; break; |
|
|
} |
|
|
|
|
|
prompt += `=== EST脕NDARES DE C脫DIGO ===\n`; |
|
|
switch(codeStandards) { |
|
|
case 'wp': prompt += "Sigue los est谩ndares de codificaci贸n de WordPress.\n"; break; |
|
|
case 'psr': prompt += "Sigue est谩ndares PSR (especifica cu谩les si es necesario).\n"; break; |
|
|
case 'custom': prompt += "Sigue est谩ndares organizacionales personalizados.\n"; break; |
|
|
} |
|
|
|
|
|
if (security.length > 0) { |
|
|
prompt += `=== REQUISITOS DE SEGURIDAD ===\n`; |
|
|
prompt += `${security.join('\n')}\n\n`; |
|
|
} |
|
|
|
|
|
if (customRequirements) { |
|
|
prompt += `=== REQUISITOS ADICIONALES ===\n`; |
|
|
prompt += `${customRequirements}\n\n`; |
|
|
} |
|
|
|
|
|
prompt += `=== FORMATO DE SALIDA ===\n`; |
|
|
prompt += `Proporciona el c贸digo completo del plugin en un solo archivo con comentarios y documentaci贸n adecuados. Incluye instrucciones de instalaci贸n y ejemplos b谩sicos de uso.`; |
|
|
|
|
|
|
|
|
document.getElementById('promptOutput').textContent = prompt; |
|
|
document.querySelector('.prompt-container').classList.add('show'); |
|
|
}); |
|
|
|
|
|
|
|
|
function copyToClipboard() { |
|
|
const promptText = document.getElementById('promptOutput').textContent; |
|
|
if (!promptText) { |
|
|
alert('Por favor genera un prompt primero.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
navigator.clipboard.writeText(promptText).then(() => { |
|
|
const copyBtn = document.querySelector('#copyPrompt'); |
|
|
copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> 隆Copiado!'; |
|
|
setTimeout(() => { |
|
|
copyBtn.innerHTML = '<i class="fas fa-copy mr-2"></i> Copiar Prompt'; |
|
|
}, 2000); |
|
|
}); |
|
|
} |
|
|
</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=smashmash/wordpress-prompts" style="color: #fff;text-decoration: underline;" target="_blank" >馃К Remix</a></p><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=Yoleo/prompts-para-crear-plugins-wp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
