Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
413 lines (380 sloc) 17.1 KB
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<!--
Using CrunchApp (crunchapp.net) for LESS compilation.
<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.3.0.min.js"></script>
-->
<link rel="stylesheet" href="less/style.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Notebook</title>
<meta name="description" content="An app to scribble your notes.">
<meta name="author" content="Rishabh Rao">
<meta property="og:title" content="Notebook" />
<meta property="og:description" content="An app to scribble your notes." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://rishabhsrao.github.com/notebook/p/index.html" />
<meta property="og:image" content="http://rishabhsrao.github.com/notebook/p/img/og-image-logo.jpg" />
<meta property="og:site_name" content="Notebook" />
<meta property="fb:admins" content="100000457697724" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</a>
<a class="brand" href="index.html">Notebook</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li>
<a href="index.html"><i class="icon-white icon-home"></i> Home</a>
</li>
<li class="active">
<a href="app.html"><i class="icon-white icon-cog"></i> Application</a>
</li>
<li>
<a href="" data-bind="click: toggleAboutModal"><i class="icon-white icon-info-sign"></i> About</a>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<i class="icon-white icon-share-alt"></i> Share <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="http://bit.ly/notebookapp"><i class="icon-globe"></i> bit.ly/notebookapp</a>
</li>
<li class="divider"></li>
<li class="visible-desktop">
<a>
<i class="icon-qrcode"></i>
<img src="img/qrcode.png" alt="QR code" />
</a>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li>
<a href="https://github.com/rishabhsrao/notebook"><i class="icon-white icon-random"></i> Fork me on Github</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<noscript id="errorMessagesNoJavascript">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="alert alert-error">
<h4 class="alert-heading">Oh snap! You don't have JavaScript enabled on your browser.</h4>
<p>You need to enable JavaScript in your browser to experience this application.</p>
<a href="http://www.enable-javascript.com/" class="btn btn-info" title="Shows you instructions on how to enable JavaScript on your browser">
<i class="icon-white icon-info-sign"></i> Get help
</a>
</div>
</div>
</div>
</div>
</noscript>
</div>
<div id="errorMessagesNoLocalStorage" class="container hide">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="alert">
<h4 class="alert-heading">Heads up! Looks like your browser doesn't support local storage.</h4>
<p>Too bad - your notes can't be saved for future use. Try exporting your notes.</p>
<div class="row-fluid">
<div class="span3">
<button class="btn btn-info" data-bind="click: notesToJson" title="Export all your notes">
<i class="icon-white icon-download"></i> Export all notes
</button>
</div>
<div class="span9">
<div class="btn-group">
<a href="http://browsehappy.com" class="btn btn-success" title="Takes you to browsehappy.com where you can upgrade your browser and be happy">
<i class="icon-white icon-certificate"></i> Upgrade browser
</a>
<a href="http://www.google.com/chromeframe/?redirect=true" class="btn btn-success" title="If you can't upgrade your browser, then you should install Google Chrome Frame - it's the next best thing">
<i class="icon-white icon-fullscreen"></i> Install Chrome Frame
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="errorMessagesLocalStorageFull" class="container hide">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="alert alert-error">
<h4 class="alert-heading">Holy guacamole! We're out of memory!</h4>
<p>Your note was not saved to memory; you will lose data if you close this tab. Please consider deleting a few notes that you don't need and try again.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container hide" id="pageContainer">
<div class="container-fluid page">
<div class="row-fluid">
<div class="span3">
<div id="createNewNoteAccordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a href="#createNewNoteDiv" data-parent="#createNewNoteAccordion" data-toggle="collapse" class="accordion-toggle"><i class="icon-certificate"></i> Create new note</a>
</div>
<div class="accordion-body collapse" id="createNewNoteDiv" style="height: 0px;">
<div class="accordion-inner">
<form id="createNewNoteForm" action="" method="POST">
<fieldset>
<div class="control-group noteTitle-control-group">
<label class="control-label" for="noteTitle"><i class="icon-bookmark"></i> Title <i class="icon-info-sign pull-right" title="The title of your new note"></i></label>
<div class="controls">
<input name="noteTitle" type="text" class="span12" id="noteTitle" maxlength="256" />
</div>
</div>
<div class="control-group noteContent-control-group">
<label class="control-label" for="noteContent"><i class="icon-book"></i> Contents<span class="mandatory-star">*</span> <i title="The contents of your new note (required)" class="icon-info-sign pull-right"></i></label>
<div class="controls">
<textarea name="noteContent" class="span12" id="noteContent" maxlength="1024"></textarea>
</div>
</div>
</fieldset>
<fieldset>
<input type="submit" class="btn btn-success span12" data-bind="click: addNote" value="Save" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="span9">
<div class="well">
<div class="row-fluid" data-bind="if: !isEmpty()">
<div class="span4">
<h6>My Notes (<span data-bind="text: notes().length"></span>)</h6>
</div>
<div class="span8">
<div class="row-fluid">
<div class="span8">
<div class="btn-group pull-right">
<button class="btn btn-info btn-mini" disabled="disabled" title="This feature is not yet implemented">
<i class="icon-white icon-upload"></i> Import
</button>
<button class="btn btn-info btn-mini" data-bind="click: notesToJson" title="Export all your notes">
<i class="icon-white icon-download"></i> Export
</button>
</div>
</div>
<div class="span4">
<button class="btn btn-danger btn-mini pull-right" data-bind="{ click: deleteAllNotes }" title="Delete all your notes">
<i class="icon-white icon-remove-sign"></i> Delete all
</button>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="welcome-text" data-bind="if: isEmpty">
<h4>Hey, welcome to Notebook!</h4>
<h5>An app to scribble your notes.</h5>
<hr />
<p>You currently don't have any notes. Let's start by creating a new one!</p>
<button class="btn btn-large btn-info" data-bind="click: focusCreateNote">
<i class="icon-white icon-certificate"></i> Create new note!
</button>
</div>
<table class="notes table table-striped">
<tbody data-bind="foreach: { data: notes, afterRender: postProcess }">
<tr>
<td class="note-like">
<div class="row-fluid">
<div class="span6">
<button class="btn btn-mini" data-bind="click: $parent.toggleStar" title="Favourite">
<i class="icon-star" data-bind="css: { '': isStarred, 'icon-white': !(isStarred()) }"></i>
</button>
</div>
<div class="span6">
<button class="btn btn-mini" data-bind="click: $parent.toggleHeart" title="Love">
<i class="icon-heart" data-bind="css: { '': isFavourited, 'icon-white': !(isFavourited()) }"></i>
</button>
</div>
</div>
</td>
<td class="note-display">
<div class="row-fluid">
<div class="span12">
<h4><span class="title" data-bind="text: title"></span></h4>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<span class="content" data-bind="text: content"></span>
</div>
</div>
</td>
<td class="note-when"><time class="timeago" data-bind="attr: { datetime: createdOn, title: createdOn }"></time></td>
<td class="note-actions">
<div class="row-fluid">
<div class="span6">
<button class="btn btn-mini" data-bind="click: $parent.editNote" title="Edit">
<i class="icon-edit"></i>
</button>
</div>
<div class="span6">
<button class="btn btn-mini" data-bind="click: $parent.removeNote" title="Delete">
<i class="icon-remove"></i>
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<footer>
<div class="row-fluid thanks">
<div class="span4">
<a class="product-sprite html5" href="http://www.movethewebforward.com" title="HTML5 - Move the web forward"></a>
</div>
<div class="span4 created-by">
<p><small>Created by <a href="http://rishabhsrao.github.com">Rishabh Rao</a></small></p>
</div>
<div class="span4">
<a class="pull-right product-sprite humanstxt" href="humans.txt" title="See who's worked on this app"></a>
</div>
</div>
</footer>
</div>
<!-- /container -->
<div class="modal hide" id="aboutMe">
<div class="modal-header">
<button class="close" data-dismiss="modal"> <i class="icon-remove-sign"></i></button>
<h3>About</h3>
</div>
<div class="modal-body">
<div class="hero-unit">
<div class="row-fluid">
<div class="span2">
<img src="img/logo.png" alt="Spiral-bound yellow notebook" />
</div>
<div class="span10">
<h2>Notebook</h2>
<p>An app to scribble your notes.</p>
<h6>
Created by
<a href="http://rishabhsrao.github.com">Rishabh Rao</a>
</h6>
<div>
<p><small>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</small></p>
</div>
<!-- <div class="thanks">
<p>Many thanks to...</p>
<ol class="unstyled">
<li><a class="product-sprite jquery" href="http://jquery.com" title="jQuery - Write less. Do more."></a></li>
<li><a class="product-sprite initializr" href="http://www.initializr.com" title="Initializr - Start an HTML5 project in 15 seconds!"></a></li>
<li><a class="product-sprite h5bp" href="http://html5boilerplate.com" title="HTML5 Boilerplate - A rock-solid default for HTML5 awesome."></a></li>
<li><a class="product-sprite bootstrap" href="http://twitter.github.com/bootstrap" title="Twitter Bootstrap - Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions."></a></li>
<li><a class="product-sprite knockoutjs" href="http://knockoutjs.com" title="Knockout.js - Knockout is a JavaScript library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML, using observers to make your UI automatically stay in sync with an underlying data model."></a></li>
<li><a class="product-sprite opensuse" href="http://opensuse.org" title="openSUSE"></a></li>
<li><a class="product-sprite firefox" href="http://mozilla.org/firefox" title="Firefox"></a></li>
<li><a class="product-sprite eclipse" href="http://eclipse.org" title="Eclipse IDE"></a></li>
<li><a class="product-sprite github" href="http://github.com" title="Github - Social coding."></a></li>
<li><a class="product-sprite git" href="http://git-scm.com" title="Git - SCM."></a></li>
<li><a class="product-sprite webfonts" href="www.google.com/webfonts/specimen/Exo" title="Google web fonts - Exo by Natanael Gama."></a></li>
<li><a class="product-sprite rloader" href="http://code.google.com/p/rloader" title="RLoader - A jQuery plugin which can load JS and CSS resources on-the-fly."></a></li>
<li><a class="product-sprite badebug" href="http://benalman.com/projects/javascript-debug-console-log" title="Debug - JavaScript Debug: A simple wrapper for console.log()"></a></li>
<li><a class="product-sprite lessjs" href="http://lesscss.org" title="{less} - The dynamic stylesheet language."></a></li>
<li><a class="product-sprite colourlovers" href="http://www.colourlovers.com" title="COLOURlovers - COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love."></a></li>
<li><a class="product-sprite wegraphics" href="http://wegraphics.net/downloads/free-stained-and-faded-social-media-icons" title="WeGraphics - WeGraphics is a creative studio specialized into the creation of graphic design resources."></a></li>
</ol>
</div> -->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"><i class="icon icon-remove-sign"></i> Close</button>
</div>
</div>
<div class="modal hide" id="importExportModal">
<div class="modal-header">
<button class="close" data-dismiss="modal"> <i class="icon-remove-sign"></i></button>
<h3>Export</h3>
<p>Use the JSON string below however your like.</p>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<textarea class="span12" data-bind="text: notesAsJson" rows="6"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"><i class="icon icon-remove-sign"></i> Close</button>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
//
window.jQuery
|| document
.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>');
//
</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/libs/bootstrap/bootstrap.min.js"></script>
<script src="js/libs/bootstrap/transition.js"></script>
<script src="js/libs/bootstrap/tooltip.js"></script>
<script src="js/libs/bootstrap/collapse.js"></script>
<script src="js/libs/bootstrap/modal.js"></script>
<script src="js/mylibs/knockout-2.1.0.debug.js"></script>
<script src="js/mylibs/ba-debug.js"></script>
<script src="js/mylibs/jquery.timeago.js"></script>
<script src="js/mylibs/jquery.validate.js"></script>
<script src="js/mylibs/json2.js"></script>
<script src="js/modules/Note.js"></script>
<script src="js/modules/Notebook.js"></script>
<script src="js/script.js"></script>
<!-- end scripts-->
<script>
var _gaq = [ [ '_setAccount', 'UA-31892617-1' ], [ '_trackPageview' ] ];
(function(d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www')
+ '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
</script>
</body>
</html>