From 70319d585967cc738f3a418a026ef4f030fa68be Mon Sep 17 00:00:00 2001
From: Akamaru <Akamaru92@live.de>
Date: Sun, 2 Mar 2025 22:41:15 +0100
Subject: [PATCH] Neu: Text Sorter

---
 index.html             |   4 +
 sitemap.txt            |   1 +
 text_sorter/index.html | 194 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 199 insertions(+)
 create mode 100644 text_sorter/index.html
diff --git a/index.html b/index.html
index 51dd8dd..863a1cc 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/sitemap.txt b/sitemap.txt
index dc2ebc9..f8ed88e 100644
--- a/sitemap.txt
+++ b/sitemap.txt
@@ -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
diff --git a/text_sorter/index.html b/text_sorter/index.html
new file mode 100644
index 0000000..7430e21
--- /dev/null
+++ b/text_sorter/index.html
@@ -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>
\ No newline at end of file
