secrets.html

<!DOCTYPE html>
<html lang="de" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Passwörter & Secrets – CryptoStudio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {}
            }
        }
    </script>
    <style>
        :root {
            --bg: #090909;
            --bg-panel: #111111;
            --bg-soft: rgba(255,255,255,0.04);
            --text: #f5f5f5;
            --muted: #b9b9b9;
            --border: rgba(255,255,255,0.12);
        }

        body.theme-light {
            --bg: #f5f3ef;
            --bg-panel: #ffffff;
            --bg-soft: rgba(17,17,17,0.03);
            --text: #111111;
            --muted: #4d4d4d;
            --border: rgba(17,17,17,0.08);
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        *::selection { background: rgba(255,255,255,0.18); color: var(--text); }
        header, footer, .bg-slate-900\/60, .bg-slate-900\/40, .bg-slate-950, .bg-slate-900, .bg-slate-800 { background: var(--bg-panel) !important; border-color: var(--border) !important; }
        .text-slate-300, .text-slate-400, .text-slate-500, .text-slate-200 { color: var(--muted) !important; }
        .text-white, .text-slate-100 { color: var(--text) !important; }
        .border-slate-800, .border-slate-700 { border-color: var(--border) !important; }
        .bg-emerald-500\/10, .bg-emerald-600, .bg-emerald-600\/20, .bg-emerald-500 { background: var(--bg-soft) !important; border-color: var(--border) !important; color: var(--text) !important; }
        .text-emerald-400, .text-emerald-300 { color: var(--text) !important; }
        .theme-toggle {
            width: 2.4rem; height: 2.4rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
            border:1px solid var(--border); background: var(--bg-soft); color: var(--text); cursor: pointer;
        }
        .brand-link {
            display:inline-flex; align-items:center; gap:0.5rem; padding:0.45rem 0.8rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
        }
        .brand-mark { display:inline-flex; width:1.7rem; height:1.7rem; border-radius:999px; border:1px solid var(--border); background: var(--bg-soft); align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; }
    </style>
</head>
<body class="min-h-screen flex flex-col antialiased">
    <div id="toast" class="fixed top-4 left-1/2 -translate-x-1/2 sm:left-auto sm:right-5 sm:translate-x-0 z-50 transform -translate-y-24 opacity-0 transition-all duration-300 pointer-events-none">
        <div class="bg-slate-900/90 backdrop-blur-md text-white font-medium px-4 py-3 rounded-xl shadow-2xl flex items-center justify-center space-x-2 border border-slate-700 text-sm">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
            <span id="toastMsg">In die Zwischenablage kopiert!</span>
        </div>
    </div>

    <header class="border-b border-slate-800/80 sticky top-0 z-40 backdrop-blur-md">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
            <a href="index.html" class="flex items-center space-x-3 group">
                <div class="brand-mark">A</div>
                <div>
                    <span class="font-bold text-lg tracking-tight">CryptoStudio</span>
                    <span class="block text-[11px] text-slate-400">Minimalist Cryptography Suite</span>
                </div>
            </a>
            <div class="flex items-center gap-3">
                <button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">☼</button>
                <a href="https://github.com/arien-dev" target="_blank" rel="noopener" class="brand-link"><span class="brand-mark">G</span> Made by arien-dev</a>
            </div>
        </div>
    </header>

    <main class="max-w-5xl mx-auto w-full px-4 sm:px-6 py-8 flex-grow">
        <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-slate-800/80">
            <div>
                <span class="text-xs font-mono uppercase tracking-widest text-slate-300">Secrets Module</span>
                <h1 class="text-2xl sm:text-3xl font-black tracking-tight mt-1">Passwörter & Geheimnisse</h1>
                <p class="text-slate-400 text-xs sm:text-sm mt-1">Kryptographisch sichere Zufallspasswörter, UUID v4, 256-Bit Hex Tokens & Base64 Secrets.</p>
            </div>
            <div class="inline-flex items-center space-x-2 bg-slate-900/60 border border-slate-800 px-3 py-1.5 rounded-full text-xs self-start md:self-auto">
                <span class="w-2 h-2 rounded-full bg-white animate-pulse"></span>
                <span>100% Lokale Berechnung</span>
            </div>
        </div>

        <div class="mb-6 p-4 bg-slate-900/60 border border-slate-800 rounded-2xl flex items-start space-x-3">
            <input type="checkbox" id="secretsTos" onchange="toggleSecretsControls()" class="mt-0.5 rounded accent-white w-4 h-4 cursor-pointer">
            <label for="secretsTos" class="text-xs text-slate-300 cursor-pointer leading-relaxed">
                Ich habe die <a href="terms.html" target="_blank" class="hover:underline font-medium">Nutzungsbedingungen</a> gelesen und akzeptiere diese. Ich verstehe, dass alle Daten lokal bleiben.
            </label>
        </div>

        <div id="secretsGrid" class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 opacity-50 pointer-events-none transition-all duration-300">
            <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-6 shadow-xl backdrop-blur-md flex flex-col justify-between">
                <div>
                    <h2 class="text-lg font-bold text-white mb-1">Passwort Generator</h2>
                    <p class="text-slate-400 text-xs mb-5">Erzeugt zufällige Zeichenketten mit hoher Entropie via Web Crypto API.</p>

                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between text-xs font-medium mb-1.5">
                                <span class="text-slate-300">Passwortlänge</span>
                                <span id="pwdLengthVal" class="text-slate-100 font-bold">20 Zeichen</span>
                            </div>
                            <input type="range" id="pwdLength" min="8" max="64" value="20" oninput="document.getElementById('pwdLengthVal').innerText = this.value + ' Zeichen'; generateSecurePassword()" class="w-full accent-white">
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
                            <label class="flex items-center space-x-2.5 bg-slate-950 p-2.5 rounded-xl border border-slate-800 cursor-pointer hover:border-slate-700 transition">
                                <input type="checkbox" id="pwdUpper" checked onchange="generateSecurePassword()" class="rounded accent-white w-4 h-4">
                                <span class="text-slate-200">Großbuchstaben (A-Z)</span>
                            </label>
                            <label class="flex items-center space-x-2.5 bg-slate-950 p-2.5 rounded-xl border border-slate-800 cursor-pointer hover:border-slate-700 transition">
                                <input type="checkbox" id="pwdLower" checked onchange="generateSecurePassword()" class="rounded accent-white w-4 h-4">
                                <span class="text-slate-200">Kleinbuchstaben (a-z)</span>
                            </label>
                            <label class="flex items-center space-x-2.5 bg-slate-950 p-2.5 rounded-xl border border-slate-800 cursor-pointer hover:border-slate-700 transition">
                                <input type="checkbox" id="pwdDigits" checked onchange="generateSecurePassword()" class="rounded accent-white w-4 h-4">
                                <span class="text-slate-200">Zahlen (0-9)</span>
                            </label>
                            <label class="flex items-center space-x-2.5 bg-slate-950 p-2.5 rounded-xl border border-slate-800 cursor-pointer hover:border-slate-700 transition">
                                <input type="checkbox" id="pwdSymbols" checked onchange="generateSecurePassword()" class="rounded accent-white w-4 h-4">
                                <span class="text-slate-200">Sonderzeichen (!@#$)</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <div class="relative">
                        <input type="text" id="pwdOutput" readonly class="w-full bg-slate-950 border border-slate-800 rounded-xl py-3 pl-4 pr-24 font-mono text-slate-100 font-bold text-xs sm:text-sm">
                        <button onclick="copyToClipboard(document.getElementById('pwdOutput').value)" class="absolute right-2 top-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-white text-xs font-medium rounded-lg">Kopieren</button>
                    </div>
                    <button onclick="generateSecurePassword()" class="w-full mt-3 bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-semibold py-2.5 rounded-xl transition">Neues Passwort</button>
                </div>
            </div>

            <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-6 shadow-xl backdrop-blur-md flex flex-col justify-between">
                <div>
                    <h2 class="text-lg font-bold text-white mb-1">API Keys, UUID v4 & Tokens</h2>
                    <p class="text-slate-400 text-xs mb-5">Erzeugt standardisierte UUIDs, Hex- und Base64-Geheimnisse.</p>

                    <div class="space-y-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1">UUID v4 Token</label>
                            <div class="flex flex-wrap sm:flex-nowrap gap-2">
                                <input type="text" id="uuidOutput" readonly class="w-full sm:flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 font-mono text-xs text-slate-200">
                                <div class="flex gap-2 w-full sm:w-auto">
                                    <button onclick="generateUuid()" class="flex-1 sm:flex-none px-3 py-2 bg-slate-800 hover:bg-slate-700 text-xs font-medium rounded-xl">Neu</button>
                                    <button onclick="copyToClipboard(document.getElementById('uuidOutput').value)" class="flex-1 sm:flex-none px-3 py-2 bg-white text-black hover:bg-slate-200 text-xs font-medium rounded-xl">Kopieren</button>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1">256-Bit Hex Secret (64 Zeichen)</label>
                            <div class="flex flex-wrap sm:flex-nowrap gap-2">
                                <input type="text" id="hexSecretOutput" readonly class="w-full sm:flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 font-mono text-xs text-slate-200">
                                <div class="flex gap-2 w-full sm:w-auto">
                                    <button onclick="generateHexSecret()" class="flex-1 sm:flex-none px-3 py-2 bg-slate-800 hover:bg-slate-700 text-xs font-medium rounded-xl">Neu</button>
                                    <button onclick="copyToClipboard(document.getElementById('hexSecretOutput').value)" class="flex-1 sm:flex-none px-3 py-2 bg-white text-black hover:bg-slate-200 text-xs font-medium rounded-xl">Kopieren</button>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-300 mb-1">Base64 Encoded Secret (32 Bytes)</label>
                            <div class="flex flex-wrap sm:flex-nowrap gap-2">
                                <input type="text" id="base64SecretOutput" readonly class="w-full sm:flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2 font-mono text-xs text-slate-200">
                                <div class="flex gap-2 w-full sm:w-auto">
                                    <button onclick="generateBase64Secret()" class="flex-1 sm:flex-none px-3 py-2 bg-slate-800 hover:bg-slate-700 text-xs font-medium rounded-xl">Neu</button>
                                    <button onclick="copyToClipboard(document.getElementById('base64SecretOutput').value)" class="flex-1 sm:flex-none px-3 py-2 bg-white text-black hover:bg-slate-200 text-xs font-medium rounded-xl">Kopieren</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="border-t border-slate-800/80 py-6 text-center mt-auto">
        <p class="text-xs text-slate-400">
            © CryptoStudio – Minimalist & Secure Local Crypto Tools.
            <a href="https://github.com/arien-dev" target="_blank" rel="noopener" class="underline hover:text-white ml-2">Made by arien-dev</a>
        </p>
    </footer>

    <script>
        const toggle = document.getElementById('themeToggle');
        const applyTheme = (theme) => {
            document.body.classList.toggle('theme-light', theme === 'light');
            if (toggle) toggle.textContent = theme === 'dark' ? '☼' : '☾';
            localStorage.setItem('cryptoTheme', theme);
        };
        applyTheme(localStorage.getItem('cryptoTheme') || 'dark');
        if (toggle) toggle.addEventListener('click', () => applyTheme(document.body.classList.contains('theme-light') ? 'dark' : 'light'));

        function toggleSecretsControls() {
            const checked = document.getElementById('secretsTos').checked;
            const grid = document.getElementById('secretsGrid');
            if (checked) {
                grid.classList.remove('opacity-50', 'pointer-events-none');
                generateSecurePassword();
                generateUuid();
                generateHexSecret();
                generateBase64Secret();
            } else {
                grid.classList.add('opacity-50', 'pointer-events-none');
            }
        }

        function copyToClipboard(text) {
            if (!text) return;
            navigator.clipboard.writeText(text).then(() => {
                showToast('In die Zwischenablage kopiert!');
            }).catch(err => {
                showToast('Kopieren fehlgeschlagen: ' + err);
            });
        }

        function showToast(msg) {
            const toast = document.getElementById('toast');
            document.getElementById('toastMsg').innerText = msg;
            toast.classList.remove('-translate-y-24', 'opacity-0');
            toast.classList.add('translate-y-0', 'opacity-100');
            setTimeout(() => {
                toast.classList.remove('translate-y-0', 'opacity-100');
                toast.classList.add('-translate-y-24', 'opacity-0');
            }, 2500);
        }

        function generateSecurePassword() {
            const length = parseInt(document.getElementById('pwdLength').value);
            const useUpper = document.getElementById('pwdUpper').checked;
            const useLower = document.getElementById('pwdLower').checked;
            const useDigits = document.getElementById('pwdDigits').checked;
            const useSymbols = document.getElementById('pwdSymbols').checked;

            let chars = '';
            if (useUpper) chars += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            if (useLower) chars += 'abcdefghijklmnopqrstuvwxyz';
            if (useDigits) chars += '0123456789';
            if (useSymbols) chars += '!@#$%^&*()_+-=[]{}|;:,.<>?';

            if (!chars) {
                document.getElementById('pwdOutput').value = 'Bitte wähle mind. eine Option';
                return;
            }

            const array = new Uint32Array(length);
            window.crypto.getRandomValues(array);
            let pwd = '';
            for (let i = 0; i < length; i++) {
                pwd += chars[array[i] % chars.length];
            }
            document.getElementById('pwdOutput').value = pwd;
        }

        function generateUuid() {
            if (window.crypto && window.crypto.randomUUID) {
                document.getElementById('uuidOutput').value = window.crypto.randomUUID();
            } else {
                document.getElementById('uuidOutput').value = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            }
        }

        function generateHexSecret() {
            const bytes = new Uint8Array(32);
            window.crypto.getRandomValues(bytes);
            document.getElementById('hexSecretOutput').value = Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('');
        }

        function generateBase64Secret() {
            const bytes = new Uint8Array(32);
            window.crypto.getRandomValues(bytes);
            let binary = '';
            for (let i = 0; i < bytes.byteLength; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            document.getElementById('base64SecretOutput').value = btoa(binary);
        }
    </script>
</body>
</html>