Added d-flex to place logo next to brand

Solved another layout bug

.github/FUNDING.yml

@@ -0,0 +1,7 @@
+github: kevinveenbirkenbach
+
+patreon: kevinveenbirkenbach
+
+buy_me_a_coffee: kevinveenbirkenbach
+
+custom: https://s.veen.world/paypaldonate

.gitignore

@@ -1,2 +1,5 @@
-app/static/cache/*
+app/config.yaml
 *__pycache__*
+app/static/cache/*
+.env
+app/cypress/screenshots/*

Dockerfile

@@ -1,18 +1,14 @@
-# Basis-Image für Python
+# Base image for Python
 FROM python:slim
 
-# Arbeitsverzeichnis festlegen
+# Set the working directory
 WORKDIR /app
 
-# Abhängigkeiten kopieren und installieren
+# Copy and install dependencies
 COPY app/requirements.txt requirements.txt
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Anwendungscode kopieren
+# Copy application code
 COPY app/ .
 
-# Port freigeben
-EXPOSE 5000
-
-# Startbefehl
 CMD ["python", "app.py"]

Makefile

@@ -0,0 +1,82 @@
+# Load environment variables from .env
+ifneq (,$(wildcard .env))
+    include .env
+    # Export variables defined in .env
+    export $(shell sed 's/=.*//' .env)
+endif
+
+# Default port (can be overridden with PORT env var)
+PORT ?= 5000
+
+# Default port (can be overridden with PORT env var)
+.PHONY: build
+build:
+	# Build the Docker image.
+	docker build -t application-portfolio .
+
+.PHONY: up
+up:
+	# Start the application using docker-compose with build.
+	docker-compose up -d --build
+
+.PHONY: down
+down:
+	# Stop and remove the 'portfolio' container, ignore errors, and bring down compose.
+	- docker stop portfolio || true
+	- docker rm portfolio || true
+	- docker-compose down
+
+.PHONY: run-dev
+run-dev:
+	# Run the container in development mode (hot-reload).
+	docker run -d \
+		-p $(PORT):$(PORT) \
+		--name portfolio \
+		-v $(PWD)/app/:/app \
+		-e FLASK_APP=app.py \
+		-e FLASK_ENV=development \
+		application-portfolio
+
+.PHONY: run-prod
+run-prod:
+	# Run the container in production mode.
+	docker run -d \
+		-p $(PORT):$(PORT) \
+		--name portfolio \
+		application-portfolio
+
+.PHONY: logs
+logs:
+	# Display the logs of the 'portfolio' container.
+	docker logs -f portfolio
+
+.PHONY: dev
+dev:
+	# Start the application in development mode using docker-compose.
+	FLASK_ENV=development docker-compose up -d
+
+.PHONY: prod
+prod:
+	# Start the application in production mode using docker-compose (with build).
+	docker-compose up -d --build
+
+.PHONY: cleanup
+cleanup:
+	# Remove all stopped Docker containers to reclaim space.
+	docker container prune -f
+
+.PHONY: delete
+delete:
+	# Force remove the 'portfolio' container if it exists.
+	- docker rm -f portfolio
+
+.PHONY: browse
+browse:
+	# Open the application in the browser at http://localhost:$(PORT)
+	chromium http://localhost:$(PORT)
+
+npm-install:
+	cd app && npm install
+
+test: npm-install
+	cd app && npx cypress run --spec "cypress/e2e/**/*.spec.js"

README.md

@@ -1,37 +1,161 @@
-# Landingpage
+# PortUI 🖥️✨
 
