Initial

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+__pycache__/
+*.egg-info/
+
+backend/.env
+backend/data/
+backend/db/
+backend/static/

Makefile

@@ -0,0 +1,37 @@
+
+.PHONY: help
+help:
+	@echo "available commands:"
+	@echo "  -  start-frontend : start frontend server"
+	@echo "  -  start-backend  : start backend server"
+	@echo "  -  push-frontend  : push changes to server"
+	@echo "  -  push-backend   : push changes to server"
+
+.PHONY: start-backend
+start-backend:
+	@echo Starting server ... http://127.0.0.1:8000/admin/
+	@./backend/manage.py runserver
+
+.PHONY: start-frontend
+start-frontend:
+	@echo Server started on:  http://127.0.0.1/
+	@python -m http.server -b 0.0.0.0 80 -d ./frontend
+
+.PHONY: push-backend
+push-backend:
+	rsync -av --delete backend/ piko:~/klangkarte/ \
+		--exclude=/data \
+		--exclude=/static \
+		--exclude=/db \
+		--exclude=__pycache__ \
+		--exclude=.DS_Store
+
+.PHONY: push-frontend
+push-frontend:
+	rsync -av --delete frontend/ piko:/srv/http/klangkarte/ \
+		--exclude=/data \
+		--exclude=/static \
+		--exclude=.DS_Store
+
+.PHONY: push
+push: push-frontend push-backend

README.md

@@ -0,0 +1,14 @@
+# Klangkarte
+
+Django app for managing places with json export and a fully-static frontend map.
+
+![Screenshot map overview](screenshot.jpg)
+
+
+## Deploy
+
+Start container with `docker-compose up -d` and create admin user (first-run):
+
+```sh
+docker-compose exec app python manage.py createsuperuser --email ''
+```

backend/Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-alpine
+
+EXPOSE 8000
+
+# install base system
+RUN apk add --no-cache gcc libc-dev linux-headers
+RUN pip install --upgrade pip
+RUN pip install uvicorn gunicorn
+
+# install requirements
+WORKDIR /django_project
+COPY ./requirements.txt .
+RUN pip install -r requirements.txt
+
+# then scripts (likely wont change often)
+ENV PATH="/scripts:/py/bin:$PATH"
+COPY --chmod=700 ./scripts /scripts
+
+# finally copy app (likely will invalidate cache)
+COPY . .
+
+CMD ["run.sh"]

backend/app/admin.py

@@ -0,0 +1,71 @@
+from django.conf import settings
+from django.contrib import admin
+from django.contrib.auth.models import Group  # , User
+from django.utils.html import format_html
+
+from app.models import Audiofile, Category, Content, Place
+
+# admin.site.register(Place, )
+
+#############################
+# Django defaults
+#############################
+
+admin.site.site_header = 'Klangkarte-Verwaltung'  # top-most title
+admin.site.index_title = 'Klangkarte'  # title at root
+admin.site.site_title = 'Klangkarte-Verwaltung'  # suffix to <title>
+
+admin.site.unregister(Group)
+# admin.site.unregister(User)
+
+
+#############################
+# App adjustments
+#############################
+
+
+@admin.register(Audiofile)
+class AudiofileAdmin(admin.ModelAdmin):
+    list_display = ['desc', 'media_url', 'created']
+    search_fields = ['desc']
+
+    @admin.display(description='URL')
+    def media_url(self, obj: 'Audiofile'):
+        return settings.MEDIA_URL + obj.url
+
+
+@admin.register(Category)
+class CategoryAdmin(admin.ModelAdmin):
+    list_display = ['name', 'color_dot', 'sort', 'places_count']
+    search_fields = ['name']
+
+    class Media:
+        css = {'all': ['admin/admin.css']}
+
+    @admin.display(description='Orte')
+    def places_count(self, obj: 'Category'):
+        return obj.places.count()
+
+    @admin.display(description='Farbe')
+    def color_dot(self, obj: 'Category'):
+        return format_html(
+            '<span class="color-dot" style="background:{};color:{}">{}</span>',
+            obj.color,
+            '#fff' if obj.fg_color_white else '#000',
+            obj.color.upper())
+
+
+@admin.register(Content)
+class ContentAdmin(admin.ModelAdmin):
+    list_display = ['title', 'body']
+    search_fields = ['title', 'body']
+
+    def get_readonly_fields(self, request, obj=None):
+        return ['key'] if obj else []
+
+
+@admin.register(Place)
+class PlaceAdmin(admin.ModelAdmin):
+    list_display = ['title', 'category', 'sort', 'created']
+    search_fields = ['title']
+    list_filter = ['category']

backend/app/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AppConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'app'

backend/app/migrations/0001_initial.py

@@ -0,0 +1,85 @@
+# Generated by Django 4.2.13 on 2024-06-22 15:46
+
+import app.models.audiofile
+import app.models.place
+import colorfield.fields
+import common.form.audio_file
+import common.form.img_with_preview
+import map_location.fields
+from django.db import migrations, models
+import django.db.models.deletion
+import tinymce.models
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Audiofile',
+            fields=[
+                ('key', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False, verbose_name='ID')),
+                ('audio', common.form.audio_file.AudioFileField(upload_to=app.models.audiofile.overwrite_audio, verbose_name='Audio')),
+                ('desc', models.CharField(max_length=200, verbose_name='Beschreibung')),
+                ('created', models.DateTimeField(auto_now_add=True, verbose_name='Erstellt')),
+            ],
+            options={
+                'verbose_name': 'Audiodatei',
+                'verbose_name_plural': 'Audiodateien',
+                'ordering': ('-created',),
+            },
+        ),
+        migrations.CreateModel(
+            name='Category',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Name')),
+                ('color', colorfield.fields.ColorField(default='#3388ff', image_field=None, max_length=7, samples=None, verbose_name='Farbe')),
+                ('fg_color_white', models.BooleanField(default=False, verbose_name='Textfarbe Weiß')),
+                ('sort', models.IntegerField(default=0, verbose_name='Sortierung')),
+            ],
+            options={
+                'verbose_name': 'Kategorie',
+                'verbose_name_plural': 'Kategorien',
+                'ordering': ('sort',),
+            },
+        ),
+        migrations.CreateModel(
+            name='Content',
+            fields=[
+                ('key', models.SlugField(primary_key=True, serialize=False, unique=True, verbose_name='ID')),
+                ('title', models.CharField(max_length=100, verbose_name='Titel')),
+                ('body', tinymce.models.HTMLField(verbose_name='Inhalt')),
+                ('wide', models.BooleanField(verbose_name='Breiteres Fenster')),
+            ],
+            options={
+                'verbose_name': 'Text',
+                'verbose_name_plural': 'Texte',
+            },
+        ),
+        migrations.CreateModel(
+            name='Place',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('sort', models.IntegerField(default=0, verbose_name='Sortierung')),
+                ('isExtended', models.BooleanField(verbose_name='Bis 1.1.2025 verstecken')),
+                ('title', models.CharField(max_length=100, verbose_name='Titel')),
+                ('image', common.form.img_with_preview.FileWithImagePreview(blank=True, null=True, upload_to=app.models.place.overwrite_img_upload, verbose_name='Bild')),
+                ('audio', common.form.audio_file.AudioFileField(blank=True, null=True, upload_to=app.models.place.overwrite_audio_upload, verbose_name='Audio')),
+                ('location', map_location.fields.LocationField(blank=True, null=True, verbose_name='Position')),
+                ('description', tinymce.models.HTMLField(verbose_name='Beschreibung')),
+                ('created', models.DateTimeField(auto_now_add=True, verbose_name='Erstellt')),
+                ('category', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='places', to='app.category', verbose_name='Kategorie')),
+            ],
+            options={
+                'verbose_name': 'Ort',
+                'verbose_name_plural': 'Orte',
+                'ordering': ('sort',),
+            },
+        ),
+    ]

backend/app/models/__init__.py

@@ -0,0 +1,4 @@
+from .audiofile import Audiofile  # noqa: F401
+from .category import Category  # noqa: F401
+from .content import Content  # noqa: F401
+from .place import Place  # noqa: F401

backend/app/models/audiofile.py

@@ -0,0 +1,45 @@
+from django.conf import settings
+from django.db import models
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
+
+import os
+import uuid
+from pathlib import Path
+
+from common.form.audio_file import AudioFileField
+
+
+def overwrite_audio(instance: 'Audiofile', filename: str):
+    if instance.path.is_file():
+        os.remove(instance.path)
+    return instance.url
+
+
+class Audiofile(models.Model):
+    key = models.UUIDField('ID', primary_key=True, default=uuid.uuid4,
+                           editable=False)
+    audio = AudioFileField('Audio', upload_to=overwrite_audio)
+    desc = models.CharField('Beschreibung', max_length=200)
+    created = models.DateTimeField('Erstellt', auto_now_add=True)
+
+    class Meta:
+        verbose_name = 'Audiodatei'
+        verbose_name_plural = 'Audiodateien'
+        ordering = ('-created',)
+
+    def __str__(self) -> str:
+        return self.desc
+
+    @property
+    def path(self) -> Path:
+        return settings.MEDIA_ROOT / 'audio' / f'{self.pk}.mp3'
+
+    @property
+    def url(self) -> str:
+        return f'audio/{self.pk}.mp3'
+
+
+@receiver(post_delete, sender=Audiofile)
+def on_delete_Audiofile(sender, instance: 'Audiofile', using, **kwargs):
+    os.remove(instance.path)

backend/app/models/category.py

@@ -0,0 +1,55 @@
+from django.conf import settings
+from django.db import models
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
+
+import json
+from colorfield.fields import ColorField
+
+import typing
+if typing.TYPE_CHECKING:
+    from app.models.place import Place
+
+
+class Category(models.Model):
+    name = models.CharField('Name', max_length=100)
+    color = ColorField('Farbe', default='#3388ff', max_length=7)
+    fg_color_white = models.BooleanField('Textfarbe Weiß', default=False)
+    sort = models.IntegerField('Sortierung', default=0)
+
+    places: 'models.QuerySet[Place]'
+
+    class Meta:
+        verbose_name = 'Kategorie'
+        verbose_name_plural = 'Kategorien'
+        ordering = ('sort',)
+
+    def __str__(self) -> str:
+        return self.name
+
+    def save(self, *args, **kwargs):
+        rv = super().save(*args, **kwargs)
+        Category.update_json()
+        return rv
+
+    @staticmethod
+    def update_json():
+        with open(settings.MEDIA_ROOT / 'categories.json', 'w') as fp:
+            json.dump(Category.asJson(), fp)
+
+    @staticmethod
+    def asJson() -> 'list[dict[str, str]]':
+        rv = []
+        for x in Category.objects.all():
+            rv.append({
+                'id': x.pk,
+                'name': x.name,
+                'color': x.color,
+                'inv': x.fg_color_white,
+            })
+        return rv
+
+
+@receiver(post_delete, sender=Category)
+def on_delete_Audiofile(sender, instance: 'Category', using, **kwargs):
+    Category.update_json()

backend/app/models/content.py

@@ -0,0 +1,40 @@
+from django.conf import settings
+from django.db import models
+
+import json
+from tinymce.models import HTMLField
+
+
+class Content(models.Model):
+    key = models.SlugField('ID', primary_key=True, unique=True)
+    title = models.CharField('Titel', max_length=100)
+    body = HTMLField('Inhalt')
+    wide = models.BooleanField('Breiteres Fenster')
+
+    class Meta:
+        verbose_name = 'Text'
+        verbose_name_plural = 'Texte'
+
+    def __str__(self) -> str:
+        return self.title
+
+    def save(self, *args, **kwargs):
+        rv = super().save(*args, **kwargs)
+        self.update_json()
+        return rv
+
+    def delete(self, *args, **kwargs):
+        rv = super().delete(*args, **kwargs)
+        self.update_json()
+        return rv
+
+    def update_json(self):
+        with open(settings.MEDIA_ROOT / 'text.json', 'w') as fp:
+            json.dump(self.asJson(), fp)
+
+    @staticmethod
+    def asJson() -> 'dict[str, str]':
+        rv = {}
+        for x in Content.objects.all():
+            rv[x.pk] = {'title': x.title, 'body': x.body, 'wide': x.wide}
+        return rv

backend/app/models/place.py

@@ -0,0 +1,131 @@
+from django.conf import settings
+from django.db import models
+from django.db.models.signals import post_delete
+from django.dispatch import receiver
+
+import json
+import os
+import shutil
+from pathlib import Path
+from PIL import Image, ImageOps
+from tinymce.models import HTMLField
+from map_location.fields import LocationField
+# default_app_config = 'map_location.apps.MapLocationConfig'
+
+from app.models.category import Category
+from common.form.audio_file import AudioFileField
+from common.form.img_with_preview import FileWithImagePreview
+
+
+def overwrite_img_upload(instance: 'Place', filename: str):
+    path = instance.fixed_os_path('img.jpg')
+    if path.is_file():
+        os.remove(path)
+    return instance.fixed_save_url('img.jpg')
+
+
+def overwrite_audio_upload(instance: 'Place', filename: str):
+    path = instance.fixed_os_path('audio.mp3')
+    if path.is_file():
+        os.remove(path)
+    return instance.fixed_save_url('audio.mp3')
+
+
+class Place(models.Model):
+    category: 'models.ForeignKey[Category]' = models.ForeignKey(
+        'Category', on_delete=models.CASCADE, related_name='places',
+        verbose_name='Kategorie')
+
+    sort = models.IntegerField('Sortierung', default=0)
+    isExtended = models.BooleanField('Bis 1.1.2025 verstecken')
+    title = models.CharField('Titel', max_length=100)
+    image = FileWithImagePreview('Bild', blank=True, null=True,
+                                 upload_to=overwrite_img_upload)
+    # help_text='Ideal: 600 x 400 px (JPEG oder PNG)'
+    audio = AudioFileField('Audio', blank=True, null=True,
+                           upload_to=overwrite_audio_upload)
+    location = LocationField('Position', blank=True, null=True, options={
+        'map': {
+            'center': [49.895, 10.890],
+            'zoom': 14,
+        },
+    })
+    description = HTMLField('Beschreibung')
+    created = models.DateTimeField('Erstellt', auto_now_add=True)
+
+    class Meta:
+        verbose_name = 'Ort'
+        verbose_name_plural = 'Orte'
+        ordering = ('sort',)
+
+    def __str__(self) -> str:
+        return self.title
+
+    def fixed_os_path(self, name: str) -> Path:
+        return settings.MEDIA_ROOT / str(self.pk) / name
+
+    def fixed_save_url(self, name: str) -> str:
+        if self.pk is None:
+            next_id = Place.objects.count() + 1
+            return f'{next_id}/{name}'
+        return f'{self.pk}/{name}'
+
+    @property
+    def cover_image_url(self) -> 'str|None':
+        if self.image:
+            return self.image.url.replace('img.jpg', 'cov.jpg')
+        return None
+
+    def save(self, *args, **kwargs):
+        rv = super().save(*args, **kwargs)
+        self.update_cover_image()
+        Place.update_json()
+        return rv
+
+    # def delete(self, *args, **kwargs):
+    #     theId = str(self.pk)
+    #     rv = super().delete(*args, **kwargs)
+    #     shutil.rmtree(settings.MEDIA_ROOT / theId, ignore_errors=True)
+    #     self.update_json()
+    #     return rv
+
+    def update_cover_image(self):
+        path = self.fixed_os_path('cov.jpg')
+        if self.image:
+            img = Image.open(self.image.path)
+            thumb = ImageOps.fit(img, (600, 400))
+            # img.thumbnail((600, 400))
+            path.parent.mkdir(parents=True, exist_ok=True)
+            thumb.save(path, 'jpeg')
+        else:
+            if path.exists():
+                os.remove(path)
+
+    @staticmethod
+    def update_json():
+        with open(settings.MEDIA_ROOT / 'places.json', 'w') as fp:
+            json.dump(Place.asJson(), fp)
+
+    @staticmethod
+    def asJson() -> 'list[dict[str, str]]':
+        rv = []
+        for x in Place.objects.all():
+            rv.append({
+                'id': x.pk,
+                'name': x.title,
+                'loc': [round(x.location.lat, 6),
+                        round(x.location.long, 6)] if x.location else None,
+                'cat': x.category.pk,
+                'cov': x.cover_image_url,
+                'img': x.image.url if x.image else None,
+                'audio': x.audio.url if x.audio else None,
+                'later': x.isExtended,
+                'desc': x.description,
+            })
+        return rv
+
+
+@receiver(post_delete, sender=Place)
+def on_delete_Audiofile(sender, instance: 'Place', using, **kwargs):
+    shutil.rmtree(settings.MEDIA_ROOT / str(instance.pk), ignore_errors=True)
+    Place.update_json()

backend/app/static/admin/admin.css

@@ -0,0 +1,5 @@
+.color-dot {
+  font-family: monospace;
+  border-radius: 4px;
+  padding: 2px 8px;
+}

backend/common/form/audio_file.py

@@ -0,0 +1,70 @@
+from django import forms
+from django.conf import settings
+from django.contrib.admin.widgets import AdminFileWidget
+from django.core.validators import FileExtensionValidator
+from django.db import models
+from django.forms import FileInput, widgets
+
+from common.validators import MaxFilesizeValidator, readableToInt
+
+MAX_UPLOAD_SIZE = '20 MB'
+
+
+class AudioFileWidget(widgets.ClearableFileInput):
+    template_name = 'forms/audio-file.html'
+
+    class Media:
+        js = ['admin/file-upload-validator.js']
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context['MEDIA_URL'] = settings.MEDIA_URL
+        return context
+
+
+class AudioField(forms.FileField):
+    widget = AudioFileWidget
+    default_validators = [
+        FileExtensionValidator(['mp3']),
+        MaxFilesizeValidator(MAX_UPLOAD_SIZE)
+    ]
+
+    def widget_attrs(self, widget):
+        attrs = super().widget_attrs(widget)
+        if isinstance(widget, FileInput) and 'accept' not in widget.attrs:
+            attrs.setdefault('accept', 'audio/mpeg')  # audio/*
+        if isinstance(widget, AudioFileWidget):
+            attrs.update({
+                'data-upload-limit': readableToInt(MAX_UPLOAD_SIZE),
+                'data-upload-limit-str': MAX_UPLOAD_SIZE,
+                'onchange': 'validate_upload_limit(this)',
+            })
+        return attrs
+
+
+class AudioFileField(models.FileField):
+    __del_file_on_save = False
+
+    def formfield(self, **kwargs):
+        if kwargs['widget'] is AdminFileWidget:
+            # Override admin widget. Defined by AudioField anyway
+            del kwargs['widget']
+        return super().formfield(**{'form_class': AudioField, **kwargs})
+
+    def save_form_data(self, instance, data):
+        if data is False:
+            self.__del_file_on_save = True
+        super().save_form_data(instance, data)
+
+    def pre_save(self, model_instance, add):
+        if self.__del_file_on_save:
+            self.__del_file_on_save = False
+            self.deletePreviousFile(model_instance)
+        return super().pre_save(model_instance, add)
+
+    def deletePreviousFile(self, instance: models.Model):
+        if not instance.pk:
+            return
+        prev = instance.__class__.objects.get(pk=instance.pk)
+        fileField = getattr(prev, self.attname)
+        fileField.delete(save=False)

backend/common/form/img_with_preview.py

@@ -0,0 +1,67 @@
+from django import forms
+from django.conf import settings
+from django.contrib.admin.widgets import AdminFileWidget
+from django.core.validators import FileExtensionValidator
+from django.db import models
+from django.forms import FileInput, widgets
+
+from common.validators import MaxFilesizeValidator, readableToInt
+
+MAX_UPLOAD_SIZE = '312 KB'
+
+
+class ImageFileWidget(widgets.ClearableFileInput):
+    template_name = 'forms/img-with-preview.html'
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context['MEDIA_URL'] = settings.MEDIA_URL
+        return context
+
+
+class ImgField(forms.FileField):
+    widget = ImageFileWidget
+    default_validators = [
+        FileExtensionValidator(['jpg', 'jpeg', 'png']),
+        MaxFilesizeValidator(MAX_UPLOAD_SIZE),
+    ]
+
+    def widget_attrs(self, widget):
+        attrs = super().widget_attrs(widget)
+        if isinstance(widget, FileInput) and 'accept' not in widget.attrs:
+            attrs.setdefault('accept', 'image/png,image/jpeg')  # image/*
+        if isinstance(widget, ImageFileWidget):
+            attrs.update({
+                'data-upload-limit': readableToInt(MAX_UPLOAD_SIZE),
+                'data-upload-limit-str': MAX_UPLOAD_SIZE,
+                'onchange': 'validate_upload_limit(this)',
+            })
+        return attrs
+
+
+class FileWithImagePreview(models.FileField):  # use ImageField to omit Pillow
+    __del_image_on_save = False
+
+    def formfield(self, **kwargs):
+        if kwargs['widget'] is AdminFileWidget:
+            # Override admin widget. Defined by ImgField anyway
+            del kwargs['widget']
+        return super().formfield(**{'form_class': ImgField, **kwargs})
+
+    def save_form_data(self, instance, data):
+        if data is False:
+            self.__del_image_on_save = True
+        super().save_form_data(instance, data)
+
+    def pre_save(self, model_instance, add):
+        if self.__del_image_on_save:
+            self.__del_image_on_save = False
+            self.deletePreviousImage(model_instance)
+        return super().pre_save(model_instance, add)
+
+    def deletePreviousImage(self, instance: models.Model):
+        if not instance.pk:
+            return
+        prev = instance.__class__.objects.get(pk=instance.pk)
+        imgField = getattr(prev, self.attname)
+        imgField.delete(save=False)

