<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unit Converter</title>
<style>
body {
font-family: Arial, sans-serif;
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
/* Background image with transparency overlay */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('\IMG_9128.JPG'); /* Replace with the path to your image */
background-size: cover;
background-position: center;
z-index: -2; /* Send the image to the background */
}
/* 50% transparent overlay */
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* 50% black overlay */
z-index: -1;
}
/* Style for the container box */
.converter-container {
background-color: #020094c4; /* Blue box */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
width: 300px;
text-align: center;
z-index: 1; /* Ensures the box is above the background and overlay */
}
.converter-container h1 {
color: white;
}
/* Make the label text white */
.converter-container label {
color: white;
}
.converter-container select,
.converter-container input,
.converter-container button {
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
.converter-container button {
background-color: #00337f;
color: white;
cursor: pointer;
}
.converter-container button:hover {
background-color: #001f5f;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #fff;
}
</style>
</head>
<body>
<div class="converter-container">
<h1>Unit Converter</h1>
<label for="conversion">Choose a conversion type:</label>
<select id="conversion">
<!-- Distances -->
<optgroup label="Distances">
<option value="miles-to-km">Miles to Kilometers</option>
<option value="km-to-miles">Kilometers to Miles</option>
<option value="feet-to-meters">Feet to Meters</option>
<option value="meters-to-feet">Meters to Feet</option>
<option value="inches-to-cm">Inches to Centimeters</option>
<option value="cm-to-inches">Centimeters to Inches</option>
<option value="nautical-miles-to-km">Nautical Miles to Kilometers</option>
<option value="km-to-nautical-miles">Kilometers to Nautical Miles</option>
</optgroup>
<!-- Weights -->
<optgroup label="Weights">
<option value="pounds-to-kg">Pounds to Kilograms</option>
<option value="kg-to-pounds">Kilograms to Pounds</option>
<option value="lbs-force-to-newtons">Pounds-force to Newtons</option>
<option value="newtons-to-lbs-force">Newtons to Pounds-force</option>
</optgroup>
<!-- Volumes -->
<optgroup label="Volumes">
<option value="gallons-to-liters">Gallons to Liters</option>
<option value="liters-to-gallons">Liters to Gallons</option>
</optgroup>
<!-- Speeds -->
<optgroup label="Speeds">
<option value="knots-to-kmh">Knots to Kilometers per Hour</option>
<option value="kmh-to-knots">Kilometers per Hour to Knots</option>
</optgroup>
<!-- Temperatures -->
<optgroup label="Temperatures">
<option value="fahrenheit-to-celsius">Fahrenheit to Celsius</option>
<option value="celsius-to-fahrenheit">Celsius to Fahrenheit</option>
</optgroup>
<!-- Pressures -->
<optgroup label="Pressures">
<option value="psi-to-pascals">PSI to Pascals</option>
<option value="pascals-to-psi">Pascals to PSI</option>
</optgroup>
</select>
<input type="number" id="inputValue" placeholder="Enter value to convert" />
<button onclick="convert()">Convert</button>
<div id="result" class="result"></div>
</div>
<script>
function convert() {
let conversionType = document.getElementById('conversion').value;
let inputValue = parseFloat(document.getElementById('inputValue').value);
let resultText = '';
switch (conversionType) {
// Distances
case 'miles-to-km':
resultText = `${inputValue} miles is equal to ${(inputValue * 1.60934).toFixed(2)} kilometers.`;
break;
case 'km-to-miles':
resultText = `${inputValue} kilometers is equal to ${(inputValue * 0.621371).toFixed(2)} miles.`;
break;
case 'feet-to-meters':
resultText = `${inputValue} feet is equal to ${(inputValue * 0.3048).toFixed(2)} meters.`;
break;
case 'meters-to-feet':
resultText = `${inputValue} meters is equal to ${(inputValue * 3.28084).toFixed(2)} feet.`;
break;
case 'inches-to-cm':
resultText = `${inputValue} inches is equal to ${(inputValue * 2.54).toFixed(2)} centimeters.`;
break;
case 'cm-to-inches':
resultText = `${inputValue} centimeters is equal to ${(inputValue * 0.393701).toFixed(2)} inches.`;
break;
case 'nautical-miles-to-km':
resultText = `${inputValue} nautical miles is equal to ${(inputValue * 1.852).toFixed(2)} kilometers.`;
break;
case 'km-to-nautical-miles':
resultText = `${inputValue} kilometers is equal to ${(inputValue * 0.539957).toFixed(2)} nautical miles.`;
break;
// Weights
case 'pounds-to-kg':
resultText = `${inputValue} pounds is equal to ${(inputValue * 0.453592).toFixed(2)} kilograms.`;
break;
case 'kg-to-pounds':
resultText = `${inputValue} kilograms is equal to ${(inputValue * 2.20462).toFixed(2)} pounds.`;
break;
case 'lbs-force-to-newtons':
resultText = `${inputValue} pounds-force is equal to ${(inputValue * 4.44822).toFixed(2)} newtons.`;
break;
case 'newtons-to-lbs-force':
resultText = `${inputValue} newtons is equal to ${(inputValue * 0.224809).toFixed(2)} pounds-force.`;
break;
// Volumes
case 'gallons-to-liters':
resultText = `${inputValue} gallons is equal to ${(inputValue * 3.78541).toFixed(2)} liters.`;
break;
case 'liters-to-gallons':
resultText = `${inputValue} liters is equal to ${(inputValue * 0.264172).toFixed(2)} gallons.`;
break;
// Speeds
case 'knots-to-kmh':
resultText = `${inputValue} knots is equal to ${(inputValue * 1.852).toFixed(2)} kilometers per hour.`;
break;
case 'kmh-to-knots':
resultText = `${inputValue} kilometers per hour is equal to ${(inputValue * 0.539957).toFixed(2)} knots.`;
break;
// Temperatures
case 'fahrenheit-to-celsius':
resultText = `${inputValue} °F is equal to ${((inputValue - 32) * 5 / 9).toFixed(2)} °C.`;
break;
case 'celsius-to-fahrenheit':
resultText = `${inputValue} °C is equal to ${((inputValue * 9 / 5) + 32).toFixed(2)} °F.`;
break;
// Pressures
case 'psi-to-pascals':
resultText = `${inputValue} PSI is equal to ${(inputValue * 6894.76).toFixed(2)} Pascals.`;
break;
case 'pascals-to-psi':
resultText = `${inputValue} Pascals is equal to ${(inputValue * 0.000145038).toFixed(6)} PSI.`;
break;
default:
resultText = 'Please select a valid conversion type.';
}
document.getElementById('result').innerText = resultText;
}
</script>
</body>
</html>
