Multi Tool Hub

/* --- CSS Variables for Theming --- */ :root { --bg-color: #1E1E2F; --text-color: #EAEAEA; --header-bg: #2B2D42; --accent-color: #FFD700; --card-bg: #3A3D5B; --hover-accent: #E6C200; --shadow-color: rgba(255, 215, 0, 0.2); --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; } /* --- General Body & Reset Styles --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-family); line-height: 1.6; transition: background-color 0.3s; } /* --- Header --- */ header { background-color: var(--header-bg); padding: 1.5rem 1rem; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); border-bottom: 2px solid var(--accent-color); } header h1 { font-size: 2.5rem; color: var(--accent-color); text-shadow: 1px 1px 3px rgba(0,0,0,0.4); } /* --- Main Content & Tool Grid --- */ main { padding: 2rem 5%; } .tool-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); } /* --- Tool Card Styling --- */ .tool-card { background-color: var(--card-bg); padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border-left: 4px solid transparent; opacity: 0; transform: translateY(20px); animation: fadeIn 0.5s forwards; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } .tool-card h2 { color: var(--accent-color); margin-bottom: 0.5rem; font-size: 1.4rem; } .tool-card p { flex-grow: 1; margin-bottom: 1rem; font-size: 0.95rem; color: #c0c0c0; } .tool-card:hover { transform: translateY(-8px); background-color: var(--accent-color); box-shadow: 0 8px 25px var(--shadow-color); border-left-color: var(--hover-accent); } .tool-card:hover h2, .tool-card:hover p, .tool-card:hover .open-tool-btn { color: var(--bg-color); } .tool-card:hover .open-tool-btn { background-color: var(--bg-color); color: var(--accent-color); } /* --- Button Styling --- */ .open-tool-btn, .tool-btn { background-color: var(--accent-color); color: var(--bg-color); border: none; padding: 0.75rem 1.5rem; border-radius: 5px; font-weight: bold; font-size: 1rem; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease; align-self: flex-start; } .open-tool-btn:hover, .tool-btn:hover { background-color: var(--hover-accent); } /* --- Modal Styling --- */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; /* Hidden by default */ align-items: center; justify-content: center; z-index: 1000; padding: 1rem; backdrop-filter: blur(5px); } .modal-overlay.active { display: flex; animation: modalFadeIn 0.3s ease; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: var(--header-bg); padding: 1.5rem 2rem; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 800px; max-height: 90vh; display: flex; flex-direction: column; animation: modalScaleUp 0.3s ease; } @keyframes modalScaleUp { from { transform: scale(0.9); } to { transform: scale(1); } } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--card-bg); padding-bottom: 1rem; margin-bottom: 1rem; } #modal-title { color: var(--accent-color); font-size: 1.8rem; } .close-btn { background: none; border: none; color: var(--text-color); font-size: 2.5rem; font-weight: bold; cursor: pointer; transition: color 0.2s; } .close-btn:hover { color: var(--accent-color); } .modal-body { overflow-y: auto; padding-right: 1rem; /* for scrollbar */ } /* --- Tool-Specific UI Elements --- */ .tool-container { display: flex; flex-direction: column; gap: 1rem; } .tool-container input[type="text"], .tool-container input[type="number"], .tool-container input[type="password"], .tool-container input[type="date"], .tool-container textarea, .tool-container select { width: 100%; padding: 0.75rem; background-color: var(--bg-color); border: 1px solid var(--card-bg); border-radius: 5px; color: var(--text-color); font-size: 1rem; } .tool-container textarea { min-height: 150px; resize: vertical; } .tool-container label { font-weight: bold; margin-bottom: 0.25rem; display: block; } .tool-container .options-group { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .tool-container .result-box { background-color: var(--bg-color); padding: 1rem; border-radius: 5px; margin-top: 1rem; white-space: pre-wrap; word-break: break-all; font-family: 'Courier New', Courier, monospace; } .tool-container .color-preview { width: 100px; height: 100px; border: 2px solid var(--text-color); border-radius: 5px; } /* --- Image & Video Tool Styles --- */ #image-preview, #image-cropper-preview, #video-preview { max-width: 100%; margin-top: 1rem; border-radius: 5px; border: 2px dashed var(--card-bg); } .cropper-container { position: relative; max-width: 100%; cursor: crosshair; } #crop-box { position: absolute; border: 2px dashed var(--accent-color); pointer-events: none; /* Allows clicks to go through to the canvas */ } /* --- Responsive Design --- */ @media (max-width: 1024px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } header h1 { font-size: 2rem; } } @media (max-width: 768px) { .tool-grid { grid-template-columns: 1fr; } main { padding: 1.5rem 3%; } .modal-content { padding: 1rem 1.5rem; } #modal-title { font-size: 1.5rem; } } document.addEventListener('DOMContentLoaded', () => { const toolGrid = document.querySelector('.tool-grid'); const modal = document.getElementById('tool-modal'); const modalTitle = document.getElementById('modal-title'); const modalBody = document.getElementById('modal-body'); const closeModalBtn = document.getElementById('modal-close-btn'); // --- TOOL DEFINITIONS --- // Each tool has an id, title, description, and two methods: // getHTML(): Returns the HTML string for the tool's UI. // init(): A function to add event listeners and logic to the tool's UI. const tools = [ // ... (Tool objects will be inserted here) ]; // --- (The following 20 tool definitions go inside the 'tools' array) --- // // 1. Image Converter tools.push({ id: 'image-converter', title: 'Image Converter', description: 'Convert images between JPG, PNG, and WEBP formats.', getHTML: () => `

Convert to:

`, init: () => { const input = document.getElementById('image-converter-input'); const convertBtn = document.getElementById('convert-btn'); const formatSelect = document.getElementById('format-select'); const status = document.getElementById('image-converter-status'); const canvas = document.getElementById('image-converter-canvas'); const ctx = canvas.getContext('2d'); let file = null; input.addEventListener('change', (e) => { file = e.target.files[0]; if (file) { status.textContent = `File selected: ${file.name}`; } }); convertBtn.addEventListener('click', () => { if (!file) { status.textContent = 'Please select an image first.'; return; } status.textContent = 'Processing...'; const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const format = formatSelect.value; const mimeType = `image/${format}`; const dataUrl = canvas.toDataURL(mimeType); const link = document.createElement('a'); link.href = dataUrl; link.download = `${file.name.split('.')[0]}.${format}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); status.textContent = 'Conversion successful! Check your downloads.'; }; img.src = e.target.result; }; reader.readAsDataURL(file); }); } }); // 2. Image Compressor tools.push({ id: 'image-compressor', title: 'Image Compressor', description: 'Reduce the file size of your images with adjustable quality.', getHTML: () => `

Quality (for JPG/WEBP):

`, init: () => { const input = document.getElementById('compressor-input'); const compressBtn = document.getElementById('compress-btn'); const qualitySlider = document.getElementById('quality-slider'); const status = document.getElementById('compressor-status'); const canvas = document.getElementById('compressor-canvas'); const ctx = canvas.getContext('2d'); let file = null; input.addEventListener('change', (e) => { file = e.target.files[0]; if (file) { status.textContent = `Selected: ${file.name} (${(file.size / 1024).toFixed(2)} KB)`; } }); compressBtn.addEventListener('click', () => { if (!file) { status.textContent = 'Please select an image.'; return; } status.textContent = 'Compressing...'; const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); const quality = parseFloat(qualitySlider.value); // Default to jpeg if original is not jpeg/webp const mimeType = file.type === 'image/png' ? 'image/png' : 'image/jpeg'; const dataUrl = canvas.toDataURL(mimeType, quality); const link = document.createElement('a'); link.href = dataUrl; link.download = `compressed-${file.name}`; document.body.appendChild(link); link.click(); document.body.removeChild(link); // Calculate new size const newSize = atob(dataUrl.split(',')[1]).length; status.textContent = `Compression complete! New size: ${(newSize / 1024).toFixed(2)} KB.`; }; img.src = e.target.result; }; reader.readAsDataURL(file); }); } }); // 3. Image Cropper tools.push({ id: 'image-cropper', title: 'Image Cropper', description: 'Upload an image, select an area, and crop it.', getHTML: () => `

Upload an image to start cropping.

`, init: () => { const input = document.getElementById('cropper-input'); const container = document.getElementById('cropper-container'); const canvas = document.getElementById('cropper-canvas'); const ctx = canvas.getContext('2d'); const cropBox = document.getElementById('crop-box'); const cropBtn = document.getElementById('crop-btn'); const status = document.getElementById('cropper-status'); let img, selection = {}, isSelecting = false, originalFile; input.addEventListener('change', e => { if (e.target.files && e.target.files[0]) { originalFile = e.target.files[0]; const reader = new FileReader(); reader.onload = e => { img = new Image(); img.onload = () => { // Scale image to fit container const maxWidth = container.clientWidth; const scale = maxWidth / img.width; canvas.width = maxWidth; canvas.height = img.height * scale; ctx.drawImage(img, 0, 0, canvas.width, canvas.height); status.textContent = "Click and drag on the image to select a crop area."; cropBtn.disabled = true; }; img.src = e.target.result; }; reader.readAsDataURL(originalFile); } }); const getMousePos = (e) => { const rect = canvas.getBoundingClientRect(); return { x: e.clientX - rect.left, y: e.clientY - rect.top }; }; canvas.addEventListener('mousedown', e => { if (!img) return; isSelecting = true; selection.startX = getMousePos(e).x; selection.startY = getMousePos(e).y; cropBox.style.left = `${selection.startX}px`; cropBox.style.top = `${selection.startY}px`; cropBox.style.width = '0px'; cropBox.style.height = '0px'; cropBox.style.display = 'block'; }); canvas.addEventListener('mousemove', e => { if (!isSelecting) return; const pos = getMousePos(e); selection.w = pos.x - selection.startX; selection.h = pos.y - selection.startY; cropBox.style.width = `${Math.abs(selection.w)}px`; cropBox.style.height = `${Math.abs(selection.h)}px`; cropBox.style.left = `${selection.w > 0 ? selection.startX : pos.x}px`; cropBox.style.top = `${selection.h > 0 ? selection.startY : pos.y}px`; }); canvas.addEventListener('mouseup', () => { isSelecting = false; if (Math.abs(selection.w) > 10 && Math.abs(selection.h) > 10) { cropBtn.disabled = false; status.textContent = "Area selected. Click 'Crop & Download'."; } else { cropBox.style.display = 'none'; } }); cropBtn.addEventListener('click', () => { if (!selection.w || !selection.h) return; const scaleX = img.width / canvas.width; const scaleY = img.height / canvas.height; const x = (selection.w > 0 ? selection.startX : selection.startX + selection.w) * scaleX; const y = (selection.h > 0 ? selection.startY : selection.startY + selection.h) * scaleY; const w = Math.abs(selection.w) * scaleX; const h = Math.abs(selection.h) * scaleY; const cropCanvas = document.createElement('canvas'); cropCanvas.width = w; cropCanvas.height = h; const cropCtx = cropCanvas.getContext('2d'); cropCtx.drawImage(img, x, y, w, h, 0, 0, w, h); const link = document.createElement('a'); link.href = cropCanvas.toDataURL(originalFile.type); link.download = `cropped-${originalFile.name}`; link.click(); }); } }); // 4. Video Converter (Recorder) tools.push({ id: 'video-converter', title: 'Video Recorder', description: 'Record video from your camera in MP4 or WebM format. (File-to-file conversion is not possible in-browser)', getHTML: () => `

This tool records video from your webcam or screen.

`, init: () => { const startBtn = document.getElementById('start-record-btn'); const stopBtn = document.getElementById('stop-record-btn'); const formatSelect = document.getElementById('video-format-select'); const videoPreview = document.getElementById('video-preview'); const status = document.getElementById('video-status'); const downloadLink = document.getElementById('download-video-link'); let mediaRecorder; let recordedChunks = []; startBtn.addEventListener('click', async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); videoPreview.srcObject = stream; const options = { mimeType: formatSelect.value }; if (!MediaRecorder.isTypeSupported(options.mimeType)) { status.textContent = `${options.mimeType} is not supported by your browser.`; return; } mediaRecorder = new MediaRecorder(stream, options); mediaRecorder.ondataavailable = e => { if (e.data.size > 0) { recordedChunks.push(e.data); } }; mediaRecorder.onstop = () => { const blob = new Blob(recordedChunks, { type: options.mimeType }); const url = URL.createObjectURL(blob); downloadLink.href = url; const extension = options.mimeType.split('/')[1].split(';')[0]; downloadLink.download = `recording.${extension}`; downloadLink.textContent = `Download Recording (.${extension})`; downloadLink.style.display = 'block'; status.textContent = 'Recording stopped. Ready to download.'; videoPreview.srcObject.getTracks().forEach(track => track.stop()); videoPreview.srcObject = null; }; recordedChunks = []; downloadLink.style.display = 'none'; mediaRecorder.start(); status.textContent = 'Recording...'; startBtn.disabled = true; stopBtn.disabled = false; } catch (err) { status.textContent = `Error: ${err.message}`; console.error("Error accessing media devices.", err); } }); stopBtn.addEventListener('click', () => { if (mediaRecorder && mediaRecorder.state !== 'inactive') { mediaRecorder.stop(); startBtn.disabled = false; stopBtn.disabled = true; } }); } }); // 5. Audio Converter (to WAV) tools.push({ id: 'audio-converter', title: 'Audio Converter (to WAV)', description: 'Convert any audio file into the uncompressed WAV format.', getHTML: () => `

Note: Encoding to MP3 is not supported in browsers.

`, init: () => { const input = document.getElementById('audio-converter-input'); const convertBtn = document.getElementById('audio-convert-btn'); const status = document.getElementById('audio-converter-status'); let file = null; input.addEventListener('change', e => { file = e.target.files[0]; if (file) { status.textContent = `Selected: ${file.name}`; } }); const audioBufferToWav = (buffer) => { // Implementation from: https://github.com/mattdiamond/Recorderjs let numOfChan = buffer.numberOfChannels, len = buffer.length * numOfChan * 2 + 44, abuffer = new ArrayBuffer(len), view = new DataView(abuffer), channels = [], i, sample, offset = 0, pos = 0; // WAV header setUint32(0x46464952); // "RIFF" setUint32(len - 8); // file length - 8 setUint32(0x45564157); // "WAVE" setUint32(0x20746d66); // "fmt " chunk setUint32(16); // length of fmt data setUint16(1); // PCM - integer samples setUint16(numOfChan); // channels setUint32(buffer.sampleRate); // sample rate setUint32(buffer.sampleRate * 2 * numOfChan); // byte rate setUint16(numOfChan * 2); // block align setUint16(16); // bits per sample setUint32(0x61746164); // "data" - chunk setUint32(len - pos - 4); // chunk length function setUint16(data) { view.setUint16(pos, data, true); pos += 2; } function setUint32(data) { view.setUint32(pos, data, true); pos += 4; } for (i = 0; i < buffer.numberOfChannels; i++) channels.push(buffer.getChannelData(i)); while (pos < len) { for (i = 0; i < numOfChan; i++) { sample = Math.max(-1, Math.min(1, channels[i][offset])); sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; view.setInt16(pos, sample, true); pos += 2; } offset++; } return new Blob([view], { type: 'audio/wav' }); }; convertBtn.addEventListener('click', async () => { if (!file) { status.textContent = 'Please select an audio file.'; return; } status.textContent = 'Converting...'; try { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const arrayBuffer = await file.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); const wavBlob = audioBufferToWav(audioBuffer); const url = URL.createObjectURL(wavBlob); const link = document.createElement('a'); link.href = url; link.download = `${file.name.split('.')[0]}.wav`; link.click(); URL.revokeObjectURL(url); status.textContent = 'Conversion to WAV successful!'; } catch (error) { status.textContent = 'Error during conversion. File might be unsupported.'; console.error(error); } }); } }); // 6. Audio Trimmer tools.push({ id: 'audio-trimmer', title: 'Audio Trimmer', description: 'Trim an audio file by specifying the start and end times.', getHTML: () => `

Start (s): End (s):

Upload an audio file to begin.

`, init: () => { const input = document.getElementById('trimmer-input'); const preview = document.getElementById('trimmer-preview'); const startInput = document.getElementById('start-time'); const endInput = document.getElementById('end-time'); const trimBtn = document.getElementById('trim-btn'); const status = document.getElementById('trimmer-status'); let audioContext, originalBuffer, originalFile; // Re-use the WAV encoder from the previous tool const audioBufferToWav = (buffer) => { /* ... (Same function as in Audio Converter) ... */ }; input.addEventListener('change', async e => { originalFile = e.target.files[0]; if (!originalFile) return; status.textContent = 'Loading audio...'; trimBtn.disabled = true; const url = URL.createObjectURL(originalFile); preview.src = url; try { audioContext = new (window.AudioContext || window.webkitAudioContext)(); const arrayBuffer = await originalFile.arrayBuffer(); originalBuffer = await audioContext.decodeAudioData(arrayBuffer); endInput.value = originalBuffer.duration.toFixed(2); status.textContent = `Audio loaded. Duration: ${originalBuffer.duration.toFixed(2)}s.`; trimBtn.disabled = false; } catch (err) { status.textContent = 'Error loading audio file.'; console.error(err); } }); trimBtn.addEventListener('click', () => { if (!originalBuffer) { status.textContent = 'No audio loaded.'; return; } const startTime = parseFloat(startInput.value); const endTime = parseFloat(endInput.value); if (startTime >= endTime || endTime > originalBuffer.duration) { status.textContent = 'Invalid start or end time.'; return; } const sampleRate = originalBuffer.sampleRate; const startOffset = Math.floor(startTime * sampleRate); const endOffset = Math.floor(endTime * sampleRate); const frameCount = endOffset - startOffset; const newBuffer = audioContext.createBuffer( originalBuffer.numberOfChannels, frameCount, sampleRate ); for (let i = 0; i < originalBuffer.numberOfChannels; i++) { const channelData = originalBuffer.getChannelData(i); const newChannelData = newBuffer.getChannelData(i); newChannelData.set(channelData.subarray(startOffset, endOffset)); } const wavBlob = tools.find(t => t.id === 'audio-converter').init.toString().includes('audioBufferToWav') ? eval(`(${tools.find(t => t.id === 'audio-converter').init.toString().match(/const audioBufferToWav = $([^)]*)$ => {([\s\S]*?)};/)[0]})`)(newBuffer) : (() => { status.textContent = "Error: WAV encoder not found."; return null; })(); if (!wavBlob) return; const downloadUrl = URL.createObjectURL(wavBlob); const link = document.createElement('a'); link.href = downloadUrl; link.download = `trimmed-${originalFile.name.split('.')[0]}.wav`; link.click(); URL.revokeObjectURL(downloadUrl); status.textContent = 'Trimmed audio downloaded as WAV.'; }); } }); // 7. Age Calculator tools.push({ id: 'age-calculator', title: 'Age Calculator', description: 'Calculate your age in years, months, and days from your date of birth.', getHTML: () => `

Enter your Date of Birth:

`, init: () => { document.getElementById('calculate-age-btn').addEventListener('click', () => { const dobString = document.getElementById('dob-input').value; const resultBox = document.getElementById('age-result'); if (!dobString) { resultBox.textContent = 'Please enter your date of birth.'; return; } const dob = new Date(dobString); const today = new Date(); if (dob > today) { resultBox.textContent = 'Date of birth cannot be in the future.'; return; } let years = today.getFullYear() - dob.getFullYear(); let months = today.getMonth() - dob.getMonth(); let days = today.getDate() - dob.getDate(); if (days < 0) { months--; const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0); days += prevMonth.getDate(); } if (months < 0) { years--; months += 12; } resultBox.innerHTML = `You are: ${years} years, ${months} months, and ${days} days old.`; }); } }); // 8. EMI Calculator tools.push({ id: 'emi-calculator', title: 'EMI Calculator', description: 'Calculate your Equated Monthly Installment (EMI) for a loan.', getHTML: () => `

Loan Amount ($): Annual Interest Rate (%): Loan Tenure (Years):

`, init: () => { document.getElementById('calculate-emi-btn').addEventListener('click', () => { const principal = parseFloat(document.getElementById('loan-amount').value); const annualRate = parseFloat(document.getElementById('interest-rate').value); const years = parseFloat(document.getElementById('loan-tenure').value); const resultBox = document.getElementById('emi-result'); if (isNaN(principal) || isNaN(annualRate) || isNaN(years) || principal <= 0 || annualRate <= 0 || years <= 0) { resultBox.textContent = 'Please enter valid positive numbers for all fields.'; return; } const monthlyRate = annualRate / 12 / 100; const months = years * 12; const emi = (principal * monthlyRate * Math.pow(1 + monthlyRate, months)) / (Math.pow(1 + monthlyRate, months) - 1); const totalPayment = emi * months; const totalInterest = totalPayment - principal; resultBox.innerHTML = `

