File size: 7,878 Bytes
0bf6fde | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | <!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Blabber Bot 3000</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
100: '#d1fae5',
500: '#10b981',
900: '#064e3b',
},
secondary: {
100: '#e0f2fe',
500: '#0ea5e9',
900: '#0c4a6e',
}
}
}
}
}
</script>
</head>
<body class="min-h-full bg-gradient-to-br from-primary-100 to-secondary-100">
<main class="container mx-auto px-4 py-8 max-w-4xl">
<header class="mb-12 text-center">
<h1 class="text-4xl md:text-5xl font-bold text-primary-900 mb-2">Binary Blabber Bot 3000</h1>
<p class="text-lg text-secondary-900">Encode & decode messages with 2s and 3s instead of 0s and 1s</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Encoder Section -->
<section class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-primary-500 px-6 py-4">
<h2 class="text-xl font-semibold text-white flex items-center gap-2">
<i data-feather="lock" class="w-5 h-5"></i>
Encoder
</h2>
</div>
<div class="p-6">
<div class="mb-4">
<label for="encode-input" class="block text-sm font-medium text-gray-700 mb-2">Your message</label>
<textarea
id="encode-input"
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
placeholder="Type your secret message here..."></textarea>
</div>
<button
id="encode-btn"
class="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center gap-2">
<i data-feather="arrow-down" class="w-5 h-5"></i>
Convert to 2s & 3s
</button>
<div class="mt-4">
<label for="encode-output" class="block text-sm font-medium text-gray-700 mb-2">Encoded message</label>
<textarea
id="encode-output"
rows="4"
readonly
class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md font-mono"
placeholder="Your encoded message will appear here..."></textarea>
</div>
<button
id="copy-encode"
class="mt-2 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center gap-2">
<i data-feather="copy" class="w-5 h-5"></i>
Copy to clipboard
</button>
</div>
</section>
<!-- Decoder Section -->
<section class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-secondary-500 px-6 py-4">
<h2 class="text-xl font-semibold text-white flex items-center gap-2">
<i data-feather="unlock" class="w-5 h-5"></i>
Decoder
</h2>
</div>
<div class="p-6">
<div class="mb-4">
<label for="decode-input" class="block text-sm font-medium text-gray-700 mb-2">Encoded message</label>
<textarea
id="decode-input"
rows="4"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:border-transparent"
placeholder="Paste your 2s & 3s code here..."></textarea>
</div>
<button
id="decode-btn"
class="w-full bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center gap-2">
<i data-feather="arrow-up" class="w-5 h-5"></i>
Decode to text
</button>
<div class="mt-4">
<label for="decode-output" class="block text-sm font-medium text-gray-700 mb-2">Decoded message</label>
<textarea
id="decode-output"
rows="4"
readonly
class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md"
placeholder="Your decoded message will appear here..."></textarea>
</div>
<button
id="copy-decode"
class="mt-2 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-md transition duration-200 flex items-center justify-center gap-2">
<i data-feather="copy" class="w-5 h-5"></i>
Copy to clipboard
</button>
</div>
</section>
</div>
<div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden">
<div class="bg-gradient-to-r from-primary-500 to-secondary-500 px-6 py-4">
<h2 class="text-xl font-semibold text-white flex items-center gap-2">
<i data-feather="info" class="w-5 h-5"></i>
How it works
</h2>
</div>
<div class="p-6">
<p class="mb-4">The Binary Blabber Bot 3000 replaces traditional binary (0s and 1s) with 2s and 3s for a more secure encoding.</p>
<p class="mb-2"><span class="font-semibold">Encoding process:</span></p>
<ol class="list-decimal pl-5 mb-4 space-y-1">
<li>Convert each character to its ASCII code</li>
<li>Convert ASCII code to 8-bit binary</li>
<li>Replace all 0s with 2s and all 1s with 3s</li>
</ol>
<p class="mb-2"><span class="font-semibold">Decoding process:</span></p>
<ol class="list-decimal pl-5 space-y-1">
<li>Replace all 2s with 0s and all 3s with 1s</li>
<li>Convert 8-bit binary to ASCII code</li>
<li>Convert ASCII code to character</li>
</ol>
</div>
</div>
</main>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |