-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (90 loc) · 4.27 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="html5.js"></script><!-- this is the javascript allowing html5 to run in older browsers -->
<title>Myfavouritesandwich - An Unhosted demo</title>
<link rel="stylesheet" href="css/uncompressed/reset.css" />
<link rel="stylesheet" href="css/uncompressed/text.css" />
<link rel="stylesheet" href="general.css" />
<link rel="stylesheet" href="css/uncompressed/layout.css" />
<script src="syncer/include.js"></script>
<script>
function onload () {
syncer.display('remotestorage-bar', ['favourite-sandwich-ingredients'], 'syncer/', function(obj) {
if(obj.category == 'favourite-sandwich-ingredients') {
processFavSandwich(syncer.getCollection('favourite-sandwich-ingredients'));
}
});
}
//LOGGED IN:
function retrieveFavSandwich() {
processFavSandwich(syncer.getCollection('favourite-sandwich-ingredients'));
}
function processFavSandwich(ingredients) {
document.getElementById('showFirstIngredient').innerHTML = ingredients[0];
document.getElementById('showSecondIngredient').innerHTML = ingredients[1];
document.getElementById('firstIngredient').value = ingredients[0];
document.getElementById('secondIngredient').value = ingredients[1];
}
function saveFavSandwich(ingredients) {
for(var i=0; i<ingredients.length; i++) {
syncer.setItem('favourite-sandwich-ingredients', i, ingredients[i]);
}
processFavSandwich(ingredients);
}
</script>
</head>
<body onload="onload();">
<div class="preload"></div>
<div class="preload2"></div>
<div id="preheader"></div>
<div id="plateContainer">
<figure id="plate"></figure>
</div>
<div id="mainWrap">
<div id="loggedIn">
<div id="preheader">
<span id="remotestorage-bar"></span>
</div>
<header class="data">
<a href="syncer/inspector.html" target="_blank"><img src="syncer/inspector-gadget.jpg" style="width:32px;height:32px"></a>
<p>My favourite sandwich has <strong><span id="showFirstIngredient"></span></strong> and
<strong><span id="showSecondIngredient"></span></strong> on it</p>
<input id="firstIngredient" name="firstIngredient" onfocus="if(this.value=='1st ingredient'){this.className='formfocus'; this.value=''}" onblur="if(!this.value){this.className='formblur'; this.value='1st ingredient'}" type="text" value="1st ingredient"/>
<input id="secondIngredient" name="secondIngredient" onfocus="if(this.value=='2nd ingredient'){this.className='formfocus'; this.value=''}" onblur="if(!this.value){this.className='formblur'; this.value='2nd ingredient'}" type="text" value="2nd ingredient"/>
<input class="submitingredients" name="submit" type="submit" value="Submit!" onclick="saveFavSandwich(
[document.getElementById('firstIngredient').value,
document.getElementById('secondIngredient').value]);"/>
</header>
</div>
<div id="footerSpacer"></div>
<footer>
<div class="wrapper">
<div id="leftcolumn">
<h3>So... what is this all about?</h3>
<p>
This is a fictional site that demonstrates the unhosted architecture, a tutorial, so you can take a look at the code to understand how unhosted web apps work. Download the <a href="/MyFavouriteSandwich.tar.gz">tar ball</a> or view the <a href="http://github.com/unhosted/MyFavouriteSandwich.org/blob/master/index.html" target="_blank">application source code</a>.
</p>
<p>
<strong>myfavouritesandwich.org is not a commercial website, nor is it affiliated with any trademark</strong>
</p>
</div>
<figure id="island"></figure>
<div id="rightcolumn">
<h3>What is Unhosted?</h3>
<p>
<strong>Unhosted is a project for strengthening free software against hosted software.
</strong>
An unhosted web app is only source code. Dynamic data is encrypted and decentralised, to per-user storage nodes. This benefits <strong>free software</strong>, as well as <strong>scalability</strong>, <strong>robustness</strong>, and <strong>online privacy</strong>.
</p>
<p>
<strong>Check it out at <a href="http://unhosted.org">unhosted.org</a></strong>
</p>
</div>
<div class="clear">
</div>
</footer>
</div>
</body>
</html>