| document.addEventListener('DOMContentLoaded', function() { |
| const promptForm = document.getElementById('promptForm'); |
| const promptOutput = document.getElementById('promptOutput'); |
| const copyBtn = document.getElementById('copyBtn'); |
| |
| promptForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| const subject = document.getElementById('subject').value || 'young person'; |
| const style = document.getElementById('style').value; |
| const setting = document.getElementById('setting').value || 'neutral background'; |
| const lighting = document.getElementById('lighting').value; |
| const details = document.getElementById('details').value; |
| |
| let prompt = `${style} depiction of ${subject}`; |
| |
| if (details) { |
| prompt += `, ${details}`; |
| } |
| |
| prompt += `, set in ${setting}, with ${lighting.toLowerCase()}`; |
| |
| promptOutput.innerHTML = `<p class="text-gray-800">${prompt}</p>`; |
| }); |
| |
| copyBtn.addEventListener('click', function() { |
| const promptText = promptOutput.innerText; |
| if (promptText && !promptText.includes('appear here')) { |
| navigator.clipboard.writeText(promptText) |
| .then(() => { |
| const originalText = copyBtn.innerHTML; |
| copyBtn.innerHTML = '<i data-feather="check" class="mr-1"></i> Copied!'; |
| feather.replace(); |
| setTimeout(() => { |
| copyBtn.innerHTML = originalText; |
| feather.replace(); |
| }, 2000); |
| }) |
| .catch(err => { |
| console.error('Failed to copy: ', err); |
| }); |
| } |
| }); |
| }); |
