HTML Unleashed is a simple HTML editor that lets you generate Data URLs from your HTML code and preview them directly in your browser. You can easily write, download, or encode your HTML into a Data URL for immediate use.
- HTML Editor
- Instant Data URL Conversion
- Easy-to-use interface
- Download the
index.htmlfile and open it in your browser to start using the tool. - Use the Website https://exploit-kid.github.io/HTML-unleashed/
- Open the Data URL for this page to get started instantly.
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%3EHTML%20Unleashed%3C%2Ftitle%3E%0A%20%20%20%20%3Clink%20rel%3D%22icon%22%20href%3D%22https%3A%2F%2Fi.imgur.com%2FNyPZxPZ.png%22%20type%3D%22image%2Fpng%22%3E%0A%20%20%20%20%3Clink%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fprism%2F1.29.0%2Fthemes%2Fprism-okaidia.min.css%22%20rel%3D%22stylesheet%22%20%2F%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%2F*%20Style%20for%20the%20label%20*%2F%0A%20%20%20%20label%5Bfor%3D%22encodingSelector%22%5D%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20margin%3A%2015px%200%205px%3B%20%2F*%20Compact%20spacing%20*%2F%0A%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%20%2F*%20Smaller%20font%20size%20*%2F%0A%20%20%20%20%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23ff6b6b%3B%0A%20%20%20%20%20%20%20%20text-align%3A%20left%3B%20%2F*%20Align%20text%20to%20the%20left%20*%2F%0A%20%20%20%20%20%20%20%20text-shadow%3A%20none%3B%20%2F*%20Simplified%20styling%20for%20compact%20design%20*%2F%0A%20%20%20%20%20%20%20%20padding-left%3A%205px%3B%20%2F*%20Left%20padding%20for%20alignment%20*%2F%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20Style%20for%20the%20dropdown%20menu%20*%2F%0A%20%20%20%20select%23encodingSelector%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20margin%3A%200%200%2020px%3B%20%2F*%20Compact%20spacing%20*%2F%0A%20%20%20%20%20%20%20%20width%3A%20180px%3B%20%2F*%20Smaller%20width%20*%2F%0A%20%20%20%20%20%20%20%20padding%3A%208px%2012px%3B%20%2F*%20Compact%20padding%20*%2F%0A%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%20%2F*%20Smaller%20font%20size%20*%2F%0A%20%20%20%20%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20%20%20%20%20background%3A%20linear-gradient(145deg%2C%20%23222232%2C%20%232e2e48)%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23ff6b6b%3B%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23444%3B%0A%20%20%20%20%20%20%20%20border-radius%3A%208px%3B%20%2F*%20Smaller%20border%20radius%20*%2F%0A%20%20%20%20%20%20%20%20appearance%3A%20none%3B%20%2F*%20Remove%20default%20dropdown%20arrow%20*%2F%0A%20%20%20%20%20%20%20%20box-shadow%3A%20inset%202px%202px%204px%20rgba(0%2C%200%2C%200%2C%200.4)%2C%20inset%20-2px%20-2px%204px%20rgba(255%2C%20255%2C%20255%2C%200.1)%3B%0A%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20transition%3A%20all%200.3s%20ease%3B%0A%20%20%20%20%20%20%20%20text-align%3A%20left%3B%20%2F*%20Align%20text%20inside%20dropdown%20*%2F%0A%20%20%20%20%20%20%20%20text-transform%3A%20uppercase%3B%20%2F*%20Uppercase%20for%20dropdown%20options%20*%2F%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20Customize%20options%20inside%20the%20dropdown%20*%2F%0A%20%20%20%20select%23encodingSelector%20option%20%7B%0A%20%20%20%20%20%20%20%20background-color%3A%20%232b2b3c%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20%20%20%20%20padding%3A%208px%3B%20%2F*%20Smaller%20padding%20*%2F%0A%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%20%2F*%20Smaller%20font%20size%20*%2F%0A%20%20%20%20%20%20%20%20text-transform%3A%20none%3B%20%2F*%20Preserve%20case%20*%2F%0A%20%20%20%20%20%20%20%20text-align%3A%20left%3B%20%2F*%20Align%20text%20inside%20options%20*%2F%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20Add%20a%20custom%20arrow%20to%20the%20dropdown%20*%2F%0A%20%20%20%20select%23encodingSelector%3A%3A-ms-expand%20%7B%0A%20%20%20%20%20%20%20%20display%3A%20none%3B%20%2F*%20Hide%20default%20arrow%20in%20IE%20*%2F%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20Hover%20effect%20for%20the%20dropdown%20*%2F%0A%20%20%20%20select%23encodingSelector%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20background%3A%20linear-gradient(145deg%2C%20%232e2e48%2C%20%23222232)%3B%0A%20%20%20%20%20%20%20%20border-color%3A%20%23ff6b6b%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20%2F*%20Focus%20effect%20for%20the%20dropdown%20*%2F%0A%20%20%20%20select%23encodingSelector%3Afocus%20%7B%0A%20%20%20%20%20%20%20%20outline%3A%20none%3B%0A%20%20%20%20%20%20%20%20background%3A%20linear-gradient(145deg%2C%20%233c3c5a%2C%20%23292942)%3B%0A%20%20%20%20%20%20%20%20border-color%3A%20%23ff6b6b%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23ffffff%3B%0A%20%20%20%20%7D%0A%20%20%20%20.tooltip%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20background-color%3A%20%23333%3B%0A%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20padding%3A%205px%2010px%3B%0A%20%20%20%20border-radius%3A%205px%3B%0A%20%20%20%20font-size%3A%2012px%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20z-index%3A%201000%3B%0A%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20box-shadow%3A%200%202px%208px%20rgba(0%2C%200%2C%200%2C%200.2)%3B%0A%20%20%20%20animation%3A%20fadeInTooltip%200.2s%20ease%3B%0A%7D%0A%40keyframes%20fadeInTooltip%20%7B%0A%20%20%20%20from%20%7B%20opacity%3A%200%3B%20transform%3A%20translateY(5px)%3B%20%7D%0A%20%20%20%20to%20%7B%20opacity%3A%201%3B%20transform%3A%20translateY(0)%3B%20%7D%0A%7D%0A%20%20%20%0A%20%20%20%20%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%20'Segoe%20UI'%2C%20Tahoma%2C%20Geneva%2C%20Verdana%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%231e1e2f%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%20animation%3A%20fadeIn%201.5s%20ease-in-out%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%40keyframes%20fadeIn%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20from%20%7B%20opacity%3A%200%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7B%20opacity%3A%201%3B%20%7D%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%20700px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%2060px%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%232b2b3c%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%206px%2020px%20rgba(0%2C%200%2C%200%2C%200.5)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20h1%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2028px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20flex%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20align-items%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23ff6b6b%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20h1%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-right%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.github-link%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%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%20.github-link%20a%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23ff6b6b%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-decoration%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.github-link%20a%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-decoration%3A%20underline%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.about-button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%2010px%20auto%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%206px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23ff6b6b%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%205px%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%20%20%20%20width%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20background-color%200.3s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.about-button%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23e05656%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%23aboutModal%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%2050%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translate(-50%25%2C%20-50%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2080%25%3B%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%20background-color%3A%20%232b2b3c%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%20padding%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%206px%2020px%20rgba(0%2C%200%2C%200%2C%200.5)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20z-index%3A%201000%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%23aboutModal%20p%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20line-height%3A%201.6%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%23aboutModal%20.close-button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%206px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23ff6b6b%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%205px%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%20%20%20%20transition%3A%20background-color%200.3s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%23aboutModal%20.close-button%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23e05656%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.editor-container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.file-manager-toggle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20right%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20none%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%20cursor%3A%20pointer%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%7D%0A%20%20%20%20%20%20%20%20.file-manager-toggle%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.fullscreen-toggle%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%2040px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20right%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20none%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%20cursor%3A%20pointer%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%7D%0A%20%20%20%20%20%20%20%20.fullscreen-toggle%20img%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%23codeEditor%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%231e1e2f%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23f4f4f4%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23ccc%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%20min-height%3A%20200px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-height%3A%20400px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20white-space%3A%20pre%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20outline%3A%20none%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%7D%0A%20%20%20%20%20%20%20%20%23dataUrlDisplay%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2012px%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%20word-wrap%3A%20break-word%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20monospace%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23ff6b6b%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20overflow-x%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.copy-button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%2010px%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%206px%2012px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23ff6b6b%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%205px%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%20%20%20%20width%3A%20auto%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20background-color%200.3s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.copy-button%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23e05656%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.modal%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20none%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20top%3A%2050%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20translate(-50%25%2C%20-50%25)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2080%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20max-width%3A%20500px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%232b2b3c%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%20border-radius%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20z-index%3A%201000%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%206px%2020px%20rgba(0%2C%200%2C%200%2C%200.5)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.modal%20h2%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%2020px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20.modal%20button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display%3A%20block%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin%3A%2010px%20auto%3B%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%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23ff6b6b%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%205px%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%20.modal%20button%3Ahover%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background-color%3A%20%23e05656%3B%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%3E%0A%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fi.imgur.com%2FNyPZxPZ.png%22%20alt%3D%22Logo%22%3E%0A%20%20%20%20%20%20%20%20HTML%20Unleashed%0A%20%20%20%20%3C%2Fh1%3E%0A%20%20%20%20%3Cbutton%20onclick%3D%22openAboutModal()%22%20class%3D%22about-button%22%3EAbout%3C%2Fbutton%3E%0A%20%20%20%20%3Cdiv%20class%3D%22github-link%22%3E%0A%20%20%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fgithub.com%2Fexploit-kid%2FHTML-unleashed%22%20target%3D%22_blank%22%3EPlease%20%E2%AD%90%20this%20project%20on%20GitHub%3C%2Fa%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22editor-container%22%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20onclick%3D%22openFileManager()%22%20class%3D%22file-manager-toggle%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fi.imgur.com%2FIJzOm2Y.png%22%20alt%3D%22File%20Manager%20Icon%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cbutton%20onclick%3D%22toggleFullscreen()%22%20class%3D%22fullscreen-toggle%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cimg%20src%3D%22https%3A%2F%2Fwww.freeiconspng.com%2Fuploads%2Fwhite-full-screen-icon-5.png%22%20alt%3D%22Fullscreen%20Icon%22%3E%0A%20%20%20%20%20%20%20%20%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3Cpre%20id%3D%22codeEditor%22%20class%3D%22language-html%22%20contenteditable%3D%22true%22%20oninput%3D%22updateDataUrl()%22%3E%3C%2Fpre%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%3Clabel%20for%3D%22encodingSelector%22%3ESelect%20Encoding%3A%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3Cselect%20id%3D%22encodingSelector%22%20onchange%3D%22updateDataUrl()%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22base64%22%3EBase64%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22hex%22%3EHexadecimal%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22utf8%22%3EUTF-8%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22url%22%3EURL%20Encoding%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20id%3D%22dataUrlDisplay%22%3EData%20URL%20Will%20Appear%20Here%3C%2Fdiv%3E%0A%20%20%20%20%3Cbutton%20onclick%3D%22copyDataUrl()%22%20class%3D%22copy-button%22%3ECopy%20Data%20URL%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20id%3D%22fileManagerModal%22%20class%3D%22modal%22%3E%0A%20%20%20%20%3Ch2%3EFile%20Manager%3C%2Fh2%3E%0A%20%20%20%20%3Cbutton%20onclick%3D%22document.getElementById('fileInput').click()%22%3EUpload%20HTML%20File%3C%2Fbutton%3E%0A%20%20%20%20%3Cbutton%20onclick%3D%22downloadFile()%22%3EDownload%20HTML%20File%3C%2Fbutton%3E%0A%20%20%20%20%3Cbutton%20class%3D%22close-button%22%20onclick%3D%22closeFileManager()%22%3EClose%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20id%3D%22aboutModal%22%20class%3D%22modal%22%3E%0A%20%20%20%20%3Ch2%3EAbout%20HTML%20Unleashed%3C%2Fh2%3E%0A%20%20%20%20%3Cp%3EHTML%20Unleashed%20is%20a%20tool%20designed%20to%20empower%20students%20and%20developers%20alike%20by%20providing%20an%20innovative%20way%20to%20work%20with%20HTML%20code%20effortlessly.%20Created%20by%20Exploit%20Kid%2C%20this%20project%20was%20born%20out%20of%20the%20need%20to%20bypass%20restrictive%20environments%20that%20limit%20creativity%20and%20exploration%20in%20coding.%20With%20HTML%20Unleashed%2C%20users%20can%20encode%20their%20HTML%20into%20a%20Data%20URL%2C%20allowing%20them%20to%20execute%20and%20test%20their%20code%20directly%20within%20a%20browser%20without%20relying%20on%20external%20tools%20or%20servers.%3C%2Fp%3E%0A%20%20%20%20%3Cbutton%20class%3D%22close-button%22%20onclick%3D%22closeAboutModal()%22%3EClose%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%0A%3Cinput%20type%3D%22file%22%20id%3D%22fileInput%22%20accept%3D%22.html%22%20style%3D%22display%3A%20none%3B%22%20onchange%3D%22handleFileUpload(event)%22%3E%0A%0A%3Cscript%3E%0A%20%20%20%20function%20openFileManager()%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById('fileManagerModal').style.display%20%3D%20'block'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20closeFileManager()%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById('fileManagerModal').style.display%20%3D%20'none'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20handleFileUpload(event)%20%7B%0A%20%20%20%20%20%20%20%20const%20file%20%3D%20event.target.files%5B0%5D%3B%0A%20%20%20%20%20%20%20%20if%20(file%20%26%26%20file.type%20%3D%3D%3D%20'text%2Fhtml')%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20reader%20%3D%20new%20FileReader()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20reader.onload%20%3D%20function(e)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById('codeEditor').textContent%20%3D%20e.target.result%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20updateDataUrl()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20closeFileManager()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20reader.readAsText(file)%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Please%20upload%20a%20valid%20HTML%20file.%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20downloadFile()%20%7B%0A%20%20%20%20%2F%2F%20Ask%20the%20user%20for%20a%20filename%0A%20%20%20%20let%20filename%20%3D%20prompt(%22Please%20enter%20a%20filename%20for%20your%20file%3A%22%2C%20%22untitled.html%22)%3B%0A%0A%20%20%20%20%2F%2F%20If%20the%20user%20didn't%20cancel%20or%20leave%20it%20empty%2C%20proceed%0A%20%20%20%20if%20(filename)%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Get%20the%20content%20of%20the%20code%20editor%20(make%20sure%20it's%20the%20correct%20content%20type)%0A%20%20%20%20%20%20%20%20const%20code%20%3D%20document.getElementById('codeEditor').textContent%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20a%20Blob%20with%20the%20content%20(adjust%20MIME%20type%20if%20needed)%0A%20%20%20%20%20%20%20%20const%20blob%20%3D%20new%20Blob(%5Bcode%5D%2C%20%7B%20type%3A%20'text%2Fhtml'%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Create%20a%20temporary%20anchor%20element%20to%20trigger%20the%20download%0A%20%20%20%20%20%20%20%20const%20link%20%3D%20document.createElement('a')%3B%0A%20%20%20%20%20%20%20%20link.href%20%3D%20URL.createObjectURL(blob)%3B%0A%20%20%20%20%20%20%20%20link.download%20%3D%20filename%3B%20%2F%2F%20Set%20the%20filename%20to%20the%20user%20input%0A%20%20%20%20%20%20%20%20link.click()%3B%0A%20%20%20%20%7D%0A%7D%0A%0A%0A%20%20%20%20function%20updateDataUrl()%20%7B%0A%20%20%20%20const%20code%20%3D%20document.getElementById('codeEditor').textContent.trim()%3B%20%2F%2F%20Trim%20whitespace%0A%20%20%20%20const%20encoding%20%3D%20document.getElementById('encodingSelector').value%3B%0A%20%20%20%20let%20dataUrl%3B%0A%0A%20%20%20%20if%20(encoding%20%3D%3D%3D%20'base64')%20%7B%0A%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Normalize%20the%20string%20by%20replacing%20newlines%20and%20encoding%20in%20Base64%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20normalizedCode%20%3D%20code.replace(%2F%5Cr%3F%5Cn%2Fg%2C%20'')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20dataUrl%20%3D%20'data%3Atext%2Fhtml%3Bbase64%2C'%20%2B%20btoa(normalizedCode)%3B%0A%20%20%20%20%20%20%20%20%7D%20catch%20(error)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.error('Error%20encoding%20to%20Base64%3A'%2C%20error)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20dataUrl%20%3D%20'Error%3A%20Unable%20to%20encode%20content%20to%20Base64.'%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%20else%20if%20(encoding%20%3D%3D%3D%20'hex')%20%7B%0A%20%20%20%20%20%20%20%20dataUrl%20%3D%20'data%3Atext%2Fhtml%2C'%20%2B%20%5B...code%5D.map(char%20%3D%3E%20char.charCodeAt(0).toString(16).padStart(2%2C%20'0')).join('')%3B%0A%20%20%20%20%7D%20else%20if%20(encoding%20%3D%3D%3D%20'utf8')%20%7B%0A%20%20%20%20%20%20%20%20dataUrl%20%3D%20'data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C'%20%2B%20encodeURIComponent(code)%3B%0A%20%20%20%20%7D%20else%20if%20(encoding%20%3D%3D%3D%20'url')%20%7B%0A%20%20%20%20%20%20%20%20dataUrl%20%3D%20'data%3Atext%2Fhtml%2C'%20%2B%20encodeURIComponent(code)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20document.getElementById('dataUrlDisplay').textContent%20%3D%20dataUrl%3B%0A%7D%0A%0A%20%20%20%20function%20copyDataUrl()%20%7B%0A%20%20%20%20%20%20%20%20const%20dataUrl%20%3D%20document.getElementById('dataUrlDisplay').textContent%3B%0A%20%20%20%20%20%20%20%20if%20(navigator.clipboard)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20navigator.clipboard.writeText(dataUrl).then(function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert('Data%20URL%20copied%20to%20clipboard')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D).catch(function(error)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.error('Error%20copying%20text%3A%20'%2C%20error)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert('Failed%20to%20copy%20Data%20URL')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20textarea%20%3D%20document.createElement('textarea')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20textarea.value%20%3D%20dataUrl%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.body.appendChild(textarea)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20textarea.select()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.execCommand('copy')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.body.removeChild(textarea)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20alert('Data%20URL%20copied%20to%20clipboard')%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20openAboutModal()%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById('aboutModal').style.display%20%3D%20'block'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20closeAboutModal()%20%7B%0A%20%20%20%20%20%20%20%20document.getElementById('aboutModal').style.display%20%3D%20'none'%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20toggleFullscreen()%20%7B%0A%20%20%20%20%20%20%20%20const%20editor%20%3D%20document.getElementById('codeEditor')%3B%0A%20%20%20%20%20%20%20%20if%20(!document.fullscreenElement)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20editor.requestFullscreen()%3B%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.exitFullscreen()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. This means that you are free to share and adapt the material, but not for commercial purposes. You must give appropriate credit, provide a link to the license, and indicate if changes were made.
For more details, please see the license file.
For questions or collaborations, feel free to reach out via email: Exploitkid@proton.me
If you'd like to contribute, feel free to fork the repository and create a pull request. Please ensure that your contributions follow the existing style and are well-tested.