<div style="background:#151B54; color:#fff; padding:30px; border-radius:40px; max-width:500px; margin:auto; font-family:sans-serif;">
<h2 style="text-align:center; font-size:38px; margin-bottom:25px;">Kalkulator Konkrit</h2>
<!-- Paparan isipadu -->
<label style="font-size:18px;">Jumlah Isipadu:</label>
<div id="resultDisplay" style="background:#fff; color:#000 !important; font-size:36px; font-weight:bold; padding:25px; border-radius:12px; margin-bottom:30px; text-align:right;">
0.0 m³
</div>
<!-- Panjang -->
<label style="font-size:18px;">Panjang:</label><br>
<input type="number" id="length" step="0.01" style="width:40%; padding:15px; font-size:16px; margin-bottom:10px; border-radius:10px; border:none;">
<select id="lengthUnit" class="unit-dropdown">
<option value="meter">Meter</option>
<option value="feet">Kaki</option>
<option value="inch">Inci</option>
<option value="cm">Sentimeter</option>
<option value="mm">Milimeter</option>
</select>
<!-- Lebar -->
<label style="font-size:18px;">Lebar:</label><br>
<input type="number" id="width" step="0.01" style="width:40%; padding:15px; font-size:16px; margin-bottom:10px; border-radius:10px; border:none;">
<select id="widthUnit" class="unit-dropdown">
<option value="meter">Meter</option>
<option value="feet">Kaki</option>
<option value="inch">Inci</option>
<option value="cm">Sentimeter</option>
<option value="mm">Milimeter</option>
</select>
<!-- Tebal -->
<label style="font-size:18px;">Tebal:</label><br>
<input type="number" id="depth" step="0.01" style="width:40%; padding:15px; font-size:16px; margin-bottom:30px; border-radius:10px; border:none;">
<select id="depthUnit" class="unit-dropdown">
<option value="meter">Meter</option>
<option value="feet">Kaki</option>
<option value="inch">Inci</option>
<option value="cm">Sentimeter</option>
<option value="mm">Milimeter</option>
</select>
<div style="text-align:center;">
<button onclick="calculateConcrete()" style="padding:15px 30px; font-size:18px; margin-right:20px; border-radius:10px; background:#6AFB92; color:#000; border:none;">Kira</button>
<button onclick="resetCalculator()" style="padding:15px 30px; font-size:18px; border-radius:10px; background:#F75D59; color:#000; border:none;">Reset</button>
</div>
</div>
<!-- Animasi CSS dropdown -->
<style>
.unit-dropdown {
background: yellow;
color: black;
width: 40%;
padding: 10px;
font-size: 15px;
margin-left: 5%;
border-radius: 10px;
border: none;
transition: all 0.3s ease;
outline: none;
}
.unit-dropdown:hover,
.unit-dropdown:focus {
box-shadow: 0 0 10px rgba(255, 255, 0, 0.7);
transform: scale(1.05);
}
</style>
<script>
function convertToMeter(value, unit) {
switch (unit) {
case 'feet': return value * 0.3048;
case 'inch': return value * 0.0254;
case 'cm': return value * 0.01;
case 'mm': return value * 0.001;
case 'meter': return value;
default: return value;
}
}
function calculateConcrete() {
const length = parseFloat(document.getElementById('length').value) || 0;
const width = parseFloat(document.getElementById('width').value) || 0;
const depth = parseFloat(document.getElementById('depth').value) || 0;
const lengthUnit = document.getElementById('lengthUnit').value;
const widthUnit = document.getElementById('widthUnit').value;
const depthUnit = document.getElementById('depthUnit').value;
const lengthMeters = convertToMeter(length, lengthUnit);
const widthMeters = convertToMeter(width, widthUnit);
const depthMeters = convertToMeter(depth, depthUnit);
const volume = lengthMeters * widthMeters * depthMeters;
const roundedVolume = Math.round(volume * 2) / 2;
document.getElementById('resultDisplay').innerText = roundedVolume.toFixed(1) + " m³";
}
function resetCalculator() {
document.getElementById('length').value = '';
document.getElementById('width').value = '';
document.getElementById('depth').value = '';
document.getElementById('resultDisplay').innerText = '0.0 m³';
}
</script>