backend/common/locale/de/LC_MESSAGES/django.po

@@ -0,0 +1,8 @@
+msgid ""
+msgstr ""
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Language: de\n"
+
+msgid "File size too large (max. %(limit_value)s)."
+msgstr "Datei zu groß (max. %(limit_value)s)."

backend/common/settings.py

@@ -0,0 +1,30 @@
+
+TINYMCE_DEFAULT_CONFIG = {
+    "width": "100%",
+
+    # see https://www.tiny.cloud/docs/tinymce/latest/available-menu-items/
+    "menubar": "edit view insert format table help",  # file tools
+
+    "plugins": "advlist autolink lists link image charmap anchor "
+    "searchreplace visualblocks code fullscreen insertdatetime media table "
+    "help",  # paste print preview wordcount
+
+    # see https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/
+    "toolbar": "undo redo | blocks | bold italic removeformat | "
+    "bullist numlist outdent indent",
+    # forecolor backcolor | alignleft aligncenter alignright alignjustify
+
+    "promotion": False,  # hide upgrade button
+    "language": "de_DE",
+    # "custom_undo_redo_levels": 10,
+
+    "images_file_types": 'jpeg,jpg,png,gif',
+    "images_upload_handler": "tinymce_image_upload_handler",
+    "images_reuse_filename": True,  # prevent image edits from reuploading imgs
+    "convert_urls": False,
+}
+
+TINYMCE_EXTRA_MEDIA = {
+    'css': {'all': []},
+    'js': ['admin/tinymce-upload.js'],
+}

backend/common/static/admin/file-upload-validator.js

@@ -0,0 +1,6 @@
+function validate_upload_limit(sender) {
+    if (sender.files[0].size > sender.dataset.uploadLimit) {
+        sender.value = '';
+        alert(`Datei zu groß (max. ${sender.dataset.uploadLimitStr})`);
+    }
+}

backend/common/static/admin/tinymce-upload.js

@@ -0,0 +1,55 @@
+function tinymce_image_upload_handler(blobInfo, progress) {
+    return new Promise((resolve, reject) => {
+        const match = self.location.pathname.match('/app/place/([0-9]*)/');
+        if (!match) {
+            return reject('Cannot match place id from URL.');
+        }
+
+        // FIXME: this will still upload the image as base64 string
+        // if (blobInfo.blob().size > 1_000_000) { // >1MB
+        //     return reject('Image too large. Max file size: 1 MB');
+        // }
+
+        const placeId = match[1];
+        let xhr, formData;
+        // token = Cookies.get("csrftoken");
+        token = document.cookie.match('csrftoken=([^;]*)')[1];
+        xhr = new XMLHttpRequest();
+        xhr.withCredentials = false;
+        xhr.open('POST', '/tinymce/upload/' + placeId + '/');
+        xhr.setRequestHeader('X-CSRFToken', token);
+
+        if (progress) {
+            xhr.upload.onprogress = function (e) {
+                progress(e.loaded / e.total * 100);
+            };
+        }
+        xhr.onload = function () {
+            let json;
+
+            if (xhr.status === 403) {
+                return reject('HTTP Error: ' + xhr.status, { remove: true });
+            }
+
+            if (xhr.status < 200 || xhr.status >= 300) {
+                return reject('HTTP Error: ' + xhr.status);
+            }
+
+            json = JSON.parse(xhr.responseText);
+
+            if (!json || typeof json.location != 'string') {
+                return reject('Invalid JSON: ' + xhr.responseText);
+            }
+
+            return resolve(json.location);
+        };
+        xhr.onerror = function () {
+            return reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
+        };
+
+        formData = new FormData();
+        formData.append('file', blobInfo.blob(), blobInfo.filename());
+
+        xhr.send(formData);
+    });
+}

backend/common/templates/forms/audio-file.html

@@ -0,0 +1,17 @@
+<div style="width: 100%">
+  {% if widget.is_initial %}
+    <audio controls preload="none" style="width: 100%">
+      <source src="{{MEDIA_URL}}{{widget.value}}" type="audio/mpeg">
+      Browser does not support Audio
+    </audio>
+    {% if not widget.required %}
+      <span class="clearable-file-input">
+        <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
+        <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
+      </span>
+    {% endif %}
+    <br>
+    <span>{{ widget.input_text }}:</span>
+  {% endif %}
+  <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
+</div>

backend/common/templates/forms/img-with-preview.html

@@ -0,0 +1,14 @@
+<div>
+  {% if widget.is_initial %}
+    <img src="{{MEDIA_URL}}{{widget.value}}" style="max-width: 150px; max-height: 150px; margin: 8px;" />
+    {% if not widget.required %}
+      <span class="clearable-file-input">
+        <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
+        <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>
+      </span>
+    {% endif %}
+    <br>
+    <span>{{ widget.input_text }}:</span>
+  {% endif %}
+  <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
+</div>

backend/common/urls.py

@@ -0,0 +1,36 @@
+from django.conf import settings
+from django.http import HttpRequest, JsonResponse
+from django.urls import include, path
+
+from pathlib import Path
+
+from app.models.place import Place
+
+
+def tinymce_upload(request: HttpRequest, placeId: int):
+    if request.method != 'POST':
+        return JsonResponse({'error': 'unsupported method type'})
+
+    try:
+        Place.objects.get(pk=placeId)
+    except Place.DoesNotExist:
+        return JsonResponse({'error': 'place does not exist'})
+
+    file = request.FILES.get('file')
+    if not file:
+        return JsonResponse({'error': 'could not read file'})
+
+    save_dir = Path(settings.MEDIA_ROOT) / str(placeId)
+    if not save_dir.exists():
+        save_dir.mkdir()
+    with open(save_dir / file.name, 'wb') as fp:
+        fp.write(file.read())
+
+    fname = f'{placeId}/{file.name}'
+    return JsonResponse({'location': settings.MEDIA_URL + fname})
+
+
+urlpatterns = [
+    path('tinymce/', include('tinymce.urls')),
+    path('tinymce/upload/<int:placeId>/', tinymce_upload),
+]

backend/common/validators.py

