changed fa-icon in create modal

public/index.php

@@ -309,7 +309,7 @@ $news_items = $stmt->fetchAll();
     <!-- ============================================================= -->
     <div id="create-modal" class="modal-overlay" style="display:none;">
         <div class="modal-content">
-            <h2><i class="fa-solid fa-plus-circle"></i> Beitrag</h2>
+            <h2><i class="fa-solid fa-pencil"></i> Beitrag hinzufügen</h2>
  
             <div class="form-group">
                 <label for="create-category">Kategorie</label>

public/js/app.js

@@ -955,6 +955,11 @@ function submitLogin() {
     document.cookie = 'webgis_user=' + encodeURIComponent(name) + ';path=/;max-age=31536000;SameSite=Lax';
     document.getElementById('login-modal').style.display = 'none';
 
+    // Starts Onboarding Tour on first Login
+    if (!localStorage.getItem('webgis_onboarding_done')) {
+        setTimeout(function () { startTour(); }, 500);
+    }
+
     // Open Create Modal if Geometry is pending 
     if (drawnGeometry) {
         document.getElementById('create-geom').value = JSON.stringify(drawnGeometry);
@@ -965,6 +970,11 @@ function submitLogin() {
 
 function skipLogin() {
     document.getElementById('login-modal').style.display = 'none';
+
+    // Starts Onboarding Tour on first Login
+    if (!localStorage.getItem('webgis_onboarding_done')) {
+        setTimeout(function () { startTour(); }, 500);
+    }
 }
 
 // Info Modal

public/js/onboarding.js

@@ -1,6 +1,7 @@
 // =====================================================================
 // WebGIS Citizen Participation Portal — Onboarding Tour
-// Guides Users through the Participation Portal
+// Guides Users through the Participation Portal.
+// On Mobile centered Overlays. On Desktop attached to User Interface.
 // =====================================================================
 
 
@@ -8,74 +9,28 @@
 // Block 1: Onboarding Configuration
 // =================================================================
 
-// ONBOARDING_MODE — Controls when the Tutorial is shown:
-const ONBOARDING_MODE = 'once';
-//     'once'    — Shown on first Visit, stored in localStorage
-//     'session' — Shown per Browser Session, stored in sessionStorage
-//     'always'  — Shows always, nothing stored
-
 // Prevents double Initialization
 let onboardingStarted = false;
 
-
+// Detects Mobile Viewport
-// =================================================================
+function isMobile() {
-// Block 2: Tour Initialization
+    return window.innerWidth < 769;
-// =================================================================
-
-function initOnboardingTour() {
-
-    // Checks if Tutorial should be shown based on Onboarding Mode
-    if (ONBOARDING_MODE === 'once' && localStorage.getItem('webgis_onboarding_done')) {
-        return;
-    }
-    if (ONBOARDING_MODE === 'session' && sessionStorage.getItem('webgis_onboarding_done')) {
-        return;
-    }
-
-    // Waits for Welcome and Login Modals to be closed
-    waitForModalsToClose(function () {
-        setTimeout(startTour, 600);
-    });
 }
 
 
 // =================================================================
-// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
+// Block 2: Tour Definition
 // =================================================================
 
-function waitForModalsToClose(callback) {
+function startTour(manual) {
-    const welcomeModal = document.getElementById('welcome-modal');
-    const loginModal = document.getElementById('login-modal');
-
-    const checkInterval = setInterval(function () {
-        const welcomeHidden = !welcomeModal || welcomeModal.style.display === 'none' || welcomeModal.style.display === '';
-        const loginHidden = !loginModal || loginModal.style.display === 'none' || loginModal.style.display === '';
-
-        if (welcomeHidden && loginHidden) {
-            clearInterval(checkInterval);
-            callback();
-        }
-    }, 300);
-
-    // Safety Timeout
-    setTimeout(function () {
-        clearInterval(checkInterval);
-        callback();
-    }, 30000);
-}
-
-
-// =================================================================
-// Block 4: Tour Definition
-// =================================================================
-
-function startTour() {
     // Prevents double Start
     if (onboardingStarted) return;
     onboardingStarted = true;
 
+    const mobile = isMobile();
+
     const tour = new Shepherd.Tour({
-        useModalOverlay: true,
+        useModalOverlay: !mobile,
         defaultStepOptions: {
             cancelIcon: { enabled: true },
             scrollTo: false,
@@ -90,45 +45,53 @@ function startTour() {
 
 
 // -----------------------------------------------------------------
-    // Step 1: Welcome
+    // Step 1: Welcome — Skip Timer at automatic Start
     // -----------------------------------------------------------------
-    tour.addStep({
+    var welcomeButtons = [
-        id: 'welcome',
-        title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
-        text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
-              '<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
-        buttons: [
         {
             text: 'Überspringen',
             action: tour.cancel,
-                classes: 'shepherd-button-secondary'
+            classes: 'shepherd-button-secondary' + (manual ? '' : ' skip-btn-locked')
         },
         {
             text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
             action: tour.next,
             classes: 'shepherd-button-primary'
         }
-        ]
+    ];
+
+    tour.addStep({
+        id: 'welcome',
+        title: '<i class="fa-solid fa-hand-wave"></i> Willkommen bei der Mitmachkarte!',
+        text: 'Dieses <strong>interaktive Tutorial</strong> zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
+              '<br><br><span style="color:var(--color-text-secondary);">Sie können das Tutorial jederzeit über den Hilfe-Tab der Seitenleiste wiederholen.</span>',
+        buttons: welcomeButtons,
+        when: {
+            show: function () {
+                if (manual) return;
+
+                // Locks Skip Button with Progress Bar for 5 Seconds
+                var skipBtn = document.querySelector('.skip-btn-locked');
+                if (!skipBtn) return;
+                skipBtn.disabled = true;
+                skipBtn.style.pointerEvents = 'none';
+
+                setTimeout(function () {
+                    skipBtn.disabled = false;
+                    skipBtn.style.pointerEvents = '';
+                    skipBtn.classList.remove('skip-btn-locked');
+                }, 5000);
+            }
+        }
     });
 
 
     // -----------------------------------------------------------------
     // Step 2: Drawing Tools
     // -----------------------------------------------------------------
-    tour.addStep({
+    var drawingStep = {
         id: 'drawing-tools',
         title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
-        text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
-        attachTo: {
-            element: '.leaflet-pm-toolbar',
-            on: 'left'
-        },
-        beforeShowPromise: function () {
-            return new Promise(function (resolve) {
-                sidebar.close();
-                setTimeout(resolve, 300);
-            });
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -141,20 +104,32 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
+    };
+
+    if (mobile) {
+        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong> ' +
+            '<i class="fa-solid fa-location-dot"></i> ' +
+            'rechts, um Hinweise als Punkte, Linien oder Flächen hinzuzufügen.';
+    } else {
+        drawingStep.text = 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.';
+        drawingStep.attachTo = { element: '.leaflet-pm-toolbar', on: 'left' };
+        drawingStep.beforeShowPromise = function () {
+            return new Promise(function (resolve) {
+                sidebar.close();
+                setTimeout(resolve, 300);
             });
+        };
+    }
+
+    tour.addStep(drawingStep);
 
 
     // -----------------------------------------------------------------
     // Step 3: Address Search
     // -----------------------------------------------------------------
-    tour.addStep({
+    var searchStep = {
         id: 'address-search',
         title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
-        text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
-        attachTo: {
-            element: '.leaflet-control-geocoder',
-            on: 'left'
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -167,20 +142,25 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong> ' +
+            '<i class="fa-solid fa-magnifying-glass"></i> rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
+    } else {
+        searchStep.text = 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.';
+        searchStep.attachTo = { element: '.leaflet-control-geocoder', on: 'left' };
+    }
+
+    tour.addStep(searchStep);
 
 
     // -----------------------------------------------------------------
     // Step 4: Layer Control
     // -----------------------------------------------------------------
-    tour.addStep({
+    var layerStep = {
         id: 'layer-control',
         title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
-        text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
-        attachTo: {
-            element: '.leaflet-control-layers',
-            on: 'left'
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -193,26 +173,25 @@ function startTour() {
                 classes: 'shepherd-button-primary'
             }
         ]
-    });
+    };
+
+    if (mobile) {
+        layerStep.text = 'Wechseln Sie über das <strong>Layer-Symbol</strong> ' +
+            '<i class="fa-solid fa-layer-group"></i> oben rechts zwischen verschiedenen Hintergrundkarten und Satellitenbildern.';
+    } else {
+        layerStep.text = 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.';
+        layerStep.attachTo = { element: '.leaflet-control-layers', on: 'left' };
+    }
+
+    tour.addStep(layerStep);
 
 
     // -----------------------------------------------------------------
     // Step 5: Sidebar
     // -----------------------------------------------------------------
-    tour.addStep({
+    var sidebarStep = {
         id: 'sidebar',
         title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
-        text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
-        attachTo: {
-            element: '#sidebar',
-            on: 'right'
-        },
-        beforeShowPromise: function () {
-            return new Promise(function (resolve) {
-                sidebar.open('tab-help');
-                setTimeout(resolve, 400);
-            });
-        },
         buttons: [
             {
                 text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
@@ -220,58 +199,106 @@ function startTour() {
                 classes: 'shepherd-button-secondary'
             },
             {
-                text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
+                text: 'Abschließen <i class="fa-solid fa-check"></i>',
                 action: tour.next,
                 classes: 'shepherd-button-primary'
             }
         ]
+    };
+
+    if (mobile) {
+        sidebarStep.text = 'In der <strong>Seitenleiste</strong> ' +
+            '<i class="fa-solid fa-house"></i> ' +
+            'links finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
+    } else {
+        sidebarStep.text = 'In der <strong>Seitenleiste</strong> finden Sie Hilfestellungen, Listenansichten und Neuigkeiten.';
+        sidebarStep.attachTo = { element: '#sidebar', on: 'right' };
+        sidebarStep.beforeShowPromise = function () {
+            return new Promise(function (resolve) {
+                sidebar.open('tab-help');
+                setTimeout(resolve, 400);
             });
+        };
+    }
+
+    tour.addStep(sidebarStep);
 
 
     // -----------------------------------------------------------------
-    // Completion and Cancellation
+    // Completion and Cancellation — shows Drawing Arrow
     // -----------------------------------------------------------------
-    tour.on('complete', function () {
+    function onTourEnd() {
-        markOnboardingDone();
         onboardingStarted = false;
-    });
+        if (mobile) sidebar.close();
 
-    tour.on('cancel', function () {
+        // Shows Arrow Hint
-        markOnboardingDone();
+        if (!localStorage.getItem('webgis_onboarding_done')) {
-        onboardingStarted = false;
+            localStorage.setItem('webgis_onboarding_done', 'true');
-    });
+            showDrawingArrow();
+        }
+    }
+
+    tour.on('complete', onTourEnd);
+    tour.on('cancel', onTourEnd);
 
     tour.start();
 }
 
 
 // =================================================================
-// Marks Onboarding as completed
+// Drawing Arrow — Points to Geoman Toolbar after Tour
 // =================================================================
 
-function markOnboardingDone() {
+function showDrawingArrow() {
-    if (ONBOARDING_MODE === 'once') {
+    var hint = document.createElement('div');
-        localStorage.setItem('webgis_onboarding_done', 'true');
+    hint.id = 'drawing-hint-arrow';
-    } else if (ONBOARDING_MODE === 'session') {
+    hint.innerHTML = '<span class="drawing-hint-label">' +
-        sessionStorage.setItem('webgis_onboarding_done', 'true');
+                         '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen' +
+                     '</span>' +
+                     '<span class="drawing-hint-chevrons">' +
+                         '<i class="fa-solid fa-chevron-right"></i>' +
+                         '<i class="fa-solid fa-chevron-right"></i>' +
+                     '</span>';
+    document.body.appendChild(hint);
+
+    // Positions Hint centered on Geoman Toolbar
+    function positionHint() {
+        var toolbar = document.querySelector('.leaflet-pm-toolbar');
+        if (!toolbar) { removeDrawingArrow(); return; }
+
+        var rect = toolbar.getBoundingClientRect();
+        var hintHeight = hint.offsetHeight || 32;
+        hint.style.top = (rect.top + (rect.height / 2) - (hintHeight / 2)) + 'px';
+        hint.style.right = (window.innerWidth - rect.left + 10) + 'px';
+    }
+
+    positionHint();
+    window.addEventListener('resize', positionHint);
+
+    var timeout = setTimeout(removeDrawingArrow, 60000);
+
+    map.on('pm:globaldrawmodetoggled', function onDraw() {
+        clearTimeout(timeout);
+        removeDrawingArrow();
+        map.off('pm:globaldrawmodetoggled', onDraw);
+        window.removeEventListener('resize', positionHint);
+    });
+}
+
+function removeDrawingArrow() {
+    var arrow = document.getElementById('drawing-hint-arrow');
+    if (arrow) {
+        arrow.classList.add('fade-out');
+        setTimeout(function () { arrow.remove(); }, 300);
     }
 }
 
 
 // =================================================================
-// Manual Tour Restart
+// Manual Tour Restart (from Info Modal or Help Tab)
 // =================================================================
 
 function restartOnboarding() {
-    localStorage.removeItem('webgis_onboarding_done');
-    sessionStorage.removeItem('webgis_onboarding_done');
     onboardingStarted = false;
-    startTour();
+    startTour(true);
 }
-
-
-// =================================================================
-// Auto-Start on Page Load
-// =================================================================
-
-initOnboardingTour();

public/styles.css

@@ -875,6 +875,97 @@ select.form-input { cursor: pointer; }
     transform: translate(-50%, -50%) !important;
 }
 
+
+/* -----------------------------------------------------------------
+   4.10 Skip Button Progress Bar (Onboarding)
+   ----------------------------------------------------------------- */
+.skip-btn-locked {
+    position: relative;
+    overflow: hidden;
+    opacity: 0.6;
+}
+
+.skip-btn-locked::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background: rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    animation: skip-fill 5s linear forwards;
+    pointer-events: none;
+}
+
+@keyframes skip-fill {
+    from { width: 0%; }
+    to   { width: 100%; opacity: 0; }
+}
+
+
+/* -----------------------------------------------------------------
+   4.11 Drawing Hint Arrow after Onboarding
+   ----------------------------------------------------------------- */
+#drawing-hint-arrow {
+    position: fixed;
+    z-index: 1500;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    pointer-events: none;
+    animation: hint-fade-in 400ms ease;
+    transition: opacity 300ms ease;
+}
+
+#drawing-hint-arrow.fade-out {
+    opacity: 0;
+}
+
+.drawing-hint-label {
+    background: var(--color-primary);
+    color: white;
+    font-family: var(--font-body);
+    font-size: 0.78rem;
+    font-weight: 600;
+    padding: 6px 14px;
+    border-radius: 20px;
+    white-space: nowrap;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.drawing-hint-chevrons {
+    display: flex;
+    gap: 0;
+    color: var(--color-primary);
+    font-size: 1.2rem;
+    font-weight: 900;
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
+}
+
+.drawing-hint-chevrons i:nth-child(1) {
+    animation: chevron-pulse 1.2s ease-in-out infinite;
+    opacity: 0.4;
+}
+
+.drawing-hint-chevrons i:nth-child(2) {
+    animation: chevron-pulse 1.2s ease-in-out 0.3s infinite;
+    opacity: 0.7;
+}
+
+@keyframes chevron-pulse {
+    0%, 100% { transform: translateX(0); opacity: 0.3; }
+    50% { transform: translateX(3px); opacity: 1; }
+}
+
+@keyframes hint-fade-in {
+    from { opacity: 0; transform: translateX(-10px); }
+    to   { opacity: 1; transform: translateX(0); }
+}
+
 /* Mobile */
 @media (max-width: 768px) {
     .shepherd-element { max-width: 300px !important; }