nashingofteeth/sand.html

## sand.html
<html>
  <head>
    <link href="https://dl.dropboxusercontent.com/u/7984474/GitHub/sand/favicon.ico" rel="Shortcut Icon" />
    <meta charset="UTF-8">
    <title>sand v5 (ace)</title>
    <script>
      var editboxHTML =
          '<script src="https://dl.dropboxusercontent.com/u/7984474/GitHub/sand/hotkeys.js"><\/script>' +
          '<script>' +
          '  shortcut.add("Ctrl+Shift+X",function() { window.setCookie(); });' +
          '  shortcut.add("Alt+Shift+X",function() { var value = editor.getValue(); prompt("Data URI:", "data:text/html, " + value); });' +
          '  function setCookie() {' +
          '    var cookieContent = localStorage.getItem("cookie");' +
          '    var cookie = prompt("Project name:", cookieContent);' +
          '    if (cookie == null) cookie = cookieContent;' +
          '    editor.setValue("");' +
          '    window.localStorage.setItem("cookie", cookie);'+
          '    window.localStorage.setItem("loaded", "false");' +
          '  }' +
          '</scr' + 'ipt>' +

          '<style type="text/css" media="screen">' +
          'html,body { overflow: hidden; }' +
          '::-webkit-scrollbar {' +
          '  width: 5px;' +
          '  height: 5px;' +
          '}' +
          '::-webkit-scrollbar-track {' +
          '  background-color: #272822;' +
          '}' +
          '::-webkit-scrollbar-thumb {' +
          '  background-color: #555;' +
          '  border-radius: 5px;' +
          '  padding-right: 50px;' +
          '}' +

          '#editor { ' +
          'position: absolute;' +
          'top: 0;' +
          'right: 0;' +
          'bottom: 0;' +
          'left: 0;' +
          '}' +
          '<\/style>' +
          '<div id="editor"><\/div>' +
          '<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" charset="utf-8"><\/script>' +
          '<script>' +
          'var editor = ace.edit("editor");' +
          'editor.setTheme("ace/theme/monokai");' +
          'editor.getSession().setMode("ace/mode/html");' +
          '<\/script>';

      var defaultStuff = '<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <style> body { text-align: center; font-family: "Open Sans", sans-serif; position: absolute; top: 50%; left: 50%; margin: -150px; color: #444; } a { color: #ff007f; } a:hover { text-decoration: none; } <\/style> <h1>Sand App<\/h1> <h4>A minimalist HTML editor<\/h4> by <a target="_blank" href="http://twitter.com/_hew">@_hew<\/a>';

      var old = '';

      function init() {
        window.editbox.document.write(editboxHTML);
        window.editbox.document.close();
        window.localStorage.setItem("loaded", "false");
        //window.editbox.document.f.ta.value = defaultStuff;
        setInterval("update()", 100);
        setInterval("saveLocally()", 500);
      }

      function update() {
        if (window.editbox.editor == undefined) return;
        code = window.editbox.editor.getValue();
        var d = dynamicframe.document;

        if (old != code) {
          old = code;
          d.open();
          d.write(old);
          if (dynamicframe.document.title == '') document.title = 'sand';
          else document.title = dynamicframe.document.title;
          d.close();
        }
        if (code == "") d.body.innerHTML = defaultStuff;
      }

      var cookie = ""
      function saveLocally() {
        var cookie = localStorage.getItem('cookie');
        if (localStorage.getItem('loaded') == 'false') {
          code = localStorage.getItem(cookie);
          if (code == null) code = "";
          window.editbox.editor.setValue(code);
          localStorage.setItem('loaded', 'true');
        } else {
          code = window.editbox.editor.getValue();
          localStorage.setItem(cookie, code);
        }
      }

    </script>
  </head>

  <frameset resizable="yes" cols="*, 42%" border="3" onload="init();">
    <frame name="dynamicframe" src="javascript:'';">
    <frame name="editbox" src="javascript:'';">
  </frameset>

