Files

418 lines
20 KiB
Bash
Executable File

#!/bin/bash
source includes/icons.sh
cat << EOF
<div class="tools-container">
<!-- Navigation Tabs -->
<div class="tools-navigation">
<nav class="tools-nav">
<button class="nav-tab active" data-category="encoding" onclick="showCategory('encoding', this)">
${FILE_TEXT_ICON}
<span>Text & Encoding</span>
</button>
<button class="nav-tab" data-category="crypto" onclick="showCategory('crypto', this)">
${SHIELD_ICON}
<span>Cryptography</span>
</button>
<button class="nav-tab" data-category="web" onclick="showCategory('web', this)">
${GLOBE_ICON}
<span>Web Security</span>
</button>
<button class="nav-tab" data-category="steganography" onclick="showCategory('steganography', this)">
${EYE_ICON}
<span>Steganography</span>
</button>
</nav>
</div>
<!-- Tools Content -->
<div class="tools-content">
<!-- Text & Encoding -->
<div class="category-section active" id="category-encoding">
<div class="tools-grid">
<!-- JSON Formatter -->
<div class="tool-card" data-tool="json">
<div class="tool-header">
<div class="tool-icon">${CODE_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">JSON Formatter</h3>
<p class="tool-desc">Format, validate and analyze JSON data structures</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<textarea id="json-input" name="json-input" class="tool-textarea" placeholder="Paste your JSON here..." rows="6"></textarea>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/json-formatter" hx-include="#json-input" hx-target="#json-output" hx-vals='{"operation": "format"}'>
Format JSON
</button>
<button class="tool-btn secondary" hx-post="/api/tools/json-formatter" hx-include="#json-input" hx-target="#json-output" hx-vals='{"operation": "minify"}'>
Minify
</button>
<button class="tool-btn secondary" hx-post="/api/tools/json-formatter" hx-include="#json-input" hx-target="#json-output" hx-vals='{"operation": "validate"}'>
Validate
</button>
</div>
<div id="json-output" class="tool-result"></div>
</div>
</div>
<!-- Hash Identifier -->
<div class="tool-card" data-tool="hash">
<div class="tool-header">
<div class="tool-icon">${HASH_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">Hash Identifier</h3>
<p class="tool-desc">Identify hash types and get security analysis from 100+ formats</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<input type="text" id="hash-input" name="hash-input" class="form-input" placeholder="5d41402abc4b2a76b9719d911017c592">
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/hash-identifier" hx-include="#hash-input" hx-target="#hash-output">
Identify Hash
</button>
</div>
<div id="hash-output" class="tool-result"></div>
</div>
</div>
<!-- Base Converter -->
<div class="tool-card" data-tool="base">
<div class="tool-header">
<div class="tool-icon">${CALCULATOR_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">Base Converter</h3>
<p class="tool-desc">Convert numbers between different bases (binary, decimal, hex, octal)</p>
</div>
</div>
<div class="tool-body">
<div class="form-row">
<div class="form-group">
<label class="form-label">Number</label>
<input type="text" id="base-input" name="base-input" class="form-input" placeholder="Enter number">
</div>
<div class="form-group">
<label class="form-label">From Base</label>
<select id="base-from" name="base-from" class="form-select">
<option value="10">Decimal (10)</option>
<option value="16">Hexadecimal (16)</option>
<option value="8">Octal (8)</option>
<option value="2">Binary (2)</option>
</select>
</div>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/base-converter" hx-include="#base-input,#base-from" hx-target="#base-output">
Convert All Bases
</button>
</div>
<div id="base-output" class="tool-result"></div>
</div>
</div>
<!-- URL Encoder/Decoder -->
<div class="tool-card" data-tool="url">
<div class="tool-header">
<div class="tool-icon">${GLOBE_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">URL Encoder/Decoder</h3>
<p class="tool-desc">Encode and decode URL strings and parameters</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<textarea id="url-input" name="url-input" class="tool-textarea" placeholder="Enter text or URL to encode/decode..." rows="4"></textarea>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/url-encoder" hx-include="#url-input" hx-target="#url-output" hx-vals='{"operation": "encode"}'>
URL Encode
</button>
<button class="tool-btn secondary" hx-post="/api/tools/url-encoder" hx-include="#url-input" hx-target="#url-output" hx-vals='{"operation": "decode"}'>
URL Decode
</button>
</div>
<div id="url-output" class="tool-result"></div>
</div>
</div>
</div>
</div>
<!-- Cryptography -->
<div class="category-section" id="category-crypto">
<div class="tools-grid">
<!-- Caesar Cipher -->
<div class="tool-card" data-tool="caesar">
<div class="tool-header">
<div class="tool-icon">${CODE_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">Caesar Cipher</h3>
<p class="tool-desc">Encode/decode Caesar cipher with all rotations</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<textarea id="caesar-input" name="caesar-input" class="tool-textarea" placeholder="Enter text to encode/decode..." rows="4"></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Rotation (optional)</label>
<input type="number" id="caesar-rotation" name="caesar-rotation" class="form-input" placeholder="1-25 or leave empty" min="1" max="25">
</div>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/caesar-decoder" hx-include="#caesar-input,#caesar-rotation" hx-target="#caesar-output">
Decode (All Rotations)
</button>
</div>
<div id="caesar-output" class="tool-result"></div>
</div>
</div>
<!-- GCD/LCM Calculator -->
<div class="tool-card" data-tool="gcd">
<div class="tool-header">
<div class="tool-icon">${CALCULATOR_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">GCD/LCM Calculator</h3>
<p class="tool-desc">Calculate Greatest Common Divisor and Least Common Multiple</p>
</div>
</div>
<div class="tool-body">
<div class="form-row">
<div class="form-group">
<label class="form-label">First Number</label>
<input type="number" id="gcd-num1" name="gcd-num1" class="form-input" placeholder="24">
</div>
<div class="form-group">
<label class="form-label">Second Number</label>
<input type="number" id="gcd-num2" name="gcd-num2" class="form-input" placeholder="36">
</div>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/gcd-lcm" hx-include="#gcd-num1,#gcd-num2" hx-target="#gcd-output">
Calculate GCD/LCM
</button>
</div>
<div id="gcd-output" class="tool-result"></div>
</div>
</div>
<!-- Prime Number Checker -->
<div class="tool-card" data-tool="prime">
<div class="tool-header">
<div class="tool-icon">${CALCULATOR_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">Prime Number Tools</h3>
<p class="tool-desc">Check if a number is prime and find prime factors</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<label class="form-label">Number</label>
<input type="number" id="prime-input" name="prime-input" class="form-input" placeholder="Enter a number">
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/prime-checker" hx-include="#prime-input" hx-target="#prime-output">
Check Prime & Factor
</button>
</div>
<div id="prime-output" class="tool-result"></div>
</div>
</div>
</div>
</div>
<!-- Web Security -->
<div class="category-section" id="category-web">
<div class="tools-grid">
<!-- Timestamp Converter -->
<div class="tool-card" data-tool="timestamp">
<div class="tool-header">
<div class="tool-icon">${CLOCK_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">Timestamp Converter</h3>
<p class="tool-desc">Convert between different timestamp formats</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<input type="text" id="timestamp-input" name="timestamp-input" class="form-input" placeholder="1634567890 or 2021-10-18T10:31:30Z">
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/timestamp-converter" hx-include="#timestamp-input" hx-target="#timestamp-output">
Convert Timestamp
</button>
<button class="tool-btn secondary" hx-post="/api/tools/timestamp-converter" hx-target="#timestamp-output" hx-vals='{"current": "true"}'>
Current Time
</button>
</div>
<div id="timestamp-output" class="tool-result"></div>
</div>
</div>
<!-- JWT Decoder -->
<div class="tool-card" data-tool="jwt">
<div class="tool-header">
<div class="tool-icon">${SHIELD_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">JWT Token Decoder</h3>
<p class="tool-desc">Decode and analyze JSON Web Tokens</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<textarea id="jwt-input" name="jwt-input" class="tool-textarea" placeholder="Paste JWT token here..." rows="4"></textarea>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/jwt-decoder" hx-include="#jwt-input" hx-target="#jwt-output">
Decode JWT
</button>
</div>
<div id="jwt-output" class="tool-result"></div>
</div>
</div>
</div>
</div>
<!-- Steganography -->
<div class="category-section" id="category-steganography">
<div class="tools-grid">
<!-- Text Hidden Message Finder -->
<div class="tool-card large-card" data-tool="hidden">
<div class="tool-header">
<div class="tool-icon">${EYE_ICON}</div>
<div class="tool-info">
<h3 class="tool-title">Hidden Message Analyzer</h3>
<p class="tool-desc">Comprehensive analysis to find hidden messages in text using multiple steganography techniques</p>
</div>
</div>
<div class="tool-body">
<div class="form-group">
<textarea id="hidden-input" name="hidden-input" class="tool-textarea" placeholder="Enter text to analyze for hidden messages..." rows="8"></textarea>
</div>
<div class="tool-actions">
<button class="tool-btn primary" hx-post="/api/tools/hidden-message" hx-include="#hidden-input" hx-target="#hidden-output">
Find Hidden Messages
</button>
</div>
<div id="hidden-output" class="tool-result"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showCategory(category, clickedTab) {
// Hide all sections
var sections = document.querySelectorAll('.category-section');
for (var i = 0; i < sections.length; i++) {
sections[i].style.display = 'none';
sections[i].classList.remove('active');
}
// Remove active from all tabs
var tabs = document.querySelectorAll('.nav-tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
}
// Show target section
var targetSection = document.getElementById('category-' + category);
if (targetSection) {
targetSection.style.display = 'block';
targetSection.classList.add('active');
} else {
console.error('Section not found:', 'category-' + category);
return;
}
// Activate clicked tab
clickedTab.classList.add('active');
}
// Copy to clipboard function
function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(function() {
showNotification('URL copied to clipboard!', 'success');
}).catch(function(err) {
console.error('Failed to copy: ', err);
fallbackCopyTextToClipboard(text);
});
} else {
fallbackCopyTextToClipboard(text);
}
}
// Fallback copy function
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
if (successful) {
showNotification('URL copied to clipboard!', 'success');
} else {
showNotification('Failed to copy URL', 'error');
}
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
showNotification('Copy failed - please copy manually', 'error');
}
document.body.removeChild(textArea);
}
// Show notification
function showNotification(message, type) {
var notification = document.createElement('div');
notification.className = 'notification notification-' + type;
notification.textContent = message;
notification.style.cssText = 'position:fixed;top:20px;right:20px;z-index:9999;padding:12px 20px;border-radius:8px;color:white;font-weight:600;opacity:0;transition:opacity 0.3s ease;';
if (type === 'success') {
notification.style.background = 'var(--success)';
} else {
notification.style.background = 'var(--danger)';
}
document.body.appendChild(notification);
// Fade in
setTimeout(function() {
notification.style.opacity = '1';
}, 100);
// Fade out and remove
setTimeout(function() {
notification.style.opacity = '0';
setTimeout(function() {
if (notification.parentNode) {
document.body.removeChild(notification);
}
}, 300);
}, 3000);
}
// Initialize on page load
window.onload = function() {
// Make sure encoding tab is active initially
showCategory('encoding', document.querySelector('[data-category="encoding"]'));
};
</script>
EOF