Added warnings

app/config.yaml

@@ -170,11 +170,26 @@ navigation:
         class: fa-solid fa-envelope
       url: mailto:kevin@veen.world
       identifier: kevin@veen.world
+      alternatives:
+        - link: navigation.header.contact.matrix
     - name: Matrix
       description: Chat with me on Matrix
       icon:
         class: fa-solid fa-cubes
       identifier: "@kevinveenbirkenbach:veen.world"
+      info: |
+        #### Why Use Matrix?
+        Matrix is a secure, decentralized communication platform that ensures privacy and control over your data. Learn more about [Matrix](https://matrix.org/).
+
+        #### Privacy and Security
+        End-to-end encryption keeps your conversations private and secure.
+
+        #### Decentralized and Open
+        Matrix's federated network means you can host your own server or use any provider while staying connected.
+
+        #### A Movement for Digital Freedom
+        By using Matrix, you support open, transparent, and secure communication.
+
     - name: Mobile
       description: Call me
       icon:
@@ -183,10 +198,24 @@ navigation:
       identifier: "+491781798023"
       target: _top
     - name: Encrypted Email (PGP)
-      description: Access my PGP key
+      description: Download my PGP key
       icon:
         class: fa-solid fa-key
       url: https://s.veen.world/pgp
+      identifier: kevin@veen.world
+      info: |
+        #### Why Use PGP?
+        PGP ensures your email content stays private, protecting against surveillance, data breaches, and unauthorized access.
+
+        #### Protect Your Privacy
+        In an age of mass data collection, PGP empowers you to communicate securely and assert control over your information. For insights on protecting your digital rights, visit the [Electronic Frontier Foundation (EFF)](https://www.eff.org/).
+
+        #### Build Trust
+        Encrypting emails demonstrates a commitment to privacy and security, fostering trust in professional and personal communication.
+
+        #### Stand for Security
+        Using PGP is more than a tool—it's a statement about valuing freedom, privacy, and the security of digital communication. Explore the principles of secure communication with [privacy guides](https://privacyguides.org/).
+
     - name: Signal
       description: Message me on Signal
       icon:
@@ -211,9 +240,13 @@ navigation:
         class: fa-brands fa-whatsapp
       url: https://wa.me/491781798023
       identifier: "+491781798023"
-      warning: Whatsapp is not hosted by me!
+      warning: |
+        ⚠️ **Caution with Meta Services**  
+        Using software and platforms from the Meta corporation (e.g., Facebook, Instagram, WhatsApp) may compromise your data privacy and digital freedom due to centralized control, extensive data collection practices, and inconsistent moderation policies. These platforms often fail to adequately address harmful content, misinformation, and abuse.  
+        📌 **Recommendation:** Consider using decentralized and privacy-respecting alternatives to maintain control over your data, improve security, and foster healthier online interactions.
       alternatives:
         - link: navigation.header.contact.matrix
+
   footer:
   - name: External Accounts
     description: Me on other plattforms

app/static/js/modal.js

@@ -21,6 +21,24 @@ 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);
+  } else {
+    warningBox.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');
+  }
+
   // Zeige die Beschreibung, falls keine URL vorhanden ist
   const descriptionText = document.getElementById('dynamicDescriptionText');
   if (!subitem.url && subitem.description) {
@@ -31,24 +49,6 @@ function openDynamicPopup(subitem) {
     descriptionText.innerText = '';
   }
 
-  // Konfiguriere die Warnbox
-  const warningBox = document.getElementById('dynamicModalWarning');
-  if (subitem.warning) {
-      warningBox.classList.remove('d-none');
-      document.getElementById('dynamicModalWarningText').innerText = subitem.warning;
-  } else {
-      warningBox.classList.add('d-none');
-  }
-
-  // Konfiguriere die Infobox
-  const infoBox = document.getElementById('dynamicModalInfo');
-  if (subitem.info) {
-      infoBox.classList.remove('d-none');
-      document.getElementById('dynamicModalInfoText').innerText = subitem.info;
-  } else {
-      infoBox.classList.add('d-none');
-  }
-
   // Konfiguriere den Link oder die Beschreibung
   const linkBox = document.getElementById('dynamicModalLink');
   const linkHref = document.getElementById('dynamicModalLinkHref');

app/templates/moduls/base.html.j2

@@ -12,6 +12,8 @@
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
         <!-- Fontawesome -->
         <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">
     </head>
     <body>

app/templates/moduls/modal.html.j2

@@ -6,26 +6,26 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <!-- Warnbox, falls vorhanden -->
+        <!-- Warnbox mit Markdown -->
         <div id="dynamicModalWarning" class="alert alert-warning d-none" role="alert">
-          <i class="fa-solid fa-triangle-exclamation"></i> <span id="dynamicModalWarningText"></span>
+          <h5><i class="fa-solid fa-triangle-exclamation"></i> Warning </h5><span id="dynamicModalWarningText"></span>
         </div>
-        <!-- Infobox, falls vorhanden -->
+        <!-- Infobox mit Markdown -->
         <div id="dynamicModalInfo" class="alert alert-info d-none" role="alert">
-          <i class="fa-solid fa-circle-info"></i> <span id="dynamicModalInfoText"></span>
+          <h5><i class="fa-solid fa-circle-info"></i> Information</h5><span id="dynamicModalInfoText"></span>
         </div>
-        <!-- Description text, falls vorhanden -->
+        <!-- Description text -->
         <div id="dynamicDescriptionText" class="mt-2 d-none"></div>
         <!-- Eingabebox für 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, falls vorhanden -->
+        <!-- Link -->
         <div id="dynamicModalLink" class="mt-3 d-none">
           <a href="#" target="_blank" class="btn btn-primary w-100" id="dynamicModalLinkHref"></a>
         </div>
-        <!-- Alternativen, falls vorhanden -->
+        <!-- Alternativen -->
         <div id="dynamicAlternativesSection" class="mt-4 d-none">
           <h6>Alternatives:</h6>
           <ul class="list-group" id="dynamicAlternativesList"></ul>