249 lines
8.8 KiB
HTML
249 lines
8.8 KiB
HTML
<!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>
|
||
<!-- Dark Mode Toggle Button -->
|
||
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
|
||
<span class="dark-mode-icon">🌙</span>
|
||
</button>
|
||
<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>
|