mirror of
https://codeberg.org/kirche-im-netz/Startodon-Hub.git
synced 2025-08-29 14:28:17 +02:00
Zwischenstand Entwicklung Starterkit-Grid
This commit is contained in:
Alexander Müller
parent
e4d5a11cb0
commit
f769da84a5
3 changed files with 404 additions and 161 deletions
335
code.js
335
code.js
|
|
@ -1,24 +1,112 @@
|
|||
const instanceColor = getComputedStyle(document.documentElement).getPropertyValue('--instance-color').trim() || '#ff6347';
|
||||
const backgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim() || '#ff6347';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const accountsContainer = document.querySelector('#account-list');
|
||||
let accounts = Array.from(document.querySelectorAll('.account'));
|
||||
|
||||
// Separate Favoriten und gemischte Accounts
|
||||
const favoriteAccounts = accounts.filter(account => account.dataset.favorite === "true");
|
||||
const otherAccounts = accounts.filter(account => !account.dataset.favorite);
|
||||
|
||||
// Mische übrige Accounts
|
||||
const shuffleContainers = document.querySelectorAll('.shuffle-container');
|
||||
const seed = Date.now();
|
||||
const shuffledOtherAccounts = seededShuffle(otherAccounts, seed);
|
||||
|
||||
const sortedAccounts = [...favoriteAccounts, ...shuffledOtherAccounts];
|
||||
shuffleContainers.forEach(container => {
|
||||
seededShuffleChildren(container, seed);
|
||||
});
|
||||
|
||||
accountsContainer.innerHTML = '';
|
||||
sortedAccounts.forEach(account => accountsContainer.appendChild(account));
|
||||
const starterkits = document.querySelectorAll('.starterkit');
|
||||
|
||||
sortedAccounts.forEach(function(account) {
|
||||
starterkits.forEach(kit => {
|
||||
const authorAccount = kit.querySelector('.autor .account');
|
||||
if (authorAccount) {
|
||||
try {
|
||||
const url = new URL(authorAccount.getAttribute('href'));
|
||||
const pathParts = url.pathname.split('/');
|
||||
|
||||
if (pathParts.length > 1 && pathParts[1].startsWith('@')) {
|
||||
const handle = pathParts[1].substring(1);
|
||||
const instance = url.hostname;
|
||||
const lookupUrl = `https://${config.homeInstance}/api/v1/accounts/lookup?acct=${handle}@${instance}`;
|
||||
|
||||
fetch(lookupUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const avatarImage = document.createElement('img');
|
||||
avatarImage.classList.add('account-avatar');
|
||||
avatarImage.alt = data.avatar ? `Profilbild von ${data.username}` : 'Profilbild nicht verfügbar';
|
||||
avatarImage.src = data.avatar || '';
|
||||
|
||||
authorAccount.prepend(avatarImage);
|
||||
|
||||
// Ergänze die Klasse basierend auf der Instanz
|
||||
const serverClass = getServerClass(instance);
|
||||
if (serverClass) {
|
||||
authorAccount.classList.add(serverClass);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Abrufen des Autoren-Profils:', error);
|
||||
});
|
||||
} else {
|
||||
console.error('Ungültiger Benutzer-Handle in URL:', url.href);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler bei der Verarbeitung der URL:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const accounts = kit.querySelectorAll('.account');
|
||||
accounts.forEach(account => {
|
||||
const parent = account.closest('.autor');
|
||||
if (!parent) {
|
||||
account.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Zeige die Anzahl der Accounts auf der StarterKit-Kachel
|
||||
const accountCount = kit.querySelectorAll('.account:not(.autor .account)').length;
|
||||
const accountCountElement = document.createElement('div');
|
||||
accountCountElement.classList.add('account-count');
|
||||
accountCountElement.textContent = `${accountCount} Profile`;
|
||||
kit.appendChild(accountCountElement);
|
||||
|
||||
// Füge Event-Listener für StarterKit-Kacheln hinzu
|
||||
kit.addEventListener('click', function() {
|
||||
const title = kit.querySelector('h3').textContent;
|
||||
const accountsForPopup = Array.from(kit.querySelectorAll('.account')).filter(account => !account.closest('.autor'));
|
||||
const popup = createRecommendationPopup(accountsForPopup, title);
|
||||
document.body.appendChild(popup);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Funktion zum Erstellen eines Pop-ups.
|
||||
* @param {NodeList} accounts - Die Liste der Accounts für das Pop-up.
|
||||
* @param {string} title - Der Titel des StarterKits.
|
||||
* @returns {HTMLElement} - Das erzeugte Pop-up-Element.
|
||||
*/
|
||||
function createRecommendationPopup(accounts, title) {
|
||||
// Overlay erstellen
|
||||
const overlay = document.createElement('div');
|
||||
overlay.classList.add('recommendation-popup');
|
||||
|
||||
// Pop-up-Inhalt
|
||||
const content = document.createElement('div');
|
||||
content.classList.add('recommendation-popup-content');
|
||||
|
||||
// Header des Pop-ups
|
||||
const header = document.createElement('div');
|
||||
header.classList.add('recommendation-popup-header');
|
||||
|
||||
const titleElement = document.createElement('h3');
|
||||
titleElement.textContent = title;
|
||||
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.classList.add('close-popup');
|
||||
closeButton.textContent = '×';
|
||||
closeButton.addEventListener('click', () => overlay.remove()); // Schließen-Funktion
|
||||
|
||||
header.appendChild(titleElement);
|
||||
header.appendChild(closeButton);
|
||||
|
||||
// Body des Pop-ups
|
||||
const body = document.createElement('div');
|
||||
body.classList.add('recommendation-popup-body');
|
||||
|
||||
accounts.forEach(account => {
|
||||
try {
|
||||
const url = new URL(account.getAttribute('href'));
|
||||
const pathParts = url.pathname.split('/');
|
||||
|
|
@ -31,61 +119,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
fetch(lookupUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const link = document.createElement('a');
|
||||
link.classList.add('account-card-link');
|
||||
link.href = account.href;
|
||||
link.target = '_blank';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('account-card');
|
||||
|
||||
const avatarImage = document.createElement('img');
|
||||
avatarImage.classList.add('account-avatar');
|
||||
avatarImage.alt = data.avatar ? `Profilbild von ${data.username}` : 'Profilbild nicht verfügbar';
|
||||
avatarImage.src = data.avatar || '';
|
||||
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.classList.add('account-info');
|
||||
|
||||
const displayNameElement = document.createElement('p');
|
||||
displayNameElement.classList.add('display-name');
|
||||
displayNameElement.textContent = data.display_name || handle;
|
||||
|
||||
const handleElement = document.createElement('p');
|
||||
handleElement.classList.add('handle');
|
||||
|
||||
const serverHandleElement = document.createElement('span');
|
||||
serverHandleElement.classList.add('server-handle');
|
||||
serverHandleElement.textContent = `@${instance}`;
|
||||
|
||||
if (instance === config.homeInstance) {
|
||||
serverHandleElement.style.backgroundColor = instanceColor;
|
||||
}
|
||||
|
||||
handleElement.innerHTML = `@${data.username}`;
|
||||
handleElement.appendChild(serverHandleElement);
|
||||
|
||||
// QR-Code Button
|
||||
const qrButton = document.createElement('button');
|
||||
qrButton.classList.add('qr-code-button');
|
||||
qrButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="${backgroundColor}">
|
||||
<path d="M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"/>
|
||||
</svg>
|
||||
`;
|
||||
qrButton.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
showQrPopup(link.href);
|
||||
});
|
||||
|
||||
infoContainer.appendChild(displayNameElement);
|
||||
infoContainer.appendChild(handleElement);
|
||||
card.appendChild(avatarImage);
|
||||
card.appendChild(infoContainer);
|
||||
card.appendChild(qrButton);
|
||||
link.appendChild(card);
|
||||
|
||||
account.replaceWith(link);
|
||||
const card = createAccountCard(data, account.href, instance);
|
||||
body.appendChild(card);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Fehler beim Abrufen des Profils:', error);
|
||||
|
|
@ -97,96 +132,122 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
console.error('Fehler bei der Verarbeitung der URL:', error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// QR-Code anzeigen
|
||||
function showQrPopup(profileUrl) {
|
||||
// QR-Overlay für Abdunkelung
|
||||
const overlay = document.createElement('div');
|
||||
overlay.classList.add('qr-overlay');
|
||||
// Pop-up zusammenfügen
|
||||
content.appendChild(header);
|
||||
content.appendChild(body);
|
||||
overlay.appendChild(content);
|
||||
|
||||
// Popup-Container
|
||||
const popup = document.createElement('div');
|
||||
popup.classList.add('qr-popup');
|
||||
|
||||
// Schließen-Button
|
||||
const closeButton = document.createElement('button');
|
||||
closeButton.classList.add('close-popup');
|
||||
closeButton.textContent = 'x';
|
||||
closeButton.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="13" height="13" fill="${backgroundColor}"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"/></svg>
|
||||
`;
|
||||
closeButton.addEventListener('click', function () {
|
||||
overlay.remove();
|
||||
});
|
||||
|
||||
// Event-Listener für das Overlay (schließt Popup bei Klick auf Hintergrund)
|
||||
overlay.addEventListener('click', function (event) {
|
||||
if (event.target === overlay) { // Nur schließen, wenn außerhalb des Popups geklickt wurde
|
||||
// Event-Listener für Overlay (schließt Pop-up bei Klick auf Hintergrund)
|
||||
overlay.addEventListener('click', function(event) {
|
||||
if (event.target === overlay) {
|
||||
overlay.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// QR-Code-Container
|
||||
const qrContainer = document.createElement('div');
|
||||
qrContainer.classList.add('qr-code-container');
|
||||
return overlay;
|
||||
}
|
||||
|
||||
// QR-Code mit kjua generieren
|
||||
const qrCode = kjua({
|
||||
render: 'canvas',
|
||||
text: profileUrl,
|
||||
size: 200,
|
||||
quiet: 2,
|
||||
ecLevel: 'H',
|
||||
});
|
||||
/**
|
||||
* Funktion zum Erstellen einer Account-Kachel.
|
||||
* @param {Object} data - Die Account-Daten von der API.
|
||||
* @param {string} href - Die URL des Accounts.
|
||||
* @param {string} instance - Der Instanz-Name.
|
||||
* @returns {HTMLElement} - Die erzeugte Account-Kachel.
|
||||
*/
|
||||
function createAccountCard(data, href, instance) {
|
||||
const link = document.createElement('a');
|
||||
link.classList.add('account-card-link');
|
||||
link.href = href;
|
||||
link.target = '_blank';
|
||||
|
||||
qrContainer.appendChild(qrCode);
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('account-card');
|
||||
|
||||
// Extrahiere User-Handle und Server-Handle
|
||||
const url = new URL(profileUrl);
|
||||
const pathParts = url.pathname.split('/');
|
||||
const userHandle = pathParts[1] || '@unbekannt';
|
||||
const serverHandle = url.hostname || 'unbekannt';
|
||||
const avatarImage = document.createElement('img');
|
||||
avatarImage.classList.add('account-avatar');
|
||||
avatarImage.alt = data.avatar ? `Profilbild von ${data.username}` : 'Profilbild nicht verfügbar';
|
||||
avatarImage.src = data.avatar || '';
|
||||
|
||||
// Handle unter dem QR-Code
|
||||
const handleContainer = document.createElement('p');
|
||||
handleContainer.classList.add('qr-handle');
|
||||
const infoContainer = document.createElement('div');
|
||||
infoContainer.classList.add('account-info');
|
||||
|
||||
const userHandleText = document.createTextNode(userHandle);
|
||||
const displayNameElement = document.createElement('p');
|
||||
displayNameElement.classList.add('display-name');
|
||||
displayNameElement.textContent = data.display_name || data.username;
|
||||
|
||||
const serverHandleSpan = document.createElement('span');
|
||||
serverHandleSpan.classList.add('qr-server-handle');
|
||||
serverHandleSpan.textContent = `@${serverHandle}`;
|
||||
const handleElement = document.createElement('p');
|
||||
handleElement.classList.add('handle');
|
||||
|
||||
// Dynamisch die Hintergrundfarbe für Variable "config.homeInstance" setzen
|
||||
if (serverHandle === config.homeInstance) {
|
||||
serverHandleSpan.style.backgroundColor = instanceColor;
|
||||
qrCode.style.borderColor = instanceColor;
|
||||
const serverHandleElement = document.createElement('span');
|
||||
serverHandleElement.classList.add('server-handle');
|
||||
serverHandleElement.textContent = `@${instance}`;
|
||||
|
||||
// Ergänze die Klasse basierend auf der Instanz
|
||||
const serverClass = getServerClass(instance);
|
||||
if (serverClass) {
|
||||
serverHandleElement.classList.add(serverClass);
|
||||
}
|
||||
|
||||
handleContainer.appendChild(userHandleText);
|
||||
handleContainer.appendChild(serverHandleSpan);
|
||||
handleElement.textContent = `@${data.username}`;
|
||||
handleElement.appendChild(serverHandleElement);
|
||||
|
||||
// Popup zusammenfügen
|
||||
popup.appendChild(closeButton);
|
||||
popup.appendChild(qrContainer);
|
||||
popup.appendChild(handleContainer);
|
||||
infoContainer.appendChild(displayNameElement);
|
||||
infoContainer.appendChild(handleElement);
|
||||
|
||||
// Overlay zusammenfügen
|
||||
overlay.appendChild(popup);
|
||||
document.body.appendChild(overlay);
|
||||
card.appendChild(avatarImage);
|
||||
card.appendChild(infoContainer);
|
||||
link.appendChild(card);
|
||||
|
||||
return link;
|
||||
}
|
||||
|
||||
function seededRandom(seed) {
|
||||
let x = Math.sin(seed++) * 10000;
|
||||
return x - Math.floor(x);
|
||||
/**
|
||||
* Funktion, um die Kinder eines Containers deterministisch neu anzuordnen.
|
||||
* @param {HTMLElement} container - Der Container, dessen Kinder durchmischt werden sollen.
|
||||
* @param {number} seed - Der Seed für das deterministische Shuffle.
|
||||
*/
|
||||
function seededShuffleChildren(container, seed) {
|
||||
const children = Array.from(container.children);
|
||||
const shuffled = seededShuffle(children, seed);
|
||||
shuffled.forEach(child => container.appendChild(child));
|
||||
}
|
||||
|
||||
/**
|
||||
* Funktion für einen deterministischen Shuffle-Algorithmus.
|
||||
* @param {Array} array - Das Array, das gemischt werden soll.
|
||||
* @param {number} seed - Der Seed für das deterministische Shuffle.
|
||||
* @returns {Array} - Das gemischte Array.
|
||||
*/
|
||||
function seededShuffle(array, seed) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(seededRandom(seed) * (i + 1));
|
||||
const j = Math.floor(seededRandom(seed++) * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
seed++;
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
/**
|
||||
* Funktion für einen deterministischen Zufallswert.
|
||||
* @param {number} seed - Der Seed für den Zufallswert.
|
||||
* @returns {number} - Der generierte Zufallswert.
|
||||
*/
|
||||
function seededRandom(seed) {
|
||||
const x = Math.sin(seed++) * 10000;
|
||||
return x - Math.floor(x);
|
||||
}
|
||||
|
||||
/**
|
||||
* Funktion zur Zuordnung von Instanzen zu CSS-Klassen.
|
||||
* @param {string} instance - Der Name der Instanz.
|
||||
* @returns {string|null} - Die zugehörige CSS-Klasse oder null, wenn keine Übereinstimmung vorliegt.
|
||||
*/
|
||||
function getServerClass(instance) {
|
||||
const serverClasses = {
|
||||
'libori.social': 'liboriSocial',
|
||||
'reliverse.social': 'reliverseSocial',
|
||||
'kirche.social': 'kircheSocial',
|
||||
'katholisch.social': 'katholischSocial'
|
||||
};
|
||||
return serverClasses[instance] || null;
|
||||
}
|
||||
|
|
|
|||
146
index.html
146
index.html
|
|
@ -36,7 +36,7 @@
|
|||
<section id="instances">
|
||||
<div class="container">
|
||||
<h2>Wir sind #FediKirche</h2>
|
||||
<div class="grid-container">
|
||||
<div class="grid-container shuffle-container">
|
||||
|
||||
<!-- Instanz 1 -->
|
||||
<div class="instance-card liboriSocial">
|
||||
|
|
@ -124,24 +124,132 @@
|
|||
|
||||
<section id="empfehlungen">
|
||||
<div class="container">
|
||||
<h2>Empfehlungen für dich</h2>
|
||||
<div class="hint-box">
|
||||
<p class="hint-title">💡 Tipp</p>
|
||||
<p>Um anderen mit deinem Account zu folgen, klicke auf der Profilseite auf 'Folgen'. Neue Beiträge erscheinen dann automatisch auf deiner Startseite.</p>
|
||||
<p class="hint-title" style="padding-top: 10px;">📱 für Nutzer der (Android) Mastodon-App</p>
|
||||
<p>Mit der App kannst du Profile über einen QR-Code erreichen. Klicke für den QR-Code einfach auf den <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="#b3b3b3" style="max-width: 100%; height: auto; vertical-align: middle; margin-bottom: 3px;">
|
||||
<path d="M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z"/>
|
||||
</svg>-Button.<br> In der Mastodon-App klickst du auf die 🔎 (Entdecken). Den QR-Code-Scanner findest du in der Suchleiste. </p>
|
||||
|
||||
</div>
|
||||
<div class="recommendations" id="account-list">
|
||||
<a class="account" href="https://reliverse.social/@comenius" target="_blank" data-favorite="true">Comenius-Institut Münster</a>
|
||||
<a class="account" href="https://katholisch.social/@kdsz_bayern" target="_blank" data-favorite="true">KDSZ Bayern</a>
|
||||
<a class="account" href="https://kirche.social/@luki" target="_blank" data-favorite="true">LUKi e.V.</a>
|
||||
<a class="account" href="https://kirche.social/@librechurch" target="_blank" data-favorite="true">LibreChurch</a>
|
||||
<a class="account" href="https://libori.social/@alex" target="_blank" data-favorite="true">Alexander Müller</a>
|
||||
<a class="account" href="https://reliverse.social/@joerglohrer" target="_blank" data-favorite="true">Jörg Lohrer</a>
|
||||
<a class="account" href="https://kirche.social/@csett86" target="_blank" data-favorite="true">Christoph Settgast</a>
|
||||
<h2>unsere StarterKits für dich 🚀</h2>
|
||||
<div class="recommendations shuffle-container" id="account-list">
|
||||
<div class="starterkit">
|
||||
<h3>#FediKirche</h3>
|
||||
<p>Accounts rund um den Hashtag #FediKirche</p>
|
||||
<div class="autor">zusammengestellt von <a class="account" href="https://libori.social/@alex" target="_blank">Alexander Müller</a></div>
|
||||
<div class="account-list">
|
||||
<a class="account" href="https://reliverse.social/@comenius" target="_blank" data-favorite="true">Comenius-Institut Münster</a>
|
||||
<a class="account" href="https://katholisch.social/@kdsz_bayern" target="_blank" data-favorite="true">KDSZ Bayern</a>
|
||||
<a class="account" href="https://kirche.social/@luki" target="_blank" data-favorite="true">LUKi e.V.</a>
|
||||
<a class="account" href="https://kirche.social/@librechurch" target="_blank" data-favorite="true">LibreChurch</a>
|
||||
<a class="account" href="https://libori.social/@alex" target="_blank" data-favorite="true">Alexander Müller</a>
|
||||
<a class="account" href="https://reliverse.social/@joerglohrer" target="_blank" data-favorite="true">Jörg Lohrer</a>
|
||||
<a class="account" href="https://kirche.social/@csett86" target="_blank" data-favorite="true">Christoph Settgast</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="starterkit">
|
||||
<h3>katholisch</h3>
|
||||
<p>Accounts aus mit katholischem Hintergrund</p>
|
||||
<div class="autor">zusammengestellt von <a class="account" href="https://libori.social/@alex" target="_blank">Alexander Müller</a></div>
|
||||
<div class="account-list">
|
||||
<a class="account" href="https://libori.social/@news_erzbistum_paderborn" target="_blank">Erzbistum Paderborn</a>
|
||||
<a class="account" href="https://libori.social/@wir_erzbistum_paderborn" target="_blank">WirPortal</a>
|
||||
<a class="account" href="https://libori.social/@news_katholisch" target="_blank">katholisch.de</a>
|
||||
<a class="account" href="https://libori.social/@gotteswerker" target="_blank">Gotteswerker</a>
|
||||
<a class="account" href="https://libori.social/@attendorn_katholisch" target="_blank">Pastoralverbund Attendorn</a>
|
||||
<a class="account" href="https://libori.social/@koenigsmuenster" target="_blank">Abtei Königsmünster</a>
|
||||
<a class="account" href="https://kirche.social/@bistumwuerzburg" target="_blank">Bistum Würzburg</a>
|
||||
<a class="account" href="https://katholisch.social/@bistumpassau" target="_blank">Bistum Passau</a>
|
||||
<a class="account" href="https://kirche.social/@medienkompetenzzentrum" target="_blank">Medienkompetenzzentrum im KSI</a>
|
||||
<a class="account" href="https://libori.social/@Franz_Stock_org" target="_blank">Franz_Stock_org</a>
|
||||
<a class="account" href="https://kirche.social/@weltkirche_de" target="_blank">Weltkirche.de</a>
|
||||
<a class="account" href="https://katholisch.social/@kdsz_bayern" target="_blank">KDSZ Bayern</a>
|
||||
<a class="account" href="https://katholisch.social/@pvpv" target="_blank">PV Prutting-Vogtareuth</a>
|
||||
<a class="account" href="https://libori.social/@gemeindepflanzen" target="_blank">Gemeinde-pflanzen.net</a>
|
||||
<a class="account" href="https://kirche.social/@himmelwaerts_und_erdverbunden" target="_blank">Podcast Himmelwärts und Erdverbunden</a>
|
||||
<a class="account" href="https://kirche.social/@ebhh_hochschule" target="_blank">ebhh_hochschule</a>
|
||||
<a class="account" href="https://libori.social/@alex" target="_blank">Alexander Müller</a>
|
||||
<a class="account" href="https://libori.social/@jonathan" target="_blank">Jonathan Berschauer</a>
|
||||
<a class="account" href="https://kirche.social/@missio" target="_blank">missio Aachen</a>
|
||||
<a class="account" href="https://kirche.social/@inklusion_ruhrbistum" target="_blank">Inklusives Ruhrbistum</a>
|
||||
<a class="account" href="https://kirche.social/@Frau_Sanders" target="_blank">Frau Sanders</a>
|
||||
<a class="account" href="https://bonn.social/@fxneumann" target="_blank">Felix Neumann</a>
|
||||
<a class="account" href="https://nrw.social/@pmaurus" target="_blank">pmaurus</a>
|
||||
<a class="account" href="https://aut.social/@pfarrewaehring" target="_blank">Pfarre Währing</a>
|
||||
<a class="account" href="https://openbiblio.social/@BPS_TR" target="_blank">Seminarbibliothek Trier</a>
|
||||
<a class="account" href="https://libori.social/@nordwalde" target="_blank">St. Dionysius Nordwalde</a>
|
||||
<a class="account" href="https://colearn.social/@Religionsunterricht" target="_blank">rpp-katholisch</a>
|
||||
<a class="account" href="https://kirche.social/@k_le" target="_blank">Katholische Kirche LE</a>
|
||||
<a class="account" href="https://kirche.social/@liebfrauen" target="_blank">Liebfrauen Bocholt</a>
|
||||
<a class="account" href="https://kirche.social/@marienschule" target="_blank">Bischöfliche Marienschule</a>
|
||||
<a class="account" href="https://kirche.social/@stellief" target="_blank">Pfadfinder St.Elisabeth Erfurt</a>
|
||||
<a class="account" href="https://kirche.social/@proficisci" target="_blank">Johanna-Jessica OFS</a>
|
||||
<a class="account" href="https://swiss.social/@eva_maria_faber" target="_blank">Eva-Maria Faber</a>
|
||||
<a class="account" href="https://social.regenpfeifer.net/@linkskatholisch" target="_blank">Linkskatholisch</a>
|
||||
<a class="account" href="https://mastodon.social/@dieterzitzler" target="_blank">Dieter Zitzler</a>
|
||||
<a class="account" href="https://openbiblio.social/@DombibliothekKoeln" target="_blank">Diözesan- & Dombibliothek Köln</a>
|
||||
<a class="account" href="https://sueden.social/@statiopontis" target="_blank">DL4AI</a>
|
||||
<a class="account" href="https://archaeo.social/@hoelschmichel" target="_blank">Michael Hölscher</a>
|
||||
<a class="account" href="https://dju.social/@Theowiss" target="_blank">Theowiss</a>
|
||||
<a class="account" href="https://reliverse.social/@DigitalRUnde" target="_blank">DigitalRUnde</a>
|
||||
<a class="account" href="https://kirche.social/@florian" target="_blank">Florian M.</a>
|
||||
<a class="account" href="https://kirche.social/@bf" target="_blank">Bergtheim-Fährbrück</a>
|
||||
<a class="account" href="https://kirche.social/@infoleck" target="_blank">Uli</a>
|
||||
<a class="account" href="https://kirche.social/@clearingstellemedienkompetenz" target="_blank">Clearingstelle Medienkompetenz</a>
|
||||
<a class="account" href="https://kirche.social/@andreasbuesch" target="_blank">Andreas Büsch</a>
|
||||
<a class="account" href="https://social.cologne/@BroWoelfie" target="_blank">Andreas B.</a>
|
||||
<a class="account" href="https://mastodon.social/@Kapuziner" target="_blank">Kapuziner</a>
|
||||
<a class="account" href="https://bildung.social/@menneboy" target="_blank">Andreas Menne</a>
|
||||
<a class="account" href="https://kirche.social/@OratoriumL" target="_blank">Oratorium Leipzig</a>
|
||||
<a class="account" href="https://mastodon.social/@Pallottiner" target="_blank">Pallottiner</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="starterkit">
|
||||
<h3>religionsbezogene Bildung</h3>
|
||||
<p>Accounts rund um das Thema "religionsbezogene Bildung"</p>
|
||||
<div class="autor">zusammengestellt von <a class="account" href="https://reliverse.social/@joerglohrer" target="_blank">Jörg Lohrer</a></div>
|
||||
<div class="account-list">
|
||||
<a class="account" href="https://reliverse.social/@heller" target="_blank" data-favorite="true">Horst Heller</a>
|
||||
<a class="account" href="https://bildung.social/@FrauEmmEn" target="_blank" data-favorite="true">Frau EmmEn Heller</a>
|
||||
<a class="account" href="https://reliverse.social/@relilab" target="_blank" data-favorite="true">relilab</a>
|
||||
<a class="account" href="https://reliverse.social/@johappel" target="_blank">Joachim Happel</a>
|
||||
<a class="account" href="https://reliverse.social/@rpi" target="_blank" data-favorite="true">rpi-virtuell</a>
|
||||
<a class="account" href="https://libori.social/@alex" target="_blank">Alexander Müller</a>
|
||||
<a class="account" href="https://reliverse.social/@jens_dechow" target="_blank" data-favorite="true">Jens Dechow</a>
|
||||
<a class="account" href="https://reliverse.social/@DigitalRUnde" target="_blank" data-favorite="true">DigitalRUnde</a>
|
||||
<a class="account" href="https://kirche.social/@jutta_wa" target="_blank">Jutta Wagner</a>
|
||||
<a class="account" href="https://reliverse.social/@comenius" target="_blank">Comenius-Institut</a>
|
||||
<a class="account" href="https://reliverse.social/@joerglohrer" target="_blank">Jörg Lohrer</a>
|
||||
<a class="account" href="https://reliverse.social/@bianca_goes_europe" target="_blank">Bianca Kappelhoff</a>
|
||||
<a class="account" href="https://reliverse.social/@Colibri260" target="_blank">Corinna Ullmann</a>
|
||||
<a class="account" href="https://reliverse.social/@NadineGlage" target="_blank">Nadine Glage</a>
|
||||
<a class="account" href="https://sueden.social/@BlumeEvolution" target="_blank">Dr. Michael Blume</a>
|
||||
<a class="account" href="https://reliverse.social/@farbenspiel_family" target="_blank">Oliver Wupper-Schweers</a>
|
||||
<a class="account" href="https://kirche.social/@Frau_Sanders" target="_blank">Frau_Sanders</a>
|
||||
<a class="account" href="https://kirche.social/@manfred" target="_blank">Manfred Spiess</a>
|
||||
<a class="account" href="https://kirche.social/@arenzdom" target="_blank">Dominik Arenz</a>
|
||||
<a class="account" href="https://bildung.social/@minetestbildung" target="_blank">Das Minetest Bildungsnetzwerk</a>
|
||||
<a class="account" href="https://bildung.social/@ebinger" target="_blank">Thomas Ebinger</a>
|
||||
<a class="account" href="https://colearn.social/@Religionsunterricht" target="_blank">rpp-katholisch</a>
|
||||
<a class="account" href="https://bildung.social/@herrlarbig" target="_blank">Torsten Larbig</a>
|
||||
<a class="account" href="https://bildung.social/@ViP" target="_blank">Viera Pirker</a>
|
||||
<a class="account" href="https://reliverse.social/@Fl_OhMyGod" target="_blank">Florian Mayrhofer</a>
|
||||
<a class="account" href="https://reliverse.social/@digitale_relitanten" target="_blank">Digitale Relitanten</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="starterkit">
|
||||
<h3>tägliche Impulse</h3>
|
||||
<p>tägliche Impulse</p>
|
||||
<div class="autor">zusammengestellt von <a class="account" href="https://libori.social/@alex" target="_blank">Alexander Müller</a></div>
|
||||
<div class="account-list">
|
||||
<a class="account" href="https://kirche.social/@morgengebet" target="_blank">Morgengebet</a>
|
||||
<a class="account" href="https://kirche.social/@vaterunser" target="_blank">VaterUnser-Bot</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="starterkit">
|
||||
<h3>Vereine und Initiativen</h3>
|
||||
<p>Vereine und Initiativen</p>
|
||||
<div class="autor">zusammengestellt von <a class="account" href="https://libori.social/@alex" target="_blank">Alexander Müller</a></div>
|
||||
<div class="account-list">
|
||||
<a class="account" href="https://kirche.social/@offenebibel" target="_blank">Offene Bibel e.V.</a>
|
||||
<a class="account" href="https://kirche.social/@luki" target="_blank">LUKi e.V.</a>
|
||||
<a class="account" href="https://kirche.social/@librechurch" target="_blank">LibreChurch</a>
|
||||
<a class="account" href="https://libori.social/@gemeindepflanzen" target="_blank">Gemeinde-pflanzen.net</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
84
style.css
84
style.css
|
|
@ -159,11 +159,83 @@ section {
|
|||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* StarterKit Grid Darstellung */
|
||||
.recommendations {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.starterkit {
|
||||
background-color: var(--secondary-background-color);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.starterkit:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Pop-up Styling */
|
||||
.recommendation-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.recommendation-popup-content {
|
||||
background-color: var(--secondary-background-color);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
height: 80%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.recommendation-popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.recommendation-popup-header h3 {
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-popup {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.recommendation-popup-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 10px 10px 0 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 0;
|
||||
align-items: start;
|
||||
margin-top: 20px;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -406,7 +478,7 @@ footer p {
|
|||
border: solid 1px var(--liboriSocial-color);
|
||||
}
|
||||
|
||||
.instance-card.liboriSocial a.bigger-button {
|
||||
.instance-card.liboriSocial a.bigger-button, .server-handle.liboriSocial {
|
||||
background-color: var(--liboriSocial-color);
|
||||
}
|
||||
|
||||
|
|
@ -414,13 +486,15 @@ footer p {
|
|||
background-color: var(--liboriSocial-secondary-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* --- reliverse.social --- */
|
||||
|
||||
.instance-card.reliverseSocial {
|
||||
border: solid 1px var(--reliverseSocial-color);
|
||||
}
|
||||
|
||||
.instance-card.reliverseSocial a.bigger-button {
|
||||
.instance-card.reliverseSocial a.bigger-button, .server-handle.reliverseSocial {
|
||||
background-color: var(--reliverseSocial-color);
|
||||
}
|
||||
|
||||
|
|
@ -430,7 +504,7 @@ footer p {
|
|||
border: solid 1px var(--kircheSocial-color);
|
||||
}
|
||||
|
||||
.instance-card.kircheSocial a.bigger-button {
|
||||
.instance-card.kircheSocial a.bigger-button, .server-handle.kircheSocial {
|
||||
background-color: var(--kircheSocial-color);
|
||||
}
|
||||
|
||||
|
|
@ -444,7 +518,7 @@ footer p {
|
|||
border: solid 1px var(--katholischSocial-color);
|
||||
}
|
||||
|
||||
.instance-card.katholischSocial a.bigger-button {
|
||||
.instance-card.katholischSocial a.bigger-button, .server-handle.katholischSocial {
|
||||
background-color: var(--katholischSocial-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue