<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="cleansh – A high-trust, single-purpose CLI tool that securely sanitizes terminal output for safe sharing. Secure by default, zero config, extendable." />
<title>Cleansh – Secure Log & Terminal Output Redaction</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-950 text-white font-sans antialiased">
<header class="bg-gray-950 p-6 z-50 relative">
<nav class="max-w-7xl mx-auto flex justify-between items-center">
<a href="#" class="text-3xl font-extrabold text-blue-400">cleansh</a>
<div class="space-x-6 text-lg">
<a href="#features" class="text-gray-300 hover:text-white transition duration-200">Features</a>
<a href="#use-cases" class="text-gray-300 hover:text-white transition duration-200">Use Cases</a>
<a href="#future-plans" class="text-gray-300 hover:text-white transition duration-200">Future Plans</a>
<a href="#install" class="text-gray-300 hover:text-white transition duration-200">Install</a>
<a href="https://github.com/KarmaYama/cleansh" target="_blank" rel="noopener noreferrer" class="text-blue-400 hover:text-blue-300 transition duration-200 font-semibold">GitHub</a>
</div>
</nav>
</header>
<section class="min-h-screen flex flex-col items-center justify-center text-center px-6 py-20 bg-gradient-to-br from-gray-950 to-gray-800 relative overflow-hidden">
<div class="absolute inset-0 z-0 opacity-10" style="background-image: radial-gradient(circle at top left, #3B82F6 0%, transparent 40%), radial-gradient(circle at bottom right, #10B981 0%, transparent 40%);"></div>
<div class="max-w-5xl z-10 fade-in">
<p class="text-blue-400 uppercase text-base tracking-widest mb-4 font-semibold">High-Trust. Secure by Default. Zero Config.</p>
<h1 class="text-6xl md:text-7xl font-extrabold mb-8 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300">
Sanitize Terminal Output. <br class="hidden md:inline">Securely Share.
</h1>
<p class="text-gray-300 text-xl md:text-2xl mb-10 leading-relaxed font-light">
<span class="font-semibold text-white">cleansh</span> is a powerful, single-purpose CLI tool that intelligently redacts **IP addresses, emails, tokens, and absolute paths** from your logs and terminal output. <br class="hidden md:inline">Fully local. Open-source. Expect bugs as it's in development, and please report them!
</p>
<div class="flex flex-col sm:flex-row gap-5 justify-center">
<a href="#install" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-full font-bold text-xl transition duration-300 ease-in-out shadow-xl hover:shadow-2xl transform hover:scale-105">Get cleansh Now</a>
<a href="#live-demo" class="border border-blue-500 text-blue-400 hover:border-blue-400 hover:text-white px-10 py-5 rounded-full font-semibold text-xl transition duration-300 ease-in-out shadow-lg hover:shadow-xl transform hover:scale-105">Try Live Demo</a>
</div>
</div>
</section>
<section class="bg-gray-900 px-6 py-20 border-t border-gray-800" id="live-demo">
<div class="max-w-6xl mx-auto text-center fade-in">
<h2 class="text-5xl font-bold mb-6 text-white">Experience Real-Time Log Redaction</h2>
<p class="text-gray-300 text-lg mb-12">
Paste your logs below and see `cleansh` instantly redact sensitive information. <span class="font-semibold text-blue-300">No data leaves your browser.</span>
</p>
<div class="bg-gray-800 rounded-xl p-8 shadow-2xl border border-gray-700">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<label for="inputLog" class="block text-left text-gray-300 text-sm font-semibold mb-2">Your Original Log (Paste here):</label>
<textarea id="inputLog" class="w-full h-64 p-4 rounded-lg bg-gray-950 text-green-300 font-mono text-sm border border-gray-700 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none" placeholder="Paste sensitive log data here..."></textarea>
</div>
<div>
<label for="outputLog" class="block text-left text-gray-300 text-sm font-semibold mb-2">Redacted Output:</label>
<textarea id="outputLog" class="w-full h-64 p-4 rounded-lg bg-gray-950 text-green-300 font-mono text-sm border border-gray-700 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none" readonly placeholder="Redacted output will appear here..."></textarea>
</div>
</div>
<div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<button id="redactButton" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 ease-in-out shadow-lg hover:shadow-xl transform hover:scale-105">Redact My Logs</button>
<button id="copyButton" class="border border-gray-400 text-gray-300 hover:border-white hover:text-white px-8 py-4 rounded-full font-medium text-lg transition duration-300 ease-in-out shadow-lg hover:shadow-xl transform hover:scale-105">Copy Redacted Log</button>
</div>
<p class="text-gray-500 text-sm mt-6">
<span class="font-semibold text-red-400">Note:</span> This is a client-side demo. For production-grade redaction, use the CLI tool.
<span class="font-semibold text-yellow-400">(Live `cleansh` tool integration via WebAssembly (WASM) or API coming soon!)</span>
</p>
</div>
</div>
</section>
<section class="bg-gray-950 px-6 py-20 border-t border-gray-800" id="features">
<div class="max-w-6xl mx-auto fade-in">
<h2 class="text-5xl font-bold text-center mb-14 text-white">Why Choose cleansh? Secure, Comprehensive, Flexible.</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800 hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-2">
<h3 class="text-2xl font-bold mb-4 text-blue-400">🛡 Secure by Default</h3>
<p class="text-gray-400 leading-relaxed">
All redaction logic is **static and regex-based**, preventing arbitrary code execution. `cleansh` operates **entirely locally with no external network calls or telemetry**. Your sensitive data stays private.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800 hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-2">
<h3 class="text-2xl font-bold mb-4 text-green-400">✂️ Comprehensive Built-in Redactions</h3>
<p class="text-gray-400 leading-relaxed">
Out-of-the-box detection for common sensitive data: **Emails, IPv4 addresses, generic tokens, JWTs, AWS/GCP/SSH keys, common hex secrets, and normalized absolute paths** (Linux/macOS).
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800 hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-2">
<h3 class="text-2xl font-bold mb-4 text-purple-400">⚙️ Flexible Custom YAML Rules</h3>
<p class="text-gray-400 leading-relaxed">
Extend `cleansh` easily. Define your own **custom regex patterns in a YAML file** to clean industry-specific tokens or unique data points. These rules intelligently merge with built-in defaults.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800 hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-2">
<h3 class="text-2xl font-bold mb-4 text-yellow-400">📋 Instant Clipboard Integration (`-c`)</h3>
<p class="text-gray-400 leading-relaxed">
Streamline your workflow. With the simple `--clipboard` or `-c` flag, `cleansh` automatically copies the **sanitized output directly to your system clipboard**, ready for pasting.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800 hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-2">
<h3 class="2xl font-bold mb-4 text-red-400">📂 Versatile Input/Output (`-o`)</h3>
<p class="text-gray-400 leading-relaxed">
Designed for flexibility. `cleansh` works seamlessly with **stdin (piped input), file input**, and can output to **stdout, the clipboard, or a specified file** using `--out` or `-o`.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800 hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-2">
<h3 class="text-2xl font-bold mb-4 text-teal-400">✨ Clear Diff View (`-d`)</h3>
<p class="text-gray-400 leading-relaxed">
Understand exactly what `cleansh` redacts. Use the `--diff` or `-d` flag to **display a colored diff between the original and sanitized content**, highlighting all changes for quick review.
</p>
</div>
</div>
</div>
</section>
<section class="bg-gray-900 px-6 py-20 border-t border-gray-800" id="use-cases">
<div class="max-w-5xl mx-auto text-center fade-in">
<h2 class="text-5xl font-bold mb-12 text-white">Who Needs cleansh? Common Scenarios.</h2>
<p class="text-gray-300 text-lg mb-12">
Whether you're debugging, collaborating, or ensuring compliance, `cleansh` simplifies data security.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-left">
<div class="bg-gray-950 p-6 rounded-xl shadow-lg border border-gray-800">
<h3 class="text-2xl font-bold mb-3 text-blue-300">Debugging & Support</h3>
<p class="text-gray-400 leading-relaxed">Share problematic logs with colleagues or support teams without accidentally exposing API keys, user data, or network specifics. Ensures faster, safer issue resolution.</p>
</div>
<div class="bg-gray-950 p-6 rounded-xl shadow-lg border border-gray-800">
<h3 class="text-2xl font-bold mb-3 text-blue-300">Compliance & Auditing</h3>
<p class="text-gray-400 leading-relaxed">Automate the redaction of Personally Identifiable Information (PII) or other regulated data to comply with GDPR, CCPA, HIPAA, and internal security policies.</p>
</div>
<div class="bg-gray-950 p-6 rounded-xl shadow-lg border border-gray-800">
<h3 class="text-2xl font-bold mb-3 text-blue-300">CI/CD Pipelines</h3>
<p class="text-gray-400 leading-relaxed">Integrate `cleansh` directly into your continuous integration and deployment pipelines to ensure all generated logs are sanitized before being stored or presented.</p>
</div>
<div class="bg-gray-950 p-6 rounded-xl shadow-lg border border-gray-800">
<h3 class="text-2xl font-bold mb-3 text-blue-300">Open-Source Contributions</h3>
<p class="text-gray-400 leading-relaxed">When contributing to public repositories, use `cleansh` to redact sensitive information from code snippets, issue descriptions, or discussion threads.</p>
</div>
</div>
</div>
</section>
<section class="bg-gray-950 px-6 py-20 border-t border-gray-800" id="future-plans">
<div class="max-w-6xl mx-auto text-center fade-in">
<h2 class="text-5xl font-bold mb-8 text-white">Future-Proofing cleansh: Post v1.0 Aspirations</h2>
<p class="text-gray-300 text-xl mb-12 leading-relaxed">
As `cleansh` evolves beyond its current stable version, we envision expanding its utility and integration capabilities for broader accessibility and advanced data protection needs.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800">
<h3 class="text-2xl font-bold mb-4 text-orange-400">🔌 Plugin System <span class="text-sm font-normal text-gray-500">(Coming Soon)</span></h3>
<p class="text-gray-400 leading-relaxed">
A modular plugin architecture to allow dynamic loading of external, custom redaction logic and advanced functionalities.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800">
<h3 class="text-2xl font-bold mb-4 text-orange-400">🌐 Integrated Solutions & WebAssembly <span class="text-sm font-normal text-gray-500">(Coming Soon)</span></h3>
<p class="text-gray-400 leading-relaxed">
Exploring VS Code extensions, a lightweight web GUI, and a WebAssembly (WASM) version for client-side, browser-based log sanitization.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800">
<h3 class="text-2xl font-bold mb-4 text-orange-400">📦 Custom Git Hooks <span class="text-sm font-normal text-gray-500">(Coming Soon)</span></h3>
<p class="text-gray-400 leading-relaxed">
Implement pre-commit or post-merge Git hooks to automatically sanitize commit messages or patch diffs before sharing them.
</p>
</div>
<div class="bg-gray-900 p-8 rounded-2xl shadow-xl border border-gray-800">
<h3 class="text-2xl font-bold mb-4 text-orange-400">🔒 Advanced Redaction Tiers <span class="text-sm font-normal text-gray-500">(Coming Soon)</span></h3>
<p class="text-gray-400 leading-relaxed">
Investigate features like auto-detection of security tokens from various cloud providers and dynamic secrets for complex enterprise use cases.
</p>
</div>
</div>
<div class="mt-16">
<a href="https://github.com/KarmaYama/cleansh#future-proofing-post-v10-aspirations" target="_blank" rel="noopener noreferrer" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-full font-bold text-xl transition duration-300 ease-in-out shadow-lg hover:shadow-xl transform hover:scale-105">Learn More About Our Roadmap</a>
</div>
</div>
</section>
<section class="bg-gray-900 px-6 py-20 border-t border-gray-800">
<div class="max-w-4xl mx-auto text-center fade-in">
<h2 class="text-5xl font-bold mb-12 text-white">What Developers Are Saying</h2>
<div class="grid grid-cols-1 md:grid-cols-1 gap-8">
<div class="bg-gray-950 p-8 rounded-2xl italic text-lg text-gray-300 shadow-xl border border-gray-800">
<p class="mb-4">"cleansh has been a game-changer for our team. Sharing logs is no longer a security headache. It just works, is fast, and gives us complete peace of mind. A must-have for any modern dev shop."</p>
<div class="flex items-center justify-center">
<p class="font-semibold text-white">- Alex Chen, Lead DevOps Engineer at TechSolutions Inc.</p>
</div>
</div>
</div>
</div>
</section>
<section class="bg-gray-950 px-6 py-20 border-t border-gray-800">
<div class="max-w-6xl mx-auto text-center fade-in">
<h2 class="text-5xl font-bold mb-12 text-white">Trusted By Industry Leaders</h2>
<p class="text-gray-300 text-lg mb-12">
<span class="font-semibold text-white">cleansh</span> is built on principles of security and reliability, making it the preferred choice for organizations serious about data privacy.
</p>
<div class="flex flex-wrap justify-center items-center gap-x-16 gap-y-12">
<img src="https://via.placeholder.com/150x50/374151/D1D5DB?text=COMPANY+A" alt="Company A Logo" class="h-12 opacity-70 hover:opacity-100 transition-opacity duration-300">
<img src="https://via.placeholder.com/150x50/374151/D1D5DB?text=COMPANY+B" alt="Company B Logo" class="h-12 opacity-70 hover:opacity-100 transition-opacity duration-300">
<img src="https://via.placeholder.com/150x50/374151/D1D5DB?text=COMPANY+C" alt="Company C Logo" class="h-12 opacity-70 hover:opacity-100 transition-opacity duration-300">
<img src="https://via.placeholder.com/150x50/374151/D1D5DB?text=COMPANY+D" alt="Company D D Logo" class="h-12 opacity-70 hover:opacity-100 transition-opacity duration-300">
<img src="https://via.placeholder.com/150x50/374151/D1D5DB?text=COMPANY+E" alt="Company E Logo" class="h-12 opacity-70 hover:opacity-100 transition-opacity duration-300">
</div>
</div>
</section>
<section class="bg-gray-900 px-6 py-20 border-t border-gray-800" id="install">
<div class="max-w-4xl mx-auto text-center fade-in">
<h2 class="text-5xl font-bold mb-10 text-white">Get Started with cleansh Today</h2>
<p class="text-gray-300 text-xl mb-12">
Installing `cleansh` is quick and easy. Choose your preferred method below.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-950 rounded-2xl p-8 text-green-300 font-mono text-base shadow-2xl border border-gray-800">
<p class="text-white text-xl font-semibold mb-4">Install via Script (macOS / Linux)</p>
<pre class="text-left whitespace-pre-wrap">curl -sSf https://cleansh.sh/install.sh | sh</pre>
<p class="text-gray-500 text-sm mt-4">This script downloads the latest pre-compiled binary for your system. <span class="font-semibold text-yellow-400">Note: `https://cleansh.sh/install.sh` is a placeholder URL for future distribution.</span></p>
</div>
<div class="bg-gray-950 rounded-2xl p-8 text-green-300 font-mono text-base shadow-2xl border border-gray-800">
<p class="text-white text-xl font-semibold mb-4">Install via Cargo (Rust)</p>
<pre class="text-left whitespace-pre-wrap">cargo install cleansh</pre>
<p class="text-gray-500 text-sm mt-4">If you have the Rust toolchain installed, use Cargo to compile and install `cleansh` directly from crates.io.</p>
</div>
</div>
<p class="text-center text-gray-400 text-base mt-10">
Alternatively, <a class="underline text-blue-400 hover:text-blue-300 font-semibold" href="https://github.com/KarmaYama/cleansh/releases" target="_blank" rel="noopener noreferrer">download a pre-compiled binary</a> for Windows, macOS, or Linux directly from GitHub releases, or <a class="underline text-blue-400 hover:text-blue-300 font-semibold" href="https://github.com/KarmaYama/cleansh#building-from-source" target="_blank" rel="noopener noreferrer">build from source</a>.
</p>
<div class="mt-16">
<a href="#live-demo" class="bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-full font-bold text-xl transition duration-300 ease-in-out shadow-lg hover:shadow-xl transform hover:scale-105">Try the Live Demo</a>
</div>
</div>
</section>
<footer class="text-center text-gray-500 text-sm py-12 bg-gray-950 border-t border-gray-800">
<p class="mb-2 text-gray-400">© 2025 Cleansh Technologies LLC. All rights reserved.</p>
<p class="mb-2 text-gray-400">`cleansh` is <span class="font-semibold text-white">open-source</span> and <span class="font-semibold text-white">privacy-first</span>.</p>
<p>
<a class="underline text-blue-400 hover:text-blue-300" href="https://github.com/KarmaYama/cleansh" target="_blank" rel="noopener noreferrer">Contribute on GitHub</a> |
<a class="underline text-blue-400 hover:text-blue-300" href="#" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('appear');
observer.unobserve(entry.target); }
});
}, observerOptions);
document.querySelectorAll('section, .fade-in').forEach(section => {
section.classList.add('fade-in'); observer.observe(section);
});
const inputLog = document.getElementById('inputLog');
const outputLog = document.getElementById('outputLog');
const redactButton = document.getElementById('redactButton');
const copyButton = document.getElementById('copyButton');
function simpleRedact(text) {
let redactedText = text;
redactedText = redactedText.replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, '[EMAIL_REDACTED]'); redactedText = redactedText.replace(/\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b/g, '[IP_REDACTED]'); redactedText = redactedText.replace(/\b(sk_live_[a-zA-Z0-9]{16,}|pk_live_[a-zA-Z0-9]{16,})\b/g, '[REDACTED_SECRET]'); redactedText = redactedText.replace(/user_token_[a-zA-Z0-9]{20,}/g, '[USER_TOKEN_REDACTED]'); return redactedText;
}
redactButton.addEventListener('click', () => {
const originalText = inputLog.value;
const redactedText = simpleRedact(originalText); outputLog.value = redactedText;
});
copyButton.addEventListener('click', () => {
if (outputLog.value) {
navigator.clipboard.writeText(outputLog.value)
.then(() => {
const originalText = copyButton.textContent;
copyButton.textContent = 'Copied!';
setTimeout(() => {
copyButton.textContent = originalText;
}, 1500);
})
.catch(err => {
console.error('Failed to copy text: ', err);
alert('Failed to copy text. Please try manually.');
});
}
});
});
</script>
</body>
</html>