nunull · February 4, 2014 16:24
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<title>Editor</title>
 		<style type="text/css">
 			body {
 				background-color: #EEE;
 			}
 			header {
 				z-index: 1000;
 				position: fixed;
 				width: 800px;
 				margin: 0 0 0 50%;
 				top: 50px;
 				left: -400px;
 				text-align: right;
 			}
 			header a {
 				display: inline-block;
 				cursor: pointer;
 				padding: 18px;
 				background: #39E3C7;
 				font-family: Arial, sans-serif;
 				font-size: 9pt;
 				color: #222;
 			}
 			#date {
 				position: fixed;
 				width: 720px;
 				margin: 0 0 0 50%;
 				top: 50px;
 				bottom: 50px;
 				left: -400px;
 				padding: 20px 40px;
 				background: #3AF2D4;
 				font-family: Arial, sans-serif;
 				font-size: 9pt;
 				color: #222;
 			}
 			#editor {
 				position: fixed;
 				overflow-y: scroll;
 				width: 720px;
 				margin: 0 0 0 50%;
 				top: 100px;
 				bottom: 50px;
 				left: -400px;
 				padding: 40px;
 				outline: none;
 				background: #FFF;
 			}
 			#editor, #editor * {
 				font-family: monaco, monospace;
 				font-size: 10pt;
 				color: #222;
 			}
 		</style>
 	</head>
 	<body>
 		<header>
 			<a id="action-save">Download</a>
 		</header>
 		<div id="date"></div>
 		<div id="editor" contenteditable="true"></div>

 		<script type="text/javascript">
 			var data = get();
 			if(!data.edited && ! data.data) data = {edited: (new Date()).getTime(), data: ''};

 			function save() {
 				data.edited = (new Date()).getTime();
 				localStorage.setItem('data', JSON.stringify(data));

 				render();
 			}

 			function get() {
 				return JSON.parse(localStorage.getItem('data'));
 			}

 			function render() {
 				var d = new Date(data.edited);

 				document.getElementById("date").innerHTML = 'Last saved: <b>' 
 						+ d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' ' 
 						+ d.getHours() + ':' 
 						+ (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()) 
 						+ '</b>';
 			}

 			function saveToFile() {
 				window.location = 'data:application/octet-stream,' + 
 					escape(data.data
 						.replace(/<div>/g, '\n')
 						.replace(/<\/div>/g, '')
 						.replace(/<br>/g, ''));
 			}

 			document.getElementById("editor").addEventListener('keyup', function(e) {
 				data.data = document.getElementById("editor").innerHTML;
 				save();
 			});
 			document.getElementById("editor").innerHTML = data.data;
 			document.getElementById("editor").focus();

 			document.getElementById("action-save").addEventListener('click', function(e) {
 				saveToFile();
 			});
 			
 			render();
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Editor</title>
	<style type="text/css">
	body {
	background-color: #EEE;
	}
	header {
	z-index: 1000;
	position: fixed;
	width: 800px;
	margin: 0 0 0 50%;
	top: 50px;
	left: -400px;
	text-align: right;
	}
	header a {
	display: inline-block;
	cursor: pointer;
	padding: 18px;
	background: #39E3C7;
	font-family: Arial, sans-serif;
	font-size: 9pt;
	color: #222;
	}
	#date {
	position: fixed;
	width: 720px;
	margin: 0 0 0 50%;
	top: 50px;
	bottom: 50px;
	left: -400px;
	padding: 20px 40px;
	background: #3AF2D4;
	font-family: Arial, sans-serif;
	font-size: 9pt;
	color: #222;
	}
	#editor {
	position: fixed;
	overflow-y: scroll;
	width: 720px;
	margin: 0 0 0 50%;
	top: 100px;
	bottom: 50px;
	left: -400px;
	padding: 40px;
	outline: none;
	background: #FFF;
	}
	#editor, #editor * {
	font-family: monaco, monospace;
	font-size: 10pt;
	color: #222;
	}
	</style>
	</head>
	<body>
	<header>
	<a id="action-save">Download</a>
	</header>
	<div id="date"></div>
	<div id="editor" contenteditable="true"></div>

	<script type="text/javascript">
	var data = get();
	if(!data.edited && ! data.data) data = {edited: (new Date()).getTime(), data: ''};

	function save() {
	data.edited = (new Date()).getTime();
	localStorage.setItem('data', JSON.stringify(data));

	render();
	}

	function get() {
	return JSON.parse(localStorage.getItem('data'));
	}

	function render() {
	var d = new Date(data.edited);

	document.getElementById("date").innerHTML = 'Last saved: <b>'
	+ d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' '
	+ d.getHours() + ':'
	+ (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes())
	+ '</b>';
	}

	function saveToFile() {
	window.location = 'data:application/octet-stream,' +
	escape(data.data
	.replace(/<div>/g, '\n')
	.replace(/<\/div>/g, '')
	.replace(/<br>/g, ''));
	}

	document.getElementById("editor").addEventListener('keyup', function(e) {
	data.data = document.getElementById("editor").innerHTML;
	save();
	});
	document.getElementById("editor").innerHTML = data.data;
	document.getElementById("editor").focus();

	document.getElementById("action-save").addEventListener('click', function(e) {
	saveToFile();
	});

	render();
	</script>
	</body>
	</html>