</html>
	<html>
	<head>
	<link href="https://dl.dropboxusercontent.com/u/7984474/GitHub/sand/favicon.ico" rel="Shortcut Icon" />
	<meta charset="UTF-8">
	<title>sand v5 (ace)</title>
	<script>
	var editboxHTML =
	'<script src="https://dl.dropboxusercontent.com/u/7984474/GitHub/sand/hotkeys.js"><\/script>' +
	'<script>' +
	' shortcut.add("Ctrl+Shift+X",function() { window.setCookie(); });' +
	' shortcut.add("Alt+Shift+X",function() { var value = editor.getValue(); prompt("Data URI:", "data:text/html, " + value); });' +
	' function setCookie() {' +
	' var cookieContent = localStorage.getItem("cookie");' +
	' var cookie = prompt("Project name:", cookieContent);' +
	' if (cookie == null) cookie = cookieContent;' +
	' editor.setValue("");' +
	' window.localStorage.setItem("cookie", cookie);'+
	' window.localStorage.setItem("loaded", "false");' +
	' }' +
	'</scr' + 'ipt>' +

	'<style type="text/css" media="screen">' +
	'html,body { overflow: hidden; }' +
	'::-webkit-scrollbar {' +
	' width: 5px;' +
	' height: 5px;' +
	'}' +
	'::-webkit-scrollbar-track {' +
	' background-color: #272822;' +
	'}' +
	'::-webkit-scrollbar-thumb {' +
	' background-color: #555;' +
	' border-radius: 5px;' +
	' padding-right: 50px;' +
	'}' +

	'#editor { ' +
	'position: absolute;' +
	'top: 0;' +
	'right: 0;' +
	'bottom: 0;' +
	'left: 0;' +
	'}' +
	'<\/style>' +
	'<div id="editor"><\/div>' +
	'<script src="http://rawgithub.com/ajaxorg/ace-builds/master/src-noconflict/ace.js" charset="utf-8"><\/script>' +
	'<script>' +
	'var editor = ace.edit("editor");' +
	'editor.setTheme("ace/theme/monokai");' +
	'editor.getSession().setMode("ace/mode/html");' +
	'<\/script>';

	var defaultStuff = '<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <style> body { text-align: center; font-family: "Open Sans", sans-serif; position: absolute; top: 50%; left: 50%; margin: -150px; color: #444; } a { color: #ff007f; } a:hover { text-decoration: none; } <\/style> <h1>Sand App<\/h1> <h4>A minimalist HTML editor<\/h4> by <a target="_blank" href="http://twitter.com/_hew">@_hew<\/a>';

	var old = '';

	function init() {
	window.editbox.document.write(editboxHTML);
	window.editbox.document.close();
	window.localStorage.setItem("loaded", "false");
	//window.editbox.document.f.ta.value = defaultStuff;
	setInterval("update()", 100);
	setInterval("saveLocally()", 500);
	}

	function update() {
	if (window.editbox.editor == undefined) return;
	code = window.editbox.editor.getValue();
	var d = dynamicframe.document;

	if (old != code) {
	old = code;
	d.open();
	d.write(old);
	if (dynamicframe.document.title == '') document.title = 'sand';
	else document.title = dynamicframe.document.title;
	d.close();
	}
	if (code == "") d.body.innerHTML = defaultStuff;
	}

	var cookie = ""
	function saveLocally() {
	var cookie = localStorage.getItem('cookie');
	if (localStorage.getItem('loaded') == 'false') {
	code = localStorage.getItem(cookie);
	if (code == null) code = "";
	window.editbox.editor.setValue(code);
	localStorage.setItem('loaded', 'true');
	} else {
	code = window.editbox.editor.getValue();
	localStorage.setItem(cookie, code);
	}
	}

	</script>
	</head>

	<frameset resizable="yes" cols="*, 42%" border="3" onload="init();">
	<frame name="dynamicframe" src="javascript:'';">
	<frame name="editbox" src="javascript:'';">
	</frameset>

	</html>