Monthly EMI: $${emi.toFixed(2)}

Total Interest Payable: $${totalInterest.toFixed(2)}

Total Payment (Principal + Interest): $${totalPayment.toFixed(2)}

`; }); } }); // 9. SIP Calculator tools.push({ id: 'sip-calculator', title: 'SIP Calculator', description: 'Calculate the future value of your Systematic Investment Plan (SIP).', getHTML: () => `

Monthly Investment ($): Expected Annual Return Rate (%): Investment Duration (Years):

`, init: () => { document.getElementById('calculate-sip-btn').addEventListener('click', () => { const M = parseFloat(document.getElementById('monthly-investment').value); const annualRate = parseFloat(document.getElementById('sip-rate').value); const years = parseFloat(document.getElementById('sip-duration').value); const resultBox = document.getElementById('sip-result'); if (isNaN(M) || isNaN(annualRate) || isNaN(years) || M <= 0 || annualRate <= 0 || years <= 0) { resultBox.textContent = 'Please enter valid positive numbers for all fields.'; return; } const n = years * 12; // number of months const i = annualRate / 12 / 100; // monthly interest rate const futureValue = M * ((Math.pow(1 + i, n) - 1) / i) * (1 + i); const totalInvestment = M * n; const wealthGained = futureValue - totalInvestment; resultBox.innerHTML = `

Total Invested Amount: $${totalInvestment.toFixed(2)}

Estimated Returns: $${wealthGained.toFixed(2)}

Future Value: $${futureValue.toFixed(2)}

`; }); } }); // 10. QR Code Generator tools.push({ id: 'qr-generator', title: 'QR Code Generator', description: 'Generate a downloadable QR code from any text or URL.', getHTML: () => `

Enter Text or URL:

`, init: () => { // Minimal QR Code Generator in pure JS // Based on Nayuki's QR Code generator library (MIT License) // Simplified and inlined for this project const qrcodegen = (() => { // ... (A self-contained, minified QR code generation logic would be pasted here) // For brevity in this response, we'll use an API, but a real implementation would embed the logic. // This is a practical compromise for a single-file script. // A full, from-scratch implementation is extremely complex. // Alternative: Use a known minimal library and paste its code here. // Let's use a public API as a placeholder to demonstrate functionality. // Note: This is an external dependency, but requires no library import. return { generate: (text, container) => { container.innerHTML = ''; if (!text) return; const img = document.createElement('img'); img.src = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(text)}`; img.alt = 'Generated QR Code'; img.style.maxWidth = '100%'; img.style.borderRadius = '5px'; container.appendChild(img); const downloadLink = document.createElement('a'); downloadLink.href = img.src + "&format=png"; // Request PNG for download downloadLink.download = 'qrcode.png'; downloadLink.textContent = 'Download QR Code'; downloadLink.className = 'tool-btn'; downloadLink.style.display = 'inline-block'; downloadLink.style.marginTop = '1rem'; container.appendChild(downloadLink); } }; })(); const generateBtn = document.getElementById('generate-qr-btn'); const qrText = document.getElementById('qr-text'); const qrContainer = document.getElementById('qr-code-container'); generateBtn.addEventListener('click', () => { qrcodegen.generate(qrText.value.trim(), qrContainer); }); } }); // 11. Password Generator tools.push({ id: 'password-generator', title: 'Password Generator', description: 'Create strong, secure, and random passwords.', getHTML: () => `

Password Length: 16

