DEV Community

Prabhat Ranjan
Prabhat Ranjan

Posted on

DigiTools.html

<!DOCTYPE html>






All-in-One Tools Hub { "@context": "https://schema.org", "@type": "WebSite", "name": "All-in-One Tools Hub", "url": "https://yourwebsite.com", "potentialAction": { "@type": "SearchAction", "target": "https://yourwebsite.com/?q={search_term_string}", "query-input": "required name=search_term_string" } } /* RESET */ * {margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;} body {background:#121212; color:#eee; transition: background 0.3s, color 0.3s;} a {text-decoration:none; color:#1e90ff;} h1,h2,h3 {margin-bottom:10px;} button {cursor:pointer;} /* DARK/LIGHT TOGGLE */ #themeToggle {position:fixed; top:15px; right:15px; background:#1e90ff; color:#fff; border:none; padding:10px 15px; border-radius:5px; z-index:1000;} /* LAYOUT */ header {text-align:center; padding:50px 20px; background:#1a1a1a;} header h1 {font-size:2.5rem; color:#1e90ff; margin-bottom:10px;} header p {font-size:1rem; color:#ccc;} nav {display:flex; justify-content:center; flex-wrap:wrap; gap:15px; padding:20px; position:sticky; top:0; background:#121212; z-index:999; box-shadow:0 2px 5px rgba(0,0,0,0.5);} nav a {background:#1a1a1a; padding:10px 20px; border-radius:5px; transition:0.3s;} nav a:hover {background:#1e90ff; color:#fff;} section {padding:40px 20px; max-width:1000px; margin:0 auto;} .tool {background:#1a1a1a; padding:25px; border-radius:10px; margin-bottom:30px; transition:0.3s;} .tool:hover {background:#1e1e1e;} .tool h2 {color:#1e90ff;} .tool label {display:block; margin:10px 0 5px;} .tool input, .tool textarea, .tool select {width:100%; padding:8px; border-radius:5px; border:none; margin-bottom:10px;} .tool button {background:#1e90ff; color:#fff; border:none; padding:10px 15px; border-radius:5px; margin-top:5px; transition:0.3s;} .tool button:hover {background:#0f71d0;} .ad {background:#333; text-align:center; color:#ccc; padding:20px; margin:20px 0; border-radius:10px;} /* COPY BUTTON */ .copy-btn {background:#0f71d0; margin-left:10px; padding:5px 10px; font-size:0.9rem; border-radius:5px;} .copy-btn:hover {background:#1e90ff;} /* FOOTER */ footer {text-align:center; padding:30px 20px; background:#1a1a1a; color:#ccc; margin-top:50px;} /* RESPONSIVE */ @media(max-width:600px){nav{flex-direction:column;}}

Toggle Light/Dark

<h1>All-in-One Tools Hub</h1>
<p>Free AI-powered tools to save time, boost productivity &amp; get instant results.</p>



<a href="#loan">Loan Calculator</a>
<a href="#insurance">Life Insurance</a>
<a href="#meeting">Meeting Cost</a>
<a href="#pdf">PDF/Word Converter</a>
<a href="#compress">Image Compressor</a>
<a href="#qr">QR Code</a>
<a href="#color">Color Extractor</a>
<a href="#text">Text Converter</a>
<a href="#counter">Counter</a>
<a href="#meta">Meta Generator</a>
<a href="#utm">UTM Builder</a>
<a href="#prompt">AI Prompt</a>
Enter fullscreen mode Exit fullscreen mode

AD SPACE (728x90)

Loan / EMI Calculator

Loan Amount ($):
Interest Rate (% per annum):
Loan Tenure (months):
Calculate EMI

Copy

Life Insurance Premium Calculator

Age:
Coverage Amount ($):
Term (years):
Calculate Premium

Copy

Meeting Cost Calculator

Number of Participants:
Average Hourly Wage ($):
Meeting Duration (hours):
Calculate Cost

Copy

AD SPACE (300x250)

PDF ↔ Word Converter

Enter text:
Convert

Copy

JPEG/PNG Compressor (simulation)

Enter image URL:
Compress

Copy

QR Code Generator

Enter text/URL:
Generate QR

Color Palette Extractor

Enter HEX color code (e.g., #ff0000):

Extract Palette

Text Case Converter

UPPERCASE
lowercase
Capitalize

Copy

Character & Word Counter

Count

Copy

Meta Tag Generator

Page Title:
Page Description:
Generate Meta Tags

Copy

UTM Link Builder

Website URL:
Campaign Source:
Campaign Medium:
Campaign Name:
Generate UTM Link

Copy

AI Prompt Helper

Enter your task:

Generate AI Prompt

Copy

AD SPACE (728x90)

© 2025 All-in-One Tools Hub | Privacy Policy | Contact

// DARK/LIGHT TOGGLE
const themeToggle=document.getElementById('themeToggle');
themeToggle.addEventListener('click',()=>{
if(document.body.style.background==='white'){
document.body.style.background='#121212';
document.body.style.color='#eee';
} else {
document.body.style.background='white';
document.body.style.color='#121212';
}
});

// COPY TO CLIPBOARD
function copyText(id){
let text=document.getElementById(id).innerText;
navigator.clipboard.writeText(text).then(()=>alert('Copied!'));
}

// EMI Calculator
function calculateEMI(){
let P=parseFloat(document.getElementById('loanAmount').value);
let R=parseFloat(document.getElementById('loanRate').value)/1200;
let N=parseInt(document.getElementById('loanTenure').value);
if(P && R && N){
let EMI=(P*R*Math.pow(1+R,N))/(Math.pow(1+R,N)-1);
document.getElementById('loanResult').innerText='Monthly EMI: $'+EMI.toFixed(2);
} else {document.getElementById('loanResult').innerText='Please fill all fields';}
}

// Life Insurance Premium
function calculatePremium(){
let age=parseInt(document.getElementById('age').value);
let coverage=parseFloat(document.getElementById('coverage').value);
let term=parseInt(document.getElementById('term').value);
if(age && coverage && term){
let premium=coverage*0.05*(1 + age/100);
document.getElementById('insuranceResult').innerText='Estimated Premium/year: $'+premium.toFixed(2);
} else {document.getElementById('insuranceResult').innerText='Fill all fields';}
}

// Meeting Cost
function calculateMeetingCost(){
let participants=parseInt(document.getElementById('participants').value);
let wage=parseFloat(document.getElementById('wage').value);
let duration=parseFloat(document.getElementById('duration').value);
if(participants && wage && duration){
let cost=participants*duration*wage;
document.getElementById('meetingResult').innerText='Total Meeting Cost: $'+cost.toFixed(2);
} else {document.getElementById('meetingResult').innerText='Fill all fields';}
}

// PDF/Word Converter simulation
function convertPDF(){
let text=document.getElementById('pdfInput').value;
document.getElementById('pdfResult').innerText=text? 'Converted content: '+text:'Enter text';
}

// Image Compressor simulation
function compressImage(){
let url=document.getElementById('imgUrl').value;
document.getElementById('compressResult').innerText=url? 'Compressed image URL: '+url+' (simulation)':'Enter image URL';
}

// QR Generator (lazy loading)
function generateQR(){
let text=document.getElementById('qrText').value;
let qrDiv=document.getElementById('qrResult');
qrDiv.innerHTML='';
if(text){
let img=document.createElement('img');
img.src='https://api.qrserver.com/v1/create-qr-code/?size=150x150&amp;data='+encodeURIComponent(text);
img.loading='lazy';
qrDiv.appendChild(img);
} else {qrDiv.innerText='Enter text/URL';}
}

// Color Extractor
function extractColor(){
let hex=document.getElementById('colorInput').value;
if(/^#([0-9A-F]{3}){1,2}$/i.test(hex)){
let palette=document.getElementById('colorResult');
palette.innerHTML='';
for(let i=0;i<5;i++){
let div=document.createElement('div');
div.style.background=hex;
div.style.width='50px';
div.style.height='50px';
div.style.borderRadius='5px';
palette.appendChild(div);
}
} else {alert('Enter valid HEX color');}
}

// Text Converter
function convertText(type){
let txt=document.getElementById('textInput').value;
if(txt){
if(type==='upper') document.getElementById('textResult').innerText=txt.toUpperCase();
if(type==='lower') document.getElementById('textResult').innerText=txt.toLowerCase();
if(type==='capitalize') document.getElementById('textResult').innerText=txt.replace(/\b\w/g,l=>l.toUpperCase());
} else {document.getElementById('textResult').innerText='Enter text';}
}

// Character & Word Counter
function countText(){
let txt=document.getElementById('countText').value;
if(txt){
let chars=txt.length;
let words=txt.trim().split(/\s+/).length;
document.getElementById('countResult').innerText='Words: '+words+', Characters: '+chars;
} else {document.getElementById('countResult').innerText='Enter text';}
}

// Meta Tag Generator
function generateMeta(){
let title=document.getElementById('metaTitle').value;
let desc=document.getElementById('metaDesc').value;
if(title && desc){
document.getElementById('metaResult').innerText='<title>'+title+'</title>\n<meta name="description" content="'+desc+'">';
} else {document.getElementById('metaResult').innerText='Fill all fields';}
}

// UTM Link Builder
function buildUTM(){
let url=document.getElementById('utmUrl').value;
let src=document.getElementById('utmSource').value;
let med=document.getElementById('utmMedium').value;
let name=document.getElementById('utmName').value;
if(url && src && med && name){
document.getElementById('utmResult').innerText=url+'?utm_source='+encodeURIComponent(src)+'&utm_medium='+encodeURIComponent(med)+'&utm_campaign='+encodeURIComponent(name);
} else {document.getElementById('utmResult').innerText='Fill all fields';}
}

// AI Prompt Helper
function generatePrompt(){
let task=document.getElementById('promptInput').value;
document.getElementById('promptResult').innerText=task? 'Write a detailed response for the following task: "'+task+'"':'Enter a task';
}

// SMOOTH SCROLL
document.querySelectorAll('nav a').forEach(anchor=>{
anchor.addEventListener('click',function(e){
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({behavior:'smooth'});
});
});

Top comments (0)