${tool.title}
${tool.description}
`; toolGrid.appendChild(card); }); }; const renderVCardPage = (hash) => { hubContainer.style.display = 'none'; vcardWrapper.style.display = 'block'; try { const dataStr = decodeURIComponent(atob(hash.substring(7))); const data = JSON.parse(dataStr); let socialLinksHTML = data.socials.map(s => { if(!s.url) return ''; let iconClass = `fab fa-${s.type.toLowerCase().replace(/\s/g, '-')}`; if (s.type === 'Other') iconClass = 'fas fa-link'; return ``; }).join(''); vcardWrapper.innerHTML = `${data.name || 'Your Name'}
${data.tagline || 'Your Tagline'}
${data.bio || ''}
${data.loc ? `${data.loc}
`: ''}Could not load vCard data. It may be corrupted.
`; document.getElementById('backToHubBtn').onclick = () => { window.location.hash = ''; renderHub(); }; } }; // --- MODAL MANAGEMENT --- const openModal = (tool) => { modalTitle.textContent = tool.title; modalBody.innerHTML = getToolHTML(tool.id); activateToolScript(tool.id); modal.style.display = 'block'; }; const closeModal = () => { activeToolCleanup(); activeToolCleanup = () => {}; modal.style.display = 'none'; modalBody.innerHTML = ''; // Clear content to stop any processes }; toolGrid.addEventListener('click', e => { if (e.target.classList.contains('tool-button')) { openModal(tools.find(t => t.id === e.target.dataset.toolId)); } }); closeButton.onclick = closeModal; window.onclick = e => { if (e.target == modal) closeModal(); }; // --- TOOL HTML & SCRIPT LOGIC --- function getToolHTML(id) { const fileInputHTML = (accept) => ``; const outputHTML = ``; const actionButton = (text) => ``; switch (id) { case 'imageConverter': return `${fileInputHTML('image/*')}${actionButton('Convert & Download')}${outputHTML}`; case 'imageCompressor': return `${fileInputHTML('image/*')}0.7
${actionButton('Compress & Download')}${outputHTML}`;
case 'imageCropper': return `${fileInputHTML('image/*')}${outputHTML}`;
case 'videoToMp3': return `${fileInputHTML('video/*')}${actionButton('Convert to MP3')}${outputHTML}`;
case 'audioTrimmer': return `${fileInputHTML('audio/*')}${actionButton('Trim & Download')}${outputHTML}`;
case 'ageCalculator': return `${actionButton('Calculate Age')}${outputHTML}`;
case 'emiCalculator': return `${actionButton('Calculate EMI')}${outputHTML}`;
case 'sipCalculator': return `${actionButton('Calculate Future Value')}${outputHTML}`;
case 'passwordGenerator': return `${actionButton('Generate Password')}${outputHTML}`;
case 'wordCounter': return `${outputHTML}`;
case 'base64EncoderDecoder': return `${outputHTML}`;
case 'colorPicker': return ``;
case 'textToSpeech': return `${outputHTML}`;
case 'speechToText': return `${actionButton('Start Listening')}${outputHTML}`;
case 'jsonFormatter': return `${actionButton('Format JSON')}${outputHTML}`;
case 'unitConverter': return `to
${outputHTML}`;
case 'bmiCalculator': return `${actionButton('Calculate BMI')}${outputHTML}`;
case 'timerStopwatch': return `00:00:00.00
`;
case 'vcardGenerator': return `${outputHTML}`;
default: return `Error: Tool not found.
`; } } function activateToolScript(id) { // This function sets up all the event listeners and logic for the currently opened tool const btn = modalBody.querySelector('#actionBtn'); const fileInput = modalBody.querySelector('#fileInput'); switch (id) { case 'imageConverter': case 'imageCompressor': if(modalBody.querySelector('#quality')) modalBody.querySelector('#quality').oninput = e => e.target.nextElementSibling.textContent = e.target.value; btn.onclick = () => { if (!fileInput.files[0]) return setOutput('Please select a file.', true); setOutput('Processing...'); const reader = new FileReader(); reader.onload = e => { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; canvas.getContext('2d').drawImage(img, 0, 0); const format = modalBody.querySelector('#formatSelect')?.value || 'image/jpeg'; const quality = parseFloat(modalBody.querySelector('#quality')?.value || 0.9); const url = canvas.toDataURL(format, quality); downloadFile(url, `converted.${format.split('/')[1]}`); setOutput('Download started!'); }; img.src = e.target.result; }; reader.readAsDataURL(fileInput.files[0]); }; break; case 'imageCropper': let cropImage, cropCanvas, cropCtx, cropRect = {}, isDragging = false; const previewContainer = modalBody.querySelector('#imageCropperPreview'); fileInput.onchange = e => { const reader = new FileReader(); reader.onload = res => { cropImage = new Image(); cropImage.onload = () => { previewContainer.innerHTML = ''; cropCanvas = document.createElement('canvas'); cropCtx = cropCanvas.getContext('2d'); const aspect = cropImage.width / cropImage.height; cropCanvas.width = Math.min(cropImage.width, 500); cropCanvas.height = cropCanvas.width / aspect; cropCtx.drawImage(cropImage, 0, 0, cropCanvas.width, cropCanvas.height); previewContainer.appendChild(cropCanvas); btn.style.display = 'block'; cropCanvas.onmousedown = (ev) => { isDragging = true; cropRect.startX = ev.offsetX; cropRect.startY = ev.offsetY; }; cropCanvas.onmousemove = (ev) => { if (!isDragging) return; const x = cropRect.startX, y = cropRect.startY, w = ev.offsetX - x, h = ev.offsetY - y; cropCtx.clearRect(0, 0, cropCanvas.width, cropCanvas.height); cropCtx.drawImage(cropImage, 0, 0, cropCanvas.width, cropCanvas.height); cropCtx.fillStyle = 'rgba(0, 0, 0, 0.5)'; cropCtx.fillRect(0, 0, cropCanvas.width, cropCanvas.height); cropCtx.clearRect(x, y, w, h); }; cropCanvas.onmouseup = (ev) => { isDragging = false; cropRect.endX = ev.offsetX; cropRect.endY = ev.offsetY; }; }; cropImage.src = res.target.result; }; reader.readAsDataURL(e.target.files[0]); }; btn.onclick = () => { if (!cropImage || !cropRect.startX) return; const scaleX = cropImage.width / cropCanvas.width, scaleY = cropImage.height / cropCanvas.height; const x = Math.min(cropRect.startX, cropRect.endX) * scaleX, y = Math.min(cropRect.startY, cropRect.endY) * scaleY; const w = Math.abs(cropRect.endX - cropRect.startX) * scaleX, h = Math.abs(cropRect.endY - cropRect.startY) * scaleY; const finalCanvas = document.createElement('canvas'); finalCanvas.width = w; finalCanvas.height = h; finalCanvas.getContext('2d').drawImage(cropImage, x, y, w, h, 0, 0, w, h); downloadFile(finalCanvas.toDataURL('image/png'), 'cropped-image.png'); }; break; case 'audioTrimmer': btn.onclick = async () => { if (!fileInput.files[0]) return setOutput('Please select a file.', true); const start = parseFloat(modalBody.querySelector('#start').value); const end = parseFloat(modalBody.querySelector('#end').value); if (isNaN(start) || isNaN(end) || start >= end) return setOutput('Invalid start/end times.', true); setOutput('Processing audio...'); btn.disabled = true; try { const audioCtx = new AudioContext(); const buffer = await audioCtx.decodeAudioData(await fileInput.files[0].arrayBuffer()); const startOffset = Math.floor(start * buffer.sampleRate); const endOffset = Math.floor(end * buffer.sampleRate); const frameCount = endOffset - startOffset; if (frameCount <= 0) throw new Error("End time must be after start time."); const newBuffer = audioCtx.createBuffer(buffer.numberOfChannels, frameCount, buffer.sampleRate); for(let i=0; i < buffer.numberOfChannels; i++) { const channelData = buffer.getChannelData(i); newBuffer.copyToChannel(channelData.subarray(startOffset, endOffset), i); } // Convert buffer to WAV for download const wavBlob = bufferToWav(newBuffer); downloadFile(URL.createObjectURL(wavBlob), 'trimmed.wav'); setOutput('Trimmed audio downloaded.'); } catch(e) { setOutput(`Error: ${e.message}`, true); } finally { btn.disabled = false; } }; break; case 'ageCalculator': btn.onclick = () => { const date = new Date(modalBody.querySelector('#date').value); if(isNaN(date)) return setOutput('Invalid date.', true); let years = new Date().getFullYear() - date.getFullYear(); let months = new Date().getMonth() - date.getMonth(); let days = new Date().getDate() - date.getDate(); if(days < 0) { months--; days += new Date(new Date().getFullYear(), new Date().getMonth(), 0).getDate(); } if(months < 0) { years--; months += 12; } setOutput(`${years} years, ${months} months, and ${days} days old.`); }; break; case 'emiCalculator': btn.onclick = () => { const p = parseFloat(modalBody.querySelector('#p').value), r = parseFloat(modalBody.querySelector('#r').value) / 12 / 100, n = parseFloat(modalBody.querySelector('#n').value) * 12; if(!p || !r || !n) return setOutput('Please fill all fields.', true); const emi = p * r * (Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1); setOutput(`Monthly EMI: ${emi.toFixed(2)}`); }; break; case 'sipCalculator': btn.onclick = () => { const p = parseFloat(modalBody.querySelector('#p').value), i = parseFloat(modalBody.querySelector('#r').value) / 12 / 100, n = parseFloat(modalBody.querySelector('#n').value) * 12; if(!p || !i || !n) return setOutput('Please fill all fields.', true); const f = p * ((Math.pow(1 + i, n) - 1) / i) * (1 + i); setOutput(`Future Value: ${f.toFixed(2)}`); }; break; case 'wordCounter': modalBody.querySelector('#text').oninput = e => { const words = e.target.value.trim().split(/\s+/).filter(Boolean); setOutput(`Words: ${words.length} | Characters: ${e.target.value.length}`); }; break; case 'base64EncoderDecoder': modalBody.querySelector('#encBtn').onclick = () => setOutput(btoa(modalBody.querySelector('#text').value)); modalBody.querySelector('#decBtn').onclick = () => { try { setOutput(atob(modalBody.querySelector('#text').value)); } catch(e){ setOutput('Invalid Base64 string.', true); } }; break; case 'colorPicker': const colorInput = modalBody.querySelector('#color'); const updateColors = () => { const hex = colorInput.value.toUpperCase(); const r = parseInt(hex.slice(1,3), 16), g = parseInt(hex.slice(3,5), 16), b = parseInt(hex.slice(5,7), 16); setOutput(`HEX: ${hex}RGB: rgb(${r}, ${g}, ${b})`); }; colorInput.oninput = updateColors; updateColors(); break; case 'jsonFormatter': btn.onclick = () => { try { setOutput(`
${JSON.stringify(JSON.parse(modalBody.querySelector('#json').value), null, 2)}`);
} catch(e) { setOutput(e.message, true); }
};
break;
case 'unitConverter':
const units = {
Length: {'Meter (m)': 1, 'Kilometer (km)': 1000, 'Mile (mi)': 1609.34, 'Foot (ft)': 0.3048, 'Inch (in)': 0.0254},
Weight: {'Gram (g)': 1, 'Kilogram (kg)': 1000, 'Pound (lb)': 453.592, 'Ounce (oz)': 28.3495},
Temp: {'Celsius (°C)': 1, 'Fahrenheit (°F)': 1, 'Kelvin (K)': 1}
};
const cat = modalBody.querySelector('#cat'), from = modalBody.querySelector('#from'), to = modalBody.querySelector('#to'), val = modalBody.querySelector('#val');
const populate = () => {
from.innerHTML = to.innerHTML = '';
Object.keys(units[cat.value]).forEach(u => { from.add(new Option(u,u)); to.add(new Option(u,u)); });
to.selectedIndex = 1;
convert();
};
const convert = () => {
if(!val.value) return setOutput('', true);
const v = parseFloat(val.value);
let res;
if(cat.value === 'Temp') {
let celsius;
if(from.value.includes('Celsius')) celsius = v;
else if(from.value.includes('Fahrenheit')) celsius = (v - 32) * 5/9;
else celsius = v - 273.15; // Kelvin
if(to.value.includes('Celsius')) res = celsius;
else if(to.value.includes('Fahrenheit')) res = (celsius * 9/5) + 32;
else res = celsius + 273.15;
} else {
res = v * units[cat.value][from.value] / units[cat.value][to.value];
}
setOutput(`${res.toFixed(4)} ${to.value}`);
};
cat.onchange = populate;
from.onchange = to.onchange = val.oninput = convert;
populate();
break;
case 'bmiCalculator':
btn.onclick = () => {
const h = parseFloat(modalBody.querySelector('#h').value), w = parseFloat(modalBody.querySelector('#w').value);
if(!h || !w) return setOutput('Fill all fields.', true);
const bmi = w / ((h / 100)**2);
let cat = bmi < 18.5 ? 'Underweight' : bmi < 24.9 ? 'Normal' : bmi < 29.9 ? 'Overweight' : 'Obese';
setOutput(`BMI: ${bmi.toFixed(2)} (${cat})`);
};
break;
// More complex tools are defined in the main script body...
default:
if (window.activateTool) {
window.activateTool(id, modalBody, setOutput, downloadFile);
}
break;
}
}
// This is a special function to register the logic for tools that have already been defined in the main script body
window.activateTool = (id, modalBody, setOutput, downloadFile) => {
const btn = modalBody.querySelector('#actionBtn');
switch(id) {
case 'videoToMp3':
btn.onclick = async () => {
const file = modalBody.querySelector('#fileInput').files[0];
if (!file) return setOutput('Please select a video file.', true);
btn.disabled = true;
setOutput('Decoding audio... please wait.');
try {
const audioCtx = new AudioContext();
const audioBuffer = await audioCtx.decodeAudioData(await file.arrayBuffer());
const mp3encoder = new lamejs.MP3Encoder(audioBuffer.numberOfChannels, audioBuffer.sampleRate, 128);
const samplesLeft = audioBuffer.getChannelData(0);
const samplesRight = audioBuffer.numberOfChannels > 1 ? audioBuffer.getChannelData(1) : samplesLeft;
setOutput('Encoding to MP3... this can be slow.');
// Use setTimeout to avoid blocking the UI thread during encoding
setTimeout(() => {
const mp3Data = [];
const sampleBlockSize = 1152;
for (let i = 0; i < samplesLeft.length; i += sampleBlockSize) {
const leftChunk = samplesLeft.subarray(i, i + sampleBlockSize);
const rightChunk = samplesRight.subarray(i, i + sampleBlockSize);
const mp3buf = mp3encoder.encodeBuffer(leftChunk, rightChunk);
if (mp3buf.length > 0) mp3Data.push(mp3buf);
}
const mp3buf = mp3encoder.flush();
if (mp3buf.length > 0) mp3Data.push(mp3buf);
const blob = new Blob(mp3Data, { type: 'audio/mp3' });
downloadFile(URL.createObjectURL(blob), `${file.name.split('.')[0]}.mp3`);
setOutput('MP3 created and download started!');
btn.disabled = false;
}, 100);
} catch (e) {
setOutput('Could not process video. It may be corrupt or use an unsupported audio codec.', true);
btn.disabled = false;
}
};
break;
case 'textToSpeech':
const txt = modalBody.querySelector('#text');
const voiceSelect = modalBody.querySelector('#voiceSelect');
const speakBtn = modalBody.querySelector('#speakBtn');
const dlBtn = modalBody.querySelector('#dlBtn');
let voices = [];
function populateVoiceList() {
voices = speechSynthesis.getVoices();
voiceSelect.innerHTML = voices
.map((voice, i) => ``)
.join('');
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
activeToolCleanup = () => window.speechSynthesis.cancel();
speakBtn.onclick = () => {
if (txt.value && !speechSynthesis.speaking) {
const utterance = new SpeechSynthesisUtterance(txt.value);
utterance.voice = voices[voiceSelect.value];
window.speechSynthesis.speak(utterance);
}
};
dlBtn.onclick = () => {
if (!txt.value || speechSynthesis.speaking) return setOutput('Enter text and ensure nothing is speaking.', true);
setOutput('Recording speech for download...');
dlBtn.disabled = true;
const utterance = new SpeechSynthesisUtterance(txt.value);
utterance.voice = voices[voiceSelect.value];
const audioCtx = new AudioContext();
const dest = audioCtx.createMediaStreamDestination();
const recorder = new MediaRecorder(dest.stream, { mimeType: 'audio/webm' });
const chunks = [];
const source = audioCtx.createConstantSource();
source.connect(dest);
source.start();
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'audio/webm' });
downloadFile(URL.createObjectURL(blob), 'speech.webm');
setOutput('Download ready!');
dlBtn.disabled = false;
audioCtx.close().catch(()=>{});
};
utterance.onend = () => { setTimeout(() => { try { recorder.stop(); } catch(e){} }, 500); };
recorder.start();
speechSynthesis.speak(utterance);
};
break;
case 'timerStopwatch':
let interval, elapsed = 0;
const display = modalBody.querySelector('.output');
activeToolCleanup = () => clearInterval(interval);
const format = ms => {
const h = String(Math.floor(ms/36e5)).padStart(2,'0'), m = String(Math.floor(ms%36e5/6e4)).padStart(2,'0'),
s = String(Math.floor(ms%6e4/1e3)).padStart(2,'0'), cs = String(Math.floor(ms%1e3/10)).padStart(2,'0');
return `${h}:${m}:${s}.${cs}`;
};
modalBody.querySelector('#startBtn').onclick = () => { if(!interval) { const start = Date.now() - elapsed; interval = setInterval(() => { elapsed = Date.now() - start; display.textContent = format(elapsed); }, 10); }};
modalBody.querySelector('#stopBtn').onclick = () => { clearInterval(interval); interval = null; };
modalBody.querySelector('#resetBtn').onclick = () => { clearInterval(interval); interval = null; elapsed = 0; display.textContent = format(0); };
break;
case 'speechToText':
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SR) return (btn.disabled = true, setOutput('Speech Recognition not supported here.', true));
const recog = new SR();
recog.interimResults = true;
recog.onresult = e => { modalBody.querySelector('.output').textContent = Array.from(e.results).map(r => r[0].transcript).join(''); };
recog.onend = () => btn.textContent = 'Start Listening';
btn.onclick = () => { if (btn.textContent.includes('Start')) { recog.start(); btn.textContent = 'Stop Listening'; } else { recog.stop(); }};
activeToolCleanup = () => recog.stop();
break;
case 'passwordGenerator':
const genPass = () => {
const len=modalBody.querySelector('#len').value, num=modalBody.querySelector('#num').checked, sym=modalBody.querySelector('#sym').checked;
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" + (num ? "0123456789" : "") + (sym ? "!@#$%^&*()_+-=[]{}|;:,.<>?" : "");
modalBody.querySelector('.output').textContent = Array(parseInt(len)).fill(chars).map(x => x[Math.floor(Math.random()*x.length)]).join('');
};
modalBody.querySelector('#actionBtn').onclick = genPass;
genPass();
break;
case 'vcardGenerator':
const socialsContainer = modalBody.querySelector('#vcard-socials-container');
let photoBase64 = '';
const addSocialField = () => {
const div = document.createElement('div');
div.className = 'inline-group';
div.innerHTML = `
`;
socialsContainer.appendChild(div);
div.querySelector('.remove-social').onclick = () => {div.remove(); updateQrCode();};
};
modalBody.querySelector('#addSocialBtn').onclick = addSocialField;
modalBody.querySelector('#vcard-photo').onchange = (e) => {
const reader = new FileReader();
reader.onload = () => { photoBase64 = reader.result; updateQrCode(); };
reader.readAsDataURL(e.target.files[0]);
};
const getVCardData = () => {
const socials = Array.from(socialsContainer.querySelectorAll('.inline-group')).map(div => ({
type: div.querySelector('.vcard-social-type').value,
url: div.querySelector('.vcard-social-url').value,
}));
return {
name: document.getElementById('vcard-name').value,
tagline: document.getElementById('vcard-tagline').value,
bio: document.getElementById('vcard-bio').value,
photo: photoBase64,
phone: document.getElementById('vcard-phone').value,
wa: document.getElementById('vcard-wa').value.replace(/\D/g, ''),
email: document.getElementById('vcard-email').value,
web: document.getElementById('vcard-web').value,
loc: document.getElementById('vcard-loc').value,
color: document.getElementById('vcard-color').value,
socials
};
};
const updateQrCode = () => {
const data = getVCardData();
const jsonStr = JSON.stringify(data);
const base64Str = btoa(encodeURIComponent(jsonStr).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode('0x' + p1)));
const url = `${window.location.origin}${window.location.pathname}#vcard=${base64Str}`;
try {
const qr = qrcodegen.QrCode.encodeText(url, qrcodegen.QrCode.Ecc.MEDIUM);
const svg = qr.toSvgString(4);
setOutput(svg);
} catch(e) {
setOutput('Data too long for QR code. Reduce bio or links.', true);
}
};
modalBody.querySelectorAll('input, textarea, select').forEach(el => el.oninput = updateQrCode);
socialsContainer.addEventListener('change', updateQrCode, true);
modalBody.querySelector('#vcard-previewBtn').onclick = () => {
const data = getVCardData();
const jsonStr = JSON.stringify(data);
const base64Str = btoa(encodeURIComponent(jsonStr).replace(/%([0-9A-F]{2})/g, (match, p1) => String.fromCharCode('0x' + p1)));
window.open(`${window.location.origin}${window.location.pathname}#vcard=${base64Str}`, '_blank');
};
modalBody.querySelector('#vcard-downloadVcfBtn').onclick = () => {
const data = getVCardData();
let vcfContent = `BEGIN:VCARD\nVERSION:3.0\n`;
vcfContent += `FN:${data.name}\n`;
vcfContent += `TITLE:${data.tagline}\n`;
vcfContent += `NOTE:${data.bio.replace(/\n/g, '\\n')}\n`;
if (data.phone) vcfContent += `TEL;TYPE=CELL:${data.phone}\n`;
if (data.email) vcfContent += `EMAIL:${data.email}\n`;
if (data.web) vcfContent += `URL:${data.web}\n`;
if (data.loc) vcfContent += `ADR;TYPE=HOME:;;${data.loc};;;\n`;
if (data.photo) vcfContent += `PHOTO;ENCODING=b;TYPE=JPEG:${data.photo.split(',')[1]}\n`;
vcfContent += `END:VCARD`;
const blob = new Blob([vcfContent], { type: 'text/vcard' });
downloadFile(URL.createObjectURL(blob), `${data.name.replace(/\s/g, '_') || 'contact'}.vcf`);
};
addSocialField();
updateQrCode();
break;
}
}
// Helper for audio trimming
function bufferToWav(buffer) {
const numChannels = buffer.numberOfChannels, len = buffer.length * numChannels * 2 + 44,
wavBuffer = new ArrayBuffer(len), view = new DataView(wavBuffer);
let pos = 0, writeString = s => { for (let i = 0; i < s.length; i++) view.setUint8(pos++, s.charCodeAt(i)) };
writeString('RIFF'); view.setUint32(pos, 36 + buffer.length * 2, true); pos += 4; writeString('WAVE');
writeString('fmt '); view.setUint32(pos, 16, true); pos += 4;
view.setUint16(pos, 1, true); pos += 2; view.setUint16(pos, numChannels, true); pos += 2;
view.setUint32(pos, buffer.sampleRate, true); pos += 4; view.setUint32(pos, buffer.sampleRate * 2 * numChannels, true); pos += 4;
view.setUint16(pos, numChannels * 2, true); pos += 2; view.setUint16(pos, 16, true); pos += 2;
writeString('data'); view.setUint32(pos, buffer.length * numChannels * 2, true); pos += 4;
const channels = Array.from({length: numChannels}, (_, i) => buffer.getChannelData(i));
for(let i=0; i