Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crypto Binary Options</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary: #2563eb; | |
| --primary-dark: #1d4ed8; | |
| --success: #10b981; | |
| --danger: #ef4444; | |
| --dark: #1f2937; | |
| --darker: #111827; | |
| --light: #f8fafc; | |
| --gray: #6b7280; | |
| --border: #374151; | |
| } | |
| body { | |
| background: linear-gradient(135deg, var(--darker), var(--dark)); | |
| color: var(--light); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| border-bottom: 1px solid var(--border); | |
| margin-bottom: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| } | |
| .built-with { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .built-with:hover { | |
| color: var(--primary); | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 1fr 350px; | |
| gap: 20px; | |
| } | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .chart-container { | |
| background: var(--dark); | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| border: 1px solid var(--border); | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .coin-selector { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .coin-option { | |
| padding: 8px 16px; | |
| background: var(--darker); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| border: 1px solid transparent; | |
| } | |
| .coin-option.active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .timeframe-selector { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .timeframe { | |
| padding: 6px 12px; | |
| background: var(--darker); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| transition: all 0.3s; | |
| } | |
| .timeframe.active { | |
| background: var(--primary); | |
| } | |
| .chart-placeholder { | |
| height: 400px; | |
| background: var(--darker); | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .chart-placeholder::before { | |
| content: ""; | |
| position: absolute; | |
| width: 100%; | |
| height: 2px; | |
| background: var(--border); | |
| top: 50%; | |
| left: 0; | |
| transform: translateY(-50%); | |
| } | |
| .chart-placeholder::after { | |
| content: "Crypto Chart Visualization"; | |
| position: relative; | |
| background: var(--darker); | |
| padding: 0 20px; | |
| color: var(--gray); | |
| font-size: 1.2rem; | |
| } | |
| .options-panel { | |
| background: var(--dark); | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| border: 1px solid var(--border); | |
| } | |
| .panel-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .panel-title i { | |
| color: var(--primary); | |
| } | |
| .option-type-selector { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .option-type { | |
| padding: 12px; | |
| background: var(--darker); | |
| border-radius: 8px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| border: 1px solid transparent; | |
| } | |
| .option-type.active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .input-group { | |
| margin-bottom: 15px; | |
| } | |
| .input-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 0.9rem; | |
| color: var(--gray); | |
| } | |
| .input-field { | |
| width: 100%; | |
| padding: 12px; | |
| background: var(--darker); | |
| border: 1px solid var(--border); | |
| border-radius: 8px; | |
| color: var(--light); | |
| font-size: 1rem; | |
| } | |
| .input-field:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .duration-selector { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| } | |
| .duration-option { | |
| padding: 10px; | |
| background: var(--darker); | |
| border-radius: 6px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| border: 1px solid transparent; | |
| } | |
| .duration-option.active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| } | |
| .trade-button { | |
| width: 100%; | |
| padding: 14px; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| margin-bottom: 20px; | |
| } | |
| .trade-button:hover { | |
| background: var(--primary-dark); | |
| } | |
| .trade-button.up { | |
| background: var(--success); | |
| } | |
| .trade-button.down { | |
| background: var(--danger); | |
| } | |
| .trade-history { | |
| margin-top: 30px; | |
| } | |
| .history-title { | |
| font-size: 1rem; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .history-list { | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .history-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 12px; | |
| background: var(--darker); | |
| border-radius: 8px; | |
| margin-bottom: 8px; | |
| border-left: 4px solid var(--success); | |
| } | |
| .history-item.down { | |
| border-left-color: var(--danger); | |
| } | |
| .history-coin { | |
| font-weight: 600; | |
| } | |
| .history-direction { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .history-direction.up { | |
| color: var(--success); | |
| } | |
| .history-direction.down { | |
| color: var(--danger); | |
| } | |
| .history-amount { | |
| font-weight: 600; | |
| } | |
| .history-result { | |
| font-weight: 600; | |
| } | |
| .history-result.win { | |
| color: var(--success); | |
| } | |
| .history-result.loss { | |
| color: var(--danger); | |
| } | |
| .balance-card { | |
| background: var(--darker); | |
| border-radius: 10px; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .balance-amount { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .balance-label { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .stat-card { | |
| background: var(--darker); | |
| border-radius: 8px; | |
| padding: 15px; | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 0.8rem; | |
| color: var(--gray); | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 40px; | |
| padding: 20px 0; | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| /* Scrollbar Styling */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--darker); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--primary); | |
| border-radius: 10px; | |
| } | |
| /* Animation for price changes */ | |
| @keyframes pulseUp { | |
| 0% { background-color: var(--darker); } | |
| 50% { background-color: rgba(16, 185, 129, 0.2); } | |
| 100% { background-color: var(--darker); } | |
| } | |
| @keyframes pulseDown { | |
| 0% { background-color: var(--darker); } | |
| 50% { background-color: rgba(239, 68, 68, 0.2); } | |
| 100% { background-color: var(--darker); } | |
| } | |
| .price-up { | |
| animation: pulseUp 1s ease; | |
| } | |
| .price-down { | |
| animation: pulseDown 1s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>CryptoBinary</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a> | |
| </header> | |
| <div class="balance-card"> | |
| <div> | |
| <div class="balance-label">Account Balance</div> | |
| <div class="balance-amount">$10,245.75</div> | |
| </div> | |
| <div> | |
| <div class="balance-label">Active Trades</div> | |
| <div class="balance-amount">3</div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="chart-container"> | |
| <div class="chart-header"> | |
| <div class="coin-selector"> | |
| <div class="coin-option active" data-coin="BTC">BTC/USD</div> | |
| <div class="coin-option" data-coin="ETH">ETH/USD</div> | |
| <div class="coin-option" data-coin="ADA">ADA/USD</div> | |
| <div class="coin-option" data-coin="DOT">DOT/USD</div> | |
| </div> | |
| <div class="timeframe-selector"> | |
| <div class="timeframe active">1m</div> | |
| <div class="timeframe">5m</div> | |
| <div class="timeframe">15m</div> | |
| <div class="timeframe">1h</div> | |
| <div class="timeframe">4h</div> | |
| </div> | |
| </div> | |
| <div class="chart-placeholder" id="chart"> | |
| <!-- Chart would be rendered here with a real charting library --> | |
| </div> | |
| </div> | |
| <div class="options-panel"> | |
| <h2 class="panel-title"><i class="fas fa-exchange-alt"></i> Place Trade</h2> | |
| <div class="option-type-selector"> | |
| <div class="option-type active" data-type="up"> | |
| <i class="fas fa-arrow-up"></i> Up | |
| </div> | |
| <div class="option-type" data-type="down"> | |
| <i class="fas fa-arrow-down"></i> Down | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Investment Amount ($)</label> | |
| <input type="number" class="input-field" id="amount" value="100" min="10" max="1000"> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Payout (%)</label> | |
| <input type="text" class="input-field" id="payout" value="85%" readonly> | |
| </div> | |
| <div class="input-group"> | |
| <label class="input-label">Expiry Time</label> | |
| <div class="duration-selector"> | |
| <div class="duration-option active" data-duration="1">1 min</div> | |
| <div class="duration-option" data-duration="5">5 min</div> | |
| <div class="duration-option" data-duration="15">15 min</div> | |
| </div> | |
| </div> | |
| <button class="trade-button up" id="trade-button"> | |
| <i class="fas fa-arrow-up"></i> BUY UP | |
| </button> | |
| <div class="trade-history"> | |
| <h3 class="history-title"><i class="fas fa-history"></i> Recent Trades</h3> | |
| <div class="history-list" id="history-list"> | |
| <div class="history-item"> | |
| <div class="history-coin">BTC/USD</div> | |
| <div class="history-direction up"><i class="fas fa-arrow-up"></i> UP</div> | |
| <div class="history-amount">$100</div> | |
| <div class="history-result win">+$85</div> | |
| </div> | |
| <div class="history-item down"> | |
| <div class="history-coin">ETH/USD</div> | |
| <div class="history-direction down"><i class="fas fa-arrow-down"></i> DOWN</div> | |
| <div class="history-amount">$50</div> | |
| <div class="history-result loss">-$50</div> | |
| </div> | |
| <div class="history-item"> | |
| <div class="history-coin">ADA/USD</div> | |
| <div class="history-direction up"><i class="fas fa-arrow-up"></i> UP</div> | |
| <div class="history-amount">$75</div> | |
| <div class="history-result win">+$63.75</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">68%</div> | |
| <div class="stat-label">Win Rate</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">24</div> | |
| <div class="stat-label">Total Trades</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>CryptoBinary © 2023 | High risk investment. Trade responsibly.</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Coin selection | |
| const coinOptions = document.querySelectorAll('.coin-option'); | |
| coinOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| coinOptions.forEach(opt => opt.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Update chart placeholder text | |
| const chart = document.getElementById('chart'); | |
| chart.classList.remove('price-up', 'price-down'); | |
| chart.classList.add('price-up'); | |
| // Simulate price movement animation | |
| setTimeout(() => { | |
| chart.classList.remove('price-up'); | |
| }, 1000); | |
| }); | |
| }); | |
| // Timeframe selection | |
| const timeframes = document.querySelectorAll('.timeframe'); | |
| timeframes.forEach(timeframe => { | |
| timeframe.addEventListener('click', function() { | |
| timeframes.forEach(tf => tf.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Option type selection | |
| const optionTypes = document.querySelectorAll('.option-type'); | |
| const tradeButton = document.getElementById('trade-button'); | |
| optionTypes.forEach(type => { | |
| type.addEventListener('click', function() { | |
| optionTypes.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| const optionType = this.getAttribute('data-type'); | |
| if (optionType === 'up') { | |
| tradeButton.classList.remove('down'); | |
| tradeButton.classList.add('up'); | |
| tradeButton.innerHTML = '<i class="fas fa-arrow-up"></i> BUY UP'; | |
| } else { | |
| tradeButton.classList.remove('up'); | |
| tradeButton.classList.add('down'); | |
| tradeButton.innerHTML = '<i class="fas fa-arrow-down"></i> BUY DOWN'; | |
| } | |
| }); | |
| }); | |
| // Duration selection | |
| const durationOptions = document.querySelectorAll('.duration-option'); | |
| durationOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| durationOptions.forEach(opt => opt.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Trade button functionality | |
| tradeButton.addEventListener('click', function() { | |
| const amount = document.getElementById('amount').value; | |
| const activeCoin = document.querySelector('.coin-option.active').textContent; | |
| const optionType = document.querySelector('.option-type.active').getAttribute('data-type'); | |
| if (!amount || amount < 10) { | |
| alert('Please enter a valid amount (minimum $10)'); | |
| return; | |
| } | |
| // Simulate trade execution | |
| const historyList = document.getElementById('history-list'); | |
| const newTrade = document.createElement('div'); | |
| newTrade.className = `history-item ${optionType === 'up' ? '' : 'down'}`; | |
| // Randomize win/loss for demo purposes | |
| const isWin = Math.random() > 0.4; | |
| const payout = optionType === 'up' ? 'up' : 'down'; | |
| newTrade.innerHTML = ` | |
| <div class="history-coin">${activeCoin}</div> | |
| <div class="history-direction ${payout}"><i class="fas fa-arrow-${payout}"></i> ${payout.toUpperCase()}</div> | |
| <div class="history-amount">$${amount}</div> | |
| <div class="history-result ${isWin ? 'win' : 'loss'}">${isWin ? `+$${amount * 0.85}` : `-$${amount}`}</div> | |
| `; | |
| historyList.insertBefore(newTrade, historyList.firstChild); | |
| // Show confirmation | |
| alert(`Trade placed successfully!\n${activeCoin} - ${optionType.toUpperCase()} - $${amount}`); | |
| }); | |
| // Simulate price changes | |
| setInterval(() => { | |
| const chart = document.getElementById('chart'); | |
| const isUp = Math.random() > 0.5; | |
| chart.classList.remove('price-up', 'price-down'); | |
| if (isUp) { | |
| chart.classList.add('price-up'); | |
| } else { | |
| chart.classList.add('price-down'); | |
| } | |
| setTimeout(() => { | |
| chart.classList.remove('price-up', 'price-down'); | |
| }, 1000); | |
| }, 5000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |