forked from rufuspollock-okfn/yourtopia
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (137 loc) · 6.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YourTopia</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="vendor/bootstrap/2.0.0/css/bootstrap.css" rel="stylesheet">
<link href="vendor/bootstrap/2.0.0/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://okfnlabs.org/recline/css/data-explorer.css" rel="stylesheet">
<link href="http://okfnlabs.org/recline/css/graph-flot.css" rel="stylesheet">
<link rel="stylesheet" href="styles/yourtopia.css">
<link rel="stylesheet" href="styles/heydings/heydings.css">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">YourTopia v2</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#index/create">Create your index</a></li>
<li><a href="#index/visualise">Visualise</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="page-header">
<h1>Welcome to YourTopia.<small> Visualising global development beyond GDP according to <em>your</em> priorities.</small></h1>
</div>
<div class="backbone-page home">
<div id="myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<<img src="http://farm8.staticflickr.com/7048/6803470782_52bc28c167_b.jpg">
<div class="carousel-caption">
<p>Yourtopia is an interactive tool that sums up human development and social progress around the world <br />according to your individual criteria through interactive visualisations and indices.</p>
</div>
</div>
<div class="item">
<img src="http://farm8.staticflickr.com/7057/6949579693_bc79263193_b.jpg">
<div class="carousel-caption">
<p>Yourtopia works by giving you a short quiz that asks "What is your utopia?". <br />In this quiz, you choose how important different dimensions of human development are to you.</p>
</div>
</div>
<div class="item">
<img src="http://farm8.staticflickr.com/7176/6949579639_68f7452d80_b.jpg">
<div class="carousel-caption">
<p>Once you've chosen your ideal measures of social progress, Yourtopia shows you how nations around the world <br />rank according to these priorities by combining many large datasets into a single index.</p>
</div>
</div>
<div class="item">
<img src="http://farm8.staticflickr.com/7184/6803470844_0f3cf68f51_b.jpg">
<div class="carousel-caption">
<p>You can also browse through the results of other Yourtopia quizzes done around the world to compare what's important beyond the usual GDP indices.
<br />We believe participatory tools like this can make analysing global economics fun!</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="backbone-page index-create" style="display: none;">
<h2>Pick the components for your index</h2>
<div class="row">
<div class="span6">
<div class="well">
<h3>
<input type="search" class="filter" placeholder="Filter (e.g. 'infrastructure'" style="float: right" />
Series
</h3>
<div class="clear" style="clear:both;"></div>
<div class="universe list">
<ul class="components">
</ul>
</div>
</div>
</div>
<div class="span6">
<div class="well">
<h3 style="margin-bottom: 19px;">Selected</h3>
<div class="clear" style="clear:both;"></div>
<div class="selection list">
<ul class="components">
</ul>
</div>
</div>
</div>
</div>
</div><!-- /index-create -->
<div class="backbone-page index-view" style="display: none"></div>
</div> <!-- /content -->
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- libraries -->
<script src="vendor/jquery/1.7.1/jquery.js"></script>
<script src="vendor/bootstrap/2.0.0/js/bootstrap.js"></script>
<script src="vendor/jquery-ui/1.8.17/jquery-ui.min.js"></script>
<script src="vendor/json2.js"></script>
<script src="vendor/underscore/1.2.2/underscore.js"></script>
<script src="vendor/backbone/0.5.3/backbone.js"></script>
<script src="vendor/mustache.js/20120303/mustache.js"></script>
<script src="http://okfnlabs.org/recline/vendor/jquery.mustache.js"></script>
<script src="http://okfnlabs.org/recline/vendor/jquery.flot-0.7.js"></script>
<script src="http://okfnlabs.org/recline/recline.js"></script>
<!--script -->
<script src="src/model.js"></script>
<script src="src/view.js"></script>
<script src="src/app.js"></script>
</body>
</html>