75 lines
4.3 KiB
PHP
75 lines
4.3 KiB
PHP
<?php
|
|
// Tools page
|
|
?>
|
|
<div class="header">
|
|
<h1 style="font-size:1.5rem; font-weight:700;"><i class="fa fa-toolbox" style="color:var(--primary);"></i> Tools</h1>
|
|
</div>
|
|
|
|
<div class="db-grid">
|
|
<!-- Base64 encode/decode -->
|
|
<a href="#" class="db-stat-card" style="border-top:3px solid #6366F1;" onclick="openTool('base64'); return false;">
|
|
<div class="db-stat-label"><i class="fa fa-code"></i> Base64 En/Decode</div>
|
|
<div class="db-stat-sub" style="margin-top:auto;"><span style="background:rgba(99,102,241,0.12); color:#6366F1;">Text utility</span></div>
|
|
</a>
|
|
|
|
<!-- UUID Generator -->
|
|
<a href="#" class="db-stat-card" style="border-top:3px solid #10B981;" onclick="openTool('uuid'); return false;">
|
|
<div class="db-stat-label"><i class="fa fa-fingerprint"></i> UUID Generator</div>
|
|
<div class="db-stat-sub" style="margin-top:auto;"><span style="background:rgba(16,185,129,0.12); color:#10B981;">ID utility</span></div>
|
|
</a>
|
|
|
|
<!-- JSON Formatter -->
|
|
<a href="#" class="db-stat-card" style="border-top:3px solid #F59E0B;" onclick="openTool('json'); return false;">
|
|
<div class="db-stat-label"><i class="fa fa-code"></i> JSON Formatter</div>
|
|
<div class="db-stat-sub" style="margin-top:auto;"><span style="background:rgba(245,158,11,0.12); color:#F59E0B;">Dev utility</span></div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Modal for tools -->
|
|
<div class="modal-overlay" id="tool-modal">
|
|
<div class="modal-content" style="max-width:600px; display:flex; flex-direction:column;">
|
|
<h3 id="tool-title" style="margin-bottom:1rem; font-size:1.1rem;"></h3>
|
|
<div id="tool-body" style="flex:1;"></div>
|
|
<button class="btn btn-secondary" style="margin-top:1rem; width:100%;" onclick="document.getElementById('tool-modal').classList.remove('active')">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openTool(tool) {
|
|
const title = document.getElementById('tool-title');
|
|
const body = document.getElementById('tool-body');
|
|
|
|
if (tool === 'base64') {
|
|
title.innerHTML = '<i class="fa fa-code"></i> Base64 Encoder/Decoder';
|
|
body.innerHTML = `
|
|
<textarea id="b64-input" class="form-control" rows="4" placeholder="Enter text here..."></textarea>
|
|
<div style="display:flex; gap:0.5rem; margin:1rem 0;">
|
|
<button class="btn" onclick="document.getElementById('b64-output').value = btoa(unescape(encodeURIComponent(document.getElementById('b64-input').value)))">Encode</button>
|
|
<button class="btn" onclick="try{document.getElementById('b64-output').value = decodeURIComponent(escape(atob(document.getElementById('b64-input').value)))}catch(e){alert('Invalid base64')}">Decode</button>
|
|
</div>
|
|
<textarea id="b64-output" class="form-control" rows="4" placeholder="Result..." readonly></textarea>
|
|
`;
|
|
} else if (tool === 'uuid') {
|
|
title.innerHTML = '<i class="fa fa-fingerprint"></i> UUID Generator';
|
|
body.innerHTML = `
|
|
<div style="display:flex; gap:0.5rem; margin-bottom:1rem;">
|
|
<input type="text" id="uuid-output" class="form-control" readonly style="font-family:monospace; font-size:1.1rem; text-align:center;">
|
|
<button class="btn" onclick="navigator.clipboard.writeText(document.getElementById('uuid-output').value); showToast('Copied!')"><i class="fa fa-copy"></i></button>
|
|
</div>
|
|
<button class="btn" style="width:100%;" onclick="document.getElementById('uuid-output').value = crypto.randomUUID()">Generate New UUID</button>
|
|
`;
|
|
setTimeout(() => document.getElementById('uuid-output').value = crypto.randomUUID(), 10);
|
|
} else if (tool === 'json') {
|
|
title.innerHTML = '<i class="fa fa-code"></i> JSON Formatter';
|
|
body.innerHTML = `
|
|
<textarea id="json-input" class="form-control" rows="8" placeholder="Paste JSON here..." style="font-family:monospace;"></textarea>
|
|
<div style="margin:1rem 0; text-align:right;">
|
|
<button class="btn" onclick="try{document.getElementById('json-input').value = JSON.stringify(JSON.parse(document.getElementById('json-input').value), null, 4)}catch(e){alert('Invalid JSON')}">Format JSON</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
document.getElementById('tool-modal').classList.add('active');
|
|
}
|
|
</script>
|