Hugging Face's logo

Spaces:
kali33
/
traphouse
Running

App Files Community
traphouse / index.html
kali33's picture
kali33
Add 3 files
8a86aab verified
raw
history blame contribute delete
24.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>BitTrade Pro | Bitcoin Trading Platform</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
 }
 .animate-pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 .price-up {
 color: #10b981;
 }
 .price-down {
 color: #ef4444;
 }
 .gradient-bg {
 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
 }
 .tradingview-widget-container iframe {
 border-radius: 0.75rem;
 }
 .order-book {
 scrollbar-width: thin;
 scrollbar-color: #334155 #1e293b;
 }
 .order-book::-webkit-scrollbar {
 width: 6px;
 }
 .order-book::-webkit-scrollbar-track {
 background: #1e293b;
 }
 .order-book::-webkit-scrollbar-thumb {
 background-color: #334155;
 border-radius: 3px;
 }
 </style>
</head>
<body class="gradient-bg text-gray-100 min-h-screen">
 <div class="container mx-auto px-4 py-6">
 <!-- Header -->
 <header class="flex justify-between items-center mb-8">
 <div class="flex items-center space-x-2">
 <i class="fab fa-bitcoin text-yellow-500 text-3xl"></i>
 <h1 class="text-2xl font-bold">BitTrade<span class="text-yellow-500">Pro</span></h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="hidden md:flex items-center space-x-2 bg-slate-800 px-3 py-2 rounded-lg">
 <i class="fas fa-wallet text-yellow-500"></i>
 <span class="font-medium">$25,430.00</span>
 </div>
 <div class="hidden md:flex items-center space-x-2 bg-slate-800 px-3 py-2 rounded-lg">
 <i class="fas fa-coins text-yellow-500"></i>
 <span class="font-medium">1.25 BTC</span>
 </div>
 <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold px-4 py-2 rounded-lg transition">
 <i class="fas fa-user mr-2"></i>Account
 </button>
 </div>
 </header>
<!-- Main Content -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Left Column -->
 <div class="lg:col-span-2 space-y-6">
 <!-- Market Overview -->
 <div class="bg-slate-800 rounded-xl p-4">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-xl font-bold">BTC/USD</h2>
 <div class="flex items-center space-x-4">
 <div class="text-right">
 <div class="text-sm text-gray-400">Price</div>
 <div id="btc-price" class="text-2xl font-bold">$36,842.75</div>
 </div>
 <div class="text-right">
 <div class="text-sm text-gray-400">24h Change</div>
 <div id="btc-change" class="text-2xl font-bold price-up">+2.45%</div>
 </div>
 </div>
 </div>
 <div class="h-64">
 <!-- TradingView Widget -->
 <div class="tradingview-widget-container">
 <div class="tradingview-widget-container__widget"></div>
 <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
 {
 "autosize": true,
 "symbol": "BINANCE:BTCUSDT",
 "interval": "15",
 "timezone": "Etc/UTC",
 "theme": "dark",
 "style": "1",
 "locale": "en",
 "enable_publishing": false,
 "hide_top_toolbar": true,
 "hide_side_toolbar": false,
 "allow_symbol_change": true,
 "details": true,
 "hotlist": true,
 "calendar": false,
 "support_host": "https://www.tradingview.com"
 }
 </script>
 </div>
 </div>
 </div>
<!-- Buy/Sell Panel -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Buy Panel -->
 <div class="bg-slate-800 rounded-xl p-4">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-bold text-green-500">Buy BTC</h3>
 <div class="text-sm text-gray-400">Available: $25,430.00</div>
 </div>
 <div class="space-y-4">
 <div>
 <label class="block text-sm text-gray-400 mb-1">Amount (USD)</label>
 <div class="relative">
 <input type="number" id="buy-amount" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="0.00">
 <div class="absolute right-3 top-3 text-sm text-gray-400">USD</div>
 </div>
 </div>
 <div>
 <label class="block text-sm text-gray-400 mb-1">Price (USD)</label>
 <div class="relative">
 <input type="number" id="buy-price" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="0.00">
 <div class="absolute right-3 top-3 text-sm text-gray-400">USD</div>
 </div>
 </div>
 <div>
 <label class="block text-sm text-gray-400 mb-1">Total</label>
 <div class="relative">
 <input type="number" id="buy-total" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="0.00" readonly>
 <div class="absolute right-3 top-3 text-sm text-gray-400">BTC</div>
 </div>
 </div>
 <button id="buy-button" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition flex items-center justify-center">
 <i class="fas fa-arrow-up mr-2"></i> Buy Bitcoin
 </button>
 </div>
 </div>