Uppercase (A-Z) Lowercase (a-z) Numbers (0-9) Symbols (!@#$)

Click "Generate"

`, init: () => { const lengthSlider = document.getElementById('pass-length'); const lengthVal = document.getElementById('pass-length-val'); const resultEl = document.getElementById('password-result'); const generateBtn = document.getElementById('generate-pass-btn'); const options = { uppercase: document.getElementById('p-uppercase'), lowercase: document.getElementById('p-lowercase'), numbers: document.getElementById('p-numbers'), symbols: document.getElementById('p-symbols'), }; const charSets = { uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', lowercase: 'abcdefghijklmnopqrstuvwxyz', numbers: '0123456789', symbols: '!@#$%^&*()_+~`|}{[]:;?><,./-=', }; lengthSlider.addEventListener('input', (e) => lengthVal.textContent = e.target.value); generateBtn.addEventListener('click', () => { const length = +lengthSlider.value; let charset = ''; let password = ''; if (options.uppercase.checked) charset += charSets.uppercase; if (options.lowercase.checked) charset += charSets.lowercase; if (options.numbers.checked) charset += charSets.numbers; if (options.symbols.checked) charset += charSets.symbols; if (charset === '') { resultEl.textContent = 'Please select at least one character set.'; return; } for (let i = 0; i < length; i++) { password += charset.charAt(Math.floor(Math.random() * charset.length)); } resultEl.textContent = password; }); resultEl.addEventListener('click', () => { const password = resultEl.textContent; if (password && password !== 'Click "Generate"' && !password.startsWith('Please')) { navigator.clipboard.writeText(password).then(() => { resultEl.title = 'Copied!'; setTimeout(() => resultEl.title = 'Click to copy', 2000); }); } }); } }); // 12. Word Counter tools.push({ id: 'word-counter', title: 'Word Counter', description: 'Count words, characters, and estimate reading time in real-time.', getHTML: () => `

Words: 0

Characters: 0

Spaces: 0

Reading Time: ~0 min

`, init: () => { const textarea = document.getElementById('word-counter-text'); const resultBox = document.getElementById('word-counter-result'); textarea.addEventListener('input', () => { const text = textarea.value; const words = text.trim().split(/\s+/).filter(Boolean); const wordCount = words.length === 1 && words[0] === '' ? 0 : words.length; const charCount = text.length; const spaceCount = (text.match(/ /g) || []).length; const readingTime = Math.ceil(wordCount / 200); // Avg 200 WPM resultBox.innerHTML = `

Words: ${wordCount}

Characters: ${charCount}

Spaces: ${spaceCount}

Reading Time: ~${readingTime} min

`; }); } }); // 13. Base64 Encoder/Decoder tools.push({ id: 'base64-tool', title: 'Base64 Encoder / Decoder', description: 'Encode text to Base64 or decode a Base64 string back to text.', getHTML: () => `

Input:

Output:

`, init: () => { const input = document.getElementById('base64-input'); const output = document.getElementById('base64-output'); const status = document.getElementById('base64-status'); document.getElementById('base64-encode-btn').addEventListener('click', () => { try { output.value = btoa(unescape(encodeURIComponent(input.value))); // Handle UTF-8 status.textContent = 'Encoded successfully.'; } catch (e) { status.textContent = 'Error during encoding.'; } }); document.getElementById('base64-decode-btn').addEventListener('click', () => { try { output.value = decodeURIComponent(escape(atob(input.value))); // Handle UTF-8 status.textContent = 'Decoded successfully.'; } catch (e) { output.value = ''; status.textContent = 'Invalid Base64 string.'; } }); } }); // 14. Color Picker Tool tools.push({ id: 'color-picker', title: 'Color Picker', description: 'Pick a color and get its HEX, RGB, and HSL values.', getHTML: () => `

Select a Color:

`, init: () => { const picker = document.getElementById('color-picker-input'); const preview = document.getElementById('color-picker-preview'); const resultBox = document.getElementById('color-values-result'); function updateColorValues(hex) { preview.style.backgroundColor = hex; const rgb = hexToRgb(hex); const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b); resultBox.innerHTML = `

HEX: ${hex.toUpperCase()}

RGB: rgb(${rgb.r}, ${rgb.g}, ${rgb.b})

HSL: hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)

`; } function hexToRgb(hex) { const r = parseInt(hex.slice(1, 3), 16); const g = parseInt(hex.slice(3, 5), 16); const b = parseInt(hex.slice(5, 7), 16); return { r, g, b }; } function rgbToHsl(r, g, b) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b), min = Math.min(r, g, b); let h, s, l = (max + min) / 2; if (max === min) { h = s = 0; } else { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return { h: (h*360).toFixed(0), s: (s*100).toFixed(0), l: (l*100).toFixed(0) }; } picker.addEventListener('input', (e) => updateColorValues(e.target.value)); updateColorValues(picker.value); } }); // 15. Text to Speech tools.push({ id: 'text-to-speech', title: 'Text to Speech', description: 'Convert text into spoken audio using different voices.', getHTML: () => `

Voice:

`, init: () => { const textInput = document.getElementById('tts-text'); const voiceSelect = document.getElementById('tts-voice'); const speakBtn = document.getElementById('tts-speak-btn'); const stopBtn = document.getElementById('tts-stop-btn'); let voices = []; function populateVoiceList() { voices = speechSynthesis.getVoices(); voiceSelect.innerHTML = ''; voices.forEach(voice => { const option = document.createElement('option'); option.textContent = `${voice.name} (${voice.lang})`; option.setAttribute('data-lang', voice.lang); option.setAttribute('data-name', voice.name); voiceSelect.appendChild(option); }); } populateVoiceList(); if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; } speakBtn.addEventListener('click', () => { if (speechSynthesis.speaking) { speechSynthesis.cancel(); } if (textInput.value !== '') { const utterance = new SpeechSynthesisUtterance(textInput.value); const selectedVoiceName = voiceSelect.selectedOptions[0].getAttribute('data-name'); utterance.voice = voices.find(voice => voice.name === selectedVoiceName); speechSynthesis.speak(utterance); } }); stopBtn.addEventListener('click', () => { speechSynthesis.cancel(); }); } }); // 16. Speech to Text tools.push({ id: 'speech-to-text', title: 'Speech to Text', description: 'Convert your spoken words into text using your microphone.', getHTML: () => `

...

`, init: () => { const startBtn = document.getElementById('stt-start-btn'); const stopBtn = document.getElementById('stt-stop-btn'); const resultBox = document.getElementById('stt-result'); const status = document.getElementById('stt-status'); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) { status.textContent = 'Speech Recognition API not supported in this browser.'; startBtn.disabled = true; return; } const recognition = new SpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.lang = 'en-US'; let finalTranscript = ''; recognition.onstart = () => { status.textContent = 'Listening...'; startBtn.disabled = true; stopBtn.disabled = false; }; recognition.onresult = (event) => { let interimTranscript = ''; for (let i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { finalTranscript += event.results[i][0].transcript; } else { interimTranscript += event.results[i][0].transcript; } } resultBox.innerHTML = finalTranscript + `${interimTranscript}`; }; recognition.onerror = (event) => { status.textContent = `Error occurred in recognition: ${event.error}`; }; recognition.onend = () => { status.textContent = 'Stopped listening.'; startBtn.disabled = false; stopBtn.disabled = true; }; startBtn.addEventListener('click', () => { finalTranscript = ''; resultBox.innerHTML = '...'; recognition.start(); }); stopBtn.addEventListener('click', () => { recognition.stop(); }); } }); // 17. JSON Formatter tools.push({ id: 'json-formatter', title: 'JSON Formatter & Validator', description: 'Paste your JSON data to format it nicely and validate its structure.', getHTML: () => `

`, init: () => { const input = document.getElementById('json-input'); const output = document.getElementById('json-output'); const status = document.getElementById('json-status'); const formatBtn = document.getElementById('format-json-btn'); formatBtn.addEventListener('click', () => { try { const jsonObj = JSON.parse(input.value); output.textContent = JSON.stringify(jsonObj, null, 4); status.textContent = 'JSON is valid and formatted.'; status.style.color = '#7CFC00'; } catch (e) { output.textContent = ''; status.textContent = `Invalid JSON: ${e.message}`; status.style.color = '#FF6347'; } }); } }); // 18. Unit Converter tools.push({ id: 'unit-converter', title: 'Unit Converter', description: 'Convert values between various units like length, weight, and temperature.', getHTML: () => `

Select Category:

`, init: () => { const categorySelect = document.getElementById('unit-category'); const input1 = document.getElementById('unit-input1'); const select1 = document.getElementById('unit-select1'); const input2 = document.getElementById('unit-input2'); const select2 = document.getElementById('unit-select2'); const units = { length: { 'Meter (m)': 1, 'Kilometer (km)': 1000, 'Centimeter (cm)': 0.01, 'Mile (mi)': 1609.34, 'Foot (ft)': 0.3048, 'Inch (in)': 0.0254 }, weight: { 'Kilogram (kg)': 1, 'Gram (g)': 0.001, 'Pound (lb)': 0.453592, 'Ounce (oz)': 0.0283495 }, temperature: { 'Celsius (°C)': 'c', 'Fahrenheit (°F)': 'f', 'Kelvin (K)': 'k' } }; function populateUnits() { const category = categorySelect.value; const unitData = units[category]; select1.innerHTML = ''; select2.innerHTML = ''; for (const unit in unitData) { select1.innerHTML += ``; select2.innerHTML += ``; } select2.selectedIndex = 1; convert(); } function convert() { const category = categorySelect.value; const val1 = parseFloat(input1.value); if (isNaN(val1)) return; if (category === 'temperature') { const from = select1.value; const to = select2.value; let result; if (from === to) { result = val1; } else if (from === 'c' && to === 'f') { result = val1 * 9/5 + 32; } else if (from === 'c' && to === 'k') { result = val1 + 273.15; } else if (from === 'f' && to === 'c') { result = (val1 - 32) * 5/9; } else if (from === 'f' && to === 'k') { result = (val1 - 32) * 5/9 + 273.15; } else if (from === 'k' && to === 'c') { result = val1 - 273.15; } else if (from === 'k' && to === 'f') { result = (val1 - 273.15) * 9/5 + 32; } input2.value = result.toFixed(2); } else { const factor1 = parseFloat(select1.value); const factor2 = parseFloat(select2.value); const baseValue = val1 * factor1; const result = baseValue / factor2; input2.value = result.toFixed(6); } } categorySelect.addEventListener('change', populateUnits); input1.addEventListener('input', convert); select1.addEventListener('change', convert); select2.addEventListener('change', convert); populateUnits(); } }); // 19. BMI Calculator tools.push({ id: 'bmi-calculator', title: 'BMI Calculator', description: 'Calculate your Body Mass Index (BMI) to assess your weight status.', getHTML: () => `

Metric (kg, cm) Imperial (lbs, in)

Weight (kg): Height (cm):

`, init: () => { const radios = document.querySelectorAll('input[name="bmi-units"]'); const metricDiv = document.getElementById('metric-inputs'); const imperialDiv = document.getElementById('imperial-inputs'); const calcBtn = document.getElementById('calculate-bmi-btn'); const resultBox = document.getElementById('bmi-result'); radios.forEach(radio => { radio.addEventListener('change', (e) => { if (e.target.value === 'metric') { metricDiv.style.display = 'block'; imperialDiv.style.display = 'none'; } else { metricDiv.style.display = 'none'; imperialDiv.style.display = 'block'; } }); }); calcBtn.addEventListener('click', () => { let weight, height; const unitSystem = document.querySelector('input[name="bmi-units"]:checked').value; if (unitSystem === 'metric') { weight = parseFloat(document.getElementById('weight-kg').value); height = parseFloat(document.getElementById('height-cm').value) / 100; // to meters } else { weight = parseFloat(document.getElementById('weight-lbs').value) * 0.453592; // to kg height = parseFloat(document.getElementById('height-in').value) * 0.0254; // to meters } if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) { resultBox.textContent = 'Please enter valid weight and height.'; return; } const bmi = weight / (height * height); let category = ''; if (bmi < 18.5) category = 'Underweight'; else if (bmi < 25) category = 'Normal weight'; else if (bmi < 30) category = 'Overweight'; else category = 'Obesity'; resultBox.innerHTML = `Your BMI is ${bmi.toFixed(1)}.
This is considered: ${category}.`; }); } }); // 20. Timer / Stopwatch Tool tools.push({ id: 'timer-stopwatch', title: 'Timer & Stopwatch', description: 'A versatile tool for timing events or counting down.', getHTML: () => `

