<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UAE VAT Calculator 5%</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 20px;
}
.calculator-container {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
width: 800px;
max-width: 95%;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 2rem;
font-size: 2.5rem;
background: linear-gradient(to right, #3498db, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.input-group {
margin-bottom: 2rem;
text-align: center;
}
label {
display: block;
color: #34495e;
margin-bottom: 0.8rem;
font-weight: bold;
font-size: 1.2rem;
}
input {
width: 50%;
padding: 1rem;
border: 2px solid #ddd;
border-radius: 12px;
font-size: 1.2rem;
transition: border-color 0.3s ease;
margin: 0 auto;
display: block;
}
input:focus {
outline: none;
border-color: #3498db;
}
.results-container {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-top: 2rem;
}
.result-section {
flex: 1;
background: #f8f9fa;
padding: 1.5rem;
border-radius: 12px;
min-width: 0;
}
.result-section h2 {
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
font-size: 1.5rem;
border-bottom: 2px solid;
}
.plus-tax h2 {
color: #2ecc71;
border-color: #2ecc71;
}
.including-tax h2 {
color: #3498db;
border-color: #3498db;
}
.result-item {
margin: 1rem 0;
padding: 0.8rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.result-label {
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 0.3rem;
}
.result-value {
font-size: 1.5rem;
font-weight: bold;
}
.plus-tax .result-value {
color: #2ecc71;
}
.including-tax .result-value {
color: #3498db;
}
</style>
</head>
<body>
<div class="calculator-container">
<h1>UAE VAT Calculator (5%)</h1>
<div class="input-group">
<label for="amount">Enter Amount (AED):</label>
<input type="number" id="amount" placeholder="Enter amount" step="0.01">
</div>
<div class="results-container">
<div class="result-section plus-tax">
<h2>Plus Tax Calculation</h2>
<div class="result-item">
<div class="result-label">Total Amount (VAT Included)</div>
<div class="result-value" id="plusTaxTotal">0.00 AED</div>
</div>
<div class="result-item">
<div class="result-label">VAT Amount (5%)</div>
<div class="result-value" id="vatAmount">0.00 AED</div>
</div>
</div>
<div class="result-section including-tax">
<h2>Including Tax Calculation</h2>
<div class="result-item">
<div class="result-label">Base Amount (VAT Excluded)</div>
<div class="result-value" id="excludingTax">0.00 AED</div>
</div>
<div class="result-item">
<div class="result-label">VAT Amount (5%)</div>
<div class="result-value" id="includedVat">0.00 AED</div>
</div>
</div>
</div>
</div>
<script>
const amountInput = document.getElementById('amount');
const plusTaxTotal = document.getElementById('plusTaxTotal');
const vatAmount = document.getElementById('vatAmount');
const excludingTax = document.getElementById('excludingTax');
const includedVat = document.getElementById('includedVat');
amountInput.addEventListener('input', calculateVAT);
function calculateVAT() {
const amount = parseFloat(amountInput.value) || 0;
const vatRate = 0.05; // 5%
// Plus Tax Calculations
const vat = amount * vatRate;
const totalWithTax = amount + vat;
// Including Tax Calculations
const baseAmount = amount / (1 + vatRate);
const vatIncluded = amount - baseAmount;
// Update results
plusTaxTotal.textContent = totalWithTax.toFixed(2) + ' AED';
vatAmount.textContent = vat.toFixed(2) + ' AED';
excludingTax.textContent = baseAmount.toFixed(2) + ' AED';
includedVat.textContent = vatIncluded.toFixed(2) + ' AED';
}
</script>
</body>
</html>