-## Access
-### Locale
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-blue?logo=github)](https://github.com/sponsors/kevinveenbirkenbach)  
+[![Patreon](https://img.shields.io/badge/Support-Patreon-orange?logo=patreon)](https://www.patreon.com/c/kevinveenbirkenbach)  
+[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20Coffee-Funding-yellow?logo=buymeacoffee)](https://buymeacoffee.com/kevinveenbirkenbach)  
+[![PayPal](https://img.shields.io/badge/Donate-PayPal-blue?logo=paypal)](https://s.veen.world/paypaldonate)
+
+A lightweight, Docker-powered portfolio/landing-page generator—fully customizable via YAML! Showcase your projects, skills, and online presence in minutes.  
+
+> 🚀 You can also pair PortUI with JavaScript for sleek, web-based desktop-style interfaces.  
+> 💻 Example in action: [CyMaIS.Cloud](https://cymais.cloud/) (demo)  
+> 🌐 Another live example: [veen.world](https://www.veen.world/) (Kevin’s personal site)
+
+---
+
+## ✨ Key Features
+
+- **Dynamic Navigation**  
+  Create dropdowns & nested menus with ease.  
+- **Customizable Cards**  
+  Highlight skills, projects, or services—with icons, titles, and links.  
+- **Smart Cache Management**  
+  Auto-cache assets for lightning-fast loading.  
+- **Responsive Design**  
+  Built on Bootstrap; looks great on desktop, tablet & mobile.  
+- **YAML-Driven**  
+  All content & structure defined in a simple `config.yaml`.  
+- **CLI Control**  
+  Manage Docker containers via the `portfolio` command.
+
+---
+
+## 🌐 Quick Access
+
+- **Local Preview:**  
   [http://127.0.0.1:5000](http://127.0.0.1:5000)
 
+---
 
-## Administrate Docker
-### Stop and Destroy
+## 🏁 Getting Started
+
+### 🔧 Prerequisites
+
+- Docker & Docker Compose  
+- Basic Python & YAML knowledge  
+
+### 🛠️ Installation via Git
+
+1. **Clone & enter repo**  
    ```bash
-docker stop landingpage
-docker rm landingpage
+   git clone <repository_url>
+   cd <repository_directory>
    ```
 
-### Build
+2. **Configure**
+   Copy `config.sample.yaml` → `config.yaml` & customize.
+3. **Build & run**
+
    ```bash
-docker build -t application-landingpage .
+   docker-compose up --build
+   ```
+4. **Browse**
+   Open [http://localhost:5000](http://localhost:5000)
+
+### 📦 Installation via Kevin’s Package Manager
+
+```bash
+pkgmgr install portui
 ```
 
-### Run
+Once installed, the `portui` CLI is available system-wide.
+
+---
+
+## 🖥️ CLI Commands
 
-#### Run Development Environment
 ```bash
-docker run -d -p 5000:5000 --name landingpage -v $(pwd)/app/:/app -e FLASK_APP=app.py -e FLASK_ENV=development application-landingpage
+portui --help
 ```
 
-#### Run Production Environment
-```bash
-docker run -d -p 5000:5000 --name landingpage application-landingpage
+* `build` Build the Docker image
+* `up` Start containers (with build)
+* `down` Stop & remove containers
+* `run-dev` Dev mode (hot-reload)
+* `run-prod` Production mode
+* `logs` View container logs
+* `dev` Docker-Compose dev environment
+* `prod` Docker-Compose prod environment
+* `cleanup` Prune stopped containers
+
+---
+
+## 🔧 YAML Configuration Guide
+
+Define your site’s structure in `config.yaml`:
+
+```yaml
+accounts:
+  name: Online Accounts
+  description: Discover my online presence.
+  icon:
+    class: fa-solid fa-users
+  children:
+    - name: Channels
+      description: Platforms where I share content.
+      icon:
+        class: fas fa-newspaper
+      children:
+        - name: Mastodon
+          description: Follow me on Mastodon.
+          icon:
+            class: fa-brands fa-mastodon
+          url: https://microblog.veen.world/@kevinveenbirkenbach
+          identifier: "@kevinveenbirkenbach@microblog.veen.world"
+  cards:
+    - icon:
+        source: https://cloud.veen.world/s/logo_agile_coach_512x512/download
+      title: Agile Coach
+      text: I lead agile transformations and improve team dynamics through Scrum and Agile Coaching.
+      url: https://www.agile-coach.world
+      link_text: www.agile-coach.world
+
+company:
+  title: Kevin Veen-Birkenbach
+  subtitle: Consulting & Coaching Solutions
+  logo:
+    source: https://cloud.veen.world/s/logo_face_512x512/download
+  favicon:
+    source: https://cloud.veen.world/s/veen_world_favicon/download
+  address:
+    street: Afrikanische Straße 43
+    postal_code: DE-13351
+    city: Berlin
+    country: Germany
+  imprint_url: https://s.veen.world/imprint
 ```
 
-### Debug
-```bash
-docker logs -f landingpage
-```
-## Author
-This software was created from [Kevin Veen-Birkenbach](https://www.veen.world/) with the help of [ChatGPT]()
+* **`children`** enables multi-level menus.
+* **`link`** references other YAML paths to avoid duplication.
+
+---
+
+## 🚢 Production Deployment
+
+* Use a reverse proxy (NGINX/Apache).
+* Secure with SSL/TLS.
+* Swap to a production database if needed.
+
+---
+
+## 📜 License
+
+Licensed under **GNU AGPLv3**. See [LICENSE](./LICENSE) for details.
+
+---
+
+## ✍️ Author
+
+Created by [Kevin Veen-Birkenbach](https://www.veen.world/)
+
+Enjoy building your portfolio! 🌟

app/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

app/app.py

@@ -1,10 +1,18 @@
 import os
 from flask import Flask, render_template
-import requests
-import hashlib
 import yaml
+import requests
 from utils.configuration_resolver import ConfigurationResolver
 from utils.cache_manager import CacheManager
+from utils.compute_card_classes import compute_card_classes
+import logging
+logging.basicConfig(level=logging.DEBUG)
+FLASK_ENV = os.getenv("FLASK_ENV", "production")
+FLASK_PORT = int(os.getenv("PORT", 5000))
+print(f"🔧 Starting app on port {FLASK_PORT}, FLASK_ENV={FLASK_ENV}")
+
+from flask import Flask, render_template, current_app
+from markupsafe import Markup
 
 # Initialize the CacheManager
 cache_manager = CacheManager()
@@ -13,38 +21,97 @@ cache_manager = CacheManager()
 cache_manager.clear_cache()
 
 def load_config(app):
-    """Load and resolve the configuration."""
-    # Lade die Konfigurationsdatei
+    """Load and resolve the configuration from config.yaml."""
     with open("config.yaml", "r") as f:
         config = yaml.safe_load(f)
 
-    # Resolve links in the configuration
+    if config.get("nasa_api_key"):
+        app.config["NASA_API_KEY"] = config["nasa_api_key"]
+
     resolver = ConfigurationResolver(config)
     resolver.resolve_links()
-    # Update the app configuration
     app.config.update(resolver.get_config())
 
-app = Flask(__name__)
-load_config(app)
+def cache_icons_and_logos(app):
+    """Cache all icons and logos to local files, mit Fallback auf source."""
+    for card in app.config["cards"]:
+        icon = card.get("icon", {})
+        if icon.get("source"):
+            cached = cache_manager.cache_file(icon["source"])
+            # Fallback: wenn cache_file None liefert, nutze weiterhin source
+            icon["cache"] = cached or icon["source"]
 
-# Hole die Umgebungsvariable FLASK_ENV oder setze einen Standardwert
-FLASK_ENV = os.getenv("FLASK_ENV", "production")
+    # Company-Logo
+    company_logo = app.config["company"]["logo"]
+    cached = cache_manager.cache_file(company_logo["source"])
+    company_logo["cache"] = cached or company_logo["source"]
+
+    # Platform Favicon
+    favicon = app.config["platform"]["favicon"]
+    cached = cache_manager.cache_file(favicon["source"])
+    favicon["cache"] = cached or favicon["source"]
+
+    # Platform Logo
+    platform_logo = app.config["platform"]["logo"]
+    cached = cache_manager.cache_file(platform_logo["source"])
+    platform_logo["cache"] = cached or platform_logo["source"]
+
+
+# Initialize Flask app
+app = Flask(__name__)
+
+# Load configuration and cache assets on startup
+load_config(app)
+cache_icons_and_logos(app)
+
+@app.context_processor
+def utility_processor():
+    def include_svg(path):
+        full_path = os.path.join(current_app.root_path, 'static', path)
+        try:
+            with open(full_path, 'r', encoding='utf-8') as f:
+                svg = f.read()
+            return Markup(svg)
+        except IOError:
+            return Markup(f'<!-- SVG not found: {path} -->')
+    return dict(include_svg=include_svg)
 
 @app.before_request
 def reload_config_in_dev():
+    """Reload config and recache icons before each request in development mode."""
     if FLASK_ENV == "development":
         load_config(app)
-        
-    # Cache the icons
-    for card in app.config["cards"]:
-        card["icon"]["cache"] = cache_manager.cache_file(card["icon"]["source"])
-    
-    app.config["company"]["logo"]["cache"] = cache_manager.cache_file(app.config["company"]["logo"]["source"])
-    app.config["company"]["favicon"]["cache"] = cache_manager.cache_file(app.config["company"]["favicon"]["source"])
+        cache_icons_and_logos(app)
 
 @app.route('/')
 def index():
-    return render_template("pages/index.html.j2", cards=app.config["cards"], company=app.config["company"], navigation=app.config["navigation"])
+    """Render the main index page."""
+    cards = app.config["cards"]
+    lg_classes, md_classes = compute_card_classes(cards)
+    # fetch NASA APOD URL only if key present
+    apod_bg = None
+    api_key = app.config.get("NASA_API_KEY")
+    if api_key:
+        resp = requests.get(
+            "https://api.nasa.gov/planetary/apod",
+            params={"api_key": api_key}
+        )
+        if resp.ok:
+            data = resp.json()
+            # only use if it's an image
+            if data.get("media_type") == "image":
+                apod_bg = data.get("url")
+
+    return render_template(
+        "pages/index.html.j2",
+        cards=cards,
+        company=app.config["company"],
+        navigation=app.config["navigation"],
+        platform=app.config["platform"],
+        lg_classes=lg_classes,
+        md_classes=md_classes,
+        apod_bg=apod_bg
+    )
 
 if __name__ == "__main__":
-    app.run(debug=(FLASK_ENV == "development"), host="0.0.0.0", port=5000)
+    app.run(debug=(FLASK_ENV == "development"), host="0.0.0.0", port=FLASK_PORT)

app/config.sample.yaml

@@ -1,11 +1,12 @@
 ---
 accounts:
-  name: Online Accounts
+  nasa_api_key: YOUR_REAL_KEY_HERE
+  name: Online Presence
   description: Discover my online presence.
   icon:
       class: fa-solid fa-users
   children:
-  - name: Channels
+  - name: Publishing Channels
     description: Platforms where I share content.
     icon:
       class: fas fa-newspaper
@@ -29,14 +30,14 @@ accounts:
         identifier: kevinbirkenbach
         warning: I rarely use X/Twitter and recommend alternative platforms like Mastodon.
         alternatives:
-        - link: accounts.channels.microblogs.mastodon
+        - link: accounts.publishingchannels.microblogs.mastodon
       - name: Bluesky
         description: Follow me on Bluesky (coming soon).
         icon:
           class: fa-brands fa-bluesky
         info: Bluesky is coming soon.
         alternatives:
-        - link: accounts.channels.microblogs.mastodon
+        - link: accounts.publishingchannels.microblogs.mastodon
 
     - name: Pictures
       description: View my photography.
@@ -56,7 +57,7 @@ accounts:
         identifier: kevinveenbirkenbach
         warning: Platforms by Meta (e.g., Instagram, Facebook) may compromise your data privacy. Consider using decentralized alternatives.
         alternatives:
-        - link: accounts.channels.pictures.pixelfed
+        - link: accounts.publishingchannels.pictures.pixelfed
 
     - name: Videos
       description: Watch my video content.
@@ -75,7 +76,7 @@ accounts:
         url: https://s.veen.world/youtube
         warning: I no longer publish videos on YouTube. Please visit my Peertube channel instead.
         alternatives:
-        - link: accounts.channels.videos.peertube
+        - link: accounts.publishingchannels.videos.peertube
 
     - name: Blog
       description: Read my articles and stories.
@@ -99,17 +100,25 @@ accounts:
           class: fa-solid fa-code
         url: https://git.veen.world/kevinveenbirkenbach
 
-  - name: Social Media
+  - name: Social Networks
     description: Social and developer platforms.
     icon:
-      class: fa-brands fa-meta
+      class: fa fa-users
     children:
     - name: Facebook
+      warning: I recommend to don't use Facebook and connect instead with me via the Fediverse. Check out the listed alternatives.
       description: Visit my Facebook page.
       icon:
         class: fa-brands fa-facebook
       url: https://www.facebook.com/kevinveenbirkenbach
-
+      alternatives:
+      - link: accounts.socialnetworks.friendica
+    - name: Friendica
+      description: Visit my friendica profile
+      icon:
+        class: fas fa-network-wired
+      url: https://s.veen.world/friendica
+      identifier: "kevinveenbirkenbach@friendica.veen.world"
   - link: navigation.header.contact.messenger
 
   - name: Career Profiles
@@ -121,13 +130,27 @@ accounts:
       description: View my XING profile.
       icon:
         class: bi bi-building
-      url: https://www.xing.com/profile/Kevin_VeenBirkenbach
+      url: https://s.veen.world/xing
     - name: LinkedIn
       description: Connect with me on LinkedIn.
       icon:
         class: bi bi-linkedin
-      url: https://www.linkedin.com/in/kevinveenbirkenbach
-
+      url: https://s.veen.world/linkedin
+    - name: upwork.com
+      description: Check out my profile on upwork
+      icon:
+        class: fas fa-users
+      url: https://s.veen.world/upwork
+    - name: freelancermap.de
+      description: Check out my profile on freelancermap.de
+      icon:
+        class: fas fa-people-arrows
+      url: https://s.veen.world/freelancermap
+    - name: malt
+      description: Check out my profile on malt
+      icon:
+        class: fas fa-sun
+      url: https://s.veen.world/malt
   - name: Sports
     description: My sports activities and logs.
     icon:
@@ -168,6 +191,12 @@ accounts:
       class: fa-brands fa-discourse
     url: https://forum.veen.world/u/kevinveenbirkenbach
 
+  - name: Nextcloud
+    description: Share data with me via nextcloud
+    icon:
+      class: fa fa-cloud
+    url: https://s.veen.world/cloud
+
 cards:
 - icon: 
     source: https://cloud.veen.world/s/logo_agile_coach_512x512/download
@@ -177,6 +206,7 @@ cards:
     ensuring agile principles are effectively implemented for sustainable success.
   url: https://www.agile-coach.world
   link_text: www.agile-coach.world
+  iframe: true
 - icon: 
     source: https://cloud.veen.world/s/logo_personal_coach_512x512/download
   title: Personal Coach
@@ -236,59 +266,66 @@ cards:
     and embrace positive life changes.
   url: https://www.hypno.veen.world
   link_text: www.hypno.veen.world
-- icon: 
-    source: https://cloud.veen.world/s/logo_skydiver_512x512/download
-  title: Aerospace Consultant
-  text: As an Aerospace Consultant with aviation credentials, including a Sport Pilot
-    License for Parachutes, and a Restricted Radiotelephony and Operator's Certificate
-    I deliver expert consulting services. Currently training for my Private Pilot
-    License, I specialize in guiding clients through aviation regulations, safety
-    standards, and operational efficiency.
-  url: 
-  link_text: Website under construction
-- icon: 
-    source: https://cloud.veen.world/s/logo_hunter_512x512/download
-  title: Wildlife Expert
-  text: As a certified hunter and wildlife coach, I offer educational programs, nature
-    walks, survival trainings, and photo expeditions, merging ecological knowledge
-    with nature respect. My goal is to foster sustainable conservation and enhance
-    appreciation for the natural world through responsible practices.
-  url: 
-  link_text: Website under construction
-- icon: 
-    source: https://cloud.veen.world/s/logo_diver_512x512/download
-  title: Master Diver
-  text: As a certified master diver with trainings in various specialties, I offer
-    diving instruction, underwater photography, and guided dive tours. My experience
-    ensures safe and enriching underwater adventures, highlighting marine conservation
-    and the wonders of aquatic ecosystems.
-  url: 
-  link_text: Website under construction
-- icon: 
-    source: https://cloud.veen.world/s/logo_massage_therapist_512x512/download
-  title: Massage Therapist
-  text: Certified in Tantra Massage, I offer unique full-body rituals to awaken senses
-    and harmonize body and mind. My sessions, a blend of ancient Tantra and modern
-    relaxation, focus on energy flow, personal growth, and spiritual awakening.
-  url: 
-  link_text: Website under construction
-company:
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_skydiver_512x512/download
+#  title: Aerospace Consultant
+#  text: As an Aerospace Consultant with aviation credentials, including a Sport Pilot
+#    License for Parachutes, and a Restricted Radiotelephony and Operator's Certificate
+#    I deliver expert consulting services. Currently training for my Private Pilot
+#    License, I specialize in guiding clients through aviation regulations, safety
+#    standards, and operational efficiency.
+#  url: 
+#  link_text: Website under construction
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_hunter_512x512/download
+#  title: Wildlife Expert
+#  text: As a certified hunter and wildlife coach, I offer educational programs, nature
+#    walks, survival trainings, and photo expeditions, merging ecological knowledge
+#    with nature respect. My goal is to foster sustainable conservation and enhance
+#    appreciation for the natural world through responsible practices.
+#  url: 
+#  link_text: Website under construction
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_diver_512x512/download
+#  title: Master Diver
+#  text: As a certified master diver with trainings in various specialties, I offer
+#    diving instruction, underwater photography, and guided dive tours. My experience
+#    ensures safe and enriching underwater adventures, highlighting marine conservation
+#    and the wonders of aquatic ecosystems.
+#  url: 
+#  link_text: Website under construction
+#- icon: 
+#    source: https://cloud.veen.world/s/logo_massage_therapist_512x512/download
+#  title: Massage Therapist
+#  text: Certified in Tantra Massage, I offer unique full-body rituals to awaken senses
+#    and harmonize body and mind. My sessions, a blend of ancient Tantra and modern
+#    relaxation, focus on energy flow, personal growth, and spiritual awakening.
+#  url: 
+#  link_text: Website under construction
+platform:
   titel:    Kevin Veen-Birkenbach
   subtitel: Consulting and Coaching Solutions
   logo:
     source: https://cloud.veen.world/s/logo_face_512x512/download
   favicon:
     source: https://cloud.veen.world/s/veen_world_favicon/download
+company:
+  titel:    Kevin Veen-Birkenbach
+  subtitel: Consulting and Coaching Solutions
+  logo:
+    source: https://cloud.veen.world/s/logo_cymais_512x512/download
   address:
       street:       Afrikanische Straße 43
       postal_code:  DE-13351
       city:         Berlin
       country:      Germany
-  imprint_url: https://s.veen.world/imprint
+  imprint: https://veen.world/
+
 navigation:
   header:
     children:
-    - link: accounts.channels.children
+    - link: accounts.publishingchannels.children
+    - link: accounts.socialnetworks
     - name: Contact
       description: Get in touch
       icon:
@@ -429,6 +466,12 @@ navigation:
             class: bi bi-clipboard2-check-fill
           url: https://kanban.veen.world/
         
+        - name: Snipe IT
+          description: Manage my inventory
+          icon:
+            class: fas fa-box-open
+          url: https://inventory.veen.world/
+          
       - name: Communication
         icon:
           class: fa-solid fa-comments
@@ -450,16 +493,34 @@ navigation:
           icon:
             class: fa-solid fa-envelope
           url: https://mail.veen.world/
-      - name: Tools
+      - name: Administration
         icon:
-          class: fas fa-tools
+          class: fas fa-building
         children:
         - name: Matomo
           description: Analyze with Matomo
           icon:
             class: fa-solid fa-chart-simple
           url: https://matomo.veen.world/
-          
+        - name: phpMyAdmin
+          description: Administrate MySQL and MariaDB databases
+          icon:
+            class: fas fa-database
+          url: https://phpmyadmin.veen.world/
+        - name: Keycloak
+          description: Manage User via Keycloak
+          icon:
+            class: fas fa-user-shield
+          url: https://auth.veen.world/admin
+        - name: LDAP
+          description: Manage LDAP
+          icon:
+            class: fas fa-key
+          url: https://ldap.veen.world/
+      - name: Tools
+        icon:
+          class: fas fa-tools
+        children:
         - name: Baserow
           description: Organize with Baserow
           icon:
@@ -476,7 +537,6 @@ navigation:
           icon:
             class: fa-solid fa-cloud
           url: https://cloud.veen.world/
-          
     - name: About Me
       description: All information about me
       icon:
@@ -557,9 +617,67 @@ navigation:
           class: fa-solid fa-layer-group
         url: https://s.veen.world/skillmatrix
       - link: accounts 
+    - name: Support Me
+      description: "Discover all the ways you can support my work."
+      icon:
+        class: fa-solid fa-hands-helping
+      children:
+        - name: Buy me a Coffee
+          description: "Support my work with a coffee – every cup helps!"
+          icon:
+            class: fa-solid fa-mug-hot
+          url: https://s.veen.world/buymeacoffee
+        - name: Patreon
+          description: "Become a member and support me monthly with exclusive content."
+          icon:
+            class: fa-brands fa-patreon
+          url: https://s.veen.world/patreon
+        - name: PayPal
+          description: "Donate to my open source projects with a one-time or monthly PayPal contribution."
+          icon:
+            class: fa-brands fa-paypal
+          url: https://s.veen.world/paypaldonate
+        - name: GitHub Sponsors
+          description: "Directly support my projects through GitHub Sponsors."
+          icon:
+            class: fa-brands fa-github
+          url: https://s.veen.world/githubsponsors
     - name: Imprint
       description: Check out the imprint information
       icon:
           class: fa-solid fa-scale-balanced
       url: https://s.veen.world/imprint
-  
+      iframe: true
+    - name: Settings
+      description: Application settings
+      icon:
+        class: fa-solid fa-cog
+      children:
+        - name: Toggle Fullscreen
+          description: Enter or exit fullscreen mode
+          icon:
+            class: fa-solid fa-expand-arrows-alt
+          onclick: "toggleFullscreen()"
+        - name: Toggle Full Width
+          description: Switch between normal and full-width layout
+          icon:
+            class: fa-solid fa-arrows-left-right
+          onclick: "setFullWidth(!initFullWidthFromUrl())"
+        - name: Open in new tab
+          description: Open the currently embedded iframe URL in a fresh browser tab
+          icon:
+            class: fa-solid fa-up-right-from-square
+          onclick: openIframeInNewTab()
+        - name: Print
+          description: Print the current view
+          icon:
+            class: fa-solid fa-print
+          onclick: window.print()
+        - name: Zoom +
+          icon:
+            class: fa-solid fa-search-plus
+          onclick: zoomPage(1.1)
+        - name: Zoom –
+          icon:
+            class: fa-solid fa-search-minus
+          onclick: zoomPage(0.9)

app/cypress.config.js

@@ -0,0 +1,19 @@
+// cypress.config.js
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    // your app under test must already be running on this port
+    baseUrl: `http://localhost:${process.env.PORT || 5001}`,
+    defaultCommandTimeout: 60000,
+    pageLoadTimeout: 60000,
+    requestTimeout: 1500,
+    responseTimeout: 15000,
+    specPattern: 'cypress/e2e/**/*.spec.js',
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      // here you could hook into events, but we don’t need anything special
+      return config;
+    }
+  },
+});

app/cypress/e2e/container.spec.js

@@ -0,0 +1,90 @@
+// cypress/e2e/container.spec.js
+
+describe('Custom Scroll & Container Resizing', () => {
+  beforeEach(() => {
+    // Assumes your app is running at baseUrl, and container.js is loaded on “/”
+    cy.visit('/');
+  });
+
+  it('on load, the scroll-container gets a positive height and proper overflow', () => {
+    // wait for our JS to run
+    cy.window().should('have.property', 'adjustScrollContainerHeight');
+
+    // Grab the inline style of .scroll-container
+    cy.get('.scroll-container')
+      .should('have.attr', 'style')
+      .then(style => {
+        // height:<number>px must be present
+        const m = style.match(/height:\s*(\d+(?:\.\d+)?)px/);
+        expect(m, 'height set').to.not.be.null;
+        expect(parseFloat(m[1]), 'height > 0').to.be.greaterThan(0);
+
+        // overflow shorthand should include both hidden & auto (order-insensitive)
+        expect(style).to.include('overflow:');
+        expect(style).to.match(/overflow:\s*(hidden\s+auto|auto\s+hidden)/);
+      });
+  });
+
+  it('on window resize, scroll-container height updates', () => {
+    // record original height
+    cy.get('.scroll-container')
+      .invoke('css', 'height')
+      .then(orig => {
+        // resize to a smaller viewport
+        cy.viewport(320, 480);
+        cy.wait(100); // allow resize handler to fire
+
+        cy.get('.scroll-container')
+          .invoke('css', 'height')
+          .then(newH => {
+            expect(parseFloat(newH), 'height changed on resize').to.not.equal(parseFloat(orig));
+          });
+      });
+  });
+
+  context('custom scrollbar thumb', () => {
+    beforeEach(() => {
+      // inject tall content to force scrolling
+      cy.get('.scroll-container').then($sc => {
+        $sc[0].innerHTML = '<div style="height:2000px">long</div>';
+      });
+      // re-run scrollbar setup
+      cy.window().invoke('updateCustomScrollbar');
+    });
+
+    it('shows a thumb with reasonable size & position', () => {
+      cy.get('#custom-scrollbar').should('have.css', 'opacity', '1');
+
+      cy.get('#scroll-thumb')
+        .should('have.css', 'height')
+        .then(h => {
+          const hh = parseFloat(h);
+          expect(hh).to.be.at.least(20);
+          // ensure thumb is smaller than container
+          cy.get('#custom-scrollbar')
+            .invoke('css', 'height')
+            .then(ch => {
+              expect(hh).to.be.lessThan(parseFloat(ch));
+            });
+        });
+
+      // scroll a bit and verify thumb.top changes
+      cy.get('.scroll-container').scrollTo(0, 200);
+      cy.wait(50);
+      cy.get('#scroll-thumb')
+        .invoke('css', 'top')
+        .then(t => {
+          expect(parseFloat(t)).to.be.greaterThan(0);
+        });
+    });
+
+    it('hides scrollbar when content fits', () => {
+      // remove overflow
+      cy.get('.scroll-container').then($sc => {
+        $sc[0].innerHTML = '<div style="height:10px">tiny</div>';
+      });
+      cy.window().invoke('updateCustomScrollbar');
+      cy.get('#custom-scrollbar').should('have.css', 'opacity', '0');
+    });
+  });
+});

app/cypress/e2e/fullscreen.spec.js

@@ -0,0 +1,85 @@
+// cypress/e2e/fullscreen.spec.js
+
+describe('Fullscreen Toggle', () => {
+  const ROOT = '/';
+
+  beforeEach(() => {
+    cy.visit(ROOT);
+  });
+
+  it('defaults to normal mode when no fullscreen param is present', () => {
+    // Body should not have fullscreen class
+    cy.get('body').should('not.have.class', 'fullscreen');
+
+    // URL should not include `fullscreen`
+    cy.url().should('not.include', 'fullscreen=');
+
+    // Header and footer should be visible (max-height > 0)
+    cy.get('header').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+    cy.get('footer').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+  });
+
+  it('initFullscreenFromUrl() picks up ?fullscreen=1 on load', () => {
+    cy.visit(`${ROOT}?fullscreen=1`);
+
+    cy.get('body').should('have.class', 'fullscreen');
+    cy.url().should('include', 'fullscreen=1');
+
+    // Header and footer should be collapsed (max-height == 0)
+    cy.get('header').should('have.css', 'max-height', '0px');
+    cy.get('footer').should('have.css', 'max-height', '0px');
+  });
+
+  it('enterFullscreen() adds fullscreen class, sets full width, and updates URL', () => {
+    cy.window().then(win => {
+      win.exitFullscreen(); // ensure starting state
+      win.enterFullscreen();
+    });
+
+    cy.get('body').should('have.class', 'fullscreen');
+    cy.url().should('include', 'fullscreen=1');
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container-fluid');
+
+    cy.get('header').should('have.css', 'max-height', '0px');
+    cy.get('footer').should('have.css', 'max-height', '0px');
+  });
+
+  it('exitFullscreen() removes fullscreen class, resets width, and URL param', () => {
+    // start in fullscreen
+    cy.window().invoke('enterFullscreen');
+
+    // then exit
+    cy.window().invoke('exitFullscreen');
+
+    cy.get('body').should('not.have.class', 'fullscreen');
+    cy.url().should('not.include', 'fullscreen=');
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container')
+      .and('not.have.class', 'container-fluid');
+
+    // Header and footer should be expanded again
+    cy.get('header').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+    cy.get('footer').should('have.css', 'max-height').and(value => {
+      expect(parseFloat(value)).to.be.greaterThan(0);
+    });
+  });
+
+  it('toggleFullscreen() toggles into and out of fullscreen', () => {
+    // Toggle into fullscreen
+    cy.window().invoke('toggleFullscreen');
+    cy.get('body').should('have.class', 'fullscreen');
+    cy.url().should('include', 'fullscreen=1');
+
+    // Toggle back
+    cy.window().invoke('toggleFullscreen');
+    cy.get('body').should('not.have.class', 'fullscreen');
+    cy.url().should('not.include', 'fullscreen=');
+  });
+});

app/cypress/e2e/fullwidth.spec.js

@@ -0,0 +1,61 @@
+// cypress/e2e/fullwidth.spec.js
+
+describe('Full-width Toggle', () => {
+  // test page must include your <div class="container"> wrapper
+  const ROOT = '/'; 
+
+  it('defaults to .container when no param is present', () => {
+    cy.visit(ROOT);
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container')
+      .and('not.have.class', 'container-fluid');
+      
+    // URL should not include `fullwidth`
+    cy.url().should('not.include', 'fullwidth=');
+  });
+
+  it('initFullWidthFromUrl() picks up ?fullwidth=1 on load', () => {
+    cy.visit(`${ROOT}?fullwidth=1`);
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container-fluid')
+      .and('not.have.class', 'container');
+    cy.url().should('include', 'fullwidth=1');
+  });
+
+  it('setFullWidth(true) switches to container-fluid and updates URL', () => {
+    cy.visit(ROOT);
+
+    // call your global function
+    cy.window().invoke('setFullWidth', true);
+
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container-fluid')
+      .and('not.have.class', 'container');
+
+    cy.url().should('include', 'fullwidth=1');
+  });
+
+  it('setFullWidth(false) reverts to container and removes URL param', () => {
+    cy.visit(`${ROOT}?fullwidth=1`);
+
+    // now reset
+    cy.window().invoke('setFullWidth', false);
+
+    cy.get('.container, .container-fluid')
+      .should('have.class', 'container')
+      .and('not.have.class', 'container-fluid');
+
+    cy.url().should('not.include', 'fullwidth=1');
+  });
+
+  it('updateUrlFullWidth() toggles the query param without changing layout', () => {
+    cy.visit(ROOT);
+
+    // manually toggle URL only
+    cy.window().invoke('updateUrlFullWidth', true);
+    cy.url().should('include', 'fullwidth=1');
+
+    cy.window().invoke('updateUrlFullWidth', false);
+    cy.url().should('not.include', 'fullwidth=');
+  });
+});

app/cypress/e2e/iframe.spec.js

@@ -0,0 +1,46 @@
+// cypress/e2e/iframe.spec.js
+
+describe('Iframe integration', () => {
+  beforeEach(() => {
+    // Visit the app’s base URL (configured in cypress.config.js)
+    cy.visit('/');
+  });
+
+  it('opens the iframe when an .iframe-link is clicked', () => {
+    // Find the first iframe-link on the page
+    cy.get('.iframe-link').first().then($link => {
+      const href = $link.prop('href');
+
+      // Click it
+      cy.wrap($link).click();
+
+      // The URL should now include ?iframe=<encoded href>
+      cy.url().should('include', 'iframe=' + encodeURIComponent(href));
+
+      // The <body> should have the "fullscreen" class
+      cy.get('body').should('have.class', 'fullscreen');
+
+      // And the <main> should contain a visible <iframe src="<href>">
+      cy.get('main iframe')
+        .should('have.attr', 'src', href)
+        .and('be.visible');
+    });
+  });
+
+  it('restores the original content when a .js-restore element is clicked', () => {
+    // First open the iframe
+    cy.get('.iframe-link').first().click();
+
+    // Then click the first .js-restore element (e.g. header or logo)
+    cy.get('.js-restore').first().click();
+
+    // The URL must no longer include the iframe parameter
+    cy.url().should('not.include', 'iframe=');
+
+    // The <body> should no longer have the "fullscreen" class
+    cy.get('body').should('not.have.class', 'fullscreen');
+
+    // And no <iframe> should remain inside <main>
+    cy.get('main iframe').should('not.exist');
+  });
+});

app/cypress/e2e/menu.spec.js

@@ -0,0 +1,130 @@
+// cypress/e2e/dynamic_popup.spec.js
+
+describe('Dynamic Popup', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    description: 'A simple description',
+    warning: '**Be careful!**',
+    info: '_Some info_',
+    url: null,
+    iframe: false,
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } }
+    ],
+    children: [
+      { name: 'Child One', identifier: 'CH1', icon: { class: 'fa fa-child1' } }
+    ]
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  it('renders title with icon and text', () => {
+    open();
+    cy.get('#dynamicModalLabel')
+      .find('i.fa.fa-test')
+      .should('exist');
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Test Item');
+  });
+
+  it('falls back to plain text when no icon', () => {
+    open({ icon: null });
+    cy.get('#dynamicModalLabel')
+      .find('i')
+      .should('not.exist');
+    cy.get('#dynamicModalLabel')
+      .should('have.text', 'Test Item');
+  });
+
+  it('shows identifier when provided and populates input', () => {
+    open();
+    cy.get('#dynamicIdentifierBox').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', 'ABC123');
+  });
+
+  it('hides identifier box when none', () => {
+    open({ identifier: null });
+    cy.get('#dynamicIdentifierBox').should('have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', '');
+  });
+
+  it('renders warning and info via marked', () => {
+    open();
+    cy.get('#dynamicModalWarning')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalWarningText')
+      .should('contain.html', '<strong>Be careful!</strong>');
+    cy.get('#dynamicModalInfo')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalInfoText')
+      .should('contain.html', '<em>Some info</em>');
+  });
+
+  it('hides warning/info when none provided', () => {
+    open({ warning: null, info: null });
+    cy.get('#dynamicModalWarning').should('have.class', 'd-none');
+    cy.get('#dynamicModalInfo').should('have.class', 'd-none');
+  });
+
+  it('shows description when no URL', () => {
+    open({ url: null, description: 'Only desc' });
+    cy.get('#dynamicDescriptionText')
+      .should('not.have.class', 'd-none')
+      .and('have.text', 'Only desc');
+    cy.get('#dynamicModalLink').should('have.class', 'd-none');
+  });
+
+  it('shows link when URL is provided', () => {
+    open({ url: 'https://example.com', description: 'Click me' });
+    cy.get('#dynamicModalLink').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalLinkHref')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.text', 'Click me');
+  });
+
+  it('populates alternatives and children lists', () => {
+    open();
+    cy.get('#dynamicAlternativesSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicAlternativesList li')
+      .should('have.length', 1)
+      .first().contains('Alt One');
+    cy.get('#dynamicChildrenSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicChildrenList li')
+      .should('have.length', 1)
+      .first().contains('Child One');
+  });
+
+  it('hides sections when no items', () => {
+    open({ alternatives: [], children: [] });
+    cy.get('#dynamicAlternativesSection').should('have.class', 'd-none');
+    cy.get('#dynamicChildrenSection').should('have.class', 'd-none');
+  });
+
+  it('clicking an “Open” in list re-opens popup with that item', () => {
+    open();
+    cy.get('#dynamicAlternativesList button').click();
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Alt One');
+  });
+
+  it('copy button selects & copies identifier', () => {
+    open();
+    cy.get('#dynamicCopyButton').click();
+    cy.window().its('navigator.clipboard.writeText')
+      .should('have.been.calledWith', 'ABC123');
+    cy.window().its('alert')
+      .should('have.been.calledWith', 'Identifier copied to clipboard!');
+  });
+});

