One Line Browser Notepad

Notepad simple yang bisa dibuka melalui browser. Cocok untuk kalian yang suka coding. Ini merupakan versi pengembangan saya sendiri dari url sederhana data:text/html, <html contenteditable> yang saya dapat dan saya baca dari coderwall.

Notepad

Jika link diatas tidak bisa, kalian bisa mencopy-pastekan kode dibawah ke address bar browser. Kode bebas untuk dikembangkan.

data:text/html;charset=utf-8,
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAM9JREFUOI2l0jFOQlEQBdDTsgXtXAOrEBsTregp2YQroDFW2NBhZ2JCbWNCQUMiFSRaGI2FMZQEaOYn449+4XOT28y8uffOe49qdIK18RKshTY2wXYdgXkSmB/iXitFdt87RXZfBvdKkd17wZ1TlHcvsPNdvMahN3RT/QJ3Uf/4a7iLMVq4xXtyXeEZVzjH0W8CxxjiE32clvpnGOAR1+XhBqYx+FCx4gbfmKCZG/d4igP9CoGbtNaiKJ7gK4rriuEC6yRyCSM/3/0/5H8x2wIHUlME6HiT3QAAAABJRU5ErkJggg=="/> 
<title>Notepad</title>
<style>
html, body {
  margin:0;
  padding: 0;
  overflow:hidden;
}
label {
  left:20px !important;
  color:white;
  cursor: pointer;
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
}
input,label {
  display: inline-block;
  position: absolute;
  top:0;
  left:0;
}
input:checked ~ textarea {
  white-space:pre-wrap;
}
textarea {
  font: normal 18px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  background: %23000;
  color: %233a3;
  width: 100% ;
  height: 100% ;
  border: none;
  outline: none;
  margin: 0;
  padding: 5%;
  overflow:auto;
  white-space:pre;
  word-wrap:normal;
  resize: none;
}
</style>
<input id="wordwrap" type="checkbox"><label for="wordwrap">Word-wrap</label>
<textarea autofocus placeholder="just type here.." />

Preview Browser Notepad

alamperwirap

One Line Browser Notepad

1 comments: