mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-01-15 11:13:59 +01:00
Added warnings
This commit is contained in:
parent
378ee4632f
commit
2a3491b98b
@ -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
|
||||
|
||||
@ -5,60 +5,60 @@ function openDynamicPopup(subitem) {
|
||||
// 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}`;
|
||||
modalTitle.innerHTML = `<i class="${subitem.icon.class}"></i> ${subitem.name}`;
|
||||
} else {
|
||||
modalTitle.innerText = subitem.name;
|
||||
modalTitle.innerText = subitem.name;
|
||||
}
|
||||
|
||||
// Setze den Identifier, falls vorhanden
|
||||
const identifierBox = document.getElementById('dynamicIdentifierBox');
|
||||
const modalContent = document.getElementById('dynamicModalContent');
|
||||
if (subitem.identifier) {
|
||||
identifierBox.classList.remove('d-none');
|
||||
modalContent.value = subitem.identifier;
|
||||
identifierBox.classList.remove('d-none');
|
||||
modalContent.value = subitem.identifier;
|
||||
} else {
|
||||
identifierBox.classList.add('d-none');
|
||||
modalContent.value = '';
|
||||
identifierBox.classList.add('d-none');
|
||||
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) {
|
||||
descriptionText.classList.remove('d-none');
|
||||
descriptionText.innerText = subitem.description;
|
||||
descriptionText.classList.remove('d-none');
|
||||
descriptionText.innerText = subitem.description;
|
||||
} else {
|
||||
descriptionText.classList.add('d-none');
|
||||
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');
|
||||
descriptionText.classList.add('d-none');
|
||||
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";
|
||||
linkBox.classList.remove('d-none');
|
||||
linkHref.href = subitem.url;
|
||||
linkHref.innerText = subitem.description || "Open Link";
|
||||
} else {
|
||||
linkBox.classList.add('d-none');
|
||||
linkHref.href = '#';
|
||||
linkBox.classList.add('d-none');
|
||||
linkHref.href = '#';
|
||||
}
|
||||
|
||||
// Konfiguriere die Alternativen
|
||||
@ -66,28 +66,28 @@ function openDynamicPopup(subitem) {
|
||||
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 => {
|
||||
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}
|
||||
</span>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick='openDynamicPopup(${JSON.stringify(alt)})'>Open</button>
|
||||
`;
|
||||
alternativesList.appendChild(listItem);
|
||||
});
|
||||
alternativesSection.classList.remove('d-none');
|
||||
subitem.alternatives.forEach(alt => {
|
||||
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}
|
||||
</span>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick='openDynamicPopup(${JSON.stringify(alt)})'>Open</button>
|
||||
`;
|
||||
alternativesList.appendChild(listItem);
|
||||
});
|
||||
} else {
|
||||
alternativesSection.classList.add('d-none');
|
||||
alternativesSection.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Kopierfunktion für den Identifier
|
||||
document.getElementById('dynamicCopyButton').addEventListener('click', function () {
|
||||
modalContent.select();
|
||||
navigator.clipboard.writeText(modalContent.value).then(() => {
|
||||
alert('Identifier copied to clipboard!');
|
||||
});
|
||||
modalContent.select();
|
||||
navigator.clipboard.writeText(modalContent.value).then(() => {
|
||||
alert('Identifier copied to clipboard!');
|
||||
});
|
||||
});
|
||||
|
||||
// Modal anzeigen
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user