Files
text_splitter/src/splitter.html
thePR0M3TH3AN 43a51c45a6 update
2024-07-29 20:37:00 -04:00

161 lines
6.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>eCash Text Splitter</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #121212; /* Dark mode background */
color: #ffffff; /* Dark mode text color */
}
h1 {
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;
font-size: 16px;
color: white;
background-color: #007bff;
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; /* 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;
display: flex;
justify-content: space-around; /* Align links evenly */
align-items: center;
}
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>
<div id="outputChunks"></div>
<script>
function splitText() {
const text = document.getElementById('inputText').value.trim();
const maxChunkSize = 150;
const chunks = [];
// Calculate the hash of the 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('');
// Calculate the total number of chunks
const totalChunks = Math.ceil((text.length + `Hash: ${hashHex}\nMessage 1/1\n\n`.length) / maxChunkSize);
const firstChunkPrefix = `Hash: ${hashHex}\nMessage 1/${totalChunks}\n\n`;
const firstChunkContentSize = maxChunkSize - firstChunkPrefix.length;
const firstChunk = firstChunkPrefix + text.substring(0, firstChunkContentSize);
// Add the first chunk to the list
chunks.push(firstChunk);
// Split the remaining text into chunks
for (let i = firstChunkContentSize; i < text.length; i += (maxChunkSize - 20)) {
let chunk = text.substring(i, i + (maxChunkSize - 20));
let chunkNumber = Math.floor(i / (maxChunkSize - 20)) + 2; // Start from the second chunk
let prefix = `Message ${chunkNumber}/${totalChunks}\n\n`;
chunk = `${prefix}${chunk}`;
chunks.push(chunk);
}
// 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));
}
</script>
</body>
</html>