Skip to content

Commit 0251ae5

Browse files
samprapistsamprapist
authored
Update index.html
1 parent 688e354 commit 0251ae5

1 file changed

Lines changed: 74 additions & 72 deletions

File tree

‎index.html‎

Lines changed: 74 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="pl">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Kalkulator Trading PRO</title>
5+
<title>Kalkulator Trading</title>
66

77
<style>
88
body{
@@ -15,17 +15,17 @@
1515
max-width:600px;
1616
margin:auto;
1717
}
18-
input, select{
18+
input{
1919
width:100%;
20-
padding:8px;
20+
padding:10px;
2121
margin-bottom:10px;
2222
background:#1a1a1a;
2323
border:1px solid #333;
2424
color:white;
2525
}
2626
button{
2727
width:100%;
28-
padding:10px;
28+
padding:12px;
2929
background:#00aa88;
3030
border:none;
3131
color:white;
@@ -37,40 +37,44 @@
3737
padding:15px;
3838
background:#1a1a1a;
3939
}
40-
h2{color:#00ffaa;}
4140
.green{color:#00ff88;}
4241
.red{color:#ff4444;}
42+
.suggestions{
43+
background:#1a1a1a;
44+
border:1px solid #333;
45+
max-height:150px;
46+
overflow-y:auto;
47+
margin-top:-8px;
48+
margin-bottom:10px;
49+
}
50+
.suggestions div{
51+
padding:8px;
52+
cursor:pointer;
53+
}
54+
.suggestions div:hover{
55+
background:#333;
56+
}
4357
</style>
4458
</head>
4559

4660
<body>
4761

4862
<div class="container">
49-
<h2>Kalkulator Zleceń PRO</h2>
5063

51-
<label>Instrument</label>
52-
<select id="instrument"></select>
64+
<h2>Kalkulator Zysku / Straty</h2>
65+
66+
<label>Szukaj instrumentu</label>
67+
<input type="text" id="search" placeholder="Np. AAPL, US100, EURUSD">
68+
<div class="suggestions" id="suggestions"></div>
5369

5470
<label>Typ</label>
5571
<select id="type">
5672
<option value="buy">BUY</option>
5773
<option value="sell">SELL</option>
5874
</select>
5975

60-
<label>Kapitał konta</label>
61-
<input type="number" id="capital" value="10000">
62-
63-
<label>Ryzyko (%)</label>
64-
<input type="number" id="riskPercent" value="1">
65-
66-
<label>Wielkość pozycji (loty)</label>
67-
<input type="number" id="lot" value="1" step="0.01">
68-
69-
<label>Contract Size</label>
70-
<input type="number" id="contractSize" value="100000">
71-
72-
<label>Pip Size</label>
73-
<input type="number" id="pipSize" value="0.0001" step="0.00001">
76+
<label>Kwota pozycji (PLN)</label>
77+
<input type="number" id="amount" value="1000">
7478

7579
<label>Cena wejścia</label>
7680
<input type="number" id="entry" step="0.00001">
@@ -84,9 +88,6 @@ <h2>Kalkulator Zleceń PRO</h2>
8488
<label>Dźwignia</label>
8589
<input type="number" id="leverage" value="30">
8690

87-
<label>Prowizja (%)</label>
88-
<input type="number" id="commission" value="0">
89-
9091
<button onclick="calculate()">OBLICZ</button>
9192

9293
<div class="result" id="results"></div>
@@ -96,88 +97,89 @@ <h2>Kalkulator Zleceń PRO</h2>
9697
<script>
9798

9899
let instruments = [];
100+
let selectedInstrument = null;
99101

100-
// 🔹 Ładowanie instrumentów z xtb.json
102+
// 🔹 Ładowanie JSON
101103
fetch("xtb.json")
102104
.then(res => res.json())
103105
.then(data => {
104-
105106
instruments = data.instruments;
107+
})
108+
.catch(err => {
109+
console.error("Błąd ładowania xtb.json:", err);
110+
});
106111

107-
let select = document.getElementById("instrument");
112+
// 🔹 Wyszukiwarka
113+
document.getElementById("search").addEventListener("input", function(){
108114

109-
instruments.forEach((inst, i) => {
110-
let option = document.createElement("option");
111-
option.value = i;
112-
option.text = inst.symbol;
113-
select.add(option);
115+
let value = this.value.toLowerCase();
116+
let suggestionsBox = document.getElementById("suggestions");
117+
suggestionsBox.innerHTML = "";
118+
119+
if(value.length < 1) return;
120+
121+
let filtered = instruments.filter(inst =>
122+
inst.symbol.toLowerCase().includes(value)
123+
).slice(0,20);
124+
125+
filtered.forEach(inst => {
126+
let div = document.createElement("div");
127+
div.textContent = inst.symbol;
128+
div.onclick = function(){
129+
document.getElementById("search").value = inst.symbol;
130+
selectedInstrument = inst;
131+
suggestionsBox.innerHTML = "";
132+
};
133+
suggestionsBox.appendChild(div);
114134
});
115135

116-
})
117-
.catch(error => {
118-
console.error("Błąd ładowania xtb.json:", error);
119136
});
120137

121-
// 🔹 Funkcja obliczeń
138+
// 🔹 Kalkulator
122139
function calculate(){
123140

124-
let inst = instruments[document.getElementById("instrument").value];
125-
126-
if(!inst){
127-
alert("Instrument nie został załadowany.");
141+
if(!selectedInstrument){
142+
alert("Wybierz instrument z listy.");
128143
return;
129144
}
130145

131-
let capital = parseFloat(document.getElementById("capital").value);
132-
let riskPercent = parseFloat(document.getElementById("riskPercent").value);
133-
let lot = parseFloat(document.getElementById("lot").value);
146+
let amount = parseFloat(document.getElementById("amount").value);
134147
let entry = parseFloat(document.getElementById("entry").value);
135148
let sl = parseFloat(document.getElementById("sl").value);
136149
let tp = parseFloat(document.getElementById("tp").value);
137150
let leverage = parseFloat(document.getElementById("leverage").value);
138-
let commission = parseFloat(document.getElementById("commission").value);
139151
let type = document.getElementById("type").value;
140152

141-
let contractSize = parseFloat(document.getElementById("contractSize").value);
142-
let pipSize = parseFloat(document.getElementById("pipSize").value);
143-
144153
if(!entry || !sl || !tp){
145-
alert("Uzupełnij ceny wejścia, SL i TP.");
154+
alert("Uzupełnij ceny.");
146155
return;
147156
}
148157

158+
// ilość jednostek
159+
let quantity = amount / entry;
160+
161+
// margin
162+
let margin = amount / leverage;
163+
149164
// dystans
150165
let slDistance = type==="buy" ? (entry - sl) : (sl - entry);
151166
let tpDistance = type==="buy" ? (tp - entry) : (entry - tp);
152167

153-
// wartość 1 pipsa
154-
let pipValue = contractSize * lot * pipSize;
155-
156-
// ryzyko i zysk
157-
let riskMoney = (slDistance / pipSize) * pipValue;
158-
let rewardMoney = (tpDistance / pipSize) * pipValue;
168+
// zysk / strata
169+
let riskMoney = slDistance * quantity;
170+
let rewardMoney = tpDistance * quantity;
159171

160172
let rr = rewardMoney / riskMoney;
161173

162-
// wartość pozycji
163-
let positionValue = entry * contractSize * lot;
164-
let margin = positionValue / leverage;
165-
166-
let commissionCost = positionValue * (commission/100);
167-
168-
let riskAllowed = capital * (riskPercent/100);
169-
let autoLot = (riskAllowed / riskMoney) * lot;
170-
171174
document.getElementById("results").innerHTML = `
172-
<b>Instrument:</b> ${inst.symbol} (${inst.waluta})<br>
173-
<b>Wartość pozycji:</b> ${positionValue.toFixed(2)}<br>
174-
<b>Margin:</b> ${margin.toFixed(2)}<br>
175-
<b>Ryzyko:</b> <span class="red">${riskMoney.toFixed(2)}</span><br>
176-
<b>Zysk:</b> <span class="green">${rewardMoney.toFixed(2)}</span><br>
177-
<b>R:R:</b> ${rr.toFixed(2)}<br>
178-
<b>Prowizja:</b> ${commissionCost.toFixed(2)}<br>
175+
<b>Instrument:</b> ${selectedInstrument.symbol}<br>
176+
<b>Kwota pozycji:</b> ${amount.toFixed(2)} PLN<br>
177+
<b>Ilość jednostek:</b> ${quantity.toFixed(4)}<br>
178+
<b>Margin:</b> ${margin.toFixed(2)} PLN<br>
179179
<hr>
180-
<b>Lot przy ryzyku ${riskPercent}%:</b> ${autoLot.toFixed(2)}
180+
<b>Ryzyko:</b> <span class="red">${riskMoney.toFixed(2)} PLN</span><br>
181+
<b>Zysk:</b> <span class="green">${rewardMoney.toFixed(2)} PLN</span><br>
182+
<b>R:R:</b> ${rr.toFixed(2)}
181183
`;
182184

183185
}

0 commit comments

Comments
 (0)