index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DXSbash — Bash Unleashed for Debian 13</title>

    <meta name="description" content="DXSbash is a hyper-optimized shell configuration for Debian 13. Unified Bash, Zsh, and Fish setup with Starship, fzf, modern aliases, and a one-line installer." />
    <meta name="author" content="Luis Miguel P. Freitas" />
    <meta name="theme-color" content="#00ff88" />
    <meta name="color-scheme" content="dark" />
    <link rel="canonical" href="https://dxsbash.digitalxs.ca/" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="DXSbash" />
    <meta property="og:title" content="DXSbash — Bash Unleashed for Debian 13" />
    <meta property="og:description" content="A hyper-optimized Bash, Zsh, and Fish configuration for Debian 13. One-line install. Made in Canada." />
    <meta property="og:url" content="https://dxsbash.digitalxs.ca/" />
    <meta property="og:image" content="https://dxsbash.digitalxs.ca/preview.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="DXSbash — Bash Unleashed for Debian 13" />
    <meta name="twitter:description" content="A hyper-optimized Bash, Zsh, and Fish configuration for Debian 13." />
    <meta name="twitter:image" content="https://dxsbash.digitalxs.ca/preview.png" />

    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23020406'/%3E%3Ctext x='50%25' y='56%25' text-anchor='middle' font-family='monospace' font-size='34' font-weight='900' fill='%2300ff88'%3E%26gt;_%3C/text%3E%3C/svg%3E" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://cdn.tailwindcss.com" />

    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/lucide@latest"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&family=Geist+Mono:wght@400;700&display=swap" rel="stylesheet" />

    <style>
        :root { --emerald: #00ff88; --dark: #020406; }
        html, body { background-color: var(--dark); }
        body {
            color: #e2e8f0;
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            min-height: 100vh;
        }
        .mono { font-family: 'Geist Mono', monospace; }

        .space-viewport {
            position: fixed; inset: 0;
            background: radial-gradient(circle at center, #061a11 0%, #020406 70%);
            z-index: -2;
            perspective: 1200px;
            pointer-events: none;
        }
        .warp-engine {
            position: absolute; inset: 0;
            transform-style: preserve-3d;
        }
        .code-fragment {
            position: absolute;
            color: var(--emerald);
            font-family: 'Geist Mono', monospace;
            font-size: 11px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            filter: drop-shadow(0 0 5px rgba(0, 255, 136, 0.3));
            animation: code-travel linear forwards;
            will-change: transform, opacity;
        }
        @keyframes code-travel {
            0%   { transform: translateZ(-1200px) scale(0.1); opacity: 0; }
            10%  { opacity: 0.4; }
            90%  { opacity: 0.4; }
            100% { transform: translateZ(1000px) scale(2.5); opacity: 0; }
        }

        .holo-console {
            background: rgba(10, 15, 20, 0.4);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        .scanline {
            width: 100%; height: 1px;
            background: linear-gradient(to right, transparent, var(--emerald), transparent);
            opacity: 0.1;
            position: absolute; top: 0; left: 0;
            animation: scan 6s linear infinite;
        }
        @keyframes scan { from { top: -10%; } to { top: 110%; } }

        .reveal { opacity: 0; animation: reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes reveal {
            from { opacity: 0; transform: translateY(20px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .btn-primary {
            background: var(--emerald);
            color: #010204;
            transition: transform .25s ease, box-shadow .25s ease;
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(0, 255, 136, 0.4); }
        .btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

        .btn-outline {
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: border-color .25s ease, background-color .25s ease, color .25s ease;
        }
        .btn-outline:hover { border-color: white; background: rgba(255, 255, 255, 0.05); color: white; }
        .btn-outline:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

        .gradient-text {
            background: linear-gradient(to bottom, #fff 40%, rgba(255,255,255,0.4));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: border-color .25s ease, background-color .25s ease;
        }
        .feature-card:hover { border-color: rgba(0, 255, 136, 0.25); background: rgba(0, 255, 136, 0.03); }

        .copied { background: #fff !important; color: #010204 !important; }

        @media (prefers-reduced-motion: reduce) {
            .reveal, .code-fragment, .scanline { animation: none !important; }
            .reveal { opacity: 1; transform: none; }
            .space-viewport #code-field { display: none; }
            .btn-primary:hover, .btn-outline:hover { transform: none; }
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center py-16 md:py-24">

    <div class="space-viewport" aria-hidden="true">
        <div id="code-field" class="warp-engine"></div>
    </div>

    <main class="relative z-10 w-full max-w-5xl px-6 md:px-8">

        <div class="reveal flex items-center justify-center gap-4 mb-8" style="animation-delay: 0.1s;">
            <span class="h-px w-8 bg-emerald-500/30"></span>
            <span class="mono text-[10px] tracking-[0.6em] text-emerald-400 uppercase font-bold">
                Bash // Zsh // Fish // DXSbash <span id="version-tag">v3.9.7</span>
            </span>
            <span class="h-px w-8 bg-emerald-500/30"></span>
        </div>

        <div class="text-center mb-14">
            <h1 class="reveal text-6xl md:text-[110px] font-black leading-[0.9] tracking-tighter mb-6 gradient-text" style="animation-delay: 0.2s;">
                <span class="text-emerald-500">DXSbash</span>
            </h1>
            <p class="reveal mono text-lg md:text-2xl text-emerald-500" style="animation-delay: 0.25s;">
                bash unleashed. for pros. made in Canada.
            </p>

            <p class="reveal max-w-2xl mx-auto mt-8 text-gray-400 leading-relaxed text-sm md:text-base" style="animation-delay: 0.3s;">
                A hyper-optimized shell configuration engineered for <b class="text-gray-200">Debian 13</b>.
                Streamlined terminal workflow with automated deployment, enhanced security auditing,
                and raw performance across Bash, Zsh, and Fish.
            </p>
        </div>

        <section class="reveal grid grid-cols-2 md:grid-cols-5 gap-3 mb-10" style="animation-delay: 0.32s;" aria-label="Key features">
            <div class="feature-card rounded-xl p-4">
                <i data-lucide="terminal-square" class="text-emerald-400 mb-2" width="18" height="18" aria-hidden="true"></i>
                <p class="mono text-[10px] uppercase tracking-widest text-white/50">Shells</p>
                <p class="text-sm font-medium mt-1">Bash · Zsh · Fish</p>
            </div>
            <div class="feature-card rounded-xl p-4">
                <i data-lucide="rocket" class="text-emerald-400 mb-2" width="18" height="18" aria-hidden="true"></i>
                <p class="mono text-[10px] uppercase tracking-widest text-white/50">Prompt</p>
                <p class="text-sm font-medium mt-1">Starship themes</p>
            </div>
            <div class="feature-card rounded-xl p-4">
                <i data-lucide="search" class="text-emerald-400 mb-2" width="18" height="18" aria-hidden="true"></i>
                <p class="mono text-[10px] uppercase tracking-widest text-white/50">Search</p>
                <p class="text-sm font-medium mt-1">fzf · Ctrl+R · Alt+C</p>
            </div>
            <div class="feature-card rounded-xl p-4">
                <i data-lucide="shield-check" class="text-emerald-400 mb-2" width="18" height="18" aria-hidden="true"></i>
                <p class="mono text-[10px] uppercase tracking-widest text-white/50">Safety</p>
                <p class="text-sm font-medium mt-1">Repair · Uninstall</p>
            </div>
            <div class="feature-card rounded-xl p-4 col-span-2 md:col-span-1">
                <i data-lucide="sliders-horizontal" class="text-emerald-400 mb-2" width="18" height="18" aria-hidden="true"></i>
                <p class="mono text-[10px] uppercase tracking-widest text-white/50">Settings</p>
                <p class="text-sm font-medium mt-1">GUI · aliases · updates</p>
            </div>
        </section>

        <div class="reveal holo-console rounded-[32px] overflow-hidden relative" style="animation-delay: 0.35s;">
            <div class="scanline" aria-hidden="true"></div>
            <div class="grid md:grid-cols-2">

                <div class="p-8 md:p-12 border-b md:border-b-0 md:border-r border-white/5">
                    <div class="flex items-center gap-3 mb-8">
                        <div class="p-2 bg-emerald-500/10 rounded-lg">
                            <i data-lucide="zap" class="text-emerald-400" width="20" height="20" aria-hidden="true"></i>
                        </div>
                        <span class="mono text-xs uppercase tracking-widest text-white/60 font-bold">Auto Deploy</span>
                    </div>

                    <div class="bg-black/40 rounded-xl p-5 md:p-6 mb-8 border border-white/5 relative overflow-x-auto">
                        <code class="block text-emerald-400 mono text-xs md:text-sm leading-relaxed">curl -sSL https://dxsbash.digitalxs.ca/install.sh | bash</code>
                    </div>

                    <button id="btn-curl"
                            type="button"
                            data-copy="curl -sSL https://dxsbash.digitalxs.ca/install.sh | bash"
                            aria-label="Copy curl install command"
                            class="btn-primary w-full py-4 rounded-xl mono text-[11px] uppercase tracking-[0.2em] font-bold">
                        Copy Curl Command
                    </button>
                </div>

                <div class="p-8 md:p-12 bg-white/[0.01]">
                    <div class="flex items-center gap-3 mb-8">
                        <div class="p-2 bg-white/5 rounded-lg">
                            <i data-lucide="git-branch" class="text-gray-400" width="20" height="20" aria-hidden="true"></i>
                        </div>
                        <span class="mono text-xs uppercase tracking-widest text-white/60 font-bold">Manual Source</span>
                    </div>

                    <div class="bg-black/40 rounded-xl p-5 md:p-6 mb-8 border border-white/5 overflow-x-auto">
<pre class="text-gray-300 mono text-[12px] leading-relaxed m-0"><code>git clone --depth=1 https://github.com/digitalxs/dxsbash.git
cd dxsbash
chmod +x setup.sh
./setup.sh</code></pre>
                    </div>

                    <button id="btn-git"
                            type="button"
                            data-copy="git clone --depth=1 https://github.com/digitalxs/dxsbash.git && cd dxsbash && chmod +x setup.sh && ./setup.sh"
                            aria-label="Copy git clone commands"
                            class="btn-outline w-full py-4 rounded-xl mono text-[11px] uppercase tracking-[0.2em] text-gray-300 font-bold">
                        Copy Git Commands
                    </button>
                </div>

            </div>
        </div>

        <footer class="reveal mt-14 flex flex-col md:flex-row justify-between items-center gap-8" style="animation-delay: 0.45s;">
            <div class="flex gap-12 text-center md:text-left">
                <div>
                    <p class="text-[10px] mono text-emerald-500/40 uppercase tracking-widest mb-2">Build Environment</p>
                    <p class="text-xs mono font-medium">Debian 13 Stable</p>
                </div>
                <div>
                    <p class="text-[10px] mono text-emerald-500/40 uppercase tracking-widest mb-2">Lead Architect</p>
                    <p class="text-xs mono font-medium">Luis Miguel P. Freitas</p>
                </div>
                <div class="hidden md:block">
                    <p class="text-[10px] mono text-emerald-500/40 uppercase tracking-widest mb-2">License</p>
                    <p class="text-xs mono font-medium">GPL v3</p>
                </div>
            </div>

            <a href="https://github.com/digitalxs/dxsbash"
               target="_blank" rel="noopener noreferrer"
               aria-label="DXSbash repository on GitHub"
               class="btn-outline px-6 py-2 rounded-lg mono text-[10px] uppercase tracking-widest flex items-center gap-2 text-gray-300">
                <i data-lucide="github" width="14" height="14" aria-hidden="true"></i> Repository
            </a>
        </footer>

        <p class="reveal text-center mt-10 text-[10px] mono text-white/30 tracking-widest" style="animation-delay: 0.5s;">
            &copy; <span id="year"></span> digitalxs.ca · Released under GPL v3
        </p>

    </main>

    <div id="toast"
         role="status"
         aria-live="polite"
         class="fixed bottom-10 left-1/2 -translate-x-1/2 opacity-0 pointer-events-none transition-opacity duration-300 bg-white text-black px-8 py-3 rounded-xl text-[10px] mono font-bold uppercase tracking-[0.2em] shadow-2xl z-50">
        Command Copied
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (window.lucide) lucide.createIcons();

            document.getElementById('year').textContent = new Date().getFullYear();

            const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
            const codeField = document.getElementById('code-field');
            const snippets = [
                'sudo apt update', 'grep -r "debian"', 'chmod +x setup.sh',
                'sh ./install.sh', 'git clone', 'curl -sSL', 'systemctl restart',
                'source ~/.bashrc', 'mkdir -p /opt/dxs', 'kill -9 $PID',
                'fzf --preview', 'starship init', 'zsh --login', 'fish -l'
            ];

            function createFragment() {
                if (document.hidden) return;
                const fragment = document.createElement('div');
                fragment.className = 'code-fragment';
                fragment.textContent = snippets[Math.floor(Math.random() * snippets.length)];
                fragment.style.left = `${Math.random() * 100}%`;
                fragment.style.top = `${Math.random() * 100}%`;
                const duration = 2 + Math.random() * 3;
                fragment.style.animationDuration = `${duration}s`;
                fragment.style.opacity = [0.1, 0.2, 0.4][Math.floor(Math.random() * 3)];
                codeField.appendChild(fragment);
                setTimeout(() => fragment.remove(), duration * 1000);
            }
            if (!prefersReducedMotion) setInterval(createFragment, 80);

            function fallbackCopy(text) {
                const ta = document.createElement('textarea');
                ta.value = text;
                ta.setAttribute('readonly', '');
                ta.style.position = 'fixed';
                ta.style.top = '-1000px';
                document.body.appendChild(ta);
                ta.select();
                try { document.execCommand('copy'); } catch (_) {}
                document.body.removeChild(ta);
            }

            const toast = document.getElementById('toast');
            let toastTimer;
            function showToast(msg) {
                toast.textContent = msg;
                toast.style.opacity = '1';
                clearTimeout(toastTimer);
                toastTimer = setTimeout(() => { toast.style.opacity = '0'; }, 2200);
            }

            document.querySelectorAll('[data-copy]').forEach(btn => {
                const originalLabel = btn.textContent.trim();
                btn.addEventListener('click', async () => {
                    const text = btn.getAttribute('data-copy');
                    try {
                        if (navigator.clipboard && window.isSecureContext) {
                            await navigator.clipboard.writeText(text);
                        } else {
                            fallbackCopy(text);
                        }
                        btn.classList.add('copied');
                        btn.textContent = 'Copied ✓';
                        showToast('Command Copied');
                        setTimeout(() => {
                            btn.classList.remove('copied');
                            btn.textContent = originalLabel;
                        }, 1800);
                    } catch (err) {
                        showToast('Copy Failed');
                    }
                });
            });
        });
    </script>
</body>
</html>