Data-Url-Generator

data:text/html;charset=utf-8,%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%0A%20%20%20%20%3Ctitle%3EData%20URL%20Generator%3C%2Ftitle%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20body%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20Arial%2C%20sans-serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23f0f0f0%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20600px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%2050px%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%200%2010px%20rgba(0%2C0%2C0%2C0.1)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20textarea%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23007bff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%203px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20button%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%230056b3%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%23copyButton%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.data-url-container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20100%25%3B%20%2F*%20Allow%20the%20container%20to%20grow%20with%20its%20parent%20*%2F%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow-x%3A%20auto%3B%20%2F*%20Enable%20horizontal%20scrolling%20if%20needed%20*%2F%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cdiv%20class%3D%22container%22%3E%0A%20%20%20%20%3Ch1%3EData%20URL%20Generator%3C%2Fh1%3E%0A%20%20%20%20%3Cp%3EEnter%20your%20HTML%20code%20below%3A%3C%2Fp%3E%0A%20%20%20%20%3Ctextarea%20id%3D%22htmlCode%22%20oninput%3D%22generateDataUrl()%22%3E%3C%2Ftextarea%3E%0A%20%20%20%20%3C!--%20Added%20a%20container%20for%20the%20data%20URL%20--%3E%0A%20%20%20%20%3Cdiv%20class%3D%22data-url-container%22%3E%0A%20%20%20%20%20%20%20%20%3Cp%20id%3D%22dataUrl%22%20class%3D%22data-url%22%3E%3C%2Fp%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cbutton%20id%3D%22copyButton%22%20onclick%3D%22copyToClipboard()%22%20disabled%3ECopy%20to%20Clipboard%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20function%20generateDataUrl()%20%7B%0A%20%20%20%20%20%20%20%20var%20htmlCode%20%3D%20document.getElementById('htmlCode').value%3B%0A%20%20%20%20%20%20%20%20var%20encodedHtml%20%3D%20encodeURIComponent(htmlCode)%3B%0A%20%20%20%20%20%20%20%20var%20dataUrl%20%3D%20'data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C'%20%2B%20encodedHtml%3B%0A%20%20%20%20%20%20%20%20document.getElementById('dataUrl').innerText%20%3D%20dataUrl%3B%0A%20%20%20%20%20%20%20%20%2F%2F%20Ensure%20copy%20button%20is%20enabled%20after%20generating%20data%20URL%0A%20%20%20%20%20%20%20%20document.getElementById('copyButton').disabled%20%3D%20false%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20copyToClipboard()%20%7B%0A%20%20%20%20%20%20%20%20var%20dataUrl%20%3D%20document.getElementById('dataUrl').innerText%3B%0A%20%20%20%20%20%20%20%20var%20tempInput%20%3D%20document.createElement('input')%3B%0A%20%20%20%20%20%20%20%20tempInput.value%20%3D%20dataUrl%3B%0A%20%20%20%20%20%20%20%20document.body.appendChild(tempInput)%3B%0A%20%20%20%20%20%20%20%20tempInput.select()%3B%0A%20%20%20%20%20%20%20%20document.execCommand('copy')%3B%0A%20%20%20%20%20%20%20%20document.body.removeChild(tempInput)%3B%0A%20%20%20%20%20%20%20%20alert('Data%20URL%20copied%20to%20clipboard!')%3B%0A%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A