hi guys its lappy, i made this while locked up cuz we dont have phones only school computers, and i found blobbyboi make something like this and thought i should add onto it.
basically you paste your html in the box and it turns it into a big data url you can copy or preview. it’s all in the browser, no servers or downloads or whatever.
- turns html into data urls
- live preview of your code (so you can see if it’s broken lol)
- copy button so you don’t have to ctrl+c like a caveman
- looks kinda cool (dark mode + smooth stuff)
- works on your phone too if you’re into that
- paste or type your html in the big box
- if "auto encode" is on, it updates the data url automatically
- click "copy" to copy the url or "preview" to see what it looks like
- that’s it. now you can open the data url in a new tab or send it to someone
- plain html
- css (a bit of animation cuz why not)
- javascript (no libraries, just raw js)
- base64 option maybe
- light mode if people complain enough
- save to .html file?
- idk suggest something if you want
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%3ELap%20Bypass%3C%2Ftitle%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%2F*%20General%20Reset%20%26%20Dark%20Mode%20*%2F%0A%20%20%20%20%20%20%20%20*%20%7B%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%20box-sizing%3A%20border-box%3B%0A%20%20%20%20%20%20%20%20%7D%0A%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%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%20background-color%3A%20%23121212%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%20%23f5f5f5%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%20justify-content%3A%20center%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%20min-height%3A%20100vh%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%7D%0A%0A%20%20%20%20%20%20%20%20.container%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%231f1f1f%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%20padding%3A%2030px%3B%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%20max-width%3A%20800px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20box-shadow%3A%200%2010px%2030px%20rgba(0%2C0%2C0%2C0.5)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20animation%3A%20fadeIn%201s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%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%7Bopacity%3A%200%3B%20transform%3A%20translateY(20px)%3B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20to%20%7Bopacity%3A%201%3B%20transform%3A%20translateY(0)%3B%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20h1%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%20%20%20%20color%3A%20%2300bcd4%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20font-size%3A%202.2em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20letter-spacing%3A%201px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%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%20padding%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%232b2b2b%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%201px%20solid%20%23444%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%206px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20resize%3A%20vertical%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%20font-size%3A%201em%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20box-shadow%200.3s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20textarea%3Afocus%20%7B%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%20box-shadow%3A%200%200%2010px%20%2300bcd4%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.controls%20%7B%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%20flex-wrap%3A%20wrap%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2015px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20justify-content%3A%20space-between%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20button%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20min-width%3A%20150px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%2015px%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%20background-color%3A%20%2300bcd4%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%20font-size%3A%201em%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%200.3s%20ease%2C%20transform%200.2s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%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%230097a7%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transform%3A%20scale(1.05)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.data-url-display%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%3A%20%232b2b2b%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%206px%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%20%20%20%20white-space%3A%20nowrap%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-left%3A%204px%20solid%20%2300bcd4%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%20font-size%3A%200.95em%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.preview%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A%2025px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20iframe%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%20250px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23333%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20border-radius%3A%206px%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.toast%20%7B%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%20bottom%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20right%3A%2030px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20%2300bcd4%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%2012px%2020px%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%20opacity%3A%200%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20opacity%200.4s%20ease%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.toast.show%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20.toggle%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%20%20%20%20font-size%3A%200.9em%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20input%5Btype%3D%22checkbox%22%5D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-right%3A%205px%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%20%20%20%20%3Cdiv%20class%3D%22container%22%3E%0A%20%20%20%20%20%20%20%20%3Ch1%3ELap%20Bypass%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Cp%3EInsert%20your%20HTML%20code%3A%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%3Ctextarea%20id%3D%22htmlCode%22%20oninput%3D%22handleInput()%22%3E%3C%2Ftextarea%3E%0A%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22toggle%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20id%3D%22autoEncode%22%20checked%3E%20Auto-encode%20%26%20update%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22controls%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20onclick%3D%22generateDataUrl()%22%3EGenerate%20Data%20URL%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20onclick%3D%22copyToClipboard()%22%3ECopy%20to%20Clipboard%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20onclick%3D%22previewInIframe()%22%3EPreview%20HTML%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22data-url-display%22%20id%3D%22dataUrl%22%3E%3C%2Fdiv%3E%0A%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22preview%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch3%3EPreview%3A%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ciframe%20id%3D%22previewFrame%22%3E%3C%2Fiframe%3E%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%3Cdiv%20id%3D%22toast%22%20class%3D%22toast%22%3ECopied%20to%20clipboard!%3C%2Fdiv%3E%0A%0A%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20let%20autoEncode%20%3D%20true%3B%0A%0A%20%20%20%20%20%20%20%20function%20handleInput()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20autoEncode%20%3D%20document.getElementById('autoEncode').checked%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(autoEncode)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20generateDataUrl()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20function%20generateDataUrl()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20htmlCode%20%3D%20document.getElementById('htmlCode').value%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20encodedHtml%20%3D%20encodeURIComponent(htmlCode)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20dataUrl%20%3D%20'data%3Atext%2Fhtml%3Bcharset%3Dutf-8%2C'%20%2B%20encodedHtml%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById('dataUrl').textContent%20%3D%20dataUrl%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20function%20copyToClipboard()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20dataUrl%20%3D%20document.getElementById('dataUrl').textContent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(!dataUrl)%20return%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20tempInput%20%3D%20document.createElement('textarea')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20tempInput.value%20%3D%20dataUrl%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.body.appendChild(tempInput)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20tempInput.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(tempInput)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20showToast(%22Copied%20to%20clipboard!%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20function%20previewInIframe()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20htmlCode%20%3D%20document.getElementById('htmlCode').value%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20frame%20%3D%20document.getElementById('previewFrame')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20blob%20%3D%20new%20Blob(%5BhtmlCode%5D%2C%20%7B%20type%3A%20'text%2Fhtml'%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20blobUrl%20%3D%20URL.createObjectURL(blob)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20frame.src%20%3D%20blobUrl%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20function%20showToast(message)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20toast%20%3D%20document.getElementById('toast')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toast.textContent%20%3D%20message%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20toast.classList.add('show')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20toast.classList.remove('show')%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%202000)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Initial%20trigger%0A%20%20%20%20%20%20%20%20window.onload%20%3D%20generateDataUrl%3B%0A%20%20%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E
MIT i guess. do whatever with it, just don’t say you made it all by yourself lol