SH20RAJ · December 23, 2025 05:52
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chaos Cipher | Multi-Symbol Encoder</title>
    <style>
        :root {
            --bg-color: #050505;
            --card-bg: #111;
            --accent: #ff0055; /* Cyberpunk Pink */
            --accent-glow: rgba(255, 0, 85, 0.4);
            --text-main: #eee;
            --text-dim: #666;
            --border: #333;
            --input-bg: #000;
        }

        * { box-sizing: border-box; font-family: 'Consolas', 'Monaco', monospace; }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 700px;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 0 30px rgba(0,0,0,0.8);
            position: relative;
            overflow: hidden;
        }

        /* Decoration line */
        .container::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
        }

        h2 { margin-top: 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px var(--accent-glow); }
        .subtitle { color: var(--text-dim); font-size: 0.8rem; margin-bottom: 20px; display: block; border-bottom: 1px solid var(--border); padding-bottom: 10px;}

        label { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 5px; letter-spacing: 1px;}

        /* Symbol Library Input */
        .symbol-drawer {
            margin-bottom: 20px;
        }
        
        #symbol-set {
            width: 100%;
            background: #1a1a1a;
            border: 1px solid var(--border);
            color: #888;
            font-size: 0.8rem;
            padding: 10px;
            border-radius: 4px;
            word-break: break-all;
        }

        /* Main Inputs */
        textarea {
            width: 100%;
            height: 100px;
            background: var(--input-bg);
            border: 1px solid var(--border);
            color: var(--text-main);
            padding: 15px;
            font-size: 1rem;
            resize: vertical;
            margin-bottom: 20px;
        }
        
        textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow); }

        .btn-group { display: flex; gap: 10px; margin-bottom: 20px; }

        button {
            flex: 1;
            padding: 15px;
            border: none;
            background: #222;
            color: var(--text-main);
            border: 1px solid var(--border);
            cursor: pointer;
            text-transform: uppercase;
            font-weight: bold;
            letter-spacing: 1px;
            transition: 0.2s;
        }

        button:hover { background: #333; }
        .btn-action { background: var(--accent); color: white; border-color: var(--accent); }
        .btn-action:hover { background: #d40047; box-shadow: 0 0 20px var(--accent-glow); }

        #stats {
            font-size: 0.75rem;
            color: var(--text-dim);
            text-align: right;
            margin-top: -15px;
            margin-bottom: 15px;
        }

    </style>
 </head>
 <body>

 <div class="container">
    <h2>Chaos Cipher v2.0</h2>
    <span class="subtitle">High-Density Symbolic Encoding Engine</span>

    <div class="symbol-drawer">
        <label>Active Symbol Matrix (Edit to customize)</label>
        <textarea id="symbol-set">!@#$%^&*()_+-=[]{}|;:,.?/~`¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿×÷∀∂∃∅∇∈∉∋∏∑−∗√∝∞∠∧∨∩∪∫∴∼≅≈≠≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅</textarea>
    </div>

    <label>Input Data</label>
    <textarea id="input" placeholder="Enter text to encode..."></textarea>

    <div class="btn-group">
        <button class="btn-action" onclick="transform('encode')">ENCODE >></button>
        <button onclick="transform('decode')"><< DECODE</button>
        <button onclick="copyOutput()">COPY</button>
    </div>

    <label>Output Stream</label>
    <textarea id="output" readonly placeholder="waiting_for_data..."></textarea>
    <div id="stats">Length: 0 chars</div>

 </div>

 <script>
    class ChaosCipher {
        constructor() {
            this.updateMap();
        }

        updateMap() {
            // Get symbols from textarea and remove duplicates/spaces
            let raw = document.getElementById('symbol-set').value;
            // Remove spaces and newlines to keep it dense
            this.symbols = Array.from(new Set(raw.replace(/[\s\n]/g, '').split(''))).join('');
            this.base = this.symbols.length;
            
            // We need a fixed block size.
            // With ~80 symbols, Base^3 = 512,000, which covers all Unicode (65,535).
            // So we map 1 Character -> 3 Symbols.
            this.blockSize = 3;
        }

        // Convert Integer to Base-N String (padded)
        toBaseN(num) {
            let res = '';
            let n = num;
            for(let i=0; i<this.blockSize; i++) {
                let remainder = n % this.base;
                res = this.symbols[remainder] + res; // Prepend
                n = Math.floor(n / this.base);
            }
            return res;
        }

        // Convert Base-N String (block) to Integer
        fromBaseN(str) {
            let num = 0;
            for(let i=0; i<str.length; i++) {
                const char = str[i];
                const val = this.symbols.indexOf(char);
                if (val === -1) throw new Error(`Unknown symbol: ${char}`);
                num = num * this.base + val;
            }
            return num;
        }

        encode(text) {
            this.updateMap();
            let result = '';
            for (let char of text) {
                // Get Unicode code point (handles emojis better)
                let code = char.codePointAt(0);
                result += this.toBaseN(code);
            }
            return result;
        }

        decode(text) {
            this.updateMap();
            let result = '';
            
            // Loop through text in chunks of blockSize
            for (let i = 0; i < text.length; i += this.blockSize) {
                let chunk = text.substr(i, this.blockSize);
                if (chunk.length < this.blockSize) break; // Ignore incomplete trailing chars
                
                try {
                    let code = this.fromBaseN(chunk);
                    result += String.fromCodePoint(code);
                } catch (e) {
                    return "Error: " + e.message;
                }
            }
            return result;
        }
    }

    const cipher = new ChaosCipher();

    function transform(mode) {
        const input = document.getElementById('input').value;
        const outputEl = document.getElementById('output');
        
        if(!input) return;

        if(mode === 'encode') {
            const res = cipher.encode(input);
            outputEl.value = res;
        } else {
            const res = cipher.decode(input);
            outputEl.value = res;
        }
        
        document.getElementById('stats').innerText = `Length: ${outputEl.value.length} chars`;
    }

    function copyOutput() {
        const out = document.getElementById('output');
        out.select();
        document.execCommand('copy');
    }
 </script>

 </body>
 </html>
diff --git a/symbolic-cipher.markdown b/symbolic-cipher.markdown
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chaos Cipher \| Multi-Symbol Encoder</title>
	<style>
	:root {
	--bg-color: #050505;
	--card-bg: #111;
	--accent: #ff0055; /* Cyberpunk Pink */
	--accent-glow: rgba(255, 0, 85, 0.4);
	--text-main: #eee;
	--text-dim: #666;
	--border: #333;
	--input-bg: #000;
	}

	* { box-sizing: border-box; font-family: 'Consolas', 'Monaco', monospace; }

	body {
	background-color: var(--bg-color);
	color: var(--text-main);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 20px;
	}

	.container {
	width: 100%;
	max-width: 700px;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 20px;
	box-shadow: 0 0 30px rgba(0,0,0,0.8);
	position: relative;
	overflow: hidden;
	}

	/* Decoration line */
	.container::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--accent), transparent);
	}

	h2 { margin-top: 0; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px var(--accent-glow); }
	.subtitle { color: var(--text-dim); font-size: 0.8rem; margin-bottom: 20px; display: block; border-bottom: 1px solid var(--border); padding-bottom: 10px;}

	label { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 5px; letter-spacing: 1px;}

	/* Symbol Library Input */
	.symbol-drawer {
	margin-bottom: 20px;
	}

	#symbol-set {
	width: 100%;
	background: #1a1a1a;
	border: 1px solid var(--border);
	color: #888;
	font-size: 0.8rem;
	padding: 10px;
	border-radius: 4px;
	word-break: break-all;
	}

	/* Main Inputs */
	textarea {
	width: 100%;
	height: 100px;
	background: var(--input-bg);
	border: 1px solid var(--border);
	color: var(--text-main);
	padding: 15px;
	font-size: 1rem;
	resize: vertical;
	margin-bottom: 20px;
	}

	textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow); }

	.btn-group { display: flex; gap: 10px; margin-bottom: 20px; }

	button {
	flex: 1;
	padding: 15px;
	border: none;
	background: #222;
	color: var(--text-main);
	border: 1px solid var(--border);
	cursor: pointer;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	transition: 0.2s;
	}

	button:hover { background: #333; }
	.btn-action { background: var(--accent); color: white; border-color: var(--accent); }
	.btn-action:hover { background: #d40047; box-shadow: 0 0 20px var(--accent-glow); }

	#stats {
	font-size: 0.75rem;
	color: var(--text-dim);
	text-align: right;
	margin-top: -15px;
	margin-bottom: 15px;
	}

	</style>
	</head>
	<body>

	<div class="container">
	<h2>Chaos Cipher v2.0</h2>
	<span class="subtitle">High-Density Symbolic Encoding Engine</span>

	<div class="symbol-drawer">
	<label>Active Symbol Matrix (Edit to customize)</label>
	<textarea id="symbol-set">!@#$%^&*()_+-=[]{}\|;:,.?/~`¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿×÷∀∂∃∅∇∈∉∋∏∑−∗√∝∞∠∧∨∩∪∫∴∼≅≈≠≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅</textarea>
	</div>

	<label>Input Data</label>
	<textarea id="input" placeholder="Enter text to encode..."></textarea>

	<div class="btn-group">
	<button class="btn-action" onclick="transform('encode')">ENCODE >></button>
	<button onclick="transform('decode')"><< DECODE</button>
	<button onclick="copyOutput()">COPY</button>
	</div>

	<label>Output Stream</label>
	<textarea id="output" readonly placeholder="waiting_for_data..."></textarea>
	<div id="stats">Length: 0 chars</div>

	</div>

	<script>
	class ChaosCipher {
	constructor() {
	this.updateMap();
	}

	updateMap() {
	// Get symbols from textarea and remove duplicates/spaces
	let raw = document.getElementById('symbol-set').value;
	// Remove spaces and newlines to keep it dense
	this.symbols = Array.from(new Set(raw.replace(/[\s\n]/g, '').split(''))).join('');
	this.base = this.symbols.length;

	// We need a fixed block size.
	// With ~80 symbols, Base^3 = 512,000, which covers all Unicode (65,535).
	// So we map 1 Character -> 3 Symbols.
	this.blockSize = 3;
	}

	// Convert Integer to Base-N String (padded)
	toBaseN(num) {
	let res = '';
	let n = num;
	for(let i=0; i<this.blockSize; i++) {
	let remainder = n % this.base;
	res = this.symbols[remainder] + res; // Prepend
	n = Math.floor(n / this.base);
	}
	return res;
	}

	// Convert Base-N String (block) to Integer
	fromBaseN(str) {
	let num = 0;
	for(let i=0; i<str.length; i++) {
	const char = str[i];
	const val = this.symbols.indexOf(char);
	if (val === -1) throw new Error(`Unknown symbol: ${char}`);
	num = num * this.base + val;
	}
	return num;
	}

	encode(text) {
	this.updateMap();
	let result = '';
	for (let char of text) {
	// Get Unicode code point (handles emojis better)
	let code = char.codePointAt(0);
	result += this.toBaseN(code);
	}
	return result;
	}

	decode(text) {
	this.updateMap();
	let result = '';

	// Loop through text in chunks of blockSize
	for (let i = 0; i < text.length; i += this.blockSize) {
	let chunk = text.substr(i, this.blockSize);
	if (chunk.length < this.blockSize) break; // Ignore incomplete trailing chars

	try {
	let code = this.fromBaseN(chunk);
	result += String.fromCodePoint(code);
	} catch (e) {
	return "Error: " + e.message;
	}
	}
	return result;
	}
	}

	const cipher = new ChaosCipher();

	function transform(mode) {
	const input = document.getElementById('input').value;
	const outputEl = document.getElementById('output');

	if(!input) return;

	if(mode === 'encode') {
	const res = cipher.encode(input);
	outputEl.value = res;
	} else {
	const res = cipher.decode(input);
	outputEl.value = res;
	}

	document.getElementById('stats').innerText = `Length: ${outputEl.value.length} chars`;
	}

	function copyOutput() {
	const out = document.getElementById('output');
	out.select();
	document.execCommand('copy');
	}
	</script>

	</body>
	</html>
No results found