mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
25 lines
29 KiB
HTML
25 lines
29 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta name="viewport" content="width=device-width, viewport-fit=cover">
|
||
|
|
<meta name="description" content="itty bitty things can be conveyed in a link.">
|
||
|
|
<link id="favicon" rel="icon" href="/favicon.svg">
|
||
|
|
<style>body{font-family:sans-serif}@media(prefers-color-scheme:dark){body{color:white;background-color:#121212}}#iframe{border:0;position:absolute;top:0;left:0;width:100%;height:100%}#edit{font-family:monospace;font-weight:bold;color:rgba(0,0,0,0.54);position:absolute;z-index:100;position:absolute;top:.85em;right:1em;display:none}#edit:not(:hover){text-decoration:none}#warning{position:absolute;border-radius:4px;background-color:#feecc2;padding:1em;font-size:16px;width:20em;z-index:100;top:10vh;left:50vw;margin-left:-10em}#warning:empty{display:none}body.toasting #iframe,body.toasting #edit{opacity:.5;pointer-events:none}body.toasting #toast{box-sizing:border-box;background-color:#feecc2;border-radius:4px;font-size:13px;left:50%;top:10px;margin-left:-160px;padding:1em;position:absolute;max-width:320px;z-index:101}body:not(.toasting) #toast,body.toasting #warning{display:none}body:not(.download) #download{display:none}#download{background:#fafafa;width:100vw;height:100vh;position:absolute;top:0;left:0;display:flex;text-decoration:none;color:black;justify-content:center;align-items:center;flex-direction:column;font-size:14px}#dl-image{width:128px;height:128px;background-position:center;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%0A%3Csvg width='128' height='128' viewBox='0 0 128 128' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-outside-1_116_2' maskUnits='userSpaceOnUse' x='27' y='15' width='74' height='98' fill='black'%3E%3Crect fill='white' x='27' y='15' width='74' height='98'/%3E%3Cpath d='M80 16H28V112H100V36L80 16Z'/%3E%3C/mask%3E%3Cpath d='M80 16H28V112H100V36L80 16Z' fill='white'/%3E%3Cpath d='M28 16V15H27V16H28ZM80 16L80.7071 15.2929L80.4142 15H80V16ZM28 112H27V113H28V112ZM100 112V113H101V112H100ZM100 36H101V35.5858L100.707 35.2929L100 36ZM28 17H80V15H28V17ZM29 112V16H27V112H29ZM100 111H28V113H100V111ZM99 36V112H101V36H99ZM100.707 35.2929L80.7071 15.2929L79.2929 16.7071L99.2929 36.7071L100.707 35.2929Z' fill='black' fill-opacity='0.15' mask='url(%23path-1-outside-1_116_2)'/%3E%3C/svg%3E%0A");padding:20px 32px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;color:rgba(0,0,0,0.3);font-weight:bold}#dl-button{text-decoration:none;background:gray;color:white;padding:.5em 1em;border-radius:2em;display:none}#dl-button:hover{background:black}#dl-name{margin-bottom:2em}body:not(.loading) #loader{opacity:.0}#loader{border-radius:50%;width:1em;height:1em;font-size:10px;margin:0 auto;position:relative;text-indent:-9999em;color:white;opacity:1;transition:opacity 500ms;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:turntable 2.8s infinite ease-in-out;animation:turntable 2.8s infinite ease-in-out;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-0.16s;animation-delay:-0.16s;animation-timing-function:ease-in-out;--ld0:.00em 2.25em 0 .20em rgba(127,127,127,1.50);--ld1:.93em 2.24em 0 .20em rgba(127,127,127,1.45);--ld2:1.76em 2.20em 0 .18em rgba(127,127,127,1.31);--ld3:2.43em 2.15em 0 .16em rgba(127,127,127,1.09);--ld4:2.85em 2.08em 0 .13em rgba(127,127,127,0.81);--ld5:3.00em 2.00em 0 .10em rgba(127,127,127,0.50);--ld6:2.85em 1.92em 0 .07em rgba(127,127,127,0.19);--ld7:2.43em 1.85em 0 .04em rgba(127,127,127,-0.09);--ld8:1.76em 1.80em 0 .02em rgba(127,127,127,-0.31);--ld9:.93em 1.76em 0 .00em rgba(127,127,127,-0.45);--ld10:.00em 1.75em 0 .00em rgba(127,127,127,-0.50);--ld11:-0.93em 1.76em 0 .00em rgba(127,127,127,-0.45);--ld12:-1.76em 1.80em 0 .02em rgba(127,127,127,-0.31);--ld13:-2.43em 1.85em 0 .04em rgba(127,127,127,-0.09);--ld14:-2.85em 1.92em 0 .07em rgba(127,127,127,0.19);--ld15:-3.00em 2.00em 0 .10em rgba(127,127,127,0.50);--ld16:-2.85em 2.08em 0 .13em rgba(127,127,127,0.81);--ld17:-2.43em 2.15em 0 .16em rgba(127,127,127,1.09);--ld18:-1.76em 2.20em 0 .18em rgba(127,127,127,1.31);--ld19:-0.93em 2.24em 0 .20em rgba(127,127,127,1.45)}@keyframes turntable{100%,0%{box-shadow:var(--ld0),var(--ld4),var(--ld8),var(--ld12),var(--ld16)}5%{box-shadow:var(--ld1),var(--ld5),va
|
||
|
|
</style>
|
||
|
|
<link rel="preload" href="render/recipe.js" as="script" />
|
||
|
|
<meta id="themeColor" name="theme-color" content="white" media="(prefers-color-scheme: light)">
|
||
|
|
<meta id="themeColorDark" name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
|
||
|
|
<!-- <link rel="manifest" href="/manifest.json"> -->
|
||
|
|
<script src="/js/lzma/lzma-d-min.js"></script>
|
||
|
|
<script type="module" >const padForBase64=(s,c=" ")=>s.padEnd(s.length+(3-s.length%3)%3,c);const HEAD_TAGS=()=>btoa(padForBase64('<base target="_top">\n'));const HEAD_TAGS_EXTENDED=()=>btoa(padForBase64(`<meta charset="utf-8"><meta name="viewport" content="width=device-width"><base target="_top"><style type="text/css">body{margin:0 auto;padding:12vmin 10vmin;max-width:35em;line-height:1.5em;font-family:-apple-system,BlinkMacSystemFont,sans-serif;word-wrap:break-word;}@media(prefers-color-scheme: dark){body{color:white;background-color:black;}}</style>`));const dataUrlRE=/^data:(?<mediatype>(?<type>[a-z]+)\/(?<subtype>[a-z+\-]+))?(?<params>(?:;[^;,]+=[^;,]+)*)?(?:;(?<encoding>\w+64))?,(?<data>.*)$/;let schemeMappings={r:"application/ld+json;charset=utf-8;format=gz;base64,",h:"text/html;charset=utf-8;format=gz;base64,",t:","};class DataURL{constructor(url){this.initString=url;var colon=url.substring(0,15).indexOf(":");if(colon!=-1){this.scheme=url.substring(0,colon);if(schemeMappings[this.scheme]){url=`data:${schemeMappings[this.scheme]},${url}`}}else{if(url.charAt(0)=="?"){this.editable=true;url=url.substring(1)}this.dataPrefix=HEAD_TAGS_EXTENDED();let encoding=url.startsWith("XQA")?bitty.LZMA_MARKER:bitty.GZIP_MARKER;url=`data:text/html;charset=utf-8;format=${encoding};base64,${url}`}let match=url.match(dataUrlRE);this.params={};if(match){let info=match.groups;Object.assign(this,info);this.params=info.params?JSON.parse('{"'+decodeURI(info.params?.substring(1)).replace(/"/g,'\\"').replace(/;/g,'","').replace(/=/g,'":"')+'"}'):{}}if(this.encoding){this.data=this.data.replace(/=/g,"")}else{this.data=decodeURIComponent(this.data)}}get href(){let urlString="data:";if(this.mediatype)urlString+=this.mediatype;if(this.params)Object.entries(this.params).forEach((e=>urlString+=`;${e[0]}=${e[1]}`));if(this.encoding)urlString+=";"+this.encoding;if(!this.encoding&&this.dataPrefix){this.dataPrefix=atob(this.dataPrefix)}urlString+=","+(this.dataPrefix||"")+this.data;return urlString}get format(){return this.params.format||this.encoding}clone=()=>{var clone=Object.assign(Object.create(Object.getPrototypeOf(this)),this);clone.params={...this.params};return clone};decompress=async()=>{if(this.params.cipher){console.log(this.params.cipher,decryptData);this.data=await decryptData(this.params.cipher,this.data)}if(this.format&&this.format!="base64"){let bytes=base64ToByteArray(this.data);this.rawData=await decompressData(bytes,this.format);this.data=await dataToBase64(this.rawData);delete this.params.format;this.encoding=BASE64_MARKER}return this};compress=async(format=GZIP_MARKER)=>{let rawData=this.encoding?await base64ToByteArray(this.data):stringToByteArray(this.data);let compressedData=await compressData(rawData,format);var base64String=dataToBase64(compressedData);base64String=base64String.replace(/=+$/,"");this.data=base64String;this.params.format=format;return this};parseDom=async()=>{try{const parser=new DOMParser;const doc=parser.parseFromString(`<?xml version="1.0" encoding="UTF-8"?>`+atob(this.data),this.mediatype);return doc}catch(e){}}}function parseBittyURL(url){if(typeof url==="string")url=new URL(url);let location=url.location;let fragment=url.hash;let path=url.pathname;var slashIndex=fragment.indexOf("/");var hashTitle=decodePrettyComponent(fragment.substring(1,slashIndex));var hashData=fragment.substring(slashIndex+1);return{path:path,hashTitle:hashTitle,hashData:hashData}}async function testCompression(rawData){let gz=await compressData(rawData,GZIP_MARKER);console.log(gz.length,typeof gz,dataToBase64(gz).length);let xz=await compressData(rawData,LZMA_MARKER);console.log(xz.length,typeof xz,dataToBase64(xz).length);let ungz=await decompressData(gz,GZIP_MARKER);let unxz=await decompressData(xz,LZMA_MARKER);console.log("unzip",ungz==rawData,unxz==rawData,{ungz:ungz,unxz:unxz,rawData:rawData,raw:byteArrayToString(rawData).substring(684),ungzs:byteArrayToString(ungz).substring(684),unxzs:byteArrayToString(unxz).substring(684)},byteArrayToString(ungz)==byteArrayToString(unxz))}async function compressData(data,encoding=GZIP_MAR
|
||
|
|
</script>
|
||
|
|
<script type="module" >import*as bitty from"/bitty.js";window.bitty=bitty;const isFramed=window.self!==window.top;function addToast(){}function showLoader(state){let loader=document.getElementById("loader");if(state){if(!loader){loader=document.createElement("div");loader.id="loader";document.body.appendChild(loader)}}else if(loader){setTimeout((()=>loader?.parentElement?.removeChild(loader)),500)}setTimeout((()=>document.body.classList.toggle("loading",state)),1)}window.showLoader=showLoader;function setThemeColor(color){let el=document.getElementById("themeColor");if(!el){el=document.createElement("meta");el.name="theme-color";el.id="themeColor";document.head.appendChild(el)}el.content=color}function setFavicon(favicon){document.getElementById("favicon").href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><text y=".9em">'+favicon+"</text></svg>"}window.el=function(tagName,attrs,...children){let l=document.createElement(tagName);Object.entries(attrs).forEach((([k,v])=>l[k]=v));children.forEach((c=>l.appendChild(c)));return l};const renderers={"application/ld+json":{script:"/render/recipe.html"},"text/canvas+javascript":{script:"canvas"},"text/javascript":{script:"script"},"application/bitsy":{script:"/render/bitsy.html",sandbox:"bitsy"},c:{script:"color"},"text/rawhtml":{script:"parse"},javascript:{script:"bookmarklet"},ipfs:{script:"ipfs",sandbox:"ipfs"},web3:{script:"web3"},"text/directory":{script:"download",args:{extension:"vcf",filename:"contact"}}};function share(info){if(!info.url)info={title:document.title,text:document.title,url:location.href};console.log("Share",info);if(navigator.share){navigator.share(info).then((()=>{console.log("Thanks for sharing!")})).catch(console.error)}else{copyLink(info)}}function copyLink(info){var text=info.url;var dummy=document.createElement("input");document.body.appendChild(dummy);dummy.value=text;dummy.select();document.execCommand("copy");document.body.removeChild(dummy);document.body.classList.add("copied");setTimeout((function(){document.body.classList.remove("copied")}),2e3)}let wakeLock;const getWakeLock=async()=>{try{if(navigator.wakeLock){wakeLock=await navigator.wakeLock.request();wakeLock.addEventListener("release",(()=>{}));console.log("Keeping Screen Awake:",!wakeLock.released)}else{}}catch(err){console.error(`${err.name}, ${err.message}`)}};function keepAwake(){let ctx=new AudioContext;let bufferSize=2*ctx.sampleRate,emptyBuffer=ctx.createBuffer(1,bufferSize,ctx.sampleRate),output=emptyBuffer.getChannelData(0);for(let i=0;i<bufferSize;i++)output[i]=0;let source=ctx.createBufferSource();source.buffer=emptyBuffer;source.loop=true;let node=ctx.createMediaStreamDestination();source.connect(node);let audio=document.createElement("audio");audio.style.display="none";document.body.appendChild(audio);audio.srcObject=node.stream;audio.play()}const handleVisibilityChange=async()=>{if(wakeLock!==null&&document.visibilityState==="visible"){await getWakeLock()}};document.addEventListener("visibilitychange",handleVisibilityChange);window.addEventListener("message",(function(e){console.debug("Message:",e.origin,e.data);showLoader(false);if(e.data.loading!=undefined)showLoader(e.data.loading);if(e.data.title)document.title=e.data.title;if(e.data.favicon)setFavicon(e.data.favicon);if(e.data.themeColor)setThemeColor(e.data.themeColor);if(e.data.updateURL){let path=bitty.metadataToPath(e.data)+window.location.hash;window.history.replaceState(null,null,path)}if(e.data.share){share(e.data.share)}if(e.data.wakeLock){getWakeLock()}if(e.data.updateHash){window.history.replaceState(null,null,e.data.updateHash)}if(e.data.replaceURL){if(e.data.compressURL){let durl=new bitty.DataURL(e.data.replaceURL);durl.compress().then((arg=>{window.history.replaceState(null,null,"/#/"+arg.href);renderContent()}))}else{window.history.replaceState(null,null,e.data.replaceURL);renderContent()}}if(e.data.setStorage)document.localStorage.setItem(contentHash,e.data.set);if(e.data.getStorage)document.getElementById("iframe").postMessage(document.localStorage.getItem(content
|
||
|
|
</script>
|
||
|
|
<script type="module" src="/js/gzip/pako.min.js" ></script>
|
||
|
|
<script nomodule> location.href = "/v1/" + location.hash </script>
|
||
|
|
<noscript>itty.bitty requires JavaScript.</noscript>
|
||
|
|
</head>
|
||
|
|
<iframe id="iframe" sandbox="allow-same-origin allow-downloads allow-scripts allow-forms allow-top-navigation allow-popups allow-modals allow-popups-to-escape-sandbox"></iframe>
|
||
|
|
</html>
|