diff options
| author | elioat <hi@eli.li> | 2024-02-26 15:07:03 -0500 |
|---|---|---|
| committer | elioat <hi@eli.li> | 2024-02-26 15:07:03 -0500 |
| commit | 82441bcfd21efcd2f2b1ce7964b0401996fc0551 (patch) | |
| tree | 47ab7cff13a4c044d1d76eb11f0b6fe9e048f730 /html/note.html | |
| parent | fb5826dd545131084a7b2a032766c6f2c457c14c (diff) | |
| download | tour-82441bcfd21efcd2f2b1ce7964b0401996fc0551.tar.gz | |
*
Diffstat (limited to 'html/note.html')
| -rw-r--r-- | html/note.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/html/note.html b/html/note.html new file mode 100644 index 0000000..3376b4f --- /dev/null +++ b/html/note.html @@ -0,0 +1,104 @@ +<!-- from https://cristobal.space/note --> +<head> + <meta charset="UTF-8"> + <style> + body { + font-family: monospace; + width: 400px; + } + img { + max-width: 600px; + width: 100%; + margin: 12px 0px; + } + #drop { + width: 400px; + height: 100px; + border: 1px dashed black; + border-radius: 4px; + margin-bottom: 12px; + display: flex; + justify-content: center; + align-items: center; + } + #text { + width: 400px; + height: 100px; + border-radius: 4px; + resize: none; + margin-bottom: 12px; + padding: 6px; + } + #content { + margin-top: 12px; + } + </style> +</head> + +<body><textarea id="text">Write HTML...</textarea> +<div id="drop"><i>DROP IMAGES</i></div> + +<button onclick="append()"><i>APPEND</i></button> +<button onclick="fork()"><i>FORK</i></button> +<button onclick="publish()"><i>PUBLISH</i></button> + +<div id="content"> +</div> + +<script> + const noop = e => { + e.preventDefault(); + e.stopPropagation(); + } + + const toBase64 = blob => new Promise(resolve => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.readAsDataURL(blob); + }) + + const content = document.getElementById("content"); + const textArea = document.getElementById("text"); + const dropArea = document.getElementById("drop"); + + dropArea.addEventListener("dragenter", e => { + noop(e); + dropArea.style.border = "1px dotted black"; + }) + + dropArea.addEventListener("drop", async e => { + noop(e); + dropArea.style.border = "1px dashed black"; + + const img = document.createElement("img"); + const f = e.dataTransfer.files[0]; + const b64 = await toBase64(f); + img.src = b64; + content.appendChild(img); + + }) + + dropArea.addEventListener("dragover", noop); + dropArea.addEventListener("dragexit", noop); + + const append = () => { + content.innerHTML += textArea.value; + } + + const download = (html) => { + // Write data into self-contained html file + const data = new Blob([html], {type: 'text/plain'}); + + // Download the file + const url = window.URL.createObjectURL(data); + const a = document.createElement("a"); + a.href = url; + a.download = "note.html"; + a.click(); + } + + const fork = () => download(document.documentElement.innerHTML); + const publish = () => download(content.innerHTML); + +</script> +</body> \ No newline at end of file |