120 lines
5.1 KiB
PHP
120 lines
5.1 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>26zxHyperliquid</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="trading-terminal">
|
|
<header class="trading-terminal-card terminal-header d-flex justify-content-between align-items-center">
|
|
<h1 class="brand-title fs-4 mb-0">26zx<span>Hyperliquid</span></h1>
|
|
<button id="theme-toggle">Toggle Theme</button>
|
|
<button id="api-key-modal-btn">API Key</button>
|
|
<button id="getUserStateButton" class="btn btn-sm btn-info ms-2">Get User State</button>
|
|
</header>
|
|
|
|
<div id="user-state-container" class="trading-terminal-card" style="display: none;">
|
|
<h5 class="mb-3">User State</h5>
|
|
<pre id="user-state-data"></pre>
|
|
</div>
|
|
|
|
<div id="api-key-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close-btn">×</span>
|
|
<h2>API Key Management</h2>
|
|
<form id="api-key-form">
|
|
<div class="form-group">
|
|
<label for="api-key">API Key</label>
|
|
<input type="password" id="api-key" name="api-key" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="api-secret">API Secret</label>
|
|
<input type="password" id="api-secret" name="api-secret" required>
|
|
</div>
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
<div id="api-key-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="trading-terminal-card order-entry">
|
|
<h5 class="mb-3">Order Entry</h5>
|
|
<form>
|
|
<div class="mb-2">
|
|
<label for="coin" class="form-label">Coin</label>
|
|
<select class="form-select form-select-sm" id="coin">
|
|
<option selected>ETH</option>
|
|
<option>BTC</option>
|
|
<option>SOL</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="btn-group btn-group-sm w-100 mb-3" role="group">
|
|
<input type="radio" class="btn-check" name="order-type" id="limit-order" autocomplete="off" checked>
|
|
<label class="btn btn-outline-primary" for="limit-order">Limit</label>
|
|
|
|
<input type="radio" class="btn-check" name="order-type" id="market-order" autocomplete="off">
|
|
<label class="btn btn-outline-primary" for="market-order">Market</label>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label for="price" class="form-label">Price (USD)</label>
|
|
<input type="number" class="form-control form-control-sm" id="price" placeholder="3000.00">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="amount" class="form-label">Amount</label>
|
|
<input type="number" class="form-control form-control-sm" id="amount" placeholder="0.1">
|
|
</div>
|
|
|
|
<div class="mb-3 leverage-slider-container">
|
|
<label for="leverage" class="form-label">Leverage: <span class="value" id="leverage-value">10</span>x</label>
|
|
<input type="range" class="form-range" min="1" max="100" step="1" value="10" id="leverage">
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-sm btn-success">Buy / Long</button>
|
|
<button type="button" class="btn btn-sm btn-danger">Sell / Short</button>
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
|
|
<main class="trading-terminal-card chart" id="tv_chart_container">
|
|
</main>
|
|
|
|
<aside id="order-book-container" class="trading-terminal-card order-book">
|
|
<h5 class="mb-3">Order Book</h5>
|
|
<div id="order-book-data" class="order-book-data"></div>
|
|
</aside>
|
|
|
|
<footer id="trade-feed-container" class="trading-terminal-card positions">
|
|
<h5 class="mb-3">Recent Trades</h5>
|
|
<div id="trade-feed-data" class="trade-feed-data"></div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
<script type="text/javascript">
|
|
new TradingView.widget(
|
|
{
|
|
"autosize": true,
|
|
"symbol": "BITSTAMP:BTCUSD",
|
|
"interval": "D",
|
|
"timezone": "Etc/UTC",
|
|
"theme": "dark",
|
|
"style": "1",
|
|
"locale": "en",
|
|
"enable_publishing": false,
|
|
"allow_symbol_change": true,
|
|
"container_id": "tv_chart_container"
|
|
}
|
|
);
|
|
</script>
|
|
</body>
|
|
</html> |