Projekt

Obecné

Profil

Stáhnout (9.8 KB) Statistiky
| Větev: | Revize:
1 19963e5b kohlicekjan
<!doctype html>
2
<html ng-app="PVPK" class="no-js" lang="cs">
3
<head>
4
    <meta charset="utf-8">
5
    <title>Průjezd vozidel - Plzeňský kraj</title>
6
    <meta http-equiv="x-ua-compatible" content="ie=edge">
7
8
    <meta name="description" content="Zobrazení dat o průjezdu vozidel pro Plzeňský kraj">
9
    <meta name="viewport" content="width=device-width, initial-scale=1">
10
11
    <link rel="apple-touch-icon" href="./assets/img/favicon.png">
12
    <link rel="icon" href="./assets/img/favicon.png">
13
14
    <script>
15
        document.documentElement.className = document.documentElement.className.replace("no-js", "js");
16
    </script>
17
18
    <link rel="stylesheet" href="./assets/css/normalize.css">
19
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
20
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
21
    <link rel="stylesheet" media="screen" href="./assets/css/main.css">
22
23
24
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
25
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
26
    <script src="./app.js"></script>
27
28
</head>
29
<body>
30
<!--[if lte IE 9]>
31
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
32
    your browser</a> to improve your experience and security.</p>
33
<![endif]-->
34
35
<div class="container-fluid h-100">
36
    <div class="row h-100">
37
        <!--search section-->
38
        <section class="search col-12 col-sm-6 col-lg-3" id="search">
39
40
            <header class="mt-2">
41
42
                <h1>
43
                    <img src="./assets/img/favicon.png" alt="logo"> Průjezd vozidel
44
                    <small class="text-muted">Plzeňský kraj</small>
45
                </h1>
46
47
            </header>
48
49
            <div class="mb-4 mt-4">
50
                <h4></h4>
51
                <form method="get">
52
53
                    <div class="form-group">
54
                        <label for="searchLocation" class="h5">Hledání - lokalit</label>
55
56
                        <input type="search" id="searchLocation" name="location"
57
                               class="form-control form-control-sm"
58
                               placeholder="Město, ulice, psč, ...">
59
                    </div>
60
61
                    <div class="form-row">
62
63
                        <div class="form-group col">
64
                            <label for="searchFromDate">Období</label>
65
66
                            <input type="date" id="searchFromDate" name="fromDate"
67
                                   class="form-control form-control-sm"
68
                                   value="2018-04-01">
69
                        </div>
70
71
                        <div class="form-group col">
72
                            <label for="searchToDate" class="invisible">Období</label>
73
                            <input type="date" id="searchToDate" name="toDateTime"
74
                                   class="form-control form-control-sm"
75
                                   value="2018-04-30">
76
                        </div>
77
78
79
                    </div>
80
81
                    <div class="form-row">
82
83
                        <div class="form-group col">
84
                            <label for="searchFromTime">Časové rozmezí dne</label>
85
                            <input type="time" id="searchFromTime" class="form-control form-control-sm"
86
                                   value="06:00">
87
                        </div>
88
89
                        <div class="form-group col">
90
                            <label for="searchToTime" class="invisible">Časové rozmezí dne</label>
91
                            <input type="time" id="searchToTime" class="form-control form-control-sm" value="20:00">
92
                        </div>
93
94
95
                    </div>
96
97
                    <div class="form-group">
98
                        <label for="searchVehicle">Vozidla</label>
99
                        <select id="searchVehicle" class="custom-select custom-select-sm">
100
                            <option value="all" selected>Všechna vozidla</option>
101
                        </select>
102
                    </div>
103
                    <div class="custom-control custom-checkbox mb-3">
104
                        <input type="checkbox" id="searchDirection" name="searchDirection"
105
                               class="custom-control-input"
106
                               checked>
107
                        <label for="searchDirection" class="custom-control-label">Rozlišovat směr</label>
108
                    </div>
109
110
                    <input type="submit" value="Vyhledat" class="btn btn-primary btn-block">
111
112
                </form>
113
114
115
                <div class="result-locations mb-5 mt-5">
116
                    <h5>Lokality</h5>
117
118
119
                    <div class="list-group">
120
                        <a href="#"
121
                           class="list-group-item list-group-item-action flex-column align-items-start active">
122
                            <div class="d-flex w-100 justify-content-between">
123
                                <h6 class="mb-1">Nýrsko, směr od Ž.Rudy</h6>
124
                                <small>malé info</small>
125
                            </div>
126
                            <small>
127
                                <address>U Banky, Nýrsko</address>
128
                            </small>
129
                        </a>
130
                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
131
                            <div class="d-flex w-100 justify-content-between">
132
                                <h6 class="mb-1">Domažlice, směr od Klatov</h6>
133
                                <small class="text-muted">malé info</small>
134
                            </div>
135
                            <small>
136
                                <address>Masarykova, Domažlice</address>
137
                            </small>
138
                        </a>
139
                        <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
140
                            <div class="d-flex w-100 justify-content-between">
141
                                <h6 class="mb-1">Hostouň, směr od Bělé</h6>
142
                                <small class="text-muted">malé info</small>
143
                            </div>
144
                            <small class="text-muted">
145
                                <address>Petra Bezruče, Hostouň</address>
146
                            </small>
147
                        </a>
148
                    </div>
149
150
                </div>
151
152
153 54fa168c Cajova-Houba
            </div>
154 19963e5b kohlicekjan
155
            <footer class="text-center mb-2 mt-2">
156
                2018 © FAV, ZČU
157
            </footer>
158
        </section>
159
160
        <!--graph section-->
161
        <section class="graph col-12 col-sm-6 col-lg-3" id="graph">
162
163
            <header class="mt-2">
164
165
                <h4>Grafy
166
                    <button type="button" class="close" aria-label="Close">
167
                        <span aria-hidden="true">&times;</span>
168
                    </button>
169
                </h4>
170
            </header>
171
172
173
            <script src="assets/libs/Chart.min.js"></script>
174
            <canvas id="myChart" width="100%" height="60"></canvas>
175
            <script>
176
                var ctx = document.getElementById("myChart").getContext('2d');
177
                var myChart = new Chart(ctx, {
178
                    type: 'bar',
179
                    data: {
180
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
181
                        datasets: [{
182
                            label: '# of Votes',
183
                            data: [12, 19, 3, 5, 2, 3],
184
                            backgroundColor: [
185
                                'rgba(255, 99, 132, 0.2)',
186
                                'rgba(54, 162, 235, 0.2)',
187
                                'rgba(255, 206, 86, 0.2)',
188
                                'rgba(75, 192, 192, 0.2)',
189
                                'rgba(153, 102, 255, 0.2)',
190
                                'rgba(255, 159, 64, 0.2)'
191
                            ],
192
                            borderColor: [
193
                                'rgba(255,99,132,1)',
194
                                'rgba(54, 162, 235, 1)',
195
                                'rgba(255, 206, 86, 1)',
196
                                'rgba(75, 192, 192, 1)',
197
                                'rgba(153, 102, 255, 1)',
198
                                'rgba(255, 159, 64, 1)'
199
                            ],
200
                            borderWidth: 1
201
                        }]
202
                    },
203
                    options: {
204
                        scales: {
205
                            yAxes: [{
206
                                ticks: {
207
                                    beginAtZero: true
208
                                }
209
                            }]
210
                        }
211
                    }
212
                });
213
            </script>
214
215
        </section>
216
217
        <!--map section-->
218
        <section class="map col-12 col-sm-12 col-lg-6" id="map">
219
220
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1326226.1771813703!2d11.996870042985256!3d49.51688547407959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470abf4bb3db6569%3A0x100af0f6614a850!2zUGx6ZcWIc2vDvSBrcmFq!5e0!3m2!1scs!2scz!4v1523814169200"
221
                    width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
222
        </section>
223
    </div>
224
</div>
225
226
227
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
228
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
229
        crossorigin="anonymous"></script>
230
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
231
        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
232
        crossorigin="anonymous"></script>
233
234
235
</body>
236 54fa168c Cajova-Houba
</html>