mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-05-13 12:54:45 +02:00
EP
301 lines
13 KiB
HTML
301 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Transform Test Page</title>
|
||
<style>
|
||
body { font-family: Arial, sans-serif; margin: 20px; }
|
||
.test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
|
||
.test-input { width: 100%; padding: 10px; margin: 10px 0; }
|
||
.test-output { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 3px; }
|
||
.test-button { padding: 8px 16px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
|
||
.test-button:hover { background: #0056b3; }
|
||
h2 { color: #333; }
|
||
.category { background: #e9ecef; padding: 10px; margin: 10px 0; border-radius: 5px; }
|
||
.randomizer-test {
|
||
background: linear-gradient(135deg, #f3e5f5, #e1bee7);
|
||
border: 2px solid #9c27b0;
|
||
position: relative;
|
||
}
|
||
.randomizer-test::before {
|
||
content: '🎲';
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 15px;
|
||
font-size: 24px;
|
||
background: white;
|
||
padding: 0 10px;
|
||
}
|
||
.randomizer-btn {
|
||
background: linear-gradient(135deg, #9c27b0, #ab47bc) !important;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🧪 Transform Test Page</h1>
|
||
<p>Test all the new transforms to make sure they work correctly!</p>
|
||
|
||
<div class="test-section">
|
||
<h2>Test Input</h2>
|
||
<input type="text" id="testInput" class="test-input" value="Hello World!" placeholder="Enter text to test...">
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🔧 Encoding & Decoding</h2>
|
||
<button class="test-button" onclick="testTransform('base64')">Test Base64</button>
|
||
<button class="test-button" onclick="testTransform('base32')">Test Base32</button>
|
||
<button class="test-button" onclick="testTransform('binary')">Test Binary</button>
|
||
<button class="test-button" onclick="testTransform('hex')">Test Hex</button>
|
||
<div id="output-encoding" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🧙♂️ Fantasy Languages</h2>
|
||
<button class="test-button" onclick="testTransform('quenya')">Test Quenya</button>
|
||
<button class="test-button" onclick="testTransform('tengwar')">Test Tengwar</button>
|
||
<button class="test-button" onclick="testTransform('klingon')">Test Klingon</button>
|
||
<button class="test-button" onclick="testTransform('aurebesh')">Test Aurebesh</button>
|
||
<button class="test-button" onclick="testTransform('dovahzul')">Test Dovahzul</button>
|
||
<div id="output-fantasy" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🏛️ Ancient Scripts</h2>
|
||
<button class="test-button" onclick="testTransform('hieroglyphics')">Test Hieroglyphics</button>
|
||
<button class="test-button" onclick="testTransform('ogham')">Test Ogham</button>
|
||
<button class="test-button" onclick="testTransform('elder_futhark')">Test Elder Futhark</button>
|
||
<div id="output-ancient" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>⚙️ Technical Codes</h2>
|
||
<button class="test-button" onclick="testTransform('brainfuck')">Test Brainfuck</button>
|
||
<button class="test-button" onclick="testTransform('mathematical')">Test Mathematical</button>
|
||
<button class="test-button" onclick="testTransform('chemical')">Test Chemical</button>
|
||
<div id="output-technical" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🎨 Visual & Unicode</h2>
|
||
<button class="test-button" onclick="testTransform('upside_down')">Test Upside Down</button>
|
||
<button class="test-button" onclick="testTransform('medieval')">Test Medieval</button>
|
||
<button class="test-button" onclick="testTransform('cursive')">Test Cursive</button>
|
||
<button class="test-button" onclick="testTransform('monospace')">Test Monospace</button>
|
||
<div id="output-visual" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🔍 Test Reverse Functions</h2>
|
||
<button class="test-button" onclick="testReverse('base64')">Test Base64 Reverse</button>
|
||
<button class="test-button" onclick="testReverse('quenya')">Test Quenya Reverse</button>
|
||
<button class="test-button" onclick="testReverse('upside_down')">Test Upside Down Reverse</button>
|
||
<div id="output-reverse" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category randomizer-test">
|
||
<h2>🎲 Test Randomizer - Code Switching Magic!</h2>
|
||
<p>🌟 Apply different transforms to each word! Each run creates a unique mix.</p>
|
||
<button class="test-button randomizer-btn" onclick="testRandomizer()">🎯 Test Random Mix</button>
|
||
<button class="test-button" onclick="testRandomizerMultiple()">🔄 Test 5 Random Variations</button>
|
||
<div id="output-randomizer" class="test-output"></div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>✅ Full Self‑Test (round‑trip)</h2>
|
||
<p>Runs encode→decode for every transform that provides a reverse function.</p>
|
||
<button class="test-button" onclick="runFullSelfTest()">Run Full Self‑Test</button>
|
||
<div id="output-matrix" class="test-output"></div>
|
||
</div>
|
||
|
||
<script src="js/transforms.js"></script>
|
||
<script>
|
||
function testTransform(transformName) {
|
||
const input = document.getElementById('testInput').value;
|
||
const transform = window.transforms[transformName];
|
||
|
||
if (!transform) {
|
||
alert(`Transform '${transformName}' not found!`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const result = transform.func(input);
|
||
const category = getTransformCategory(transformName);
|
||
const outputId = `output-${category}`;
|
||
|
||
if (document.getElementById(outputId)) {
|
||
document.getElementById(outputId).innerHTML = `
|
||
<strong>${transform.name}:</strong><br>
|
||
<strong>Input:</strong> ${input}<br>
|
||
<strong>Output:</strong> ${result}<br>
|
||
<strong>Has Reverse:</strong> ${transform.reverse ? 'Yes' : 'No'}
|
||
`;
|
||
}
|
||
} catch (error) {
|
||
alert(`Error testing ${transformName}: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
function testReverse(transformName) {
|
||
const input = document.getElementById('testInput').value;
|
||
const transform = window.transforms[transformName];
|
||
|
||
if (!transform || !transform.reverse) {
|
||
alert(`Transform '${transformName}' has no reverse function!`);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// First encode
|
||
const encoded = transform.func(input);
|
||
// Then decode
|
||
const decoded = transform.reverse(encoded);
|
||
|
||
document.getElementById('output-reverse').innerHTML = `
|
||
<strong>${transform.name} Reverse Test:</strong><br>
|
||
<strong>Original:</strong> ${input}<br>
|
||
<strong>Encoded:</strong> ${encoded}<br>
|
||
<strong>Decoded:</strong> ${decoded}<br>
|
||
<strong>Match:</strong> ${input === decoded ? '✅ Yes' : '❌ No'}
|
||
`;
|
||
} catch (error) {
|
||
alert(`Error testing reverse for ${transformName}: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
function getTransformCategory(transformName) {
|
||
const categories = {
|
||
'base64': 'encoding',
|
||
'base32': 'encoding',
|
||
'binary': 'encoding',
|
||
'hex': 'encoding',
|
||
'quenya': 'fantasy',
|
||
'tengwar': 'fantasy',
|
||
'klingon': 'fantasy',
|
||
'aurebesh': 'fantasy',
|
||
'dovahzul': 'fantasy',
|
||
'hieroglyphics': 'ancient',
|
||
'ogham': 'ancient',
|
||
'elder_futhark': 'ancient',
|
||
'brainfuck': 'technical',
|
||
'mathematical': 'technical',
|
||
'chemical': 'technical',
|
||
'upside_down': 'visual',
|
||
'medieval': 'visual',
|
||
'cursive': 'visual',
|
||
'monospace': 'visual'
|
||
};
|
||
return categories[transformName] || 'special';
|
||
}
|
||
|
||
// Test the randomizer
|
||
function testRandomizer() {
|
||
const input = document.getElementById('testInput').value;
|
||
if (!window.transforms.randomizer) {
|
||
document.getElementById('output-randomizer').innerHTML = '❌ Randomizer not found!';
|
||
return;
|
||
}
|
||
|
||
const result = window.transforms.randomizer.func(input);
|
||
const transformInfo = window.transforms.randomizer.getLastTransformInfo();
|
||
|
||
let infoHTML = '';
|
||
if (transformInfo && transformInfo.length > 0) {
|
||
infoHTML = '<br><strong>Transform Mapping:</strong><br>';
|
||
transformInfo.forEach(info => {
|
||
infoHTML += `• "${info.original}" → ${info.transformName}<br>`;
|
||
});
|
||
}
|
||
|
||
document.getElementById('output-randomizer').innerHTML = `
|
||
<strong>Input:</strong> ${input}<br>
|
||
<strong>Random Mix Result:</strong> ${result}${infoHTML}
|
||
<strong>Success:</strong> ✅
|
||
`;
|
||
}
|
||
|
||
// Test multiple random variations
|
||
function testRandomizerMultiple() {
|
||
const input = document.getElementById('testInput').value;
|
||
if (!window.transforms.randomizer) {
|
||
document.getElementById('output-randomizer').innerHTML = '❌ Randomizer not found!';
|
||
return;
|
||
}
|
||
|
||
let resultsHTML = `<strong>Input:</strong> ${input}<br><strong>5 Random Variations:</strong><br>`;
|
||
|
||
for (let i = 1; i <= 5; i++) {
|
||
const result = window.transforms.randomizer.func(input);
|
||
const transformInfo = window.transforms.randomizer.getLastTransformInfo();
|
||
|
||
let transforms = '';
|
||
if (transformInfo && transformInfo.length > 0) {
|
||
transforms = ' (' + transformInfo.map(t => t.transformName).join(', ') + ')';
|
||
}
|
||
|
||
resultsHTML += `<br><strong>Variation ${i}:</strong> ${result}${transforms}`;
|
||
}
|
||
|
||
resultsHTML += '<br><strong>Success:</strong> ✅';
|
||
document.getElementById('output-randomizer').innerHTML = resultsHTML;
|
||
}
|
||
|
||
// Auto-test all transforms on page load
|
||
window.onload = function() {
|
||
console.log('Available transforms:', Object.keys(window.transforms));
|
||
console.log('Testing transforms...');
|
||
|
||
// Test a few key transforms
|
||
setTimeout(() => {
|
||
testTransform('base64');
|
||
testTransform('quenya');
|
||
testTransform('upside_down');
|
||
|
||
// Auto-test randomizer
|
||
setTimeout(() => {
|
||
console.log('🎲 Auto-testing randomizer...');
|
||
testRandomizer();
|
||
}, 500);
|
||
}, 100);
|
||
};
|
||
|
||
// Full matrix round-trip tester
|
||
function runFullSelfTest() {
|
||
const samples = [
|
||
'Hello World!',
|
||
'Attack at dawn 123!',
|
||
'Café naïve — résumé',
|
||
'🐍🔥 Parsel 🧪'
|
||
];
|
||
const results = [];
|
||
const names = Object.keys(window.transforms);
|
||
for (const key of names) {
|
||
const t = window.transforms[key];
|
||
if (!t || typeof t.func !== 'function' || typeof t.reverse !== 'function') continue;
|
||
let ok = true, detail = '';
|
||
try {
|
||
for (const s of samples) {
|
||
const enc = t.func(s);
|
||
const dec = t.reverse(enc);
|
||
if (dec !== s) { ok = false; detail = `Mismatch on sample "${s}"`; break; }
|
||
}
|
||
} catch (e) {
|
||
ok = false; detail = e.message || String(e);
|
||
}
|
||
results.push({ name: t.name || key, ok, detail });
|
||
}
|
||
const passed = results.filter(r => r.ok);
|
||
const failed = results.filter(r => !r.ok);
|
||
let html = `<strong>Total reversible transforms tested:</strong> ${results.length}<br>`+
|
||
`<strong>Passed:</strong> ${passed.length} ✅<br>`+
|
||
`<strong>Failed:</strong> ${failed.length} ${failed.length? '❌' : ''}<br>`;
|
||
if (failed.length) {
|
||
html += '<br><strong>Failures:</strong><br>' + failed.map(f => `• ${f.name}: ${f.detail}`).join('<br>');
|
||
}
|
||
document.getElementById('output-matrix').innerHTML = html;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |