1
0
2025-03-05 13:57:18 +01:00

182 lines
5.5 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Cleaner</title>
<meta property="og:title" content="Text Cleaner">
<meta property="og:description" content="Entferne doppelte Zeilen aus einem Text">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tools.ponywave.de/text_cleaner">
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="text_cleaner"></script>
<style>
:root {
--bg-color: #ffffff;
--text-color: #333333;
--input-bg: #f0f0f0;
--border-color: #cccccc;
--button-bg: #007bff;
}
.dark-mode {
--bg-color: #1a1a1a;
--text-color: #e0e0e0;
--input-bg: #2d2d2d;
--border-color: #404040;
--button-bg: #0056b3;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.theme-switch {
position: absolute;
top: 20px;
right: 20px;
}
.text-boxes {
display: flex;
gap: 20px;
margin-top: 40px;
}
textarea {
flex: 1;
height: 300px;
padding: 10px;
background-color: var(--input-bg);
border: 1px solid var(--border-color);
color: var(--text-color);
border-radius: 4px;
resize: vertical;
}
.button-group {
display: flex;
gap: 10px;
justify-content: center;
margin: 20px 0;
}
button {
padding: 10px 20px;
background-color: var(--button-bg);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
opacity: 0.9;
}
#themeButton {
padding: 8px 15px;
font-size: 1.2em;
background-color: var(--input-bg);
color: var(--text-color);
}
</style>
</head>
<body>
<div class="container">
<button id="themeButton" class="theme-switch" onclick="toggleTheme()">🌙</button>
<div class="text-boxes">
<textarea id="input" placeholder="Eingabe..."></textarea>
<textarea id="output" readonly placeholder="Bereinigter Text..."></textarea>
</div>
<div class="button-group">
<button onclick="removeDuplicates()">Duplikate entfernen</button>
<button onclick="copyOutput()">📋 Kopieren</button>
</div>
</div>
<script>
// Theme Handling
const themeButton = document.getElementById('themeButton');
const body = document.body;
function updateThemeButton() {
themeButton.textContent = body.classList.contains('dark-mode') ? '☀️' : '🌙';
}
function applySystemTheme() {
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (systemDark && !localStorage.getItem('theme')) {
body.classList.add('dark-mode');
}
updateThemeButton();
}
function toggleTheme() {
body.classList.toggle('dark-mode');
localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');
updateThemeButton();
}
// Initial Theme Setup
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.classList.toggle('dark-mode', savedTheme === 'dark');
} else {
applySystemTheme();
}
// System Theme Change Listener
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) {
body.classList.toggle('dark-mode', e.matches);
updateThemeButton();
}
});
// Text Processing
function removeDuplicates() {
const input = document.getElementById('input').value;
const lines = input.split('\n');
const seen = new Set();
const result = [];
for (const line of lines) {
const trimmedLine = line.trim();
if (trimmedLine && !seen.has(trimmedLine)) {
seen.add(trimmedLine);
result.push(trimmedLine);
}
}
document.getElementById('output').value = result.join('\n');
}
// Copy Function
function copyOutput() {
const output = document.getElementById('output');
output.select();
try {
document.execCommand('copy');
const btn = event.target;
btn.textContent = '✓ Kopiert!';
setTimeout(() => btn.textContent = '📋 Kopieren', 1500);
} catch (err) {
alert('Kopieren fehlgeschlagen. Bitte manuell kopieren.');
}
}
</script>
</body>
</html>