aisoftcash — Multi Tool Hub
aisoftcash — Multi Tool Hub
Futuristic, front-end only toolkit for PDF, image, audio & utilities. Built with HTML, CSS & Vanilla JS.
About
This is a frontend-only demo of a futuristic utility hub. PDF functions are simulated in-browser; utilities use native APIs.
/* ================= FILE: style.css ===================== */
:root{
–bg: #0d0f14;
–nav: #1c222d;
–side: #12151a;
–text: #ffffff;
–muted: #e0e0e0;
–accent: #42f8f5;
–glow-strong: rgba(66,248,245,0.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: ‘Orbitron’, system-ui, -apple-system, ‘Segoe UI’, Roboto, Arial;
background:var(–bg);
color:var(–text);
-webkit-font-smoothing:antialiased;
}
/* Top nav */
.topnav{
display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(–nav);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(66,248,245,0.04);
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(–text)}
.logo-mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(–accent),#6ff1ee);box-shadow:0 6px 18px var(–glow-strong);font-size:18px}
.logo-text{font-weight:700;font-size:16px}
.logo-text .sub{font-weight:400;color:var(–muted);font-size:12px;margin-left:6px}
.nav-links{display:flex;gap:18px}
.nav-link{color:var(–muted);text-decoration:none;position:relative;padding:6px 8px}
.nav-link:hover{color:var(–text)}
.nav-link::after{content:””;position:absolute;left:6px;right:6px;bottom:0;height:2px;background:transparent;box-shadow:0 0 12px var(–glow-strong);transform-origin:left;transition:all .25s}
.nav-link:hover::after{background:var(–accent);}
.hamburger{display:none;background:transparent;border:0;color:var(–text);font-size:20px}
/* App Grid */
.app-grid{display:grid;grid-template-columns:280px 1fr;gap:18px;padding:18px}
.sidebar{background:var(–side);padding:14px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.6);height:calc(100vh – 96px);position:sticky;top:72px;overflow:auto;border:1px solid rgba(66,248,245,0.04)}
.collapse-btn{background:transparent;border:0;color:var(–muted);padding:6px;cursor:pointer}
.section h4{color:var(–muted);font-size:13px;margin:6px 0}
.tool-sections ul{list-style:none;padding:0;margin:6px 0}
.tool-item{padding:8px;border-radius:8px;margin:6px 0;cursor:pointer;color:var(–muted);transition:all .18s;display:flex;align-items:center;gap:8px}
.tool-item:hover{color:var(–text);transform:translateX(6px);box-shadow:0 8px 20px var(–glow-strong)}
.sidebar-bottom{margin-top:16px;color:var(–muted);text-align:center}
/* Main */
.main{padding:6px 4px}
.hero{display:flex;gap:16px;align-items:center;padding:24px;background:linear-gradient(180deg, rgba(66,248,245,0.02), transparent);border-radius:12px}
.hero-text h1{font-size:28px;margin:0}
.hero-text .accent{color:var(–accent);text-shadow:0 6px 18px var(–glow-strong)}
.subheadline{color:var(–muted);margin-top:8px}
.btn{background:var(–side);border:1px solid rgba(66,248,245,0.06);color:var(–text);padding:10px 14px;border-radius:10px;cursor:pointer;transition:all .18s}
.btn.primary{box-shadow:0 8px 24px rgba(66,248,245,0.04)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px var(–glow-strong);border-color:var(–accent)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.05)}
.hero-visual .card-glow{width:320px;height:180px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);display:grid;place-items:center;box-shadow:0 6px 40px var(–glow-strong);border:1px solid rgba(66,248,245,0.04)}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:14px;border-radius:12px;box-shadow:0 8px 26px rgba(0,0,0,0.6);transition:all .18s;border:1px solid rgba(66,248,245,0.04)}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 60px var(–glow-strong);border-color:var(–accent)}
.card h2{margin:0 0 8px 0;font-size:16px}
.card p{color:var(–muted);font-size:13px}
.card .card-actions{display:flex;gap:8px;margin-top:12px}
.footer{margin-top:18px;background:var(–nav);padding:16px;border-top:1px solid rgba(66,248,245,0.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
/* Modal & Toast */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(1,2,3,0.6), rgba(1,2,3,0.85));z-index:60}
.modal.show{display:flex}
.modal-panel{width:min(960px,94%);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#0b0d10,#0e1115);padding:18px;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,0.8);border:1px solid rgba(66,248,245,0.06)}
.modal-close{position:sticky;left:auto;float:right;background:transparent;border:0;color:var(–muted);font-size:18px}
.toast{position:fixed;right:18px;bottom:18px;background:rgba(10,12,14,0.9);padding:12px 16px;border-radius:10px;color:var(–text);box-shadow:0 12px 36px var(–glow-strong);display:none}
.toast.show{display:block}
/* Responsive */
@media (max-width:1000px){
.app-grid{grid-template-columns:220px 1fr}
.tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
.nav-links{display:none}
.hamburger{display:block}
.app-grid{grid-template-columns:1fr;padding:12px}
.sidebar{position:relative;height:auto;border-radius:10px;order:2}
.main{order:1}
.tools-grid{grid-template-columns:1fr}
}
/* utility */
input[type=file]{display:block}
pre{white-space:pre-wrap}
/* ================= FILE: script.js ===================== */
(function(){
‘use strict’;
const TOOLS = [
{id:’merge-pdf’, title:’Merge PDF’, desc:’Combine multiple PDF files into one (simulated).’, category:’pdf’},
{id:’split-pdf’, title:’Split PDF’, desc:’Split PDF pages into separate files (simulated).’, category:’pdf’},
{id:’compress-pdf’, title:’Compress PDF’, desc:’Reduce PDF size (simulated).’, category:’pdf’},
{id:’pdf-to-word’, title:’PDF → Word’, desc:’Convert PDF to editable Word doc (simulated).’, category:’pdf’},
{id:’word-to-pdf’, title:’Word → PDF’, desc:’Export Word to PDF (simulated).’, category:’pdf’},
{id:’pdf-to-ppt’, title:’PDF → PowerPoint’, desc:’Convert PDF to PPT (simulated).’, category:’pdf’},
{id:’ppt-to-pdf’, title:’PowerPoint → PDF’, desc:’Convert PPT to PDF (simulated).’, category:’pdf’},
{id:’pdf-to-excel’, title:’PDF → Excel’, desc:’Extract table data (simulated).’, category:’pdf’},
{id:’excel-to-pdf’, title:’Excel → PDF’, desc:’Export Excel to PDF (simulated).’, category:’pdf’},
{id:’pdf-to-jpg’, title:’PDF → JPG’, desc:’Export PDF pages as images (simulated).’, category:’pdf’},
{id:’jpg-to-pdf’, title:’JPG → PDF’, desc:’Create a PDF from images (simulated).’, category:’pdf’},
{id:’organize-pdf’, title:’Organize PDF’, desc:’Reorder or remove pages (simulated).’, category:’pdf’},
{id:’edit-pdf’, title:’Edit PDF’, desc:’Add text/images to PDF (simulated).’, category:’pdf’},
{id:’rotate-pdf’, title:’Rotate PDF’, desc:’Rotate pages (simulated).’, category:’pdf’},
{id:’unlock-pdf’, title:’Unlock PDF’, desc:’Remove password from PDF (simulated).’, category:’pdf’},
{id:’protect-pdf’, title:’Protect PDF’, desc:’Add password to PDF (simulated).’, category:’pdf’},
{id:’add-page-numbers’, title:’Add Page Numbers’, desc:’Stamp page numbers into PDF (simulated).’, category:’pdf’},
{id:’add-watermark’, title:’Add Watermark’, desc:’Add watermark text or image (simulated).’, category:’pdf’},
{id:’image-compressor’, title:’Image Compressor’, desc:’Compress images in-browser and download a smaller result.’, category:’image’},
{id:’image-converter’, title:’Image Converter’, desc:’Convert JPG/PNG/WebP formats using canvas.’, category:’image’},
{id:’qr-generator’, title:’QR Code Generator’, desc:’Generate QR codes from text (canvas demo).’, category:’utility’},
{id:’password-generator’, title:’Password Generator’, desc:’Create secure random passwords.’, category:’utility’},
{id:’word-counter’, title:’Word & Character Counter’, desc:’Counts words, characters and readability.’, category:’utility’},
{id:’age-calculator’, title:’Age Calculator’, desc:’Calculate exact age from DOB.’, category:’utility’},
{id:’bmi-calculator’, title:’BMI Calculator’, desc:’Calculate body mass index (BMI).’, category:’utility’},
{id:’color-picker’, title:’Color Picker’, desc:’Pick a color and get hex / rgb values.’, category:’utility’},
{id:’json-formatter’, title:’JSON Formatter’, desc:’Pretty-print and validate JSON.’, category:’utility’},
{id:’text-to-speech’, title:’Text to Speech’, desc:’Convert text to spoken audio using Web Speech API.’, category:’utility’},
{id:’speech-to-text’, title:’Speech to Text’, desc:’Capture speech and transcribe (Web Speech API).’, category:’utility’},
{id:’timer’, title:’Timer / Stopwatch’, desc:’Simple timer & stopwatch.’, category:’utility’}
];
const toolsGrid = document.getElementById(‘toolsGrid’);
const modal = document.getElementById(‘modal’);
const modalContent = document.getElementById(‘modalContent’);
const closeModalBtn = document.getElementById(‘closeModal’);
const toast = document.getElementById(‘toast’);
const hamburger = document.getElementById(‘hamburger’);
const navLinks = document.getElementById(‘navLinks’);
const collapseBtn = document.getElementById(‘collapseBtn’);
const sidebar = document.getElementById(‘sidebar’);
function el(tag, cls, html){ const d=document.createElement(tag); if(cls) d.className=cls; if(html) d.innerHTML=html; return d; }
function showToast(msg, timeout=2200){ toast.textContent = msg; toast.classList.add(‘show’); setTimeout(()=>toast.classList.remove(‘show’), timeout); }
function simulateProcessing(onDone, label=’Processing’){ showToast(`${label} — Uploading…`); setTimeout(()=>{ showToast(`${label} — Processing…`); setTimeout(()=>{ showToast(`${label} — Done!`); if(typeof onDone===’function’) onDone(); }, 900); }, 700); }
function openModal(html){ modalContent.innerHTML = html; modal.classList.add(‘show’); modal.setAttribute(‘aria-hidden’,’false’); document.body.style.overflow=’hidden’; }
function closeModal(){ modal.classList.remove(‘show’); modal.setAttribute(‘aria-hidden’,’true’); modalContent.innerHTML=”; document.body.style.overflow=’auto’; }
function makeToolCard(tool){ const card = el(‘div’,’card’); card.setAttribute(‘role’,’listitem’); card.innerHTML = `
${tool.title}
${tool.desc}
`; return card; }
function renderGrid(){ TOOLS.forEach(t => toolsGrid.appendChild(makeToolCard(t))); }
document.body.addEventListener(‘click’, (e)=>{
const openBtn = e.target.closest(‘[data-tool]’); if(openBtn){ const id = openBtn.getAttribute(‘data-tool’); openToolUI(id); return; }
const demoBtn = e.target.closest(‘[data-demo]’); if(demoBtn){ const id = demoBtn.getAttribute(‘data-demo’); openDemoUI(id); return; }
const toolItem = e.target.closest(‘.tool-item’); if(toolItem){ const id = toolItem.getAttribute(‘data-tool’); openToolUI(id); return; }
});
closeModalBtn.addEventListener(‘click’, closeModal); modal.addEventListener(‘click’, (e)=>{ if(e.target===modal) closeModal(); }); document.addEventListener(‘keydown’,(e)=>{ if(e.key===’Escape’) closeModal(); });
hamburger.addEventListener(‘click’, ()=>{ const shown = getComputedStyle(navLinks).display !== ‘none’; navLinks.style.display = shown ? ‘none’ : ‘flex’; hamburger.setAttribute(‘aria-expanded’, String(!shown)); });
collapseBtn.addEventListener(‘click’, ()=>{ const collapsed = sidebar.style.width===’64px’; sidebar.style.width = collapsed ? ‘280px’ : ’64px’; collapseBtn.textContent = collapsed ? ‘◀’ : ‘▶’; collapseBtn.setAttribute(‘aria-pressed’, String(!collapsed)); });
document.getElementById(‘openTools’).addEventListener(‘click’, ()=>document.getElementById(‘tools’).scrollIntoView({behavior:’smooth’}));
function fileDropHTML({id, accept=’*’, multiple=false}){ return `
`; }
function openToolUI(id){
switch(id){
case ‘image-compressor’:
openModal(`
Image Compressor
${fileDropHTML({id:’imgcomp’, accept:’image/*’})}
`);
setupImageCompressor();
break;
case ‘image-converter’:
openModal(`
Image Converter
${fileDropHTML({id:’imgconv’, accept:’image/*’})}
`);
setupImageConverter();
break;
case ‘password-generator’:
openModal(`
Password Generator
`);
document.getElementById(‘genPw’).addEventListener(‘click’, ()=>{ const len = +document.getElementById(‘pwLen’).value; document.getElementById(‘pwOut’).textContent = generatePassword(len); });
break;
case ‘word-counter’:
openModal(`
Word & Character Counter
`);
document.getElementById(‘counterText’).addEventListener(‘input’, (e)=>{ const text=e.target.value; const words = text.trim()? text.trim().split(/\s+/).length : 0; const chars = text.length; const charsNoSpace = text.replace(/\s+/g,”).length; document.getElementById(‘counterStats’).textContent = `Words: ${words} — Characters: ${chars} — Characters (no spaces): ${charsNoSpace}`; });
break;
case ‘age-calculator’:
openModal(`
Age Calculator
`);
document.getElementById(‘calcAge’).addEventListener(‘click’, ()=>{ const dob = document.getElementById(‘dob’).value; if(!dob) return showToast(‘Please choose a date’); const diff = getAgeFromDOB(dob); document.getElementById(‘ageOut’).innerHTML = `Age:
${diff.years} years,
${diff.months} months,
${diff.days} days`; });
break;
case ‘bmi-calculator’:
openModal(`
BMI Calculator
`);
document.getElementById(‘calcBmi’).addEventListener(‘click’, ()=>{ const w=+document.getElementById(‘weight’).value; const h=+document.getElementById(‘height’).value/100; if(!w||!h) return showToast(‘Enter valid values’); const bmi=(w/(h*h)); let cat=”; if(bmi<18.5)cat='Underweight';else if(bmi<25)cat='Normal';else if(bmi<30)cat='Overweight';else cat='Obese'; document.getElementById('bmiOut').innerHTML = `BMI:
${bmi.toFixed(1)} — ${cat}`; });
break;
case ‘color-picker’:
openModal(`
Color Picker
`);
document.getElementById(‘colPick’).addEventListener(‘input’, (e)=>{ const hex=e.target.value; const rgb = hexToRgb(hex); document.getElementById(‘colOut’).innerHTML = `HEX:
${hex} — RGB:
${rgb.r}, ${rgb.g}, ${rgb.b}`; });
break;
case ‘json-formatter’:
openModal(`
JSON Formatter
`);
document.getElementById(‘fmtJson’).addEventListener(‘click’, ()=>{ const t=document.getElementById(‘jsonIn’).value; try{ const obj=JSON.parse(t); document.getElementById(‘jsonOut’).textContent = JSON.stringify(obj,null,2); }catch(err){ document.getElementById(‘jsonOut’).textContent = ‘Invalid JSON: ‘+err.message; } });
break;
case ‘text-to-speech’:
openModal(`
Text to Speech
`);
document.getElementById(‘playTTS’).addEventListener(‘click’, ()=>{ const txt=document.getElementById(‘ttsIn’).value||’Hello from Prompt Minds.’; const ut=new SpeechSynthesisUtterance(txt); speechSynthesis.speak(ut); });
break;
case ‘speech-to-text’:
openModal(`
Speech to Text
`);
setupSpeechToText();
break;
case ‘timer’:
openModal(`
Timer / Stopwatch
00:00
`);
setupTimerUI();
break;
default:
openModal(`
${id.replace(/-/g,’ ‘).toUpperCase()}
${fileDropHTML({id:id+’-drop’, accept:’application/pdf’, multiple:true})}
`);
document.getElementById(‘runSim’).addEventListener(‘click’, ()=>simulateProcessing(()=>{ showToast(‘Result ready — simulation only’); }));
}
}
function openDemoUI(id){
if(id===’qr-generator’){
openModal(`
QR Generator
`);
document.getElementById(‘makeQR’).addEventListener(‘click’, ()=>{ const t=document.getElementById(‘qrText’).value||’https://promptminds.ai’; const canvas = generateSimpleQRCanvas(t,300); const out = document.getElementById(‘qrOut’); out.innerHTML=”; out.appendChild(canvas); const a=document.createElement(‘a’); a.href=canvas.toDataURL(); a.download=’qr.png’; a.textContent=’Download PNG’; a.style.display=’inline-block’; a.style.marginTop=’8px’; out.appendChild(a); });
} else { openToolUI(id); }
}
function fileDropHTML({id, accept=’*’, multiple=false}){ return `
`; }
function setupImageCompressor(){
const area = document.getElementById(‘imgcomp’);
const input = document.getElementById(‘fileInput-imgcomp’);
const preview = document.getElementById(‘preview-imgcomp’);
let imgFile=null;
bindDrop(area, input, (f)=>{ imgFile=f; preview.innerHTML = `
})
`; });
document.getElementById(‘compressBtn’).addEventListener(‘click’, ()=>{ if(!imgFile) return showToast(‘Choose an image first’); simulateProcessing(()=>{ compressImage(imgFile, +document.getElementById(‘qc’).value, (blob)=>{ downloadBlob(blob, ‘compressed.jpg’); }); }, ‘Compressing’); });
}
function setupImageConverter(){
const area = document.getElementById(‘imgconv’);
const input = document.getElementById(‘fileInput-imgconv’);
const preview = document.getElementById(‘preview-imgconv’);
let imgFile=null;
bindDrop(area, input, (f)=>{ imgFile=f; preview.innerHTML = `
`; });
document.getElementById(‘convertBtn’).addEventListener(‘click’, ()=>{ if(!imgFile) return showToast(‘Choose an image first’); const fmt = document.getElementById(‘imgFmt’).value; simulateProcessing(()=>{ convertImage(imgFile, fmt, (blob)=>{ const ext = fmt.includes(‘png’)? ‘png’ : (fmt.includes(‘webp’)? ‘webp’ : ‘jpg’); downloadBlob(blob, `converted.${ext}`); }); }, ‘Converting’); });
}
function bindDrop(area, input, onFile){ area.addEventListener(‘dragover’, (e)=>{ e.preventDefault(); area.style.opacity=0.9; }); area.addEventListener(‘dragleave’, ()=>area.style.opacity=1); area.addEventListener(‘drop’, (e)=>{ e.preventDefault(); area.style.opacity=1; const f=e.dataTransfer.files[0]; if(f) onFile(f); }); input.addEventListener(‘change’, ()=>{ if(input.files[0]) onFile(input.files[0]); }); }
function compressImage(file, quality, cb){ const img = new Image(); const reader = new FileReader(); reader.onload = ()=> img.src = reader.result; img.onload = ()=>{ const canvas = document.createElement(‘canvas’); const maxW = 1600; let w=img.width, h=img.height; if(w>maxW){ h = Math.round(h*(maxW/w)); w = maxW; } canvas.width = w; canvas.height = h; const ctx = canvas.getContext(‘2d’); ctx.drawImage(img,0,0,w,h); canvas.toBlob((b)=>cb(b),’image/jpeg’,quality); }; reader.readAsDataURL(file); }
function convertImage(file, mime, cb){ const img = new Image(); const reader = new FileReader(); reader.onload = ()=> img.src = reader.result; img.onload = ()=>{ const canvas = document.createElement(‘canvas’); canvas.width = img.width; canvas.height = img.height; canvas.getContext(‘2d’).drawImage(img,0,0); canvas.toBlob((b)=>cb(b), mime, 0.92); }; reader.readAsDataURL(file); }
function downloadBlob(blob, filename){ const url = URL.createObjectURL(blob); const a = document.createElement(‘a’); a.href=url; a.download=filename; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); }
function generateSimpleQRCanvas(text, size=256){ const seed = Array.from(text).reduce((s,c)=>s + c.charCodeAt(0), 0); const gridSize = 21; const cell = Math.floor(size/gridSize); const canvas = document.createElement(‘canvas’); canvas.width = canvas.height = gridSize*cell; const ctx = canvas.getContext(‘2d’); ctx.fillStyle=’white’; ctx.fillRect(0,0,canvas.width,canvas.height); for(let y=0;y
{ rec.start(); showToast(‘Recording started’); }); stopBtn.addEventListener(‘click’, ()=>{ rec.stop(); showToast(‘Recording stopped’); }); rec.onresult = (ev)=>{ const transcript = Array.from(ev.results).map(r=>r[0].transcript).join(”); out.textContent = transcript; }; }
function setupTimerUI(){ const out = document.getElementById(‘timerOut’); let timer=null; let remaining=0; document.getElementById(‘startTimer’).addEventListener(‘click’, ()=>{ const mins = +document.getElementById(‘mins’).value||0; remaining = mins*60; if(timer) clearInterval(timer); timer=setInterval(()=>{ if(remaining<=0){ clearInterval(timer); out.textContent='00:00'; showToast('Timer finished'); return; } remaining--; const mm=String(Math.floor(remaining/60)).padStart(2,'0'); const ss=String(remaining%60).padStart(2,'0'); out.textContent=`${mm}:${ss}`; },1000); }); document.getElementById('stopTimer').addEventListener('click', ()=>{ if(timer) clearInterval(timer); out.textContent=’Stopped’; }); }
function generatePassword(len=16){ const chars = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()-_=+[]{}|;:,<.>/?’; let r=”; const arr = new Uint32Array(len); window.crypto.getRandomValues(arr); for(let i=0;i
