comment counter now refreshed for each deletion or addition of comment

.env.example

@@ -3,8 +3,6 @@ POSTGRES_HOSTNAME=postgres_host
 POSTGRES_PORT=postgres_port
 POSTGRES_DB=postgres_database
 POSTGRES_USER=postgres_user
-POSTGRES_PASSWORD=xxxx
+POSTGRES_PASSWORD=
-
+ADMIN_PASSWORD=
-ADMIN_PASSWORD=xxxxx
-
 MUNICIPALITY_SLUG=lohne

.gitignore

@@ -2,3 +2,6 @@
 .vscode/
 *.log
 scripts
+
+public/uploads/photos/*
+!public/uploads/photos/.gitkeep

EXTENSION.md

@@ -1,8 +1,47 @@
-## Neue Ideenkarte anlegen
+# Neue Ideenkarte anlegen
-1.	DNS record ```<name>``` A 195.59.32.237 600s
-2.	Nginx Weiterleitung in ```default.conf```: 
 
+## Übersicht
+
+| Variable | Bedeutung |
+|---|---|
+| `<name>` | Name der Kommune (z.B. `lohne`) |
+| `<ID>` | Eindeutige Port-ID für die Datenbank (z.B. `4` → Port `5434`) |
+| `<branch-name>` | Git-Branch des Frontend-Repos |
+
+---
+
+## Schritt 1 — DNS Record anlegen
+
+Im DNS-Panel einen neuen A-Record anlegen:
+
+| Feld | Wert |
+|---|---|
+| Name | `<name>` |
+| Typ | `A` |
+| Ziel | `195.59.32.237` |
+| TTL | `600s` |
+
+> ⚠️ DNS muss vollständig propagiert sein, bevor Certbot in Schritt 3 ausgeführt wird.
+
+Propagation prüfen:
+```bash
+dig <name>.endex-geodaten.de
 ```
+
+---
+
+## Schritt 2 — Nginx `default.conf` anpassen
+
+### 2a — Subdomain in den Port-80-Block eintragen
+
+```nginx
+server_name endex-geodaten.de www.endex-geodaten.de git.endex-geodaten.de lohne.endex-geodaten.de <name>.endex-geodaten.de localhost;
+```
+
+### 2b — Neuen HTTPS-Server-Block hinzufügen
+
+```nginx
+# WEBGIS <NAME>
 server {
     listen 443 ssl;
     server_name <name>.endex-geodaten.de;
@@ -26,8 +65,34 @@ server {
 }
 ```
 
-3. Docker container für UI
+---
+
+## Schritt 3 — SSL-Zertifikat erneuern
+
+Da kein Wildcard-Zertifikat verwendet wird, muss das Cert neu ausgestellt werden:
+
+```bash
+docker compose run --rm certbot certonly --webroot \
+  --webroot-path=/var/www/certbot \
+  -d endex-geodaten.de \
+  -d www.endex-geodaten.de \
+  -d git.endex-geodaten.de \
+  -d lohne.endex-geodaten.de \
+  -d <name>.endex-geodaten.de
 ```
+
+Nginx neu laden:
+```bash
+docker compose exec nginx nginx -s reload
+```
+
+---
+
+## Schritt 4 — Docker Container in `docker-compose.yml` anlegen
+
+### PHP/UI Container
+
+```yaml
   webgis-<name>-php:
     build: php-docker/
     container_name: webgis-<name>-php
@@ -38,41 +103,81 @@ server {
       - webgis-<name>-nw
 ```
 
-und Datenbank anlegen.
+### Datenbank Container
 
-```
+```yaml
-  webgis-<name>db:
+  webgis-<name>-db:
     image: postgis/postgis:15-3.3
     container_name: webgis-<name>-db
     restart: always
     ports:
       - "127.0.0.1:543<ID>:5432" # inside the container always 5432
     environment:
-      - POSTGRES_USER=${WEBGIS_DB_USER} # maybe go back to default username
+      - POSTGRES_USER=${WEBGIS_<NAME>_DB_USER}
-      - POSTGRES_PASSWORD=${WEBGIS_DB_PW} # must be secure and unique
+      - POSTGRES_PASSWORD=${WEBGIS_<NAME>_DB_PW}
-      - POSTGRES_DB=${WEBGIS_DB_NAME} #same as container name
+      - POSTGRES_DB=${WEBGIS_<NAME>_DB_NAME}
     volumes:
       - ./webgis-<name>-data:/var/lib/postgresql/data
     networks:
       - webgis-<name>-nw
 ```
 
-4.	nginx Volume für neue Stadt in ```docker-compose.yml``` anlegen
+### Netzwerk ergänzen
-```
+
-./webgis-<name>:/var/www/webgis-<name>
+Unter dem `networks:` Block am Ende der `docker-compose.yml`:
+
+```yaml
+networks:
+  webgis-<name>-nw:
+    driver: bridge
 ```
 
+---
 
-5. Frontend source code nach ```webgis-<name>``` klonen
+## Schritt 5 — Nginx Volume ergänzen
+
+Beim nginx-Service in `docker-compose.yml` das neue Volume eintragen:
+
+```yaml
+volumes:
+  - ./webgis-<name>:/var/www/webgis-<name>
 ```
+
+---
+
+## Schritt 6 — Frontend Source Code klonen
+
+```bash
 git submodule add -b <branch-name> https://git.endex-geodaten.de/lukas.uptmoor/webgis-<name>.git
 ```
 
-Jede Kommune sollte ein eigenes Repo kriegen, da Features am Anfang variieren.
+> Jede Kommune erhält ein eigenes Repo, da Features initial variieren können.
 
+---
 
-6. Mit der Datenbank verbinden über SSH-Tunnel
+## Schritt 7 — Container starten
+
+```bash
+docker compose up -d webgis-<name>-php webgis-<name>-db
 ```
+
+Logs prüfen:
+```bash
+docker compose logs -f webgis-<name>-php
+docker compose logs -f webgis-<name>-db
+```
+
+---
+
+## Schritt 8 — Datenbank vorbereiten
+
+SSH-Tunnel öffnen:
+```bash
 ssh -L 5433:localhost:543<ID> root@endex-geodaten.de
 ```
-und Datenbank für Anwendung vorbereiten.
+
+Strukturen laden:
+
+```bash
+docker exec -it webgis-<name>-db psql -U $POSTGRES_USER -d $POSTGRES_DB < migrations/001_initial_schema.sql
+```

migrations/005_browser_id.sql

@@ -19,7 +19,7 @@ CREATE INDEX idx_votes_browser ON votes(browser_id);
 
 -- Drops old Constraint voter_name based
 ALTER TABLE votes
-    DROP CONSTRAINT IF EXISTS votes_contribution_id_voter_name_key;
+    DROP CONSTRAINT IF EXISTS votes_unique_per_voter;
 
 -- Creates new Constraint browser_id based
 ALTER TABLE votes

migrations/006_comments_and_photos.sql

@@ -0,0 +1,36 @@
+-- =====================================================================
+-- Migration 006: Comments Table and Photo Support
+-- =====================================================================
+
+
+-- ---------------------------------------------------------------------
+-- Block 1: Creates Table "comments"
+-- Stores Comments on Contributions. Comments is linked to
+-- Contributions and identified by browser_id.
+-- ---------------------------------------------------------------------
+CREATE TABLE IF NOT EXISTS comments (
+    comment_id      SERIAL PRIMARY KEY,
+    contribution_id INTEGER NOT NULL REFERENCES contributions(contribution_id) ON DELETE CASCADE,
+    author_name     VARCHAR(100) NOT NULL,
+    browser_id      VARCHAR(36) DEFAULT NULL,
+    content         TEXT NOT NULL,
+    created_at      TIMESTAMP NOT NULL DEFAULT NOW()
+);
+
+
+-- ---------------------------------------------------------------------
+-- Block 2: Indexes for fast Comment Queries
+-- ---------------------------------------------------------------------
+CREATE INDEX idx_comments_contribution ON comments(contribution_id);
+CREATE INDEX idx_comments_browser ON comments(browser_id);
+
+
+-- ---------------------------------------------------------------------
+-- Block 3: Adds Photo Path Column to Contributions
+-- Stores relative Path to uploaded Photo File.
+-- ---------------------------------------------------------------------
+ALTER TABLE contributions
+    ADD COLUMN photo_path VARCHAR(255) DEFAULT NULL;
+    ADD COLUMN comment_count INTEGER NOT NULL DEFAULT 0;
+
+COMMENT ON COLUMN contributions.photo_path IS 'Relative Path to uploaded Photo. NULL = no Photo.';

public/admin.css

@@ -1,547 +0,0 @@
-/* =====================================================================
-   Moderation Page — Styles
-   Separate Stylesheet for the Admin Moderation Interface.
-   ===================================================================== */
-
-
-/* -----------------------------------------------------------------
-   Base
-   ----------------------------------------------------------------- */
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-    font-family: 'Segoe UI', system-ui, sans-serif;
-    background: #f4f5f7;
-    color: #1a1a2e;
-    font-size: 15px;
-}
-
-
-/* -----------------------------------------------------------------
-   Header
-   ----------------------------------------------------------------- */
-.admin-header {
-    background: var(--color-primary);
-    color: white;
-    padding: 14px 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.admin-header h1 {
-    font-size: 1.15rem;
-    font-weight: 600;
-}
-
-.admin-nav {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-}
-
-.admin-nav a {
-    color: white;
-    text-decoration: none;
-    opacity: 0.8;
-    font-size: 0.85rem;
-    transition: opacity 150ms ease;
-}
-
-.admin-nav a:hover { opacity: 1; }
-
-
-/* -----------------------------------------------------------------
-   Container
-   ----------------------------------------------------------------- */
-.admin-container {
-    max-width: 960px;
-    margin: 24px auto;
-    padding: 0 16px;
-}
-
-
-/* -----------------------------------------------------------------
-   Statistics Cards
-   ----------------------------------------------------------------- */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 12px;
-    margin-bottom: 28px;
-}
-
-.stat-card {
-    background: white;
-    border-radius: 8px;
-    padding: 16px;
-    text-align: center;
-    border: 1px solid #e0e0e0;
-}
-
-.stat-card .stat-number {
-    font-size: 1.8rem;
-    font-weight: 700;
-    color: var(--color-primary);
-}
-
-.stat-card .stat-label {
-    font-size: 0.8rem;
-    color: #5a5a7a;
-    margin-top: 4px;
-}
-
-
-/* -----------------------------------------------------------------
-   Filter Tabs
-   ----------------------------------------------------------------- */
-.filter-tabs {
-    display: flex;
-    gap: 4px;
-    margin-bottom: 20px;
-    border-bottom: 2px solid #e0e0e0;
-    padding-bottom: 0;
-}
-
-.filter-tab {
-    padding: 8px 16px;
-    border: none;
-    background: none;
-    font-family: inherit;
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #5a5a7a;
-    cursor: pointer;
-    border-bottom: 2px solid transparent;
-    margin-bottom: -2px;
-    transition: color 150ms ease, border-color 150ms ease;
-}
-
-.filter-tab:hover {
-    color: var(--color-primary);
-}
-
-.filter-tab.active {
-    color: var(--color-primary);
-    border-bottom-color: var(--color-primary);
-}
-
-.filter-tab .tab-count {
-    background: #e0e0e0;
-    color: #5a5a7a;
-    font-size: 0.7rem;
-    padding: 1px 6px;
-    border-radius: 10px;
-    margin-left: 4px;
-}
-
-.filter-tab.active .tab-count {
-    background: var(--color-primary);
-    color: white;
-}
-
-
-/* -----------------------------------------------------------------
-   Sort Controls
-   ----------------------------------------------------------------- */
-.sort-controls {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    font-size: 0.85rem;
-    color: #5a5a7a;
-}
-
-.sort-controls select {
-    padding: 4px 8px;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
-    font-family: inherit;
-    font-size: 0.85rem;
-    cursor: pointer;
-}
-
-
-/* -----------------------------------------------------------------
-   Collapsible Contribution Rows
-   ----------------------------------------------------------------- */
-.contribution-row {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    margin-bottom: 10px;
-    overflow: hidden;
-    transition: border-color 150ms ease;
-}
-
-.contribution-row:hover {
-    border-color: #bbb;
-}
-
-.contribution-row-header {
-    padding: 12px 16px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    transition: background 150ms ease;
-}
-
-.contribution-row-header:hover {
-    background: #f8f9fa;
-}
-
-.contribution-row-summary {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    min-width: 0;
-}
-
-.contribution-row-summary .title {
-    font-weight: 600;
-    font-size: 0.95rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.collapse-icon {
-    color: #999;
-    font-size: 0.75rem;
-    flex-shrink: 0;
-    transition: transform 200ms ease;
-}
-
-.contribution-row.open .collapse-icon {
-    transform: rotate(180deg);
-}
-
-
-/* -----------------------------------------------------------------
-   Contribution Detail View (expanded)
-   ----------------------------------------------------------------- */
-.contribution-row-detail {
-    padding: 0 16px 16px 16px;
-    border-top: 1px solid #f0f0f0;
-    display: none;
-}
-
-.contribution-row.open .contribution-row-detail {
-    display: block;
-}
-
-.detail-layout {
-    display: flex;
-    gap: 16px;
-    margin-top: 12px;
-    margin-bottom: 12px;
-}
-
-.detail-map {
-    width: 220px;
-    height: 170px;
-    border-radius: 6px;
-    border: 1px solid #e0e0e0;
-    flex-shrink: 0;
-    background: #f0f0f0;
-}
-
-.detail-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.detail-content .description {
-    font-size: 0.85rem;
-    line-height: 1.5;
-    color: #5a5a7a;
-    margin-bottom: 10px;
-}
-
-.detail-content .description.empty {
-    color: #bbb;
-    font-style: italic;
-}
-
-.detail-meta {
-    font-size: 0.8rem;
-    color: #999;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.detail-meta span {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-
-/* -----------------------------------------------------------------
-   Action Buttons
-   ----------------------------------------------------------------- */
-.action-buttons {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    padding-top: 12px;
-    border-top: 1px solid #f0f0f0;
-}
-
-.btn {
-    padding: 7px 14px;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.82rem;
-    font-weight: 600;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    font-family: inherit;
-    transition: filter 150ms ease;
-    text-decoration: none;
-}
-
-.btn:hover { filter: brightness(1.1); }
-
-.btn-approve { background: #28a745 ; color: white; }
-.btn-reject { background: #DC3545; color: white; }
-.btn-edit { background: #ffc107; color: white; }
-.btn-delete { background: #424242; color: white; }
-.btn-map { background: #546E7A; color: white; }
-
-
-/* -----------------------------------------------------------------
-   Badges
-   ----------------------------------------------------------------- */
-.badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 0.7rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    flex-shrink: 0;
-}
-
-.badge-category {
-    background: #e0e0e0;
-    color: #5a5a7a;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.badge-pending { background: #fff3cd; color: #856404; }
-.badge-approved { background: #d4edda; color: #155724; }
-.badge-rejected { background: #f8d7da; color: #721c24; }
-
-
-/* -----------------------------------------------------------------
-   Empty State
-   ----------------------------------------------------------------- */
-.empty-state {
-    text-align: center;
-    padding: 40px;
-    color: #999;
-    font-size: 0.9rem;
-}
-
-
-/* -----------------------------------------------------------------
-   Section Spacing
-   ----------------------------------------------------------------- */
-.section { margin-bottom: 32px; }
-
-
-/* -----------------------------------------------------------------
-   Placeholder Tabs (future Features)
-   ----------------------------------------------------------------- */
-.placeholder-content {
-    text-align: center;
-    padding: 60px 20px;
-    color: #bbb;
-}
-
-.placeholder-content i {
-    font-size: 2.5rem;
-    margin-bottom: 12px;
-    display: block;
-}
-
-.placeholder-content p {
-    font-size: 0.9rem;
-}
-
-
-/* -----------------------------------------------------------------
-   Navigation Tabs (Page Sections)
-   ----------------------------------------------------------------- */
-.page-tabs {
-    display: flex;
-    gap: 4px;
-    margin-bottom: 24px;
-    background: white;
-    padding: 4px;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
-}
-
-.page-tab {
-    padding: 8px 16px;
-    border: none;
-    background: none;
-    font-family: inherit;
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #5a5a7a;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: all 150ms ease;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-
-.page-tab:hover { background: #f0f0f0; }
-
-.page-tab.active {
-    background: var(--color-primary);
-    color: white;
-}
-
-
-/* -----------------------------------------------------------------
-   Login Page
-   ----------------------------------------------------------------- */
-.login-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-}
-
-.login-box {
-    background: white;
-    border-radius: 12px;
-    padding: 32px;
-    max-width: 380px;
-    width: 90%;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    text-align: center;
-}
-
-.login-box h1 {
-    font-size: 1.3rem;
-    margin-bottom: 8px;
-}
-
-.login-box p {
-    font-size: 0.85rem;
-    color: #5a5a7a;
-    margin-bottom: 20px;
-}
-
-.login-box input[type="password"] {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    margin-bottom: 12px;
-    font-family: inherit;
-}
-
-.login-box input:focus {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(0, 55, 109, 0.1);
-}
-
-.login-box button {
-    width: 100%;
-    padding: 10px;
-    background: var(--color-primary);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    font-weight: 600;
-    cursor: pointer;
-    font-family: inherit;
-}
-
-.login-box button:hover { filter: brightness(1.15); }
-
-.login-error {
-    color: #c62828;
-    font-size: 0.85rem;
-    margin-bottom: 12px;
-}
-
-.back-link {
-    margin-top: 16px;
-    font-size: 0.8rem;
-}
-
-.back-link a { color: #5a5a7a; }
-
-
-/* -----------------------------------------------------------------
-   SweetAlert2 Font Override
-   ----------------------------------------------------------------- */
-.swal2-input,
-.swal2-textarea,
-.swal2-select {
-    font-family: 'Segoe UI', system-ui, sans-serif !important;
-}
-
-
-/* -----------------------------------------------------------------
-   Mobile Responsive
-   ----------------------------------------------------------------- */
-@media (max-width: 768px) {
-    .admin-header {
-        flex-direction: column;
-        gap: 8px;
-        padding: 12px 16px;
-    }
-
-    .admin-header h1 { font-size: 1rem; }
-
-    .detail-layout {
-        flex-direction: column;
-    }
-
-    .detail-map {
-        width: 100%;
-        height: 180px;
-    }
-
-    .contribution-row-summary .title {
-        max-width: 200px;
-    }
-
-    .action-buttons {
-        flex-direction: column;
-    }
-
-    .action-buttons .btn {
-        justify-content: center;
-    }
-
-    .filter-tabs {
-        overflow-x: auto;
-    }
-
-    .page-tabs {
-        overflow-x: auto;
-    }
-}

public/admin.php

@@ -123,7 +123,7 @@ $counts['total'] = count($all_contributions);
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css">
     
     <!-- Application Styles -->
-    <link rel="stylesheet" href="admin.css">
+    <link rel="stylesheet" href="styles.css">
 
 
     <!-- Loads JavaScript Dependencies -->
@@ -140,15 +140,17 @@ $counts['total'] = count($all_contributions);
     <!-- ============================================================= -->
     <!-- Header                                                        -->
     <!-- ============================================================= -->
-    <div class="admin-header">
+    <div class="page-header">
-        <h1><i class="fa-solid fa-shield-halved"></i> Moderationsportal <?= htmlspecialchars($municipality['name']) ?></h1>
+        <div class="page-header-inner">
-        <div class="admin-nav">
+            <h1><i class="fa-solid fa-shield-halved"></i> Moderationsportal <?= htmlspecialchars($municipality['name']) ?></h1>
-            <a href="index.php"><i class="fa-solid fa-map"></i> Bürgerportal</a>
+            <div class="page-header-nav">
-            <a href="admin.php?page=logout"><i class="fa-solid fa-right-from-bracket"></i> Abmelden</a>
+                <a href="index.php"><i class="fa-solid fa-map"></i> Bürgerportal</a>
+                <a href="admin.php?page=logout"><i class="fa-solid fa-right-from-bracket"></i> Abmelden</a>
+            </div>
         </div>
     </div>
 
-    <div class="admin-container">
+    <div class="page-container">
 
         <!-- ========================================================= -->
         <!-- Page Navigation Tabs                                      -->
@@ -295,7 +297,7 @@ $counts['total'] = count($all_contributions);
                                     <?php endif; ?>
 
                                     <?php if ($item['status'] !== 'pending'): ?>
-                                        <button class="btn btn-edit" onclick="changeStatus(<?= $item['contribution_id'] ?>, 'pending')" style="background:#f57f17;">
+                                        <button class="btn btn-reset" onclick="changeStatus(..., 'pending')">
                                             <i class="fa-solid fa-rotate-left"></i> Zurücksetzen
                                         </button>
                                     <?php endif; ?>
@@ -864,7 +866,7 @@ function show_login_page($municipality, $error = null) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Moderation - Anmeldung</title>
     <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="admin.css">
+    <link rel="stylesheet" href="styles.css">
     <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
 </head>
 <body>

public/api/contributions.php

@@ -47,13 +47,22 @@ switch ($action) {
     case 'delete_news':
         handle_delete_news($input);
         break;
+    case 'read_comments':
+        handle_read_comments($input);
+        break;
+    case 'create_comment':
+        handle_create_comment($input);
+        break;
+    case 'delete_comment':
+        handle_delete_comment($input);
+        break;
     default:
         error_response('Unknown Action. Supported Actions are read, create, update, delete, vote.');
 }
 
 
 // =====================================================================
-// Action Handlers
+// Action Handlers for Contributions
 // =====================================================================
 
 
@@ -126,6 +135,23 @@ function handle_read($input) {
         'features' => $features
     ];
 
+    // Includes User's Votes for persistent Vote Display
+    // Returns which Contributions the current Browser has voted on
+    $browser_id = $input['browser_id'] ?? '';
+    if ($browser_id !== '') {
+        $stmt = $pdo->prepare("
+            SELECT contribution_id, vote_type 
+            FROM votes 
+            WHERE browser_id = :bid
+        ");
+        $stmt->execute([':bid' => $browser_id]);
+        $user_votes = [];
+        foreach ($stmt->fetchAll() as $v) {
+            $user_votes[$v['contribution_id']] = $v['vote_type'];
+        }
+        $featureCollection['user_votes'] = $user_votes;
+    }
+
     json_response($featureCollection);
 }
 
@@ -135,6 +161,11 @@ function handle_read($input) {
 // Required: municipality_id, geom, geom_type, category, title, author_name
 // Optional: description
 // ---------------------------------------------------------------------
+// ---------------------------------------------------------------------
+// CREATE: Inserts new Contributions with optional Photo Upload
+// Required: municipality_id, geom, geom_type, category, title, author_name
+// Optional: description, browser_id, photo (File Upload)
+// ---------------------------------------------------------------------
 function handle_create($input) {
     $pdo = get_db();
 
@@ -158,14 +189,23 @@ function handle_create($input) {
         error_response('Invalid GeoJSON in Geometry Field.');
     }
 
+    // Handles Photo Upload
+    $photo_path = null;
+    if (isset($_FILES['photo']) && $_FILES['photo']['error'] === UPLOAD_ERR_OK) {
+        $photo_path = handle_photo_upload($_FILES['photo']);
+        if (!$photo_path) {
+            error_response('Photo Upload failed. JPG, PNG, GIF and WebP up to 5 MB are allowed.');
+        }
+    }
+
     // Prepared SQL Statement
     try {
         $stmt = $pdo->prepare("
             INSERT INTO contributions 
-                (municipality_id, geom, geom_type, category, title, description, author_name)
+                (municipality_id, geom, geom_type, category, title, description, author_name, browser_id, photo_path)
             VALUES 
                 (:mid, ST_SetSRID(ST_GeomFromGeoJSON(:geom), 4326), :geom_type, 
-                 :category, :title, :description, :author_name)
+                 :category, :title, :description, :author_name, :browser_id, :photo_path)
         ");
 
         $stmt->execute([
@@ -175,7 +215,9 @@ function handle_create($input) {
             ':category'    => $input['category'],
             ':title'       => $input['title'],
             ':description' => $input['description'] ?? '',
-            ':author_name' => $input['author_name']
+            ':author_name' => $input['author_name'],
+            ':browser_id'  => $input['browser_id'] ?? null,
+            ':photo_path'  => $photo_path
         ]);
 
         json_response([
@@ -320,11 +362,16 @@ function handle_vote($input) {
     // Prepared SQL Statement
     try {
         // Checks if Voter already voted on this Contribution
+        $browser_id = $input['browser_id'] ?? '';
+        if (empty($browser_id)) {
+            error_response('Browser ID required for Voting.');
+        }
+
         $stmt = $pdo->prepare("
             SELECT vote_id, vote_type FROM votes
-            WHERE contribution_id = :cid AND voter_name = :voter
+            WHERE contribution_id = :cid AND browser_id = :bid
         ");
-        $stmt->execute([':cid' => $input['contribution_id'], ':voter' => $input['voter_name']]);
+        $stmt->execute([':cid' => $input['contribution_id'], ':bid' => $browser_id]);
         $existing = $stmt->fetch();
 
         if ($existing) {
@@ -339,27 +386,29 @@ function handle_vote($input) {
                 $stmt->execute([':vid' => $existing['vote_id']]);
 
                 $stmt = $pdo->prepare("
-                    INSERT INTO votes (contribution_id, voter_name, vote_type)
+                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
-                    VALUES (:cid, :voter, :vtype)
+                    VALUES (:cid, :voter, :vtype, :bid)
                 ");
                 $stmt->execute([
                     ':cid'   => $input['contribution_id'],
                     ':voter' => $input['voter_name'],
-                    ':vtype' => $input['vote_type']
+                    ':vtype' => $input['vote_type'],
+                    ':bid'   => $browser_id
                 ]);
                 json_response(['message' => 'Vote changed.', 'action' => 'changed'], 200);
             }
         } else {
             // No existing Vote — Inserts Vote
             $stmt = $pdo->prepare("
-                INSERT INTO votes (contribution_id, voter_name, vote_type)
+                    INSERT INTO votes (contribution_id, voter_name, vote_type, browser_id)
-                VALUES (:cid, :voter, :vtype)
+                    VALUES (:cid, :voter, :vtype, :bid)
-            ");
+                ");
-            $stmt->execute([
+                $stmt->execute([
-                ':cid'   => $input['contribution_id'],
+                    ':cid'   => $input['contribution_id'],
-                ':voter' => $input['voter_name'],
+                    ':voter' => $input['voter_name'],
-                ':vtype' => $input['vote_type']
+                    ':vtype' => $input['vote_type'],
-            ]);
+                    ':bid'   => $browser_id
+                ]);
             json_response(['message' => 'Vote recorded.', 'action' => 'created'], 201);
         }
 
@@ -369,6 +418,10 @@ function handle_vote($input) {
 }
 
 
+// =====================================================================
+// Action Handlers for News
+// =====================================================================
+
 // ---------------------------------------------------------------------
 // CREATE NEWS: Inserts new News Entry
 // Required: municipality_id, title, content
@@ -451,3 +504,177 @@ function handle_delete_news($input) {
         error_response('Database Error: ' . $e->getMessage(), 500);
     }
 }
+
+
+// =====================================================================
+// Action Handlers for Photos
+// =====================================================================
+
+// ---------------------------------------------------------------------
+// PHOTO UPLOAD: Validates and Saves uploaded Photo Files
+// Returns relative Path on Success, null on Failure.
+// Allowed: JPG, PNG, GIF, WebP. with maximum Size of 5 MB.
+// ---------------------------------------------------------------------
+function handle_photo_upload($file) {
+    // Validates File Size
+    $max_size = 5 * 1024 * 1024;
+    if ($file['size'] > $max_size) {
+        return null;
+    }
+
+    // Validates MIME Type
+    $allowed_types = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+    $finfo = finfo_open(FILEINFO_MIME_TYPE);
+    $mime = finfo_file($finfo, $file['tmp_name']);
+    finfo_close($finfo);
+
+    if (!in_array($mime, $allowed_types)) {
+        return null;
+    }
+
+    // Generates unique Filename
+    $ext = [
+        'image/jpeg' => 'jpg',
+        'image/png'  => 'png',
+        'image/gif'  => 'gif',
+        'image/webp' => 'webp'
+    ][$mime];
+
+    $filename = uniqid('photo_', true) . '.' . $ext;
+    $upload_dir = __DIR__ . '/../uploads/photos/';
+    $target_path = $upload_dir . $filename;
+
+    // Creates Upload Directory
+    if (!is_dir($upload_dir)) {
+        mkdir($upload_dir, 0755, true);
+    }
+
+    // Moves uploaded File
+    if (move_uploaded_file($file['tmp_name'], $target_path)) {
+        return 'uploads/photos/' . $filename;
+    }
+
+    return null;
+}
+
+// =====================================================================
+// Action Handlers for Comments
+// =====================================================================
+
+// ---------------------------------------------------------------------
+// READ COMMENTS: Loads Comments for a Contribution
+// Returns Comments sorted by Date (newest first)
+// Required: contribution_id
+// ---------------------------------------------------------------------
+function handle_read_comments($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['contribution_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            SELECT comment_id, contribution_id, author_name, browser_id, content, created_at
+            FROM comments
+            WHERE contribution_id = :cid
+            ORDER BY created_at ASC
+        ");
+        $stmt->execute([':cid' => $input['contribution_id']]);
+        $comments = $stmt->fetchAll();
+
+        json_response(['comments' => $comments, 'count' => count($comments)]);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// CREATE COMMENT: Adds Comments to Contributions
+// Required: contribution_id, author_name, content
+// Optional: browser_id
+// ---------------------------------------------------------------------
+function handle_create_comment($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['contribution_id', 'author_name', 'content']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    // Validates Content Length
+    if (strlen($input['content']) > 1000) {
+        error_response('Comment too long. Maximum 1000 Characters.');
+    }
+
+    // Checks if Contribution exists
+    $stmt = $pdo->prepare("SELECT contribution_id FROM contributions WHERE contribution_id = :id");
+    $stmt->execute([':id' => $input['contribution_id']]);
+    if (!$stmt->fetch()) {
+        error_response('Contribution not found.', 404);
+    }
+
+    try {
+        $stmt = $pdo->prepare("
+            INSERT INTO comments (contribution_id, author_name, browser_id, content)
+            VALUES (:cid, :author, :bid, :content)
+        ");
+        $stmt->execute([
+            ':cid'     => $input['contribution_id'],
+            ':author'  => $input['author_name'],
+            ':bid'     => $input['browser_id'] ?? null,
+            ':content' => $input['content']
+        ]);
+
+        $stmt2 = $pdo->prepare("
+            UPDATE contributions
+            SET comment_count = comment_count + 1 
+            WHERE contribution_id = :cid;
+        ");
+
+        $stmt2->execute([':cid' => $input['contribution_id']]);
+
+        json_response([
+            'message'    => 'Comment created successfully.',
+            'comment_id' => (int) $pdo->lastInsertId()
+        ], 201);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}
+
+
+// ---------------------------------------------------------------------
+// DELETE COMMENT: Removes a Comment
+// Required: comment_id
+// ---------------------------------------------------------------------
+function handle_delete_comment($input) {
+    $pdo = get_db();
+
+    $missing = validate_required($input, ['comment_id']);
+    if (!empty($missing)) {
+        error_response('Missing Fields: ' . implode(', ', $missing));
+    }
+
+    try {
+        $stmt = $pdo->prepare("DELETE FROM comments WHERE comment_id = :id");
+        $stmt->execute([':id' => $input['comment_id']]);
+
+       $stmt2 = $pdo->prepare("
+            UPDATE contributions
+            SET comment_count = comment_count - 1 
+            WHERE contribution_id = :cid;
+        ");
+
+        $stmt2->execute([':cid' => $input['contribution_id']]);
+
+        json_response(['message' => 'Comment deleted successfully.']);
+
+    } catch (PDOException $e) {
+        error_response('Database Error: ' . $e->getMessage(), 500);
+    }
+}

public/imprint.php

@@ -1,12 +1,8 @@
 <?php
-// =====================================================================
-// Imprint Page
-// =====================================================================
 require_once __DIR__ . '/api/db.php';
-
 $pdo = get_db();
 $stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
-$stmt->execute([':slug' => 'lohne']);
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
 $municipality = $stmt->fetch();
 ?>
 <!DOCTYPE html>
@@ -15,41 +11,29 @@ $municipality = $stmt->fetch();
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Impressum — <?= htmlspecialchars($municipality['name']) ?></title>
-    <link rel="icon" href="assets/icon-municipality.png" type="image/png">
+    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <style>
+    <link rel="stylesheet" href="styles.css">
-        :root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }
+    <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f5f7; color: #1a1a2e; }
-        .page-header { background: var(--color-primary); color: white; padding: 16px 24px; }
-        .page-header h1 { font-size: 1.2rem; }
-        .page-header a { color: white; opacity: 0.8; text-decoration: none; font-size: 0.85rem; }
-        .page-header a:hover { opacity: 1; }
-        .page-header-inner { max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
-        .page-content { max-width: 800px; margin: 32px auto; padding: 32px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; line-height: 1.7; }
-        .page-content h2 { font-size: 1.1rem; margin: 24px 0 8px 0; color: var(--color-primary); }
-        .page-content h2:first-child { margin-top: 0; }
-        .page-content p { margin-bottom: 12px; color: #5a5a7a; }
-        @media (max-width: 768px) { .page-content { margin: 16px; padding: 20px; } }
-    </style>
 </head>
 <body>
     <div class="page-header">
         <div class="page-header-inner">
             <h1><i class="fa-solid fa-scale-balanced"></i> Impressum</h1>
-            <a href="index.php"><i class="fa-solid fa-arrow-left"></i> Zurück zur Karte</a>
+            <div class="page-header-nav">
+                <a href="index.php"><i class="fa-solid fa-arrow-left"></i> Zurück zur Karte</a>
+            </div>
         </div>
     </div>
-    <div class="page-content">
+    <div class="page-container">
-        <h2>Angaben gemäß § 5 TMG</h2>
+        <div class="page-content-box">
-        <p>Stadt <?= htmlspecialchars($municipality['name']) ?></p>
+            <div class="dev-notice">
-        <p>Die vollständigen Angaben (Adresse, Telefon, E-Mail, Vertretungsberechtigte) werden hier ergänzt, sobald das Portal in den Produktivbetrieb geht.</p>
+                <i class="fa-solid fa-triangle-exclamation"></i>
-
+                Dieses Portal befindet sich in der Entwicklung und wurde nicht offiziell beauftragt. Das Impressum wird mit der offiziellen Inbetriebnahme hier hinzugefügt.
-        <h2>Technische Umsetzung</h2>
+            </div>
-        <p><a href="https://endex-geodaten.de" target="_blank" style="color:var(--color-primary);">endex GmbH</a></p>
+            <h2>Impressum</h2>
-
+            <p>Das Impressum wird hier hinzugefügt, sobald das Portal in den Produktivbetrieb geht.</p>
-        <h2>Haftungsausschluss</h2>
+        </div>
-        <p>Die Inhalte der Bürgerbeiträge geben die Meinung der jeweiligen Verfasser wieder. Die Stadt <?= htmlspecialchars($municipality['name']) ?> übernimmt keine Gewähr für deren Richtigkeit.</p>
     </div>
 </body>
 </html>

public/index.php

@@ -5,18 +5,8 @@
 // Renders Leaflet Map Interface including Leaflet Plugins
 // =====================================================================
 
-// Reads Environment Configfile
-$envFile = __DIR__ . '/../../.env';
-if (file_exists($envFile)) {
-    $lines = file($envFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
-    foreach ($lines as $line) {
-        if (strpos(trim($line), '#') === 0) continue;
-        list($key, $value) = array_map('trim', explode('=', $line, 2));
-        putenv("$key=$value");
-    }
-}
-
 require_once __DIR__ . '/api/db.php';
+require_once __DIR__ . '/api/auth.php';
 
 // -----------------------------------------------------------------
 // Loads Municipality Configuration
@@ -89,7 +79,7 @@ $news_items = $stmt->fetchAll();
     </style>
 </head>
 
-<body>
+<body class="portal-page">
 
     <!-- ============================================================= -->
     <!-- Header                                                        -->
@@ -122,6 +112,8 @@ $news_items = $stmt->fetchAll();
 
         <!-- Mobile Hamburger Menu -->
         <button class="header-menu-toggle" onclick="toggleMobileNav()">
+            <i class="fa-solid fa-bars"></i>
+        </button>
     </header>
 
 
@@ -212,20 +204,31 @@ $news_items = $stmt->fetchAll();
                         <span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
                     </h2>
                     <div class="sidebar-body">
-                        <?php if (empty($news_items)): ?>
+                        <!-- News Search -->
-                            <p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
+                        <div class="list-search">
-                        <?php else: ?>
+                            <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
-                            <?php foreach ($news_items as $news): ?>
+                        </div>
-                                <div class="news-item">
+
-                                    <h3><?= htmlspecialchars($news['title']) ?></h3>
+                        <!-- News Items Container -->
-                                    <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
+                        <div id="news-list">
-                                    <span class="news-date">
+                            <?php if (empty($news_items)): ?>
-                                        <?= htmlspecialchars($news['author_name']) ?>
+                                <p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
-                                        · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                            <?php else: ?>
-                                    </span>
+                                <?php foreach ($news_items as $news): ?>
-                                </div>
+                                    <div class="news-item"
-                            <?php endforeach; ?>
+                                         data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
-                        <?php endif; ?>
+                                         data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                         data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
+                                        <h3><?= htmlspecialchars($news['title']) ?></h3>
+                                        <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
+                                        <span class="news-date">
+                                            <?= htmlspecialchars($news['author_name']) ?>
+                                            · <?= date('d.m.Y', strtotime($news['published_at'])) ?>
+                                        </span>
+                                    </div>
+                                <?php endforeach; ?>
+                            <?php endif; ?>
+                        </div>
                     </div>
                 </div>
 
@@ -318,6 +321,15 @@ $news_items = $stmt->fetchAll();
                 <textarea id="create-description" class="form-input" rows="4" placeholder="Detaillierte Beschreibung (optional)"></textarea>
             </div>
 
+            <!-- Photo Upload -->
+            <div class="form-group">
+                <label for="create-photo"></i> Foto</label>
+                <input type="file" id="create-photo" class="form-input" accept="image/jpeg,image/png,image/gif,image/webp">
+                <div id="photo-preview" style="margin-top:8px;display:none;">
+                    <img id="photo-preview-img" style="max-width:100%;max-height:200px;border-radius:6px;border:1px solid var(--color-border);">
+                </div>
+            </div>
+
             <input type="hidden" id="create-geom">
             <input type="hidden" id="create-geom-type">
 
@@ -370,6 +382,9 @@ $news_items = $stmt->fetchAll();
 
         // Category Definitions from Database
         const CATEGORIES = <?= json_encode(get_categories(), JSON_UNESCAPED_UNICODE) ?>;
+
+        // Admin Status from PHP Session
+        const IS_ADMIN = <?= (function_exists('is_admin') && is_admin()) ? 'true' : 'false' ?>;
     </script>
 
     <!-- Application Logic -->

public/js/app.js

@@ -16,9 +16,26 @@
 // API Endpoint as relative Path
 const API_URL = 'api/contributions.php';
 
-// Current User Name, set via Login Modal, stored in sessionStorage
+// Username set via Login Modal stored in sessionStorage
 let currentUser = sessionStorage.getItem('webgis_user') || '';
 
+// Browser Identification Number for anonymous User Identification stored as Cookie
+let browserId = getBrowserId();
+
+function getBrowserId() {
+    let id = document.cookie.replace(/(?:(?:^|.*;\s*)webgis_browser_id\s*=\s*([^;]*).*$)|^.*$/, '$1');
+    if (!id) {
+        id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            const r = Math.random() * 16 | 0;
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+        // Cookie Expiration in one Year
+        document.cookie = 'webgis_browser_id=' + id + ';path=/;max-age=31536000;SameSite=Lax';
+    }
+    return id;
+}
+
+
 // Application State
 let map;                                      // Leaflet Map Instance
 let sidebar;                                  // Sidebar Instance
@@ -290,9 +307,15 @@ function apiCall(data, callback) {
         });
 }
 
+
 // Loads all Contributions from API and displays Contributions on Map
 function loadContributions() {
-    apiCall({ action: 'read', municipality_id: MUNICIPALITY.id }, function (data) {
+    const readParams = { action: 'read', municipality_id: MUNICIPALITY.id };
+
+    // Sends Browser ID for persistent Vote Display
+    readParams.browser_id = browserId;
+
+    apiCall(readParams, function (data) {
         if (data.error) {
             console.error('Load Error:', data.error);
             return;
@@ -300,6 +323,14 @@ function loadContributions() {
 
         contributionsData = data.features || [];
 
+        // Restores Vote Highlights from API Response
+        if (data.user_votes) {
+            userVotes = {};
+            for (const key in data.user_votes) {
+                userVotes[key] = data.user_votes[key];
+            }
+        }
+
         // Removes existing Layer if present
         if (contributionsLayer) {
             map.removeLayer(contributionsLayer);
@@ -357,6 +388,7 @@ function styleLinePolygon(feature) {
 // Block 9: Feature Popups for Read, Edit, Delete and Vote
 // =====================================================================
 
+// Builds Popup HTML for Features called every Time the Popup opens
 function buildPopupHtml(feature) {
     const props = feature.properties;
     const cat = CATEGORIES[props.category] || CATEGORIES.other;
@@ -367,38 +399,86 @@ function buildPopupHtml(feature) {
         day: '2-digit', month: '2-digit', year: 'numeric'
     });
 
-    return '' +
+    let html = '' +
         '<div class="popup-detail">' +
             '<span class="popup-detail-category">' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
             '<div class="popup-detail-title">' + escapeHtml(props.title) + '</div>' +
-            (props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '') +
+            (props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '');
-            '<div class="popup-detail-meta">' +
+
+    // Photo Toggle Button including hidden Photo
+    if (props.photo_path) {
+        html += '<div class="popup-photo-container" id="photo-container-' + props.contribution_id + '" style="display:none;">' +
+                    '<img src="' + escapeHtml(props.photo_path) + '" alt="Foto" class="popup-photo-img" onclick="window.open(\'' + escapeHtml(props.photo_path) + '\', \'_blank\')">' +
+                '</div>' +
+                '<div class="popup-photo-toggle">' +
+                    '<button class="popup-photo-btn" onclick="togglePhoto(' + props.contribution_id + ')">' +
+                        '<i class="fa-solid fa-camera"></i> <span id="photo-label-' + props.contribution_id + '">Foto anzeigen</span>' +
+                    '</button>' +
+                '</div>';
+    }
+
+    // Meta Information
+    html += '<div class="popup-detail-meta">' +
                 '<i class="fa-solid fa-user"></i> ' + escapeHtml(props.author_name) +
                 ' &middot; <i class="fa-solid fa-calendar"></i> ' + dateStr +
-            '</div>' +
+            '</div>';
-            '<div class="popup-detail-votes">' +
+
+    // Vote Buttons
+    html += '<div class="popup-detail-votes">' +
                 '<button class="popup-vote-btn' + (userVotes[props.contribution_id] === 'like' ? ' liked' : '') + '" id="vote-like-' + props.contribution_id + '" onclick="voteContribution(' + props.contribution_id + ', \'like\')" title="Gefällt mir">' +
                     '<i class="fa-solid fa-thumbs-up"></i> <span id="likes-' + props.contribution_id + '">' + props.likes_count + '</span>' +
                 '</button>' +
                 '<button class="popup-vote-btn' + (userVotes[props.contribution_id] === 'dislike' ? ' disliked' : '') + '" id="vote-dislike-' + props.contribution_id + '" onclick="voteContribution(' + props.contribution_id + ', \'dislike\')" title="Gefällt mir nicht">' +
                     '<i class="fa-solid fa-thumbs-down"></i> <span id="dislikes-' + props.contribution_id + '">' + props.dislikes_count + '</span>' +
                 '</button>' +
-            '</div>' +
+            '</div>';
-            (currentUser === props.author_name ?
+
-                '<div class="popup-detail-actions">' +
+    // Edit and Delete Buttons for Author or Admin
+    if (props.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN)) {
+        html += '<div class="popup-detail-actions">' +
                     '<button class="btn btn-primary" onclick="editContribution(' + props.contribution_id + ')"><i class="fa-solid fa-pen"></i> Bearbeiten</button>' +
                     '<button class="btn btn-danger" onclick="deleteContribution(' + props.contribution_id + ')"><i class="fa-solid fa-trash"></i> Löschen</button>' +
-                '</div>' : '') +
+                '</div>';
-        '</div>';
+    }
+
+    // Collapsible Comments Section 
+    const commentCount = props.comment_count || 0;
+    html += '<div class="popup-comments">' +
+                '<div class="popup-comments-header" onclick="toggleComments(' + props.contribution_id + ')">' +
+                    '<i class="fa-solid fa-comments"></i> Kommentare (' + commentCount + ')' +
+                    ' <i class="fa-solid fa-chevron-down popup-comments-toggle" id="comments-toggle-' + props.contribution_id + '"></i>' +
+                '</div>' +
+                '<div id="comments-section-' + props.contribution_id + '" style="display:none;">' +
+                    '<div id="comments-list-' + props.contribution_id + '" class="popup-comments-list"></div>';
+
+    // Comment Input for logged-in Users
+    if (currentUser) {
+        html += '<div class="popup-comment-form">' +
+                    '<input type="text" id="comment-input-' + props.contribution_id + '" class="popup-comment-input" placeholder="Kommentar schreiben..." maxlength="1000">' +
+                    '<button class="popup-comment-submit" onclick="submitComment(' + props.contribution_id + ')" title="Senden">' +
+                        '<i class="fa-solid fa-paper-plane"></i>' +
+                    '</button>' +
+                '</div>';
+    }
+
+    html += '</div></div></div>';
+
+    return html;
 }
 
+
 // Binds Popup and Tooltip to Feature Layer
 function bindFeaturePopup(feature, layer) {
     const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other;
 
-    // Rebuilts if Popup opens
+    // Dynamic Popup — rebuilt every Time the Popup opens
     layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 });
 
+    // Loads Comments when Popup opens
+    layer.on('popupopen', function () {
+        loadComments(feature.properties.contribution_id);
+    });
+
     // Tooltip on Hover
     layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(feature.properties.title), {
         direction: 'top',
@@ -418,8 +498,9 @@ function submitCreate() {
     const description = document.getElementById('create-description').value.trim();
     const geom = document.getElementById('create-geom').value;
     const geomType = document.getElementById('create-geom-type').value;
+    const photoInput = document.getElementById('create-photo');
 
-    // Validates
+    // Validates required Fields
     if (!category) {
         Swal.fire('Kategorie fehlt', 'Bitte wählen Sie eine Kategorie aus.', 'warning');
         return;
@@ -433,33 +514,48 @@ function submitCreate() {
         return;
     }
 
-    apiCall({
+    // Builds FormData manually to include Photo File
-        action: 'create',
+    const formData = new FormData();
-        municipality_id: MUNICIPALITY.id,
+    formData.append('action', 'create');
-        category: category,
+    formData.append('municipality_id', MUNICIPALITY.id);
-        title: title,
+    formData.append('category', category);
-        description: description,
+    formData.append('title', title);
-        geom: geom,
+    formData.append('description', description);
-        geom_type: geomType,
+    formData.append('geom', geom);
-        author_name: currentUser
+    formData.append('geom_type', geomType);
-    }, function (response) {
+    formData.append('author_name', currentUser);
-        if (response.error) {
+    formData.append('browser_id', browserId);
-            Swal.fire('Fehler', response.error, 'error');
-            return;
-        }
 
-    // Triggers Reverse Geocoding in Background
+    // Appends Photo File if selected
-        if (response.contribution_id && drawnGeometry) {
+    if (photoInput.files.length > 0) {
-            const coords = drawnGeomType === 'point' ? drawnGeometry.coordinates :
+        formData.append('photo', photoInput.files[0]);
-                           drawnGeomType === 'line' ? drawnGeometry.coordinates[0] :
+    }
-                           drawnGeometry.coordinates[0][0];
-            reverseGeocode(response.contribution_id, coords[1], coords[0]);
-        }
 
-        Swal.fire('Eingereicht!', 'Ihr Beitrag wurde erfolgreich eingereicht und wird nach Prüfung durch das Moderationsteam veröffentlicht.', 'success');
+    // Sends directly via fetch not through apiCall, because of File Upload
-        closeCreateModal();
+    fetch(API_URL, { method: 'POST', body: formData })
-        loadContributions();
+        .then(function (response) { return response.json(); })
-    });
+        .then(function (response) {
+            if (response.error) {
+                Swal.fire('Fehler', response.error, 'error');
+                return;
+            }
+
+            // Triggers Reverse Geocoding in Background
+            if (response.contribution_id && drawnGeometry) {
+                const coords = drawnGeomType === 'point' ? drawnGeometry.coordinates :
+                               drawnGeomType === 'line' ? drawnGeometry.coordinates[0] :
+                               drawnGeometry.coordinates[0][0];
+                reverseGeocode(response.contribution_id, coords[1], coords[0]);
+            }
+
+            Swal.fire('Eingereicht!', 'Ihr Beitrag wurde erfolgreich eingereicht und wird nach Prüfung durch das Moderationsteam veröffentlicht.', 'success');
+            closeCreateModal();
+            loadContributions();
+        })
+        .catch(function (error) {
+            console.error('Upload Error:', error);
+            Swal.fire('Verbindungsfehler', 'Verbindung zum Server fehlgeschlagen.', 'error');
+        });
 }
 
 // Cancels Create, closes Modal and clears Form
@@ -474,6 +570,9 @@ function closeCreateModal() {
     document.getElementById('create-description').value = '';
     document.getElementById('create-geom').value = '';
     document.getElementById('create-geom-type').value = '';
+    // Resets Photo Upload
+    document.getElementById('create-photo').value = '';
+    document.getElementById('photo-preview').style.display = 'none';
     drawnGeometry = null;
     drawnGeomType = null;
 }
@@ -570,7 +669,8 @@ function voteContribution(contributionId, voteType) {
         action: 'vote',
         contribution_id: contributionId,
         voter_name: currentUser,
-        vote_type: voteType
+        vote_type: voteType,
+        browser_id: browserId
     }, function (response) {
         if (response.error) {
             return;
@@ -685,6 +785,7 @@ function updateContributionsList() {
                     '<span class="contribution-card-votes">' +
                         '<span title="Likes"><i class="fa-solid fa-thumbs-up"></i> ' + props.likes_count + '</span>' +
                         '<span title="Dislikes"><i class="fa-solid fa-thumbs-down"></i> ' + props.dislikes_count + '</span>' +
+                        '<span title="Kommentare"><i class="fa-solid fa-comment"></i> ' + (props.comment_count || 0) + '</span>' +
                     '</span>' +
                 '</div>' +
             '</div>';
@@ -950,6 +1051,141 @@ function reverseGeocode(contributionId, lat, lng) {
     .catch(function () {});
 }
 
+// Filters News Items in Sidebar by Search Term
+function filterNews() {
+    const searchTerm = document.getElementById('news-search-input').value.toLowerCase();
+    const newsItems = document.querySelectorAll('#news-list .news-item');
+
+    newsItems.forEach(function (item) {
+        const title = item.dataset.title || '';
+        const content = item.dataset.content || '';
+        const author = item.dataset.author || '';
+
+        // Shows Item if Search Term matches Title, Content or Author
+        if (!searchTerm || title.indexOf(searchTerm) !== -1 || content.indexOf(searchTerm) !== -1 || author.indexOf(searchTerm) !== -1) {
+            item.style.display = '';
+        } else {
+            item.style.display = 'none';
+        }
+    });
+}
+
+// Loads and Displays Comments forContributions in Popups
+function loadComments(contributionId) {
+    apiCall({
+        action: 'read_comments',
+        contribution_id: contributionId
+    }, function (response) {
+        const listContainer = document.getElementById('comments-list-' + contributionId);
+        const countSpan = document.getElementById('comment-count-' + contributionId);
+
+        if (!listContainer) return;
+
+        if (response.error || !response.comments || response.comments.length === 0) {
+            listContainer.innerHTML = '<div class="popup-comment-empty">Noch keine Kommentare.</div>';
+            if (countSpan) countSpan.textContent = '(0)';
+            return;
+        }
+
+        if (countSpan) countSpan.textContent = '(' + response.count + ')';
+
+        let html = '';
+        response.comments.forEach(function (comment) {
+            const commentDate = new Date(comment.created_at).toLocaleDateString('de-DE');
+            const canDelete = comment.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN);
+
+            html += '<div class="popup-comment">' +
+                        '<div class="popup-comment-meta">' +
+                            '<strong>' + escapeHtml(comment.author_name) + '</strong>' +
+                            ' · ' + commentDate +
+                            (canDelete ? ' · <a href="#" onclick="deleteComment(' + comment.comment_id + ', ' + contributionId + ');return false;" class="popup-comment-delete"><i class="fa-solid fa-trash"></i></a>' : '') +
+                        '</div>' +
+                        '<div class="popup-comment-text">' + escapeHtml(comment.content) + '</div>' +
+                    '</div>';
+        });
+
+        listContainer.innerHTML = html;
+
+        const count = response.comments.length;
+        const header = document.querySelector('#comments-toggle-' + contributionId)?.closest('.popup-comments-header');
+        if (header) {
+            header.innerHTML = '<i class="fa-solid fa-comments"></i> Kommentare (' + count + ')' +
+            ' <i class="fa-solid fa-chevron-down popup-comments-toggle" id="comments-toggle-' + contributionId + '"></i>';
+        }
+
+    });
+}
+
+// Submits a new Comment on a Contribution
+function submitComment(contributionId) {
+    const input = document.getElementById('comment-input-' + contributionId);
+    const content = input ? input.value.trim() : '';
+
+    if (!content) return;
+
+    apiCall({
+        action: 'create_comment',
+        contribution_id: contributionId,
+        author_name: currentUser,
+        browser_id: browserId,
+        content: content
+    }, function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        // Clears Input and reloads Comments
+        if (input) input.value = '';
+        loadComments(contributionId);
+    });
+}
+
+// Deletes a Comment
+function deleteComment(commentId, contributionId) {
+    apiCall({
+        action: 'delete_comment',
+        comment_id: commentId
+    }, function (response) {
+        if (response.error) return;
+        // Reloads Comments after Deletion
+        loadComments(contributionId);
+    });
+}
+
+// Toggles Photo Visibility in Popup
+function togglePhoto(contributionId) {
+    const container = document.getElementById('photo-container-' + contributionId);
+    const label = document.getElementById('photo-label-' + contributionId);
+    if (!container) return;
+
+    if (container.style.display === 'none') {
+        container.style.display = 'block';
+        label.textContent = 'Foto verbergen';
+    } else {
+        container.style.display = 'none';
+        label.textContent = 'Foto anzeigen';
+    }
+}
+
+// Toggles Comments Section Visibility in Popup
+function toggleComments(contributionId) {
+    const section = document.getElementById('comments-section-' + contributionId);
+    const toggle = document.getElementById('comments-toggle-' + contributionId);
+    if (!section) return;
+
+    if (section.style.display === 'none') {
+        section.style.display = 'block';
+        toggle.classList.remove('fa-chevron-down');
+        toggle.classList.add('fa-chevron-up');
+        // Loads Comments
+        loadComments(contributionId);
+    } else {
+        section.style.display = 'none';
+        toggle.classList.remove('fa-chevron-up');
+        toggle.classList.add('fa-chevron-down');
+    }
+}
+
 
 // =====================================================================
 // Block 16: Application Startup
@@ -968,6 +1204,7 @@ function buildCategoryDropdown() {
     }
 }
 
+
 // Populates Category Dropdown
 buildCategoryDropdown();
 
@@ -979,3 +1216,21 @@ loadContributions();
 
 // Shows Welcome Modal on first Visit
 checkWelcomeModal();
+
+
+// Photo Preview in Create Modal
+document.getElementById('create-photo').addEventListener('change', function () {
+    const preview = document.getElementById('photo-preview');
+    const previewImg = document.getElementById('photo-preview-img');
+
+    if (this.files && this.files[0]) {
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            previewImg.src = e.target.result;
+            preview.style.display = 'block';
+        };
+        reader.readAsDataURL(this.files[0]);
+    } else {
+        preview.style.display = 'none';
+    }
+});

public/privacy.php

@@ -1,12 +1,8 @@
 <?php
-// =====================================================================
-// Privacy Policy Page
-// =====================================================================
 require_once __DIR__ . '/api/db.php';
-
 $pdo = get_db();
 $stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
-$stmt->execute([':slug' => 'lohne']);
+$stmt->execute([':slug' => getenv('MUNICIPALITY_SLUG')]);
 $municipality = $stmt->fetch();
 ?>
 <!DOCTYPE html>
@@ -15,50 +11,29 @@ $municipality = $stmt->fetch();
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Datenschutz — <?= htmlspecialchars($municipality['name']) ?></title>
-    <link rel="icon" href="assets/icon-municipality.png" type="image/png">
+    <link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <style>
+    <link rel="stylesheet" href="styles.css">
-        :root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }
+    <style>:root { --color-primary: <?= htmlspecialchars($municipality['primary_color']) ?>; }</style>
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f5f7; color: #1a1a2e; }
-        .page-header { background: var(--color-primary); color: white; padding: 16px 24px; }
-        .page-header h1 { font-size: 1.2rem; }
-        .page-header a { color: white; opacity: 0.8; text-decoration: none; font-size: 0.85rem; }
-        .page-header a:hover { opacity: 1; }
-        .page-header-inner { max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
-        .page-content { max-width: 800px; margin: 32px auto; padding: 32px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; line-height: 1.7; }
-        .page-content h2 { font-size: 1.1rem; margin: 24px 0 8px 0; color: var(--color-primary); }
-        .page-content h2:first-child { margin-top: 0; }
-        .page-content p { margin-bottom: 12px; color: #5a5a7a; }
-        @media (max-width: 768px) { .page-content { margin: 16px; padding: 20px; } }
-    </style>
 </head>
 <body>
     <div class="page-header">
         <div class="page-header-inner">
-            <h1><i class="fa-solid fa-shield-halved"></i> Datenschutzerklärung</h1>
+            <h1><i class="fa-solid fa-lock"></i> Datenschutz</h1>
-            <a href="index.php"><i class="fa-solid fa-arrow-left"></i> Zurück zur Karte</a>
+            <div class="page-header-nav">
+                <a href="index.php"><i class="fa-solid fa-arrow-left"></i> Zurück zur Karte</a>
+            </div>
         </div>
     </div>
-    <div class="page-content">
+    <div class="page-container">
-        <h2>Verantwortliche Stelle</h2>
+        <div class="page-content-box">
-        <p>Stadt <?= htmlspecialchars($municipality['name']) ?></p>
+            <div class="dev-notice">
-        <p>Die vollständigen Kontaktdaten werden hier ergänzt, sobald das Portal in den Produktivbetrieb geht.</p>
+                <i class="fa-solid fa-triangle-exclamation"></i>
-
+                Dieses Portal befindet sich in der Entwicklung und wurde nicht offiziell beauftragt. Die Datenschutzerklärung wird mit der offiziellen Inbetriebnahme hier hinzugefügt.
-        <h2>Erhobene Daten</h2>
+            </div>
-        <p>Das Bürgerbeteiligungsportal speichert die von Ihnen eingegebenen Beiträge (Titel, Beschreibung, Geometrie, Name) sowie Ihre Abstimmungen zur Durchführung der Bürgerbeteiligung.</p>
+            <h2>Datenschutz</h2>
-
+            <p>Die Datenschutzerklärung wird hier hinzugefügt, sobald das Portal in den Produktivbetrieb geht.</p>
-        <h2>Zweck der Verarbeitung</h2>
+        </div>
-        <p>Die Daten werden ausschließlich zur Durchführung und Auswertung der Bürgerbeteiligung verwendet.</p>
-
-        <h2>Weitergabe an Dritte</h2>
-        <p>Ihre Daten werden nicht an Dritte weitergegeben.</p>
-
-        <h2>Ihre Rechte</h2>
-        <p>Sie haben das Recht auf Auskunft, Berichtigung und Löschung Ihrer Daten. Kontaktieren Sie hierzu die verantwortliche Stelle.</p>
-
-        <h2>Cookies und Sitzungsdaten</h2>
-        <p>Das Portal verwendet Sitzungscookies zur Speicherung Ihres Namens während der Nutzung. Diese werden beim Schließen des Browsers gelöscht.</p>
     </div>
 </body>
 </html>

public/uploads/.htaccess

@@ -0,0 +1,7 @@
+# Prevents PHP in Upload Directory
+php_flag engine off
+
+# Allows Image Files
+<FilesMatch "\.(?i:jpg|jpeg|png|gif|webp)$">
+    Require all granted
+</FilesMatch>