mirror of
https://github.com/PR0M3TH3AN/text_splitter.git
synced 2025-09-07 06:48:42 +00:00
update
This commit is contained in:
thePR0M3TH3AN
148
src/index.html
148
src/index.html
@@ -8,69 +8,121 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #121212; /* Dark mode background */
|
||||
color: #ffffff; /* Dark mode text color */
|
||||
}
|
||||
h1, h2 {
|
||||
color: #333;
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
}
|
||||
p {
|
||||
line-height: 1.6;
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-wrap; /* Ensure text wraps */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
background-color: #2c2c2c; /* Dark mode textarea background */
|
||||
color: #ffffff; /* Dark mode textarea text color */
|
||||
border: 1px solid #444; /* Dark mode textarea border */
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.link-btn {
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
padding: 10px 15px;
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
background-color: #007bff;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.link-btn:hover {
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
#messageFields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.message-field {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#output {
|
||||
white-space: pre-wrap; /* Ensure text wraps */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
background: #2c2c2c; /* Dark mode output background */
|
||||
color: #ffffff; /* Dark mode output text color */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #444; /* Dark mode output border */
|
||||
}
|
||||
.error {
|
||||
color: #ff6b6b; /* Dark mode error color */
|
||||
}
|
||||
#hashResult {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #e9ecef;
|
||||
border-radius: 5px;
|
||||
color: #000000; /* Light mode text color for hash result */
|
||||
}
|
||||
nav {
|
||||
background-color: #333; /* Dark mode nav background */
|
||||
color: #ffffff; /* Dark mode nav text color */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
nav a {
|
||||
color: #ffffff; /* Dark mode nav link color */
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>eCash Text Splitter & Reassembler</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>How to Use the eCash Text Splitter</h2>
|
||||
<p>This tool helps you split a large eCash payment text into smaller, manageable parts that can be sent over Meshtastic. Each part will include a prefix indicating its sequence and a hash for integrity verification.</p>
|
||||
<p>To use the text splitter:</p>
|
||||
<ol>
|
||||
<li>Go to the <a class="link-btn" href="splitter.html">eCash Text Splitter Tool</a>.</li>
|
||||
<li>Paste your eCash payment text into the text area.</li>
|
||||
<li>Click the "Split Text" button. The text will be divided into chunks of up to 150 characters.</li>
|
||||
<li>Each chunk will include a prefix with its sequence number and, for the first chunk, a hash of the entire text.</li>
|
||||
<li>Copy each chunk and send them as separate messages.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="splitter.html">Splitter</a>
|
||||
<a href="reassemble.html">Reassembler</a>
|
||||
</nav>
|
||||
|
||||
<div class="section">
|
||||
<h2>How to Reassemble the eCash Payment</h2>
|
||||
<p>To reassemble the split eCash payment text and verify its integrity:</p>
|
||||
<ol>
|
||||
<li>Go to the <a class="link-btn" href="reassemble.html">eCash Text Reassembler Tool</a>.</li>
|
||||
<li>Paste all received message chunks into the provided text area.</li>
|
||||
<li>The tool will automatically reorder the messages, combine them, and check the hash for integrity verification.</li>
|
||||
<li>If the hash matches, you will get the original text back. If not, verify the chunks for completeness and correct order.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>eCash Text Splitter & Reassembler</h1>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>How to Use the eCash Text Splitter</h2>
|
||||
<p>This tool helps you split a large eCash payment text into smaller, manageable parts that can be sent over Meshtastic. Each part will include a prefix indicating its sequence and a hash for integrity verification.</p>
|
||||
<p>To use the text splitter:</p>
|
||||
<ol>
|
||||
<li>Go to the <a href="splitter.html">eCash Text Splitter Tool</a>.</li>
|
||||
<li>Paste your eCash payment text into the text area.</li>
|
||||
<li>Click the "Split Text" button. The text will be divided into chunks of up to 150 characters.</li>
|
||||
<li>Each chunk will include a prefix with its sequence number and, for the first chunk, a hash of the entire text.</li>
|
||||
<li>Copy each chunk and send them as separate messages.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Links</h2>
|
||||
<p>Access the tools and repository below:</p>
|
||||
<ul>
|
||||
<li><a class="link-btn" href="splitter.html">eCash Text Splitter Tool</a></li>
|
||||
<li><a class="link-btn" href="reassemble.html">eCash Text Reassembler Tool</a></li>
|
||||
<li><a class="link-btn" href="https://github.com/PR0M3TH3AN/text_splitter">GitHub Repository</a></li>
|
||||
</ul>
|
||||
<div class="section">
|
||||
<h2>How to Reassemble the eCash Payment</h2>
|
||||
<p>To reassemble the split eCash payment text and verify its integrity:</p>
|
||||
<ol>
|
||||
<li>Go to the <a href="reassemble.html">eCash Text Reassembler Tool</a>.</li>
|
||||
<li>Paste all received message chunks into the provided text area.</li>
|
||||
<li>The tool will automatically reorder the messages, combine them, and check the hash for integrity verification.</li>
|
||||
<li>If the hash matches, you will get the original text back. If not, verify the chunks for completeness and correct order.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Links</h2>
|
||||
<p>Access the repository below:</p>
|
||||
<ul>
|
||||
<li><a href="https://github.com/PR0M3TH3AN/text_splitter">GitHub Repository</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,14 +8,21 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #121212; /* Dark mode background */
|
||||
color: #ffffff; /* Dark mode text color */
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
color: #ffffff;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-wrap; /* Ensure text wraps */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
background-color: #2c2c2c; /* Dark mode textarea background */
|
||||
color: #ffffff; /* Dark mode textarea text color */
|
||||
border: 1px solid #444; /* Dark mode textarea border */
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
@@ -25,77 +32,186 @@
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap; /* Allows text to wrap and maintains formatting */
|
||||
background: #f4f4f4;
|
||||
#messageFields {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.message-field {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#output {
|
||||
white-space: pre-wrap; /* Ensure text wraps */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
background: #2c2c2c; /* Dark mode output background */
|
||||
color: #ffffff; /* Dark mode output text color */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #444; /* Dark mode output border */
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
color: #ff6b6b; /* Dark mode error color */
|
||||
}
|
||||
#hashResult {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background: #e9ecef;
|
||||
border-radius: 5px;
|
||||
color: #000000; /* Light mode text color for hash result */
|
||||
}
|
||||
nav {
|
||||
background-color: #333; /* Dark mode nav background */
|
||||
color: #ffffff; /* Dark mode nav text color */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
nav a {
|
||||
color: #ffffff; /* Dark mode nav link color */
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="splitter.html">Splitter</a>
|
||||
<a href="reassemble.html">Reassembler</a>
|
||||
</nav>
|
||||
|
||||
<h1>eCash Text Reassembler</h1>
|
||||
|
||||
<textarea id="inputChunks" placeholder="Paste all received message chunks here..."></textarea>
|
||||
<textarea id="firstMessage" placeholder="Paste the first message (with hash and total messages) here..."></textarea>
|
||||
<button onclick="generateMessageFields()">Generate Message Fields</button>
|
||||
|
||||
<div id="messageFields"></div>
|
||||
|
||||
<button onclick="reassembleText()">Reassemble Text</button>
|
||||
<button id="copyButton" onclick="copyFinalMessage()" style="display: none;">Copy Final Message</button>
|
||||
|
||||
<h2>Reassembled Text</h2>
|
||||
<pre id="outputText"></pre>
|
||||
<p id="statusMessage" class="error"></p>
|
||||
<div id="output"></div>
|
||||
|
||||
<div id="hashResult"></div>
|
||||
|
||||
<script>
|
||||
function hexToUint8Array(hex) {
|
||||
const length = hex.length / 2;
|
||||
const bytes = new Uint8Array(length);
|
||||
for (let i = 0; i < length; i++) {
|
||||
bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
|
||||
}
|
||||
return bytes;
|
||||
}
|
||||
|
||||
function generateMessageFields() {
|
||||
const firstMessage = document.getElementById('firstMessage').value.trim();
|
||||
const lines = firstMessage.split('\n');
|
||||
|
||||
if (lines.length < 2) {
|
||||
alert('Invalid format for the first message.');
|
||||
return;
|
||||
}
|
||||
|
||||
const hashLine = lines[0];
|
||||
const messageInfoLine = lines[1];
|
||||
|
||||
const hashRegex = /Hash:\s([a-fA-F0-9]{64})/;
|
||||
const messageInfoRegex = /Message\s(\d+)\/(\d+)/;
|
||||
|
||||
const hashMatch = hashLine.match(hashRegex);
|
||||
const messageInfoMatch = messageInfoLine.match(messageInfoRegex);
|
||||
|
||||
if (!hashMatch || !messageInfoMatch) {
|
||||
alert('Invalid format for the first message.');
|
||||
return;
|
||||
}
|
||||
|
||||
const totalMessages = parseInt(messageInfoMatch[2], 10);
|
||||
|
||||
const messageFieldsDiv = document.getElementById('messageFields');
|
||||
messageFieldsDiv.innerHTML = ''; // Clear previous fields
|
||||
|
||||
for (let i = 1; i <= totalMessages; i++) {
|
||||
const inputField = document.createElement('textarea');
|
||||
inputField.className = 'message-field';
|
||||
inputField.id = 'messageField' + i;
|
||||
inputField.placeholder = 'Paste message ' + i + ' here...';
|
||||
messageFieldsDiv.appendChild(inputField);
|
||||
}
|
||||
}
|
||||
|
||||
function reassembleText() {
|
||||
const chunks = document.getElementById('inputChunks').value.split('\n\n---\n\n');
|
||||
let text = '';
|
||||
let hashReceived = '';
|
||||
const chunkOrder = [];
|
||||
const firstMessage = document.getElementById('firstMessage').value.trim();
|
||||
const lines = firstMessage.split('\n');
|
||||
|
||||
// Extract the hash from the first chunk and remove it from the text
|
||||
chunks.forEach(chunk => {
|
||||
const lines = chunk.split('\n');
|
||||
if (lines[0].startsWith('Hash:')) {
|
||||
hashReceived = lines[0].replace('Hash: ', '').trim();
|
||||
text += lines.slice(2).join('\n') + '\n';
|
||||
} else {
|
||||
text += chunk.replace(/^Message \d+\/\d+\n\n/, '') + '\n';
|
||||
if (lines.length < 2) {
|
||||
alert('Invalid format for the first message.');
|
||||
return;
|
||||
}
|
||||
|
||||
const hashLine = lines[0];
|
||||
const messageInfoLine = lines[1];
|
||||
|
||||
const hashRegex = /Hash:\s([a-fA-F0-9]{64})/;
|
||||
const messageInfoRegex = /Message\s(\d+)\/(\d+)/;
|
||||
|
||||
const hashMatch = hashLine.match(hashRegex);
|
||||
const messageInfoMatch = messageInfoLine.match(messageInfoRegex);
|
||||
|
||||
if (!hashMatch || !messageInfoMatch) {
|
||||
alert('Invalid format for the first message.');
|
||||
return;
|
||||
}
|
||||
|
||||
const originalHash = hashMatch[1];
|
||||
const totalMessages = parseInt(messageInfoMatch[2], 10);
|
||||
|
||||
// Gather all message chunks
|
||||
let reassembledText = '';
|
||||
for (let i = 1; i <= totalMessages; i++) {
|
||||
const chunk = document.getElementById('messageField' + i).value.trim();
|
||||
if (chunk) {
|
||||
// Extract message content by removing the first two lines
|
||||
const chunkContent = chunk.split('\n').slice(2).join('');
|
||||
reassembledText += chunkContent;
|
||||
}
|
||||
const match = lines[0].match(/Message (\d+)\/(\d+)/);
|
||||
if (match) {
|
||||
chunkOrder[parseInt(match[1], 10) - 1] = chunk;
|
||||
}
|
||||
});
|
||||
|
||||
// Reassemble text in order
|
||||
const reassembledText = chunkOrder.join('\n\n---\n\n');
|
||||
|
||||
// Calculate the hash of the reassembled text
|
||||
crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
|
||||
}
|
||||
|
||||
// Calculate hash of the reassembled text
|
||||
crypto.subtle.digest('SHA-256', new TextEncoder().encode(reassembledText))
|
||||
.then(hashBuffer => {
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
|
||||
|
||||
if (hashHex === hashReceived) {
|
||||
document.getElementById('outputText').textContent = text;
|
||||
document.getElementById('statusMessage').textContent = 'The reassembled text matches the original hash!';
|
||||
document.getElementById('statusMessage').classList.remove('error');
|
||||
|
||||
if (hashHex === originalHash) {
|
||||
document.getElementById('output').textContent = reassembledText;
|
||||
document.getElementById('output').classList.remove('error');
|
||||
document.getElementById('copyButton').style.display = 'inline-block';
|
||||
document.getElementById('hashResult').innerHTML = `Hash verification successful!<br>Original Hash: ${originalHash}<br>Calculated Hash: ${hashHex}`;
|
||||
} else {
|
||||
document.getElementById('outputText').textContent = '';
|
||||
document.getElementById('statusMessage').textContent = 'Hash mismatch! The reassembled text may be corrupted.';
|
||||
document.getElementById('statusMessage').classList.add('error');
|
||||
document.getElementById('output').textContent = 'Hash mismatch! The reassembled text may be incorrect.';
|
||||
document.getElementById('output').classList.add('error');
|
||||
document.getElementById('copyButton').style.display = 'none';
|
||||
document.getElementById('hashResult').innerHTML = `Hash mismatch!<br>Original Hash: ${originalHash}<br>Calculated Hash: ${hashHex}`;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('statusMessage').textContent = 'Error calculating hash: ' + err;
|
||||
document.getElementById('statusMessage').classList.add('error');
|
||||
});
|
||||
.catch(err => console.error('Error calculating hash:', err));
|
||||
}
|
||||
|
||||
function copyFinalMessage() {
|
||||
const reassembledText = document.getElementById('output').textContent;
|
||||
navigator.clipboard.writeText(reassembledText)
|
||||
.then(() => alert('Final message copied to clipboard!'))
|
||||
.catch(err => console.error('Error copying text: ', err));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -8,14 +8,21 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 20px;
|
||||
background-color: #121212; /* Dark mode background */
|
||||
color: #ffffff; /* Dark mode text color */
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
color: #ffffff;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
margin-bottom: 10px;
|
||||
white-space: pre-wrap; /* Ensure text wraps */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
background-color: #2c2c2c; /* Dark mode textarea background */
|
||||
color: #ffffff; /* Dark mode textarea text color */
|
||||
border: 1px solid #444; /* Dark mode textarea border */
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
@@ -25,27 +32,68 @@
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.chunk-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap; /* Allows text to wrap and maintains formatting */
|
||||
background: #f4f4f4;
|
||||
white-space: pre-wrap; /* Ensure text wraps */
|
||||
word-wrap: break-word; /* Break long words */
|
||||
background: #2c2c2c; /* Dark mode pre background */
|
||||
color: #ffffff; /* Dark mode pre text color */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #444; /* Dark mode pre border */
|
||||
overflow: auto;
|
||||
}
|
||||
.copy-btn {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
background-color: #28a745;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.copy-btn:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
nav {
|
||||
background-color: #333; /* Dark mode nav background */
|
||||
color: #ffffff; /* Dark mode nav text color */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
nav a {
|
||||
color: #ffffff; /* Dark mode nav link color */
|
||||
text-decoration: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="splitter.html">Splitter</a>
|
||||
<a href="reassemble.html">Reassembler</a>
|
||||
</nav>
|
||||
|
||||
<h1>eCash Text Splitter</h1>
|
||||
|
||||
<textarea id="inputText" placeholder="Paste your eCash payment text here..."></textarea>
|
||||
<button onclick="splitText()">Split Text</button>
|
||||
|
||||
<h2>Output Chunks</h2>
|
||||
<pre id="outputChunks"></pre>
|
||||
<div id="outputChunks"></div>
|
||||
|
||||
<script>
|
||||
function splitText() {
|
||||
@@ -54,7 +102,7 @@
|
||||
const chunks = [];
|
||||
|
||||
// Calculate the hash of the text
|
||||
const hash = crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
|
||||
crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
|
||||
.then(hashBuffer => {
|
||||
const hashArray = Array.from(new Uint8Array(hashBuffer));
|
||||
const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
|
||||
@@ -76,8 +124,29 @@
|
||||
chunks.push(chunk);
|
||||
}
|
||||
|
||||
// Display the chunks
|
||||
document.getElementById('outputChunks').textContent = chunks.join('\n\n---\n\n');
|
||||
// Display the chunks with copy buttons
|
||||
const outputChunksDiv = document.getElementById('outputChunks');
|
||||
outputChunksDiv.innerHTML = ''; // Clear previous output
|
||||
chunks.forEach((chunk, index) => {
|
||||
const chunkContainer = document.createElement('div');
|
||||
chunkContainer.className = 'chunk-container';
|
||||
|
||||
const pre = document.createElement('pre');
|
||||
pre.textContent = chunk;
|
||||
chunkContainer.appendChild(pre);
|
||||
|
||||
const copyButton = document.createElement('button');
|
||||
copyButton.textContent = 'Copy Chunk ' + (index + 1);
|
||||
copyButton.className = 'copy-btn';
|
||||
copyButton.onclick = () => {
|
||||
navigator.clipboard.writeText(chunk)
|
||||
.then(() => alert('Chunk copied to clipboard!'))
|
||||
.catch(err => console.error('Error copying text: ', err));
|
||||
};
|
||||
chunkContainer.appendChild(copyButton);
|
||||
|
||||
outputChunksDiv.appendChild(chunkContainer);
|
||||
});
|
||||
})
|
||||
.catch(err => console.error('Error calculating hash:', err));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user