app/cypress/e2e/modal.spec.js

@@ -0,0 +1,130 @@
+// cypress/e2e/dynamic_popup.spec.js
+
+describe('Dynamic Popup', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    description: 'A simple description',
+    warning: '**Be careful!**',
+    info: '_Some info_',
+    url: null,
+    iframe: false,
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } }
+    ],
+    children: [
+      { name: 'Child One', identifier: 'CH1', icon: { class: 'fa fa-child1' } }
+    ]
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  it('renders title with icon and text', () => {
+    open();
+    cy.get('#dynamicModalLabel')
+      .find('i.fa.fa-test')
+      .should('exist');
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Test Item');
+  });
+
+  it('falls back to plain text when no icon', () => {
+    open({ icon: null });
+    cy.get('#dynamicModalLabel')
+      .find('i')
+      .should('not.exist');
+    cy.get('#dynamicModalLabel')
+      .should('have.text', 'Test Item');
+  });
+
+  it('shows identifier when provided and populates input', () => {
+    open();
+    cy.get('#dynamicIdentifierBox').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', 'ABC123');
+  });
+
+  it('hides identifier box when none', () => {
+    open({ identifier: null });
+    cy.get('#dynamicIdentifierBox').should('have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', '');
+  });
+
+  it('renders warning and info via marked', () => {
+    open();
+    cy.get('#dynamicModalWarning')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalWarningText')
+      .should('contain.html', '<strong>Be careful!</strong>');
+    cy.get('#dynamicModalInfo')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalInfoText')
+      .should('contain.html', '<em>Some info</em>');
+  });
+
+  it('hides warning/info when none provided', () => {
+    open({ warning: null, info: null });
+    cy.get('#dynamicModalWarning').should('have.class', 'd-none');
+    cy.get('#dynamicModalInfo').should('have.class', 'd-none');
+  });
+
+  it('shows description when no URL', () => {
+    open({ url: null, description: 'Only desc' });
+    cy.get('#dynamicDescriptionText')
+      .should('not.have.class', 'd-none')
+      .and('have.text', 'Only desc');
+    cy.get('#dynamicModalLink').should('have.class', 'd-none');
+  });
+
+  it('shows link when URL is provided', () => {
+    open({ url: 'https://example.com', description: 'Click me' });
+    cy.get('#dynamicModalLink').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalLinkHref')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.text', 'Click me');
+  });
+
+  it('populates alternatives and children lists', () => {
+    open();
+    cy.get('#dynamicAlternativesSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicAlternativesList li')
+      .should('have.length', 1)
+      .first().contains('Alt One');
+    cy.get('#dynamicChildrenSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicChildrenList li')
+      .should('have.length', 1)
+      .first().contains('Child One');
+  });
+
+  it('hides sections when no items', () => {
+    open({ alternatives: [], children: [] });
+    cy.get('#dynamicAlternativesSection').should('have.class', 'd-none');
+    cy.get('#dynamicChildrenSection').should('have.class', 'd-none');
+  });
+
+  it('clicking an “Open” in list re-opens popup with that item', () => {
+    open();
+    cy.get('#dynamicAlternativesList button').click();
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Alt One');
+  });
+
+  it('copy button selects & copies identifier', () => {
+    open();
+    cy.get('#dynamicCopyButton').click();
+    cy.window().its('navigator.clipboard.writeText')
+      .should('have.been.calledWith', 'ABC123');
+    cy.window().its('alert')
+      .should('have.been.calledWith', 'Identifier copied to clipboard!');
+  });
+});

