This repository has been archived by the owner on Oct 30, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
executable file
·327 lines (321 loc) · 24.6 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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 9]><!--><html lang="en-US"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet" media="all" />
<!--[if lt IE 9]> <script src="js/html5.js" ></script> <![endif]-->
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 16x16 or 32x32 pixels -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<!-- 57x57 or 114x114 pixles -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,300' rel='stylesheet' type='text/css'>
</head>
<body dir="ltr">
<header id="header">
<div class="clearfix">
<div class="headerInner">
<div class="section clearfix">
<nav class="nav-1">
<ul>
<li><a href="http://democracyos.tumblr.com" class="external" target="_blank">Blog</a></li>
<li><a href="#slide6" class="middle">About Us</a></li>
<li><a href="#slide2"><img src="images/kickstarter.png" alt="Kick Starter" /></a></li>
</ul>
</nav>
<div id="logo">
<a href="#headerFix"><img src="images/logo.png" alt="Democracy.os" /></a>
<span><img src="images/logo-arrow.png" alt="" /></span>
</div>
<nav class="nav-2">
<ul>
<li><a href="#slide3">Who We Are</a></li>
<li><a href="#slide4" class="middle">FAQ</a></li>
<li><a href="#slide5">Contact Us</a></li>
</ul>
</nav>
</div>
<div id="mobileMenu">
<a href="#">Menu</a>
<ul>
<li><a href="/">Blog</a></li>
<li><a href="#slide6">About Us</a></li>
<li><a href="#slide2"><img src="images/kickstarter.png" alt="Kick Starter" /></a></li>
<li><a href="#slide3">Who We Are</a></li>
<li><a href="#slide4">FAQ</a></li>
<li><a href="#slide5">Contact Us</a></li>
</ul>
</div>
<div id="github"><a href="https://github.com/DemocracyOS" target="blank"><img src="images/github-32.png" alt="GitHub" /></a></div>
<div id="twitter"><a href="https://twitter.com/DemocracyOS" target="blank"><img src="images/twitter.png" alt="Twitter" /></a></div>
</div>
</div>
</header>
<div id="headerFix"></div>
<div class="page">
<div id="slide1" class="clearfix">
<div id="slides">
<img src="images/001.jpg" class="first"/>
<img src="images/002.jpg" />
<img src="images/003.jpg" />
<img src="images/004.jpg" />
<img src="images/005.jpg" />
<img src="images/006.jpg" />
<img src="images/007.jpg" />
<img src="images/008.jpg" />
<img src="images/009.jpg" />
</div>
<div class="next"><a href="#slide6"><img src="images/down-arrow.png" alt="" /></a></div>
</div>
<div id="slide6">
<h1 class="blackHead">About Us</h1>
<div class="error clearfix">
<img src="images/error.png" alt="Error Screen"/>
<p>Occupy Wall Street. Arab Spring. Greek Riots. We’ve been experiencing a great crisis of representation these past decades, regardless of our location, ethnicity or culture. The political system insists in excluding most of us from the spaces where the decisions are made that impact our lives. The internet has changed everything: the way we share and consume culture, how we engage in commerce, and how we communicate with others. But the internet has failed to change in one key area of our lives: politics. Democracy is in great need of a serious upgrade.</p>
</div>
<div class="info">
<img src="images/monitor.jpg" alt="It's time to Change the Tool" class="monitor"/>
<p>We are working on a user-friendly, open-source, vote and debate tool, crafted for parliaments, parties and decision-making institutions that will allow citizens to <strong>get informed, join the conversation</strong> and <strong>vote</strong> on topics, just how they want their representatives to vote. A tool that will transform the noise we create during protests into a signal that has a clear, direct and strong impact on the political system. Our vision is that DemocracyOS will become the operating system of a more open and participatory government. <a href="http://dos.partidodelared.org/" class="lightGreen" target="_blank">Live Demo for the City of Buenos Aires.</a></p>
<p>We're about to start a Kickstarter to seek funding for our mission. <a href="mailto:[email protected]" class="pink">Join Us.</a></p>
<img src="images/divider.png" alt="" class="divider" />
<img src="images/app-screens.jpg" alt="" />
<div class="lineBreak"></div>
</div>
</div>
<div id="slide2" class="clearfix">
<div>
<img src="images/change-tool.png" alt="Lets Change the Tool" />
<form method="post" action="http://democraciaenred.createsend.com/t/d/s/kthjj/">
<p>Get a heads up on our<img src="images/kickstarter-large.png" alt="KickStarter" />launch! (*)</p>
<input type="email" placeholder="Notify me when campaign is launched" suggest="email" class="suggestive error" name="cm-kthjj-kthjj" required/>
<input type="submit" value="Notify Me" />
</form>
<p>* We do not send spam. We will e-mail you once, notifying you when the Kickstarter is launched, and then you can opt-out of future e-mails, if you like.</p>
<div class="lineBreak"></div>
<div class="logo"><img src="images/logo-large.png" alt="Democracy.OS" /></div>
</div>
</div>
<div id="slide3" class="clearfix">
<h1 class="whiteHead">Who We Are</h1>
<p>Behind the project there's a group of 40+ millennials; young entrepreneurs and active enthusiasts,<br/>
software engineers, artists, political and social scientists, and educators. All aligned for a <br/> a common purpose: to stop choosing between pre-set options and take part in designing new options.<br/>
The balance between coders and social scientists is key, because we are building technology with meaning: building an internet democracy. <br/> We presented DemocracyOS at the <a href="http://www.youtube.com/watch?v=mMQgiGOBlXk" class="voilet" target="_blank">World Economic Forum</a>, the <a href="http://www.youtube.com/watch?v=lECAWGkvDlg" class="green" target="_blank">World Justice Forum</a> and <a href="http://www.ted.com/talks/pia_mancini_how_to_upgrade_democracy_for_the_internet_era" class="pink" target="_blank">TED</a>. <br/>
Check out those videos and learn more about our story on our <a href="http://blog.democracyos.org" target="_blank" class="blue">blog</a>!</p>
<div class="lineBreak"></div>
<div id="avatars">
<img src="images/maze-bg.png" alt="Maze" usemap="#Map" border="0" width="1920" height="624" />
<map name="Map" id="Map">
<area shape="poly" coords="744,270,697,297,697,350,743,379,791,351,792,297" href="https://twitter.com/santisiri" target="_blank" />
<area shape="poly" coords="1434,181,1387,208,1387,261,1433,290,1481,262,1482,208" href="https://twitter.com/en256bits" target="_blank" />
<area shape="poly" coords="585,362,538,389,538,442,584,471,632,443,633,389" href="https://twitter.com/GAastt" target="_blank" />
<area shape="poly" coords="691,361,644,388,644,441,690,470,738,442,739,388" href="https://twitter.com/evajules" target="_blank" />
<area shape="poly" coords="798,362,751,389,751,442,797,471,845,443,846,389" href="https://twitter.com/DarioLuaces" target="_blank" />
<area shape="poly" coords="903,363,856,390,856,443,902,472,950,444,951,390" href="https://twitter.com/Lolakissrou" target="_blank" />
<area shape="poly" coords="479,0,432,27,432,80,478,109,526,81,527,27" href="https://twitter.com/marianogoren" target="_blank" />
<area shape="poly" coords="479,181,432,208,432,261,478,290,526,262,527,208" href="https://twitter.com/asewrjugin" target="_blank" />
<area shape="poly" coords="1434,1,1387,28,1387,81,1433,110,1481,82,1482,28" href="https://twitter.com/carluanjos" target="_blank" />
<area shape="poly" coords="1010,362,963,389,963,442,1009,471,1057,443,1058,389" href="https://twitter.com/GonzaStp" target="_blank" />
<area shape="poly" coords="1117,362,1070,389,1070,442,1116,471,1164,443,1165,389" href="https://twitter.com/miguelsoliz" target="_blank" />
<area shape="poly" coords="1222,363,1175,390,1175,443,1221,472,1269,444,1270,390" href="https://twitter.com/tomasinsua" target="_blank" />
<area shape="poly" coords="1328,362,1281,389,1281,442,1327,471,1375,443,1376,389" href="https://twitter.com/mbidondo" target="_blank" />
<area shape="poly" coords="1380,272,1333,299,1333,352,1379,381,1427,353,1428,299" href="https://twitter.com/SebaPdR" target="_blank" />
<area shape="poly" coords="1276,272,1229,299,1229,352,1275,381,1323,353,1324,299" href="https://twitter.com/gonluce" target="_blank" />
<area shape="poly" coords="1169,271,1122,298,1122,351,1168,380,1216,352,1217,298" href="https://twitter.com/Alemanarg" target="_blank" />
<area shape="poly" coords="1062,271,1015,298,1015,351,1061,380,1109,352,1110,298" href="https://twitter.com/carlassarace" target="_blank" />
<area shape="poly" coords="957,271,910,298,910,351,956,380,1004,352,1005,298" href="https://twitter.com/agustinfrizzera" target="_blank" />
<area shape="poly" coords="851,271,804,298,804,351,850,380,898,352,899,298" href="https://twitter.com/slifszyc" target="_blank" />
<area shape="poly" coords="744,270,697,297,697,350,743,379,791,351,792,297" href="https://twitter.com/oscarguindzberg" target="_blank" />
<area shape="poly" coords="1223,181,1176,208,1176,261,1222,290,1270,262,1271,208" href="https://twitter.com/lisantronic" target="_blank" />
<area shape="poly" coords="1327,180,1280,207,1280,260,1326,289,1374,261,1375,207" href="https://twitter.com/julianpeller" target="_blank" />
<area shape="poly" coords="531,270,484,297,484,350,530,379,578,351,579,297" href="https://twitter.com/ebrenman" target="_blank" />
<area shape="poly" coords="638,269,591,296,591,353,638,380,686,353,686,296" href="https://twitter.com/piamancini" target="_blank" />
<area shape="poly" coords="691,180,644,207,645,263,692,290,740,263,739,207" href="https://twitter.com/JuicyMinerva" target="_blank" />
<area shape="poly" coords="797,180,749,209,749,262,799,292,846,265,844,209" href="https://twitter.com/gchiesa" target="_blank" />
<area shape="poly" coords="904,181,857,208,857,261,903,290,951,262,952,208" href="https://twitter.com/mgalanternik" target="_blank" />
<area shape="poly" coords="1009,180,962,207,963,263,1010,289,1058,263,1057,207" href="https://twitter.com/brenucciferri" target="_blank" />
<area shape="poly" coords="1116,180,1069,207,1069,260,1115,289,1163,261,1164,207" href="https://twitter.com/gravityonmars" target="_blank" />
<area shape="poly" coords="1221,0,1174,27,1174,80,1220,109,1268,81,1269,27" href="https://twitter.com/yaninacasaca" target="_blank" />
<area shape="poly" coords="1329,0,1282,27,1282,80,1328,109,1376,81,1377,27" href="https://twitter.com/NicoMeer" target="_blank" />
<area shape="poly" coords="531,90,484,117,484,170,530,199,578,171,579,117" href="https://twitter.com/gvilarino" target="_blank" />
<area shape="poly" coords="639,90,591,116,592,171,638,200,686,172,687,118" href="https://twitter.com/annagramma" target="_blank" />
<area shape="poly" coords="745,90,696,116,696,172,744,199,792,171,793,117" href="https://twitter.com/gonza_arguello" target="_blank" />
<area shape="poly" coords="850,90,803,117,802,173,849,199,897,171,898,117" href="https://twitter.com/muniquevedo" target="_blank" />
<area shape="poly" coords="957,89,910,116,912,173,958,199,1005,171,1005,116" href="https://twitter.com/nmaschwitz" target="_blank" />
<area shape="poly" coords="1064,90,1017,116,1017,172,1063,199,1111,171,1112,117" href="https://twitter.com/Archi7Mont" target="_blank" />
<area shape="poly" coords="796,-1,749,26,749,79,795,108,843,80,844,26" href="https://twitter.com/nickypeisa" target="_blank" />
<area shape="poly" coords="1169,89,1122,116,1122,171,1168,200,1218,173,1217,118" href="https://twitter.com/cristiandouce" target="_blank" />
<area shape="poly" coords="1115,0,1068,27,1068,80,1114,109,1162,81,1163,27" href="https://twitter.com/felipemuni" target="_blank" />
<area shape="poly" coords="1010,0,963,27,963,80,1009,109,1057,81,1058,27" href="https://twitter.com/mairwilliams" target="_blank" />
<area shape="poly" coords="1275,89,1227,117,1227,170,1275,200,1323,171,1322,117" href="https://twitter.com/equaine" target="_blank" />
<area shape="poly" coords="1380,90,1333,117,1333,170,1379,199,1427,171,1428,117" href="https://twitter.com/juanib82" target="_blank" />
<area shape="poly" coords="585,181,538,208,537,263,584,290,632,262,633,208" href="https://twitter.com/marianolopata" target="_blank" />
<area shape="poly" coords="902,0,855,27,855,80,901,109,949,81,950,27" href="https://twitter.com/@rominisky23" target="_blank" />
<area shape="poly" coords="584,0,537,27,537,80,583,109,631,81,632,27" href="https://twitter.com/oscarguindzberg" target="_blank" />
<area shape="poly" coords="690,0,643,27,643,80,689,109,737,81,738,27" href="https://twitter.com/donpowa" target="_blank" />
</map>
</div>
</div>
<div id="slide4">
<h1 class="blackHead">FAQ</h1>
<div id="accordian">
<div>
<h3><img src="images/bullet-pink.png" alt="" />How does DOS improve previous online voting systems?</h3>
<div class="accContent">
<p>DemocracyOS has a much more user friendly interface, especially in terms of data visualization and browsing. It is a two-way platform: bottom-up (citizens can present projects to be debated) and top-down (the representative presents for debate those bills currently in debate in Congress). DemocracyOS has three basic actions: "get informed," "join the conversation," and "vote."</p>
</div>
</div>
<div>
<h3><img src="images/bullet-voilet.png" alt="" />What's the status of development?</h3>
<div class="accContent">
<p>We’ve built the initial 20% of the software—the basic, initial architecture and front end. We are working on a law markup language for legislative data. (That is, a data structure standard to incorporate data scraped from legislative sources around the word. The goal is to build an LML to be read by DemocracyOS as well as other apps that accept this open standard.) Finally, we have a tested initial prototype.</p>
<p>For us to build a stable version, in multiple languages, with mobile support and a RESTful API, we'll need at least one year of development, with an experienced team of 5–7 people, working full-time.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-yellow.png" alt="" />How difficult is it to implement DOS in my party/institution?</h3>
<div class="accContent">
<p>It should be similar to installing WordPress. We will provide content (videos, tutorials) so that ideally anyone can setup DemocracyOS. </p>
<p>We will also be building a self-setup mechanism for those of you who just can't wait. </p>
</div>
</div>
<div>
<h3><img src="images/bullet-green.png" alt="" />Do you provide a support assistance?</h3>
<div class="accContent">
<p>As a part of the project’s financial sustainability plan, we provide consulting services, training, support and adaptations. DOS can be used by public or private organisations.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-voilet.png" alt="" />Can I customize DOS?</h3>
<div class="accContent">
<p>Of course! Although currently there's no customization module available, since DOS is licensed under MIT, anyone can download/clone it and modify it suiting their needs while respecting the license.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-yellow.png" alt="" />In what languages is it available?</h3>
<div class="accContent last">
<p>Firstly in English and Spanish, we will be incorporating translations as we progress.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-pink.png" alt="" />Why are you launching DOS on Kickstarter?</h3>
<div class="accContent">
<p>We share the philosophy behind Kickstarter, we want to crowdfund our project. We want to take the software to the next level and we need support to make it happen. </p>
<p>Crowdfunding DOS will help us hire programmers and hosting to build a stable and scalable product that contemplates a vast number of users. Secondly, we want to carry out actions that allow us to build an enthusiast community of citizens participating regularly.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-green.png" alt="" />How does ID validation work?</h3>
<div class="accContent">
<p>Users must provide both an online identity (twitter, facebook, email) and a legal identity (drivers license, ID card, passport) and then get validated by at least six other validated users. We are also looking into mechanisms such as, personally knowing at least one validated user or visiting in person with your ID Card to obtain a user name.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-voilet.png" alt="" />How secure is DOS against hackers?</h3>
<div class="accContent">
<p>A system's security depends as much on its code as the platform on which that code is executed. DemocracyOS is open source and under MIT licence. This is why we invite all programmers and hackers to collaborate in the information security building process. Also, it will allow for any implementation to extend its code to the conditions it deems necessary. Every interaction inside DemocracyOS is registered and an alert mechanism will be put in place to detect bugs as well as unwanted interventions and correct them. </p>
<p>Technically, DemocracyOS is conceived to be independent from the operating system, hence an implementation’s security will be subject to the security measures its environment provides. DemocracyOS guarantees the transparent and safe functioning of the platform but can also be empowered by the security arrangements each implementation chooses.</p>
</div>
</div>
<div>
<h3><img src="images/bullet-yellow.png" alt="" />How does the delegation feature work?</h3>
<div class="accContent last">
<p>If someone feels they are not sufficiently informed to cast a vote on certain topic, he/she can choose another citizen as their proxy on a that particular topic (tag). We’ve put in place an alert system that informs those who have proxy voters, how the proxy will vote and thus the user can then confirm or pull back their delegation and cast a vote directly (the default setting for no-action is confirmation). Proxy delegates are allowed to delegate their vote (and therefore those votes delegated to them) on someone else for that same tag. </p>
<p>You can always take back that delegation, anytime. </p>
</div>
</div>
<div>
<h3><img src="images/bullet-pink.png" alt="" />Does it work on mobile devices?</h3>
<div class="accContent">
<p>DemocracyOS is built on HTML5 and is responsive-ready, so it works on most mobile browsers out of the box. Please report a bug if you find it not to work on your device!</p>
</div>
</div>
<div>
<h3><img src="images/bullet-green.png" alt="" />How do DOS notifications work?</h3>
<div class="accContent">
<p>There are going to be settings at the user level and proposal level. Notifications will be sent for every update or a report every certain period of time.</p>
</div>
</div>
</div>
<div class="lineBreak"></div>
</div>
<div id="slide5">
<h1 class="whiteHead">Contact Us</h1>
<div class="content two-cols clearfix">
<div class="col-1">
<h2>Contact Us</h2>
<p>We're currently seeking topical experts, students and enthusiasts to help out and take action with us. If you feel you can help by spreading the word, doing some press or simply by giving feedback or mentoring our current beta, don't hesitate in contacting us. We're all ears!</p>
<!-- UNDONE: re-enable when handling on-site messaging -->
<!-- <ul>
<li><img src="images/phone.png" alt="Phone" />+54 9 11 4125-4410</li>
<li><img src="images/email.png" alt="Email" /><a href="mailto:[email protected]">[email protected]</a></li>
<li><img src="images/tweet.png" alt="Tweet" /><a href="https://twitter.com/DemocracyOS" target="_blank">@DemocracyOS</a></li>
</ul> -->
</div>
<div class="col-2">
<!-- TODO: remove when handling on-site messaging -->
<ul>
<li><img src="images/phone.png" alt="Phone" />+54 9 11 4125-4410</li>
<li><img src="images/email.png" alt="Email" /><a href="mailto:[email protected]">[email protected]</a></li>
<li><img src="images/tweet.png" alt="Tweet" /><a href="https://twitter.com/DemocracyOS" target="_blank">@DemocracyOS</a></li>
</ul>
<!-- UNDONE: re-enable when handling on-site messaging -->
<!-- <h2>Send a Message</h2>
<form>
<div class="two-cols">
<div class="clearfix">
<div class="col-1">
<label for="fname">First Name</label>
<input type="text" id="fname" />
</div>
<div class="col-2">
<label for="lname">Last Name</label>
<input type="text" id="lname" />
</div>
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" />
</div>
<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<input type="submit" value="Send Message" />
</div>
</form> -->
</div>
</div>
<div class="logo"><img src="images/logo-large.png" alt="Democracy.OS" /></div>
</div>
</div>
<!-- Grab Google CDN's jQuery. -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<!-- Google analytics. -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-47050667-1']);
_gaq.push(['_setDomainName', 'democracyos.org']);
_gaq.push(['_setAllowLinker', true]);
_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>
<!-- this is where we put our custom functions -->
<script src="js/jquery.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script src="js/common.js" type="text/javascript"></script>
</body>
</html>