Neu: Text Sorter
This commit is contained in:
@@ -163,6 +163,10 @@
|
||||
<h2 class="tool-title">Text Cleaner</h2>
|
||||
<p class="tool-description">Entfere doppelte Zeilen aus einem Text</p>
|
||||
</a>
|
||||
<a href="https://tools.ponywave.de/text_sorter" class="tool-bubble">
|
||||
<h2 class="tool-title">Text Sorter</h2>
|
||||
<p class="tool-description">Sortiere einen Text alphabetisch</p>
|
||||
</a>
|
||||
<a href="https://tools.ponywave.de/shape_shifter" class="tool-bubble">
|
||||
<h2 class="tool-title">Shape Shifter</h2>
|
||||
<p class="tool-description">Ein Canvas-Experiment, bei dem Partikel verwendet werden, um verschiedene Formen basierend auf Benutzereingaben darzustellen. Unterstützt mehrere Modi: Text, Countdown, Uhrzeit und Icons.</p>
|
||||
|
||||
@@ -9,6 +9,7 @@ https://tools.ponywave.de/emoji
|
||||
https://tools.ponywave.de/flash_dl
|
||||
https://tools.ponywave.de/kemonogen
|
||||
https://tools.ponywave.de/text_cleaner
|
||||
https://tools.ponywave.de/text_sorter
|
||||
https://tools.ponywave.de/pinkie_timer
|
||||
https://tools.ponywave.de/shape_shifter
|
||||
https://tools.ponywave.de/sys_info
|
||||
|
||||
194
text_sorter/index.html
Normal file
194
text_sorter/index.html
Normal file
@@ -0,0 +1,194 @@
|
||||
<!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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user