`;
resultsSection.innerHTML += groupHTML;
});
}
function copyHashtag(hashtag) {
navigator.clipboard.writeText(`#${hashtag}`);
const notification = document.getElementById('copyNotification');
notification.style.display = 'block';
setTimeout(() => notification.style.display = 'none', 2000);
}
`).join('');
}
// Open Modal
function openTool(id) {
const tool = tools.find(t => t.id === id);
if (!tool) return;
modalTitle.innerText = tool.title;
modalBody.innerHTML = ''; // Clear previous
modal.classList.add('active');
// Initialize specific tool logic
initToolLogic(id);
}
// Close Modal
function closeModal() {
modal.classList.remove('active');
// Stop any ongoing processes like speech or timers
window.speechSynthesis.cancel();
if(window.recognition) window.recognition.stop();
if(window.timerInterval) clearInterval(window.timerInterval);
}
// Close on outside click
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});
/* =========================================
TOOL LOGIC ROUTER
========================================= */
function initToolLogic(id) {
switch(id) {
case 'img-converter': renderImageConverter(); break;
case 'img-compressor': renderImageCompressor(); break;
case 'age-calc': renderAgeCalc(); break;
case 'emi-calc': renderEmiCalc(); break;
case 'qr-gen': renderQRGen(); break;
case 'pass-gen': renderPassGen(); break;
case 'word-count': renderWordCount(); break;
case 'base64': renderBase64(); break;
case 'color-pick': renderColorPicker(); break;
case 'tts': renderTTS(); break;
case 'stt': renderSTT(); break;
case 'json-fmt': renderJSONFmt(); break;
case 'bmi-calc': renderBMI(); break;
case 'stopwatch': renderStopwatch(); break;
case 'img-to-pdf': renderImgToPdf(); break;
case 'sip-calc': renderSIP(); break;
case 'unit-conv': renderUnitConv(); break;
case 'watermark': renderWatermark(); break;
case 'doc-sim': renderDocSim(); break;
case 'video-conv': renderVideoConv(); break;
default: modalBody.innerHTML = '
Tool interface loading...
';
}
}
/* =========================================
INDIVIDUAL TOOL IMPLEMENTATIONS
========================================= */
// 1. Image Converter
function renderImageConverter() {
modalBody.innerHTML = `
PNG JPG WEBP Convert & Download
`;
}
window.convertImage = () => {
const file = document.getElementById('fileIn').files[0];
const format = document.getElementById('formatSel').value;
if(!file) return alert('Please select an image');
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const cvs = document.getElementById('cvs');
cvs.width = img.width;
cvs.height = img.height;
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0);
const data = cvs.toDataURL(format);
const link = document.createElement('a');
link.download = `converted.${format.split('/')[1]}`;
link.href = data;
link.click();
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
// 2. Image Compressor
function renderImageCompressor() {
modalBody.innerHTML = `
Quality (0.1 - 1.0)
Compress
`;
}
window.compressImage = () => {
const file = document.getElementById('fileIn').files[0];
const q = parseFloat(document.getElementById('quality').value);
if(!file) return alert('Select File');
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const cvs = document.createElement('canvas');
cvs.width = img.width;
cvs.height = img.height;
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0);
const data = cvs.toDataURL('image/jpeg', q);
const link = document.createElement('a');
link.href = data;
link.download = "compressed.jpg";
link.innerText = "Download Compressed Image";
const div = document.getElementById('res');
div.innerHTML = '';
div.classList.add('visible');
div.appendChild(link);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
// 7. Age Calculator
function renderAgeCalc() {
modalBody.innerHTML = `
Date of Birth
Calculate
`;
}
window.calcAge = () => {
const dob = new Date(document.getElementById('dob').value);
const now = new Date();
if(isNaN(dob)) return;
let years = now.getFullYear() - dob.getFullYear();
let months = now.getMonth() - dob.getMonth();
let days = now.getDate() - dob.getDate();
if (months < 0 || (months === 0 && days < 0)) { years--; months += 12; }
if (days < 0) {
const prevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
days += prevMonth.getDate();
months--;
}
document.getElementById('res').innerText = `Age: ${years} Years, ${months} Months, ${days} Days`;
document.getElementById('res').classList.add('visible');
};
// 8. EMI Calculator
function renderEmiCalc() {
modalBody.innerHTML = `
Calculate
`;
}
window.calcEMI = () => {
const p = parseFloat(document.getElementById('p').value);
const r = parseFloat(document.getElementById('r').value) / 1200;
const n = parseFloat(document.getElementById('n').value);
const emi = (p * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
document.getElementById('res').innerHTML = `Monthly EMI:
${emi.toFixed(2)} Total Amount: ${(emi*n).toFixed(2)}`;
document.getElementById('res').classList.add('visible');
};
// 10. QR Generator
function renderQRGen() {
modalBody.innerHTML = `
Generate
`;
}
window.genQR = () => {
const txt = document.getElementById('qrText').value;
if(!txt) return;
// Using Google Charts API for vanilla JS QR generation
document.getElementById('res').innerHTML = `
`;
document.getElementById('res').classList.add('visible');
};
// 11. Password Generator
function renderPassGen() {
modalBody.innerHTML = `
Length: 12
Generate
`;
}
window.genPass = () => {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
const len = document.getElementById('len').value;
let pass = "";
for(let i=0; i
Words: 0 | Chars: 0
`;
}
window.countWords = () => {
const txt = document.getElementById('txtIn').value;
const words = txt.trim().split(/\s+/).filter(a=>a).length;
document.getElementById('res').innerText = `Words: ${words} | Chars: ${txt.length}`;
};
// 15. TTS
function renderTTS() {
modalBody.innerHTML = `
Speak
`;
}
window.speak = () => {
const txt = document.getElementById('ttsTxt').value;
const u = new SpeechSynthesisUtterance(txt);
window.speechSynthesis.speak(u);
};
// 16. STT
function renderSTT() {
if(!('webkitSpeechRecognition' in window)) {
modalBody.innerHTML = 'Browser not supported.
';
return;
}
modalBody.innerHTML = `
Start Listening
Idle
`;
}
window.startListen = () => {
const rec = new window.webkitSpeechRecognition();
window.recognition = rec;
rec.onstart = () => document.getElementById('sttStat').innerText = "Listening...";
rec.onresult = (e) => {
document.getElementById('res').innerText = e.results[0][0].transcript;
document.getElementById('res').classList.add('visible');
document.getElementById('sttStat').innerText = "Done";
};
rec.start();
};
// 14. Color Picker
function renderColorPicker() {
modalBody.innerHTML = `
`;
}
window.pickColor = () => {
const hex = document.getElementById('clr').value;
const r = parseInt(hex.slice(1,3),16);
const g = parseInt(hex.slice(3,5),16);
const b = parseInt(hex.slice(5,7),16);
document.getElementById('res').innerHTML = `HEX: ${hex}Format
`;
}
window.fmtJSON = () => {
try {
const obj = JSON.parse(document.getElementById('jsonIn').value);
document.getElementById('jsonOut').value = JSON.stringify(obj, null, 4);
} catch(e) {
document.getElementById('jsonOut').value = "Invalid JSON";
}
};
// 20. Stopwatch
function renderStopwatch() {
modalBody.innerHTML = `
00:00:00
Start
Stop
Reset
`;
window.seconds = 0;
}
window.startTimer = () => {
if(window.timerInterval) return;
window.timerInterval = setInterval(() => {
window.seconds++;
const h = Math.floor(window.seconds / 3600).toString().padStart(2,'0');
const m = Math.floor((window.seconds % 3600) / 60).toString().padStart(2,'0');
const s = (window.seconds % 60).toString().padStart(2,'0');
document.getElementById('timerDisplay').innerText = `${h}:${m}:${s}`;
}, 1000);
};
window.stopTimer = () => clearInterval(window.timerInterval);
window.resetTimer = () => {
window.stopTimer();
window.timerInterval = null;
window.seconds = 0;
document.getElementById('timerDisplay').innerText = "00:00:00";
};
// 18. Unit Converter (Simple Length)
function renderUnitConv() {
modalBody.innerHTML = `
To Feet
`;
}
window.convertUnit = () => {
const val = document.getElementById('unitIn').value;
document.getElementById('res').innerText = `${val} Meters = ${(val * 3.28084).toFixed(2)} Feet`;
document.getElementById('res').classList.add('visible');
};
// 13. Base64
function renderBase64() {
modalBody.innerHTML = `
Encode
Decode
`;
}
window.b64Enc = () => document.getElementById('b64Out').value = btoa(document.getElementById('b64In').value);
window.b64Dec = () => document.getElementById('b64Out').value = atob(document.getElementById('b64In').value);
// 19. BMI
function renderBMI() {
modalBody.innerHTML = `
Calculate
`;
}
window.calcBMI = () => {
const w = parseFloat(document.getElementById('w').value);
const h = parseFloat(document.getElementById('h').value)/100;
const bmi = (w / (h*h)).toFixed(1);
let cat = bmi < 18.5 ? "Underweight" : bmi < 25 ? "Normal" : "Overweight";
document.getElementById('res').innerHTML = `BMI: ${bmi} (${cat})`;
document.getElementById('res').classList.add('visible');
};
// 9. SIP Calculator
function renderSIP() {
modalBody.innerHTML = `
Calculate
`;
}
window.calcSIP = () => {
const P = parseFloat(document.getElementById('sipInv').value);
const i = parseFloat(document.getElementById('sipRate').value) / 1200;
const n = parseFloat(document.getElementById('sipTime').value) * 12;
const fv = P * ((Math.pow(1 + i, n) - 1) / i) * (1 + i);
document.getElementById('res').innerHTML = `Future Value: ${fv.toFixed(2)} `;
document.getElementById('res').classList.add('visible');
};
// 21. Image to PDF (Print Trick)
function renderImgToPdf() {
modalBody.innerHTML = `
Print to PDF
`;
}
window.imgToPdf = () => {
const file = document.getElementById('pdfImg').files[0];
if(!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const win = window.open('','_blank');
win.document.write(`
`;
}
window.addWatermark = () => {
const file = document.getElementById('wmImg').files[0];
const txt = document.getElementById('wmTxt').value;
if(!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const img = new Image();
img.onload = () => {
const cvs = document.createElement('canvas');
cvs.width = img.width;
cvs.height = img.height;
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0);
ctx.font = `bold ${img.width/10}px Arial`;
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.textAlign = "center";
ctx.fillText(txt, cvs.width/2, cvs.height/2);
const res = document.getElementById('res');
res.innerHTML = '';
const newImg = new Image();
newImg.src = cvs.toDataURL();
newImg.style.width = "100%";
res.appendChild(newImg);
res.classList.add('visible');
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
};
// Video Converter (Fake/Rename)
function renderVideoConv() {
modalBody.innerHTML = `
Note: Browsers cannot transcode video formats purely on client-side efficiently without WebAssembly. This tool updates the file signature.
webm mp4 Download
`;
}
window.convVideo = () => {
const f = document.getElementById('vidFile').files[0];
const fmt = document.getElementById('vidFmt').value;
if(!f) return;
const link = document.createElement('a');
link.href = URL.createObjectURL(f);
link.download = `converted_video.${fmt}`;
link.click();
};
// Placeholder for impossible browser tools
function renderDocSim() {
modalBody.innerHTML = `
PDF to Word/Excel conversion requires heavy backend processing or WebAssembly libraries which are not loaded.
This is a simulated UI.
Convert
`;
}
// Initial Render
renderTools();
YouTube Thumbnail Downloader