-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
254 lines (214 loc) · 13 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<!-- made of awesome and a few slices of hipster -->
<html>
<head>
<title>The Locker Project</title>
<link rel="stylesheet" media="screen" href="styles/tlp.css">
<script src="scripts/jquery.min.js"></script>
<script src='scripts/jquery.lightbox_me.js'></script>
<script>
$(function() {
$("a[rel=lightbox]").click(function(e) {
console.log("Should lightbox");
$("#lightbox img").attr("src", $(this).attr("href"));
$("#lightbox").lightbox_me();
e.preventDefault();
return false;
});
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {
// Ensure it's a same-page link
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
// Ensure target exists
var $target = $(this.hash), target = this.hash;
if (target) {
// Find location of target
var targetOffset = $target.offset().top;
$(this).click(function(event) {
// Prevent jump-down
event.preventDefault();
// Animate to target
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
// Set hash in URL after animation successful
location.hash = target;
});
});
}
}
});
// Use the first element that is "scrollable" (cross-browser fix?)
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
</script>
</head>
<body>
<div id="headbar"></div>
<div id="menu">
<a href="http://github.com/LockerProject/Locker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme.png" alt="Fork me on GitHub"></a>
<div class="nav">
<a href="http://www.lockerproject.org" class="logo"><img src="images/tlp_web_logo.png"></a>
<div id ="navlinks">
<a href="#about" class="toplink">ABOUT</a>
<a href="#vision" class="toplink">OUR VISION</a>
<a href="#demo" class="toplink">DEMO</a>
<a href="#download" class="toplink">DOWNLOAD</a>
<a href="#getinvolved" class="toplink">GET INVOLVED</a>
<a href="http://github.com/LockerProject/Locker/wiki" class="toplink">WIKI</a>
</div>
</div>
</div>
<div id="space">
</div>
<div id='sidebar'>
<div class='first'><a href='http://twitter.com/lockerproject'><img src='images/twitter.png' />Twitter</a></div>
<div><a href='http://blog.lockerproject.org'><img src='images/wordpress.png' />Blog</a></div>
</div>
<div id="main">
<div id='lightbox'>
<img src='#' />
</div>
<section id="tlp_about">
<span id="about" class="bookmark"></span>
<div class="content">
<h2>About The Locker Project</h2>
<div>
<p>A Locker is a container for personal data, which gives the owner the ability to control how it's protected and shared. It retrieves and consolidates data from multiple sources, to create a single collection of the things you see and do online: the photos you take, the places you visit, the links you share, contact details for the people you communicate with, and much more. It also provides flexible APIs for developers to build rich applications with access to all of this information.</p>
<div>
</div>
</section>
<section id="tlp_vision">
<span id="vision" class="bookmark"></span>
<div class="content">
<h2>Our Vision</h2>
<p>As we go through our lives we create vast amounts of data. Emails, phone calls, social network posts, photos, utility bills, health monitoring devices, text messages, browsing data, purchase receipts and more are all born out of the regular course of our actions. It's more than just data. It represents our actions, interests, intentions, communications, relationships, locations, behaviors and creative and consumptive efforts.</p>
<p>Currently, our data is scattered everywhere. It lives in and is usually owned by the various networks into which it was created or exchanged. It's aggregated by third party trackers and targeters looking to deliver advertising, content and services to you. Billions of dollars are exchanged, industries built upon and value created off of our data, and it serves as the basis and is the foundation for some of the largest power structures on the web, and in the world at large.</p>
<p>Meanwhile, the people who have benefited least from this ecosystem are the very people originating the data. Often times, in fact, these channels and organizations go out of their way to limit our ability to extract our data from the network and reuse our own content. Limitless opportunities for engaging personalized applications and web experiences, as well as more free and open communication are lost when this happens.</p>
</div>
</section>
<section id="tlp_demo">
<span id="demo" class="bookmark"></span>
<div class="content">
<h2>Demo</h2>
<!-- <iframe width="420" height="315" src="http://www.youtube.com/embed/Q5bARngZnAE" frameborder="0" allowfullscreen></iframe> -->
<p>Coming soon. Meanwhile, here are some screenshots:</p>
<br/>
<a rel='lightbox' href="images/screenshots/photos.png"><img src="images/screenshots/photos.png" width=256/></a>
<a rel='lightbox' href="images/screenshots/links.png"><img src="images/screenshots/links.png" width=256/></a>
<a rel='lightbox' href="images/screenshots/places.png"><img src="images/screenshots/places.png" width=256/></a>
</div>
</section>
<section id="tlp_download">
<span id="download" class="bookmark"></span>
<div class="content">
<h2>Download</h2>
<p>Locker is under active development, so it's not for the faint of heart. There are no releases yet, but the latest code is always available in our <a href="https://github.com/LockerProject/Locker">git repository</a>.</p>
<h3>System Requirements</h3>
<p>We develop on MacOS Lion and Ubuntu 11.10 (oneiric). Other
recent versions of those operating systems should work.
Windows is not currently supported.</p>
<h3>Quick start</h3>
<ol>
<li>
<p>To get Locker, you'll need git. If any other prerequisites
are missing, the build system can optionally try to install
them into the source tree for you. Just follow the prompts.</p>
<pre>
git clone https://github.com/LockerProject/Locker.git
cd Locker
git submodule update --init
make
</pre>
</li>
<li>
<p>Next, you'll need to <a href="https://github.com/LockerProject/Locker/wiki/GettingAPIKeys">get API keys</a> for any services you wish to connect to:</p>
<pre>
cp Config/apikeys.json.example Config/apikeys.json
# See https://github.com/LockerProject/Locker/wiki/GettingAPIKeys
vi Config/apikeys.json
</pre>
</li>
<li>
<p>You can now start up the locker:</p>
<pre>
./locker
</pre>
</li>
<li>
<p>To access it, go to <a href="http://localhost:8042"><tt>http://localhost:8042</tt></a></p>
</li>
</ol>
<h3>Alternative, not-so-quick start</h3>
<p>If you prefer to set everything up manually, or just want to understand more about the process, check out the <a href="https://github.com/LockerProject/Locker/wiki/Detailed-Set-Up-Instructions">detailed set up instructions</a>.</p>
</div>
</section>
<section id="tlp_getinvolved">
<span id="getinvolved" class="bookmark"></span>
<div class="content">
<h2>Get Involved</h2>
<h3>Where to find us</h3>
<p>You can find us on <a href="irc://irc.freenode.net/lockerproject">IRC at #lockerproject on irc.freenode.net</a> or take a look through the <a href="http://logs.lockerproject.org">logs</a> to see what people have been talking about. We're on Twitter as <a href="http://twitter.com/#!/lockerproject">@lockerproject</a>. We also have a <a href="http://blog.lockerproject.org/">blog</a>. </p>
<h3>Under the Hood</h3>
<p>The locker runs primarily under <a href="http://nodejs.org">node.js</a>, and so we use <a href="http://npmjs.org">npm</a> to manage Node module dependencies.</p>
<p>The <a href="http://github.com/LockerProject/Locker">code</a>, <a href="http://github.com/LockerProject/Locker/wiki">wiki</a> and <a href="http://github.com/LockerProject/Locker/issues">issues</a> on Github are all great places to get your hands on the code and familiar with the architecture of the system. We try to be as responsive as possible to pull requests and issues, so feel free to fork and hack!</p>
<p>The source tree is organized as follows:</p>
<dl>
<dt>Connectors</dt>
<dd>These modules connect to a data source like Facebook or Flickr, and retrieve data to store in the locker. Each connector provides a "synclet" to do this work.</dd>
<dt>Collections</dt>
<dd>Each collection provides a unified view of a certain data type, such as Photos or Contacts or Places. It brings together data from all available sources, identifies duplicates, and so on.
<dt>Apps</dt>
<dd>An app provides a user interface to work with data in the locker. The dashboard itself is also an app.</dd>
<dt>Config</dt>
<dd>API keys and configuration settings are stored here.</dd>
<dt>Me</dt>
<dd>This is where the actual data is stored, organized by which module owns it.</dt>
<dt>test and tests</dt>
<dd>To run the whole test suite, use <tt>make test</tt>.</dd>
</dl>
<h3>Future</h3>
<p>The Locker Project will use <a href="http://telehash.org">Telehash</a> to create a peer to peer network between lockers, which will be used to enable person to person sharing regardless of where the locker is running.</p>
</div>
</section>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22812443-2']);
_gaq.push(['_setDomainName', 'lockerproject.org']);
_gaq.push(['_setAllowHash', false]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
<!-- Shh, this part is a secret, 42 -->
</html>