app/cypress/e2e/navbar_logo_visibility.spec.js

@@ -0,0 +1,32 @@
+describe('Navbar Logo Visibility', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('should have #navbar_logo present in the DOM', () => {
+    cy.get('#navbar_logo').should('exist');
+  });
+
+  it('should be invisible (opacity 0) by default', () => {
+    cy.get('#navbar_logo')
+      .should('exist')
+      .and('have.css', 'opacity', '0');
+  });
+
+  it('should become visible (opacity 1) after entering fullscreen', () => {
+    cy.window().then(win => {
+      win.fullscreen();
+    });
+    cy.get('#navbar_logo', { timeout: 4000 })
+      .should('have.css', 'opacity', '1');
+  });
+
+  it('should become invisible again (opacity 0) after exiting fullscreen', () => {
+    cy.window().then(win => {
+      win.fullscreen();
+      win.exitFullscreen();
+    });
+    cy.get('#navbar_logo', { timeout: 4000 })
+      .should('have.css', 'opacity', '0');
+  });
+});

app/cypress/e2e/tooltips.spec.js

@@ -0,0 +1,130 @@
+// cypress/e2e/dynamic_popup.spec.js
+
+describe('Dynamic Popup', () => {
+  const base = {
+    name: 'Test Item',
+    identifier: 'ABC123',
+    description: 'A simple description',
+    warning: '**Be careful!**',
+    info: '_Some info_',
+    url: null,
+    iframe: false,
+    icon: { class: 'fa fa-test' },
+    alternatives: [
+      { name: 'Alt One', identifier: 'ALT1', icon: { class: 'fa fa-alt1' } }
+    ],
+    children: [
+      { name: 'Child One', identifier: 'CH1', icon: { class: 'fa fa-child1' } }
+    ]
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+    cy.window().then(win => {
+      cy.stub(win.navigator.clipboard, 'writeText').resolves();
+      cy.stub(win, 'alert');
+    });
+  });
+
+  function open(item = {}) {
+    cy.window().invoke('openDynamicPopup', { ...base, ...item });
+  }
+
+  it('renders title with icon and text', () => {
+    open();
+    cy.get('#dynamicModalLabel')
+      .find('i.fa.fa-test')
+      .should('exist');
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Test Item');
+  });
+
+  it('falls back to plain text when no icon', () => {
+    open({ icon: null });
+    cy.get('#dynamicModalLabel')
+      .find('i')
+      .should('not.exist');
+    cy.get('#dynamicModalLabel')
+      .should('have.text', 'Test Item');
+  });
+
+  it('shows identifier when provided and populates input', () => {
+    open();
+    cy.get('#dynamicIdentifierBox').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', 'ABC123');
+  });
+
+  it('hides identifier box when none', () => {
+    open({ identifier: null });
+    cy.get('#dynamicIdentifierBox').should('have.class', 'd-none');
+    cy.get('#dynamicModalContent').should('have.value', '');
+  });
+
+  it('renders warning and info via marked', () => {
+    open();
+    cy.get('#dynamicModalWarning')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalWarningText')
+      .should('contain.html', '<strong>Be careful!</strong>');
+    cy.get('#dynamicModalInfo')
+      .should('not.have.class', 'd-none')
+      .find('#dynamicModalInfoText')
+      .should('contain.html', '<em>Some info</em>');
+  });
+
+  it('hides warning/info when none provided', () => {
+    open({ warning: null, info: null });
+    cy.get('#dynamicModalWarning').should('have.class', 'd-none');
+    cy.get('#dynamicModalInfo').should('have.class', 'd-none');
+  });
+
+  it('shows description when no URL', () => {
+    open({ url: null, description: 'Only desc' });
+    cy.get('#dynamicDescriptionText')
+      .should('not.have.class', 'd-none')
+      .and('have.text', 'Only desc');
+    cy.get('#dynamicModalLink').should('have.class', 'd-none');
+  });
+
+  it('shows link when URL is provided', () => {
+    open({ url: 'https://example.com', description: 'Click me' });
+    cy.get('#dynamicModalLink').should('not.have.class', 'd-none');
+    cy.get('#dynamicModalLinkHref')
+      .should('have.attr', 'href', 'https://example.com')
+      .and('have.text', 'Click me');
+  });
+
+  it('populates alternatives and children lists', () => {
+    open();
+    cy.get('#dynamicAlternativesSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicAlternativesList li')
+      .should('have.length', 1)
+      .first().contains('Alt One');
+    cy.get('#dynamicChildrenSection').should('not.have.class', 'd-none');
+    cy.get('#dynamicChildrenList li')
+      .should('have.length', 1)
+      .first().contains('Child One');
+  });
+
+  it('hides sections when no items', () => {
+    open({ alternatives: [], children: [] });
+    cy.get('#dynamicAlternativesSection').should('have.class', 'd-none');
+    cy.get('#dynamicChildrenSection').should('have.class', 'd-none');
+  });
+
+  it('clicking an “Open” in list re-opens popup with that item', () => {
+    open();
+    cy.get('#dynamicAlternativesList button').click();
+    cy.get('#dynamicModalLabel')
+      .should('contain.text', 'Alt One');
+  });
+
+  it('copy button selects & copies identifier', () => {
+    open();
+    cy.get('#dynamicCopyButton').click();
+    cy.window().its('navigator.clipboard.writeText')
+      .should('have.been.calledWith', 'ABC123');
+    cy.window().its('alert')
+      .should('have.been.calledWith', 'Identifier copied to clipboard!');
+  });
+});

app/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "cypress": "^14.5.1"
+  }
+}

app/static/css/custom_scrollbar.css

@@ -0,0 +1,31 @@
+/* Set the scroll container to only scroll vertically */
+.scroll-container {
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* Hide native scrollbar */
+    scrollbar-width: none; /* Firefox */
+}
+
+.scroll-container::-webkit-scrollbar {
+    display: none; /* WebKit */
+}
+
+#custom-scrollbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 8px;
+    /* height: 100vh;  <-- remove or adjust this line */
+    background: transparent;
+    transition: opacity 0.3s ease;
+    opacity: 1;
+}
+
+/* The scrollbar thumb */
+#scroll-thumb {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+}

app/static/css/default.css

@@ -38,6 +38,18 @@ a {
   background-color: #f9f9f9;
 }
 