<!-- Sell Panel -->
 <div class="bg-slate-800 rounded-xl p-4">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-bold text-red-500">Sell BTC</h3>
 <div class="text-sm text-gray-400">Available: 1.25 BTC</div>
 </div>
 <div class="space-y-4">
 <div>
 <label class="block text-sm text-gray-400 mb-1">Amount (BTC)</label>
 <div class="relative">
 <input type="number" id="sell-amount" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="0.00">
 <div class="absolute right-3 top-3 text-sm text-gray-400">BTC</div>
 </div>
 </div>
 <div>
 <label class="block text-sm text-gray-400 mb-1">Price (USD)</label>
 <div class="relative">
 <input type="number" id="sell-price" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="0.00">
 <div class="absolute right-3 top-3 text-sm text-gray-400">USD</div>
 </div>
 </div>
 <div>
 <label class="block text-sm text-gray-400 mb-1">Total</label>
 <div class="relative">
 <input type="number" id="sell-total" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-yellow-500" placeholder="0.00" readonly>
 <div class="absolute right-3 top-3 text-sm text-gray-400">USD</div>
 </div>
 </div>
 <button id="sell-button" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition flex items-center justify-center">
 <i class="fas fa-arrow-down mr-2"></i> Sell Bitcoin
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Right Column -->
 <div class="space-y-6">
 <!-- Order Book -->
 <div class="bg-slate-800 rounded-xl p-4">
 <h2 class="text-lg font-bold mb-4">Order Book</h2>
 <div class="flex justify-between text-sm text-gray-400 mb-2">
 <span>Price (USD)</span>
 <span>Amount (BTC)</span>
 <span>Total</span>
 </div>
 <div class="order-book max-h-64 overflow-y-auto">
 <!-- Sell Orders -->
 <div class="space-y-1 mb-4">
 <div class="flex justify-between text-sm text-red-500">
 <span>36,870.25</span>
 <span>0.452</span>
 <span>16,667.35</span>
 </div>
 <div class="flex justify-between text-sm text-red-500">
 <span>36,865.50</span>
 <span>0.321</span>
 <span>11,833.83</span>
 </div>
 <div class="flex justify-between text-sm text-red-500">
 <span>36,860.75</span>
 <span>0.278</span>
 <span>10,247.69</span>
 </div>
 <div class="flex justify-between text-sm text-red-500">
 <span>36,855.00</span>
 <span>0.145</span>
 <span>5,343.98</span>
 </div>
 <div class="flex justify-between text-sm text-red-500">
 <span>36,850.50</span>
 <span>0.098</span>
 <span>3,611.35</span>
 </div>
 </div>
<!-- Current Price -->
 <div class="flex justify-center my-2">
 <div class="text-lg font-bold text-yellow-500">36,842.75</div>
 </div>
<!-- Buy Orders -->
 <div class="space-y-1 mt-4">
 <div class="flex justify-between text-sm text-green-500">
 <span>36,835.00</span>
 <span>0.567</span>
 <span>20,885.45</span>
 </div>
 <div class="flex justify-between text-sm text-green-500">
 <span>36,830.25</span>
 <span>0.432</span>
 <span>15,910.67</span>
 </div>
 <div class="flex justify-between text-sm text-green-500">
 <span>36,825.50</span>
 <span>0.389</span>
 <span>14,325.12</span>
 </div>
 <div class="flex justify-between text-sm text-green-500">
 <span>36,820.75</span>
 <span>0.254</span>
 <span>9,352.47</span>
 </div>
 <div class="flex justify-between text-sm text-green-500">
 <span>36,815.00</span>
 <span>0.187</span>
 <span>6,884.41</span>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Trades -->
 <div class="bg-slate-800 rounded-xl p-4">
 <h2 class="text-lg font-bold mb-4">Recent Trades</h2>
 <div class="space-y-2 max-h-64 overflow-y-auto">
 <div class="flex justify-between text-sm">
 <span class="text-green-500">36,842.75</span>
 <span>0.045</span>
 <span class="text-gray-400">12:45:23</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-red-500">36,843.25</span>
 <span>0.128</span>
 <span class="text-gray-400">12:44:57</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-green-500">36,841.50</span>
 <span>0.072</span>
 <span class="text-gray-400">12:44:32</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-green-500">36,840.75</span>
 <span>0.215</span>
 <span class="text-gray-400">12:44:08</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-red-500">36,842.00</span>
 <span>0.083</span>
 <span class="text-gray-400">12:43:45</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-green-500">36,839.25</span>
 <span>0.156</span>
 <span class="text-gray-400">12:43:22</span>
 </div>
 <div class="flex justify-between text-sm">
 <span class="text-red-500">36,840.50</span>
 <span>0.094</span>
 <span class="text-gray-400">12:42:59</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Open Orders -->
 <div class="mt-8 bg-slate-800 rounded-xl p-4">
 <h2 class="text-lg font-bold mb-4">Your Open Orders</h2>
 <div class="overflow-x-auto">
 <table class="w-full">
 <thead>
 <tr class="text-gray-400 text-sm border-b border-slate-700">
 <th class="text-left pb-2">Date</th>
 <th class="text-left pb-2">Pair</th>
 <th class="text-left pb-2">Type</th>
 <th class="text-left pb-2">Price</th>
 <th class="text-left pb-2">Amount</th>
 <th class="text-left pb-2">Total</th>
 <th class="text-left pb-2">Status</th>
 <th class="text-right pb-2">Action</th>
 </tr>
 </thead>
 <tbody>
 <tr class="text-sm border-b border-slate-700">
 <td class="py-3">2023-11-15</td>
 <td>BTC/USD</td>
 <td class="text-green-500">Buy</td>
 <td>36,820.00</td>
 <td>0.25</td>
 <td>$9,205.00</td>
 <td><span class="bg-yellow-500/20 text-yellow-500 px-2 py-1 rounded">Pending</span></td>
 <td class="text-right">
 <button class="text-red-500 hover:text-red-400">
 <i class="fas fa-times"></i> Cancel
 </button>
 </td>
 </tr>
 <tr class="text-sm border-b border-slate-700">
 <td class="py-3">2023-11-14</td>
 <td>BTC/USD</td>
 <td class="text-red-500">Sell</td>
 <td>36,850.00</td>
 <td>0.15</td>
 <td>$5,527.50</td>
 <td><span class="bg-yellow-500/20 text-yellow-500 px-2 py-1 rounded">Pending</span></td>
 <td class="text-right">
 <button class="text-red-500 hover:text-red-400">
 <i class="fas fa-times"></i> Cancel
 </button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </div>
