Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Orange Black Crypto Dashboard</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> | |
| .neumorphic { | |
| border-radius: 16px; | |
| background: #1a1a1a; | |
| box-shadow: 8px 8px 16px #0d0d0d, | |
| -8px -8px 16px #272727; | |
| } | |
| .neumorphic-inset { | |
| border-radius: 16px; | |
| background: #1a1a1a; | |
| box-shadow: inset 8px 8px 16px #0d0d0d, | |
| inset -8px -8px 16px #272727; | |
| } | |
| .neumorphic-btn { | |
| border-radius: 12px; | |
| background: linear-gradient(145deg, #ff7b00, #e66900); | |
| box-shadow: 5px 5px 10px #0d0d0d, | |
| -5px -5px 10px #272727; | |
| transition: all 0.3s ease; | |
| } | |
| .neumorphic-btn:hover { | |
| box-shadow: 2px 2px 5px #0d0d0d, | |
| -2px -2px 5px #272727; | |
| transform: translateY(2px); | |
| } | |
| .neumorphic-btn:active { | |
| box-shadow: inset 5px 5px 10px #cc5c00, | |
| inset -5px -5px 10px #ff8400; | |
| } | |
| .ticker { | |
| animation: scroll 20s linear infinite; | |
| } | |
| @keyframes scroll { | |
| 0% { transform: translateX(0); } | |
| 100% { transform: translateX(-50%); } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ff7b00, #ffaa00); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-gray-200 min-h-screen p-4"> | |
| <div class="container mx-auto max-w-7xl"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <div class="neumorphic w-12 h-12 flex items-center justify-center mr-4"> | |
| <i class="fas fa-lock text-orange-500 text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold gradient-text">Crypto<span class="font-light">Lock</span></h1> | |
| </div> | |
| <div class="neumorphic px-4 py-2 flex items-center"> | |
| <i class="fas fa-wallet text-orange-500 mr-2"></i> | |
| <span class="font-mono">0x7f...3a4b</span> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Panel --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Price Chart --> | |
| <div class="neumorphic p-6 h-96"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold">BTC/USDT</h2> | |
| <div class="flex space-x-2"> | |
| <button class="neumorphic-btn px-3 py-1 text-sm">1H</button> | |
| <button class="neumorphic-btn px-3 py-1 text-sm">1D</button> | |
| <button class="neumorphic-btn px-3 py-1 text-sm">1W</button> | |
| <button class="neumorphic-btn px-3 py-1 text-sm">1M</button> | |
| </div> | |
| </div> | |
| <div class="neumorphic-inset h-full p-4 flex items-center justify-center"> | |
| <canvas id="priceChart" class="w-full h-full"></canvas> | |
| </div> | |
| </div> | |
| <!-- Trading Pairs --> | |
| <div class="neumorphic p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Trading Pairs</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="py-2 text-left">Pair</th> | |
| <th class="py-2 text-right">Price</th> | |
| <th class="py-2 text-right">24h Change</th> | |
| <th class="py-2 text-right">Volume</th> | |
| <th class="py-2 text-right">Action</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-800 hover:bg-gray-800/50"> | |
| <td class="py-3 text-left"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 bg-orange-500 rounded-full mr-2"></div> | |
| BTC/USDT | |
| </div> | |
| </td> | |
| <td class="py-3 text-right font-mono">$42,356.78</td> | |
| <td class="py-3 text-right text-green-400">+2.34%</td> | |
| <td class="py-3 text-right font-mono">$1.2B</td> | |
| <td class="py-3 text-right"> | |
| <button class="neumorphic-btn px-3 py-1 text-xs">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-gray-800/50"> | |
| <td class="py-3 text-left"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 bg-blue-500 rounded-full mr-2"></div> | |
| ETH/USDT | |
| </div> | |
| </td> | |
| <td class="py-3 text-right font-mono">$2,356.42</td> | |
| <td class="py-3 text-right text-red-400">-1.12%</td> | |
| <td class="py-3 text-right font-mono">$856M</td> | |
| <td class="py-3 text-right"> | |
| <button class="neumorphic-btn px-3 py-1 text-xs">Trade</button> | |
| </td> | |
| </tr> | |
| <tr class="border-b border-gray-800 hover:bg-gray-800/50"> | |
| <td class="py-3 text-left"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 bg-yellow-500 rounded-full mr-2"></div> | |
| SOL/USDT | |
| </div> | |
| </td> | |
| <td class="py-3 text-right font-mono">$98.76</td> | |
| <td class="py-3 text-right text-green-400">+5.67%</td> | |
| <td class="py-3 text-right font-mono">$342M</td> | |
| <td class="py-3 text-right"> | |
| <button class="neumorphic-btn px-3 py-1 text-xs">Trade</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel --> | |
| <div class="space-y-6"> | |
| <!-- Account Balance --> | |
| <div class="neumorphic p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Account Balance</h2> | |
| <div class="neumorphic-inset p-4 mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span>Total Value</span> | |
| <span class="font-mono text-lg">$12,456.78</span> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-orange-500" style="width: 65%;"></div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span>BTC</span> | |
| <span class="font-mono">0.42 ($17,789.85)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>ETH</span> | |
| <span class="font-mono">2.1 ($4,948.48)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>USDT</span> | |
| <span class="font-mono">1,234.45 ($1,234.45)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Trading Form --> | |
| <div class="neumorphic p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Trade</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block mb-1">Pair</label> | |
| <select class="neumorphic-inset w-full p-3 rounded-lg focus:outline-none"> | |
| <option>BTC/USDT</option> | |
| <option>ETH/USDT</option> | |
| <option>SOL/USDT</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Side</label> | |
| <div class="flex space-x-2"> | |
| <button class="neumorphic-btn flex-1 py-2">Buy</button> | |
| <button class="neumorphic flex-1 py-2 text-center">Sell</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Amount</label> | |
| <div class="neumorphic-inset flex items-center p-1"> | |
| <input type="number" class="flex-1 bg-transparent p-2 focus:outline-none" placeholder="0.00"> | |
| <span class="px-2">BTC</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block mb-1">Price</label> | |
| <div class="neumorphic-inset flex items-center p-1"> | |
| <input type="number" class="flex-1 bg-transparent p-2 focus:outline-none" placeholder="0.00"> | |
| <span class="px-2">USDT</span> | |
| </div> | |
| </div> | |
| <button class="neumorphic-btn w-full py-3 mt-4">Place Order</button> | |
| </div> | |
| </div> | |
| <!-- Market Ticker --> | |
| <div class="neumorphic p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Market Ticker</h2> | |
| <div class="neumorphic-inset p-4 overflow-hidden"> | |
| <div class="flex ticker whitespace-nowrap"> | |
| <span class="mr-8">BTC $42,356.78 <span class="text-green-400">+2.34%</span></span> | |
| <span class="mr-8">ETH $2,356.42 <span class="text-red-400">-1.12%</span></span> | |
| <span class="mr-8">SOL $98.76 <span class="text-green-400">+5.67%</span></span> | |
| <span class="mr-8">ADA $0.56 <span class="text-green-400">+0.78%</span></span> | |
| <span class="mr-8">DOT $6.78 <span class="text-red-400">-2.34%</span></span> | |
| <span class="mr-8">AVAX $35.67 <span class="text-green-400">+3.45%</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- API Connection --> | |
| <div class="neumorphic p-6 mt-6"> | |
| <h2 class="text-xl font-semibold mb-4">API Connection</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block mb-1">API Key</label> | |
| <div class="neumorphic-inset flex items-center p-1"> | |
| <input type="password" class="flex-1 bg-transparent p-2 focus:outline-none" placeholder="Enter your API key"> | |
| <button class="px-2 text-orange-500"><i class="fas fa-eye"></i></button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block mb-1">API Secret</label> | |
| <div class="neumorphic-inset flex items-center p-1"> | |
| <input type="password" class="flex-1 bg-transparent p-2 focus:outline-none" placeholder="Enter your API secret"> | |
| <button class="px-2 text-orange-500"><i class="fas fa-eye"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-4 space-x-3"> | |
| <button class="neumorphic px-4 py-2">Test Connection</button> | |
| <button class="neumorphic-btn px-4 py-2">Save & Connect</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple chart initialization (would be replaced with Chart.js in a real implementation) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const canvas = document.getElementById('priceChart'); | |
| const ctx = canvas.getContext('2d'); | |
| // Set canvas dimensions | |
| canvas.width = canvas.offsetWidth; | |
| canvas.height = canvas.offsetHeight; | |
| // Draw a simple price chart | |
| ctx.strokeStyle = '#ff7b00'; | |
| ctx.lineWidth = 2; | |
| ctx.beginPath(); | |
| const points = [ | |
| {x: 0, y: 150}, | |
| {x: 50, y: 120}, | |
| {x: 100, y: 180}, | |
| {x: 150, y: 160}, | |
| {x: 200, y: 190}, | |
| {x: 250, y: 140}, | |
| {x: 300, y: 170}, | |
| {x: 350, y: 130}, | |
| {x: 400, y: 160}, | |
| {x: 450, y: 190}, | |
| {x: 500, y: 150} | |
| ]; | |
| // Scale points to canvas | |
| const scaleX = canvas.width / 500; | |
| const scaleY = canvas.height / 200; | |
| ctx.moveTo(points[0].x * scaleX, points[0].y * scaleY); | |
| for (let i = 1; i < points.length; i++) { | |
| ctx.lineTo(points[i].x * scaleX, points[i].y * scaleY); | |
| } | |
| ctx.stroke(); | |
| // Add gradient under the line | |
| const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); | |
| gradient.addColorStop(0, 'rgba(255, 123, 0, 0.3)'); | |
| gradient.addColorStop(1, 'rgba(255, 123, 0, 0)'); | |
| ctx.fillStyle = gradient; | |
| ctx.lineTo(canvas.width, canvas.height); | |
| ctx.lineTo(0, canvas.height); | |
| ctx.closePath(); | |
| ctx.fill(); | |
| // Toggle password visibility | |
| document.querySelectorAll('.fa-eye').forEach(icon => { | |
| icon.addEventListener('click', function() { | |
| const input = this.closest('.neumorphic-inset').querySelector('input'); | |
| if (input.type === 'password') { | |
| input.type = 'text'; | |
| this.classList.replace('fa-eye', 'fa-eye-slash'); | |
| } else { | |
| input.type = 'password'; | |
| this.classList.replace('fa-eye-slash', 'fa-eye'); | |
| } | |
| }); | |
| }); | |
| // Simulate price updates | |
| setInterval(() => { | |
| const ticker = document.querySelector('.ticker'); | |
| const firstSpan = ticker.querySelector('span:first-child'); | |
| const clone = firstSpan.cloneNode(true); | |
| ticker.appendChild(clone); | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |