feat: Add styleguide setup

src/fellchensammlung/templates/fellchensammlung/styleguide.html

@@ -0,0 +1,102 @@
+{% extends "fellchensammlung/base_generic.html" %}
+{% load i18n %}
+{% load static %}
+{% block title %}<title>{% translate "Styleguide" %}</title>{% endblock %}
+
+{% block content %}
+    <h1>This is a heading</h1>
+    <p>And this is a short paragraph below</p>
+    <div class="container-cards">
+        <h2>Card Containers</h2>
+        <div class="card">
+            <h3>I am a card</h3>
+            <p>Cards are responsive. Use them to display multiple items of the same category</p>
+        </div>
+        <div class="card">
+            <h3>Photos</h3>
+            <p>Cards are responsive. Use them to display multiple items of the same category</p>
+            <img src="{% static 'fellchensammlung/img/example_rat_single.png' %}" alt="A rat sitting on a wooden house">
+        </div>
+    </div>
+    <div class="container-cards">
+        <form class="form-search card half" method="post">
+            <label for="inputA">Input Alpha</label>
+            <input name="inputA" maxlength="200" id="inputA">
+            <label for="inputB">Beta</label>
+            <input name="inputB" maxlength="200" id="inputB">
+            <label for="id_location_string">Ort</label>
+            <input name="location_string" id="id_location_string">
+            <ul id="results"></ul>
+            <div class="container-edit-buttons">
+                <button class="btn" type="submit" value="search" name="search">
+                    <i class="fas fa-search"></i> {% trans 'Suchen' %}
+                </button>
+                {% if searched %}
+                    {% if subscribed_search %}
+                        <button class="btn" type="submit" value="{{ subscribed_search.pk }}"
+                                name="unsubscribe_to_search">
+                            <i class="fas fa-bell-slash"></i> {% trans 'Suche nicht mehr abonnieren' %}
+                        </button>
+                    {% else %}
+                        <button class="btn" type="submit" name="subscribe_to_search">
+                            <i class="fas fa-bell"></i> {% trans 'Suche abonnieren' %}
+                        </button>
+                    {% endif %}
+                {% endif %}
+            </div>
+            {% if place_not_found %}
+                <p class="error">
+                    {% trans 'Ort nicht gefunden' %}
+                </p>
+            {% endif %}
+        </form>
+        <div class="card half">
+            {% include "fellchensammlung/partials/partial-map.html" %}
+        </div>
+    </div>
+    {% include "fellchensammlung/lists/list-adoption-notices.html" %}
+
+    <script>
+        const locationInput = document.getElementById('id_location_string');
+        const resultsList = document.getElementById('results');
+        const placeIdInput = document.getElementById('place_id');
+
+        locationInput.addEventListener('input', async function () {
+            const query = locationInput.value.trim();
+
+            if (query.length < 3) {
+                resultsList.innerHTML = ''; // Don't search for or show results if input is less than 3 characters
+                return;
+            }
+
+            try {
+                const response = await fetch(`{{ geocoding_api_url }}/?q=${encodeURIComponent(query)}&limit=5&lang=de`);
+                const data = await response.json();
+
+                if (data && data.features) {
+                    resultsList.innerHTML = ''; // Clear previous results
+
+                    const locations = data.features.slice(0, 5); // Show only the first 5 results
+
+                    locations.forEach(location => {
+                        const listItem = document.createElement('li');
+                        listItem.classList.add('result-item');
+                        listItem.textContent = geojson_to_summary(location);
+
+                        // Add event when user clicks on a result location
+                        listItem.addEventListener('click', () => {
+
+                            locationInput.value = geojson_to_searchable_string(location); // Set input field to selected location
+                            resultsList.innerHTML = ''; // Clear the results after selecting a location
+                        });
+
+                        resultsList.appendChild(listItem);
+                    });
+                }
+            } catch (error) {
+                console.error('Error fetching location data:', error);
+                resultsList.innerHTML = '<li class="result-item">Error fetching data. Please try again.</li>';
+            }
+        });
+    </script>
+{% endblock %}

src/fellchensammlung/urls.py

@@ -108,5 +108,6 @@ urlpatterns = [
     ## TECHNICAL ##
     ###############
     path("sitemap.xml", sitemap, {"sitemaps": sitemaps}, name="django.contrib.sitemaps.views.sitemap"),
+    path("styleguide", views.styleguide, name="styleguide"),
 
 ]

src/fellchensammlung/views.py

@@ -633,3 +633,9 @@ def export_own_profile(request):
     ANs_as_json = serialize('json', ANs)
     full_json = f"{user_as_json}, {ANs_as_json}"
     return HttpResponse(full_json, content_type="application/json")
+
+
+def styleguide(request):
+
+    context = {"geocoding_api_url": settings.GEOCODING_API_URL, }
+    return render(request, 'fellchensammlung/styleguide.html', context=context)