mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-02-13 01:02:51 +00:00
258 lines
11 KiB
HTML
258 lines
11 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>
|
|
|
|
<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);
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |