Hugging Face's logo

Spaces:
amirinvis
/
23code
Running

App Files Community
amirinvis commited on
Commit
0bf6fde
·
verified ·
1 Parent(s): 307c71e

create an app that turns messages into binary code but not 0 and 1. 2 and 3 numbers and has a decode and encode place

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +154 -19
  3. script.js +84 -0
  4. style.css +57 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Binary Blabber Bot 3000
3
- emoji: 😻
4
  colorFrom: green
5
- colorTo: red
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Binary Blabber Bot 3000 🤖
 
3
  colorFrom: green
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,154 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="h-full">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Binary Blabber Bot 3000</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: {
17
+ 100: '#d1fae5',
18
+ 500: '#10b981',
19
+ 900: '#064e3b',
20
+ },
21
+ secondary: {
22
+ 100: '#e0f2fe',
23
+ 500: '#0ea5e9',
24
+ 900: '#0c4a6e',
25
+ }
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ </head>
32
+ <body class="min-h-full bg-gradient-to-br from-primary-100 to-secondary-100">
33
+ <main class="container mx-auto px-4 py-8 max-w-4xl">
34
+ <header class="mb-12 text-center">
35
+ <h1 class="text-4xl md:text-5xl font-bold text-primary-900 mb-2">Binary Blabber Bot 3000</h1>
36
+ <p class="text-lg text-secondary-900">Encode & decode messages with 2s and 3s instead of 0s and 1s</p>
37
+ </header>
38
+
39
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
40
+ <!-- Encoder Section -->
41
+ <section class="bg-white rounded-xl shadow-lg overflow-hidden">
42
+ <div class="bg-primary-500 px-6 py-4">
43
+ <h2 class="text-xl font-semibold text-white flex items-center gap-2">
44
+ <i data-feather="lock" class="w-5 h-5"></i>
45
+ Encoder
46
+ </h2>
47
+ </div>
48
+ <div class="p-6">
49
+ <div class="mb-4">
50
+ <label for="encode-input" class="block text-sm font-medium text-gray-700 mb-2">Your message</label>
51
+ <textarea
52
+ id="encode-input"
53
+ rows="4"
54
+ 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"
55
+ placeholder="Type your secret message here..."></textarea>
56
+ </div>
57
+ <button
58
+ id="encode-btn"
59
+ 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">
60
+ <i data-feather="arrow-down" class="w-5 h-5"></i>
61
+ Convert to 2s & 3s
62
+ </button>
63
+ <div class="mt-4">
64
+ <label for="encode-output" class="block text-sm font-medium text-gray-700 mb-2">Encoded message</label>
65
+ <textarea
66
+ id="encode-output"
67
+ rows="4"
68
+ readonly
69
+ class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md font-mono"
70
+ placeholder="Your encoded message will appear here..."></textarea>
71
+ </div>
72
+ <button
73
+ id="copy-encode"
74
+ 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">
75
+ <i data-feather="copy" class="w-5 h-5"></i>
76
+ Copy to clipboard
77
+ </button>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- Decoder Section -->
82
+ <section class="bg-white rounded-xl shadow-lg overflow-hidden">
83
+ <div class="bg-secondary-500 px-6 py-4">
84
+ <h2 class="text-xl font-semibold text-white flex items-center gap-2">
85
+ <i data-feather="unlock" class="w-5 h-5"></i>
86
+ Decoder
87
+ </h2>
88
+ </div>
89
+ <div class="p-6">
90
+ <div class="mb-4">
91
+ <label for="decode-input" class="block text-sm font-medium text-gray-700 mb-2">Encoded message</label>
92
+ <textarea
93
+ id="decode-input"
94
+ rows="4"
95
+ 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"
96
+ placeholder="Paste your 2s & 3s code here..."></textarea>
97
+ </div>
98
+ <button
99
+ id="decode-btn"
100
+ 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">
101
+ <i data-feather="arrow-up" class="w-5 h-5"></i>
102
+ Decode to text
103
+ </button>
104
+ <div class="mt-4">
105
+ <label for="decode-output" class="block text-sm font-medium text-gray-700 mb-2">Decoded message</label>
106
+ <textarea
107
+ id="decode-output"
108
+ rows="4"
109
+ readonly
110
+ class="w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md"
111
+ placeholder="Your decoded message will appear here..."></textarea>
112
+ </div>
113
+ <button
114
+ id="copy-decode"
115
+ 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">
116
+ <i data-feather="copy" class="w-5 h-5"></i>
117
+ Copy to clipboard
118
+ </button>
119
+ </div>
120
+ </section>
121
+ </div>
122
+
123
+ <div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden">
124
+ <div class="bg-gradient-to-r from-primary-500 to-secondary-500 px-6 py-4">
125
+ <h2 class="text-xl font-semibold text-white flex items-center gap-2">
126
+ <i data-feather="info" class="w-5 h-5"></i>
127
+ How it works
128
+ </h2>
129
+ </div>
130
+ <div class="p-6">
131
+ <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>
132
+ <p class="mb-2"><span class="font-semibold">Encoding process:</span></p>
133
+ <ol class="list-decimal pl-5 mb-4 space-y-1">
134
+ <li>Convert each character to its ASCII code</li>
135
+ <li>Convert ASCII code to 8-bit binary</li>
136
+ <li>Replace all 0s with 2s and all 1s with 3s</li>
137
+ </ol>
138
+ <p class="mb-2"><span class="font-semibold">Decoding process:</span></p>
139
+ <ol class="list-decimal pl-5 space-y-1">
140
+ <li>Replace all 2s with 0s and all 3s with 1s</li>
141
+ <li>Convert 8-bit binary to ASCII code</li>
142
+ <li>Convert ASCII code to character</li>
143
+ </ol>
144
+ </div>
145
+ </div>
146
+ </main>
147
+
148
+ <script src="script.js"></script>
149
+ <script>
150
+ feather.replace();
151
+ </script>
152
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
153
+ </body>
154
+ </html>
script.js ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Encode function
3
+ document.getElementById('encode-btn').addEventListener('click', function() {
4
+ const input = document.getElementById('encode-input').value;
5
+ if (!input) {
6
+ alert('Please enter a message to encode');
7
+ return;
8
+ }
9
+
10
+ let binaryString = '';
11
+ for (let i = 0; i < input.length; i++) {
12
+ // Get ASCII code of each character
13
+ const charCode = input.charCodeAt(i);
14
+ // Convert to 8-bit binary
15
+ let binary = charCode.toString(2).padStart(8, '0');
16
+ // Replace 0 with 2 and 1 with 3
17
+ binary = binary.replace(/0/g, '2').replace(/1/g, '3');
18
+ binaryString += binary + ' ';
19
+ }
20
+
21
+ document.getElementById('encode-output').value = binaryString.trim();
22
+ });
23
+
24
+ // Decode function
25
+ document.getElementById('decode-btn').addEventListener('click', function() {
26
+ const input = document.getElementById('decode-input').value.trim();
27
+ if (!input) {
28
+ alert('Please enter a message to decode');
29
+ return;
30
+ }
31
+
32
+ // Split into 8-character chunks (assuming 8-bit encoding)
33
+ const chunks = input.split(' ');
34
+ let output = '';
35
+
36
+ for (const chunk of chunks) {
37
+ if (chunk.length !== 8) {
38
+ alert('Invalid encoded message. Each character should be represented by 8 digits (2s and 3s).');
39
+ return;
40
+ }
41
+
42
+ // Replace 2 with 0 and 3 with 1
43
+ const binary = chunk.replace(/2/g, '0').replace(/3/g, '1');
44
+ // Convert binary to ASCII code
45
+ const charCode = parseInt(binary, 2);
46
+ // Convert ASCII code to character
47
+ output += String.fromCharCode(charCode);
48
+ }
49
+
50
+ document.getElementById('decode-output').value = output;
51
+ });
52
+
53
+ // Copy to clipboard functions
54
+ document.getElementById('copy-encode').addEventListener('click', function() {
55
+ const output = document.getElementById('encode-output');
56
+ output.select();
57
+ document.execCommand('copy');
58
+
59
+ // Show feedback
60
+ const originalText = this.innerHTML;
61
+ this.innerHTML = '<i data-feather="check" class="w-5 h-5"></i> Copied!';
62
+ setTimeout(() => {
63
+ this.innerHTML = originalText;
64
+ feather.replace();
65
+ }, 2000);
66
+ });
67
+
68
+ document.getElementById('copy-decode').addEventListener('click', function() {
69
+ const output = document.getElementById('decode-output');
70
+ output.select();
71
+ document.execCommand('copy');
72
+
73
+ // Show feedback
74
+ const originalText = this.innerHTML;
75
+ this.innerHTML = '<i data-feather="check" class="w-5 h-5"></i> Copied!';
76
+ setTimeout(() => {
77
+ this.innerHTML = originalText;
78
+ feather.replace();
79
+ }, 2000);
80
+ });
81
+
82
+ // Initialize feather icons
83
+ feather.replace();
84
+ });
style.css CHANGED
@@ -1,28 +1,67 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Custom styles */
2
  body {
3
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
4
  }
