Skip to content

Commit 808e0b4

Browse files
samprapistsamprapist
authored
Update index.html
1 parent 0251ae5 commit 808e0b4

1 file changed

Lines changed: 172 additions & 168 deletions

File tree

‎index.html‎

Lines changed: 172 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,194 @@
11
<!DOCTYPE html>
22
<html lang="pl">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>Kalkulator Trading</title>
6-
7-
<style>
8-
body{
9-
background:#0f0f0f;
10-
color:white;
11-
font-family:Arial;
12-
padding:20px;
13-
}
14-
.container{
15-
max-width:600px;
16-
margin:auto;
17-
}
18-
input{
19-
width:100%;
20-
padding:10px;
21-
margin-bottom:10px;
22-
background:#1a1a1a;
23-
border:1px solid #333;
24-
color:white;
25-
}
26-
button{
27-
width:100%;
28-
padding:12px;
29-
background:#00aa88;
30-
border:none;
31-
color:white;
32-
font-weight:bold;
33-
cursor:pointer;
34-
}
35-
.result{
36-
margin-top:20px;
37-
padding:15px;
38-
background:#1a1a1a;
39-
}
40-
.green{color:#00ff88;}
41-
.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-
}
57-
</style>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Universal Trading Calculator</title>
7+
<style>
8+
body { background: #0b0e11; color: #eaecef; font-family: 'Segoe UI', sans-serif; padding: 20px; }
9+
.container { max-width: 550px; margin: auto; background: #181a20; padding: 25px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
10+
h2 { text-align: center; color: #f0b90b; margin-bottom: 20px; }
11+
.input-group { margin-bottom: 15px; }
12+
label { display: block; font-size: 12px; color: #848e9c; margin-bottom: 5px; }
13+
input, select { width: 100%; padding: 12px; background: #2b2f36; border: 1px solid #474d57; color: white; border-radius: 8px; box-sizing: border-box; font-size: 14px; }
14+
input:focus { border-color: #f0b90b; outline: none; }
15+
.flex-row { display: flex; gap: 10px; }
16+
.flex-row > div { flex: 1; }
17+
button { width: 100%; padding: 15px; background: #f0b90b; border: none; color: #181a20; font-weight: bold; cursor: pointer; border-radius: 8px; font-size: 16px; margin-top: 10px; }
18+
button:hover { background: #d9a508; }
19+
.result { margin-top: 20px; padding: 20px; background: #2b3139; border-radius: 12px; }
20+
.res-line { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
21+
.green { color: #0ecb81; }
22+
.red { color: #f6465d; }
23+
.suggestions { background: #2b2f36; border: 1px solid #474d57; max-height: 200px; overflow-y: auto; position: absolute; width: calc(550px - 50px); z-index: 100; border-radius: 8px; }
24+
.suggestions div { padding: 12px; cursor: pointer; border-bottom: 1px solid #3b3f46; }
25+
.suggestions div:hover { background: #3b3f46; }
26+
.fx-bar { display: flex; justify-content: space-around; font-size: 11px; color: #848e9c; margin-top: 15px; }
27+
</style>
5828
</head>
59-
6029
<body>
6130

6231
<div class="container">
63-
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>
69-
70-
<label>Typ</label>
71-
<select id="type">
72-
<option value="buy">BUY</option>
73-
<option value="sell">SELL</option>
74-
</select>
75-
76-
<label>Kwota pozycji (PLN)</label>
77-
<input type="number" id="amount" value="1000">
78-
79-
<label>Cena wejścia</label>
80-
<input type="number" id="entry" step="0.00001">
81-
82-
<label>Stop Loss</label>
83-
<input type="number" id="sl" step="0.00001">
84-
85-
<label>Take Profit</label>
86-
<input type="number" id="tp" step="0.00001">
87-
88-
<label>Dźwignia</label>
89-
<input type="number" id="leverage" value="30">
90-
91-
<button onclick="calculate()">OBLICZ</button>
92-
93-
<div class="result" id="results"></div>
94-
32+
<h2>Smart Trade Calc</h2>
33+
34+
<div class="input-group">
35+
<label>Instrument (Wyszukaj np. GOLD, DE40, AAPL.US, PKN.PL)</label>
36+
<input type="text" id="search" placeholder="Zacznij pisać..." autocomplete="off">
37+
<div class="suggestions" id="suggestions"></div>
38+
</div>
39+
40+
<div class="flex-row">
41+
<div class="input-group">
42+
<label>Typ</label>
43+
<select id="type">
44+
<option value="buy">LONG (Kupno)</option>
45+
<option value="sell">SHORT (Sprzedaż)</option>
46+
</select>
47+
</div>
48+
<div class="input-group">
49+
<label>Twój Depozyt (PLN)</label>
50+
<input type="number" id="amount" value="1000">
51+
</div>
52+
</div>
53+
54+
<div class="input-group">
55+
<label>Cena Wejścia</label>
56+
<input type="number" id="entry" step="any" placeholder="0.0000">
57+
</div>
58+
59+
<div class="flex-row">
60+
<div class="input-group">
61+
<label>Stop Loss</label>
62+
<input type="number" id="sl" step="any">
63+
</div>
64+
<div class="input-group">
65+
<label>Take Profit</label>
66+
<input type="number" id="tp" step="any">
67+
</div>
68+
</div>
69+
70+
<div class="input-group">
71+
<label>Dźwignia (np. 30 dla 1:30)</label>
72+
<input type="number" id="leverage" value="20">
73+
</div>
74+
75+
<button onclick="calculate()">OBLICZ POZYCJĘ</button>
76+
77+
<div id="results"></div>
78+
79+
<div class="fx-bar">
80+
<span id="usdpln">USDPLN: ...</span>
81+
<span id="eurpln">EURPLN: ...</span>
82+
</div>
9583
</div>
9684

9785
<script>
98-
9986
let instruments = [];
10087
let selectedInstrument = null;
88+
let rates = { USD: 4.0, EUR: 4.30, PLN: 1.0 };
89+
90+
// 1. Pobieranie kursów walut
91+
async function fetchRates() {
92+
try {
93+
const [usdRes, eurRes] = await Promise.all([
94+
fetch("https://api.nbp.pl/api/exchangerates/rates/a/usd/?format=json").then(r => r.json()),
95+
fetch("https://api.nbp.pl/api/exchangerates/rates/a/eur/?format=json").then(r => r.json())
96+
]);
97+
rates.USD = usdRes.rates[0].mid;
98+
rates.EUR = eurRes.rates[0].mid;
99+
document.getElementById("usdpln").textContent = `USDPLN: ${rates.USD.toFixed(4)}`;
100+
document.getElementById("eurpln").textContent = `EURPLN: ${rates.EUR.toFixed(4)}`;
101+
} catch (e) {
102+
console.error("Błąd kursów walut");
103+
}
104+
}
105+
fetchRates();
101106

102-
// 🔹 Ładowanie JSON
107+
// 2. Ładowanie bazy instrumentów
103108
fetch("xtb.json")
104-
.then(res => res.json())
105-
.then(data => {
106-
instruments = data.instruments;
107-
})
108-
.catch(err => {
109-
console.error("Błąd ładowania xtb.json:", err);
110-
});
111-
112-
// 🔹 Wyszukiwarka
113-
document.getElementById("search").addEventListener("input", function(){
114-
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 = "";
109+
.then(res => res.json())
110+
.then(data => { instruments = data.instruments; })
111+
.catch(() => console.log("Upewnij się, że plik xtb.json istnieje!"));
112+
113+
// 3. Obsługa wyszukiwarki
114+
document.getElementById("search").addEventListener("input", function() {
115+
let val = this.value.toUpperCase();
116+
let box = document.getElementById("suggestions");
117+
box.innerHTML = "";
118+
if (val.length < 1) return;
119+
120+
let matches = instruments.filter(i => i.symbol.includes(val)).slice(0, 8);
121+
matches.forEach(m => {
122+
let d = document.createElement("div");
123+
d.textContent = m.symbol;
124+
d.onclick = () => {
125+
selectedInstrument = m;
126+
document.getElementById("search").value = m.symbol;
127+
box.innerHTML = "";
128+
// Przykładowa cena, jeśli masz ją w JSON
129+
if(m.price) document.getElementById("entry").value = m.price;
132130
};
133-
suggestionsBox.appendChild(div);
131+
box.appendChild(d);
134132
});
135-
136133
});
137134

138-
// 🔹 Kalkulator
139-
function calculate(){
140-
141-
if(!selectedInstrument){
142-
alert("Wybierz instrument z listy.");
143-
return;
144-
}
145-
146-
let amount = parseFloat(document.getElementById("amount").value);
147-
let entry = parseFloat(document.getElementById("entry").value);
148-
let sl = parseFloat(document.getElementById("sl").value);
149-
let tp = parseFloat(document.getElementById("tp").value);
150-
let leverage = parseFloat(document.getElementById("leverage").value);
151-
let type = document.getElementById("type").value;
152-
153-
if(!entry || !sl || !tp){
154-
alert("Uzupełnij ceny.");
155-
return;
135+
// 4. Logika obliczeń
136+
function calculate() {
137+
if (!selectedInstrument) { alert("Wybierz instrument!"); return; }
138+
139+
const amount = parseFloat(document.getElementById("amount").value);
140+
const entry = parseFloat(document.getElementById("entry").value);
141+
const sl = parseFloat(document.getElementById("sl").value);
142+
const tp = parseFloat(document.getElementById("tp").value);
143+
const leverage = parseFloat(document.getElementById("leverage").value);
144+
const type = document.getElementById("type").value;
145+
146+
if (!entry || !sl || !tp) { alert("Uzupełnij ceny!"); return; }
147+
148+
// DETEKCJA WALUTY INSTRUMENTU
149+
let currency = "USD"; // domyślnie USA/Surowce
150+
const sym = selectedInstrument.symbol;
151+
152+
if (sym.endsWith(".PL") || sym.includes("W20")) currency = "PLN";
153+
else if (sym.endsWith(".DE") || sym.includes("EU") || sym.includes("DE40")) currency = "EUR";
154+
155+
const currentCrossRate = rates[currency];
156+
157+
// OBLICZENIA
158+
// 1. Wartość pozycji w PLN (Depozyt * Dźwignia)
159+
const posValuePLN = amount * leverage;
160+
161+
// 2. Wartość pozycji w walucie instrumentu
162+
const posValueNominal = posValuePLN / currentCrossRate;
163+
164+
// 3. Ilość jednostek (np. ile uncji złota lub ile akcji Apple)
165+
const quantity = posValueNominal / entry;
166+
167+
// 4. Zysk i Strata
168+
const diffSL = type === "buy" ? (entry - sl) : (sl - entry);
169+
const diffTP = type === "buy" ? (tp - entry) : (entry - tp);
170+
171+
const riskInCurrency = diffSL * quantity;
172+
const rewardInCurrency = diffTP * quantity;
173+
174+
// 5. Powrót do PLN
175+
const riskPLN = riskInCurrency * currentCrossRate;
176+
const rewardPLN = rewardInCurrency * currentCrossRate;
177+
178+
const rr = Math.abs(rewardPLN / riskPLN);
179+
180+
document.getElementById("results").innerHTML = `
181+
<div class="result">
182+
<div class="res-line"><span>Waluta kwotowania:</span> <b>${currency} (kurs: ${currentCrossRate.toFixed(4)})</b></div>
183+
<div class="res-line"><span>Wartość kontraktu:</span> <b>${posValuePLN.toFixed(2)} PLN</b></div>
184+
<div class="res-line"><span>Wielkość (Ilość):</span> <b>${quantity.toFixed(4)} jednostek</b></div>
185+
<hr style="border:0; border-top:1px solid #3b3f46; margin: 15px 0;">
186+
<div class="res-line"><span>Ryzyko (Stop Loss):</span> <span class="red">-${riskPLN.toFixed(2)} PLN</span></div>
187+
<div class="res-line"><span>Zysk (Take Profit):</span> <span class="green">+${rewardPLN.toFixed(2)} PLN</span></div>
188+
<div class="res-line"><span>Stosunek R:R:</span> <b>1 : ${rr.toFixed(2)}</b></div>
189+
</div>
190+
`;
156191
}
157-
158-
// ilość jednostek
159-
let quantity = amount / entry;
160-
161-
// margin
162-
let margin = amount / leverage;
163-
164-
// dystans
165-
let slDistance = type==="buy" ? (entry - sl) : (sl - entry);
166-
let tpDistance = type==="buy" ? (tp - entry) : (entry - tp);
167-
168-
// zysk / strata
169-
let riskMoney = slDistance * quantity;
170-
let rewardMoney = tpDistance * quantity;
171-
172-
let rr = rewardMoney / riskMoney;
173-
174-
document.getElementById("results").innerHTML = `
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>
179-
<hr>
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)}
183-
`;
184-
185-
}
186-
187192
</script>
188-
189193
</body>
190194
</html>

0 commit comments

Comments
 (0)