Skip to content

Instantly share code, notes, and snippets.

@brunodb3

brunodb3/online_notepad

Created July 5, 2017 18:52
Show Gist options
  • Save brunodb3/65280a1348971b7d81eb4b014a092bb3 to your computer and use it in GitHub Desktop.
Save brunodb3/65280a1348971b7d81eb4b014a092bb3 to your computer and use it in GitHub Desktop.
Download ZIP
This is a HTML code that you can paste in the URL field of a modern browser, to open an online notepad
Raw
online_notepad
data:text/html;charset=utf-8,
<title>Online Notepad</title>
<style>
html{ height: 100%; }
body{ background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 1%; height: 94%; }
.center { margin: auto; width: 50%; padding: 10px; }
img.center { display: block; margin: 0 auto; }
.logo { width: 150px; }
.paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); }
.paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; }
textarea { display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px; padding-top:43px;}
</style>
<body spellcheck="false">
<div class="paper">
<textarea autofocus="autofocus"></textarea>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment