index.html

<!DOCTYPE html>
<html lang="en" manifest="cache.manifest.php"> <!-- manifest="cache.manifest.php" --> 
<head>
	<title>Cloud Notepad</title>
	
	<meta charset="utf-8" />
	<!-- <meta http-equiv="pragma" content="no-cache" /> -->

	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<meta name="viewport" content="width=device-width" />   
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link href="images/icon.png" rel="apple-touch-icon-precomposed" sizes="192x192">
        <link href="images/icon.png" rel="icon" type="image/png">
        
        <link rel="stylesheet" type="text/css" href="js/wysiwym/wysiwym.css" />
        <link rel="stylesheet" type="text/css" href="font/stylesheet.css" />

	<style>	
		body { font:16px/1.5 arial; background:#eee; margin:0; padding:2em 0; filter: invert(100%); }
		a { text-decoration:none; color:#666; }
		a:hover { color:#000; }
		#entries { position:fixed; padding:0 0 0 0; left:0; bottom:0; top:0; float:left; width:100%; background: #ddd; }
		#entries nav { margin-top:0; border-top:1px solid #ddd; }
		#entries a.edit { margin-right:-100em; border-bottom:1px solid #d8d8d8; padding-left:1em; font-family: 'Cutive Mono', monospace; font-weight: bold; }
		#entries li { position:relative; font-size: 22px; }
		#entries li:hover { background:#ddd; }
                #entries a.edit:before { content:'>'; display:block; float:left; margin-right: 0.5em; }
		#entries time { float:right; position:absolute; top:0.9em; right:4em; font-size:13px; color:#999; }
		nav ul, nav li { line-height:1.2; display:block; margin:0; padding:0; position:relative; }
		nav a { display:block; padding:0.6em 1em 0.6em 1em; }
		#editor-wrap { display:block; display:block; }
		form {  margin:0 auto; padding:0.5em; display:none; position:absolute; top:0; left:0; bottom:0; right:0; }
		form input.title { font-family:inherit; font-weight:bold; width:inherit; outline:none; background: #ddd; color:#000; border:1px dotted transparent; padding:5px 18px; margin:0; font-size:1em; position:absolute; top:1.3em; left:0; right:0; }
		textarea { width:inherit; color:#333; background: #ddd; outline:none; display:block; margin:0; padding:15px; position:absolute; left:0; right:0; bottom:0; top:0; border:none; }
		textarea { box-sizing: border-box; width: 100%; font-family: 'Cutive Mono', monospace; font-size: 22px; font-weight: bold; margin-bottom: 2em; }
		nav a.delete { color:#666; background:#fff; display:none; position:absolute; padding:0.5em; right:1em; top:0.4em; -moz-border-radius:1em; -webkit-border-radius:1em; width:0.6em; height:0.6em; line-height:0.5; text-align:center; }
		nav a.delete:hover { background:#fff; }
		nav li:hover a.delete { display:block; }
		#tools { padding:0.5em 0; position:fixed; line-height:1; bottom:0; right:0; left:0; z-index:10; background-color: #ddd; }
		#tools a { -webkit-border-radius:0.5em; display:block; float:left; padding:0.36em 0.8em; color:#888; background:#ccc; text-shadow:none; }
		#tools a:focus { background:#000; }
		#tools a:hover { color:#fff; background:#333; text-shadow:none; }
		#tools li { float:left; margin-right:0.5em; display:block; list-style-type:none; }
		#tools nav { margin-left:0.5em; }
		#inform { display:none; position:fixed; width:10em; padding:0.5em; background:#333; color:#fff; z-index:50; top:0; left:50%; margin-left:-10em; font-size:1em; text-align:center; }
		#tools .clear-localstorage { float:right; }
		#tools #tool-new { float:right; }
		#tools #tool-save { display:none; position:absolute; left:9em; }
		#tools #tool-back { display:none; }
		#tools #tool-sync { float:right; }
		#tools #tool-logout { float:right; }
		#tools #tool-preview { display:none; }
		#credits { position:fixed; bottom:2em; right:2em; float:left; }
		.wysiwym-buttons { position:relative; z-index:30; float: right; }
		.wysiwym-help-toggle { display:none; }
                .wysiwym-buttons .button { background-image: none !important; }
		#preview { display:none; position: absolute; z-index:50; padding:5px 10px; border:5px solid #ccc; top:0; left:0; right:0; background:#fff; min-height:85%; }
		#preview nav li { float:right; }
		#preview nav ul { float:right; margin-bottom:-10em; }
		#close-preview a {  }

                @media screen and (max-width: 600px) {
                    textarea {
                      font-size: 15px !important;
                    }

                    div.wysiwym-buttons {
                      display: none !important;
                    }

                    #tools #tool-preview {
                      display: none !important;
                    }
                }
	</style>
</head>
<body>

<div id="wrap">
	<header id="tools">
		<nav>
			<ul>
				<li id="tool-back"><a href="#index" title="Back">Back</a></li>
				<li id="tool-new"><a href="#new" title="Add New">+</a></li>
				<li id="tool-sync"><a href="#" title="Sync Entries">Sync</a></li>
                                <!--<li id="tool-preview"><a href="#preview" title="Preview">Preview</a></li>-->
                                <!--<li id="tool-logout"><a href="#logout" title="Logout">Logout</a></li>-->
                                <!--<li class="clear-localstorage"><a href="#clear" id="clear" title="Clear localStorage">Clear</a></li>-->
			</ul>
		</nav>
	</header>
	
	<header id="entries">
		<nav>
			<ul><ul>
		</nav>
	</header>
	
	<section id="editor-wrap">
		<form name="editor" id="editor" method="post" action="">
			<input id="entry-id" type="hidden" name="entry-id" value="" />
			<textarea name="entry-content" id="entry-content" placeholder="Content"></textarea>
			<!-- <input type="submit" value="Save" /> -->
		</form>
	</section>
	
	<section id="inform"></section>

	<section id="preview">
		<nav>
			<ul>
				<li id="close-preview"><a href="#close-preview">Close</a></li>
			</ul>
		</nav>
		<div id="preview-content"></div>
	</section>

</div>


<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/wysiwym/wysiwym.js" type="text/javascript"></script>
<script src="js/coreyti-showdown/showdown.js" type="text/javascript"></script>
<script src="js/pretty.js" type="text/javascript"></script>


<script type="text/javascript">
jQuery(document).ready(function($) {
	var $index = {};
	
	sync();

	$(window).bind('load hashchange', function () {
          console.log("hash:", window.location.hash);
          if (window.location.hash != "") {
            $('a[href="'+ window.location.hash +'"]').filter(':not(.delete)').trigger('click');
            console.log($('a[href="'+ window.location.hash +'"]').filter(':not(.delete)'));
            return false;
          } else {
            window.location.hash = "#index";
          }
	});

	$('textarea').wysiwym(Wysiwym.Markdown, { helpEnabled: false });
	
	$('#entries a.edit').live('click', function(c) {
		//save_entry();
		var $id = $(this).attr('href').replace('#', '');
		var $item = $.parseJSON(localStorage.getItem($id));
		$.each($item, function(key, val) {
			$('#' + key).val(val);
  		});
		$('form').fadeIn();
		$('#tool-save, #tool-back, #tool-preview').show();
		$('#entries, #tool-new').hide();		
	});
	
	$('#entries a.delete').live('click', function(c) {
		if (confirm('Delete "' + $(this).siblings('a').text() + '"?') == true) {
			var $id = $(this).attr('href').replace('#', '');
			localStorage.removeItem($id);
			$index[$id] = { timestamp: 0 };
			localStorage.setItem('index', JSON.stringify($index));
			get_entries();
			if ($('#entry-id').val() == $id) { // we deleted the currently viewed item
				$('#entry-id').val('');
				$('#entry-content').val('');
			}
			sync();
		}
		return false;
	});
	
	$('#tool-new a').click(function(c) {
		$new_id = new Date().getTime() + '';
		$('#entry-id').val($new_id);
		$('#entry-content').val('');
		$('#tool-back').show();
		$('#entries').hide();
		$('form').fadeIn();
	});
	
	$('#tool-back a').click(function() {
		if (window.location.hash !== '#index')
			save_entry();
		get_entries();
		$('form, #tool-back, #tool-preview').hide();
		$('#tool-new, #entries').show();
	});
	
	$('#tool-sync a').click(function() {
		save_entry();
		sync();
	});

        $(document).keydown(function(e) {
                if((e.ctrlKey || e.metaKey) && e.which == 83) {
                    console.log(e.keyCode, e);
                    e.preventDefault();
                    save_entry();
                    sync();
                    return false;
                };
	});
	
	var showdown = new Showdown.converter();

	$('#tool-preview a').click(function() {
		var preview_content = showdown.makeHtml($('textarea').val());
		$('#preview-content').html(preview_content);
		$('#preview').fadeIn();
	});
	
	$('#close-preview a').click(function(c) {
		c.preventDefault();
		$('#preview').hide();
	});
		
	$('input, textarea').blur(function() {
		$('form').submit();
	}).focus(function() {
		$('#tool-save').show();
	}).keyup(function(e) {
		if (e.keyCode == 32 || e.keyCode == 13) {
			$('form').submit();
		}
	});
	
	$('form').submit(function() {
		save_entry();
		get_entries();
		return false;
	});
	
	$('#tool-save').click(function(e) {
		e.preventDefault();
		$('form').submit();
		$(this).hide();
	});
	
	function save_entry() {
		var $id = $('#entry-id').val() + '';
		if ($id.length < 1)
			return;
		
		var $title = $('#entry-content').val() + '';
		var $timestamp = new Date().getTime() + ''; // make it a string
		
		$title = showdown.makeHtml($title);
		$title = $($title).text().split('\n\n')[0].substring(0, 20);

		$index[$id] = { timestamp: $timestamp, title: $title }; // set a new version number
		
		console.log('saved:');
		console.log($id);

		localStorage.setItem('index', JSON.stringify($index));
		localStorage.setItem($id, JSON.stringify($('form').formToJSON()));
	}
	
	function sync() {
		if (navigator.onLine) {
			$.post('sync.php', JSON.parse(JSON.stringify(localStorage)), function(data) {
				console.log(data);
				localStorage.setItem('index', JSON.stringify(data.index));
				for (k in data.entries) {
					localStorage.setItem(k, JSON.stringify(data.entries[k]));
				}
				inform('Sync Completed!');
				console.log(localStorage);
				get_entries();
			}).error(function() { 
				inform('Sync error'); 
			});
		} else {
			inform("You are offline!");
			get_entries();
		}
	}

	$('#tool-logout a').click(function() {
		$.get('logout.php', null, function() {
			inform('Logout success!');
			$('#wrap').fadeOut('fast');
		}).error(function() { 
			inform('Logout error'); 
		});
		return false;
	});
	
	function get_entries() {
		$index = new Object(JSON.parse(localStorage.getItem('index')));
		if ($index.length < 1)
			$index = {};
		build_entries($index);
	}
	
	function build_entries(data) {
		var $items = [];
		if (data == null) {
			$('#entries ul').html('');
			return;
		}
		$.each(data, function(key, val) {
			var title = val['title'];
			//var timeago = new Date(parseInt(val['timestamp']));
			
			if (title === '')
				title = 'Untitled';
			if (val['timestamp'] !== 0)
				$items.push('<li class="e-' + key + '"><a class="edit" href="#' + key + '">' + title + '</a> <time></time> <a class="delete" href="#' + key + '">-</a></li>');
  		});
  		$('#entries ul').hide().html($items.reverse().join('')).show();
	}
	
	function inform($message) {
		console.log($message);
		$('#inform').html($message).stop().fadeIn().delay(1000).fadeOut('fast');
	}
	
	$('#clear').click(function() {
		localStorage.clear();
		get_entries();
	});

	$.fn.formToJSON = function() {
		var json = {};
		$.map($(this).serializeArray(), function(n, i){
			json[n['name']] = n['value'];
		});
		return json;
	};

});

</script>

<!-- Could Pad HTML5 App by Kaspars Dambis / http://konstruktors.com/cloud-notepad-html5 -->

</body>
</html>