-
Notifications
You must be signed in to change notification settings - Fork 0
/
dashboard.html
128 lines (124 loc) · 4.25 KB
/
dashboard.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard - Ring Ring</title>
<link rel="stylesheet" href="style/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,500&family=Varela+Round&display=swap"
rel="stylesheet"
/>
<!-- Load mapbox -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
<header>
<nav>
<ul>
<li>
<a href="dashboard.html">
<img src="resources/dashboardIcon.svg" />Home</a
>
</li>
<li>
<a href="forYou.html">
<img src="resources/traficLight.svg" class="barChartIcon" />Voor
u</a
>
</li>
<li>
<a href="map.html">
<img src="resources/mapIcon.svg" class="mapHeaderIcon" />Kaart</a
>
</li>
<li>
<a href="feedback.html">
<img
src="resources/feedbackIcon.svg"
class="feedbackHeaderIcon"
/>Ontvangen Feedback</a
>
</li>
</ul>
</nav>
<img src="resources/logo.svg" alt="Ring Ring logo" />
<div>
<img class="notification" src="resources/notification.svg" />
<img class="avatar" src="resources/avatar.svg" />
<div class="accountInfo">
<p>Jan van Straten</p>
<a class="logOutButton" href="index.html">Uitloggen</a>
</div>
</div>
</header>
<main>
<section class="contentWrapper">
<section class="dashboardButtons">
<a href="forYou.html" class="dashboardButton">
<img src="resources/dashboard.svg" alt="Dashboard icon" />
<p>Datavisualisaties voor uw gebruik</p>
Voor u
</a>
<a href="map.html" class="dashboardButton">
<img src="resources/map.svg" alt="Chart icon" />
<p>Gedetaileerde blik op de routes</p>
Kaart
</a>
<a href="feedback.html" class="dashboardButton">
<img src="resources/feedback.svg" alt="Feedback icon" />
<p>Feedbackoverzicht van de routes</p>
Route ervaringen
</a>
</section>
<section class="contentDetailWrapper contentMap contentMapHome">
<section class="contentHeadersTextHome">
<h1>Afgelegde fietsroutes Amsterdam</h1>
<h2>Alle routes afgelegd in Januari 2020</h2>
</section>
<div id="map" class="mapHome"></div>
</section>
</section>
<section class="sidebar sidebarHome">
<article>
<h1>Aantal fietsritten</h1>
<h2>In het weekend of doordeweeks</h2>
<div class="bikeRoutes">
<article class="amountBikeRoutes">
<h3>2417</h3>
<p>Fietsritten in totaal</p>
</article>
<article class="amountDistance">
<h3>14400km</h3>
<p>In totaal gefietst deze maand</p>
</article>
</div>
</article>
<article>
<h1>Feedback</h1>
<h2>Nieuwste ontvangen feedback van fietsers in Amsterdam</h2>
<ul class="feedbackHomeSection feedbackSection">
<li>
<p>11-01-2021</p>
<p>Slecht asfalt en lang moeten wach...</p>
<img src="./resources/score_bad.svg" />
</li>
<li>
<p>13-01-2021</p>
<p>Heerlijk stukje gefietst, POWERRRR!</p>
<img src="./resources/score_good.svg" />
</li>
</ul>
</article>
</section>
</main>
<footer></footer>
<script src="scripts/mapHome.js"></script>
</body>
</html>