Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEON TRADER 2077</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap'); | |
| :root { | |
| --neon-pink: #ff2a6d; | |
| --neon-blue: #05d9e8; | |
| --neon-purple: #d300c5; | |
| --dark-bg: #0d0221; | |
| --darker-bg: #02010a; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, .font-orbitron { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text-pink { | |
| color: var(--neon-pink); | |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink); | |
| } | |
| .neon-text-blue { | |
| color: var(--neon-blue); | |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); | |
| } | |
| .neon-border-pink { | |
| border: 2px solid var(--neon-pink); | |
| box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px var(--neon-pink); | |
| } | |
| .neon-border-blue { | |
| border: 2px solid var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); | |
| } | |
| .glow-pink { | |
| animation: glow-pink 2s infinite alternate; | |
| } | |
| .glow-blue { | |
| animation: glow-blue 2s infinite alternate; | |
| } | |
| @keyframes glow-pink { | |
| from { | |
| box-shadow: 0 0 5px var(--neon-pink); | |
| } | |
| to { | |
| box-shadow: 0 0 20px var(--neon-pink); | |
| } | |
| } | |
| @keyframes glow-blue { | |
| from { | |
| box-shadow: 0 0 5px var(--neon-blue); | |
| } | |
| to { | |
| box-shadow: 0 0 20px var(--neon-blue); | |
| } | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| rgba(255, 255, 255, 0) 0%, | |
| rgba(255, 255, 255, 0.03) 50%, | |
| rgba(255, 255, 255, 0) 100% | |
| ); | |
| background-size: 100% 8px; | |
| pointer-events: none; | |
| animation: scanline 8s linear infinite; | |
| } | |
| @keyframes scanline { | |
| 0% { | |
| background-position: 0 0; | |
| } | |
| 100% { | |
| background-position: 0 100vh; | |
| } | |
| } | |
| .flicker { | |
| animation: flicker 5s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { | |
| opacity: 1; | |
| } | |
| 20%, 22%, 24%, 55% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .stock-up { | |
| color: #00ff00; | |
| text-shadow: 0 0 5px #00ff00; | |
| } | |
| .stock-down { | |
| color: #ff0000; | |
| text-shadow: 0 0 5px #ff0000; | |
| } | |
| .terminal-text { | |
| font-family: 'Courier New', monospace; | |
| color: var(--neon-blue); | |
| text-shadow: 0 0 5px var(--neon-blue); | |
| } | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px); | |
| background-size: 20px 20px; | |
| } | |
| .cyber-button { | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 0 15px currentColor; | |
| } | |
| .cyber-button::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: all 0.5s; | |
| } | |
| .cyber-button:hover::before { | |
| left: 100%; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| opacity: 0.7; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0.7; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen grid-bg"> | |
| <div class="scanline"></div> | |
| <!-- Header --> | |
| <header class="bg-black bg-opacity-80 border-b border-neon-blue py-4 px-6 flex justify-between items-center neon-border-blue"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 bg-neon-pink rounded-full glow-pink flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-xl text-white"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold neon-text-pink flicker">NEON TRADER 2077</h1> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <div class="text-center"> | |
| <p class="text-xs text-gray-400">CRYPTO TIME</p> | |
| <p id="current-time" class="text-xl neon-text-blue font-orbitron">23:59:45</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-xs text-gray-400">NET WORTH</p> | |
| <p class="text-xl neon-text-pink font-orbitron">₡ 1,245,890</p> | |
| </div> | |
| <div class="w-10 h-10 rounded-full bg-neon-blue bg-opacity-30 flex items-center justify-center neon-border-blue cursor-pointer hover:bg-opacity-50 transition"> | |
| <i class="fas fa-user neon-text-blue"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Left sidebar --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Portfolio Summary --> | |
| <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-pink"> | |
| <h2 class="text-xl neon-text-pink font-orbitron mb-4">PORTFOLIO</h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Total Value:</span> | |
| <span class="neon-text-blue font-bold">₡ 1,245,890</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Day Change:</span> | |
| <span class="text-green-400 font-bold">+₡ 24,560 (+2.01%)</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Buying Power:</span> | |
| <span class="neon-text-blue font-bold">₡ 245,890</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-sm text-gray-400 mb-2">ASSET DISTRIBUTION</h3> | |
| <div class="h-2 w-full bg-gray-800 rounded-full mb-2"> | |
| <div class="h-2 rounded-full bg-gradient-to-r from-neon-pink to-neon-purple" style="width: 65%;"></div> | |
| </div> | |
| <div class="flex justify-between text-xs"> | |
| <span class="neon-text-pink">Stocks (65%)</span> | |
| <span class="neon-text-blue">Crypto (35%)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-blue"> | |
| <h2 class="text-xl neon-text-blue font-orbitron mb-4">QUICK ACTIONS</h2> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <button class="cyber-button bg-neon-pink bg-opacity-20 text-white py-2 px-3 rounded-md neon-border-pink neon-text-pink"> | |
| <i class="fas fa-arrow-up mr-2"></i> Buy | |
| </button> | |
| <button class="cyber-button bg-red-500 bg-opacity-20 text-white py-2 px-3 rounded-md border border-red-500 text-red-400"> | |
| <i class="fas fa-arrow-down mr-2"></i> Sell | |
| </button> | |
| <button class="cyber-button bg-neon-blue bg-opacity-20 text-white py-2 px-3 rounded-md neon-border-blue neon-text-blue"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Trade | |
| </button> | |
| <button class="cyber-button bg-purple-500 bg-opacity-20 text-white py-2 px-3 rounded-md border border-purple-500 text-purple-400"> | |
| <i class="fas fa-coins mr-2"></i> Crypto | |
| </button> | |
| </div> | |
| </div> | |
| <!-- News Feed --> | |
| <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-pink"> | |
| <h2 class="text-xl neon-text-pink font-orbitron mb-4">CYBER NEWS</h2> | |
| <div class="space-y-4"> | |
| <div class="border-b border-gray-800 pb-3"> | |
| <p class="text-xs text-gray-400">10:45 AM</p> | |
| <p class="text-sm neon-text-blue">Arasaka Corp announces breakthrough in neural interface tech</p> | |
| </div> | |
| <div class="border-b border-gray-800 pb-3"> | |
| <p class="text-xs text-gray-400">09:30 AM</p> | |
| <p class="text-sm neon-text-blue">Militech wins major defense contract</p> | |
| </div> | |
| <div class="border-b border-gray-800 pb-3"> | |
| <p class="text-xs text-gray-400">08:15 AM</p> | |
| <p class="text-sm neon-text-blue">NetWatch reports surge in rogue AIs</p> | |
| </div> | |
| <div class="pb-2"> | |
| <p class="text-xs text-gray-400">07:00 AM</p> | |
| <p class="text-sm neon-text-blue">Night City stock exchange hits record high</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3 space-y-6"> | |
| <!-- Market Overview --> | |
| <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-blue"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl neon-text-blue font-orbitron">MARKET OVERVIEW</h2> | |
| <div class="flex space-x-2"> | |
| <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">STOCKS</button> | |
| <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">CRYPTO</button> | |
| <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">FUTURES</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800"> | |
| <p class="text-xs text-gray-400">NIGHT CITY INDEX</p> | |
| <p class="text-xl neon-text-blue font-orbitron">4,328.76</p> | |
| <p class="text-sm text-green-400">+42.18 (0.98%)</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800"> | |
| <p class="text-xs text-gray-400">TECH SECTOR</p> | |
| <p class="text-xl neon-text-pink font-orbitron">1,845.32</p> | |
| <p class="text-sm text-green-400">+28.45 (1.56%)</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800"> | |
| <p class="text-xs text-gray-400">BTC/USD</p> | |
| <p class="text-xl neon-text-blue font-orbitron">₡ 42,876</p> | |
| <p class="text-sm text-red-400">-1,245.76 (2.82%)</p> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-50 p-3 rounded-lg border border-gray-800"> | |
| <p class="text-xs text-gray-400">ETH/USD</p> | |
| <p class="text-xl neon-text-pink font-orbitron">₡ 2,876</p> | |
| <p class="text-sm text-green-400">+45.32 (1.60%)</p> | |
| </div> | |
| </div> | |
| <!-- Stock Chart --> | |
| <div class="h-64 bg-gray-900 bg-opacity-50 rounded-lg mb-4 relative overflow-hidden"> | |
| <!-- This would be a chart in a real app - using a placeholder here --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="terminal-text text-opacity-50">[ LIVE PRICE CHART ]</div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-neon-pink via-neon-blue to-neon-purple"></div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">1D</button> | |
| <button class="cyber-button bg-neon-blue bg-opacity-20 text-white text-xs py-1 px-3 rounded-md neon-border-blue">1W</button> | |
| <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">1M</button> | |
| <button class="cyber-button bg-gray-800 text-white text-xs py-1 px-3 rounded-md">1Y</button> | |
| </div> | |
| <div class="text-xs text-gray-400"> | |
| <span class="neon-text-blue">ARAS</span> | | |
| <span class="neon-text-pink">MILT</span> | | |
| <span class="neon-text-blue">KANG</span> | | |
| <span class="neon-text-pink">NETW</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Watchlist --> | |
| <div class="bg-black bg-opacity-70 p-4 rounded-lg neon-border-pink"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl neon-text-pink font-orbitron">WATCHLIST</h2> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search assets..." class="bg-gray-900 bg-opacity-50 text-white text-sm py-1 px-3 pr-8 rounded-md border border-gray-800 focus:outline-none focus:border-neon-blue"> | |
| <i class="fas fa-search absolute right-3 top-2 text-gray-500"></i> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="text-left text-sm text-gray-400 border-b border-gray-800"> | |
| <th class="pb-2">SYMBOL</th> | |
| <th class="pb-2">PRICE</th> | |
| <th class="pb-2">CHANGE</th> | |
| <th class="pb-2">% CHANGE</th> | |
| <th class="pb-2">VOLUME</th> | |
| <th class="pb-2">ACTIONS</th> | |
| </tr> | |
| </thead> | |
| <tbody id="stock-table"> | |
| <!-- Stock data will be inserted here by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-80 border-t border-neon-blue py-3 px-6 neon-border-blue mt-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-1"> | |
| <div class="w-2 h-2 rounded-full bg-green-500 pulse"></div> | |
| <span class="text-xs text-gray-400">CONNECTED</span> | |
| </div> | |
| <span class="text-xs text-gray-400">LATENCY: <span class="neon-text-blue">28ms</span></span> | |
| <span class="text-xs text-gray-400">API: <span class="neon-text-pink">v3.2.7</span></span> | |
| </div> | |
| <div class="text-xs text-gray-400"> | |
| <span class="neon-text-blue">NEON TRADER 2077</span> | SECURE TRADING TERMINAL | <span class="neon-text-pink">ENCRYPTED</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Update current time | |
| function updateTime() { | |
| const now = new Date(); | |
| const timeString = now.toLocaleTimeString('en-US', {hour12: false}); | |
| document.getElementById('current-time').textContent = timeString; | |
| } | |
| setInterval(updateTime, 1000); | |
| updateTime(); | |
| // Sample stock data | |
| const stocks = [ | |
| { symbol: 'ARAS', name: 'Arasaka Corp', price: 245.67, change: 3.45, percentChange: 1.42, volume: '4.5M' }, | |
| { symbol: 'MILT', name: 'Militech Intl', price: 187.32, change: -2.34, percentChange: -1.23, volume: '3.2M' }, | |
| { symbol: 'KANG', name: 'Kang Tao Arms', price: 92.45, change: 1.87, percentChange: 2.06, volume: '1.8M' }, | |
| { symbol: 'NETW', name: 'NetWatch', price: 156.78, change: 5.67, percentChange: 3.75, volume: '2.7M' }, | |
| { symbol: 'BIOT', name: 'Biotechnica', price: 78.23, change: -0.45, percentChange: -0.57, volume: '1.2M' }, | |
| { symbol: 'TRAU', name: 'Trauma Team', price: 134.56, change: 2.34, percentChange: 1.77, volume: '2.1M' }, | |
| { symbol: 'ZETT', name: 'Zetatech', price: 67.89, change: -1.23, percentChange: -1.78, volume: '3.5M' }, | |
| { symbol: 'BTC', name: 'Bitcoin', price: 42876, change: -1245, percentChange: -2.82, volume: '24.5K' }, | |
| { symbol: 'ETH', name: 'Ethereum', price: 2876, change: 45, percentChange: 1.60, volume: '18.7K' } | |
| ]; | |
| // Render stock table | |
| function renderStockTable() { | |
| const tableBody = document.getElementById('stock-table'); | |
| tableBody.innerHTML = ''; | |
| stocks.forEach(stock => { | |
| const isCrypto = stock.symbol === 'BTC' || stock.symbol === 'ETH'; | |
| const row = document.createElement('tr'); | |
| row.className = 'border-b border-gray-800 hover:bg-gray-900 hover:bg-opacity-50'; | |
| const changeClass = stock.change >= 0 ? 'stock-up' : 'stock-down'; | |
| const changeSymbol = stock.change >= 0 ? '+' : ''; | |
| row.innerHTML = ` | |
| <td class="py-3"> | |
| <div class="font-bold ${isCrypto ? 'neon-text-blue' : 'neon-text-pink'}">${stock.symbol}</div> | |
| <div class="text-xs text-gray-400">${stock.name}</div> | |
| </td> | |
| <td class="py-3 font-orbitron">₡ ${stock.price.toLocaleString()}</td> | |
| <td class="py-3 font-orbitron ${changeClass}">${changeSymbol}${stock.change}</td> | |
| <td class="py-3 font-orbitron ${changeClass}">${changeSymbol}${stock.percentChange}%</td> | |
| <td class="py-3 text-gray-400">${stock.volume}</td> | |
| <td class="py-3"> | |
| <div class="flex space-x-2"> | |
| <button class="cyber-button bg-green-900 bg-opacity-20 text-green-400 text-xs py-1 px-2 rounded border border-green-500"> | |
| <i class="fas fa-arrow-up mr-1"></i> Buy | |
| </button> | |
| <button class="cyber-button bg-red-900 bg-opacity-20 text-red-400 text-xs py-1 px-2 rounded border border-red-500"> | |
| <i class="fas fa-arrow-down mr-1"></i> Sell | |
| </button> | |
| </div> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } | |
| renderStockTable(); | |
| // Simulate stock price changes | |
| function simulateMarket() { | |
| stocks.forEach(stock => { | |
| // Random price change between -2% and +2% | |
| const changePercent = (Math.random() * 4 - 2) / 100; | |
| const newPrice = stock.price * (1 + changePercent); | |
| const change = newPrice - stock.price; | |
| const percentChange = (change / stock.price) * 100; | |
| stock.price = parseFloat(newPrice.toFixed(2)); | |
| stock.change = parseFloat(change.toFixed(2)); | |
| stock.percentChange = parseFloat(percentChange.toFixed(2)); | |
| // Random volume change | |
| const volumeNum = parseFloat(stock.volume.replace(/[MK]/g, '')); | |
| const volumeChange = Math.random() * 0.2 - 0.1; // -10% to +10% | |
| let newVolume = volumeNum * (1 + volumeChange); | |
| if (stock.volume.includes('M')) { | |
| newVolume = newVolume.toFixed(1) + 'M'; | |
| } else { | |
| newVolume = Math.round(newVolume) + 'K'; | |
| } | |
| stock.volume = newVolume; | |
| }); | |
| renderStockTable(); | |
| } | |
| setInterval(simulateMarket, 5000); | |
| // Add cyberpunk terminal effect to inputs | |
| document.querySelectorAll('input').forEach(input => { | |
| input.addEventListener('focus', () => { | |
| input.classList.add('neon-border-blue'); | |
| input.classList.remove('border-gray-800'); | |
| }); | |
| input.addEventListener('blur', () => { | |
| input.classList.remove('neon-border-blue'); | |
| input.classList.add('border-gray-800'); | |
| }); | |
| }); | |
| // Add button hover effects | |
| document.querySelectorAll('.cyber-button').forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| const rect = button.getBoundingClientRect(); | |
| const x = event.clientX - rect.left; | |
| const y = event.clientY - rect.top; | |
| button.style.setProperty('--x', `${x}px`); | |
| button.style.setProperty('--y', `${y}px`); | |
| }); | |
| }); | |
| </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=bybrawe/neon-trader-2077" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |