Textanalyse-Seite mit interaktivem JavaScript hinzugefügt
This commit is contained in:
parent
b31549de65
commit
4910f1c898
11 changed files with 1145 additions and 0 deletions
445
css/style.css
445
css/style.css
|
|
@ -1136,6 +1136,408 @@ textarea {
|
|||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
Textanalyse Styles
|
||||
=========================== */
|
||||
|
||||
.analyzer-section {
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Tab Navigation */
|
||||
.analyzer-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 1.5rem 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: rgba(255, 105, 180, 0.1);
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 12px;
|
||||
color: #ff1493;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: rgba(255, 105, 180, 0.2);
|
||||
border-color: #ff1493;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
|
||||
color: white;
|
||||
border-color: #ff1493;
|
||||
}
|
||||
|
||||
/* Tab Content */
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: slideUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Analyzer Container */
|
||||
.analyzer-container {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 8px 32px rgba(255, 20, 147, 0.15);
|
||||
}
|
||||
|
||||
.input-section,
|
||||
.compare-inputs,
|
||||
.search-inputs {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.input-section h3,
|
||||
.compare-input-group h4,
|
||||
.search-input-group h4 {
|
||||
margin-bottom: 1rem;
|
||||
color: #ff1493;
|
||||
}
|
||||
|
||||
.text-input,
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 12px;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 1rem;
|
||||
color: #6b3a5f;
|
||||
background: white;
|
||||
resize: vertical;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.text-input:focus,
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #ff1493;
|
||||
box-shadow: 0 0 12px rgba(255, 20, 147, 0.2);
|
||||
}
|
||||
|
||||
.text-input::placeholder,
|
||||
.search-input::placeholder {
|
||||
color: #b8659c;
|
||||
}
|
||||
|
||||
.input-info {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 0.8rem;
|
||||
padding: 0.8rem;
|
||||
background: rgba(255, 192, 203, 0.15);
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
color: #6b3a5f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Analyzer Buttons */
|
||||
.analyzer-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-analyze,
|
||||
.btn-calculate {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: 0.9rem 1.5rem;
|
||||
background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
|
||||
}
|
||||
|
||||
.btn-analyze:hover,
|
||||
.btn-calculate:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(255, 20, 147, 0.4);
|
||||
}
|
||||
|
||||
/* Compare Inputs */
|
||||
.compare-inputs,
|
||||
.search-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.compare-input-group,
|
||||
.search-input-group {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Result Section */
|
||||
.result-section {
|
||||
margin-top: 2rem;
|
||||
animation: slideUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Analysis Results */
|
||||
.analysis-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.analysis-result h4 {
|
||||
color: #ff1493;
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, rgba(255, 192, 203, 0.2) 0%, rgba(255, 160, 180, 0.1) 100%);
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(255, 105, 180, 0.4);
|
||||
background: linear-gradient(135deg, rgba(255, 192, 203, 0.3) 0%, rgba(255, 160, 180, 0.2) 100%);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: #ff1493;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #6b3a5f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Text Transformations */
|
||||
.text-transformations {
|
||||
margin-top: 1.5rem;
|
||||
border-top: 2px solid rgba(255, 105, 180, 0.15);
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.text-transformations h5 {
|
||||
color: #ff1493;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.transformation-box {
|
||||
background: rgba(255, 192, 203, 0.1);
|
||||
border: 1px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.transformation-box label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #ff1493;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.transformation-text {
|
||||
background: white;
|
||||
border: 1px solid rgba(255, 105, 180, 0.15);
|
||||
border-radius: 8px;
|
||||
padding: 0.8rem;
|
||||
margin-bottom: 0.8rem;
|
||||
word-break: break-word;
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
color: #6b3a5f;
|
||||
line-height: 1.6;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: rgba(255, 105, 180, 0.15);
|
||||
border: 1px solid rgba(255, 105, 180, 0.3);
|
||||
color: #ff1493;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: rgba(255, 105, 180, 0.25);
|
||||
border-color: #ff1493;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Comparison Results */
|
||||
.comparison-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.comparison-result h4 {
|
||||
color: #ff1493;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.comparison-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.comparison-card {
|
||||
background: linear-gradient(135deg, rgba(255, 192, 203, 0.2) 0%, rgba(255, 160, 180, 0.1) 100%);
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.comparison-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(255, 105, 180, 0.4);
|
||||
}
|
||||
|
||||
.comparison-card h5 {
|
||||
color: #ff1493;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comparison-card p {
|
||||
color: #6b3a5f;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.comparison-result-box {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(255, 105, 180, 0.1);
|
||||
border: 2px solid rgba(255, 105, 180, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comparison-result-box p {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #ff1493;
|
||||
}
|
||||
|
||||
/* Search Results */
|
||||
.search-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-result h4 {
|
||||
color: #ff1493;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.search-summary {
|
||||
background: linear-gradient(135deg, rgba(255, 192, 203, 0.2) 0%, rgba(255, 160, 180, 0.1) 100%);
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
color: #6b3a5f;
|
||||
}
|
||||
|
||||
.search-summary p {
|
||||
margin: 0.8rem 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* Metrics Grid */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 2px solid rgba(255, 105, 180, 0.2);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: rgba(255, 105, 180, 0.4);
|
||||
box-shadow: 0 8px 25px rgba(255, 20, 147, 0.2);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.metric-card h4 {
|
||||
color: #ff1493;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-card p {
|
||||
color: #6b3a5f;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(220, 20, 60, 0.1);
|
||||
border: 2px solid rgba(220, 20, 60, 0.3);
|
||||
color: #dc143c;
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
Responsive Design
|
||||
=========================== */
|
||||
|
|
@ -1154,6 +1556,49 @@ textarea {
|
|||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.compare-inputs,
|
||||
.search-inputs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.analyzer-tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.analyzer-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn-analyze,
|
||||
.btn-calculate {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grade-input-wrapper {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html" class="active">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html" class="active">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
447
js/textanalyse.js
Normal file
447
js/textanalyse.js
Normal file
|
|
@ -0,0 +1,447 @@
|
|||
/**
|
||||
* Textanalyse - Analysiert Texte und zeigt Statistiken
|
||||
* David & Karo - EIS Projekt
|
||||
*/
|
||||
|
||||
/**
|
||||
* Analysiert einen Text und gibt Statistiken zurück
|
||||
* @param {string} text - Der zu analysierende Text
|
||||
* @returns {object} - Enthält Analyseresultate und Details
|
||||
*/
|
||||
function analyseText(text) {
|
||||
// Eingabe validieren
|
||||
if (text === null) {
|
||||
return {
|
||||
valid: false,
|
||||
fehler: 'Eingabe abgebrochen!',
|
||||
nachricht: '❌ Die Textanalyse wurde abgebrochen.'
|
||||
};
|
||||
}
|
||||
|
||||
// Text trimmen (führende und nachfolgende Leerzeichen entfernen)
|
||||
const textTrimmed = text.trim();
|
||||
|
||||
if (textTrimmed === '') {
|
||||
return {
|
||||
valid: false,
|
||||
fehler: 'Text ist leer!',
|
||||
nachricht: '❌ Bitte geben Sie einen Text ein, der analysiert werden soll!'
|
||||
};
|
||||
}
|
||||
|
||||
// Zeichen zählen
|
||||
const anzahlZeichen = text.length;
|
||||
const anzahlZeichenOhneLeerzeichen = text.replace(/\s/g, '').length;
|
||||
|
||||
// Wörter zählen
|
||||
const woerter = textTrimmed.split(/\s+/).filter(wort => wort.length > 0);
|
||||
const anzahlWoerter = woerter.length;
|
||||
|
||||
// Sätze zählen (vereinfacht: Punkt, Frage- und Ausrufezeichen)
|
||||
const anzahlSaetze = (text.match(/[.!?]/g) || []).length || 1;
|
||||
|
||||
// Text in Großbuchstaben
|
||||
const textGross = text.toUpperCase();
|
||||
|
||||
// Text in Kleinbuchstaben
|
||||
const textKlein = text.toLowerCase();
|
||||
|
||||
// Durchschnittliche Wortlänge
|
||||
const durchschnittlicheWortlaenge = anzahlWoerter > 0
|
||||
? (anzahlZeichenOhneLeerzeichen / anzahlWoerter).toFixed(2)
|
||||
: 0;
|
||||
|
||||
// Vokale zählen
|
||||
const vokale = (text.match(/[aeiouäöüAEIOUÄÖÜ]/g) || []).length;
|
||||
|
||||
// Konsonanten zählen
|
||||
const konsonanten = (text.match(/[bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ]/g) || []).length;
|
||||
|
||||
// Zahlen zählen
|
||||
const zahlen = (text.match(/[0-9]/g) || []).length;
|
||||
|
||||
// Längster und kürzester Satz
|
||||
const saetze = text.split(/[.!?]/).map(s => s.trim()).filter(s => s.length > 0);
|
||||
const laengsterSatz = saetze.length > 0
|
||||
? saetze.reduce((prev, current) => (prev.length > current.length) ? prev : current, '')
|
||||
: '';
|
||||
|
||||
const kuerzeesterSatz = saetze.length > 0
|
||||
? saetze.reduce((prev, current) => (prev.length < current.length) ? prev : current, '')
|
||||
: '';
|
||||
|
||||
// Formatierte Ausgabe mit Template Literals
|
||||
const formatiertesErgebnis = `
|
||||
📊 TEXTANALYSE-ERGEBNISSE:
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
📝 Zeichen & Wörter:
|
||||
• Gesamte Zeichen: ${anzahlZeichen}
|
||||
• Zeichen ohne Leerzeichen: ${anzahlZeichenOhneLeerzeichen}
|
||||
• Anzahl der Wörter: ${anzahlWoerter}
|
||||
• Anzahl der Sätze: ${anzahlSaetze}
|
||||
• Durchschn. Wortlänge: ${durchschnittlicheWortlaenge} Zeichen
|
||||
|
||||
🔤 Buchstaben & Laute:
|
||||
• Vokale: ${vokale}
|
||||
• Konsonanten: ${konsonanten}
|
||||
• Zahlen: ${zahlen}
|
||||
|
||||
🔤 ORIGINAL TEXT:
|
||||
${text}
|
||||
|
||||
🔤 GROSSBUCHSTABEN:
|
||||
${textGross}
|
||||
|
||||
🔤 KLEINBUCHSTABEN:
|
||||
${textKlein}
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`;
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
originalText: text,
|
||||
anzahlZeichen: anzahlZeichen,
|
||||
anzahlZeichenOhneLeerzeichen: anzahlZeichenOhneLeerzeichen,
|
||||
anzahlWoerter: anzahlWoerter,
|
||||
anzahlSaetze: anzahlSaetze,
|
||||
durchschnittlicheWortlaenge: durchschnittlicheWortlaenge,
|
||||
vokale: vokale,
|
||||
konsonanten: konsonanten,
|
||||
zahlen: zahlen,
|
||||
textGross: textGross,
|
||||
textKlein: textKlein,
|
||||
saetze: saetze,
|
||||
laengsterSatz: laengsterSatz,
|
||||
kuerzeesterSatz: kuerzeesterSatz,
|
||||
formatiertesErgebnis: formatiertesErgebnis,
|
||||
nachricht: `✅ Text erfolgreich analysiert! ${anzahlWoerter} Wörter, ${anzahlZeichen} Zeichen.`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Vergleicht zwei Texte
|
||||
* @param {string} text1 - Erster Text
|
||||
* @param {string} text2 - Zweiter Text
|
||||
* @returns {object} - Vergleichsergebnisse
|
||||
*/
|
||||
function vergleicheTexte(text1, text2) {
|
||||
const analyse1 = analyseText(text1);
|
||||
const analyse2 = analyseText(text2);
|
||||
|
||||
if (!analyse1.valid || !analyse2.valid) {
|
||||
return {
|
||||
valid: false,
|
||||
fehler: 'Mindestens einer der Texte ist leer!',
|
||||
nachricht: '❌ Bitte geben Sie zwei nicht-leere Texte ein!'
|
||||
};
|
||||
}
|
||||
|
||||
const unterschied = Math.abs(analyse1.anzahlZeichen - analyse2.anzahlZeichen);
|
||||
const laenger = analyse1.anzahlZeichen > analyse2.anzahlZeichen ? 'Text 1' : 'Text 2';
|
||||
|
||||
const vergleichsErgebnis = `
|
||||
📊 TEXTVERGLEICH:
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Text 1 Statistik:
|
||||
• Zeichen: ${analyse1.anzahlZeichen}
|
||||
• Wörter: ${analyse1.anzahlWoerter}
|
||||
|
||||
Text 2 Statistik:
|
||||
• Zeichen: ${analyse2.anzahlZeichen}
|
||||
• Wörter: ${analyse2.anzahlWoerter}
|
||||
|
||||
Vergleich:
|
||||
• Unterschied: ${unterschied} Zeichen
|
||||
• Längerer Text: ${laenger}
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`;
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
vergleichsErgebnis: vergleichsErgebnis,
|
||||
unterschied: unterschied,
|
||||
laenger: laenger,
|
||||
nachricht: `✅ Vergleich abgeschlossen! Unterschied: ${unterschied} Zeichen`
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Sucht nach Wörtern in einem Text
|
||||
* @param {string} text - Der Text zum Durchsuchen
|
||||
* @param {string} suchbegriff - Das Wort zum Suchen
|
||||
* @returns {object} - Suchergebnisse
|
||||
*/
|
||||
function sucheWort(text, suchbegriff) {
|
||||
if (!text.trim() || !suchbegriff.trim()) {
|
||||
return {
|
||||
valid: false,
|
||||
fehler: 'Eingabe unvollständig!',
|
||||
nachricht: '❌ Bitte geben Sie Text und Suchbegriff ein!'
|
||||
};
|
||||
}
|
||||
|
||||
const regex = new RegExp(suchbegriff, 'gi');
|
||||
const treffer = (text.match(regex) || []).length;
|
||||
const indexTreffer = [];
|
||||
let match;
|
||||
|
||||
while ((match = regex.exec(text)) !== null) {
|
||||
indexTreffer.push(match.index);
|
||||
}
|
||||
|
||||
const suchergebnis = `
|
||||
🔍 SUCHE: "${suchbegriff}"
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
• Treffer gefunden: ${treffer}
|
||||
• Positionen: ${indexTreffer.join(', ') || 'Keine'}
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`;
|
||||
|
||||
return {
|
||||
valid: true,
|
||||
suchbegriff: suchbegriff,
|
||||
treffer: treffer,
|
||||
positionen: indexTreffer,
|
||||
suchergebnis: suchergebnis,
|
||||
nachricht: `✅ ${treffer} Treffer für "${suchbegriff}" gefunden!`
|
||||
};
|
||||
}
|
||||
|
||||
// DOM-Manipulation und Event-Listener
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const analyzeBtn = document.getElementById('analyze-btn');
|
||||
const compareBtn = document.getElementById('compare-btn');
|
||||
const searchBtn = document.getElementById('search-btn');
|
||||
const resetBtn = document.getElementById('reset-btn');
|
||||
|
||||
if (analyzeBtn) {
|
||||
analyzeBtn.addEventListener('click', performTextAnalysis);
|
||||
}
|
||||
|
||||
if (compareBtn) {
|
||||
compareBtn.addEventListener('click', performTextComparison);
|
||||
}
|
||||
|
||||
if (searchBtn) {
|
||||
searchBtn.addEventListener('click', performTextSearch);
|
||||
}
|
||||
|
||||
if (resetBtn) {
|
||||
resetBtn.addEventListener('click', resetAnalyzer);
|
||||
}
|
||||
|
||||
// Live-Zeichenzähler
|
||||
const textInput = document.getElementById('text-input');
|
||||
const charCount = document.getElementById('char-count');
|
||||
|
||||
if (textInput && charCount) {
|
||||
textInput.addEventListener('input', function() {
|
||||
charCount.textContent = this.value.length;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Führt Textanalyse durch
|
||||
*/
|
||||
function performTextAnalysis() {
|
||||
const textInput = document.getElementById('text-input');
|
||||
const resultDiv = document.getElementById('result');
|
||||
|
||||
if (!textInput) return;
|
||||
|
||||
const text = textInput.value;
|
||||
const result = analyseText(text);
|
||||
|
||||
if (!result.valid) {
|
||||
resultDiv.innerHTML = `<div class="error-message">⚠️ ${result.fehler}<br>${result.nachricht}</div>`;
|
||||
alert(result.nachricht);
|
||||
console.error(result.fehler, result);
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML-Ergebnis formatieren
|
||||
let resultHTML = `
|
||||
<div class="analysis-result">
|
||||
<h4>📊 Analyseresultate</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.anzahlZeichen}</div>
|
||||
<div class="stat-label">Zeichen (gesamt)</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.anzahlZeichenOhneLeerzeichen}</div>
|
||||
<div class="stat-label">Ohne Leerzeichen</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.anzahlWoerter}</div>
|
||||
<div class="stat-label">Wörter</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.anzahlSaetze}</div>
|
||||
<div class="stat-label">Sätze</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.vokale}</div>
|
||||
<div class="stat-label">Vokale</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.konsonanten}</div>
|
||||
<div class="stat-label">Konsonanten</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.zahlen}</div>
|
||||
<div class="stat-label">Zahlen</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${result.durchschnittlicheWortlaenge}</div>
|
||||
<div class="stat-label">Ø Wortlänge</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-transformations">
|
||||
<h5>🔤 Texttransformationen:</h5>
|
||||
|
||||
<div class="transformation-box">
|
||||
<label>GROSSBUCHSTABEN:</label>
|
||||
<div class="transformation-text">${escapeHtml(result.textGross)}</div>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${escapeHtml(result.textGross).replace(/'/g, "\\'")}')">📋 Kopieren</button>
|
||||
</div>
|
||||
|
||||
<div class="transformation-box">
|
||||
<label>kleinbuchstaben:</label>
|
||||
<div class="transformation-text">${escapeHtml(result.textKlein)}</div>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${escapeHtml(result.textKlein).replace(/'/g, "\\'")}')">📋 Kopieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
resultDiv.innerHTML = resultHTML;
|
||||
|
||||
// Console und Alert Output
|
||||
console.log(result.formatiertesErgebnis);
|
||||
alert(result.nachricht);
|
||||
}
|
||||
|
||||
/**
|
||||
* Führt Textvergleich durch
|
||||
*/
|
||||
function performTextComparison() {
|
||||
const text1Input = document.getElementById('text1-compare');
|
||||
const text2Input = document.getElementById('text2-compare');
|
||||
const compareResultDiv = document.getElementById('compare-result');
|
||||
|
||||
if (!text1Input || !text2Input) return;
|
||||
|
||||
const text1 = text1Input.value;
|
||||
const text2 = text2Input.value;
|
||||
|
||||
const result = vergleicheTexte(text1, text2);
|
||||
|
||||
if (!result.valid) {
|
||||
compareResultDiv.innerHTML = `<div class="error-message">⚠️ ${result.fehler}<br>${result.nachricht}</div>`;
|
||||
alert(result.nachricht);
|
||||
return;
|
||||
}
|
||||
|
||||
let resultHTML = `
|
||||
<div class="comparison-result">
|
||||
<h4>📊 Vergleichsergebnisse</h4>
|
||||
<div class="comparison-cards">
|
||||
<div class="comparison-card">
|
||||
<h5>Text 1</h5>
|
||||
<p><strong>Zeichen:</strong> ${result.vergleichsErgebnis.match(/Zeichen: (\d+)/)[1] || '0'}</p>
|
||||
<p><strong>Wörter:</strong> ${result.vergleichsErgebnis.match(/Wörter: (\d+)/)[1] || '0'}</p>
|
||||
</div>
|
||||
<div class="comparison-card">
|
||||
<h5>Text 2</h5>
|
||||
<p><strong>Zeichen:</strong> ${result.vergleichsErgebnis.match(/Zeichen: (\d+)[\s\S]*?Wörter: (\d+)[\s\S]*?Text 2 Statistik[\s\S]*?Zeichen: (\d+)/)[3] || '0'}</p>
|
||||
<p><strong>Wörter:</strong> ${result.vergleichsErgebnis.match(/Text 2[\s\S]*?Wörter: (\d+)/)[1] || '0'}</p>
|
||||
</div>
|
||||
<div class="comparison-result-box">
|
||||
<p><strong>Längerer Text:</strong> ${result.laenger}</p>
|
||||
<p><strong>Unterschied:</strong> ${result.unterschied} Zeichen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
compareResultDiv.innerHTML = resultHTML;
|
||||
console.log(result.vergleichsErgebnis);
|
||||
alert(result.nachricht);
|
||||
}
|
||||
|
||||
/**
|
||||
* Führt Wortsuche durch
|
||||
*/
|
||||
function performTextSearch() {
|
||||
const searchTextInput = document.getElementById('search-text');
|
||||
const searchTermInput = document.getElementById('search-term');
|
||||
const searchResultDiv = document.getElementById('search-result');
|
||||
|
||||
if (!searchTextInput || !searchTermInput) return;
|
||||
|
||||
const text = searchTextInput.value;
|
||||
const suchbegriff = searchTermInput.value;
|
||||
|
||||
const result = sucheWort(text, suchbegriff);
|
||||
|
||||
if (!result.valid) {
|
||||
searchResultDiv.innerHTML = `<div class="error-message">⚠️ ${result.fehler}<br>${result.nachricht}</div>`;
|
||||
alert(result.nachricht);
|
||||
return;
|
||||
}
|
||||
|
||||
let resultHTML = `
|
||||
<div class="search-result">
|
||||
<h4>🔍 Suchergebnisse</h4>
|
||||
<div class="search-summary">
|
||||
<p><strong>Suchbegriff:</strong> "${escapeHtml(result.suchbegriff)}"</p>
|
||||
<p><strong>Treffer gefunden:</strong> ${result.treffer}</p>
|
||||
${result.treffer > 0 ? `<p><strong>Positionen:</strong> ${result.positionen.join(', ')}</p>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
searchResultDiv.innerHTML = resultHTML;
|
||||
console.log(result.suchergebnis);
|
||||
alert(result.nachricht);
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt den Analyzer zurück
|
||||
*/
|
||||
function resetAnalyzer() {
|
||||
document.getElementById('text-input').value = '';
|
||||
document.getElementById('text1-compare').value = '';
|
||||
document.getElementById('text2-compare').value = '';
|
||||
document.getElementById('search-text').value = '';
|
||||
document.getElementById('search-term').value = '';
|
||||
document.getElementById('result').innerHTML = '';
|
||||
document.getElementById('compare-result').innerHTML = '';
|
||||
document.getElementById('search-result').innerHTML = '';
|
||||
document.getElementById('char-count').textContent = '0';
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML-escape für sicherer Ausgabe
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return text.replace(/[&<>"']/g, m => map[m]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Text in Zwischenablage kopieren
|
||||
*/
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
alert('✅ Text kopiert!');
|
||||
}).catch(() => {
|
||||
alert('❌ Fehler beim Kopieren');
|
||||
});
|
||||
}
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html" class="active">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html" class="active">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html" class="active">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
245
textanalyse.html
Normal file
245
textanalyse.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Textanalyse - David & Karo - EIS Projekt">
|
||||
<title>Textanalyse – David & Karo</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="icon" href="img/logo.png" type="image/png">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<img src="img/logo.png" alt="Logo">
|
||||
<div class="logo-text">
|
||||
<span class="institution">David & Karo</span>
|
||||
<span class="project">EIS Projekt</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="index.html">Start</a>
|
||||
<a href="ueber_uns.html">Über uns</a>
|
||||
<a href="eis_projekt.html">Projekt</a>
|
||||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html" class="active">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<h1>📝 Textanalyse 🔍</h1>
|
||||
<p>Analysiere Texte in Echtzeit! Zähle Zeichen, Wörter, Vokale und mehr. Perfekt für Schreiben und Sprachanalyse! ✨</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>🎯 Was kann der Textanalyzer?</h2>
|
||||
<div class="info-cards">
|
||||
<div class="info-card">
|
||||
<h4>1️⃣ Schnelle Analyse</h4>
|
||||
<p>Geben Sie einen Text ein und erhalten Sie sofort detaillierte Statistiken über Zeichen, Wörter und mehr.</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h4>2️⃣ Textvergleich</h4>
|
||||
<p>Vergleichen Sie zwei Texte und sehen Sie, welcher länger ist und um wie viele Zeichen er sich unterscheidet.</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h4>3️⃣ Wortsuche</h4>
|
||||
<p>Suchen Sie nach bestimmten Wörtern oder Phrasen und sehen Sie, wie oft sie vorkommen und wo.</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h4>4️⃣ Transformationen</h4>
|
||||
<p>Wandeln Sie Ihren Text in Großbuchstaben oder Kleinbuchstaben um und kopieren Sie das Ergebnis!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="analyzer-section">
|
||||
<h2>🔨 Textanalyzer-Tools</h2>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="analyzer-tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('analyze-tab')">📊 Analysieren</button>
|
||||
<button class="tab-btn" onclick="switchTab('compare-tab')">⚖️ Vergleichen</button>
|
||||
<button class="tab-btn" onclick="switchTab('search-tab')">🔍 Suchen</button>
|
||||
</div>
|
||||
|
||||
<!-- Analyze Tab -->
|
||||
<div id="analyze-tab" class="tab-content active">
|
||||
<div class="analyzer-container">
|
||||
<div class="input-section">
|
||||
<h3>📝 Text eingeben:</h3>
|
||||
<textarea
|
||||
id="text-input"
|
||||
class="text-input"
|
||||
placeholder="Geben Sie hier einen Text ein, den Sie analysieren möchten..."
|
||||
rows="6"
|
||||
></textarea>
|
||||
<div class="input-info">
|
||||
<span>Zeichen: <strong id="char-count">0</strong></span>
|
||||
</div>
|
||||
|
||||
<div class="analyzer-buttons">
|
||||
<button id="analyze-btn" class="btn btn-analyze">🔍 Analysieren</button>
|
||||
<button id="reset-btn" class="btn btn-reset">🔄 Zurücksetzen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="result" class="result-section">
|
||||
<!-- Ergebnisse werden hier eingefügt -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compare Tab -->
|
||||
<div id="compare-tab" class="tab-content">
|
||||
<div class="analyzer-container">
|
||||
<div class="compare-inputs">
|
||||
<div class="compare-input-group">
|
||||
<h4>📝 Text 1:</h4>
|
||||
<textarea
|
||||
id="text1-compare"
|
||||
class="text-input"
|
||||
placeholder="Geben Sie den ersten Text ein..."
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="compare-input-group">
|
||||
<h4>📝 Text 2:</h4>
|
||||
<textarea
|
||||
id="text2-compare"
|
||||
class="text-input"
|
||||
placeholder="Geben Sie den zweiten Text ein..."
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button id="compare-btn" class="btn btn-calculate">⚖️ Vergleichen</button>
|
||||
</div>
|
||||
|
||||
<div id="compare-result" class="result-section">
|
||||
<!-- Vergleichsergebnisse werden hier eingefügt -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Tab -->
|
||||
<div id="search-tab" class="tab-content">
|
||||
<div class="analyzer-container">
|
||||
<div class="search-inputs">
|
||||
<div class="search-input-group">
|
||||
<h4>📝 Zu durchsuchender Text:</h4>
|
||||
<textarea
|
||||
id="search-text"
|
||||
class="text-input"
|
||||
placeholder="Geben Sie den Text ein, in dem gesucht werden soll..."
|
||||
rows="5"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="search-input-group">
|
||||
<h4>🔍 Suchbegriff:</h4>
|
||||
<input
|
||||
type="text"
|
||||
id="search-term"
|
||||
class="search-input"
|
||||
placeholder="Geben Sie das Wort/die Phrase ein, das/die gesucht werden soll..."
|
||||
>
|
||||
</div>
|
||||
|
||||
<button id="search-btn" class="btn btn-calculate">🔍 Suchen</button>
|
||||
</div>
|
||||
|
||||
<div id="search-result" class="result-section">
|
||||
<!-- Suchergebnisse werden hier eingefügt -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>📚 Analysierte Metriken</h2>
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔤</div>
|
||||
<h4>Zeichen</h4>
|
||||
<p>Gesamtzahl aller Zeichen inklusive Leerzeichen und Sonderzeichen</p>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">📝</div>
|
||||
<h4>Wörter</h4>
|
||||
<p>Anzahl der durch Leerzeichen getrennten Wörter</p>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">✏️</div>
|
||||
<h4>Sätze</h4>
|
||||
<p>Anzahl der Sätze (erkannt an . ! ?)</p>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔉</div>
|
||||
<h4>Vokale</h4>
|
||||
<p>Anzahl der Selbstlaute (a, e, i, o, u mit Umlauten)</p>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔊</div>
|
||||
<h4>Konsonanten</h4>
|
||||
<p>Anzahl der Mittellaute (alle anderen Buchstaben)</p>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔢</div>
|
||||
<h4>Zahlen</h4>
|
||||
<p>Anzahl der im Text vorkommenden Ziffern</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>💡 Tipps & Tricks</h2>
|
||||
<div class="tips-box">
|
||||
<ul>
|
||||
<li><strong>Live-Zähler:</strong> Der Zeichenzähler aktualisiert sich automatisch während des Tippens!</li>
|
||||
<li><strong>Copy-Funktion:</strong> Mit dem 📋 Button können Sie transformierte Texte sofort kopieren!</li>
|
||||
<li><strong>Wortsuche:</strong> Die Suche ist case-insensitive (unterscheidet nicht zwischen Groß- und Kleinbuchstaben)</li>
|
||||
<li><strong>Template Literals:</strong> Das Skript verwendet moderne JavaScript Template Literals für formatierte Ausgaben</li>
|
||||
<li><strong>Fehlerbehandlung:</strong> Der Analyzer überprüft auf leere Eingaben und zeigt hilfreiche Fehlermeldungen</li>
|
||||
<li><strong>Browser-Kompatibilität:</strong> Funktioniert auf allen modernen Browsern (Chrome, Firefox, Safari, Edge)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 David & Karo – EIS Projekt. Alle Rechte vorbehalten. 💕</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script src="js/textanalyse.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<script>
|
||||
/**
|
||||
* Tab-Wechsel Funktion
|
||||
*/
|
||||
function switchTab(tabName) {
|
||||
// Alle Tabs verstecken
|
||||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
// Alle Buttons deaktivieren
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
|
||||
// Gewählten Tab anzeigen
|
||||
document.getElementById(tabName).classList.add('active');
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
<a href="team.html">Team</a>
|
||||
<a href="galerie.html">Galerie</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<a href="textanalyse.html">Textanalyse</a>
|
||||
<a href="kontakt.html">Kontakt</a>
|
||||
<a href="impressum.html">Impressum</a>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue