<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free Online Conversion Tools - Length, Weight, Temperature, Currency, Base Converter, and More!">
<meta name="keywords" content="conversion tools, length converter, weight converter, temperature converter, base converter, online tools">
<meta name="author" content="YourSiteName">
<title>All in One Converter Tools</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f2f2f2;
}
header {
background: #007bff;
color: white;
text-align: center;
padding: 1rem;
font-size: 24px;
}
.container {
max-width: 900px;
margin: auto;
padding: 1rem;
display: grid;
gap: 20px;
}
.tool {
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
font-size: 20px;
margin-bottom: 10px;
}
input, select, textarea, button {
width: 100%;
margin: 5px 0 10px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background: #007bff;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
textarea {
resize: vertical;
}
</style>
</head>
<body>
<header>All-in-One Conversion Tools</header>
<div class="container">
<!-- Length Converter -->
<div class="tool">
<h2>Length Converter (meters ↔ feet)</h2>
<input type="number" id="lengthInput" placeholder="Enter value">
<select id="lengthUnit">
<option value="mtoft">Meters to Feet</option>
<option value="fttom">Feet to Meters</option>
</select>
<button onclick="convertLength()">Convert</button>
<p id="lengthResult"></p>
</div>
<!-- Weight Converter -->
<div class="tool">
<h2>Weight Converter (kg ↔ pounds)</h2>
<input type="number" id="weightInput" placeholder="Enter value">
<select id="weightUnit">
<option value="kgtolb">Kilograms to Pounds</option>
<option value="lbtokg">Pounds to Kilograms</option>
</select>
<button onclick="convertWeight()">Convert</button>
<p id="weightResult"></p>
</div>
<!-- Temperature Converter -->
<div class="tool">
<h2>Temperature Converter (Celsius ↔ Fahrenheit)</h2>
<input type="number" id="tempInput" placeholder="Enter temperature">
<select id="tempUnit">
<option value="ctof">Celsius to Fahrenheit</option>
<option value="ftoc">Fahrenheit to Celsius</option>
</select>
<button onclick="convertTemp()">Convert</button>
<p id="tempResult"></p>
</div>
<!-- Currency Converter (Manual Rate) -->
<div class="tool">
<h2>Currency Converter (manual rate)</h2>
<input type="number" id="currencyInput" placeholder="Amount">
<input type="number" id="currencyRate" placeholder="Exchange rate">
<button onclick="convertCurrency()">Convert</button>
<p id="currencyResult"></p>
</div>
<!-- Time Converter -->
<div class="tool">
<h2>Time Converter (hours ↔ minutes)</h2>
<input type="number" id="timeInput" placeholder="Enter time">
<select id="timeUnit">
<option value="htom">Hours to Minutes</option>
<option value="mtoh">Minutes to Hours</option>
</select>
<button onclick="convertTime()">Convert</button>
<p id="timeResult"></p>
</div>
<!-- Speed Converter -->
<div class="tool">
<h2>Speed Converter (km/h ↔ mph)</h2>
<input type="number" id="speedInput" placeholder="Enter speed">
<select id="speedUnit">
<option value="kmtom">Kilometers per hour to Miles per hour</option>
<option value="mtokm">Miles per hour to Kilometers per hour</option>
</select>
<button onclick="convertSpeed()">Convert</button>
<p id="speedResult"></p>
</div>
<!-- Area Converter -->
<div class="tool">
<h2>Area Converter (square meters ↔ square feet)</h2>
<input type="number" id="areaInput" placeholder="Enter area">
<select id="areaUnit">
<option value="mtosqft">Square meters to Square feet</option>
<option value="sqfttom">Square feet to Square meters</option>
</select>
<button onclick="convertArea()">Convert</button>
<p id="areaResult"></p>
</div>
<!-- Volume Converter -->
<div class="tool">
<h2>Volume Converter (liters ↔ gallons)</h2>
<input type="number" id="volumeInput" placeholder="Enter volume">
<select id="volumeUnit">
<option value="ltogal">Liters to Gallons</option>
<option value="galtol">Gallons to Liters</option>
</select>
<button onclick="convertVolume()">Convert</button>
<p id="volumeResult"></p>
</div>
<!-- Number Base Converter -->
<div class="tool">
<h2>Number Base Converter</h2>
<input type="text" id="baseInput" placeholder="Enter number">
<select id="baseType">
<option value="bintoDec">Binary to Decimal</option>
<option value="dectoBin">Decimal to Binary</option>
<option value="dectoHex">Decimal to Hexadecimal</option>
<option value="hextoDec">Hexadecimal to Decimal</option>
</select>
<button onclick="convertBase()">Convert</button>
<p id="baseResult"></p>
</div>
<!-- Text Case Converter -->
<div class="tool">
<h2>Text Case Converter</h2>
<textarea id="textInput" rows="4" placeholder="Enter text"></textarea>
<select id="textCase">
<option value="upper">UPPERCASE</option>
<option value="lower">lowercase</option>
</select>
<button onclick="convertTextCase()">Convert</button>
<p id="textResult"></p>
</div>
<!-- JSON Formatter -->
<div class="tool">
<h2>JSON Formatter</h2>
<textarea id="jsonInput" rows="4" placeholder="Enter JSON"></textarea>
<button onclick="formatJSON()">Format</button>
<pre id="jsonResult"></pre>
</div>
<!-- Base64 Encode/Decode -->
<div class="tool">
<h2>Base64 Encode/Decode</h2>
<textarea id="base64Input" rows="4" placeholder="Enter text"></textarea>
<select id="base64Type">
<option value="encode">Encode</option>
<option value="decode">Decode</option>
</select>
<button onclick="convertBase64()">Convert</button>
<p id="base64Result"></p>
</div>
</div>
<script>
function convertLength() {
let val = parseFloat(document.getElementById('lengthInput').value);
let type = document.getElementById('lengthUnit').value;
let result = type === 'mtoft' ? val * 3.28084 : val / 3.28084;
document.getElementById('lengthResult').innerText = "Result: " + result;
}
function convertWeight() {
let val = parseFloat(document.getElementById('weightInput').value);
let type = document.getElementById('weightUnit').value;
let result = type === 'kgtolb' ? val * 2.20462 : val / 2.20462;
document.getElementById('weightResult').innerText = "Result: " + result;
}
function convertTemp() {
let val = parseFloat(document.getElementById('tempInput').value);
let type = document.getElementById('tempUnit').value;
let result = type === 'ctof' ? (val * 9/5) + 32 : (val - 32) * 5/9;
document.getElementById('tempResult').innerText = "Result: " + result.toFixed(2);
}
function convertCurrency() {
let amount = parseFloat(document.getElementById('currencyInput').value);
let rate = parseFloat(document.getElementById('currencyRate').value);
document.getElementById('currencyResult').innerText = "Result: " + (amount * rate);
}
function convertTime() {
let val = parseFloat(document.getElementById('timeInput').value);
let type = document.getElementById('timeUnit').value;
let result = type === 'htom' ? val * 60 : val / 60;
document.getElementById('timeResult').innerText = "Result: " + result;
}
function convertSpeed() {
let val = parseFloat(document.getElementById('speedInput').value);
let type = document.getElementById('speedUnit').value;
let result = type === 'kmtom' ? val * 0.621371 : val / 0.621371;
document.getElementById('speedResult').innerText = "Result: " + result;
}
function convertArea() {
let val = parseFloat(document.getElementById('areaInput').value);
let type = document.getElementById('areaUnit').value;
let result = type === 'mtosqft' ? val * 10.7639 : val / 10.7639;
document.getElementById('areaResult').innerText = "Result: " + result;
}
function convertVolume() {
let val = parseFloat(document.getElementById('volumeInput').value);
let type = document.getElementById('volumeUnit').value;
let result = type === 'ltogal' ? val * 0.264172 : val / 0.264172;
document.getElementById('volumeResult').innerText = "Result: " + result;
}
function convertBase() {
let val = document.getElementById('baseInput').value;
let type = document.getElementById('baseType').value;
let result;
if(type === 'bintoDec') result = parseInt(val, 2);
if(type === 'dectoBin') result = Number(val).toString(2);
if(type === 'dectoHex') result = Number(val).toString(16);
if(type === 'hextoDec') result = parseInt(val, 16);
document.getElementById('baseResult').innerText = "Result: " + result;
}
function convertTextCase() {
let text = document.getElementById('textInput').value;
let type = document.getElementById('textCase').value;
document.getElementById('textResult').innerText = type === 'upper' ? text.toUpperCase() : text.toLowerCase();
}
function formatJSON() {
let input = document.getElementById('jsonInput').value;
try {
let obj = JSON.parse(input);
document.getElementById('jsonResult').innerText = JSON.stringify(obj, null, 4);
} catch (e) {
document.getElementById('jsonResult').innerText = "Invalid JSON!";
}
}
function convertBase64() {
let text = document.getElementById('base64Input').value;
let type = document.getElementById('base64Type').value;
let result = type === 'encode' ? btoa(text) : atob(text);
document.getElementById('base64Result').innerText = "Result: " + result;
}
</script>
</body>
</html>