@@ -0,0 +1,23 @@
+from django.core.validators import BaseValidator
+from django.utils.deconstruct import deconstructible
+from django.utils.translation import gettext_lazy as _
+from django.core.files.uploadedfile import TemporaryUploadedFile
+
+
+UNITS = {'k': 1000, 'm': 1000_000, 'g': 1000_000_000}
+
+
+def readableToInt(limit: str) -> int:
+    x = limit.lower().rstrip(' ib')  # KiB & KB -> k
+    multiply = UNITS.get(x[-1], 1)
+    value = float(x.rstrip(' _kmg').replace(',', '.'))
+    return int(value * multiply)
+
+
+@deconstructible
+class MaxFilesizeValidator(BaseValidator):
+    message = _('File size too large (max. %(limit_value)s).')
+    code = 'max_filesize'
+
+    def compare(self, a: TemporaryUploadedFile, limit: str):
+        return a.size > readableToInt(limit)

backend/config/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/4.2/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
+
+application = get_asgi_application()

backend/config/settings.py

@@ -0,0 +1,151 @@
+"""
+Django settings for project.
+
+Generated by 'django-admin startproject' using Django 4.2.13.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/4.2/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/4.2/ref/settings/
+"""
+import os
+from pathlib import Path
+from common.settings import *  # noqa: 401
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'insecure-$a^nh$d!tgut43^91@')
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = SECRET_KEY.startswith('insecure') or \
+    os.environ.get('DEBUG', '0').lower() not in ['false', 'no', '0']
+
+ALLOWED_HOSTS = []
+ALLOWED_HOSTS.extend(
+    filter(
+        None,
+        os.environ.get('ALLOWED_HOSTS', '*').split(','),
+    )
+)
+CSRF_TRUSTED_ORIGINS = ['https://' + x for x in ALLOWED_HOSTS]
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'colorfield',
+    'tinymce',
+    'map_location',
+    'common',
+    'app',
+]
+
+MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'config.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],  # BASE_DIR / 'templates'
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'config.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/4.2/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db' / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/4.2/topics/i18n/
+
+LANGUAGE_CODE = 'de'
+
+TIME_ZONE = 'Europe/Berlin'
+
+USE_I18N = True
+
+USE_TZ = False
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/4.2/howto/static-files/
+
+STATIC_URL = 'static/'
+
+# Default primary key field type
+# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+
+# Custom
+
+ADMIN_URL = os.environ.get('ADMIN_URL', 'admin/').rstrip('/') + '/'
+
+STATIC_ROOT = BASE_DIR / 'static'
+
+MEDIA_URL = 'data/'
+MEDIA_ROOT = BASE_DIR / 'data'
+
+STATIC_ROOT.mkdir(exist_ok=True)
+MEDIA_ROOT.mkdir(exist_ok=True)
+(BASE_DIR / 'db').mkdir(exist_ok=True)

backend/config/urls.py

