-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (145 loc) · 5.73 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>goto.NRW</title>
<!-- CSS includes -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css/leaflet.css" rel="stylesheet" type="text/css">
<link href="assets/css/materialize.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.png" />
<style>
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
}
.draggable-row {
margin-bottom:0px;
}
.collection-item {
cursor: n-resize;
}
.goto-logo-header {
height: 24px;
}
.logo {
position:absolute;
max-width:125px;
top:0;
right:0;
z-index:99;
}
</style>
</head>
<body>
<img src="gotoNRW.png" class="logo" />
<!-- Modal Structure -->
<div id="modal2" class="modal">
<div class="modal-content">
<h4>FAQ</h4>
<h5>Was ist GOTO.nrw?</h5>
<p>
GOTO.nrw ist eine Platform die dir hilft deinen optimalen Wohnort zu finden. Durch deine eigene persönliche Gewichtung der Faktoren wie Nahverkehr, Freizeit/Erholung, Bildung, Arbeitsmarkt, Wachstum und Sicherheit kannst du den für dich schönsten/besten/tollsten
Ort in NRW aufstöbern.
</p>
<h5>Woher kommen eure Daten?</h5>
<p>
Wie verwenden offene Daten, die von den Kommunen und den Landesbehörden von NRW bereitgestellt werden. Die Daten haben wir aufbereitet und daraus die Indikikatoren für die jeweiligen Kategorien errechnet. Die Daten kommen unter anderem aus dem open.nrw
Portal und dem Landesamt für Statistik.
</p>
<h5>Warum habt ihr Feature X nicht eingebaut?</h5>
<p>
GOTO.nrw ist an einem Nachmittag im September entstanden. Für mehr war erstmal nicht Zeit.
</p>
<h5>Wer seid ihr?</h5>
<p>
Eine spontane Gruppe, die sich für das Projekt auf dem NRW Hackathon im Spätsommer 2016 gefunden hat.
</p>
<h5>Wo finde ich euren Quellcode?</h5>
<p>
Auf GitHub, wo sonst?
</p>
<a href="https://github.com/codeformuenster/goto.nrw">https://github.com/codeformuenster/goto.nrw</a>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Zurück zur App</a>
</div>
</div>
<div id="map"></div>
<!-- FLOATING ACTION BUTTON-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red modal-trigger" href="#modal1">
<i class="large material-icons">filter_list</i>
</a>
</div>
<!-- FLOATING ACTION BUTTON 2-->
<div class="fixed-action-btn" style="bottom: 125px; right: 24px;">
<a class="btn-floating btn-large green modal-trigger" href="#modal2">
<i class="large material-icons">info_outline</i>
</a>
</div>
<!-- MODAL -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4><img src="gotoNRW.png" class="goto-logo-header" /> Willkommen</h4>
<p>Wähle deine Präferenzen durch Verschieben aus.</p>
<ul class="collection">
<li class="collection-item">
<div class="row range-field">
<label for="publicTransport">ÖPNV</label>
<input type="range" id="publicTransport" min="0" max="10"/>
</div>
</li>
<li class="collection-item">
<div class="row range-field">
<label for="security">Sicherheit</label>
<input type="range" id="security" min="0" max="10"/>
</div>
</li>
<li class="collection-item">
<div class="row range-field">
<label for="leisure">Freizeitaktivitäten</label>
<input type="range" id="leisure" min="0" max="10"/>
</div>
</li>
<li class="collection-item">
<div class="row range-field">
<label for="culture">Kultur</label>
<input type="range" id="culture" min="0" max="10"/>
</div>
</li>
<li class="collection-item">
<div class="row range-field">
<label for="education">Bildung</label>
<input type="range" id="education" min="0" max="10"/>
</div>
</li>
<li class="collection-item">
<div class="row range-field">
<label for="jobs">Arbeitsmarkt</label>
<input type="range" id="jobs" min="0" max="10"/>
</div>
</li>
</ul>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat " id="redraw">Los geht's</a>
</div>
</div>
<!-- JavaScript includes -->
<script src="assets/js/client.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('.modal-trigger').leanModal();
$('#modal1').openModal();
});
</script>
</body>
</html>