I can paste the code here. save it as html file. Open it in chrome browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impact Analytics Pro</title>
<script src="
https://cdn.tailwindcss.com"></script>
<style>
.animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
</style>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen flex items-center justify-center p-6 font-sans">
<div class="bg-slate-900 border border-slate-800 p-8 rounded-3xl shadow-2xl w-full max-w-lg">
<h2 class="text-3xl font-black mb-8 text-center bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
IMPACT ANALYZER
</h2>
<div class="space-y-4 mb-8">
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Player Name</label>
<input type="text" id="playerName" class="w-full bg-slate-800 border-2 border-slate-700 rounded-xl p-3 focus:border-indigo-500 outline-none transition-all text-lg font-bold" placeholder="Player Name">
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Balls Faced</label>
<input type="number" id="ballsFaced" class="w-full bg-slate-800 border-2 border-slate-700 rounded-xl p-3 focus:border-blue-500 outline-none transition-all text-lg font-bold" placeholder="0">
</div>
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Total Balls</label>
<input type="number" id="totalBalls" class="w-full bg-slate-800 border-2 border-slate-700 rounded-xl p-3 focus:border-blue-500 outline-none transition-all text-lg font-bold" placeholder="0">
</div>
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Batsman Runs</label>
<input type="number" id="batsmanRuns" class="w-full bg-slate-800 border-2 border-slate-700 rounded-xl p-3 focus:border-blue-500 outline-none transition-all text-lg font-bold" placeholder="0">
</div>
<div class="space-y-1">
<label class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em]">Total Team Runs</label>
<input type="number" id="totalRuns" class="w-full bg-slate-800 border-2 border-slate-700 rounded-xl p-3 focus:border-blue-500 outline-none transition-all text-lg font-bold" placeholder="0">
</div>
</div>
<div class="space-y-1">
<label class="text-[10px] font-bold text-orange-500 uppercase tracking-[0.2em]">Extras (Ex)</label>
<input type="number" id="extras" class="w-full bg-slate-800 border-2 border-orange-900/30 rounded-xl p-3 focus:border-orange-500 outline-none transition-all text-lg font-bold" placeholder="0">
</div>
</div>
<button onclick="calculate()" class="w-full bg-indigo-600 hover:bg-indigo-500 py-4 rounded-xl font-black text-lg shadow-lg shadow-indigo-900/40 transition-all active:scale-95 mb-8">
CALCULATE
</button>
<div id="resultsArea" class="hidden space-y-3 border-t border-slate-800 pt-6 animate-in slide-in-from-bottom-4 duration-500">
<div class="text-center mb-2">
<h3 id="displayPlayerName" class="text-xl font-black text-white uppercase tracking-wider"></h3>
<p class="text-slate-500 text-[10px] uppercase tracking-widest italic">Differential Formula: P - (Total - Ex)</p>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-slate-800/50 p-3 rounded-xl border border-slate-700">
<span class="text-slate-500 text-[10px] uppercase block">Proj. Value (P)</span>
<span id="projOutput" class="text-xl font-mono font-bold text-white">0</span>
</div>
<div class="bg-slate-800/50 p-3 rounded-xl border border-slate-700">
<span class="text-slate-500 text-[10px] uppercase block">Differential</span>
<span id="diffOutput" class="text-xl font-mono font-bold text-white">0</span>
</div>
</div>
<div id="comparisonBox" class="p-6 rounded-2xl text-center border-2 transition-all duration-500">
<p id="comparisonText" class="text-2xl font-black uppercase tracking-tighter animate-pulse-slow"></p>
</div>
</div>
</div>
<script>
function calculate() {
const name = document.getElementById('playerName').value;
const bf = parseFloat(document.getElementById('ballsFaced').value);
const tb = parseFloat(document.getElementById('totalBalls').value);
const br = parseFloat(document.getElementById('batsmanRuns').value);
const tr = parseFloat(document.getElementById('totalRuns').value);
const ex = parseFloat(document.getElementById('extras').value) || 0;
if (!name || isNaN(bf) || isNaN(tb) || isNaN(br) || isNaN(tr)) {
alert("Please complete all fields.");
return;
}
// Calculations
const P = (tb / bf) * br;
const AT = tr - ex;
const differential = P - AT;
// UI Updates
document.getElementById('resultsArea').classList.remove('hidden');
document.getElementById('displayPlayerName').innerText = name;
document.getElementById('projOutput').innerText = P.toFixed(2);
document.getElementById('diffOutput').innerText = differential.toFixed(2);
const comparisonBox = document.getElementById('comparisonBox');
const comparisonText = document.getElementById('comparisonText');
// Categorization Logic
if (differential > 0) {
comparisonText.innerText = "POSITIVE";
comparisonBox.className = "p-6 rounded-2xl text-center border-2 border-emerald-500 bg-emerald-500/10 text-emerald-400 shadow-lg shadow-emerald-900/20";
} else {
comparisonText.innerText = "NEGATIVE";
comparisonBox.className = "p-6 rounded-2xl text-center border-2 border-red-500 bg-red-500/10 text-red-500 shadow-lg shadow-red-900/20";
}
}
</script>
</body>
</html>
boobsbump
