feature: add interactive applets

contents/html/maidenhead.html

@@ -0,0 +1,21 @@
+<html>
+    <link rel="stylesheet" href="https://www.50ohm.de/assets/leaflet/leaflet.css"/>
+    <script src="https://www.50ohm.de/assets/leaflet/leaflet.js"></script>
+    <script src="https://www.50ohm.de/assets/leaflet/L.Maidenhead.js"></script>
+
+    Mit dieser interkativen Karte, kann man sich die Maidenhead-Locators anschauen. Wenn du immer weiter Reinzoomst kommst du zur DARC Geschäftsstelle.
+    <div id="map" style="width:100%; min-width: 600px; height: 400px; position: relative;"></div>
+
+    <script>
+        const map = L.map('map').setView([51.266975978176504, 9.426289780347057], 2);
+
+        const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> | <a href="https://github.com/ha8tks/Leaflet.Maidenhead">HA8TKS</a>'
+        }).addTo(map);
+
+        L.maidenhead({
+            color : 'rgba(255, 0, 0, 0.4)'
+        }).addTo(map);
+    </script>
+</html>