5
 
6
+ /* Smooth transitions */
7
+ textarea, button {
8
+ transition: all 0.2s ease-in-out;
9
  }
10
 
11
+ /* Custom scrollbar */
12
+ ::-webkit-scrollbar {
13
+ width: 8px;
14
+ height: 8px;
 
15
  }
16
 
17
+ ::-webkit-scrollbar-track {
18
+ background: #f1f1f1;
 
 
 
 
19
  }
20
 
21
+ ::-webkit-scrollbar-thumb {
22
+ background: #888;
23
+ border-radius: 4px;
24
  }
25
+
26
+ ::-webkit-scrollbar-thumb:hover {
27
+ background: #555;
28
+ }
29
+
30
+ /* Animation for encode/decode buttons */
31
+ @keyframes pulse {
32
+ 0% { transform: scale(1); }
33
+ 50% { transform: scale(1.05); }
34
+ 100% { transform: scale(1); }
35
+ }
36
+
37
+ #encode-btn:active, #decode-btn:active {
38
+ animation: pulse 0.3s ease;
39
+ }
40
+
41
+ /* Tooltip for copy buttons */
42
+ .tooltip {
43
+ position: relative;
44
+ display: inline-block;
45
+ }
46
+
47
+ .tooltip .tooltiptext {
48
+ visibility: hidden;
49
+ width: 120px;
50
+ background-color: #333;
51
+ color: #fff;
52
+ text-align: center;
53
+ border-radius: 6px;
54
+ padding: 5px;
55
+ position: absolute;
56
+ z-index: 1;
57
+ bottom: 125%;
58
+ left: 50%;
59
+ transform: translateX(-50%);
60
+ opacity: 0;
61
+ transition: opacity 0.3s;
62
+ }
63
+
64
+ .tooltip:hover .tooltiptext {
65
+ visibility: visible;
66
+ opacity: 1;
67
+ }