Compare commits

...

2 commits

Author SHA1 Message Date
2699afe84b Statically include leaflet, improve map integration 2023-02-22 21:46:44 +01:00
lukas
c056668c33 Added leafletmap, changed formating 2023-02-22 21:46:25 +01:00
12 changed files with 1014 additions and 247 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

656
static/leaflet/leaflet.css Normal file
View file

@ -0,0 +1,656 @@
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
max-width: none !important;
max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
width: auto;
padding: 0;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline-offset: 1px;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
font-size: 13px;
font-size: 1.08333em;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.8);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
line-height: 1.4;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
text-decoration: underline;
}
.leaflet-attribution-flag {
display: inline !important;
vertical-align: baseline !important;
width: 1em;
height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
white-space: nowrap;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 24px 13px 20px;
line-height: 1.3;
font-size: 13px;
font-size: 1.08333em;
min-height: 1px;
}
.leaflet-popup-content p {
margin: 17px 0;
margin: 1.3em 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-top: -1px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
pointer-events: auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
border: none;
text-align: center;
width: 24px;
height: 24px;
font: 16px/24px Tahoma, Verdana, sans-serif;
color: #757575;
text-decoration: none;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
color: #585858;
}
.leaflet-popup-scrolled {
overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
-ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.leaflet-tooltip.leaflet-interactive {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
/* Printing */
@media print {
/* Prevent printers from removing background-images of controls. */
.leaflet-control {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}

File diff suppressed because one or more lines are too long

274
static/map.js Normal file
View file

@ -0,0 +1,274 @@
var zone_a = L.polygon([
[47.2999, 11.4829],
[47.2943, 11.4872],
[47.2799, 11.4779],
[47.2801, 11.4726],
[47.2710, 11.4726],
[47.2671, 11.4513],
[47.2680, 11.4472],
[47.2696, 11.4419],
[47.2773, 11.4222],
[47.2803, 11.4086],
[47.2802, 11.4049],
[47.2794, 11.4015],
[47.2816, 11.4004],
[47.2851, 11.4048],
[47.2859, 11.4104],
[47.2888, 11.4115],
[47.2902, 11.4136],
[47.2905, 11.4169],
[47.2883, 11.4218],
[47.2887, 11.4253],
[47.2954, 11.4251],
[47.2959, 11.4310],
[47.2963, 11.4363],
[47.2949, 11.4398],
[47.2908, 11.4445],
[47.2915, 11.4513],
[47.2940, 11.4549],
[47.2951, 11.4605],
[47.2967, 11.4668],
[47.3000, 11.4692],
[47.3010, 11.4716],
[47.3021, 11.4782]
], {
color: "green",
fillColor: "#3ef06e",
fillOpacity: 0.3
});
var zone_b_1 = L.polygon([
[47.3021, 11.4782],
[47.2999, 11.4829],
[47.2943, 11.4872],
[47.2799, 11.4779],
[47.2801, 11.4726],
[47.2710, 11.4726],
[47.2731, 11.4837],
[47.2725, 11.4955],
[47.2731, 11.4986],
[47.2763, 11.5063],
[47.2769, 11.5103],
[47.2770, 11.5219],
[47.2781, 11.5288],
[47.2823, 11.5261],
[47.2861, 11.5257],
[47.2926, 11.5234],
[47.2962, 11.5246],
[47.2999, 11.5246],
[47.3039, 11.5227],
[47.3072, 11.5213],
[47.3095, 11.5196],
[47.3067, 11.5167],
[47.3064, 11.5078]
]);
var zone_b_2 = L.polygon([
[47.2794, 11.4015],
[47.2774, 11.3984],
[47.2782, 11.3970],
[47.2781, 11.3962],
[47.2778, 11.3960],
[47.2774, 11.3953],
[47.2769, 11.3947],
[47.2764, 11.3940],
[47.2755, 11.3930],
[47.2760, 11.3935],
[47.2758, 11.3934],
[47.2755, 11.3930],
[47.2753, 11.3927],
[47.2751, 11.3919],
[47.2749, 11.3918],
[47.2746, 11.3919],
[47.2740, 11.3918],
[47.2739, 11.3916],
[47.2734, 11.3906],
[47.2729, 11.3900],
[47.2727, 11.3908],
[47.2715, 11.3898],
[47.2700, 11.3883],
[47.2699, 11.3885],
[47.2698, 11.3882],
[47.2697, 11.3879],
[47.2700, 11.3876],
[47.2696, 11.3866],
[47.2694, 11.3866],
[47.2688, 11.3871],
[47.2684, 11.3860],
[47.2677, 11.3848],
[47.2673, 11.3855],
[47.2672, 11.3855],
[47.2662, 11.3861],
[47.2640, 11.3830],
[47.2617, 11.3811],
[47.2608, 11.3829],
[47.2617, 11.3840],
[47.2616, 11.3844],
[47.2622, 11.3893],
[47.2627, 11.3949],
[47.2629, 11.3964],
[47.2631, 11.3998],
[47.2618, 11.3993],
[47.2573, 11.4007],
[47.2576, 11.4037],
[47.2666, 11.4052],
[47.2683, 11.4061],
[47.2695, 11.4077],
[47.2703, 11.4084],
[47.2707, 11.4085],
[47.2717, 11.4086],
[47.2720, 11.4089],
[47.2734, 11.4123],
[47.2719, 11.4154],
[47.2714, 11.4149],
[47.2713, 11.4143],
[47.2700, 11.4151],
[47.2690, 11.4155],
[47.2650, 11.4239],
[47.2660, 11.4247],
[47.2650, 11.4262],
[47.2632, 11.4277],
[47.2638, 11.4320],
[47.2638, 11.4370],
[47.2642, 11.4372],
[47.2647, 11.4420],
[47.2662, 11.4452],
[47.2680, 11.4472],
[47.2696, 11.4419],
[47.2773, 11.4222],
[47.2803, 11.4086],
[47.2802, 11.4049],
[47.2794, 11.4015]
]);
var zone_c = L.polygon([
[47.2617, 11.3811],
[47.2608, 11.3829],
[47.2617, 11.3840],
[47.2616, 11.3844],
[47.2622, 11.3893],
[47.2627, 11.3949],
[47.2629, 11.3964],
[47.2631, 11.3998],
[47.2618, 11.3993],
[47.2573, 11.4007],
[47.2576, 11.4037],
[47.2666, 11.4052],
[47.2683, 11.4061],
[47.2695, 11.4077],
[47.2703, 11.4084],
[47.2707, 11.4085],
[47.2717, 11.4086],
[47.2720, 11.4089],
[47.2734, 11.4123],
[47.2719, 11.4154],
[47.2714, 11.4149],
[47.2713, 11.4143],
[47.2700, 11.4151],
[47.2690, 11.4155],
[47.2650, 11.4239],
[47.2660, 11.4247],
[47.2650, 11.4262],
[47.2632, 11.4277],
[47.2638, 11.4320],
[47.2638, 11.4370],
[47.2642, 11.4372],
[47.2647, 11.4420],
[47.2662, 11.4452],
[47.2680, 11.4472],
[47.2671, 11.4513],
[47.2624, 11.4510],
[47.2612, 11.4386],
[47.2574, 11.4307],
[47.2555, 11.4246],
[47.2541, 11.4172],
[47.2516, 11.4021],
[47.2491, 11.4025],
[47.2473, 11.3949],
[47.2522, 11.3917],
[47.2533, 11.3888],
[47.2528, 11.3842],
[47.2537, 11.3730],
[47.2570, 11.3767],
[47.2581, 11.3752],
[47.2644, 11.3725],
[47.2662, 11.3726],
[47.2669, 11.3733],
[47.2678, 11.3730],
[47.2682, 11.3721],
[47.2691, 11.3714],
[47.2702, 11.3700],
[47.2721, 11.3697],
[47.2735, 11.3702],
[47.2813, 11.3858],
[47.2805, 11.3926],
[47.2805, 11.3975],
[47.2816, 11.4004],
[47.2794, 11.4015],
[47.2774, 11.3984],
[47.2782, 11.3970],
[47.2781, 11.3962],
[47.2778, 11.3960],
[47.2774, 11.3953],
[47.2769, 11.3947],
[47.2764, 11.3940],
[47.2755, 11.3930],
[47.2760, 11.3935],
[47.2758, 11.3934],
[47.2755, 11.3930],
[47.2753, 11.3927],
[47.2751, 11.3919],
[47.2749, 11.3918],
[47.2746, 11.3919],
[47.2740, 11.3918],
[47.2739, 11.3916],
[47.2734, 11.3906],
[47.2729, 11.3900],
[47.2727, 11.3908],
[47.2715, 11.3898],
[47.2700, 11.3883],
[47.2699, 11.3885],
[47.2698, 11.3882],
[47.2697, 11.3879],
[47.2700, 11.3876],
[47.2696, 11.3866],
[47.2694, 11.3866],
[47.2688, 11.3871],
[47.2684, 11.3860],
[47.2677, 11.3848],
[47.2673, 11.3855],
[47.2672, 11.3855],
[47.2662, 11.3861],
[47.2640, 11.3830],
[47.2617, 11.3811]
], {
color: "orange",
fillColor: "#ffeb0a",
fillOpacity: 0.3
});
function initMap(event) {
var map = L.map('map', {
maxZoom: 18,
minZoom: 10,
maxBounds: L.latLngBounds(L.latLng(47.3770, 11.2025), L.latLng(47.1770, 11.7025)),
maxBoundsViscosity: 1,
scrollWheelZoom: false
}).setView([47.2770, 11.4525], 12);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
//Adding Zones in prefered order, to ensure correct coloring of borders
zone_c.addTo(map);
zone_a.addTo(map);
zone_b_1.addTo(map);
zone_b_2.addTo(map);
}
if (document.getElementById("map") != null) {
initMap(null);
} else {
window.addEventListener("DOMContentLoaded", initMap);
}

View file

@ -266,6 +266,49 @@ footer h2 {
text-align: initial; text-align: initial;
} }
#map {
height: 400px;
z-index: 1;
}
.zone-heading {
text-align: left;
margin-top: 1em;
margin-bottom: 0.3em;
}
.legend {
width: fit-content;
margin: 0.3em auto;
}
.legend-item {
display: inline-flex;
margin: 0 0.3em;
align-items: center;
}
.legend-square {
display: inline-block;
height: 1em;
width: 1em;
margin-right: 0.2em;
border-radius: 0.2em;
border: 1px solid #868686;
}
.green {
background-color: #3ef06e;
}
.blue {
background-color: #3388ff;
}
.orange {
background-color: #ffeb0a;
}
@media only screen and (max-width:768px) { @media only screen and (max-width:768px) {
.header-content { .header-content {
flex-direction: column; flex-direction: column;

View file

@ -1,234 +0,0 @@
*, *:before, *:after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 7em;
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100%;
font-size: 20px;
font-family: Lato, Roboto, sans-serif;
}
header, main, footer {
display: flex;
flex-direction: column;
align-items: center;
}
main {
flex-grow: 1;
}
.header-content, .main-content, .footer-content {
max-width: 1000px;
width: 100%;
}
.header-content {
display: flex;
flex-direction: column;
align-items: start;
margin: 0 auto;
padding: 5px 8px;
}
.header-nav .header-content {
font-size: 1.2em;
}
.header-contact .header-content {
line-height: 1.6em;
}
.header-right {
flex-grow: 1;
text-align: right;
margin-right: 10px;
display: flex;
flex-direction: row;
justify-content: right;
}
.header-spacer {
flex-grow: 1;
min-width: 1em;
}
.header-title {
font-size: 1.3em;
display: inline-flex;
align-items: center;
}
.header-nav {
width: 100%;
background-color: #77bc65;
position: sticky;
z-index: 100;
top: 0;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
}
.header-contact {
width: 100%;
background-color: #D6701C;
}
a {
text-decoration: none;
}
a, a:visited, a:hover, a:focus {
color: inherit;
}
a:hover {
text-decoration: underline;
}
.service-link:hover {
text-decoration: none;
}
.service-icon:hover {
filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .7));
}
.nav-img {
width: 100px;
height: 60px;
}
/*
.link-button {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 10px 15px;
}
*/
.lang-item {
margin: 0 0.2em;
}
h1, h2, h3, h4 {
text-align: center;
}
.overview {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
justify-content: space-between;
text-align: center;
}
.overview > * {
}
.service-link {
display: flex;
flex-direction: column;
}
.service-icon {
width: 100%;
}
.service-name {
font-weight: bold;
font-size: 1.2em;
margin-bottom: 0.4em;
}
/*
.service {
display: flex;
aspect-ratio: 1;
width: 32%;
border-radius: 10px;
background-size: cover;
background-position: center;
justify-content: center;
align-items: center;
font-size: 1.5em;
text-decoration: none;
color: inherit;
}
.service-inner {
display: flex;
width: 100%;
height: 100%;
background: #e5f1ffcf;
justify-content: center;
align-items: center;
font-weight: 500;
transition: 1s;
}
*/
.service:hover > .service-inner {
height: 2.5em;
}
section {
background-color: #FFFFFF;
width: 100%;
}
section:nth-child(even) {
background-color: #F5F5F5;
}
section > * {
max-width: 1000px;
width: 100%;
margin: auto;
padding: 2.5em 0.5em;
}
footer {
background: #77bc65;
padding: 2em 0.5em;
box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.15);
}
.footer-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-content > * {
flex-grow: 1;
text-align: center;
}
footer h2 {
margin-top: 0;
}
.footer-sep {
width: 0;
flex-grow: 0;
border-left: 0.2em solid #F5F5F5;
}
.credits {
font-size: 0.85em;
}
.privacy h2, .privacy h3, .privacy h3 {
text-align: initial;
}

View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="static/styles.css"> <link rel="stylesheet" href="static/styles.css">
<link rel="stylesheet" href="static/fonts/Lato/Lato.css"> <link rel="stylesheet" href="static/fonts/Lato/Lato.css">
<link rel="icon" href="" type="image/icon type"> <link rel="icon" href="" type="image/icon type">
{% block assets %}{% endblock %}
</head> </head>
<body> <body>

View file

@ -1,4 +1,10 @@
{% extends "_base.html" %} {% extends "_base.html" %}
{% block assets %}
<link rel="stylesheet" href="static/leaflet/leaflet.css">
<script defer src="static/leaflet/leaflet.js"></script>
<script defer src="static/map.js"></script>
{% endblock %}
{% block main %} {% block main %}
<main> <main>
<h1>Bedingungen</h1> <h1>Bedingungen</h1>
@ -44,26 +50,41 @@
<p> <p>
Für die Rückgabe per Rückversand, der Versand spätestens am Rückgabetag mittels per Mail übermittelten Versandetikett in einem geeigneten Paket zu erfolgen. Es ist darauf zu achten, dass der Laptop entsprechend für den Versand gepolstert wird, dafür benötigtes Verpackungsmaterial ist vom Kunden zu stellen. Für die Versandrückgabe inklusive Versandetikett wird ein Umkostenpreis von € 10,- verrechnet. Für die Rückgabe per Rückversand, der Versand spätestens am Rückgabetag mittels per Mail übermittelten Versandetikett in einem geeigneten Paket zu erfolgen. Es ist darauf zu achten, dass der Laptop entsprechend für den Versand gepolstert wird, dafür benötigtes Verpackungsmaterial ist vom Kunden zu stellen. Für die Versandrückgabe inklusive Versandetikett wird ein Umkostenpreis von € 10,- verrechnet.
Vorort-Abholung nach zu vereinbarenden Bedingungen möglich. Vorort-Abholung nach zu vereinbarenden Bedingungen möglich.
Persönliche Rückgabe ist ohne Mehrkosten nach Telefonischer Anmeldung mindestens zwei Tage vor vereinbarter Rückgabe möglich. Persönliche Rückgabe ist ohne Mehrkosten nach telefonischer Anmeldung mindestens zwei Tage vor vereinbarter Rückgabe möglich.
</p> </p>
</div> </div>
</section> </section>
<section> <section>
<div class="section-inner"> <div class="section-inner">
<h2>Anfahrtskosten</h2> <h2>Anfahrtskosten</h2>
<div id="map"></div>
<div class="legend">
<span class="legend-item">
<span class="legend-square green"></span><span>Zone A</span>
</span>
<span class="legend-item">
<span class="legend-square blue"></span><span>Zone B</span>
</span>
<span class="legend-item">
<span class="legend-square orange"></span><span>Zone C</span>
</span>
</div>
<p> <p>
Zone A: € 10,-<br> <h3 class="zone-heading">Zone A</h3>
Zone B: € 25,-<br> <p>
Zone C: € 40,-<br> Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br>
<br> Anfahrtskosten: € 10,- Erstmalige Anfahrt kostenlos!
<b>Zone A</b><br> </p>
Innsbruck: Arzl, Olympisches Dorf, Mühlau<sup>1</sup> / Rum, Neu-Rum, Thaur<br> <h3 class="zone-heading">Zone B</h3>
Erstmalige Anfahrt innerhalb Zone A kostenlos!<br> <p>
<b>Zone B</b><br> Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br>
Innsbruck: Saggen, Mariahilf-St. Nikolaus, Dreiheiligen, Innenstadt, Reichenau / Hall in Tirol, Absam<br> Anfahrtkosten: € 25,-
<b>Zone C</b><br> </p>
Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br> <h3 class="zone-heading">Zone C</h3>
<br> <p>
Innsbruck: Hötting-Mitte<sup>1</sup>, Pradl, Wilten<sup>2</sup><br>
Anfahrtkosten: € 40,-
</p>
<sup>1</sup> Ausgenommen Hungerburg<br> <sup>1</sup> Ausgenommen Hungerburg<br>
<sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br> <sup>2</sup> Ausgenommen Mentlberg und Sieglanger<br>
</p> </p>