@@ -0,0 +1,26 @@
+"""
+URL configuration for project.
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/4.2/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.conf import settings
+from django.conf.urls.static import static
+from django.contrib import admin
+from django.urls import include, path
+
+
+urlpatterns = [
+    path(settings.ADMIN_URL, admin.site.urls),
+    path('', include('common.urls')),
+] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

backend/config/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/4.2/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
+
+application = get_wsgi_application()

backend/docker-compose.yml

@@ -0,0 +1,30 @@
+services:
+  app:
+    container_name: klangkarte
+    build:
+      context: .
+      # dockerfile: .
+    pull_policy: build
+    ports:
+      - 127.0.0.1:8070:8000
+    image: klangkarte:latest
+    working_dir: /django_project
+    environment:
+      DJANGO_SECRET_KEY: ${DJANGO_SECRET_KEY}
+      ALLOWED_HOSTS: ${ALLOWED_HOSTS}
+      DEBUG: ${DEBUG:-0}
+    volumes:
+      - volume-klangkarte:/django_project/db
+      - /srv/http/klangkarte-data:/django_project/data
+      - /srv/http/klangkarte-static:/django_project/static
+    restart: unless-stopped
+    networks:
+      - network-klangkarte
+
+volumes:
+  volume-klangkarte:
+    name: klangkarte
+
+networks:
+  network-klangkarte:
+    name: klangkarte

backend/manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

backend/requirements.txt

@@ -0,0 +1,5 @@
+Django==4.2.13
+Pillow==10.3.0
+django_colorfield==0.11.0
+django-tinymce==4.0.0
+django-map-location==0.9.1

backend/scripts/run.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+python manage.py collectstatic --noinput
+python manage.py migrate
+
+# python -m uvicorn --port 8000 config.asgi:application
+python -m gunicorn -b 0.0.0.0:8000 -k uvicorn.workers.UvicornWorker config.asgi:application

frontend/3p/leaflet/leaflet.css

@@ -0,0 +1,661 @@
+/* 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 img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.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;
+		}
+	}

frontend/3p/leaflet/locate/L.Control.Locate.css

@@ -0,0 +1,63 @@
+.leaflet-control-locate a {
+  cursor: pointer;
+}
+.leaflet-control-locate a .leaflet-control-locate-location-arrow {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 7px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+.leaflet-control-locate a .leaflet-control-locate-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 7px;
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="black" d="M304 48a48 48 0 1 1-96 0 48 48 0 0 1 96 0zm-48 368a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm208-208a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM96 256a48 48 0 1 0-96 0 48 48 0 0 0 96 0zm13 99a48 48 0 1 0 0 96 48 48 0 0 0 0-96zm294 0a48 48 0 1 0 0 96 48 48 0 0 0 0-96zM109 61a48 48 0 1 0 0 96 48 48 0 0 0 0-96z"/></svg>');
+  animation: leaflet-control-locate-spin 2s linear infinite;
+}
+.leaflet-control-locate.active a .leaflet-control-locate-location-arrow {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(32, 116, 182)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+.leaflet-control-locate.following a .leaflet-control-locate-location-arrow {
+  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgb(252, 132, 40)" d="M445 4 29 195c-48 23-32 93 19 93h176v176c0 51 70 67 93 19L508 67c16-38-25-79-63-63z"/></svg>');
+}
+
+.leaflet-touch .leaflet-bar .leaflet-locate-text-active {
+  width: 100%;
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding: 0 10px;
+}
+.leaflet-touch .leaflet-bar .leaflet-locate-text-active .leaflet-locate-icon {
+  padding: 0 5px 0 0;
+}
+
+.leaflet-control-locate-location circle {
+  animation: leaflet-control-locate-throb 4s ease infinite;
+}
+
+@keyframes leaflet-control-locate-throb {
+  0% {
+    stroke-width: 1;
+  }
+  50% {
+    stroke-width: 3;
+    transform: scale(0.8, 0.8);
+  }
+  100% {
+    stroke-width: 1;
+  }
+}
+@keyframes leaflet-control-locate-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=L.Control.Locate.css.map */

frontend/3p/lozad.min.js

@@ -0,0 +1,15 @@
+/*! lozad.js - v1.16.0 - 2020-09-10
+* https://github.com/ApoorvSaxena/lozad.js
+* Copyright (c) 2020 Apoorv Saxena; Licensed MIT */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.lozad=e()}(this,function(){"use strict";
+/**
+   * Detect IE browser
+   * @const {boolean}
+   * @private
+   */var g="undefined"!=typeof document&&document.documentMode,v=function(t){return window&&window[t]},h=["data-iesrc","data-alt","data-src","data-srcset","data-background-image","data-toggle-class"],p={rootMargin:"0px",threshold:0,enableAutoReload:!1,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=t.querySelector("img"),r=!1;null===e&&(e=document.createElement("img"),r=!0),g&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),r&&t.append(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var a=t.children,o=void 0,i=0;i<=a.length-1;i++)(o=a[i].getAttribute("data-src"))&&(a[i].src=o);t.load()}t.getAttribute("data-poster")&&(t.poster=t.getAttribute("data-poster")),t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset"));var n=",";if(t.getAttribute("data-background-delimiter")&&(n=t.getAttribute("data-background-delimiter")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(n).join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var d=t.getAttribute("data-background-image-set").split(n),u=d[0].substr(0,d[0].indexOf(" "))||d[0];// Substring before ... 1x
+u=-1===u.indexOf("url(")?"url("+u+")":u,1===d.length?t.style.backgroundImage=u:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+u+"; background-image: -webkit-image-set("+d+"); background-image: image-set("+d+")")}t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};
+/**
+   *
+   * @param {string} type
+   *
+   */function k(t){t.setAttribute("data-loaded",!0)}var y=function(t){return"true"===t.getAttribute("data-loaded")},w=function(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:document;return t instanceof Element?[t]:t instanceof NodeList?t:e.querySelectorAll(t)};return function(){var r,a,e,o=0<arguments.length&&void 0!==arguments[0]?arguments[0]:".lozad",t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},i=Object.assign({},p,t),n=i.root,d=i.rootMargin,u=i.threshold,g=i.enableAutoReload,s=i.load,c=i.loaded,l=void 0,b=void 0;v("IntersectionObserver")&&(l=new IntersectionObserver((r=s,a=c,function(t,e){t.forEach(function(t){(0<t.intersectionRatio||t.isIntersecting)&&(e.unobserve(t.target),y(t.target)||(r(t.target),k(t.target),a(t.target)))})}),{root:n,rootMargin:d,threshold:u})),v("MutationObserver")&&g&&(b=new MutationObserver((e=s,function(t){t.forEach(function(t){y(t.target)&&"attributes"===t.type&&-1<h.indexOf(t.attributeName)&&e(t.target)})})));for(var f,m=w(o,n),A=0;A<m.length;A++)(f=m[A]).getAttribute("data-placeholder-background")&&(f.style.background=f.getAttribute("data-placeholder-background"));return{observe:function(){for(var t=w(o,n),e=0;e<t.length;e++)y(t[e])||(l?(b&&g&&b.observe(t[e],{subtree:!0,attributes:!0,attributeFilter:h}),l.observe(t[e])):(s(t[e]),k(t[e]),c(t[e])))},triggerLoad:function(t){y(t)||(s(t),k(t),c(t))},observer:l,mutationObserver:b}}});

frontend/data

@@ -0,0 +1 @@
+../backend/data

frontend/ico/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/ico/70.png"/>
+      <square150x150logo src="/ico/150.png"/>
+      <square310x310logo src="/ico/310.png"/>
+      <TileImage src="/ico/150.png"/>
+      <TileColor>#d1e7dd</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

frontend/ico/favicon.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 1792 1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="m1767.5 121.6c16.3 11.7 24.5 27.1 24.5 46.4v1232c0 11.7-3.2 22.2-9.6 31.5s-14.9 16-25.4 20.1l-560 224c-14 6.4-28 6.4-42 0l-539-215.2-539 215.2c-5.8 2.9-12.8 4.4-21 4.4-11.1 0-21.6-3.2-31.5-9.6-16.3-11.7-24.5-27.2-24.5-46.4v-1232c0-11.7 3.2-22.2 9.6-31.5s14.9-16 25.4-20.1l560-224c14-6.4 28-6.4 42 0l539 215.2 539-215.2c18.7-7.6 36.2-5.9 52.5 5.2z"/><g fill="#fff"><path d="m588 1351-476 189.9v-1111.3l476-189.8z"/><path d="m1680 1362.4-476 189.8v-1111.2l476-189.9z"/><path d="m1148 1552.2-504-201.2v-1111.2l504 201.2z"/></g></svg>

frontend/ico/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Klangkarte",
+  "short_name": "Klangkarte",
+  "background_color": "#d1e7dd",
+  "display": "fullscreen",
+  "icons": [
+    {
+      "src": "/ico/192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/ico/512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

frontend/icons.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+<symbol id="mark" viewBox="0 0 69 110">
+<path stroke="#000" stroke-width="3" d="m34.5 1.5c-18.2 0-33 14.8-33 33 0 5.3 1.3 10.4 3.5 14.8 5.4 10.8 29.5 57.7 29.5 57.7s24.1-47 29.5-57.7c2.2-4.5 3.5-9.5 3.5-14.8 0-18.2-14.8-33-33-33zm0 49.5c-9.1 0-16.5-7.4-16.5-16.5s7.4-16.5 16.5-16.5 16.5 7.4 16.5 16.5-7.4 16.5-16.5 16.5z"/>
+</symbol>
+<symbol id="pin" viewBox="0 0 60 100">
+<path fill="#000" d="m25 58v42h10v-42z"/>
+<circle stroke="#000" stroke-width="2" cx="30" cy="30" r="27.5"/>
+<path fill="#fff" d="m30 14.5c.5 0 1.8-.5 1.8-1.8s-1.3-1.8-1.8-1.8c-5.4 0-10.1 1.9-13.9 5.7s-5.7 8.5-5.7 13.9c0 .5.6 1.8 1.8 1.8s1.8-1.3 1.8-1.8c0-4.4 1.6-8.2 4.7-11.4s6.9-4.6 11.3-4.6z"/>
+</symbol>
+</svg>

frontend/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="utf-8">
+  <title>Klangkarte</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/favicon.ico">
+  <link rel="icon" type="image/png" sizes="32x32" href="/ico/32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/ico/16.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/ico/apple-touch-icon.png">
+  <link rel="manifest" href="/ico/manifest.json">
+  <meta name="msapplication-config" content="/ico/browserconfig.xml">
+
+  <script src="/3p/bootstrap/bootstrap.min.js"></script>
+  <script src="/3p/leaflet/leaflet.js"></script>
+  <script src="/3p/leaflet/locate/L.Control.Locate.min.js"></script>
+  <script src="/3p/lozad.min.js"></script>
+  <script src="/script.js"></script>
+  <link rel="stylesheet" href="/3p/bootstrap/bootstrap.min.css" />
+  <link rel="stylesheet" href="/3p/leaflet/leaflet.css" />
+  <link rel="stylesheet" href="/3p/leaflet/locate/L.Control.Locate.css" />
+  <link rel="stylesheet" href="/style.css" />
+  <style id="colors"></style>
+</head>
+
+<body>
+  <div id="spin" class="position-absolute w-100 h-100 bg-dark bg-opacity-25">
+    <div class="position-absolute top-50 start-50">
+      <div class="spinner-border text-white" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+
+  <div id="detail" class="modal fade" tabindex="-1" aria-labelledby="detail-title" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-fullscreen-lg-down">
+      <div class="modal-content">
+
+        <div class="modal-header">
+          <h2 class="modal-title fs-5" id="detail-title">Title</h2>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+
+        <div class="modal-body">
+          <audio controls preload="none">
+            <source src="" type="audio/mpeg">
+            Audio vom Browser nicht unterstüzt
+          </audio>
+
+          <small class="text-body-secondary">Typ:</small>
+          <span class="badge border">__CAT__</span>
+
+          <div id="detail-desc" class="py-2 mt-2">Description</div>
+
+          <small class="text-body-secondary">Foto:</small>
+          <div class="d-flex justify-content-center">
+            <img src="" alt="Kein Bild vorhanden" class="rounded">
+          </div>
+
+          <div id="detail-map-container">
+            <small class="text-body-secondary">Karte:</small>
+            <div id="detail-map"></div>
+            <div class="hstack gap-2 small">
+              <a id="osm-link" class="small link-secondary">OpenStreetMap</a>
+              <a id="g-maps" class="small link-secondary">Google Maps</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="notice" class="modal fade" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-md modal-fullscreen-md-down">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Title</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">Description</div>
+      </div>
+    </div>
+  </div>
+
+  <div id="map" class="d-none d-md-block"></div>
+  <div id="card-container" class="shadow-lg bg-success-subtle">
+    <h1 class="fs-4 text-center m-2 mb-4">Klangkarte
+      <a class="small text-decoration-none" title="Info" href="" onclick="return showNotice('info')">?⃝</a>
+    </h1>
+    <div id="cards">
+      <div id="card-template" class="card shadow-sm">
+        <img class="card-img-top lozad" alt="Kein Bild">
+        <div class="card-footer">
+          <h3 class="fs-5 card-title">__NAME__</h3>
+          <small class="card-text text-body-secondary">Typ:</small>
+          <span class="badge border">__CAT__</span>
+        </div>
+        <a class="stretched-link"></a>
+      </div>
+    </div>
+    <div class="text-center m-2 mt-4">
+      <a class="small" href="" onclick="return showNotice('imprint')">Impressum</a>
+    </div>
+  </div>
+
+  <script defer>start()</script>
+</body>
+
+</html>

frontend/script.js

@@ -0,0 +1,305 @@
+const DATA_ROOT = '/data/';
+let CATEGORIES = {};
+let PLACES = {};
+let TEXT = {};
+let DETAIL_MAP;
+let DETAIL_MAP_LAYER;
+
+// ---------------------
+// Helper
+// ---------------------
+
+async function loadJson(url) {
+    const res = await fetch(url);
+    return await res.json();
+}
+
+function highlight(div) {
+    const prev = div.style;
+    div.style.transition = 'background-color .7s';
+    div.style.backgroundColor = 'yellow';
+    setTimeout(() => div.style = prev, 800);
+}
+
+// ---------------------
+// HTML utils
+// ---------------------
+
+function makeMarker(place) {
+    return L.marker(L.latLng(place.loc), {
+        pid: place.id,
+        title: place.later ? 'Noch nicht verfügbar' : place.name,
+        icon: L.divIcon({
+            className: 'pin ff-c' + place.cat + (place.later ? ' later' : ''),
+            html: '<svg id="pin-' + place.id + '"><use href="/icons.svg#mark"></use></svg>',
+            iconSize: [34, 55],
+            iconAnchor: [17, 55],
+            popupAnchor: [0, -20],
+            tooltipAnchor: [0, -20],
+            offset: [10, 20],
+        }),
+    });
+}
+
+function setBadge(div, category) {
+    const badge = div.querySelector('.badge');
+    // clear previous color
+    badge.classList.remove('inv');
+    for (const cls of badge.classList) {
+        if (cls.startsWith('bg-c')) {
+            badge.classList.remove(cls);
+        }
+    }
+    // set new values
+    badge.innerText = category.name || '';
+    badge.classList.add('bg-c' + category.id);
+    if (category.inv) {
+        badge.classList.add('inv');
+    }
+}
+
+function loadAudio(detailDiv, srcUrl) {
+    const x = detailDiv.querySelector('audio');
+    x.hidden = !srcUrl;
+    x.querySelector('source').src = srcUrl || '';
+    x.load(); // stops playing and reloads source
+}
+
+function comeBackLater() {
+    showNotice('come-back-later');
+}
+
+
+// ---------------------
+// Interactive
+// ---------------------
+
+function selectPin(e) {
+    document.getElementById('pin-' + e.target.dataset.pk)
+        .parentNode.classList.add('selected');
+}
+
+function unselectPin(e) {
+    document.getElementById('pin-' + e.target.dataset.pk)
+        .parentNode.classList.remove('selected');
+}
+
+function openDetails(placeId, password) {
+    initDetails(placeId);
+    new bootstrap.Modal('#detail').show(); // trigger modal
+}
+
+function showNotice(id) {
+    const txt = TEXT[id];
+    if (txt) {
+        const div = document.getElementById('notice');
+        const sz = txt.wide ? 'lg' : 'md';
+        div.firstElementChild.className = `modal-dialog modal-${sz} modal-fullscreen-${sz}-down`;
+        div.querySelector('.modal-title').innerText = txt.title;
+        div.querySelector('.modal-title').innerText = txt.title;
+        div.querySelector('.modal-body').innerHTML = txt.body;
+        new bootstrap.Modal(div).show();
+    } else {
+        console.error(`Missing text for "${id}"`)
+    }
+    return false;
+}
+
+// ---------------------
+// Initializer
+// ---------------------
+
+function initColors() {
+    let rv = '';
+    for (const cat of Object.values(CATEGORIES)) {
+        rv += `.ff-c${cat.id} { fill: ${cat.color} }\n`;
+        rv += `.bg-c${cat.id} { background: ${cat.color} }\n`;
+    }
+    document.getElementById('colors').innerHTML = rv;
+}
+
+function initCard(placeId) {
+    const place = PLACES[placeId];
+    const category = CATEGORIES[place.cat];
+    const x = document.getElementById('card-template').cloneNode(true);
+    document.getElementById('cards').append(x);
+    x.id = 'card-' + placeId;
+    x.dataset.pk = placeId;
+    if (place.loc) {
+        x.onmouseenter = selectPin;
+        x.onmouseleave = unselectPin;
+    }
+    x.querySelector('a').href = '#' + placeId;
+    x.querySelector('img').dataset.src = place.cov || '';
+    x.querySelector('.card-title').innerText = place.name || '';
+    setBadge(x, category);
+}
+
+function initLoadingCard() {
+    const x = document.getElementById('card-template').cloneNode(true);
+    x.id = 'card-loading';
+    x.classList.add('placeholder-glow');
+    document.getElementById('cards').append(x);
+    x.querySelectorAll('img,h3,span').forEach(elem => {
+        elem.classList.add('placeholder');
+        elem.alt = '';
+        if (elem.tagName === 'H3') {
+            elem.classList.add('w-100');
+        }
+    });
+    return x;
+}
+
+function initDetails(placeId) {
+    const place = PLACES[placeId];
+    const category = CATEGORIES[place.cat];
+    const x = document.getElementById('detail');
+    x.querySelector('img').src = place.img || '';
+    x.querySelector('.modal-title').innerText = place.name || '';
+    x.querySelector('#detail-desc').innerHTML = place.desc || '';
+    setBadge(x, category);
+    loadAudio(x, place.audio);
+    // external map links
+    x.querySelector('#detail-map-container').hidden = !place.loc;
+    if (place.loc) {
+        const [lat, long] = place.loc;
+        x.querySelector('#osm-link').href = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${long}&zoom=18`;
+        x.querySelector('#g-maps').href = `https://www.google.com/maps/search/?api=1&query=${lat}%2C${long}&zoom=18`;
+    }
+    setDetailMarker(place);
+    document.title = place.name + ' – ' + document.title;
+}
+
+function clearDetails() {
+    const x = document.getElementById('detail');
+    loadAudio(x, '');
+    // in case of youtube videos or other media: stops everything else
+    x.querySelector('#detail-desc').innerHTML = '';
+    setDetailMarker(null);
+    document.title = document.title.split(' – ').pop();
+}
+
+// ---------------------
+// Map stuff
+// ---------------------
+
+function initGPS(map) {
+    L.control.locate({
+        returnToPrevBounds: true,
+        showPopup: false,
+    }).addTo(map);
+}
+
+function initDetailMap() {
+    const map = L.map('detail-map');
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    }).addTo(map);
+    initGPS(map);
+    DETAIL_MAP_LAYER = L.layerGroup([]).addTo(map);
+    DETAIL_MAP = map;
+}
+
+function setDetailMarker(place) {
+    if (place && place.loc) {
+        const pos = makeMarker(place).addTo(DETAIL_MAP_LAYER).getLatLng();
+        DETAIL_MAP.setView(pos, 17);
+        DETAIL_MAP.setMaxBounds(pos.toBounds(0));
+        setTimeout(() => DETAIL_MAP.invalidateSize(), 300);
+        setTimeout(() => DETAIL_MAP.invalidateSize(), 1000);
+    } else {
+        DETAIL_MAP_LAYER.clearLayers();
+    }
+}
+
+async function initMainMap() {
+    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    });
+    const map = L.map('map', {
+        layers: [osm],
+        center: [49.894413, 10.880028],
+        zoom: 14,
+        // minZoom: 11,
+    });
+    initGPS(map);
+    // load data
+    const layers = {};
+    var bounds = L.latLngBounds();
+    var layerControl = L.control.layers(null, null, {
+        position: 'bottomright',
+        // sortLayers: true,
+    }).addTo(map);
+
+    // init checkbox to toggle groups
+    for (const cat of await loadJson(DATA_ROOT + 'categories.json')) {
+        CATEGORIES[cat.id] = cat;
+        layers[cat.id] = L.layerGroup([]).addTo(map);
+        layerControl.addOverlay(layers[cat.id],
+            '<i class="group-dot" style="background:' + cat.color + '"></i> '
+            + cat.name);
+    }
+
+    // init places
+    for (const place of await loadJson(DATA_ROOT + 'places.json')) {
+        PLACES[place.id] = place;
+        const group = layers[place.cat];
+        if (place.loc) {
+            const marker = makeMarker(place).addTo(group);
+            marker.on('click', place.later ? comeBackLater : onMarkerClick);
+            bounds.extend(marker.getLatLng());
+        }
+        if (!place.later) {
+            initCard(place.id);
+        }
+    }
+
+    // adjust bounds & zoom
+    if (bounds.isValid()) {
+        map.fitBounds(bounds, { padding: [100, 100] });
+    }
+
+    // tooltip
+    function onTooltip(pin) {
+        const div = document.getElementById("card-" + pin.options.pid);
+        div.scrollIntoView({ behavior: 'smooth' });
+        highlight(div);
+        return '';
+        // const place = PLACES[pin.options.pid];
+        // return place.name;
+    }
+
+    // click events
+    function onMarkerClick(e) {
+        location.hash = e.target.options.pid; // triggers openDetails()
+    }
+}
+
+async function start() {
+    const temp = initLoadingCard();
+    await initMainMap();
+    initDetailMap();
+    initColors();
+    document.getElementById('spin').remove();
+    onHashChange();
+    loadJson(DATA_ROOT + 'text.json').then(x => TEXT = x)
+    temp.remove();
+
+    document.getElementById('detail').addEventListener('hidden.bs.modal', e => {
+        location.hash = '';
+    });
+
+    const observer = lozad();
+    observer.observe();
+}
+
+// event listener
+function onHashChange() {
+    if (location.hash.length > 1) {
+        const [id, pw] = location.hash.slice(1).split(':', 1);
+        openDetails(id, pw);
+    } else {
+        clearDetails();
+    }
+}
+addEventListener('hashchange', onHashChange);

frontend/style.css

@@ -0,0 +1,99 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+#map {
+  width: calc(100% - 316px);
+  height: 100%;
+}
+#detail-map {
+  width: 100%;
+  height: 200px;
+}
+#card-container {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 810;
+  height: 100%;
+  width: 316px;
+  overflow: auto;
+  /* filter: drop-shadow(0 0 2px #000); */
+}
+
+.card {
+  margin: 8px;
+}
+.card img {
+  height: 200px;
+  object-fit: cover;
+  /* no-img fallback */
+  line-height: 200px;
+  background: #666;
+  color: white;
+  text-align: center;
+  font-weight: 100;
+  font-size: 24px;
+}
+.card:hover {
+  border-color: green;
+}
+
+.pin svg {
+  filter: drop-shadow(0 0 5px #888);
+  width: 100%;
+  height: 100%;
+}
+.pin.selected {
+  z-index: 800 !important;
+}
+.pin.selected svg {
+  filter: drop-shadow(0 0 5px yellow);
+}
+.pin.later {
+  fill-opacity: 0;
+}
+
+/* badge */
+.badge {
+  color: black;
+}
+.badge.inv {
+  color: white;
+}
+
+.group-dot {
+  display: inline-block;
+  border-radius: 50%;
+  border: .5px solid black;
+  width: 1em;
+  height: 1em;
+}
+
+#spin {
+  z-index: 820;
+}
+#card-template {
+  display: none;
+}
+
+#detail img {
+  /* max-width: 100%; */
+  object-fit: cover;
+  width: 100%;
+  max-height: 600px;
+}
+
+#detail audio {
+  width: 100%;
+}
+
+@media(max-width: 768px) {
+  #card-container {
+    width: 100%;
+  }
+  .card img {
+    height: calc(100vw * 2/3);
+    line-height: calc((100vw - 20px) * 2/3);
+  }
+}