lukas.uptmoor/webgis-lohne
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

integrated onboarding tutorial for citizen portal

Browse Source
This commit is contained in:
patrickzerhusen
2026-04-30 15:28:45 +02:00
parent ffc53f23e2
commit e1cf6f21f5
4 changed files with 434 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/index.php
View File

@@ -68,6 +68,10 @@ $news_items = $stmt->fetchAll();
<!-- Application Styles -->
<link rel="stylesheet" href="styles.css">
<!-- Shepherd.js Onboarding Tour -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/css/shepherd.css">
<!-- ============================================================= -->
<!-- Municipality Theme loaded from Database -->
<!-- ============================================================= -->
@@ -183,17 +187,30 @@ $news_items = $stmt->fetchAll();
<span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
</h2>
<div class="sidebar-body">
<h3><i class="fa-solid fa-book"></i> Interaktive Anleitung</h3>
<p>Klicken Sie unten auf Tutorial starten um Schritt für Schritt durch die Kernfunktionen der Mitmachkarte geführt zu werden.</p>
<p>
<button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}" style="font-size:0.85rem;">
<i class="fa-solid fa-route"></i> Tutorial starten
</button>
</p>
<h3><i class="fa-solid fa-map-location-dot"></i> Karte bedienen</h3>
<p>Verschieben Sie die Karte per Mausklick und Ziehen. Zoomen Sie mit dem Mausrad oder den Zoom-Buttons.</p>
<h3><i class="fa-solid fa-plus"></i> Beitrag erstellen</h3>
<p>Verwenden Sie die Zeichenwerkzeuge rechts, um Beiträge als Punkte, Linien oder Flächen zu zeichnen. Anschließend können Sie Kategorie und Beschreibung hinzufügen.</p>
<h3><i class="fa-solid fa-location-dot"></i> Beitrag hinzufügen</h3>
<p>Verwenden Sie die Zeichenwerkzeuge rechts, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.</p>
<h3><i class="fa-solid fa-thumbs-up"></i> Abstimmen</h3>
<p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Like/Dislike Funktion, um Ihre Meinung kundzugeben.</p>
<h3><i class="fa-solid fa-thumbs-up"></i> Bewerten</h3>
<p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Bewertungsfunktion, um Ihre Meinung zu äußern.</p>
<h3><i class="fa-solid fa-comments"></i> Kommentieren</h3>
<p>Gerne können Sie Ihre Meinung zu bestehenden Beiträgen auch durch die Kommentarfunktion äußern.</p>
<h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
<p>Verwenden Sie die Adresssuche rechts, um bestimmte Orte auf der Karte zu finden.</p>
<p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
</div>
</div>
@@ -246,7 +263,7 @@ $news_items = $stmt->fetchAll();
<!-- ============================================================= -->
<footer id="app-footer">
<span class="dev-warning">
<i class="fa-solid fa-triangle-exclamation"></i> Demoversion - nicht in Absprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
<i class="fa-solid fa-triangle-exclamation"></i> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
</span>
<div class="footer-content">
<span class="footer-text">© <a href="https://endex-geodaten.de" target="_blank" style="color:inherit;">endex GmbH</a></span>
@@ -267,7 +284,7 @@ $news_items = $stmt->fetchAll();
<li>Bestehende Beiträge der Bürgerschaft betrachten und bewerten</li>
</ul>
<p style="background:#fff3cd;padding:10px;border-radius:6px;border:1px solid #ffc107;font-size:0.85rem;color:#856404;">
<i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Dieses Bürgerbeteiligungsportal befindet sich noch in der Entwicklung und wurde nicht offiziell beauftragt.
<i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
</p>
<p>Zum Hinzufügen von Beiträgen geben Sie bitte zunächst Ihren Namen ein.</p> <div class="modal-actions">
<button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
@@ -366,6 +383,13 @@ $news_items = $stmt->fetchAll();
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.all.min.js"></script>
<!-- Shepherd.js Library -->
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/js/shepherd.min.js"></script>
<!-- Onboarding Logic -->
<script src="js/onboarding.js"></script>
<!-- ============================================================= -->
<!-- Municipality Configuration passed to JavaScript -->
<!-- ============================================================= -->