karan6786/binaryblaze-trader
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>BinaryBlaze Trader</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>12 <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>13<script>14 tailwind.config = {15 darkMode: 'class',16 theme: {17 extend: {18 colors: {19 primary: '#ffffff',20 secondary: '#3b82f6'21 }22 }23 }24 }25 </script>26 <style>27 .candle-up {28 fill: #10b981;29 stroke: #10b981;30 }31 .candle-down {32 fill: #ef4444;33 stroke: #ef4444;34 }35 .qr-container {36 transition: all 0.3s ease;37 }38 .popup {39 transition: all 0.3s ease-out;40 }41 @keyframes popup {42 0% { transform: scale(0.8); opacity: 0; }43 100% { transform: scale(1); opacity: 1; }44 }45 @keyframes candleGlow {46 0% { box-shadow: 0 0 5px currentColor; }47 50% { box-shadow: 0 0 20px currentColor; }48 100% { box-shadow: 0 0 5px currentColor; }49 }50 .candle-animation {51 animation: candleGlow 1s ease-in-out;52 }53 @keyframes pulseGreen {54 0% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.3); }55 50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.6); }56 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.3); }57 }58 @keyframes pulseRed {59 0% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }60 50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6); }61 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.3); }62 }63 @keyframes candlePulse {64 0% { transform: scale(1); opacity: 1; }65 50% { transform: scale(1.1); opacity: 0.8; }66 100% { transform: scale(1); opacity: 1; }67 }68 </style>69</head>70<body class="bg-gray-900 text-white min-h-screen">71 <!-- Navigation -->72 <nav class="bg-gray-800 border-b border-gray-700">73 <div class="container mx-auto px-4 py-3">74 <div class="flex items-center justify-between">75 <div class="flex items-center space-x-2">76 <img src="http://static.photos/technology/200x200/42" alt="Logo" class="w-8 h-8 rounded">77 <span class="text-xl font-bold text-white">BinaryBlaze</span>78 </div>79<div class="flex items-center space-x-4">80 <div class="flex items-center space-x-2 bg-gray-700 rounded-lg px-3 py-1">81 <i data-feather="user" class="w-4 h-4"></i>82 <span id="userBalance">₹0</span>83 </div>84 <button onclick="showDepositModal()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">85 Deposit86 </button>87 </div>88 </div>89 </div>90 </nav>91 92 <!-- Main Content -->93 <div class="container mx-auto px-4 py-8">94 <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">95 <!-- Trading Panel -->96 <div class="lg:col-span-3 bg-gray-800 rounded-xl p-6">97 <!-- Chart -->98 <div class="bg-gray-900 rounded-lg p-4 mb-6">99 <div class="flex justify-between items-center mb-4">100 <h2 class="text-lg font-semibold">Live Trading Chart</h2>101 <div class="flex space-x-2">102 <select id="timeframe" class="bg-gray-700 border border-gray-600 rounded px-3 py-1">103 <option value="5">5s</option>104 <option value="10">10s</option>105 <option value="15">15s</option>106 <option value="30">30s</option>107 </select>108 </div>109 </div>110 <canvas id="tradingChart" class="w-full h-64"></canvas>111 </div>112 113 <!-- Trading Controls -->114 <div class="grid grid-cols-2 gap-4">115 <button onclick="placeBet('up')" class="bg-green-600 hover:bg-green-700 py-4 rounded-lg text-xl font-bold transition">116 UP117 </button>118 <button onclick="placeBet('down')" class="bg-red-600 hover:bg-red-700 py-4 rounded-lg text-xl font-bold transition">119 DOWN120 </button>121 </div>122 </div>123 124 <!-- Sidebar -->125 <div class="space-y-6">126 <!-- User Info -->127 <div class="bg-gray-800 rounded-xl p-6">128 <div class="flex items-center space-x-3 mb-4">129 <img src="http://static.photos/technology/200x200/42" alt="Logo" class="w-10 h-10 rounded">130 <div>131 <h3 class="font-semibold" id="username">Guest</h3>132 <p class="text-gray-400 text-sm">Balance: ₹<span id="sidebarBalance">0</span></p>133 </div>134 </div>135<div class="space-y-2">136 <button onclick="showHistory('deposit')" class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded transition">137 Deposit History138 </button>139 <button onclick="showHistory('withdrawal')" class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded transition">140 Withdrawal History141 </button>142 </div>143 </div>144 145 <!-- Recent Trades -->146 <div class="bg-gray-800 rounded-xl p-6">147 <h3 class="font-semibold mb-4">Recent Trades</h3>148 <div id="recentTrades" class="space-y-2">149 <!-- Recent trades will be populated here -->150 </div>151 </div>152 </div>153 </div>154 </div>155 156 <!-- Deposit Modal -->157 <div id="depositModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">158 <div class="bg-gray-800 rounded-xl p-6 w-96">159 <div class="flex justify-between items-center mb-4">160 <h3 class="text-lg font-semibold">Deposit Funds</h3>161 <button onclick="hideDepositModal()" class="text-gray-400 hover:text-white">162 <i data-feather="x"></i>163 </button>164 </div>165 <div class="space-y-4">166 <input type="number" id="depositAmount" placeholder="Enter amount (min ₹200)" min="200" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2">167 <div id="qrContainer" class="qr-container hidden">168 <div class="bg-white p-4 rounded-lg mb-4">169 <!-- QR Code Placeholder -->170 <div class="w-full h-48 bg-gray-200 flex items-center justify-center">171 <span class="text-gray-600">QR Code</span>172 </div>173 </div>174 <div class="text-center text-sm text-gray-400">175 QR Code valid for 10 minutes176 </div>177 </div>178 <button onclick="processDeposit()" class="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-semibold transition">179 Submit180 </button>181 </div>182 </div>183 </div>184 185 <!-- Result Popup -->186 <div id="resultPopup" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">187 <div class="bg-gray-800 rounded-xl p-6 w-80 text-center popup">188 <div id="resultIcon" class="text-4xl mb-4"></div>189 <h3 id="resultTitle" class="text-xl font-semibold mb-2"></h3>190 <p id="resultMessage" class="text-gray-300 mb-4"></p>191 <button onclick="hideResultPopup()" class="bg-blue-600 hover:bg-blue-700 px-6 py-2 rounded-lg transition">192 Continue193 </button>194 </div>195 </div>196 197 <!-- History Modal -->198 <div id="historyModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">199 <div class="bg-gray-800 rounded-xl p-6 w-96 max-h-96 overflow-y-auto">200 <div class="flex justify-between items-center mb-4">201 <h3 id="historyTitle" class="text-lg font-semibold"></h3>202 <button onclick="hideHistoryModal()" class="text-gray-400 hover:text-white">203 <i data-feather="x"></i>204 </button>205 </div>206 <div id="historyContent" class="space-y-2">207 <!-- History content will be populated here -->208 </div>209 </div>210 </div>211 212 <script>213 // Initialize user data214 let userData = JSON.parse(localStorage.getItem('binaryTraderUser')) || {215 username: 'Guest',216 balance: 0,217 depositHistory: [],218 withdrawalHistory: [],219 trades: []220 };221 222 // Chart initialization223 let tradingChart;224 let currentCandle = { open: 100, high: 105, low: 95, close: 102 };225 let chartData = [];226 let activeBet = null;227 let depositTimer = null;228 229 // Initialize page230 document.addEventListener('DOMContentLoaded', function() {231 updateUserDisplay();232 initializeChart();233 startTradingSimulation();234 checkLoginStatus();235 });236 237 function checkLoginStatus() {238 if (userData.username === 'Guest') {239 showLoginModal();240 }241 }242 243 function showLoginModal() {244 const username = prompt('Please enter your username to continue:');245 if (username && username.trim()) {246 userData.username = username.trim();247 saveUserData();248 updateUserDisplay();249 } else {250 showLoginModal();251 }252 }253 254 function updateUserDisplay() {255 document.getElementById('username').textContent = userData.username;256 document.getElementById('userBalance').textContent = `₹${userData.balance}`;257 document.getElementById('sidebarBalance').textContent = userData.balance;258 updateRecentTrades();259 }260 function initializeChart() {261 const ctx = document.getElementById('tradingChart').getContext('2d');262 263 // Create a custom candlestick controller264 Chart.defaults.candlestick = Chart.defaults.bar;265 Chart.controllers.candlestick = Chart.controllers.bar.extend({266 draw: function() {267 const ctx = this.chart.ctx;268 const meta = this.getMeta();269 const dataset = this.getDataset();270 271 meta.data.forEach((bar, index) => {272 const data = dataset.data[index];273 if (!data) return;274 275 const { x, o, h, l, c } = data;276 const yTop = this.chart.scales.y.getPixelForValue(h);277 const yOpen = this.chart.scales.y.getPixelForValue(o);278 const yClose = this.chart.scales.y.getPixelForValue(c);279 const yLow = this.chart.scales.y.getPixelForValue(l);280 281 const barWidth = bar.width / 2;282 const xCenter = bar.x;283 284 // Draw high-low line285 ctx.save();286 ctx.beginPath();287 ctx.lineWidth = 1;288 ctx.strokeStyle = o <= c ? '#10b981' : '#ef4444';289 ctx.moveTo(xCenter, yTop);290 ctx.lineTo(xCenter, yLow);291 ctx.stroke();292 293 // Draw candle body294 const candleHeight = Math.abs(yOpen - yClose);295 const candleTop = Math.min(yOpen, yClose);296 297 ctx.fillStyle = o <= c ? '#10b981' : '#ef4444';298 ctx.fillRect(xCenter - barWidth, candleTop, barWidth * 2, candleHeight);299 300 ctx.strokeRect(xCenter - barWidth, candleTop, barWidth * 2, candleHeight);301 ctx.restore();302 });303 }304 });305 306 tradingChart = new Chart(ctx, {307 type: 'candlestick',308 data: {309 datasets: [{310 label: 'Price',311 data: chartData,312 borderWidth: 1313 }]314 },315 options: {316 responsive: true,317 maintainAspectRatio: false,318 scales: {319 x: {320 type: 'time',321 time: {322 unit: 'second',323 displayFormats: {324 second: 'HH:mm:ss'325 }326 },327 ticks: {328 source: 'auto',329 maxRotation: 0330 }331 },332 y: {333 beginAtZero: false,334 position: 'right'335 }336 },337 plugins: {338 legend: {339 display: false340 },341 tooltip: {342 callbacks: {343 label: function(context) {344 const data = context.raw;345 return [346 `Open: ${data.o.toFixed(2)}`,347 `High: ${data.h.toFixed(2)}',348 `Low: ${data.l.toFixed(2)}',349 `Close: ${data.c.toFixed(2)}`350 ];351 }352 }353 }354 }355 }356 });357 }358function startTradingSimulation() {359 setInterval(() => {360 generateNewCandle();361 updateChart();362 }, 1000);363 }364 function generateNewCandle() {365 const volatility = 2;366 const change = (Math.random() - 0.5) * volatility;367 const newClose = currentCandle.close + change;368 369 currentCandle = {370 open: currentCandle.close,371 high: Math.max(currentCandle.close, newClose, currentCandle.close) + Math.random() * 0.5,372 low: Math.min(currentCandle.close, newClose, currentCandle.close) - Math.random() * 0.5,373 close: newClose374 };375 376 chartData.push({377 x: new Date().getTime(),378 o: parseFloat(currentCandle.open.toFixed(2)),379 h: parseFloat(currentCandle.high.toFixed(2)),380 l: parseFloat(currentCandle.low.toFixed(2)),381 c: parseFloat(currentCandle.close.toFixed(2))382 });383 384 if (chartData.length > 50) {385 chartData.shift();386 }387 }388function updateChart() {389 tradingChart.update();390 }391 392 function placeBet(direction) {393 if (userData.balance < 10) {394 alert('Insufficient balance. Please deposit funds.');395 return;396 }397 398 if (activeBet) {399 alert('Please wait for current trade to complete.');400 return;401 }402 403 const betAmount = 10;404 userData.balance -= betAmount;405 activeBet = { direction, amount: betAmount, timestamp: new Date() };406 saveUserData();407 updateUserDisplay();408 409 // Simulate trade result after 3 seconds410 setTimeout(() => {411 resolveBet();412 }, 3000);413 }414 function resolveBet() {415 if (!activeBet) return;416 417 // Enhanced candle animation418 const chartCanvas = document.getElementById('tradingChart');419 const ctx = chartCanvas.getContext('2d');420 421 // Clear and redraw with animation422 const animateCandle = (progress) => {423 ctx.clearRect(0, 0, chartCanvas.width, chartCanvas.height);424 425 // Draw the high-low line with glow effect426 const centerX = chartCanvas.width / 2;427 const highY = 50;428 const lowY = chartCanvas.height - 50;429 const bodyTop = 80;430 const bodyBottom = 120;431 432 ctx.save();433 434 if (activeBet.direction === 'up') {435 // Green glow for UP436 ctx.shadowColor = '#10b981';437 ctx.shadowBlur = 20 * progress;438 439 // Draw high-low line440 ctx.beginPath();441 ctx.strokeStyle = '#10b981';442 ctx.lineWidth = 2;443 ctx.moveTo(centerX, highY);444 ctx.lineTo(centerX, lowY);445 ctx.stroke();446 447 // Draw candle body448 ctx.fillStyle = '#10b981';449 ctx.fillRect(centerX - 15, bodyTop, 30, bodyBottom - bodyTop);450 451 // Add pulsing effect452 const pulse = Math.sin(progress * Math.PI * 4) * 0.3 + 0.7;453 ctx.globalAlpha = pulse;454 ctx.fillRect(centerX - 15, bodyTop, 30, bodyBottom - bodyTop);455 } else {456 // Red glow for DOWN457 ctx.shadowColor = '#ef4444';458 ctx.shadowBlur = 20 * progress;459 460 // Draw high-low line461 ctx.beginPath();462 ctx.strokeStyle = '#ef4444';463 ctx.lineWidth = 2;464 ctx.moveTo(centerX, highY);465 ctx.lineTo(centerX, lowY);466 ctx.stroke();467 468 // Draw candle body469 ctx.fillStyle = '#ef4444';470 ctx.fillRect(centerX - 15, bodyTop, 30, bodyBottom - bodyTop);471 472 // Add pulsing effect473 const pulse = Math.sin(progress * Math.PI * 4) * 0.3 + 0.7;474 ctx.globalAlpha = pulse;475 ctx.fillRect(centerX - 15, bodyTop, 30, bodyBottom - bodyTop);476 }477 478 ctx.restore();479 };480 481 // Animate the candle482 const startTime = Date.now();483 const duration = 2000; // 2 seconds484 485 const animationLoop = () => {486 const elapsed = Date.now() - startTime;487 const progress = Math.min(elapsed / duration, 1);488 489 animateCandle(progress);490 491 if (progress < 1) {492 requestAnimationFrame(animationLoop);493 } else {494 // Restore normal chart495 updateChart();496 }497 };498 499 animationLoop();500const isWin = Math.random() > 0.4; // 60% win rate for demo501 const payout = isWin ? activeBet.amount * 1.8 : 0;502 503 if (isWin) {504 userData.balance += payout;505 showResultPopup('win', `You won ₹${payout - activeBet.amount}!`);506 userData.trades.push({507 type: 'win',508 amount: payout - activeBet.amount,509 timestamp: new Date()510 });511 } else {512 showResultPopup('loss', `You lost ₹${activeBet.amount}`);513 userData.trades.push({514 type: 'loss',515 amount: -activeBet.amount,516 timestamp: new Date()517 });518 }519 520 activeBet = null;521 saveUserData();522 updateUserDisplay();523 }524 function showResultPopup(type, message) {525 const popup = document.getElementById('resultPopup');526 const icon = document.getElementById('resultIcon');527 const title = document.getElementById('resultTitle');528 const msg = document.getElementById('resultMessage');529 530 // Add enhanced candle animation to the popup531 const popupContent = popup.querySelector('.popup');532 popupContent.style.transform = 'scale(0.8)';533 popupContent.style.opacity = '0';534 535 if (type === 'win') {536 icon.innerHTML = '<i data-feather="check-circle"></i>';537 title.textContent = 'Congratulations!';538 title.className = 'text-xl font-semibold mb-2 text-green-400';539 popupContent.style.boxShadow = '0 0 30px rgba(16, 185, 129, 0.3)';540 // Add pulsing green effect541 popupContent.style.animation = 'pulseGreen 2s infinite';542 } else {543 icon.innerHTML = '<i data-feather="x-circle"></i>';544 title.textContent = 'Better Luck Next Time';545 title.className = 'text-xl font-semibold mb-2 text-red-400';546 popupContent.style.boxShadow = '0 0 30px rgba(239, 68, 68, 0.3)';547 // Add pulsing red effect548 popupContent.style.animation = 'pulseRed 2s infinite';549 }550 551 msg.textContent = message;552 popup.classList.remove('hidden');553 popup.classList.add('flex');554 555 // Animate the popup appearance556 setTimeout(() => {557 popupContent.style.transform = 'scale(1)';558 popupContent.style.opacity = '1';559 }, 10);560 561 feather.replace();562 }563function hideResultPopup() {564 document.getElementById('resultPopup').classList.add('hidden');565 document.getElementById('resultPopup').classList.remove('flex');566 }567 568 function showDepositModal() {569 document.getElementById('depositModal').classList.remove('hidden');570 document.getElementById('depositModal').classList.add('flex');571 document.getElementById('qrContainer').classList.add('hidden');572 document.getElementById('depositAmount').value = '';573 }574 575 function hideDepositModal() {576 document.getElementById('depositModal').classList.add('hidden');577 document.getElementById('depositModal').classList.remove('flex');578 if (depositTimer) {579 clearTimeout(depositTimer);580 depositTimer = null;581 }582 }583 584 function processDeposit() {585 const amount = parseInt(document.getElementById('depositAmount').value);586 587 if (!amount || amount < 200) {588 alert('Please enter a minimum amount of ₹200');589 return;590 }591 592 const qrContainer = document.getElementById('qrContainer');593 qrContainer.classList.remove('hidden');594 595 // Start 10-minute timer596 if (depositTimer) clearTimeout(depositTimer);597 depositTimer = setTimeout(() => {598 qrContainer.classList.add('hidden');599 alert('QR Code has expired. Please try again.');600 }, 10 * 60 * 1000);601 }602 603 function simulateDeposit(amount) {604 userData.balance += amount;605 userData.depositHistory.push({606 amount: amount,607 timestamp: new Date(),608 status: 'completed'609 });610 611 saveUserData();612 updateUserDisplay();613 hideDepositModal();614 615 setTimeout(() => {616 alert(`₹${amount} has been successfully added to your account!`);617 }, 1000);618 }619 620 function showHistory(type) {621 const modal = document.getElementById('historyModal');622 const title = document.getElementById('historyTitle');623 const content = document.getElementById('historyContent');624 625 title.textContent = type === 'deposit' ? 'Deposit History' : 'Withdrawal History';626 content.innerHTML = '';627 628 const history = type === 'deposit' ? userData.depositHistory : userData.withdrawalHistory;629 630 if (history.length === 0) {631 content.innerHTML = '<p class="text-gray-400 text-center">No history found</p>';632 } else {633 history.forEach(record => {634 const div = document.createElement('div');635 div.className = 'flex justify-between items-center bg-gray-700 p-3 rounded';636 div.innerHTML = `637 <div>638 <p class="font-semibold">₹${record.amount}</p>639 </div>640 <div class="text-right">641 <p class="text-sm text-gray-400">${new Date(record.timestamp).toLocaleString()}</p>642 </div>643 `;644 content.appendChild(div);645 });646 }647 648 modal.classList.remove('hidden');649 modal.classList.add('flex');650 }651 652 function hideHistoryModal() {653 document.getElementById('historyModal').classList.add('hidden');654 document.getElementById('historyModal').classList.remove('flex');655 }656 657 function updateRecentTrades() {658 const container = document.getElementById('recentTrades');659 container.innerHTML = '';660 661 const recentTrades = userData.trades.slice(-5).reverse();662 663 if (recentTrades.length === 0) {664 container.innerHTML = '<p class="text-gray-400 text-center">No recent trades</p>';665 } else {666 recentTrades.forEach(trade => {667 const div = document.createElement('div');668 div.className = `flex justify-between items-center p-2 rounded ${669 trade.type === 'win' ? 'bg-green-900 bg-opacity-30' : 'bg-red-900 bg-opacity-30'670 }`;671 div.innerHTML = `672 <div class="flex items-center space-x-2">673 <i data-feather="${trade.type === 'win' ? 'trending-up' : 'trending-down'}" class="w-4 h-4 ${674 trade.type === 'win' ? 'text-green-400' : 'text-red-400'675 }"></i>676 <span class="text-sm">${trade.type === 'win' ? 'Won' : 'Lost'}</span>677 </div>678 <span class="text-sm font-semibold ${679 trade.type === 'win' ? 'text-green-400' : 'text-red-400'680 }">₹${Math.abs(trade.amount)}</span>681 `;682 container.appendChild(div);683 });684 }685 feather.replace();686 }687 688 function saveUserData() {689 localStorage.setItem('binaryTraderUser', JSON.stringify(userData));690 }691 692 // Simulate deposit completion (for demo purposes)693 document.addEventListener('click', function(e) {694 if (e.target.closest('#qrContainer')) {695 const amount = parseInt(document.getElementById('depositAmount').value);696 if (amount && amount >= 200) {697 simulateDeposit(amount);698 }699 }700 });701 702 // Initialize feather icons703 feather.replace();704 </script>705</body>706</html>707