Plex-Bet / calc.html
plex-media's picture
Rename kos_kalkulator.html to calc.html
c271568 verified
Raw
History Blame Contribute Delete
20.2 kB
<!DOCTYPE html>
<html lang="bs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KOŠ Kalkulator | Sigurna Zona</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0c10;
--surface: #111318;
--card: #161a22;
--border: #1e2330;
--accent: #f0b429;
--accent2: #3b82f6;
--danger: #ef4444;
--success: #22c55e;
--text: #e8eaf0;
--muted: #5a6070;
--subtle: #2a303d;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'DM Sans', sans-serif;
min-height: 100vh;
padding: 0;
overflow-x: hidden;
}
/* Background texture */
body::before {
content: '';
position: fixed;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(240,180,41,0.04) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(59,130,246,0.05) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.wrapper {
position: relative;
z-index: 1;
max-width: 780px;
margin: 0 auto;
padding: 32px 20px 60px;
}
/* Header */
header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 36px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.logo-area h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(42px, 8vw, 68px);
letter-spacing: 3px;
line-height: 1;
color: var(--accent);
text-shadow: 0 0 40px rgba(240,180,41,0.3);
}
.logo-area span {
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--muted);
letter-spacing: 3px;
text-transform: uppercase;
display: block;
margin-top: 4px;
}
.badge {
background: var(--subtle);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 14px;
font-family: 'DM Mono', monospace;
font-size: 10px;
color: var(--muted);
letter-spacing: 2px;
text-transform: uppercase;
}
/* Section label */
.section-label {
font-family: 'DM Mono', monospace;
font-size: 10px;
letter-spacing: 3px;
color: var(--muted);
text-transform: uppercase;
margin-bottom: 14px;
}
/* Panel */
.panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
margin-bottom: 20px;
}
.panel-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 2px;
color: var(--accent);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.panel-title::before {
content: '';
display: block;
width: 3px;
height: 18px;
background: var(--accent);
border-radius: 2px;
}
/* Form grid */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 500px) {
.form-grid { grid-template-columns: 1fr; }
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group.full { grid-column: 1 / -1; }
label {
font-size: 11px;
font-weight: 600;
color: var(--muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
input[type="number"], input[type="text"], select {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
font-family: 'DM Mono', monospace;
font-size: 15px;
padding: 11px 14px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
-moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
input:focus, select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(240,180,41,0.1);
}
select option { background: var(--surface); }
/* Target selector */
.target-group {
display: flex;
gap: 8px;
}
.target-btn {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 12px;
padding: 10px 8px;
cursor: pointer;
transition: all 0.18s;
text-align: center;
letter-spacing: 1px;
}
.target-btn.active {
background: rgba(240,180,41,0.12);
border-color: var(--accent);
color: var(--accent);
}
.target-btn:hover:not(.active) {
border-color: var(--subtle);
color: var(--text);
}
/* Primary button */
.btn-calc {
width: 100%;
background: var(--accent);
border: none;
border-radius: 10px;
color: #0a0c10;
font-family: 'Bebas Neue', sans-serif;
font-size: 20px;
letter-spacing: 3px;
padding: 16px;
cursor: pointer;
transition: all 0.2s;
margin-top: 8px;
}
.btn-calc:hover {
background: #ffc940;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(240,180,41,0.25);
}
.btn-calc:active { transform: translateY(0); }
/* Results */
#results { display: none; }
.summary-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
@media (max-width: 500px) {
.summary-grid { grid-template-columns: 1fr 1fr; }
}
.stat-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 14px;
text-align: center;
}
.stat-box .val {
font-family: 'Bebas Neue', sans-serif;
font-size: 26px;
letter-spacing: 1px;
line-height: 1;
margin-bottom: 6px;
}
.stat-box .lbl {
font-size: 10px;
color: var(--muted);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.val.gold { color: var(--accent); }
.val.blue { color: var(--accent2); }
.val.red { color: var(--danger); }
.val.green { color: var(--success); }
/* Quarters table */
.q-table {
width: 100%;
border-collapse: collapse;
font-family: 'DM Mono', monospace;
font-size: 13px;
}
.q-table thead th {
background: var(--subtle);
color: var(--muted);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.q-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.15s;
}
.q-table tbody tr:hover { background: var(--subtle); }
.q-table tbody tr:last-child { border-bottom: none; }
.q-table tbody td {
padding: 12px 14px;
color: var(--text);
}
.q-table tbody td:first-child {
color: var(--muted);
font-size: 11px;
}
.chip {
display: inline-block;
border-radius: 4px;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
}
.chip-win { background: rgba(34,197,94,0.15); color: var(--success); }
.chip-lose { background: rgba(239,68,68,0.12); color: var(--danger); }
/* Warning box */
.warning-box {
background: rgba(239,68,68,0.07);
border: 1px solid rgba(239,68,68,0.2);
border-radius: 10px;
padding: 14px 18px;
margin-top: 16px;
font-size: 12px;
color: #f87171;
line-height: 1.6;
}
.warning-box strong { color: var(--danger); }
/* Risk meter */
.risk-bar-wrap {
margin-top: 16px;
}
.risk-bar-label {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
letter-spacing: 1px;
margin-bottom: 8px;
}
.risk-bar-track {
height: 6px;
background: var(--subtle);
border-radius: 99px;
overflow: hidden;
}
.risk-bar-fill {
height: 100%;
border-radius: 99px;
transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
/* Divider */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 20px 0;
}
/* Reset link */
.reset-btn {
background: none;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 11px;
letter-spacing: 2px;
padding: 8px 18px;
cursor: pointer;
transition: all 0.18s;
text-transform: uppercase;
display: block;
margin: 20px auto 0;
}
.reset-btn:hover { color: var(--text); border-color: var(--muted); }
/* Footer */
footer {
margin-top: 48px;
text-align: center;
font-size: 11px;
color: var(--muted);
font-family: 'DM Mono', monospace;
letter-spacing: 1.5px;
border-top: 1px solid var(--border);
padding-top: 20px;
}
/* Fade in */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp 0.4s ease forwards; }
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo-area">
<h1>KOŠ</h1>
<span>Betting Strategy Calculator</span>
</div>
<div class="badge">SIGURNA ZONA</div>
</header>
<!-- INPUT PANEL -->
<div class="panel">
<div class="panel-title">Postavljanje parametara</div>
<div class="form-grid">
<div class="form-group">
<label>Početni kapital (€)</label>
<input type="number" id="kapital" value="200" min="1" step="1">
</div>
<div class="form-group">
<label>Broj coina</label>
<input type="number" id="coini" value="30" min="1" step="1">
</div>
<div class="form-group">
<label>Kvota po četvrtini</label>
<input type="number" id="kvota" value="1.80" min="1.01" step="0.01">
</div>
<div class="form-group">
<label>Cilj profita (coini)</label>
<div class="target-group">
<button class="target-btn active" data-val="1" onclick="setTarget(this)">1 coin</button>
<button class="target-btn" data-val="0.5" onclick="setTarget(this)">0.5 coin</button>
<button class="target-btn" data-val="0" onclick="setTarget(this)">Vrati ulog</button>
</div>
</div>
<div class="form-group full">
<label>Simuliraj ishod četvrtina (opcionalno — ostavi prazno za prikaz plana)</label>
<input type="text" id="ishodi" placeholder="npr: I,I,W ili I,W ili W (I=izgubio, W=pobijedio)">
</div>
</div>
<button class="btn-calc" onclick="izracunaj()">IZRAČUNAJ</button>
</div>
<!-- RESULTS -->
<div id="results">
<div class="section-label">Rezultati analize</div>
<div class="summary-grid">
<div class="stat-box">
<div class="val gold" id="res-coin-val"></div>
<div class="lbl">Vrijednost coina</div>
</div>
<div class="stat-box">
<div class="val blue" id="res-start-ulog"></div>
<div class="lbl">Početni ulog</div>
</div>
<div class="stat-box">
<div class="val" id="res-profit-target"></div>
<div class="lbl">Cilj profita</div>
</div>
<div class="stat-box">
<div class="val" id="res-max-gubitak"></div>
<div class="lbl">Max. gubitak (4Q)</div>
</div>
<div class="stat-box">
<div class="val" id="res-max-q"></div>
<div class="lbl">Maks. četvrtina</div>
</div>
<div class="stat-box">
<div class="val" id="res-krajnji"></div>
<div class="lbl" id="res-krajnji-lbl">Ishod simulacije</div>
</div>
</div>
<div class="panel">
<div class="panel-title">Plan klađenja po četvrtinama</div>
<table class="q-table">
<thead>
<tr>
<th>#</th>
<th>Ulog (€)</th>
<th>Ulog (coini)</th>
<th>Kvota</th>
<th>Potencijal (€)</th>
<th>Profit ako win (€)</th>
<th id="th-status" style="display:none;">Ishod</th>
</tr>
</thead>
<tbody id="q-tbody"></tbody>
</table>
<div class="risk-bar-wrap">
<div class="risk-bar-label">
<span>RIZIK EKSPOZICIJE</span>
<span id="risk-pct"></span>
</div>
<div class="risk-bar-track">
<div class="risk-bar-fill" id="risk-fill" style="width:0%"></div>
</div>
</div>
</div>
<div class="warning-box" id="warning-box"></div>
<button class="reset-btn" onclick="resetForm()">↺ RESET</button>
</div>
<footer>
KOŠ Kalkulator — Sigurna Zona &nbsp;·&nbsp; Koristi odgovorno &nbsp;·&nbsp; 18+
</footer>
</div>
<script>
let targetVal = 1;
function setTarget(btn) {
document.querySelectorAll('.target-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
targetVal = parseFloat(btn.dataset.val);
}
function fmt(n, dec=2) {
return n.toFixed(dec).replace('.', ',');
}
function izracunaj() {
const kapital = parseFloat(document.getElementById('kapital').value);
const coini = parseInt(document.getElementById('coini').value);
const kvota = parseFloat(document.getElementById('kvota').value);
const ishodiRaw = document.getElementById('ishodi').value.trim().toUpperCase();
if (!kapital || !coini || !kvota || kvota <= 1) {
alert('Provjeri unos — kvota mora biti > 1.00');
return;
}
const coinVal = kapital / coini;
const halfCoin = coinVal / 2;
// Target logic
let profitTargetCoini = targetVal;
let profitTargetEur = profitTargetCoini * coinVal;
let profitLbl;
if (targetVal === 1) profitLbl = '1 coin (' + fmt(profitTargetEur) + ' €)';
else if (targetVal === 0.5) profitLbl = '0.5 coin (' + fmt(profitTargetEur) + ' €)';
else profitLbl = 'Vrati ulog (0 profita)';
// Calculate required starting bet to achieve target profit
// win_profit = ulog * (kvota - 1) >= profitTargetEur
// ulog >= profitTargetEur / (kvota - 1)
let startBetEur;
if (targetVal === 0) {
startBetEur = coinVal * 1.2; // minimal, just get money back
} else {
startBetEur = profitTargetEur / (kvota - 1);
}
// Round up to nearest 0.1 coin
startBetEur = Math.ceil(startBetEur / (coinVal * 0.1)) * (coinVal * 0.1);
// Build quarters plan (up to 4 quarters)
// After each loss, new bet = (total_lost + profitTargetEur) / (kvota - 1)
let quarters = [];
let totalLost = 0;
for (let q = 0; q < 4; q++) {
let betEur;
if (q === 0) {
betEur = startBetEur;
} else {
betEur = (totalLost + profitTargetEur) / (kvota - 1);
betEur = Math.ceil(betEur / (coinVal * 0.1)) * (coinVal * 0.1);
}
const betCoini = betEur / coinVal;
const potencijal = betEur * kvota;
const profitIfWin = potencijal - betEur - totalLost;
quarters.push({ q: q+1, betEur, betCoini, kvota, potencijal, profitIfWin });
totalLost += betEur;
}
const maxGubitak = totalLost;
const maxGubitakPct = (maxGubitak / kapital) * 100;
// Parse simulated outcomes
let ishodi = [];
if (ishodiRaw) {
ishodi = ishodiRaw.split(',').map(s => s.trim());
}
// Simulate
let finalPL = null;
let simulStop = -1;
if (ishodi.length > 0) {
let cumLost = 0;
for (let i = 0; i < ishodi.length && i < 4; i++) {
if (ishodi[i] === 'W') {
finalPL = quarters[i].profitIfWin;
simulStop = i;
break;
} else if (ishodi[i] === 'I') {
cumLost += quarters[i].betEur;
simulStop = i;
}
}
if (finalPL === null && simulStop >= 0) {
finalPL = -cumLost; // still losing
}
}
// Render
document.getElementById('res-coin-val').textContent = fmt(coinVal) + ' €';
document.getElementById('res-start-ulog').textContent = fmt(startBetEur) + ' €';
document.getElementById('res-profit-target').textContent = profitLbl;
document.getElementById('res-profit-target').className = 'val gold';
document.getElementById('res-max-gubitak').textContent = fmt(maxGubitak) + ' €';
document.getElementById('res-max-gubitak').className = 'val red';
document.getElementById('res-max-q').textContent = '4. četvrtina';
document.getElementById('res-max-q').className = 'val blue';
const showSim = finalPL !== null;
if (showSim) {
const positive = finalPL >= 0;
document.getElementById('res-krajnji').textContent = (positive ? '+' : '') + fmt(finalPL) + ' €';
document.getElementById('res-krajnji').className = 'val ' + (positive ? 'green' : 'red');
document.getElementById('res-krajnji-lbl').textContent = 'Ishod simulacije';
} else {
document.getElementById('res-krajnji').textContent = '—';
document.getElementById('res-krajnji').className = 'val muted';
document.getElementById('res-krajnji-lbl').textContent = 'Simulacija';
}
// Table
const tbody = document.getElementById('q-tbody');
tbody.innerHTML = '';
const thStatus = document.getElementById('th-status');
if (showSim) {
thStatus.style.display = '';
} else {
thStatus.style.display = 'none';
}
quarters.forEach((q, idx) => {
const tr = document.createElement('tr');
let statusCell = '';
if (showSim && idx <= simulStop) {
const outcome = ishodi[idx];
if (outcome === 'W') {
statusCell = `<td><span class="chip chip-win">POBJEDA</span></td>`;
} else if (outcome === 'I') {
statusCell = `<td><span class="chip chip-lose">PORAZ</span></td>`;
} else {
statusCell = `<td>—</td>`;
}
} else if (showSim) {
statusCell = '<td style="color:var(--border)">—</td>';
}
// Dim rows after simulation stop
const dimmed = showSim && idx > simulStop;
tr.style.opacity = dimmed ? '0.3' : '1';
tr.innerHTML = `
<td style="color:var(--accent)">Q${q.q}</td>
<td>${fmt(q.betEur)} €</td>
<td>${fmt(q.betCoini, 3)}</td>
<td>${fmt(q.kvota, 2)}</td>
<td>${fmt(q.potencijal)} €</td>
<td style="color:var(--success)">+${fmt(q.profitIfWin)} €</td>
${showSim ? statusCell : ''}
`;
tbody.appendChild(tr);
});
// Risk bar
const riskFill = document.getElementById('risk-fill');
const riskPct = document.getElementById('risk-pct');
const riskW = Math.min(maxGubitakPct, 100);
riskFill.style.width = riskW + '%';
riskFill.style.background = riskW < 30
? 'var(--success)'
: riskW < 60
? 'var(--accent)'
: 'var(--danger)';
riskPct.textContent = fmt(maxGubitakPct, 1) + '%';
// Warning
const wb = document.getElementById('warning-box');
let warnings = [];
if (maxGubitakPct > 50) {
warnings.push('<strong>⚠ VISOK RIZIK:</strong> Maksimalni gubitak (sve 4 četvrtine) iznosi <strong>' + fmt(maxGubitak) + ' €</strong> — ' + fmt(maxGubitakPct, 1) + '% kapitala.');
} else if (maxGubitakPct > 25) {
warnings.push('<strong>⚠ UMJEREN RIZIK:</strong> Maksimalni gubitak iznosi ' + fmt(maxGubitak) + ' € (' + fmt(maxGubitakPct, 1) + '% kapitala).');
}
if (kvota < 1.4) {
warnings.push('Kvota ispod 1.40 — sistem ne garantuje povrat uloga prema pravilima strategije. Ulog se može samo vratiti, ali bez profita.');
}
if (quarters[3].betCoini > coini * 0.4) {
warnings.push('Ulog u 4. četvrtini prelazi 40% ukupnog broja coina — Martingale eskalacija.');
}
warnings.push('Ovo je Martingale varijanta. Matematička prednost kladionice ostaje nepromijenjena bez obzira na sistem uloga. Koristi odgovorno.');
wb.innerHTML = warnings.join('<br><br>');
wb.style.display = warnings.length ? '' : 'none';
// Show results
const resultsEl = document.getElementById('results');
resultsEl.style.display = 'block';
resultsEl.classList.remove('fade-in');
void resultsEl.offsetWidth;
resultsEl.classList.add('fade-in');
resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function resetForm() {
document.getElementById('results').style.display = 'none';
document.getElementById('ishodi').value = '';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
</body>
</html>