Gold Trade Bot

<style>

* { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: var(--font-sans); }

.dash { padding: 1rem 0; }

.section-title { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 1rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-bottom: 1rem; }

.metric { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 12px 14px; }

.metric .label { font-size: 12px; color: var(--color-text-secondary); margin-bottom: 4px; }

.metric .value { font-size: 20px; font-weight: 500; color: var(--color-text-primary); }

.metric .sub { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }

.card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 1rem; }

.card-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

.pos-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 13px; }

.pos-row:last-child { border-bottom: none; }

.badge { font-size: 11px; padding: 2px 8px; border-radius: var(--border-radius-md); font-weight: 500; }

.badge-green { background: #EAF3DE; color: #3B6D11; }

.badge-amber { background: #FAEEDA; color: #854F0B; }

.badge-red { background: #FCEBEB; color: #A32D2D; }

.badge-blue { background: #E6F1FB; color: #185FA5; }

.progress-bar { height: 6px; background: var(--color-background-secondary); border-radius: 3px; overflow: hidden; margin-top: 6px; }

.progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

.tp-zone { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }

.profit-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; border-bottom: 0.5px solid var(--color-border-tertiary); }

.profit-row:last-child { border-bottom: none; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

.liq-bar { position: relative; height: 32px; background: var(--color-background-secondary); border-radius: var(--border-radius-md); overflow: hidden; margin: 8px 0; }

.liq-safe { position: absolute; left: 0; top: 0; height: 100%; background: #EAF3DE; }

.liq-warn { position: absolute; height: 100%; background: #FAEEDA; }

.liq-danger { position: absolute; right: 0; top: 0; height: 100%; background: #FCEBEB; }

.liq-marker { position: absolute; top: 0; height: 100%; width: 2px; background: #185FA5; }

.liq-price { position: absolute; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 500; }

.mini-chart { height: 80px; position: relative; margin: 8px 0; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #639922; display: inline-block; margin-right: 6px; animation: pulse 2s infinite; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.ticker { font-size: 28px; font-weight: 500; color: var(--color-text-primary); }

.ticker-change { font-size: 13px; color: #3B6D11; background: #EAF3DE; padding: 2px 8px; border-radius: var(--border-radius-md); margin-left: 8px; }

.ticker-change.neg { color: #A32D2D; background: #FCEBEB; }

.chart-wrap { position: relative; height: 120px; }

</style>

<div>

<span class="status-dot"></span>Canlı • XAU-USDT-SWAP

</div>

</div>

<div style="font-size:12px; color:var(--color-text-secondary);">Son güncelleme</div>

<i class="ti ti-refresh" aria-hidden="true"></i> Yenile

</button>

</div>

<div class="label">Giriş fiyatı (ort.)</div>

<div class="sub">1 pozisyon</div>

</div>

<div class="label">TP fiyatı</div>

</div>

<div class="label">Anlık PnL</div>

</div>

<div class="label">Toplam net kâr</div>

<div class="sub" id="tpCount">0 TP tamamlandı</div>

</div>

<div class="card-title"><i class="ti ti-chart-line" aria-hidden="true"></i> Fiyat & Seviyeler</div>

</div>

<span>— Fiyat</span>

<span style="color:#185FA5;">— Giriş ort.: $4,534.00</span>

</div>

<div class="card-title"><i class="ti ti-shield" aria-hidden="true"></i> Likidite & Risk</div>

<span class="liq-price" style="left:2%; color:#3B6D11;">Güvenli</span>

<span class="liq-price" style="left:62%; color:#854F0B;">Uyarı</span>

</div>

<span style="color:var(--color-text-secondary);">Liq. fiyatı</span>

</div>

<span style="color:var(--color-text-secondary);">Mevcut fiyat</span>

</div>

<span style="color:var(--color-text-secondary);">Liq. uzaklığı</span>

</div>

<span style="color:var(--color-text-secondary);">Kaldıraç</span>

</div>

<span style="color:var(--color-text-secondary);">Marjin modu</span>

<span>Cross</span>

</div>

<div class="card-title"><i class="ti ti-list" aria-hidden="true"></i> Açık Pozisyonlar</div>

<span style="color:var(--color-text-secondary);">Fiyat</span>

<span style="color:var(--color-text-secondary);">Miktar</span>

</div>

</div>

<div style="font-size:12px; color:var(--color-text-secondary); margin-bottom:4px;">TP'ye kalan mesafe</div>

</div>

<span>Giriş: $4,534.00</span>

</div>

<div style="font-size:12px; color:var(--color-text-secondary); margin-bottom:4px;">Sonraki DCA seviyesi</div>

</div>

<div class="card-title"><i class="ti ti-cash" aria-hidden="true"></i> Kâr Dağılımı</div>

<span><span class="dot" style="background:#639922;"></span>Spot cüzdan (%30)</span>

</div>

<span><span class="dot" style="background:#185FA5;"></span>Reinvest — Bot sermayesi (%30)</span>

</div>

<span><span class="dot" style="background:#854F0B;"></span>Staking (%40)</span>

</div>

<span style="font-weight:500;">Toplam komisyon ödendi</span>

</div>

<div class="card-title"><i class="ti ti-activity" aria-hidden="true"></i> Bot İstatistikleri</div>

<div class="metric"><div class="label">Toplam alım</div><div class="value" id="buyCount">1</div></div>

<div class="metric"><div class="label">TP sayısı</div><div class="value" id="tpCountStat">0</div></div>

<div class="metric"><div class="label">Güvenlik emirleri</div><div class="value" id="safetyCount">0</div></div>

</div>

Bota sor: Son durum nedir? ↗

</button>

</div>

const state = {

price: 4534.00,

avgEntry: 4534.00,

tp: 4547.60,

liq: 3638.54,

nextDca: 4533.00,

pnl: 0,

totalProfit: 0,

wallet: 0,

reinvest: 0,

staking: 0,

commission: 0.2267,

buyCount: 1,

tpCount: 0,

safetyCount: 0,

baseOrder: 5.00,

history: []

};

for (let i = 29; i >= 0; i--) {

state.history.push(+(4534 + (Math.random()-0.5)*8).toFixed(2));

}

state.history.push(state.price);

let chart;

function initChart() {

const ctx = document.getElementById('priceChart').getContext('2d');

const labels = state.history.map((_,i) => i === state.history.length-1 ? 'Şimdi' : '');

chart = new Chart(ctx, {

type: 'line',

data: {

labels,

datasets: [{

data: state.history,

borderColor: '#378ADD',

borderWidth: 1.5,

pointRadius: 0,

tension: 0.3,

fill: false

}]

},

options: {

responsive: true,

maintainAspectRatio: false,

plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => '$' + ctx.raw.toFixed(2) }}},

scales: {

x: { display: false },

y: {

display: true,

ticks: { font: { size: 11 }, color: '#888', callback: v => '$'+v.toFixed(0) },

grid: { color: 'rgba(128,128,128,0.1)' }

}

},

animation: { duration: 300 }

}

});

}

function updateUI() {

const p = state.price;

const avg = state.avgEntry;

const pnl = (p - avg) * 1 * 0.1;

const pnlPct = ((p/avg)-1)*100;

const tpDist = Math.max(0, Math.min(100, ((p-avg)/(state.tp-avg))*100));

document.getElementById('price').textContent = '$' + p.toLocaleString('en-US', {minimumFractionDigits:2, maximumFractionDigits:2});

document.getElementById('avgEntry').textContent = '$' + avg.toLocaleString('en-US', {minimumFractionDigits:2});

document.getElementById('tpPrice').textContent = '$' + state.tp.toFixed(2);

document.getElementById('pnl').textContent = (pnl>=0?'+':'') + '$' + pnl.toFixed(4);

document.getElementById('pnl').style.color = pnl >= 0 ? '#3B6D11' : '#A32D2D';

document.getElementById('pnlPct').textContent = (pnlPct>=0?'+':'') + pnlPct.toFixed(3) + '%';

document.getElementById('totalProfit').textContent = '$' + state.totalProfit.toFixed(4);

document.getElementById('tpCount').textContent = state.tpCount + ' TP tamamlandı';

document.getElementById('tpProgress').style.width = tpDist.toFixed(1) + '%';

document.getElementById('tpLabel').textContent = 'TP: $' + state.tp.toFixed(2);

document.getElementById('walletProfit').textContent = '$' + state.wallet.toFixed(4);

document.getElementById('reinvestProfit').textContent = '$' + state.reinvest.toFixed(4);

document.getElementById('stakingProfit').textContent = '$' + state.staking.toFixed(4);

document.getElementById('commission').textContent = '$' + state.commission.toFixed(4);

document.getElementById('buyCount').textContent = state.buyCount;

document.getElementById('tpCountStat').textContent = state.tpCount;

document.getElementById('safetyCount').textContent = state.safetyCount;

document.getElementById('baseOrder').textContent = '$' + state.baseOrder.toFixed(2);

document.getElementById('lastUpdate').textContent = new Date().toLocaleTimeString('tr-TR');

const change = ((p/4558.5)-1)*100;

const cel = document.getElementById('change');

cel.textContent = (change>=0?'+':'') + change.toFixed(2) + '%';

cel.className = 'ticker-change' + (change < 0 ? ' neg' : '');

}

function refresh() {

const delta = (Math.random()-0.48)*3;

state.price = +(state.price + delta).toFixed(2);

state.history.push(state.price);

if (state.history.length > 50) state.history.shift();

if (chart) {

chart.data.labels = state.history.map((_,i) => i===state.history.length-1?'Şimdi':'');

chart.data.datasets[0].data = [...state.history];

chart.update();

}

updateUI();

}

initChart();

updateUI();

setInterval(refresh, 10000);

</script>