<script>
 // Simulate real-time price updates
 function updatePrice() {
 const priceElement = document.getElementById('btc-price');
 const changeElement = document.getElementById('btc-change');
// Generate random price movement
 const currentPrice = parseFloat(priceElement.textContent.replace('$', '').replace(',', ''));
 const changePercent = (Math.random() * 0.5 - 0.25); // Random change between -0.25% and +0.25%
 const newPrice = currentPrice * (1 + changePercent / 100);
// Update display
 priceElement.textContent = '$' + newPrice.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// Update change percentage and color
 if (changePercent >= 0) {
 changeElement.textContent = '+' + changePercent.toFixed(2) + '%';
 changeElement.className = 'text-2xl font-bold price-up';
 } else {
 changeElement.textContent = changePercent.toFixed(2) + '%';
 changeElement.className = 'text-2xl font-bold price-down';
 }
// Update buy/sell price inputs
 document.getElementById('buy-price').value = newPrice.toFixed(2);
 document.getElementById('sell-price').value = newPrice.toFixed(2);
// Schedule next update
 setTimeout(updatePrice, 3000 + Math.random() * 2000); // Random interval between 3-5 seconds
 }
// Calculate totals when amount or price changes
 document.getElementById('buy-amount').addEventListener('input', function() {
 const amount = parseFloat(this.value) || 0;
 const price = parseFloat(document.getElementById('buy-price').value) || 0;
 document.getElementById('buy-total').value = (amount / price).toFixed(8);
 });
document.getElementById('buy-price').addEventListener('input', function() {
 const amount = parseFloat(document.getElementById('buy-amount').value) || 0;
 const price = parseFloat(this.value) || 0;
 document.getElementById('buy-total').value = (amount / price).toFixed(8);
 });
document.getElementById('sell-amount').addEventListener('input', function() {
 const amount = parseFloat(this.value) || 0;
 const price = parseFloat(document.getElementById('sell-price').value) || 0;
 document.getElementById('sell-total').value = (amount * price).toFixed(2);
 });
document.getElementById('sell-price').addEventListener('input', function() {
 const amount = parseFloat(document.getElementById('sell-amount').value) || 0;
 const price = parseFloat(this.value) || 0;
 document.getElementById('sell-total').value = (amount * price).toFixed(2);
 });
// Buy/Sell button actions
 document.getElementById('buy-button').addEventListener('click', function() {
 const amount = parseFloat(document.getElementById('buy-amount').value);
 const price = parseFloat(document.getElementById('buy-price').value);
if (amount && price) {
 alert(`Buy order placed for ${(amount / price).toFixed(8)} BTC at $${price.toFixed(2)} each. Total: $${amount.toFixed(2)}`);
 // In a real app, this would send the order to your backend
 } else {
 alert('Please enter valid amount and price');
 }
 });
document.getElementById('sell-button').addEventListener('click', function() {
 const amount = parseFloat(document.getElementById('sell-amount').value);
 const price = parseFloat(document.getElementById('sell-price').value);
if (amount && price) {
 alert(`Sell order placed for ${amount.toFixed(8)} BTC at $${price.toFixed(2)} each. Total: $${(amount * price).toFixed(2)}`);
 // In a real app, this would send the order to your backend
 } else {
 alert('Please enter valid amount and price');
 }
 });
// Initialize with current price
 document.getElementById('buy-price').value = '36842.75';
 document.getElementById('sell-price').value = '36842.75';
// Start price updates
 updatePrice();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kali33/traphouse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>