OnOneClick

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Forex Risk Calculator | Position Sizing Tool</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

body {
background: linear-gradient(145deg, #10131c 0%, #0b0e16 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
}

/* main card container */
.calculator-card {
max-width: 1100px;
width: 100%;
background: rgba(18, 22, 35, 0.85);
backdrop-filter: blur(2px);
border-radius: 2.5rem;
box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(74, 144, 226, 0.15);
overflow: hidden;
transition: all 0.2s ease;
}

/* header area */
.risk-header {
background: linear-gradient(135deg, #0f172a 0%, #0a0f1c 100%);
padding: 1.6rem 2rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.25);
}

.risk-header h1 {
font-size: 1.8rem;
font-weight: 600;
background: linear-gradient(120deg, #e2e8f0, #b9e6ff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
display: inline-flex;
align-items: center;
gap: 10px;
}

.risk-header h1::before {
content: "⚖️";
font-size: 1.8rem;
background: none;
-webkit-background-clip: unset;
color: #facc15;
}

.risk-header p {
color: #8ca3b9;
margin-top: 0.5rem;
font-size: 0.9rem;
font-weight: 400;
}

/* two column layout */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
padding: 2rem 2rem 1.8rem 2rem;
}

/* input panel and results panel */
.input-panel, .results-panel {
background: #0f121fcc;
backdrop-filter: blur(4px);
border-radius: 1.8rem;
padding: 1.4rem 1.6rem;
border: 1px solid rgba(71, 85, 105, 0.4);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transition: all 0.2s;
}

.section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1.25rem;
color: #cbd5e6;
border-left: 4px solid #3b82f6;
padding-left: 0.75rem;
letter-spacing: -0.2px;
}

.input-group {
margin-bottom: 1.3rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
}

.input-group label {
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #9ab3cf;
display: flex;
align-items: center;
gap: 6px;
}

.input-group label i {
font-style: normal;
font-weight: 600;
}

.input-field {
background: #05070f;
border: 1px solid #2d3a4e;
border-radius: 1.2rem;
padding: 0.8rem 1rem;
font-size: 1rem;
font-weight: 500;
color: #f1f5f9;
transition: all 0.2s;
outline: none;
width: 100%;
}

.input-field:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
background: #0b0f1a;
}

.input-field[readonly] {
background: #11161f;
border-color: #334155;
color: #a5c9ff;
cursor: default;
}

.helper-text {
font-size: 0.7rem;
color: #6c86a3;
margin-top: 0.2rem;
}

.currency-hint {
background: #101624;
border-radius: 1rem;
padding: 0.8rem 1rem;
margin-top: 1rem;
font-size: 0.8rem;
border-left: 3px solid #facc15;
color: #b9d0f0;
}

/* results styling */
.risk-metric {
background: #080c16;
border-radius: 1.2rem;
padding: 1rem 1.2rem;
margin-bottom: 1rem;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid #1e2a3a;
}

.metric-label {
font-size: 0.85rem;
font-weight: 500;
color: #8da3c2;
}

.metric-value {
font-size: 1.6rem;
font-weight: 700;
color: #facc15;
letter-spacing: -0.5px;
font-family: 'JetBrains Mono', monospace;
}

.metric-sub {
font-size: 0.75rem;
color: #64b5f6;
margin-left: 6px;
}

