Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (78 sloc) 3.67 KB
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Unhosted remoteStorage Tutorial</title>
<link href="css/screen.css" media="screen" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/remoteStorage-0.5.5.min.js" type="text/javascript"></script>
<script src="js/helper.js" type="text/javascript"></script>
<script src="js/tutorial.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<img src="images/remotestorage.png" alt="remoteStorage" class="remotestorage" />
<h1>remoteStorage.js Tutorial</h1>
<section id="intro">
<p>
This is a sample app using
<a href="https://github.com/unhosted/remoteStorage.js">remoteStorage.js</a>
for retrieving and storing data on a remoteStorage-compatible account. To
see how to use remoteStorage.js you can read the
<a href="docs/tutorial.html">annotated source</a> of this app.
</p>
</section>
<section id="connection">
<div id="states" class="hidden">
<span id="connectionState">disconnected</span> |
<span id="authorizedState">not authorized</span>
</div>
<p>
<label for="userAddress">Your user address:</label>
<input type="text" id="userAddress" placeholder="yourusername@5apps.com" />
<input type="submit" id="connect" value="Connect to remoteStorage" />
<input type="submit" id="disconnect" value="Disconnect" class="hidden" />
<input type="submit" id="authorize" value="Authorize access" />
<input type="submit" id="deauthorize" value="Deauthorize access" class="hidden" />
<img src="images/spinner.gif" id="connectionSpinner" class="hidden" />
</p>
</section>
<section id="public_storage">
<h2 id="publicTitle">Read access for "public" category</h2>
<p>
<label for="publicKey">Key:</label>
<input type="text" id="publicKey" value="foo" />
<input type="submit" id="fetchPublicKey" value="Fetch" />
<img src="images/spinner.gif" id="fetchPublicSpinner" class="hidden" />
</p>
<p>
<label for="publicValue">Value:</label>
<input type="text" id="publicValue" />
</p>
<p>
<input type="submit" id="publishPublic" value="Save" />
<img src="images/spinner.gif" id="publishPublicSpinner" class="hidden" />
</p>
</section>
<section id="private_storage">
<h2>Read/write access for "tutorial" category</h2>
<p>
<label for="tutorialKey">Key:</label>
<input type="text" id="tutorialKey" value="bar" />
<input type="submit" id="fetchTutorialKey" value="Fetch" />
<img src="images/spinner.gif" id="fetchTutorialSpinner" class="hidden" />
</p>
<p>
<label for="tutorialValue">Value:</label>
<input type="text" id="tutorialValue" />
</p>
<p>
<input type="submit" id="publishTutorial" value="Save" />
<img src="images/spinner.gif" id="publishTutorialSpinner" class="hidden" />
</p>
</section>
</div>
<a href="https://github.com/5apps/unhosted-tutorial"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"></a>
</body>
</html>