Tool Function Testing Page

This page is used to test whether the newly added tool functions work properly.

1. Library Loading Status Check

Check if all necessary JavaScript libraries are loaded correctly

2. QR Code Generator Tool Test

Test QR code generation functionality

3. Code Beautifier/Minifier Tool Test

Test JavaScript code beautification and minification functionality

4. Regular Expression Tester Tool

Test regular expression matching functionality

5. Image Format Converter Tool

Test image format conversion functionality (requires selecting an image file)

6. Video to GIF Tool

Test video to GIF conversion functionality (requires selecting a video file)

const canvas = document.createElement('canvas'); QRCode.toCanvas(canvas, input, { width: 200, margin: 2 }, function(error) { if (error) { resultDiv.innerHTML = `

QR Code generation failed: ${error.message}

`; } else { resultDiv.innerHTML = `

QR Code generated successfully!

${canvas.outerHTML}

`; } }); } else { resultDiv.innerHTML = '

QR Code library not available

'; } } catch (error) { resultDiv.innerHTML = `

QR Code test failed: ${error.message}

`; } } function testJSONFormatter() { const input = document.getElementById('test-json-input').value; const resultDiv = document.getElementById('test-json-result'); if (!input) { resultDiv.innerHTML = '

Please enter JSON data

'; return; } try { const parsed = JSON.parse(input); const formatted = JSON.stringify(parsed, null, 2); resultDiv.innerHTML = `

JSON formatted successfully!

${formatted}

`; } catch (error) { resultDiv.innerHTML = `

JSON formatting failed: ${error.message}

`; } } .test-section h2 { color: var(--primary-color); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .status-grid { display: grid; gap: 1rem; } .status-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: var(--bg-secondary); border-radius: var(--border-radius); } .status-label { font-weight: 500; } .status-value { font-weight: 600; } .status-value.success { color: var(--success-color); } .status-value.error { color: var(--error-color); } .test-content { display: grid; gap: 1rem; } .test-input { display: flex; flex-direction: column; gap: 0.5rem; } .test-input label { font-weight: 500; } .test-input input, .test-input textarea { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-family: inherit; } .test-input textarea { min-height: 80px; resize: vertical; } .test-output { min-height: 60px; padding: 1rem; background: var(--bg-secondary); border-radius: var(--border-radius); border: 1px solid var(--border-color); } .success { color: var(--success-color); font-weight: 600; } .error { color: var(--error-color); font-weight: 600; } .warning { color: var(--warning-color); font-weight: 600; } .btn { padding: 0.75rem 1.5rem; border: none; border-radius: var(--border-radius); font-weight: 500; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-primary { background: var(--primary-color); color: white; } .btn-primary:hover { background: #1d4ed8; } .btn-warning { background: var(--warning-color); color: white; } .btn-warning:hover { background: #d97706; } .footer { text-align: center; padding: 2rem 0; color: var(--text-secondary); border-top: 1px solid var(--border-color); margin-top: 3rem; } @media (max-width: 768px) { .nav-links { display: none; } .nav-links.active { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-primary); padding: 1rem; box-shadow: var(--shadow-md); } .nav-toggle { display: flex; } .language-switcher { display: none; } }