199 lines
6.2 KiB
HTML
199 lines
6.2 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 Sorter</title>
|
|
<meta property="og:title" content="Text Sorter">
|
|
<meta property="og:description" content="Sortiere einen Text alphabetisch">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://tools.ponywave.de/text_sorter">
|
|
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="text_sorter"></script>
|
|
<style>
|
|
:root {
|
|
--bg-color: #ffffff;
|
|
--text-color: #000000;
|
|
--input-bg: #f0f0f0;
|
|
--button-bg: #e0e0e0;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #ffffff;
|
|
--input-bg: #2d2d2d;
|
|
--button-bg: #3d3d3d;
|
|
}
|
|
|
|
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-toggle {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
cursor: pointer;
|
|
background: var(--button-bg);
|
|
border: none;
|
|
padding: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
height: 150px;
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background-color: var(--input-bg);
|
|
color: var(--text-color);
|
|
border: 1px solid #666;
|
|
border-radius: 5px;
|
|
resize: vertical;
|
|
white-space: pre;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
background-color: var(--button-bg);
|
|
color: var(--text-color);
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: filter 0.2s;
|
|
}
|
|
|
|
button:hover {
|
|
filter: brightness(1.2);
|
|
}
|
|
/* Toast-Notification Stile */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--button-bg);
|
|
color: var(--text-color);
|
|
padding: 12px 24px;
|
|
border-radius: 25px;
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toast.visible {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.toast::before {
|
|
content: '✓';
|
|
font-size: 1.2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<button class="theme-toggle">☀️</button>
|
|
|
|
<h1>Text Sorter</h1>
|
|
|
|
<textarea id="input" placeholder="Gib deinen Text hier ein..."></textarea>
|
|
|
|
<div class="button-group">
|
|
<button onclick="sortText()">Sortieren</button>
|
|
<button onclick="copyText()">Kopieren</button>
|
|
</div>
|
|
|
|
<textarea id="output" readonly placeholder="Hier erscheint der sortierte Text..."></textarea>
|
|
</div>
|
|
<div class="toast" id="toast">In Zwischenablage kopiert!</div>
|
|
<script>
|
|
// Theme Handling
|
|
const themeToggle = document.querySelector('.theme-toggle');
|
|
const storedTheme = localStorage.getItem('theme');
|
|
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (storedTheme === 'dark' || (!storedTheme && systemDark)) {
|
|
document.body.dataset.theme = 'dark';
|
|
themeToggle.textContent = '🌙';
|
|
} else {
|
|
themeToggle.textContent = '☀️';
|
|
}
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
if (document.body.dataset.theme === 'dark') {
|
|
delete document.body.dataset.theme;
|
|
localStorage.setItem('theme', 'light');
|
|
themeToggle.textContent = '☀️';
|
|
} else {
|
|
document.body.dataset.theme = 'dark';
|
|
localStorage.setItem('theme', 'dark');
|
|
themeToggle.textContent = '🌙';
|
|
}
|
|
});
|
|
|
|
// Text Sorting
|
|
function sortText() {
|
|
const input = document.getElementById('input').value;
|
|
const lines = input.split('\n')
|
|
.map(line => line.trim())
|
|
.filter(line => line.length > 0)
|
|
.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
|
|
|
|
document.getElementById('output').value = lines.join('\n');
|
|
}
|
|
|
|
// Verbesserte Kopierfunktion mit Toast
|
|
async function copyText() {
|
|
const output = document.getElementById('output');
|
|
try {
|
|
await navigator.clipboard.writeText(output.value);
|
|
showToast('✓ In Zwischenablage kopiert!');
|
|
} catch (err) {
|
|
showToast('❌ Fehler beim Kopieren!', true);
|
|
}
|
|
}
|
|
|
|
// Toast-Notification Funktion
|
|
function showToast(message, isError = false) {
|
|
const toast = document.getElementById('toast');
|
|
toast.textContent = message;
|
|
|
|
if(isError) {
|
|
toast.style.setProperty('background', '#d32f2f');
|
|
toast.style.setProperty('color', '#ffffff');
|
|
toast.innerHTML = `❌ ${message}`;
|
|
} else {
|
|
toast.style.removeProperty('background');
|
|
toast.style.removeProperty('color');
|
|
}
|
|
|
|
toast.classList.add('visible');
|
|
setTimeout(() => {
|
|
toast.classList.remove('visible');
|
|
}, 2000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |