-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
62 lines (62 loc) · 6.73 KB
/
index.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
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#" lang="de">
<head>
<meta charset="utf-8">
<title>Stadtplan mit Altglascontainern und Altkleidercontainern in Flensburg</title>
<meta property="og:locale" content="de_DE">
<meta property="og:title" content="Stadtplan Recycling Container in Flensburg">
<meta property="og:site_name" content="Stadtplan mit Altglascontainern und Altkleidercontainern in Flensburg">
<meta property="og:url" content="https://recycling.oklabflensburg.de">
<meta property="og:description" content="Stadtplan mit den Standorten der Altglascontainer getrennt nach Bunt- und Weißglas sowie den Altkleidercontainern im Stadtgebiet Flensburg.">
<meta property="og:type" content="website">
<meta content="Stadtplan mit den Standorten der Altglascontainer getrennt nach Bunt- und Weißglas sowie den Altkleidercontainern im Stadtgebiet Flensburg." name="description">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" rel="stylesheet">
<link href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.min.js"></script>
</head>
<body>
<div class="h-screen overflow-auto bg-gray-300">
<div class="md:flex">
<div class="w-full sm:w-8/12 md:w-7/12 lg:w-9/12 h-96 overflow-hidden" id="map"></div>
<div class="w-full sm:w-4/12 md:w-5/12 lg:w-3/12 sm:overflow-scroll bg-gray-100" id="filter">
<div class="py-2 px-3 mb-4 lg:mb-8">
<h1 class="text-2xl md:text-3xl font-bold">Stadtplan und Standorte</h1>
<h2><a href="/" class="text-xl md:text-2xl text-gray-700 hover:text-blue-700 focus:text-blue-800" title="Altkleidercontainer und Altglascontainer in Flensburg">Recycling Container in Flensburg</a></h2>
</div>
<form id="form" enctype="application/x-www-form-urlencoded">
<div class="mx-3 mb-8">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" name="myLocation" value="true" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
<span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Meinen Standort anzeigen</span>
</label>
</div>
</form>
<div class="">
<div class="hidden bg-gray-300 mt-4 md:mt-6 mx-3" id="details">
<ul id="detailList"></ul>
</div>
</div>
<div class="mt-3 md:mt-6 py-2 px-3">
<h3 class="text-xl md:text-2xl mb-1 md:mb-3">Hintergrund</h3>
<p class="font-mono mb-3 md:mb-6">Wer kennt es nicht? Man ist frisch umgezogen, hat all seine Habseligkeiten dabei, die sich über die Jahre angesammelt haben. Beim Auspacken und Einräumen tauchen plötzlich Tüten mit ungenutzter Kleidung und alte leere Gläser und Flaschen auf. Doch in der neuen Umgebung stellt sich die Frage: Wo befindet sich der nächstgelegene Recycling Container? Hier kommt unser Stadtplan mit den Standorten der Altglascontainer und Altkleidercontainer zur Hilfe. Diese Situation hat uns dazu inspiriert, eine interaktive Karte mit den Recycling-Containern für Flensburg umzusetzen. Sollten Sie Anregungen, Kritik oder Ergänzungen haben, freuen wir uns über eine <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="mailto:oklabflensburg@grain.one">E-Mail</a> von Ihnen.</p>
<h3 class="text-xl md:text-2xl mb-1 md:mb-3">Datenquelle</h3>
<p class="font-mono mb-3 md:mb-6">Das <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://www.tbz-flensburg.de/Abfallwirtschaft" target="_blank">TBZ Flensburg</a> stellt auf deren Seite zwei interaktive Karten mit den Standorten der Alttextilienbehälter und Altglascontainer zur Verfügung. Allerdings fehlt dort sowohl eine Suchfunktion für den nächstgelegenen Recycling-Container als auch eine gemeinsame Übersicht beider Themen. Daher haben wir die Daten in ein modernes, maschinenlesbares Format konvertiert, um eine Weiterverarbeitung zu ermöglichen. Diese Kartendarstellung wird von ehrenamtlichen Mitgliedern des <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://oklabflensburg.de" target="_blank">OK Lab Flensburgs</a> entwickelt.</p>
<h3 class="text-xl md:text-2xl mb-1 md:mb-3">Quellcode</h3>
<p class="font-mono">Der aktuelle Entwicklungsstand ist auf <a class="text-blue-600 hover:text-blue-500 focus:text-blue:500" href="https://github.com/oklabflensburg/open-recycling-map" target="_blank">GitHub</a> einsehbar und kann von jeder Kommune, Stadt oder Kreis kostenfrei und lizenzfrei genutzt sowie neu bereitgestellt werden.</p>
</div>
</div>
</div>
<footer class="h-[4vh] border-t md:border-t-2 border-gray-400 text-sm flex justify-center items-center">
<a class="inline-block text-gray-700 hover:text-gray-900 focus:text-gray-900" href="/impressum.html">Impressum</a> <span class="inline-block text-gray-700 px-3">|</span> <a class="inline-block text-gray-700 hover:text-gray-900 focus:text-gray-900" href="/impressum.html#privacypolicy">Datenschutzerklärung</a> <span class="inline-block text-gray-700 px-3">|</span> <a class="inline-block text-gray-700 hover:text-gray-900 focus:text-gray-900" href="/lizenz.html">Lizenz</a>
</footer>
</div>
<script src="./main.js"></script>
</body>
</html>