mirror of
https://github.com/elder-plinius/P4RS3LT0NGV3.git
synced 2026-07-10 14:48:40 +02:00
feat: add randomizer chaos animations; add many new transforms (Katakana, Hiragana, Cyrillic Stylized, Fraktur, cases, emoji speak); improve previews; mixed/token-wise universal decoding; UI categories + README contributor guide; fix Random Mix no-scroll
This commit is contained in:
EP
@@ -0,0 +1,258 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user