This repository has been archived by the owner on Jul 18, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
85 lines (78 loc) · 3.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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>