feat: add dev tools page and update sidebar toggle and team mood dashboard UI

This commit is contained in:
root
2026-03-29 15:04:44 +07:00
parent 2a670d80d1
commit f4f842d658
6 changed files with 201 additions and 39 deletions

74
views/tools.php Normal file
View File

@@ -0,0 +1,74 @@
<?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>