From 6479de6e52a856e896a97b6b2e9ac86f151a16ee Mon Sep 17 00:00:00 2001 From: overcuriousity Date: Tue, 15 Jul 2025 13:40:29 +0200 Subject: [PATCH] anpassung matrix, impressum --- src/components/Footer.astro | 2 +- src/components/ToolFilters.astro | 62 +++++++++++--- src/components/ToolMatrix.astro | 142 ++++++++++++++++++++++--------- src/pages/about.astro | 4 +- src/pages/impressum.astro | 63 ++++++++++++++ src/styles/global.css | 41 +++++++++ 6 files changed, 259 insertions(+), 55 deletions(-) create mode 100644 src/pages/impressum.astro diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 72cccaa..a923668 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -7,7 +7,7 @@

- © 2025 CC24-Hub - Academic Research Project + © 2025 CC24-Hub - Lizensiert unter BSD-3-Clause

diff --git a/src/components/ToolFilters.astro b/src/components/ToolFilters.astro index 120bc6e..c487ded 100644 --- a/src/components/ToolFilters.astro +++ b/src/components/ToolFilters.astro @@ -73,7 +73,7 @@ const sortedTags = Object.entries(tagFrequency)
- +
@@ -137,7 +137,7 @@ const sortedTags = Object.entries(tagFrequency) // Initialize tag cloud state function initTagCloud() { - const visibleCount = 22; // Show first 12 tags initially + const visibleCount = 22; tagCloudItems.forEach((item, index) => { if (index >= visibleCount) { item.style.display = 'none'; @@ -155,7 +155,6 @@ const sortedTags = Object.entries(tagFrequency) tagCloudToggle.textContent = 'Weniger zeigen'; tagCloudToggle.setAttribute('data-expanded', 'true'); - // Show all filtered tags tagCloudItems.forEach(item => { if (!item.classList.contains('hidden')) { item.style.display = 'inline-flex'; @@ -166,7 +165,6 @@ const sortedTags = Object.entries(tagFrequency) tagCloudToggle.textContent = 'Mehr zeigen'; tagCloudToggle.setAttribute('data-expanded', 'false'); - // Show only first visible tags let visibleIndex = 0; tagCloudItems.forEach(item => { if (!item.classList.contains('hidden')) { @@ -180,7 +178,7 @@ const sortedTags = Object.entries(tagFrequency) }); } } - + // Filter tag cloud based on search input function filterTagCloud() { const searchTerm = searchInput.value.toLowerCase(); @@ -205,7 +203,6 @@ const sortedTags = Object.entries(tagFrequency) } }); - // Update toggle button visibility const hasHiddenTags = Array.from(tagCloudItems).some(item => !item.classList.contains('hidden') && item.style.display === 'none' ); @@ -219,6 +216,48 @@ const sortedTags = Object.entries(tagFrequency) tool.projectUrl !== "" && tool.projectUrl.trim() !== ""; } + + // Update matrix highlighting based on current filters + function updateMatrixHighlighting() { + const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view'); + if (currentView !== 'matrix') return; + + const matrixTable = document.querySelector('.matrix-table'); + if (!matrixTable) return; + + // Clear existing highlights + matrixTable.querySelectorAll('.highlight-row, .highlight-column').forEach(el => { + el.classList.remove('highlight-row', 'highlight-column'); + }); + + const selectedDomain = domainSelect.value; + + // Highlight selected domain row + if (selectedDomain) { + const domainRow = matrixTable.querySelector(`tr[data-domain="${selectedDomain}"]`); + if (domainRow) { + domainRow.classList.add('highlight-row'); + } + } + + // Highlight selected phase column + if (selectedPhase) { + const phaseHeaders = matrixTable.querySelectorAll('thead th[data-phase]'); + const phaseIndex = Array.from(phaseHeaders).findIndex(th => + th.getAttribute('data-phase') === selectedPhase + ); + + if (phaseIndex >= 0) { + const columnIndex = phaseIndex + 1; // +1 because first column is domain names + matrixTable.querySelectorAll(`tr`).forEach(row => { + const cell = row.children[columnIndex]; + if (cell) { + cell.classList.add('highlight-column'); + } + }); + } + } + } // Filter function function filterTools() { @@ -276,10 +315,12 @@ const sortedTags = Object.entries(tagFrequency) if (aProprietary && !bProprietary) return 1; } - // Maintain existing order within same priority group return 0; }); + // Update matrix highlighting + updateMatrixHighlighting(); + // Emit custom event with filtered results window.dispatchEvent(new CustomEvent('toolsFiltered', { detail: filtered })); } @@ -304,11 +345,9 @@ const sortedTags = Object.entries(tagFrequency) const phase = button.getAttribute('data-phase'); if (selectedPhase === phase) { - // Deselect if already selected selectedPhase = ''; button.classList.remove('active'); } else { - // Select new phase phaseButtons.forEach(btn => btn.classList.remove('active')); selectedPhase = phase; button.classList.add('active'); @@ -325,17 +364,12 @@ const sortedTags = Object.entries(tagFrequency) window.dispatchEvent(new CustomEvent('viewChanged', { detail: view })); - // Apply view-specific filters if (view === 'hosted') { - // Filter for hosted tools only (tools with valid projectUrl) const hosted = window.toolsData.filter(tool => isToolHosted(tool)); - - // Apply same sorting logic for consistency hosted.sort((a, b) => { const aProprietary = a.license === 'Proprietary'; const bProprietary = b.license === 'Proprietary'; - // Since all are hosted, just sort by proprietary status if (!aProprietary && bProprietary) return -1; if (aProprietary && !bProprietary) return 1; diff --git a/src/components/ToolMatrix.astro b/src/components/ToolMatrix.astro index aee95c9..60931d9 100644 --- a/src/components/ToolMatrix.astro +++ b/src/components/ToolMatrix.astro @@ -39,8 +39,8 @@ domains.forEach((domain: any) => {

