forked from mike-koch/ets2-mobile-route-advisor
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathdashboard.html
266 lines (242 loc) · 22.6 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
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
<svg style="display: none">
<defs>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ets2-truck" viewBox="0 0 54 36">
<path d="m14 31a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14-25h8v8h-8zm45 25a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-38-31-3 3h-8l-1 1v10h-1v10h2v2h-2v6h6.0859a6 6 0 0 1 -0.0859 -1 6 6 0 0 1 6 -6 6 6 0 0 1 6 6 6 6 0 0 1 -0.08984 1h8.09v-1h7v1h7.0859a6 6 0 0 1 -0.086 -1 6 6 0 0 1 6 -6 6 6 0 0 1 6 6 6 6 0 0 1 -0.08984 1h2.09v-6h-1v-2h-3v-3h-12v3h-17v-2h3v-19h-1v-3h-10z"/>
</symbol>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ets2-trailer" viewBox="0 0 105 39">
<path d="m95 34a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14 0a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14 0a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-31-4h13v4h-13zm-43-30h101a2 2 0 0 1 2 2v26h-105v-26a2 2 0 0 1 2-2z"/>
</symbol>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ats-truck" viewBox="0 0 73 40">
<path d="M15 34a3 3 0 0 0 -3 -3 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3 -3zm3 0a6 6 0 0 1 -6 6 6 6 0 0 1 -6 -6 6 6 0 0 1 6 -6 6 6 0 0 1 6 6zm47 0a3 3 0 0 0 -3 -3 3 3 0 0 0 -3 3 3 3 0 0 0 3 3 3 3 0 0 0 3 -3zm3 0a6 6 0 0 1 -6 6 6 6 0 0 1 -6 -6 6 6 0 0 1 6 -6 6 6 0 0 1 6 6zm-13-14h14v3h-14zM16 9h9v8h-9zm11 0h4v8h-4zM27,0l-4 4h-6l-2 2v11h-12v2h-1v10h-2v6h5.078a7 7 0 0 1 -0.078 -1 7 7 0 0 1 7 -7 7 7 0 0 1 7 7 7 7 0 0 1 -0.08 1h6.08v-2h11v2h19.078a7 7 0 0 1 -0.078 -1 7 7 0 0 1 7 -7 7 7 0 0 1 7 7 7 7 0 0 1 -0.08 1h2.08v1h2v-12h-2v1h-21v-1h-3v-24h-8v24h-1v-24z"/>
</symbol>
<!-- Based on the actual game gfx. -->
<symbol id="svg-ats-trailer" viewBox="0 0 114 43">
<path d="m104 38a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-14 0a2 2 0 0 0 -2 -2 2 2 0 0 0 -2 2 2 2 0 0 0 2 2 2 2 0 0 0 2 -2zm3 0a5 5 0 0 1 -5 5 5 5 0 0 1 -5 -5 5 5 0 0 1 5 -5 5 5 0 0 1 5 5zm-42-4h21v4h-21zM2 0h110a2 2 0 0 1 2 2v30h-114v-30a2 2 0 0 1 2-2z"/>
</symbol>
<!-- Based on the actual game icon. 12x12 image with 2 pixel margin. -->
<symbol id="svg-gear" viewBox="-2 -2 16 16">
<path d="m0 0v12h2v-5h3v5h2v-5h3 2v-2-5h-2v5h-3v-5h-2v5h-3v-5h-2z"/>
</symbol>
<!-- Based on the actual game icon. -->
<symbol id="svg-fuel" viewBox="0 0 16 16">
<path d="m9 3h-6v3h6zm-8-2h10v6h-1v6h2v-11h1v3h1v2h-1v8h-12v-2h1v-6h-1z"/>
</symbol>
<!-- Based on the actual game icon. -->
<symbol id="svg-fatigue" viewBox="0 0 18 12">
<path d="m5.5 4.5a1.5 1.5 0 0 1 -1.5 1.5 1.5 1.5 0 0 1 -1.5 -1.5 1.5 1.5 0 0 1 1.5 -1.5 1.5 1.5 0 0 1 1.5 1.5zm0.5-1.5v3h1 8a4 3 0 0 0 -4 -3h-5zm-6-3h2v7h14v-5h2v10h-2v-3h-14v3h-2z"/>
</symbol>
<!-- Based on http://typicons.com/ 24x24 image with 3 pixel margin. -->
<symbol id="svg-compass" viewBox="16 22 136 136">
<g><path style="opacity:1" fill="#feb906" d="M 52.5,26.5 C 82.1901,25.0101 98.8568,39.0101 102.5,68.5C 98.5444,97.6174 81.8778,111.117 52.5,109C 27.8112,101.827 16.9779,85.3266 20,59.5C 24.3394,41.9946 35.1727,30.9946 52.5,26.5 Z M 53.5,37.5 C 71.8973,34.7743 84.064,42.1077 90,59.5C 92.595,73.4828 88.095,84.6494 76.5,93C 65.8131,99.9706 54.8131,100.304 43.5,94C 29.8028,81.5864 26.9695,67.0864 35,50.5C 40.2361,44.7514 46.4028,40.4181 53.5,37.5 Z"/></g>
<g><path style="opacity:1" fill="#d8d9d8" d="M 60.5,45.5 C 65.4865,52.2463 68.8198,59.913 70.5,68.5C 68.9112,75.0154 66.7445,81.3487 64,87.5C 63.1207,90.3463 61.4541,91.013 59,89.5C 56.0778,83.4912 53.5778,77.3245 51.5,71C 52.9685,61.9092 55.9685,53.4092 60.5,45.5 Z"/></g>
<g><path style="opacity:1" fill="#d8d9d8" d="M 112.5,67.5 C 115.85,67.335 119.183,67.5017 122.5,68C 128.819,73.9826 133.986,80.816 138,88.5C 141.82,108.91 144.987,129.41 147.5,150C 147.355,150.772 147.022,151.439 146.5,152C 144.402,151.968 142.402,151.301 140.5,150C 130.083,142.13 119.083,135.297 107.5,129.5C 104.472,129.847 101.806,131.014 99.5,133C 87.8932,142.607 75.7265,151.441 63,159.5C 48.4582,152.728 34.1249,145.395 20,137.5C 19.3333,135.833 19.3333,134.167 20,132.5C 24.448,125.718 29.2814,119.218 34.5,113C 42.2101,115.421 50.2101,116.921 58.5,117.5C 78.1397,117.101 93.3064,108.767 104,92.5C 107.149,84.2237 109.982,75.8904 112.5,67.5 Z"/></g>
</symbol>
<!-- Based on http://typicons.com/ 24x24 image with 3 pixel margin. -->
<symbol id="svg-job" viewBox="18 6 136 136">
<g><path style="opacity:1" fill="#d8d9d8" d="M 134.5,78.5 C 129.926,84.6388 124.26,89.6388 117.5,93.5C 115.34,91.1687 113.34,88.6687 111.5,86C 109.754,85.5291 108.087,84.8624 106.5,84C 96.172,83.5002 85.8387,83.3335 75.5,83.5C 75.3433,84.8734 75.51,86.2068 76,87.5C 88.8039,101.305 101.971,114.805 115.5,128C 117.165,128.788 118.831,129.122 120.5,129C 124.714,124.283 129.381,120.117 134.5,116.5C 134.666,126.172 134.5,135.839 134,145.5C 133.326,146.578 132.326,147.245 131,147.5C 115.186,148.148 99.3531,148.481 83.5,148.5C 66.791,148.63 50.1243,148.13 33.5,147C 32.3368,105.238 32.1702,63.4044 33,21.5C 33.3742,20.5838 33.8742,19.7504 34.5,19C 67.5,18.3333 100.5,18.3333 133.5,19C 134.493,38.7573 134.826,58.5907 134.5,78.5 Z M 117.5,29.5 C 118.718,30.1614 120.051,30.8281 121.5,31.5C 122.378,34.3993 122.711,37.066 122.5,39.5C 122.739,41.4672 122.406,43.3005 121.5,45C 96.5,45.6667 71.5,45.6667 46.5,45C 44.5859,40.1418 43.9193,34.9752 44.5,29.5C 68.8333,29.5 93.1667,29.5 117.5,29.5 Z M 48.5,54.5 C 72.5087,54.3729 96.5087,54.7062 120.5,55.5C 121.714,58.1293 121.714,60.796 120.5,63.5C 95.1667,64.8333 69.8333,64.8333 44.5,63.5C 44.5,62.1667 44.5,60.8333 44.5,59.5C 45.1303,57.2929 46.4637,55.6262 48.5,54.5 Z"/></g>
<g><path style="opacity:0.678" fill="#d8d9d8" d="M 117.5,29.5 C 119.467,29.2606 121.301,29.5939 123,30.5C 123.805,33.6965 123.638,36.6965 122.5,39.5C 122.711,37.066 122.378,34.3993 121.5,31.5C 120.051,30.8281 118.718,30.1614 117.5,29.5 Z"/></g>
<g><path style="opacity:0.004" fill="#d8d9d8" d="M 48.5,54.5 C 46.4637,55.6262 45.1303,57.2929 44.5,59.5C 43.7564,56.0504 45.0897,54.3838 48.5,54.5 Z"/></g>
<g><path style="opacity:0.048" fill="#d8d9d8" d="M 120.5,55.5 C 121.725,56.1522 122.392,57.3189 122.5,59C 122.693,61.0081 122.026,62.5081 120.5,63.5C 121.714,60.796 121.714,58.1293 120.5,55.5 Z"/></g>
<g><path style="opacity:0.984" fill="#1c1b1b" d="M 134.5,116.5 C 129.381,120.117 124.714,124.283 120.5,129C 118.831,129.122 117.165,128.788 115.5,128C 101.971,114.805 88.8039,101.305 76,87.5C 75.51,86.2068 75.3433,84.8734 75.5,83.5C 85.8387,83.3335 96.172,83.5002 106.5,84C 108.087,84.8624 109.754,85.5291 111.5,86C 113.34,88.6687 115.34,91.1687 117.5,93.5C 124.26,89.6388 129.926,84.6388 134.5,78.5C 142.969,68.7329 153.636,65.2329 166.5,68C 168.996,72.3228 169.162,76.8228 167,81.5C 155.933,93.0626 145.1,104.729 134.5,116.5 Z"/></g>
<g><path style="opacity:1" fill="#fbb706" d="M 153.5,72.5 C 156.518,72.3354 159.518,72.502 162.5,73C 163.554,74.3876 163.72,75.8876 163,77.5C 150.701,91.4674 138.034,105.134 125,118.5C 122.859,121.491 120.025,122.658 116.5,122C 105.5,111 94.5,100 83.5,89C 90.5,88.3333 97.5,88.3333 104.5,89C 108.682,93.3487 113.015,97.5154 117.5,101.5C 127.278,93.8923 136.611,85.7256 145.5,77C 148.099,75.205 150.766,73.705 153.5,72.5 Z"/></g>
</symbol>
<!-- Based on http://fontawesome.io/ -->
<symbol id="svg-phone-squared" viewBox="20 9 140 140">
<g><path style="opacity:0.956" fill="#d8d9d8" d="M 73.5,18.5 C 77.8814,18.3718 82.2147,18.7051 86.5,19.5C 86.5792,24.1649 88.5792,27.6649 92.5,30C 96.4726,30.9977 100.473,31.3311 104.5,31C 107.069,28.5206 109.402,25.854 111.5,23C 114.594,22.3482 117.594,22.6815 120.5,24C 123.167,25.6667 125.833,27.3333 128.5,29C 129.98,30.2991 130.646,31.9658 130.5,34C 130.009,37.6413 129.009,41.1413 127.5,44.5C 129.642,49.2846 132.642,53.4512 136.5,57C 141.5,57.3333 146.5,57.6667 151.5,58C 155.42,64.5235 156.754,71.5235 155.5,79C 151.069,80.6291 147.236,83.1291 144,86.5C 143.333,90.8333 143.333,95.1667 144,99.5C 145.981,101.657 148.314,103.324 151,104.5C 152.273,111.295 150.607,117.295 146,122.5C 140.754,126.265 135.42,126.265 130,122.5C 125.728,125.101 121.728,128.101 118,131.5C 117.337,134.869 117.504,138.203 118.5,141.5C 118.281,142.938 117.781,144.271 117,145.5C 111.873,147.952 106.54,149.952 101,151.5C 99.4385,151.397 97.9385,151.063 96.5,150.5C 94.5797,147.661 92.9131,144.661 91.5,141.5C 86.5622,138.612 81.2289,137.445 75.5,138C 72.8286,141.537 69.8286,144.704 66.5,147.5C 60.4713,145.404 54.9713,142.404 50,138.5C 49.3068,133.878 49.8068,129.378 51.5,125C 49.509,120.035 46.509,115.701 42.5,112C 39.4642,111.362 36.4642,111.528 33.5,112.5C 32.062,112.281 30.7287,111.781 29.5,111C 25.2256,104.364 23.5589,97.1973 24.5,89.5C 34.1535,86.8758 38.3201,80.5425 37,70.5C 33.9145,67.4829 30.9145,64.4829 28,61.5C 28.7296,53.8853 32.2296,47.7186 38.5,43C 42.5671,43.1313 46.4004,44.298 50,46.5C 60.4799,43.2071 64.4799,36.2071 62,25.5C 65.4681,22.5182 69.3015,20.1849 73.5,18.5 Z M 80.5,42.5 C 103.249,40.4512 119.749,49.4512 130,69.5C 136.912,94.8299 128.746,113.33 105.5,125C 80.8545,132.251 62.3545,124.751 50,102.5C 41.947,72.9356 52.1137,52.9356 80.5,42.5 Z"/></g>
<g><path style="opacity:0.971" fill="#feb906" d="M 103.5,52.5 C 116.247,51.0804 121.747,56.7471 120,69.5C 117.095,79.3983 112.095,88.065 105,95.5C 97.4626,102.706 89.6292,109.54 81.5,116C 76.1667,116.667 70.8333,116.667 65.5,116C 59.6588,112.141 58.1588,106.975 61,100.5C 63.3504,98.3171 65.517,95.9837 67.5,93.5C 71.8065,92.1082 75.9732,92.4415 80,94.5C 87.3209,89.8458 93.3209,83.8458 98,76.5C 96.9353,71.6177 96.602,66.6177 97,61.5C 98.6863,58.117 100.853,55.117 103.5,52.5 Z"/></g>
</symbol>
<!-- Based on http://www.entypo.com/ -->
<symbol id="svg-help-circled" viewBox="19 6 138 138">
<g><path style="opacity:0.976" fill="#feb906" d="M 46.5,19.5 C 59.6836,25.4251 72.6836,31.9251 85.5,39C 86.8333,39.1667 88.1667,39.3333 89.5,39.5C 102.751,32.6404 116.085,25.9737 129.5,19.5C 129.667,40.8359 129.5,62.1693 129,83.5C 115.623,92.3529 101.957,100.686 88,108.5C 80.1751,104.218 72.6751,99.385 65.5,94C 59.0803,90.7902 52.747,87.6235 46.5,84.5C 46.5,62.8333 46.5,41.1667 46.5,19.5 Z M 63.5,48.5 C 80.5,48.5 97.5,48.5 114.5,48.5C 114.5,50.8333 114.5,53.1667 114.5,55.5C 97.5,55.5 80.5,55.5 63.5,55.5C 63.5,53.1667 63.5,50.8333 63.5,48.5 Z M 63.5,61.5 C 80.5,61.5 97.5,61.5 114.5,61.5C 114.5,64.1667 114.5,66.8333 114.5,69.5C 97.5,69.5 80.5,69.5 63.5,69.5C 63.5,66.8333 63.5,64.1667 63.5,61.5 Z M 63.5,74.5 C 80.5,74.5 97.5,74.5 114.5,74.5C 114.5,76.8333 114.5,79.1667 114.5,81.5C 97.5,81.5 80.5,81.5 63.5,81.5C 63.5,79.1667 63.5,76.8333 63.5,74.5 Z"/></g>
<g><path style="opacity:1" fill="#cecdcd" d="M 148.5,79.5 C 149.832,90.6467 150.499,102.147 150.5,114C 150.333,125.5 150.167,137 150,148.5C 149.626,149.416 149.126,150.25 148.5,151C 108.833,151.667 69.1667,151.667 29.5,151C 28.6919,150.692 28.0253,150.192 27.5,149.5C 26.1775,126.536 26.1775,103.536 27.5,80.5C 38.4144,86.6019 49.4144,92.4352 60.5,98C 69.1417,104.638 78.3084,110.472 88,115.5C 108.568,104.083 128.734,92.0827 148.5,79.5 Z"/></g>
</symbol>
<!-- Based on U+27A4 Black Rightwards Arrowhead -->
<symbol id="svg-arrow-up" viewBox="-3.5 0 39 39">
<path d="M16,24 1,32 16,0 31,32z"/>
</symbol>
<!-- Cruise Control On by BomSymbols from the Noun Project -->
<symbol id="svg-cruise-control" viewBox="0 17.703 609.929 603.647">
<path d="M345.928,621.351c145.575,0,264.001-118.426,264.001-263.994c0-145.575-118.426-264-264.001-264s-264,118.425-264,264
C81.927,502.918,200.353,621.351,345.928,621.351z M179.861,211.835l22.502,22.496c2.838,2.838,6.558,4.257,10.27,4.257
c3.712,0,7.432-1.419,10.27-4.257c5.676-5.676,5.676-14.87,0-20.546L200.4,191.29c35.489-31.138,80.992-51.099,130.995-54.361
v31.905c0,8.023,6.504,14.527,14.526,14.527c8.023,0,14.527-6.503,14.527-14.527v-31.905
c50.002,3.262,95.498,23.223,130.994,54.361l-22.489,22.496c-5.676,5.676-5.676,14.876,0,20.546
c2.838,2.838,6.558,4.257,10.27,4.257c3.713,0,7.432-1.419,10.27-4.257l22.489-22.496c31.139,35.489,51.099,80.986,54.36,130.995
h-31.904c-8.023,0-14.526,6.503-14.526,14.526c0,8.023,6.503,14.527,14.526,14.527h31.904
c-3.262,49.996-23.222,95.492-54.36,130.988l-22.489-22.489c-5.676-5.676-14.869-5.676-20.546,0c-5.676,5.677-5.676,14.87,0,20.546
l22.489,22.489c-35.489,31.145-80.985,51.099-130.994,54.367v-31.918c0-8.023-6.504-14.526-14.527-14.526
c-8.022,0-14.526,6.503-14.526,14.526v31.918c-50.002-3.269-95.499-23.223-130.995-54.367l22.503-22.489
c5.676-5.676,5.676-14.869,0-20.546c-5.676-5.676-14.87-5.676-20.546,0l-22.503,22.489c-31.138-35.489-51.099-80.992-54.36-130.988
h31.912c8.023,0,14.526-6.503,14.526-14.527c0-8.023-6.503-14.526-14.526-14.526h-31.912
C128.762,292.821,148.723,247.331,179.861,211.835z"/>
<path d="M310.809,342.776c-1.863,4.492-2.912,9.415-2.912,14.58c0,20.963,17.056,38.011,38.024,38.011
c20.963,0,38.019-17.048,38.019-38.011c0-20.976-17.056-38.024-38.019-38.024c-5.165,0-10.081,1.042-14.573,2.912l-53.204-53.204
c-5.676-5.676-14.87-5.676-20.546,0c-5.676,5.676-5.676,14.87,0,20.546L310.809,342.776z"/>
<path d="M129.159,157.676H29.531c-5.878,0-11.171-3.538-13.417-8.971c-2.253-5.427-1.009-11.668,3.147-15.832l39.544-39.544
L7.983,42.506c-5.676-5.676-5.676-14.869,0-20.545s14.87-5.676,20.546,0l50.823,50.823l39.544-39.544
c4.149-4.156,10.417-5.414,15.832-3.147c5.434,2.246,8.971,7.539,8.971,13.417v99.628c0,0,0.067,5.703-3.295,9.907
C137.041,157.246,129.159,157.676,129.159,157.676z"/>
</symbol>
</defs>
</svg>
<div id="rotate-button-div" class="ol-unselectable ol-control">
<button id="rotate-button">
<svg width="0.7em" height="0.7em"><use xlink:href="#svg-arrow-up" fill="currentColor"/></svg>
</button>
</div>
<div class="dashboard connected">
<aside>
<div class="_speed">
<span class="cruiseControl">
<svg width="1em" height="1em"><use xlink:href="#svg-cruise-control" fill="lime"/></svg>
<span class="truck-cruiseControlSpeed"></span>
</span>
<span class="noCruiseControl truckSpeedRoundedKmhMph"></span> <span class="speedUnits"></span>
</div>
<div class="_gear _middle">
<svg width="1em" height="1em"><use xlink:href="#svg-gear" fill="#969696"/></svg><span class="gear _yellow-color"></span>
</div>
<div class="_damage _middle">
<div class="fillingIcon truckDamage">
<div class="top isEts2"><svg width="1.2em" height="1em"><use xlink:href="#svg-ets2-truck" fill="#969696"/></svg></div>
<div class="bot isEts2"><svg width="1.2em" height="1em"><use xlink:href="#svg-ets2-truck" fill="#930002"/></svg></div>
<div class="top isAts"><svg width="1.5em" height="1em"><use xlink:href="#svg-ats-truck" fill="#969696"/></svg></div>
<div class="bot isAts"><svg width="1.5em" height="1em"><use xlink:href="#svg-ats-truck" fill="#930002"/></svg></div>
</div>
</div>
<div class="_fuel _middle">
<div class="fillingIcon fuel">
<div class="top"><svg width="1.2em" height="1em"><use xlink:href="#svg-fuel" fill="#969696"/></svg></div>
<div class="bot"><svg width="1.2em" height="1em"><use xlink:href="#svg-fuel" fill="#f3c24c"/></svg></div>
</div>
</div>
<div class="_rest _middle">
<div class="fillingIcon rest">
<div class="top"><svg width="1.2em" height="1em"><use xlink:href="#svg-fatigue" fill="#969696"/></svg></div>
<div class="bot"><svg width="1.2em" height="1em"><use xlink:href="#svg-fatigue" fill="#1e88e5"/></svg></div>
</div>
</div>
<div class="_time">
<span class="game-time" id="headerTime"></span>
</div>
</aside>
<div class="_tabs">
<article id="_map">
<p class="loading-text" data-mra-text="LoadingMapPleaseWait"></p>
<div class="_no-map">
<div class="_row">
<p style="margin-top: 250px">No map available</p>
<div id="map-text" class="hasJob ol-unselectable ol-control"><span data-mra-text="ETA"></span>: <span class="navigation-estimatedTime"></span>, <span class="navigationEstimatedDistanceKmMi"></span> <span class="distanceUnits"></span>, <span class="navigation-timeToDestination"></span></div>
<div id="speed-limit" class="ol-unselectable ol-control game-specific"><span class="speedLimitRoundedKmhMph"></span></div>
</div>
</div>
</article>
<article id="_cargo">
<div class="noJob">
<div class="_row _yellow-color">
<p data-mra-text="CurrentJob"></p>
<p><!-- There is no way to get the current balance from the telemetry. --></p>
</div>
<div class="_row">
<p></p>
<p></p>
</div>
<div class="_row">
<p></p>
<p></p>
</div>
<div class="_row">
<p data-mra-text="NoJob"></p>
<p></p>
</div>
<div class="_row">
<p></p>
<p></p>
</div>
<div class="_row">
<p data-mra-text="NextRestStopIn"></p>
<p class="game-nextRestStopTime _yellow-color"></p>
</div>
</div>
<div class="hasJob">
<div class="_row _yellow-color">
<p data-mra-text="CurrentJob"></p>
<p><!-- There is no way to get the current balance from the telemetry. --></p>
</div>
<div class="_row">
<p data-mra-text="CargoName"></p>
<p><span class="trailerName"></span> (<span class="trailerMassKgOrT"></span>)</p>
</div>
<div class="_row">
<p data-mra-text="Destination"></p>
<p><span class="job-destinationCity"></span> - <span class="job-destinationCompany"></span></p>
</div>
<div class="_row" id="expected">
<p data-mra-text="Expected"></p>
<!--p><span class="job-???????"></span> - <span class="job-deadlineTime"></span></p-->
<p><span class="job-deadlineTime"></span></p>
</div>
<div class="_row">
<p data-mra-text="JobIncome"></p>
<p class="jobIncome"></p>
<!--p><span class="currencyCode"></span> <span class="jobIncome"></span></p-->
</div>
<div class="_row" id="remains">
<p data-mra-text="Remains"></p>
<p class="job-remainingTime"></p>
</div>
<div class="_row">
<p data-mra-text="NextRestStopIn"></p>
<p class="game-nextRestStopTime _yellow-color"></p>
</div>
</div>
</article>
<article id="_damage">
<figure>
<div class="fillingIcon truckDamage">
<div class="top isEts2"><svg width="7em" height="4em"><use xlink:href="#svg-ets2-truck" fill="#969696"/></svg></div>
<div class="bot isEts2"><svg width="7em" height="4em"><use xlink:href="#svg-ets2-truck" fill="#930002"/></svg></div>
<div class="top isAts"><svg width="7em" height="4em"><use xlink:href="#svg-ats-truck" fill="#969696"/></svg></div>
<div class="bot isAts"><svg width="7em" height="4em"><use xlink:href="#svg-ats-truck" fill="#930002"/></svg></div>
</div>
<figcaption><span data-mra-text="Truck"></span>: <span class="scsTruckDamageRounded"></span>%</figcaption>
</figure>
<figure>
<div class="fillingIcon trailerDamage">
<div class="top isEts2"><svg width="11em" height="4em"><use xlink:href="#svg-ets2-trailer" fill="#969696"/></svg></div>
<div class="bot isEts2"><svg width="11em" height="4em"><use xlink:href="#svg-ets2-trailer" fill="#930002"/></svg></div>
<div class="top isAts"><svg width="11em" height="4em"><use xlink:href="#svg-ats-trailer" fill="#969696"/></svg></div>
<div class="bot isAts"><svg width="11em" height="4em"><use xlink:href="#svg-ats-trailer" fill="#930002"/></svg></div>
</div>
<figcaption><span data-mra-text="Trailer"></span>: <span class="wearTrailerRounded"></span>%</figcaption>
</figure>
</article>
<article id="_about">
<p id="version">Mobile Route Advisor</p>
<p id="update-status" class="_yellow-color" style="display: none">A newer version is available!<br><br><a id="update-link" href="https://github.com/meatlayer/ets2-mobile-route-advisor" target="_blank" class="update-button">Install update</a></p>
</article>
</div>
<nav>
<div id="_map_button" onclick="goToMap()">
<svg width="1.5em" height="1.5em" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><use xlink:href="#svg-compass" fill="#ffffff"/></svg>
</div>
<div id="_cargo_button" onclick="showTab('_cargo')">
<svg width="1.5em" height="1.5em" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><use xlink:href="#svg-job" fill="#ffffff"/></svg>
</div>
<div id="_damage_button" onclick="showTab('_damage')">
<svg width="1.5em" height="1.5em" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><use xlink:href="#svg-phone-squared" fill="#ffffff"/></svg>
</div>
<div id="_about_button" onclick="showTab('_about')">
<svg width="1.5em" height="1.5em" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"><use xlink:href="#svg-help-circled" fill="#ffffff"/></svg>
</div>
</nav>
<footer>
<span data-mra-text="MobileRouteAdvisor"></span>
</footer>
</div>
<div id="_overlay">
<p class="statusMessage"></p>
</div>