+.card {
+  transition: background-color 1s ease, transform 1s ease;
+  transition: color 1s ease, transform 1s ease;
+}
+
+.card:hover {
+  /* invert everything inside the card */
+  filter: invert(0.8) hue-rotate(144deg);
+  transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
 .card-body {
   display: flex;
   flex-direction: column;
@@ -70,7 +82,6 @@ h3.card-title {
 
 /* Footer styles */
 .footer {
-  margin-top: 12px;
   text-align: center;
   font-size: 0.7em;
 }
@@ -84,3 +95,105 @@ h3.card-title {
 h3.footer-title {
   font-size: 1.3em;
 }
+
+.card-img-top i, .card-img-top svg{
+  font-size: 100px;
+  fill: currentColor;
+  width: 100px;
+  height: auto;
+}
+
+div#navbarNavheader li.nav-item {
+  margin-left: 6px;
+}
+
+div#navbarNavfooter li.nav-item {
+  margin-right: 6px;
+}
+
+main, footer, header, nav {
+  position: relative;
+  box-shadow: 
+    /* Inner shadow */
+    inset 10px 0 10px -10px rgba(0, 0, 0, 0.3),  /* Left inner shadow */
+    inset -10px 0 10px -10px rgba(0, 0, 0, 0.3), /* Right inner shadow */
+    /* Outer shadow */
+    10px 0 10px -10px rgba(0, 0, 0, 0.3),  /* Right outer shadow */
+    -10px 0 10px -10px rgba(0, 0, 0, 0.3); /* Left outer shadow */
+  overflow: visible;
+}
+
+header{
+  padding: 12px;
+}
+
+header,
+footer {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: 0;
+  z-index: 1030;
+  background-color: var(--bs-light);
+}
+
+/* at the end of default.css */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+iframe{
+  margin-bottom: -10px;
+}
+
+.container-fluid {
+  max-width: 100% !important;
+}
+
+:root {
+  --anim-duration: 3s;          /* Basis-Dauer */
+}
+
+.container,
+.container-fluid {
+  transition: 
+    max-width var(--anim-duration) ease-in-out,
+    padding-left var(--anim-duration) ease-in-out,
+    padding-right var(--anim-duration) ease-in-out;
+}
+
+#navbar_logo {
+  /* start invisible but in the layout (d-none will actually hide it) */
+  opacity: 0;
+  transition: opacity var(--anim-duration) ease-in-out;
+}
+
+#navbar_logo.visible {
+  opacity: 1 !important;
+}
+
+
+/* 1. Make sure headers and footers can collapse */
+header,
+footer {
+  overflow: hidden;
+  /* choose a max-height that’s >= your tallest header/footer */
+  max-height: 200px;
+  padding: 1rem;
+  transition:
+    max-height var(--anim-duration) ease-in-out,
+    padding var(--anim-duration) ease-in-out;
+}
+
+/* 2. In fullscreen mode, collapse them */
+body.fullscreen header,
+body.fullscreen footer {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}

app/static/css/navigation.css