Übergreifend & Kollaboration

{collaborationTools.map((tool: any) => { - const hasValidProjectUrl = tool.projectUrl !== undefined && - tool.projectUrl !== null && + const hasValidProjectUrl = tool.projectUrl !== undefined && + tool.projectUrl !== null && tool.projectUrl !== "" && tool.projectUrl.trim() !== ""; return ( @@ -75,13 +75,13 @@ domains.forEach((domain: any) => { Domain / Phase {phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => ( - {phase.name} + {phase.name} ))} {domains.map((domain: any) => ( - + {domain.name} {phases.filter((phase: any) => phase.id !== 'collaboration').map((phase: any) => ( @@ -141,6 +141,85 @@ domains.forEach((domain: any) => { return activePhaseButton ? activePhaseButton.getAttribute('data-phase') : ''; } + // Helper function to get selected domain from dropdown + function getSelectedDomain() { + const domainSelect = document.getElementById('domain-select'); + return domainSelect ? domainSelect.value : ''; + } + + // Update matrix highlighting based on current filters + function updateMatrixHighlighting() { + const matrixTable = document.querySelector('.matrix-table'); + if (!matrixTable) return; + + // Clear existing highlights + matrixTable.querySelectorAll('.highlight-row, .highlight-column').forEach(el => { + el.classList.remove('highlight-row', 'highlight-column'); + }); + + const selectedDomain = getSelectedDomain(); + const selectedPhase = getSelectedPhase(); + + // Highlight selected domain row + if (selectedDomain) { + const domainRow = matrixTable.querySelector(`tr[data-domain="${selectedDomain}"]`); + if (domainRow) { + domainRow.classList.add('highlight-row'); + } + } + + // Highlight selected phase column + if (selectedPhase) { + const phaseHeaders = matrixTable.querySelectorAll('thead th[data-phase]'); + const phaseIndex = Array.from(phaseHeaders).findIndex(th => + th.getAttribute('data-phase') === selectedPhase + ); + + if (phaseIndex >= 0) { + const columnIndex = phaseIndex + 1; // +1 because first column is domain names + matrixTable.querySelectorAll(`tr`).forEach(row => { + const cell = row.children[columnIndex]; + if (cell) { + cell.classList.add('highlight-column'); + } + }); + } + } + } + + // Helper function to create compact collaboration tool cards for matrix view + function createCollaborationToolCardCompact(tool) { + const hasValidProjectUrl = tool.projectUrl !== undefined && + tool.projectUrl !== null && + tool.projectUrl !== "" && + tool.projectUrl.trim() !== ""; + + const cardDiv = document.createElement('div'); + const cardClass = `collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`; + cardDiv.className = cardClass; + cardDiv.onclick = () => window.showToolDetails(tool.name); + + cardDiv.innerHTML = ` +
+

${tool.name}

+
+ ${hasValidProjectUrl ? 'Self-Hosted' : ''} + ${tool.license !== 'Proprietary' ? 'OSS' : ''} +
+
+

+ ${tool.description} +

+
+ ${tool.platforms.join(', ')} + • + ${tool.skillLevel} +
+ `; + + return cardDiv; + } + // Tool details functions window.showToolDetails = function(toolName) { const tool = toolsData.find(t => t.name === toolName); @@ -219,7 +298,24 @@ domains.forEach((domain: any) => { document.getElementById('modal-overlay').classList.remove('active'); document.getElementById('tool-details').classList.remove('active'); }; - + + // Listen for view changes to trigger highlighting + window.addEventListener('viewChanged', (event) => { + const view = event.detail; + if (view === 'matrix') { + // Delay highlighting to ensure matrix is visible + setTimeout(updateMatrixHighlighting, 100); + } + }); + + // Listen for filter changes to update highlighting + window.addEventListener('toolsFiltered', (event) => { + const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view'); + if (currentView === 'matrix') { + setTimeout(updateMatrixHighlighting, 50); + } + }); + // Update matrix on filter change window.addEventListener('toolsFiltered', (event) => { const filtered = event.detail; @@ -296,40 +392,10 @@ domains.forEach((domain: any) => { }); }); }); + + // Update highlighting after matrix content is updated + setTimeout(updateMatrixHighlighting, 50); } } }); - - // Helper function to create compact collaboration tool cards for matrix view - function createCollaborationToolCardCompact(tool) { - const hasValidProjectUrl = tool.projectUrl !== undefined && - tool.projectUrl !== null && - tool.projectUrl !== "" && - tool.projectUrl.trim() !== ""; - - const cardDiv = document.createElement('div'); - const cardClass = `collaboration-tool-compact ${hasValidProjectUrl ? 'hosted' : tool.license !== 'Proprietary' ? 'oss' : ''}`; - cardDiv.className = cardClass; - cardDiv.onclick = () => window.showToolDetails(tool.name); - - cardDiv.innerHTML = ` -
-

${tool.name}

-
- ${hasValidProjectUrl ? 'Self-Hosted' : ''} - ${tool.license !== 'Proprietary' ? 'OSS' : ''} -
-
-

- ${tool.description} -

-
- ${tool.platforms.join(', ')} - • - ${tool.skillLevel} -
- `; - - return cardDiv; - } \ No newline at end of file diff --git a/src/pages/about.astro b/src/pages/about.astro index 04c4da1..36d9eae 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -2,13 +2,13 @@ import BaseLayout from '../layouts/BaseLayout.astro'; --- - +

CC24-Hub

- Ein bescheidenes Forschungsprojekt + Ein bescheidenes Projekt

Seminargruppe CC24-w1 diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro new file mode 100644 index 0000000..01c9ad5 --- /dev/null +++ b/src/pages/impressum.astro @@ -0,0 +1,63 @@ +--- +import BaseLayout from '../layouts/BaseLayout.astro'; +--- + + +

+ +
+

Impressum

+

Angaben gemäß § 5 DDG

+

Mario Stöckl
+83043 Bad Aibling
+

+

Vertreten durch:
+Mario Stöckl
+

+

Kontakt:
+Telefon: 01522-7086296
+E-Mail: mario.stoeckl@posteo.de +

+

PGP-Schlüssel:
+Zur sicheren Kommunikation per E-Mail können Sie folgenden PGP-Schlüssel verwenden:

+

+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mHMEZlEIBBMJKyQDAwIIAQELAwMESJIgZOfaKHs9LDy3zy6MhP7UDHkziUzbCJoZ
+SossJfJUg/aWjfg7bmPzCFKyxZ4rArLcHKirBn2YWrCrVQHI/cz369EYXqwYF7sO
+nJIlFBoYSWkYQl4JRvDK+E0+EB1jtCdNYXJpbyBTdMO2Y2tsIDxtYXJpby5zdG9l
+Y2tsQHBvc3Rlby5kZT6ItgQTEwkAPhYhBJWrPbzWKzc8haxdUG3zxVmZ8DOEBQJm
+UQgEAhsDBQkDwcQcBQsJCAcCBhUKCQgLAgQWAgMBAh4BAheAAAoJEG3zxVmZ8DOE
+Q9kBfRj8dwfxi1h9S0p8M2Zbg1Q3qj/K7QDoWhVH5I2ppRdF9vFRgv2UHdZGg8lT
+p8dz/QGAhXgYJAqYRkcghqM9bm3FgSGfSdcwcgxGFmFmKPnForyiJ+dsf2uV4ArK
+h4gXeso6uHcEZlEIBBIJKyQDAwIIAQELAwMEdyFGS5SQl1+MvEuZNPAHKkWh0lbP
+erYbQtKxhWeMwHaD571EiTgzc7JZoba6ZDL+KUAA6ASitEHOlUU7lQFu2U2n3YFN
+SMyb1aUumRrdsXA9G3IEHX0H/AYQNwHI0f+lAwEJCIieBBgTCQAmFiEElas9vNYr
+NzyFrF1QbfPFWZnwM4QFAmZRCAQCGwwFCQPBxBwACgkQbfPFWZnwM4SaLQF/UV79
+n4v26FEast0XOn/L3js9V6JJwI6wNx4y/pU+JWmEE8YGLzDrKqCI83+0XaHMAX4l
+LQUNXcZ3S1hFnttvCL6SARZXWfQjBGzosZJt3d/4rr77zut1Eb+QrcqyPDp7rB8=
+=WczG
+-----END PGP PUBLIC KEY BLOCK-----
+
+
+

+

Umsatzsteuer-ID:
+Umsatzsteuer-Identifikationsnummer gemäß §27a Umsatzsteuergesetz: DE368231827

+

+

Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV:
+Mario Stöckl
+83043 Bad Aibling
+

+

Haftungsausschluss:

+Haftung für Inhalte

+Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 DDG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 DDG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.

Haftung für Links

+Unser Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.

Urheberrecht

+Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.

Datenschutz

+Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben.
+Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.
+Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.
+


+ +
+ + \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 07e3ad6..1c45e74 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -301,6 +301,7 @@ input[type="checkbox"] { border: 1px solid var(--color-border); padding: 0.75rem; text-align: left; + transition: background-color 0.2s ease, border-color 0.2s ease; } .matrix-table th { @@ -322,6 +323,46 @@ input[type="checkbox"] { vertical-align: top; } +/* Matrix Highlighting */ +.matrix-table tr.highlight-row th, +.matrix-table tr.highlight-row td { + background-color: rgba(37, 99, 235, 0.08); + border-color: rgba(37, 99, 235, 0.2); +} + +.matrix-table th.highlight-column, +.matrix-table td.highlight-column { + background-color: rgba(37, 99, 235, 0.08); + border-color: rgba(37, 99, 235, 0.2); +} + +.matrix-table tr.highlight-row th.highlight-column, +.matrix-table tr.highlight-row td.highlight-column { + background-color: rgba(37, 99, 235, 0.15); + border-color: rgba(37, 99, 235, 0.4); + box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); +} + +/* Dark theme adjustments */ +[data-theme="dark"] .matrix-table tr.highlight-row th, +[data-theme="dark"] .matrix-table tr.highlight-row td { + background-color: rgba(59, 130, 246, 0.12); + border-color: rgba(59, 130, 246, 0.3); +} + +[data-theme="dark"] .matrix-table th.highlight-column, +[data-theme="dark"] .matrix-table td.highlight-column { + background-color: rgba(59, 130, 246, 0.12); + border-color: rgba(59, 130, 246, 0.3); +} + +[data-theme="dark"] .matrix-table tr.highlight-row th.highlight-column, +[data-theme="dark"] .matrix-table tr.highlight-row td.highlight-column { + background-color: rgba(59, 130, 246, 0.2); + border-color: rgba(59, 130, 246, 0.5); + box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4); +} + .tool-chip { display: inline-block; padding: 0.25rem 0.5rem;