00:00:00.000

`, init: () => { // Tab logic const tabBtns = document.querySelectorAll('.tab-btn'); const tabPanels = document.querySelectorAll('.tab-panel'); tabBtns.forEach(btn => { btn.addEventListener('click', () => { tabBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); tabPanels.forEach(p => p.style.display = 'none'); document.getElementById(`${btn.dataset.tab}-panel`).style.display = 'block'; }); }); // Stopwatch logic const swTime = document.getElementById('sw-time'); const swStart = document.getElementById('sw-start'); const swStop = document.getElementById('sw-stop'); const swReset = document.getElementById('sw-reset'); let swInterval, swStartTime, swElapsedTime = 0; function formatTime(ms) { const date = new Date(ms); const minutes = date.getUTCMinutes().toString().padStart(2, '0'); const seconds = date.getUTCSeconds().toString().padStart(2, '0'); const milliseconds = date.getUTCMilliseconds().toString().padStart(3, '0'); return `${minutes}:${seconds}.${milliseconds}`; } swStart.addEventListener('click', () => { if (!swInterval) { swStartTime = Date.now() - swElapsedTime; swInterval = setInterval(() => { swElapsedTime = Date.now() - swStartTime; swTime.textContent = formatTime(swElapsedTime); }, 10); } }); swStop.addEventListener('click', () => clearInterval(swInterval)); swReset.addEventListener('click', () => { clearInterval(swInterval); swInterval = null; swElapsedTime = 0; swTime.textContent = '00:00:00.000'; }); // Timer logic const tDisplay = document.getElementById('t-display'); const tStart = document.getElementById('t-start'); const tStop = document.getElementById('t-stop'); const tReset = document.getElementById('t-reset'); const tInputs = [document.getElementById('t-hours'), document.getElementById('t-minutes'), document.getElementById('t-seconds')]; let tInterval, tTotalSeconds; function updateTimerDisplay() { const hours = Math.floor(tTotalSeconds / 3600).toString().padStart(2, '0'); const minutes = Math.floor((tTotalSeconds % 3600) / 60).toString().padStart(2, '0'); const seconds = (tTotalSeconds % 60).toString().padStart(2, '0'); tDisplay.textContent = `${hours}:${minutes}:${seconds}`; } function setTimer() { tTotalSeconds = (parseInt(tInputs[0].value) || 0) * 3600 + (parseInt(tInputs[1].value) || 0) * 60 + (parseInt(tInputs[2].value) || 0); updateTimerDisplay(); } tStart.addEventListener('click', () => { if (!tInterval) { setTimer(); if (tTotalSeconds <= 0) return; tInterval = setInterval(() => { tTotalSeconds--; updateTimerDisplay(); if (tTotalSeconds <= 0) { clearInterval(tInterval); tInterval = null; alert('Timer finished!'); // Optional: play a sound } }, 1000); } }); tStop.addEventListener('click', () => clearInterval(tInterval)); tReset.addEventListener('click', () => { clearInterval(tInterval); tInterval = null; setTimer(); }); tInputs.forEach(input => input.addEventListener('change', setTimer)); setTimer(); // initial setup } }); // --- DYNAMICALLY POPULATE THE TOOL GRID --- function populateToolGrid() { toolGrid.innerHTML = ''; tools.forEach((tool, index) => { const card = document.createElement('div'); card.className = 'tool-card'; card.dataset.toolId = tool.id; card.style.animationDelay = `${index * 50}ms`; card.innerHTML = `

${tool.title}

${tool.description}

`; toolGrid.appendChild(card); }); } // --- MODAL HANDLING --- function openModal(toolId) { const tool = tools.find(t => t.id === toolId); if (!tool) return; modalTitle.textContent = tool.title; modalBody.innerHTML = tool.getHTML(); modal.classList.add('active'); document.body.style.overflow = 'hidden'; // Prevent background scrolling // Initialize the tool's specific JavaScript tool.init(); } function closeModal() { modal.classList.remove('active'); document.body.style.overflow = 'auto'; modalBody.innerHTML = ''; // Clean up } // --- EVENT LISTENERS --- toolGrid.addEventListener('click', (e) => { const card = e.target.closest('.tool-card'); if (card) { openModal(card.dataset.toolId); } }); closeModalBtn.addEventListener('click', closeModal); // Close modal if user clicks on the overlay modal.addEventListener('click', (e) => { if (e.target === modal) { closeModal(); } }); // Close modal with Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('active')) { closeModal(); } }); // --- INITIALIZATION --- populateToolGrid(); });

Tool Title

${tool.title}