@@ -1,15 +1,24 @@
-/* Dropdown-Menüs verstecken */
-.dropdown-menu {
-    display: none;
-    opacity: 0;
-    visibility: hidden;
-    width: max-content !important; /* Passt die Breite an das breiteste Item an */
-    box-sizing: border-box; /* Berücksichtigt Innenabstand und Rahmen */
+/* Top-level dropdown menu */
+.nav-item .dropdown-menu {
+    position: absolute; /* Important for positioning */
+    top: 100%; /* Default opening direction: downwards */
+    left: 0;
+    z-index: 1050; /* Ensures the menu appears above other elements */
 }
 
-/* Positionierung von Submenüs */
+/* Submenu position */
 .dropdown-submenu > .dropdown-menu {
     position: absolute;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
     top: 0;
+    left: 100%; /* Opens to the right */
+    z-index: 1050;
+}
+
+/* Ensure a smooth transition */
+.dropdown-menu {
+    transition: all 0.3s ease-in-out;
+}
+
+nav.navbar {
+    border-radius: 0;
 }

app/static/js/container.js

@@ -0,0 +1,108 @@
+function adjustScrollContainerHeight() {
+  const mainEl = document.getElementById('main');
+  const scrollContainer = mainEl.querySelector('.scroll-container');
+  const scrollbarContainer = document.getElementById('custom-scrollbar');
+  const container = mainEl.parentElement;
+  
+  let siblingsHeight = 0;
+  Array.from(container.children).forEach(child => {
+    if(child !== mainEl && child !== scrollbarContainer) {
+      const style = window.getComputedStyle(child);
+      const height = child.offsetHeight;
+      const marginTop = parseFloat(style.marginTop) || 0;
+      const marginBottom = parseFloat(style.marginBottom) || 0;
+      siblingsHeight += height + marginTop + marginBottom;
+    }
+  });
+  
+  // Calculate the available height for the scroll area
+  const availableHeight = window.innerHeight - siblingsHeight;
+  scrollContainer.style.height = availableHeight + 'px';
+  scrollContainer.style.overflowY = 'auto';
+  scrollContainer.style.overflowX = 'hidden';
+
+  // Get the current position and height of the scroll container
+  const scrollContainerRect = scrollContainer.getBoundingClientRect();
+
+  // Set the position (top) and height of the custom scrollbar track
+  scrollbarContainer.style.top = scrollContainerRect.top + 'px';
+  scrollbarContainer.style.height = scrollContainerRect.height + 'px';
+}
+
+window.addEventListener('load', adjustScrollContainerHeight);
+window.addEventListener('resize', adjustScrollContainerHeight);
+
+// 2. Updates the thumb (size and position) of the custom scrollbar
+function updateCustomScrollbar() {
+  const scrollContainer = document.querySelector('.scroll-container');
+  const thumb = document.getElementById('scroll-thumb');
+  const customScrollbar = document.getElementById('custom-scrollbar');
+  if (!scrollContainer || !thumb || !customScrollbar) return;
+  
+  const contentHeight = scrollContainer.scrollHeight;
+  const containerHeight = scrollContainer.clientHeight;
+  const scrollTop = scrollContainer.scrollTop;
+  
+  // Calculate the thumb height (minimum 20px)
+  let thumbHeight = (containerHeight / contentHeight) * containerHeight;
+  thumbHeight = Math.max(thumbHeight, 20);
+  thumb.style.height = thumbHeight + 'px';
+  
+  // Calculate the thumb position
+  const maxScrollTop = contentHeight - containerHeight;
+  const maxThumbTop = containerHeight - thumbHeight;
+  const thumbTop = maxScrollTop ? (scrollTop / maxScrollTop) * maxThumbTop : 0;
+  thumb.style.top = thumbTop + 'px';
+  
+  // Show the scrollbar if content overflows, otherwise hide it
+  customScrollbar.style.opacity = contentHeight > containerHeight ? '1' : '0';
+}
+
+// Update the thumb when the container is scrolled
+const scrollContainer = document.querySelector('.scroll-container');
+if (scrollContainer) {
+  scrollContainer.addEventListener('scroll', updateCustomScrollbar);
+}
+window.addEventListener('resize', updateCustomScrollbar);
+window.addEventListener('load', updateCustomScrollbar);
+
+// 3. Interactivity: Enable drag & drop for the scroll thumb
+let isDragging = false;
+let dragStartY = 0;
+let scrollStartY = 0;
+
+const thumb = document.getElementById('scroll-thumb');
+
+if (thumb) {
+  thumb.addEventListener('mousedown', function(e) {
+    isDragging = true;
+    dragStartY = e.clientY;
+    scrollStartY = scrollContainer.scrollTop;
+    e.preventDefault();
+  });
+}
+
+document.addEventListener('mousemove', function(e) {
+  if (!isDragging) return;
+  const containerHeight = scrollContainer.clientHeight;
+  const contentHeight = scrollContainer.scrollHeight;
+  const thumbHeight = thumb.offsetHeight;
+  
+  const maxScrollTop = contentHeight - containerHeight;
+  const maxThumbTop = containerHeight - thumbHeight;
+  
+  const deltaY = e.clientY - dragStartY;
+  // Calculate the new thumb top position
+  let newThumbTop = (scrollStartY / maxScrollTop) * maxThumbTop + deltaY;
+  newThumbTop = Math.max(0, Math.min(newThumbTop, maxThumbTop));
+  
+  // Calculate the new scroll position based on the thumb position
+  const newScrollTop = (newThumbTop / maxThumbTop) * maxScrollTop;
+  scrollContainer.scrollTop = newScrollTop;
+});
+
+document.addEventListener('mouseup', function(e) {
+  if (isDragging) {
+    isDragging = false;
+  }
+});

app/static/js/fullscreen.js

@@ -0,0 +1,110 @@
+/**
+ * Add or remove the `fullscreen=1` URL parameter.
+ * @param {boolean} enabled
+ */
+function updateUrlFullscreen(enabled) {
+  var url = new URL(window.location);
+  if (enabled) url.searchParams.set('fullscreen', '1');
+  else         url.searchParams.delete('fullscreen');
+  window.history.replaceState({}, '', url);
+}
+
+/**
+ * Starts a requestAnimationFrame loop that calls your recalc methods,
+ * and stops automatically when the header’s max-height transition ends.
+ */
+function recalcWhileCollapsing() {
+  const header = document.querySelector('header');
+  if (!header) return;
+
+  // 1) Start the RAF loop
+  let rafId;
+  const step = () => {
+    adjustScrollContainerHeight();
+    updateCustomScrollbar();
+    rafId = requestAnimationFrame(step);
+  };
+  step();
+
+  // 2) Listen for the end of the max-height transition
+  function onEnd(e) {
+    if (e.propertyName === 'max-height') {
+      cancelAnimationFrame(rafId);
+      header.removeEventListener('transitionend', onEnd);
+    }
+  }
+  header.addEventListener('transitionend', onEnd);
+}
+
+function enterFullscreen() {
+  document.body.classList.add('fullscreen');
+  setFullWidth(true);
+  updateUrlFullscreen(true);
+
+  // Nur jetzt sichtbar machen
+  const logo = document.getElementById('navbar_logo');
+  if (logo) {
+    logo.classList.add('visible');
+  }
+  recalcWhileCollapsing();
+}
+
+function exitFullscreen() {
+  document.body.classList.remove('fullscreen');
+  setFullWidth(false);
+  updateUrlFullscreen(false);
+
+  // Jetzt wieder verstecken
+  const logo = document.getElementById('navbar_logo');
+  if (logo) {
+    logo.classList.remove('visible');
+  }
+  recalcWhileCollapsing();
+}
+
+/**
+ * Toggle between enter and exit fullscreen.
+ */
+function toggleFullscreen() {
+  const params = new URLSearchParams(window.location.search);
+  const isFull = params.get('fullscreen') === '1';
+
+  if (isFull) exitFullscreen();
+  else        enterFullscreen();
+}
+
+/**
+ * Read `fullscreen` flag from URL on load.
+ * @returns {boolean}
+ */
+function initFullscreenFromUrl() {
+  return new URLSearchParams(window.location.search).get('fullscreen') === '1';
+}
+
+// On page load: apply fullwidth & fullscreen flags
+window.addEventListener('DOMContentLoaded', function() {
+  // first fullwidth
+  var wasFullWidth = initFullWidthFromUrl();
+  setFullWidth(wasFullWidth);
+
+  // now fullscreen
+  if (initFullscreenFromUrl()) {
+    enterFullscreen();
+  }
+});
+
+// Mirror native F11/fullscreen API events
+document.addEventListener('fullscreenchange', function() {
+  if (document.fullscreenElement) enterFullscreen();
+  else                            exitFullscreen();
+});
+window.addEventListener('resize', function() {
+  var isUiFs = Math.abs(window.innerHeight - screen.height) < 2;
+  if (isUiFs) enterFullscreen();
+  else         exitFullscreen();
+});
+
+// Expose globally
+window.fullscreen       = enterFullscreen;
+window.exitFullscreen   = exitFullscreen;
+window.toggleFullscreen = toggleFullscreen;

app/static/js/fullwidth.js

@@ -0,0 +1,42 @@
+/**
+ * Toggles the .container class between .container and .container-fluid.
+ * @param {boolean} enabled – true = full width, false = normal.
+ */
+function setFullWidth(enabled) {
+  var el = document.querySelector('.container, .container-fluid');
+  if (!el) return;
+  if (enabled) {
+    el.classList.replace('container', 'container-fluid');
+    updateUrlFullWidth(true);
+  } else {
+    el.classList.replace('container-fluid', 'container');
+    updateUrlFullWidth(false);
+  }
+}
+
+
+/**
+ * Reads the URL parameter `fullwidth` and applies full width if it's set.
+ * @returns {boolean} – current full‐width state
+ */
+function initFullWidthFromUrl() {
+  var isFull = new URLSearchParams(window.location.search).get('fullwidth') === '1';
+  setFullWidth(isFull);
+  return isFull;
+}
+
+/**
+ * Adds or removes the `fullwidth=1` URL parameter.
+ * @param {boolean} enabled
+ */
+function updateUrlFullWidth(enabled) {
+  var url = new URL(window.location);
+  if (enabled) url.searchParams.set('fullwidth', '1');
+  else        url.searchParams.delete('fullwidth');
+  window.history.replaceState({}, '', url);
+}
+
+// Expose globally
+window.setFullWidth         = setFullWidth;
+window.initFullWidthFromUrl = initFullWidthFromUrl;
+window.updateUrlFullWidth   = updateUrlFullWidth;

app/static/js/iframe.js

@@ -0,0 +1,189 @@
+// Global variables to store elements and original state
+let mainElement, originalContent, originalMainStyle, container, customScrollbar, scrollbarContainer;
+let currentIframeUrl = null;
+
+// === Auto-open iframe if URL parameter is present ===
+window.addEventListener('DOMContentLoaded', () => {
+  const paramUrl = new URLSearchParams(window.location.search).get('iframe');
+  if (paramUrl) {
+    currentIframeUrl = paramUrl;
+    enterFullscreen();
+    openIframe(paramUrl);
+  }
+});
+
+// Synchronize the height of the iframe to match the scroll-container or main element
+function syncIframeHeight() {
+    const iframe = mainElement.querySelector("iframe");
+    if (iframe) {
+        if (scrollbarContainer) {
+            // Prefer inline height, otherwise inline max-height
+            const inlineHeight = scrollbarContainer.style.height;
+            const inlineMax = scrollbarContainer.style.maxHeight;
+            const target = inlineHeight || inlineMax;
+            if (target) {
+                iframe.style.height = target;
+            } else {
+                iframe.style.height = mainElement.style.height;
+            }
+        } else {
+            iframe.style.height = mainElement.style.height;
+        }
+    }
+}
+
+// Function to open a URL in an iframe (jQuery version mit 1500 ms Fade)
+function openIframe(url) {
+    var $container    = scrollbarContainer    ? $(scrollbarContainer)    : null;
+    var $customScroll = customScrollbar       ? $(customScrollbar)       : null;
+    var $main         = $(mainElement);
+
+    // Original-Content ausblenden mit 1500 ms
+    var promises = [];
+    if ($container)    promises.push($container.fadeOut(1500).promise());
+    if ($customScroll) promises.push($customScroll.fadeOut(1500).promise());
+
+    $.when.apply($, promises).done(function() {
+        // now that scroll areas are hidden, go fullscreen
+        enterFullscreen();
+        // create iframe if it doesn’t exist yet
+        var $iframe = $main.find('iframe');
+        if ($iframe.length === 0) {
+            originalMainStyle = $main.attr('style') || null;
+            $iframe = $('<iframe>', {
+                width: '100%',
+                frameborder: 0,
+                scrolling: 'auto'
+            }).css({ overflow: 'auto', display: 'none' });
+            $main.append($iframe);
+        }
+
+        // Quelle setzen und mit 1500 ms einblenden
+        $iframe
+            .attr('src', url)
+            .fadeIn(1500, function() {
+                syncIframeHeight();
+                observeIframeNavigation();
+            });
+
+        // URL-State pushen
+        var newUrl = new URL(window.location);
+        newUrl.searchParams.set('iframe', url);
+        window.history.pushState({ iframe: url }, '', newUrl);
+    });
+}
+
+/**
+ * Restore the original <main> content and exit fullscreen.
+ */
+function restoreOriginal() {
+  // Exit fullscreen (collapse header/footer and run recalcs)
+  exitFullscreen();
+
+  // Replace <main> innerHTML with the snapshot we took on load
+  mainElement.innerHTML = originalContent;
+
+  // Reset any inline styles on mainElement
+  if (originalMainStyle !== null) {
+    mainElement.setAttribute('style', originalMainStyle);
+  } else {
+    mainElement.removeAttribute('style');
+  }
+
+  // Re-run height adjustments for scroll container & thumb
+  adjustScrollContainerHeight();
+  updateCustomScrollbar();
+
+  // Clear iframe state and URL param
+  currentIframeUrl = null;
+  history.replaceState(null, '', window.location.pathname);
+}
+
+// Initialize event listeners after DOM content is loaded
+document.addEventListener("DOMContentLoaded", function() {
+    // Cache references to elements and original state
+    mainElement = document.querySelector("main");
+    originalContent = mainElement.innerHTML;
+    originalMainStyle = mainElement.getAttribute("style");  // may be null
+    container = document.querySelector(".container");
+    customScrollbar = document.getElementById("custom-scrollbar");
+    scrollbarContainer = container.querySelector(".scroll-container")
+
+    document.querySelectorAll(".js-restore").forEach(el => {
+        el.style.cursor = "pointer";
+        el.addEventListener("click", restoreOriginal);
+    });
+
+    // === Close iframe & exit fullscreen when any .js-restore is clicked ===
+    document.querySelectorAll('.js-restore').forEach(el => {
+      el.style.cursor = 'pointer';
+      el.addEventListener('click', () => {
+        // first collapse header/footer and recalc container
+        exitFullscreen();
+        // then fade out and remove the iframe, fade content back
+        restoreOriginal();
+        // clear stored URL and reset browser address
+        currentIframeUrl = null;
+        history.replaceState(null, '', window.location.pathname);
+      });
+    });
+
+});
+
+/**
+ * Opens the current iframe URL in a new browser tab.
+ */
+function openIframeInNewTab() {
+  const params = new URLSearchParams(window.location.search);
+  const iframeUrl = params.get('iframe');
+  if (iframeUrl) {
+    window.open(iframeUrl, '_blank');
+  } else {
+    alert('No iframe is currently open.');
+  }
+}
+// expose globally so your template’s onclick can find it
+window.openIframeInNewTab = openIframeInNewTab;
+
+// Adjust iframe height on window resize
+window.addEventListener('resize', syncIframeHeight);
+
+/**
+ * Observe iframe location changes (Same-Origin only).
+ */
+function observeIframeNavigation() {
+  const iframe = mainElement.querySelector("iframe");
+  if (!iframe || !iframe.contentWindow) return;
+
+  let lastUrl = iframe.contentWindow.location.href;
+
+  setInterval(() => {
+    try {
+      const currentUrl = iframe.contentWindow.location.href;
+      if (currentUrl !== lastUrl) {
+        lastUrl = currentUrl;
+        const newUrl = new URL(window.location);
+        newUrl.searchParams.set('iframe', currentUrl);
+        window.history.replaceState({}, '', newUrl);
+      }
+    } catch (e) {
+      // Cross-origin – ignore
+    }
+  }, 500);
+}
+
+// Remember, open iframe, enter fullscreen, AND set the URL param immediately
+document.querySelectorAll(".iframe-link").forEach(link => {
+  link.addEventListener("click", function(event) {
+    event.preventDefault();
+    currentIframeUrl = this.href;
+
+    enterFullscreen();
+    openIframe(currentIframeUrl);
+
+    // Update the browser URL right away
+    const newUrl = new URL(window.location);
+    newUrl.searchParams.set('iframe', currentIframeUrl);
+    window.history.replaceState({ iframe: currentIframeUrl }, '', newUrl);
+  });
+});

app/static/js/modal.js

@@ -1,8 +1,5 @@
 function openDynamicPopup(subitem) {
-  // Schließe alle offenen Modals
   closeAllModals();
-
-  // Setze den Titel mit Icon, falls vorhanden
   const modalTitle = document.getElementById('dynamicModalLabel');
   if (subitem.icon && subitem.icon.class) {
     modalTitle.innerHTML = `<i class="${subitem.icon.class}"></i> ${subitem.name}`;
@@ -10,7 +7,6 @@ function openDynamicPopup(subitem) {
     modalTitle.innerText = subitem.name;
   }
 
-  // Setze den Identifier, falls vorhanden
   const identifierBox = document.getElementById('dynamicIdentifierBox');
   const modalContent = document.getElementById('dynamicModalContent');
   if (subitem.identifier) {
@@ -21,25 +17,19 @@ function openDynamicPopup(subitem) {
     modalContent.value = '';
   }
 
-  // Konfiguriere die Warnbox mit Markdown
-  const warningBox = document.getElementById('dynamicModalWarning');
-  if (subitem.warning) {
-    warningBox.classList.remove('d-none');
-    document.getElementById('dynamicModalWarningText').innerHTML = marked.parse(subitem.warning);
+  function toggleBox(boxId, textId, content) {
+    const box = document.getElementById(boxId);
+    if (content) {
+      box.classList.remove('d-none');
+      document.getElementById(textId).innerHTML = marked.parse(content);
     } else {
-    warningBox.classList.add('d-none');
+      box.classList.add('d-none');
+    }
   }
   
-  // Konfiguriere die Infobox mit Markdown
-  const infoBox = document.getElementById('dynamicModalInfo');
-  if (subitem.info) {
-    infoBox.classList.remove('d-none');
-    document.getElementById('dynamicModalInfoText').innerHTML = marked.parse(subitem.info);
-  } else {
-    infoBox.classList.add('d-none');
-  }
+  toggleBox('dynamicModalWarning', 'dynamicModalWarningText', subitem.warning);
+  toggleBox('dynamicModalInfo', 'dynamicModalInfoText', subitem.info);
 
-  // Zeige die Beschreibung, falls keine URL vorhanden ist
   const descriptionText = document.getElementById('dynamicDescriptionText');
   if (!subitem.url && subitem.description) {
     descriptionText.classList.remove('d-none');
@@ -49,41 +39,53 @@ function openDynamicPopup(subitem) {
     descriptionText.innerText = '';
   }
 
-  // Konfiguriere den Link oder die Beschreibung
   const linkBox = document.getElementById('dynamicModalLink');
   const linkHref = document.getElementById('dynamicModalLinkHref');
   if (subitem.url) {
     linkBox.classList.remove('d-none');
     linkHref.href = subitem.url;
     linkHref.innerText = subitem.description || "Open Link";
+    if (subitem.iframe) {
+      linkHref.classList.add('iframe');
+      // Attach an event listener that prevents the default behavior and
+      // opens the URL in an iframe when clicked.
+      linkHref.addEventListener('click', function(event) {
+        event.preventDefault();
+        openIframe(subitem.url);
+        closeAllModals()
+      });
+    }
   } else {
     linkBox.classList.add('d-none');
     linkHref.href = '#';
   }
+  function populateSection(sectionId, listId, items, onClickHandler) {
+    const section = document.getElementById(sectionId);
+    const list = document.getElementById(listId);
+    list.innerHTML = '';
   
-  // Konfiguriere die Alternativen
-  const alternativesSection = document.getElementById('dynamicAlternativesSection');
-  const alternativesList = document.getElementById('dynamicAlternativesList');
-  alternativesList.innerHTML = ''; // Clear existing alternatives
-  if (subitem.alternatives && subitem.alternatives.length > 0) {
-    alternativesSection.classList.remove('d-none');
-    subitem.alternatives.forEach(alt => {
+    if (items && items.length > 0) {
+      section.classList.remove('d-none');
+      items.forEach(item => {
         const listItem = document.createElement('li');
         listItem.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
         listItem.innerHTML = `
           <span>
-          <i class="${alt.icon.class}"></i> ${alt.name}
+            <i class="${item.icon.class}"></i> ${item.name}
           </span>
           <button class="btn btn-outline-secondary btn-sm">Open</button>
         `;
-      listItem.querySelector('button').addEventListener('click', () => openDynamicPopup(alt));
-      alternativesList.appendChild(listItem);
+        listItem.querySelector('button').addEventListener('click', () => onClickHandler(item));
+        list.appendChild(listItem);
       });
     } else {
-    alternativesSection.classList.add('d-none');
+      section.classList.add('d-none');
+    }
   }
   
-  // Kopierfunktion für den Identifier
+  populateSection('dynamicAlternativesSection', 'dynamicAlternativesList', subitem.alternatives, openDynamicPopup);
+  populateSection('dynamicChildrenSection', 'dynamicChildrenList', subitem.children, openDynamicPopup);  
+
   const copyButton = document.getElementById('dynamicCopyButton');
   copyButton.onclick = () => {
     modalContent.select();
@@ -92,25 +94,20 @@ function openDynamicPopup(subitem) {
     });
   };
 
-  // Modal anzeigen
   const modal = new bootstrap.Modal(document.getElementById('dynamicModal'));
   modal.show();
 }
 
 function closeAllModals() {
-  const modals = document.querySelectorAll('.modal.show'); // Alle offenen Modals finden
+  const modals = document.querySelectorAll('.modal.show');
   modals.forEach(modal => {
       const modalInstance = bootstrap.Modal.getInstance(modal);
       if (modalInstance) {
-          modalInstance.hide(); // Modal ausblenden
+          modalInstance.hide();
       }
   });
-
-  // Entferne die "modal-backdrop"-Elemente
   const backdrops = document.querySelectorAll('.modal-backdrop');
   backdrops.forEach(backdrop => backdrop.remove());
-
-  // Entferne die Klasse, die den Hintergrund ausgraut
   document.body.classList.remove('modal-open');
   document.body.style.overflow = '';
   document.body.style.paddingRight = '';

app/static/js/navigation.js

@@ -17,15 +17,15 @@ document.addEventListener('DOMContentLoaded', () => {
         }, 500);
       }
 
-      // Öffnen beim Hovern
+      // Open on hover
       item.addEventListener('mouseenter', onMouseEnter);
 
-      // Verzögertes Schließen beim Verlassen
+      // Delayed close on mouse leave
       item.addEventListener('mouseleave', onMouseLeave);
 
-      // Öffnen und Position anpassen beim Klicken
+      // Open and adjust position on click
       item.addEventListener('click', (e) => {
-        e.stopPropagation(); // Verhindert das Schließen von Menüs bei Klick
+        e.stopPropagation(); // Prevents menus from closing when clicking inside
         if (item.classList.contains('open')) {
           closeMenu(item);
         } else {
@@ -44,7 +44,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   addAllMenuEventListeners();
 
-  // Globale Klick-Listener, um Menüs zu schließen, wenn außerhalb geklickt wird
+  // Global click listener to close menus when clicking outside
   document.addEventListener('click', () => {
     [...menuItems, ...subMenuItems].forEach(item => closeMenu(item));
   });
@@ -70,25 +70,32 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  function isSmallScreen() {
+    return window.innerWidth < 992; // Bootstrap breakpoint for 'lg'
+  }
+    
   function adjustMenuPosition(submenu, parent, isTopLevel) {
     const rect = submenu.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
 
-    // Platzberechnung
     const spaceAbove = parentRect.top;
     const spaceBelow = window.innerHeight - parentRect.bottom;
     const spaceLeft = parentRect.left;
     const spaceRight = window.innerWidth - parentRect.right;
 
-    // Standardpositionierung
     submenu.style.top = '';
     submenu.style.bottom = '';
     submenu.style.left = '';
     submenu.style.right = '';
 
     if (isTopLevel) {
-      // Top-Level-Menüs öffnen nur nach oben oder unten
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
+      if (isSmallScreen() && spaceBelow < spaceAbove) {
+        // For small screens: Open menu directly above the parent element
+        submenu.style.top = 'auto';
+        submenu.style.bottom = `${parentRect.height}px`; // Directly above the parent element
+      } 
+      // Top-level menu
+      else if (spaceBelow < spaceAbove) {
         submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
         submenu.style.top = 'auto';
       } else {
@@ -96,18 +103,18 @@ document.addEventListener('DOMContentLoaded', () => {
         submenu.style.bottom = 'auto';
       }
     } else {
-      // Submenüs öffnen in die Richtung mit mehr Platz
+      // Submenu
       const prefersRight = spaceRight >= spaceLeft;
       submenu.style.left = prefersRight ? '100%' : 'auto';
       submenu.style.right = prefersRight ? 'auto' : '100%';
 
-      // Öffnen nach oben, wenn unten kein Platz ist
-      if (spaceBelow < rect.height && spaceAbove > rect.height) {
-        submenu.style.top = 'auto';
-        submenu.style.bottom = `${parentRect.bottom - parentRect.top - rect.height}px`; // Höhe des Submenüs wird berücksichtigt
+      // Open upwards if there's no space below
+      if (spaceBelow < spaceAbove) {
+        submenu.style.bottom = `0`;
+        submenu.style.top = `auto`;
       } else {
-        submenu.style.top = '0';
-        submenu.style.bottom = 'auto';
+        submenu.style.top = `0`;
+        submenu.style.bottom = `${parentRect.height}px`;
       }
     }
   }

app/static/js/tooltip.js

@@ -1,4 +1,4 @@
-// Initialisiert alle Tooltips auf der Seite
+// Initializes all tooltips on the page
 document.addEventListener('DOMContentLoaded', function () {
     var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
     tooltipTriggerList.forEach(function (tooltipTriggerEl) {

app/templates/moduls/base.html.j2

@@ -1,9 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title>{{company.titel}}</title>
+        <title>{{platform.titel}}</title>
         <meta charset="utf-8" >
-        <link rel="icon" type="image/x-icon" href="{{company.favicon.cache}}">
+        <link
+            rel="icon"
+            type="image/x-icon"
+            href="{% if platform.favicon.cache %}{{ url_for('static', filename=platform.favicon.cache) }}{% endif %}"
+        >
         <!-- Bootstrap CSS only -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
         <!-- Bootstrap JavaScript Bundle with Popper -->
@@ -14,19 +18,44 @@
         <script src="https://kit.fontawesome.com/56f96da298.js" crossorigin="anonymous"></script>
         <!-- Markdown -->
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-        <link rel="stylesheet" href="static/css/default.css">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/custom_scrollbar.css') }}">
+        <!-- JQuery -->
+        <script
+        src="https://code.jquery.com/jquery-3.6.0.min.js"
+        crossorigin="anonymous">
+        </script>
     </head>
-    <body>
+    <body
+      {% if apod_bg %}
+        style="
+          background-image: url('{{ apod_bg }}');
+          background-size: cover;
+          background-position: center;
+          background-attachment: fixed;
+        "
+      {% endif %}
+    >
         <div class="container">
-            <header class="header">
-              <img src="{{company.logo.cache}}" alt="logo"/>
-              <h1>{{company.titel}}</h1>
-              <h2>{{company.subtitel}}</h2>
-              <br />
+            <header class="header js-restore">
+              <img
+                src="{{ url_for('static', filename=platform.logo.cache) }}"
+                alt="logo"
+              />
+              <h1>{{platform.titel}}</h1>
+              <h2>{{platform.subtitel}}</h2>
             </header>
             {% set menu_type = "header" %}
             {% include "moduls/navigation.html.j2"%}
+            <main id="main">
+            <div class="scroll-container">
                 {% block content %}{% endblock %}
+            </div>
+            </main>
+            <!-- Custom scrollbar element fixiert am rechten Rand  -->
+            <div id="custom-scrollbar">
+                <div id="scroll-thumb"></div>
+            </div>
             {% set menu_type = "footer" %}
             {% include "moduls/navigation.html.j2" %}
             <footer class="footer">
@@ -34,14 +63,22 @@
                     <p itemprop="name">{{ company.titel }} <br />
                     {{ company.subtitel }}</p>
                     <span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
-                    <p><a href="{{company.imprint_url}}"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
+                    <p><a href="{{company.imprint_url}}" class="iframe-link"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
                 </div>
             </footer>
         </div>
         <!-- Include modal -->
         {% include "moduls/modal.html.j2" %}
-        <script src="{{ url_for('static', filename='js/modal.js') }}"></script>
-        <script src="{{ url_for('static', filename='js/navigation.js') }}"></script>
-        <script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
+        {% for name in [
+            'modal',
+            'navigation',
+            'tooltip',
+            'container',
+            'fullwidth',
+            'fullscreen',
+            'iframe',
+        ] %}
+        <script src="{{ url_for('static', filename='js/' ~ name ~ '.js') }}"></script>
+        {% endfor %}
     </body>
 </html>

app/templates/moduls/card.html.j2

@@ -1,14 +1,31 @@
-<div class="card-column col-lg-3 col-md-6 col-12">
+<div class="card-column {{ lg_class }} {{ md_class }} col-12">
   <div class="card h-100 d-flex flex-column">
     <div class="card-body d-flex flex-column">
       <div class="card-img-top">
-                <img src="{{ card.icon.cache }}" alt="{{ card.title }}" style="width: 100px; height: auto;">
+        {% if card.icon.cache and card.icon.cache.endswith('.svg') %}
+          {{ include_svg(card.icon.cache) }}
+        {% elif card.icon.cache %}
+          <img
+            src="{{ url_for('static', filename=card.icon.cache) }}"
+            alt="{{ card.title }}"
+            style="width:100px; height:auto;"
+            onerror="this.style.display='none'; this.nextElementSibling?.style.display='inline-block';">
+          {% if card.icon.class %}
+            <i class="{{ card.icon.class }}" style="display:none;"></i>
+          {% endif %}
+        {% elif card.icon.class %}
+          <i class="{{ card.icon.class }}"></i>
+        {% endif %}
       </div>
       <hr />
       <h3 class="card-title">{{ card.title }}</h3>
       <p class="card-text">{{ card.text }}</p>
       {% if card.url %}
-                <a  href="{{ card.url }}" class="mt-auto btn btn-light stretched-link" ><i class="fa-solid fa-globe"></i> {{ card.link_text }}</a>
+        <a
+          href="{{ card.url }}"
+          class="mt-auto btn btn-light stretched-link {% if card.iframe %}iframe-link{% endif %}">
+          <i class="fa-solid fa-globe"></i> {{ card.link_text }}
+        </a>
       {% else %}
         <i class="fa-solid fa-hourglass"></i> {{ card.link_text }}
       {% endif %}

app/templates/moduls/modal.html.j2

@@ -1,3 +1,16 @@
+{% macro alert_box(id, alert_class, icon_class, title, text_id) %}
+<div id="{{ id }}" class="alert {{ alert_class }} d-none" role="alert">
+  <h5><i class="{{ icon_class }}"></i> {{ title }} </h5><span id="{{ text_id }}"></span>
+</div>
+{% endmacro %}
+
+{% macro list_section(id, title, list_id) %}
+<div id="{{ id }}" class="mt-4 d-none">
+  <h6>{{ title }}:</h6>
+  <ul class="list-group" id="{{ list_id }}"></ul>
+</div>
+{% endmacro %}
+
 <div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -6,30 +19,31 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <!-- Warnbox mit Markdown -->
-        <div id="dynamicModalWarning" class="alert alert-warning d-none" role="alert">
-          <h5><i class="fa-solid fa-triangle-exclamation"></i> Warning </h5><span id="dynamicModalWarningText"></span>
-        </div>
-        <!-- Infobox mit Markdown -->
-        <div id="dynamicModalInfo" class="alert alert-info d-none" role="alert">
-          <h5><i class="fa-solid fa-circle-info"></i> Information</h5><span id="dynamicModalInfoText"></span>
-        </div>
+        <!-- Warning box with Markdown -->
+        {{ alert_box('dynamicModalWarning', 'alert-warning', 'fa-solid fa-triangle-exclamation', 'Warning', 'dynamicModalWarningText') }}
+        
+        <!-- Info box with Markdown -->
+        {{ alert_box('dynamicModalInfo', 'alert-info', 'fa-solid fa-circle-info', 'Information', 'dynamicModalInfoText') }}
+
         <!-- Description text -->
         <div id="dynamicDescriptionText" class="mt-2 d-none"></div>
-        <!-- Eingabebox für Identifier -->
+
+        <!-- Input box for Identifier -->
         <div id="dynamicIdentifierBox" class="input-group mt-2 d-none">
           <input type="text" id="dynamicModalContent" class="form-control" readonly>
           <button class="btn btn-outline-secondary" type="button" id="dynamicCopyButton">Copy</button>
         </div>
+
         <!-- Link -->
         <div id="dynamicModalLink" class="mt-3 d-none">
           <a href="#" target="_blank" class="btn btn-primary w-100" id="dynamicModalLinkHref"></a>
         </div>
-        <!-- Alternativen -->
-        <div id="dynamicAlternativesSection" class="mt-4 d-none">
-          <h6>Alternatives:</h6>
-          <ul class="list-group" id="dynamicAlternativesList"></ul>
-        </div>
+
+        <!-- Options -->
+        {{ list_section('dynamicChildrenSection', 'Options', 'dynamicChildrenList') }}
+
+        <!-- Alternatives -->
+        {{ list_section('dynamicAlternativesSection', 'Alternatives', 'dynamicAlternativesList') }}
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="closeAllModals()">Close</button>

app/templates/moduls/navigation.html.j2

@@ -8,26 +8,39 @@
 {% endmacro %}
 <!-- Template for children -->
 {% macro render_children(children) %}
-    {% for children in children %}
-        {% if children.children %}
+  {% for child in children %}
+    {% if child.children %}
       <li class="dropdown-submenu position-relative">
-                <a class="dropdown-item dropdown-toggle" title="{{ children.description }}">
-                    {{ render_icon_and_name(children) }}
+        <a class="dropdown-item dropdown-toggle" title="{{ child.description }}">
+          {{ render_icon_and_name(child) }}
         </a>
         <ul class="dropdown-menu">
-                    {{ render_children(children.children) }}
+          {{ render_children(child.children) }}
         </ul>
       </li>
-        {% elif children.identifier or children.warning or children.info %}
+
+    {% elif child.identifier or child.warning or child.info %}
       <li>
-                <a class="dropdown-item" onclick='openDynamicPopup({{ children|tojson|safe }})' data-bs-toggle="tooltip" title="{{ children.description }}">
-                    {{ render_icon_and_name(children) }}
+        <a class="dropdown-item"
+           onclick='openDynamicPopup({{ child|tojson|safe }})'
+           data-bs-toggle="tooltip"
+           title="{{ child.description }}">
+          {{ render_icon_and_name(child) }}
         </a>
       </li>
+
     {% else %}
       <li>
-                <a class="dropdown-item" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
-                     {{ render_icon_and_name(children) }}
+        <a class="dropdown-item {% if child.iframe %}iframe-link{% endif %}"
+           {% if child.onclick %}
+             onclick="{{ child.onclick }}"
+           {% else %}
+             href="{{ child.url }}"
+           {% endif %}
+           target="{{ child.target|default('_blank') }}"
+           data-bs-toggle="tooltip"
+           title="{{ child.description }}">
+          {{ render_icon_and_name(child) }}
         </a>
       </li>
     {% endif %}
@@ -35,25 +48,44 @@
 {% endmacro %}
 
 <!-- Navigation Bar -->
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div class="container-fluid">
+<nav class="navbar navbar-expand-lg navbar-light bg-light menu-{{menu_type}} mb-0">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
-            <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %}">
+        {% if menu_type == "header" %}
+        <a class="navbar-brand align-items-center d-flex js-restore" id="navbar_logo" href="#">
+            <img 
+                src="{{ url_for('static', filename=platform.logo.cache) }}" 
+                alt="{{ platform.titel }}" 
+                class="d-inline-block align-text-top"
+                style="height:2rem">
+            <div class="ms-2 d-flex flex-column">
+                <span class="fs-4 fw-bold mb-0">{{ platform.titel }}</span>
+                {# <small class="fs-7 text-muted">{{ platform.subtitel }}</small> #}
+            </div>
+            {% endif %}
+        </a>
+        <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
             {% for item in navigation[menu_type].children %}
-                    {% if item.url %}
-                        <!-- Single Item -->
+                {% if item.url or item.onclick %}
                     <li class="nav-item">
-                            <a class="nav-link" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
+                    <a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}"
+                        {% if item.onclick %}
+                        onclick="{{ item.onclick }}"
+                        {% else %}
+                        href="{{ item.url }}"
+                        {% endif %}
+                        target="{{ item.target|default('_blank') }}"
+                        data-bs-toggle="tooltip"
+                        title="{{ item.description }}">
                         {{ render_icon_and_name(item) }}
                     </a>
                     </li>
                 {% else %}        
                 <!-- Dropdown Menu -->
                     <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle" id="navbarDropdown{{ loop.index }}" role="button" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle btn btn-light" id="navbarDropdown{{ loop.index }}" role="button" data-bs-display="dynamic" aria-expanded="false">
                             {% if item.icon is defined and item.icon.class is defined %}
                                 {{ render_icon_and_name(item) }}
                             {% else %}
@@ -68,5 +100,4 @@
             {% endfor %}
         </ul>
     </div>
-    </div>
 </nav>

app/templates/pages/index.html.j2

@@ -3,6 +3,9 @@
 {% block content %}
 <div class="row">
     {% for card in cards %}
+        {% set index = loop.index0 %}
+        {% set lg_class = lg_classes[index] %}
+        {% set md_class = md_classes[index] %}
         {% include "moduls/card.html.j2" %}
     {% endfor %}
 </div>

app/utils/cache_manager.py

@@ -1,66 +1,45 @@
 import os
 import hashlib
 import requests
+import mimetypes
 
 class CacheManager:
-    """
-    A class to manage caching of files, including creating temporary directories
-    and caching files locally with hashed filenames.
-    """
-
     def __init__(self, cache_dir="static/cache"):
-        """
-        Initialize the CacheManager with a cache directory.
-
-        :param cache_dir: The directory where cached files will be stored.
-        """
         self.cache_dir = cache_dir
         self._ensure_cache_dir_exists()
 
     def _ensure_cache_dir_exists(self):
-        """
-        Ensure the cache directory exists. If it doesn't, create it.
-        """
         if not os.path.exists(self.cache_dir):
             os.makedirs(self.cache_dir)
 
     def clear_cache(self):
-        """
-        Clear all files in the cache directory.
-        """
         if os.path.exists(self.cache_dir):
             for filename in os.listdir(self.cache_dir):
-                file_path = os.path.join(self.cache_dir, filename)
-                if os.path.isfile(file_path):
-                    os.remove(file_path)
+                path = os.path.join(self.cache_dir, filename)
+                if os.path.isfile(path):
+                    os.remove(path)
 
     def cache_file(self, file_url):
-        """
-        Download a file and store it locally in the cache directory with a hashed filename.
+        # generate a short hash for filename
+        hash_suffix = hashlib.blake2s(file_url.encode('utf-8'), digest_size=8).hexdigest()
+        parts = file_url.rstrip("/").split("/")
+        base = parts[-2] if parts[-1] == "download" else parts[-1]
 
-        :param file_url: The URL of the file to cache.
-        :return: The local path of the cached file.
-        """
-        # Generate a hashed filename based on the URL
-        hash_object = hashlib.blake2s(file_url.encode('utf-8'), digest_size=8)
-        hash_suffix = hash_object.hexdigest()
+        try:
+            resp = requests.get(file_url, stream=True, timeout=5)
+            resp.raise_for_status()
+        except requests.RequestException:
+            return None
 
-        # Determine the base name for the file
-        splitted_file_url = file_url.split("/")
-        base_name = splitted_file_url[-2] if splitted_file_url[-1] == "download" else splitted_file_url[-1]
-
-        # Construct the full path for the cached file
-        filename = f"{base_name}_{hash_suffix}.png"
+        content_type = resp.headers.get('Content-Type', '')
+        ext = mimetypes.guess_extension(content_type.split(";")[0].strip()) or ".png"
+        filename = f"{base}_{hash_suffix}{ext}"
         full_path = os.path.join(self.cache_dir, filename)
 
-        # If the file already exists, return the cached path
-        if os.path.exists(full_path):
-            return full_path
+        if not os.path.exists(full_path):
+            with open(full_path, "wb") as f:
+                for chunk in resp.iter_content(1024):
+                    f.write(chunk)
 
-        # Download the file and save it locally
-        response = requests.get(file_url, stream=True)
-        if response.status_code == 200:
-            with open(full_path, "wb") as file:
-                for chunk in response.iter_content(1024):
-                    file.write(chunk)
-        return full_path
+        # return path relative to /static/
+        return f"cache/{filename}"

app/utils/compute_card_classes.py

@@ -0,0 +1,42 @@
+def compute_card_classes(cards):
+    num_cards = len(cards)
+    lg_classes = []
+    if num_cards < 3:
+        if num_cards == 2:
+            lg_classes = ["col-lg-6", "col-lg-6"]
+        else:
+            lg_classes = ["col-lg-12"]
+    elif num_cards % 4 == 0:
+        lg_classes = ["col-lg-3"] * num_cards
+    elif num_cards % 3 == 0:
+        lg_classes = ["col-lg-4"] * num_cards
+    elif num_cards % 2 == 0:
+        lg_classes = ["col-lg-6"] * num_cards
+    else:
+        # For complex cases (e.g., 5, 7, 11) – Ensure at least 3 per row
+        for i in range(num_cards):
+            if num_cards % 4 == 3:
+                if i < 3:
+                    lg_classes.append("col-lg-4")
+                else:
+                    lg_classes.append("col-lg-3")
+            elif num_cards % 4 == 1:
+                if i < 2:
+                    lg_classes.append("col-lg-6")
+                elif i < 5:
+                    lg_classes.append("col-lg-4")
+                else:
+                    lg_classes.append("col-lg-3")
+            elif num_cards % 3 == 2:
+                if i < 2:
+                    lg_classes.append("col-lg-6")
+                else:
+                    lg_classes.append("col-lg-4")
+    # md classes: If the number of cards is even or if not the last card, otherwise "col-md-12"
+    md_classes = []
+    for i in range(num_cards):
+        if num_cards % 2 == 0 or i < num_cards - 1:
+            md_classes.append("col-md-6")
+        else:
+            md_classes.append("col-md-12")
+    return lg_classes, md_classes

app/utils/configuration_resolver.py

@@ -46,7 +46,7 @@ class ConfigurationResolver:
                         raise ValueError(f"Expected 'children' to be a list, but got {type(value).__name__} instead.")
                     for item in value:
                         if "link" in item:
-                            loaded_link = self._find_entry(root_config, item['link'].lower(), False)
+                            loaded_link = self._find_entry(root_config, self._mapped_key(item['link']), False)
                             if isinstance(loaded_link, list):
                                 self._replace_in_list_by_list(value,item,loaded_link)
                             else:
@@ -55,15 +55,15 @@ class ConfigurationResolver:
                             self._recursive_resolve(value, root_config)            
                 elif key == "link":
                     try:
-                        loaded = self._find_entry(root_config, value.lower(), True)
+                        loaded = self._find_entry(root_config, self._mapped_key(value), False)
                         if isinstance(loaded, list) and len(loaded) > 2:
-                            loaded = self._find_entry(root_config, value.lower(), False)  
+                            loaded = self._find_entry(root_config, self._mapped_key(value), False)  
                         current_config.clear()
                         current_config.update(loaded)
                     except Exception as e: 
                         raise ValueError(
                             f"Error resolving link '{value}': {str(e)}. "
-                            f"Current path: {key}, Current config: {current_config}" + (f", Loaded: {loaded}" if 'loaded' in locals() or 'loaded' in globals() else "")
+                            f"Current part: {key}, Current config: {current_config}" + (f", Loaded: {loaded}" if 'loaded' in locals() or 'loaded' in globals() else "")
                         )
                 else:
                     self._recursive_resolve(value, root_config)
@@ -76,9 +76,12 @@ class ConfigurationResolver:
             current = current["children"]
         return current
 
+    def _mapped_key(self,name):
+        return name.replace(" ", "").lower()
+        
     def _find_by_name(self,current, part):
         return next(
-                    (item for item in current if isinstance(item, dict) and item.get("name", "").lower() == part),
+                    (item for item in current if isinstance(item, dict) and self._mapped_key(item.get("name", "")) == part),
                     None
                 )
 
@@ -108,9 +111,17 @@ class ConfigurationResolver:
                         )
             elif isinstance(current, dict):
                 # Case-insensitive dictionary lookup
-                key = next((k for k in current if k.lower() == part), None)
+                key = next((k for k in current if self._mapped_key(k) == part), None)
+                # If no fitting key was found search in the children
                 if key is None:
+                    if "children" not in current:
+                        raise KeyError(
+                        f"No 'children' found in current dictionary. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "
+                        f"Current dictionary: {current}"
+                    )
+                    # The following line seems buggy; Why is children loaded allways and not just when children is set?
                     current = self._find_by_name(current["children"],part)
+                    
                     if not current:
                         raise KeyError(
                             f"Key '{part}' not found in dictionary. Path so far: {' > '.join(parts[:parts.index(part)+1])}. "

docker-compose.yml

@@ -1,12 +1,15 @@
+version: '3.8'
+
 services:
-  landingpage:
+  portfolio:
     build:
       context: .
       dockerfile: Dockerfile
-    image: application-landingpage
-    container_name: landingpage
+    container_name: portfolio
     ports:
-      - "5000:5000"
+      - "${PORT:-5000}:${PORT:-5000}"
+    env_file:
+      - .env
     volumes:
       - ./app:/app
     restart: unless-stopped

env.example

@@ -0,0 +1,2 @@
+PORT=5001
+FLASK_ENV=production

main.py

@@ -0,0 +1,84 @@
+#!/usr/bin/env python3
+"""
+main.py - Proxy to Makefile targets for managing the Portfolio CMS Docker application.
+Automatically generates CLI commands based on the Makefile definitions.
+"""
+import argparse
+import subprocess
+import sys
+import os
+import re
+from pathlib import Path
+
+MAKEFILE_PATH = Path(__file__).resolve().parent / "Makefile"
+
+
+def load_targets(makefile_path):
+    """
+    Parse the Makefile to extract targets and their help comments.
+    Assumes each target is defined as 'name:' and the following line that starts
+    with '\t#' provides its help text.
+    """
+    targets = []
+    pattern = re.compile(r"^([A-Za-z0-9_\-]+):")
+    with open(makefile_path, 'r') as f:
+        lines = f.readlines()
+    for idx, line in enumerate(lines):
+        m = pattern.match(line)
+        if m:
+            name = m.group(1)
+            help_text = ''
+            # look for next non-empty line
+            if idx + 1 < len(lines) and lines[idx+1].lstrip().startswith('#'):
+                help_text = lines[idx+1].lstrip('# ').strip()
+            targets.append((name, help_text))
+    return targets
+
+
+def run_command(command, dry_run=False):
+    """Utility to run shell commands."""
+    print(f"Executing: {' '.join(command)}")
+    if dry_run:
+        print("Dry run enabled: command not executed.")
+        return
+    try:
+        subprocess.check_call(command)
+    except subprocess.CalledProcessError as e:
+        print(f"Error: Command failed with exit code {e.returncode}")
+        sys.exit(e.returncode)
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="CLI proxy to Makefile targets for Portfolio CMS Docker app"
+    )
+    parser.add_argument(
+        "--dry-run",
+        action="store_true",
+        help="Print the generated Make command without executing it."
+    )
+
+    subparsers = parser.add_subparsers(
+        title="Available commands",
+        dest="command",
+        required=True
+    )
+
+    targets = load_targets(MAKEFILE_PATH)
+    for name, help_text in targets:
+        sp = subparsers.add_parser(name, help=help_text)
+        sp.set_defaults(target=name)
+
+    args = parser.parse_args()
+
+    if not args.command:
+        parser.print_help()
+        sys.exit(1)
+
+    cmd = ["make", args.target]
+    run_command(cmd, dry_run=args.dry_run)
+
+
+if __name__ == "__main__":
+    from pathlib import Path
+    main()

requirements.txt

@@ -0,0 +1 @@
+python-dotenv