.lot-box {
background: linear-gradient(115deg, #13263f, #0a101f);
margin-top: 1rem;
border-radius: 1.4rem;
padding: 1rem 1.2rem;
text-align: center;
border: 1px solid #3b82f640;
}

.lot-label {
font-size: 0.75rem;
text-transform: uppercase;
color: #7e9bcb;
}

.lot-size-value {
font-size: 2.2rem;
font-weight: 800;
color: #4ade80;
text-shadow: 0 0 4px #14532d;
word-break: break-word;
}

.warning-note {
font-size: 0.7rem;
color: #efb041;
margin-top: 0.5rem;
}

/* table-like representation for SL points/pips */
.info-row-grid {
display: flex;
justify-content: space-between;
gap: 0.8rem;
margin-top: 1rem;
flex-wrap: wrap;
}

.info-chip {
background: #0e1422;
border-radius: 1rem;
padding: 0.6rem 0.9rem;
flex: 1;
text-align: center;
}

.info-chip span:first-child {
font-size: 0.7rem;
color: #7a93b0;
display: block;
}

.info-chip span:last-child {
font-size: 1.2rem;
font-weight: 700;
color: #bfd9ff;
}

hr {
border-color: #1e2a3a;
margin: 0.8rem 0;
}

footer {
font-size: 0.7rem;
text-align: center;
padding: 1rem 2rem 1.5rem;
color: #4a627a;
border-top: 1px solid #1e2a3a;
}

@media (max-width: 720px) {
.dashboard-grid {
grid-template-columns: 1fr;
padding: 1.2rem;
gap: 1.2rem;
}
.metric-value {
font-size: 1.3rem;
}
.lot-size-value {
font-size: 1.6rem;
}
}

button {
background: none;
border: none;
}

.pill-note {
background: #1e2a3a;
border-radius: 40px;
padding: 0.2rem 0.6rem;
font-size: 0.7rem;
color: #a0bbdf;
}
</style>
</head>
<body>
<div class="calculator-card">
<div class="risk-header">
<h1>RISK CALCULATOR · POSITION SIZING</h1>
<p>Account risk based calculator | Lot size, Stop Loss pips & risk amount — inspired by professional trading sheets</p>
</div>
<div class="dashboard-grid">

<div class="input-panel">
<div class="section-title">⚙️ TRADE PARAMETERS</div>

<div class="input-group">
<label>💰 ACCOUNT SIZE (USD)</label>
<input type="number" id="accountSize" class="input-field" value="10000" step="100" placeholder="e.g., 10000">
<div class="helper-text">Your total trading capital in USD</div>
</div>

<div class="input-group">
<label>📉 RISK PERCENTAGE (%)</label>
<input type="number" id="riskPercent" class="input-field" value="1" step="0.1" placeholder="% risk per trade">
<div class="helper-text">Maximum risk per trade as % of account</div>
</div>

<div class="input-group">
<label>📏 STOP LOSS (PIPS)</label>
<input type="number" id="slPipsInput" class="input-field" value="15" step="1" placeholder="e.g., 15 pips">
<div class="helper-text">Stop Loss distance in pips (standard 4/5 digit broker)</div>
</div>

<div class="input-group">
<label>💱 INSTRUMENT / PIP VALUE (USD per pip)</label>
<input type="number" id="pipValue" class="input-field" value="10" step="0.5" placeholder="e.g., 10 for EURUSD standard lot">
<div class="helper-text">
<span>Standard lots: 1 lot = $10 per pip (Forex majors). For mini lots, adjust accordingly.</span>
</div>
</div>

<div class="currency-hint">
💡 <strong>Pip value reference</strong><br>
• 1 standard lot = $10 per pip (EURUSD, GBPUSD, etc.)<br>
• 0.1 lot (mini) = $1 per pip<br>
• 0.01 lot (micro) = $0.10 per pip<br>
Modify the "Pip value (USD/pip)" field to match your instrument / lot size convention.
</div>
</div>

<div class="results-panel">
<div class="section-title">📊 RISK METRICS</div>

<div class="risk-metric">
<span class="metric-label">RISK AMOUNT (USD)</span>
<span><span class="metric-value" id="riskAmountDisplay">0.00</span> <span class="metric-sub">USD</span></span>
</div>

<div class="info-row-grid">
<div class="info-chip">
<span>STOP LOSS (Points)</span>
<span id="slPointsDisplay">0</span>
</div>
<div class="info-chip">
<span>STOP LOSS (Pips)</span>
<span id="slPipsDisplay">0</span>
</div>
</div>

<div class="lot-box">
<div class="lot-label">RECOMMENDED POSITION SIZE</div>
<div class="lot-size-value" id="lotSizeDisplay">0.000</div>
<div class="warning-note" id="lotWarning">
⚡ Based on risk amount ÷ (SL pips × pip value)
</div>
</div>

<hr>

<div class="info-row-grid">
<div class="info-chip" style="flex:2">
<span>📐 Formula: Lot Size = Risk $ / (SL_pips × PipValue_per_pip)</span>
</div>
</div>
<div style="font-size: 0.7rem; text-align: center; margin-top: 0.5rem; color:#6883a5;">
* SL Points = SL Pips × 10 (for standard 4-digit quoting)  |   Matching your Excel logic
</div>
</div>
</div>
<footer>
⚡ Dynamic risk calculator replicating spreadsheet logic: RISK AMOUNT = Account × Risk%, SL POINTS = SL Pips × 10,
SL PIPS = user input, LOT SIZE = RISK_AMOUNT / (SL_PIPS * PipValue). Adjust pip value per instrument.
</footer>
</div>

// Display fields
const riskAmountSpan = document.getElementById('riskAmountDisplay');
const slPointsSpan = document.getElementById('slPointsDisplay');
const slPipsDisplaySpan = document.getElementById('slPipsDisplay');
const lotSizeSpan = document.getElementById('lotSizeDisplay');
const lotWarningSpan = document.getElementById('lotWarning');

// Helper: Format number with decimals
function formatMoney(value) {
return value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function formatLotSize(value) {
if (value < 0.001 && value > 0) return value.toFixed(4);
if (value < 0.01) return value.toFixed(4);
if (value < 1) return value.toFixed(3);
return value.toFixed(2);
}

function formatPoints(value) {
return Math.floor(value) === value ? value.toString() : value.toFixed(1);
}

// Core update function
function updateCalculator() {
// Retrieve values with fallback
let account = parseFloat(accountInput.value);
let riskPct = parseFloat(riskPercentInput.value);
let slPips = parseFloat(slPipsInput.value);
let pipVal = parseFloat(pipValueInput.value);

// Validation & sanitization
if (isNaN(account) || account <= 0) {
account = 0;
accountInput.value = 0;
}
if (isNaN(riskPct) || riskPct < 0) {
riskPct = 0;
riskPercentInput.value = 0;
}
if (isNaN(slPips) || slPips <= 0) {
slPips = 0;
slPipsInput.value = 0;
}
if (isNaN(pipVal) || pipVal <= 0) {
pipVal = 0;
pipValueInput.value = 0;
}

// 1. RISK AMOUNT (USD) = Account * (Risk% / 100)
const riskAmount = (account * riskPct) / 100;
riskAmountSpan.innerText = formatMoney(riskAmount);

// 2. SL POINTS = SL Pips * 100 (matching Excel: =(I4*100) where I4 = SL pips => SL Points)
const slPoints = slPips * 100;
slPointsSpan.innerText = formatPoints(slPoints);

// 3. SL PIPS display (just the input, also ensure consistency)
slPipsDisplaySpan.innerText = slPips.toFixed(1);

// 4. LOT SIZE formula: RISK_AMOUNT / (SL_PIPS * PIP_VALUE)
let lotSize = 0;
let denominator = slPips * pipVal;
if (denominator > 0 && riskAmount > 0 && slPips > 0 && pipVal > 0) {
lotSize = riskAmount / denominator;
} else {
lotSize = 0;
}

// Guard against extreme numbers
if (lotSize > 1000) lotSize = 1000;
if (lotSize < 0) lotSize = 0;

lotSizeSpan.innerText = formatLotSize(lotSize);

// Add contextual warnings or messages
if (riskAmount <= 0) {
lotWarningSpan.innerHTML = "⚠️ Risk amount is zero. Increase account or risk percentage.";
} else if (slPips <= 0) {
lotWarningSpan.innerHTML = "⚠️ Stop Loss in pips must be greater than zero.";
} else if (pipVal <= 0) {
lotWarningSpan.innerHTML = "⚠️ Pip value must be > 0. For standard FX, $10 per pip (1 lot).";
} else if (denominator <= 0) {
lotWarningSpan.innerHTML = "⚠️ Invalid denominator (SL pips or pip value).";
} else {
lotWarningSpan.innerHTML = `⚡ Recommended lot size to risk exactly $${riskAmount.toFixed(2)} if SL = ${slPips} pips.`;
}

// Provide additional highlight for fractional lots
if (lotSize > 0 && lotSize < 0.01 && riskAmount > 0 && denominator > 0) {
lotWarningSpan.innerHTML += " <span style='color:#facc15;'> (Micro lots recommended)</span>";
} else if (lotSize > 50 && lotSize < 200) {
lotWarningSpan.innerHTML += " <span style='color:#efb041;'> High volume — check broker limits.</span>";
} else if (lotSize >= 200) {
lotWarningSpan.innerHTML += " <span style='color:#f97316;'> Extremely large size! Verify account risk.</span>";
}
}

// Event listeners for all input fields
const inputs = [accountInput, riskPercentInput, slPipsInput, pipValueInput];
inputs.forEach(input => {
input.addEventListener('input', function(e) {
// Ensure numeric and non-negative where needed
let val = parseFloat(e.target.value);
if (e.target.id === 'riskPercent') {
if (isNaN(val)) val = 0;
if (val < 0) val = 0;
if (val > 100) val = 100; // limit risk % to 100 max
riskPercentInput.value = val;
}
if (e.target.id === 'accountSize') {
if (isNaN(val)) val = 0;
if (val < 0) val = 0;
accountInput.value = val;
}
if (e.target.id === 'slPipsInput') {
if (isNaN(val)) val = 0;
if (val < 0) val = 0;
slPipsInput.value = val;
}
if (e.target.id === 'pipValue') {
if (isNaN(val)) val = 0;
if (val < 0) val = 0;
pipValueInput.value = val;
}
updateCalculator();
});
});

// initial update
updateCalculator();

// Additional validation for pip value hints - also trigger on blur to correct formatting
pipValueInput.addEventListener('blur', function() {
let val = parseFloat(pipValueInput.value);
if (isNaN(val) || val <= 0) {
pipValueInput.value = 10;
updateCalculator();
}
});
accountInput.addEventListener('blur', function() {
let val = parseFloat(accountInput.value);
if (isNaN(val) || val < 0) accountInput.value = 0;
if (val === 0 && accountInput.value !== "0") accountInput.value = 0;
updateCalculator();
});
riskPercentInput.addEventListener('blur', function() {
let val = parseFloat(riskPercentInput.value);
if (isNaN(val) || val < 0) riskPercentInput.value = 0;
if (val > 100) riskPercentInput.value = 100;
updateCalculator();
});
slPipsInput.addEventListener('blur', function() {
let val = parseFloat(slPipsInput.value);
if (isNaN(val) || val < 0) slPipsInput.value = 0;
updateCalculator();
});

// add explicit button or realtime sync (already done)
// extra feature: allow quick set for standard forex pip value $10, but user can edit.
// optionally we add a small reset for EURUSD standard
const addQuickPreset = () => {
// create subtle preset quick link
const rightPanel = document.querySelector('.results-panel');
if (rightPanel && !document.getElementById('quickPresetHelper')) {
const quickDiv = document.createElement('div');
quickDiv.id = 'quickPresetHelper';
quickDiv.style.marginTop = '10px';
quickDiv.style.display = 'flex';
quickDiv.style.gap = '8px';
quickDiv.style.justifyContent = 'center';
quickDiv.style.fontSize = '0.7rem';
quickDiv.innerHTML = `
<span class="pill-note" style="cursor:pointer" id="setStandardMajor">📌 Set Major FX: $10/pip</span>
<span class="pill-note" style="cursor:pointer" id="setMiniLot">📌 Mini Lot: $1/pip</span>
<span class="pill-note" style="cursor:pointer" id="setMicroLot">📌 Micro Lot: $0.10/pip</span>
`;
rightPanel.appendChild(quickDiv);
document.getElementById('setStandardMajor')?.addEventListener('click', () => {
pipValueInput.value = 10;
updateCalculator();
});
document.getElementById('setMiniLot')?.addEventListener('click', () => {
pipValueInput.value = 1;
updateCalculator();
});
document.getElementById('setMicroLot')?.addEventListener('click', () => {
pipValueInput.value = 0.1;
updateCalculator();
});
}
};
addQuickPreset();
})();
</script>
</body>
</html>