|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>grid_trader | High-Frequency Trading Dashboard</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #ff7b25; |
|
|
--primary-dark: #ff5e00; |
|
|
--primary-light: #ff9e58; |
|
|
--dark: #0a0a0a; |
|
|
--darker: #050505; |
|
|
--glass: rgba(15, 15, 15, 0.5); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Fira Code', monospace; |
|
|
background-color: var(--darker); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glass-panel { |
|
|
background: var(--glass); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 123, 37, 0.1); |
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); |
|
|
border-radius: 12px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.glass-panel:hover { |
|
|
border-color: rgba(255, 123, 37, 0.3); |
|
|
box-shadow: 0 8px 32px 0 rgba(255, 123, 37, 0.2); |
|
|
} |
|
|
|
|
|
.skew-right { |
|
|
transform: perspective(1000px) rotateY(-5deg); |
|
|
} |
|
|
|
|
|
.skew-left { |
|
|
transform: perspective(1000px) rotateY(5deg); |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 8px rgba(255, 123, 37, 0.7); |
|
|
} |
|
|
|
|
|
.glow-box { |
|
|
box-shadow: 0 0 15px rgba(255, 123, 37, 0.4); |
|
|
} |
|
|
|
|
|
.holographic-ticker { |
|
|
background: linear-gradient(135deg, |
|
|
rgba(255, 123, 37, 0.1) 0%, |
|
|
rgba(255, 123, 37, 0.3) 50%, |
|
|
rgba(255, 123, 37, 0.1) 100%); |
|
|
animation: holographic 8s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes holographic { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
|
|
|
.price-line { |
|
|
stroke: var(--primary); |
|
|
stroke-width: 2; |
|
|
stroke-dasharray: 5, 5; |
|
|
} |
|
|
|
|
|
.grid-line { |
|
|
stroke: rgba(255, 255, 255, 0.05); |
|
|
stroke-width: 1; |
|
|
} |
|
|
|
|
|
.fib-level { |
|
|
stroke: var(--primary-light); |
|
|
stroke-width: 1; |
|
|
stroke-dasharray: 3, 3; |
|
|
} |
|
|
|
|
|
.hover-grow { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
|
|
|
.hover-grow:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen p-4 md:p-8"> |
|
|
<div class="max-w-7xl mx-auto space-y-6"> |
|
|
|
|
|
<header class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-orange-700 flex items-center justify-center glow-box"> |
|
|
<i class="fas fa-robot text-white"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold glow-text">grid_trader</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="holographic-ticker px-4 py-2 rounded-full flex items-center space-x-2"> |
|
|
<span class="text-sm font-medium">GATE.IO</span> |
|
|
<span class="text-orange-400 font-bold">BTC/USDT</span> |
|
|
<span class="text-xs bg-orange-900 bg-opacity-50 px-2 py-1 rounded">LIVE</span> |
|
|
</div> |
|
|
|
|
|
<button class="glass-panel px-4 py-2 flex items-center space-x-2 hover-grow"> |
|
|
<i class="fas fa-cog text-orange-400"></i> |
|
|
<span>Settings</span> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="glass-panel p-6 skew-right"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-orange-300">Wallet Balances</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<span class="text-xs bg-orange-900 bg-opacity-30 px-2 py-1 rounded">Spot</span> |
|
|
<span class="text-xs bg-gray-800 px-2 py-1 rounded">Futures</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-orange-900 bg-opacity-30 flex items-center justify-center"> |
|
|
<i class="fab fa-bitcoin text-orange-400"></i> |
|
|
</div> |
|
|
<span>BTC</span> |
|
|
</div> |
|
|
<span class="font-mono">0.0425</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-orange-900 bg-opacity-30 flex items-center justify-center"> |
|
|
<i class="fas fa-dollar-sign text-orange-400"></i> |
|
|
</div> |
|
|
<span>USDT</span> |
|
|
</div> |
|
|
<span class="font-mono">1,245.36</span> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-800"> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-400">Total Value</span> |
|
|
<span class="font-mono text-orange-300">$2,856.42</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6 skew-right"> |
|
|
<h2 class="text-lg font-semibold text-orange-300 mb-4">Performance Metrics</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="space-y-1"> |
|
|
<span class="text-xs text-gray-400">Today's PnL</span> |
|
|
<div class="flex items-end space-x-1"> |
|
|
<span class="text-xl font-mono text-green-400">+$124.52</span> |
|
|
<span class="text-sm text-green-400">(2.4%)</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-1"> |
|
|
<span class="text-xs text-gray-400">Win Rate</span> |
|
|
<div class="flex items-end space-x-1"> |
|
|
<span class="text-xl font-mono text-orange-300">78%</span> |
|
|
<span class="text-xs text-gray-400">42/54</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-1"> |
|
|
<span class="text-xs text-gray-400">Avg. Spread</span> |
|
|
<div class="flex items-end space-x-1"> |
|
|
<span class="text-xl font-mono">0.12%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-1"> |
|
|
<span class="text-xs text-gray-400">Volatility</span> |
|
|
<div class="flex items-end space-x-1"> |
|
|
<span class="text-xl font-mono text-orange-300">High</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="glass-panel p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-orange-300">BTC/USDT</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-xs bg-orange-900 bg-opacity-30 px-2 py-1 rounded hover-grow">1H</button> |
|
|
<button class="text-xs bg-gray-800 px-2 py-1 rounded hover-grow">4H</button> |
|
|
<button class="text-xs bg-gray-800 px-2 py-1 rounded hover-grow">1D</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="h-64 relative"> |
|
|
|
|
|
<svg width="100%" height="100%" viewBox="0 0 300 200" preserveAspectRatio="none"> |
|
|
|
|
|
<line class="grid-line" x1="0" y1="40" x2="300" y2="40" /> |
|
|
<line class="grid-line" x1="0" y1="80" x2="300" y2="80" /> |
|
|
<line class="grid-line" x1="0" y1="120" x2="300" y2="120" /> |
|
|
<line class="grid-line" x1="0" y1="160" x2="300" y2="160" /> |
|
|
|
|
|
|
|
|
<line class="fib-level" x1="0" y1="30" x2="300" y2="30" /> |
|
|
<line class="fib-level" x1="0" y1="70" x2="300" y2="70" /> |
|
|
<line class="fib-level" x1="0" y1="110" x2="300" y2="110" /> |
|
|
<line class="fib-level" x1="0" y1="150" x2="300" y2="150" /> |
|
|
|
|
|
|
|
|
<path class="price-line" d="M0,160 C50,140 100,180 150,120 C200,60 250,100 300,80" fill="none" /> |
|
|
|
|
|
|
|
|
<circle cx="300" cy="80" r="4" fill="var(--primary)" /> |
|
|
<text x="285" y="70" fill="var(--primary)" font-size="10">$42,356</text> |
|
|
</svg> |
|
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 flex justify-between text-xs text-gray-400"> |
|
|
<span>10:00</span> |
|
|
<span>12:00</span> |
|
|
<span>14:00</span> |
|
|
<span>16:00</span> |
|
|
<span>18:00</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 grid grid-cols-3 gap-2 text-center text-sm"> |
|
|
<div> |
|
|
<span class="text-gray-400">Open</span> |
|
|
<div class="font-mono">$42,120</div> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-400">High</span> |
|
|
<div class="font-mono text-green-400">$42,890</div> |
|
|
</div> |
|
|
<div> |
|
|
<span class="text-gray-400">Low</span> |
|
|
<div class="font-mono text-red-400">$41,950</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6"> |
|
|
<div class="flex items-center space-x-2 mb-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-orange-500 to-orange-700 flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-white"></i> |
|
|
</div> |
|
|
<h2 class="text-lg font-semibold text-orange-300">AI Strategy Insight</h2> |
|
|
</div> |
|
|
|
|
|
<div class="text-sm text-gray-300 leading-relaxed"> |
|
|
<p class="mb-2">Current BTC/USDT pair shows optimal conditions for grid trading with:</p> |
|
|
<ul class="list-disc pl-5 space-y-1"> |
|
|
<li>High liquidity (top 5% of pairs)</li> |
|
|
<li>Volatility index of 2.8 (ideal range 2.5-3.5)</li> |
|
|
<li>Mean reversion pattern detected in last 4 hours</li> |
|
|
<li>Fibonacci levels providing strong support at $41,800</li> |
|
|
</ul> |
|
|
<p class="mt-3">Recommended grid parameters: 25 levels, ±3.2% range, 0.18% take-profit.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="glass-panel p-6 skew-left"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-orange-300">Active Positions</h2> |
|
|
<span class="text-xs bg-orange-900 bg-opacity-30 px-2 py-1 rounded">3 Open</span> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="hover-grow"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="font-mono text-sm">BTC/USDT</span> |
|
|
<span class="text-xs bg-green-900 bg-opacity-30 px-1 rounded">LONG</span> |
|
|
</div> |
|
|
<span class="text-sm font-mono text-green-400">+1.2%</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>Entry: $42,120</span> |
|
|
<span>Size: 0.02 BTC</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hover-grow"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="font-mono text-sm">ETH/USDT</span> |
|
|
<span class="text-xs bg-red-900 bg-opacity-30 px-1 rounded">SHORT</span> |
|
|
</div> |
|
|
<span class="text-sm font-mono text-red-400">-0.8%</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>Entry: $2,240</span> |
|
|
<span>Size: 0.5 ETH</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hover-grow"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="font-mono text-sm">SOL/USDT</span> |
|
|
<span class="text-xs bg-green-900 bg-opacity-30 px-1 rounded">LONG</span> |
|
|
</div> |
|
|
<span class="text-sm font-mono text-green-400">+3.4%</span> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-400 mt-1"> |
|
|
<span>Entry: $98.50</span> |
|
|
<span>Size: 10 SOL</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full mt-4 py-2 bg-gradient-to-r from-orange-700 to-orange-500 rounded-lg text-sm font-medium hover-grow"> |
|
|
View All Positions |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6 skew-left"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold text-orange-300">Recent Activity</h2> |
|
|
<i class="fas fa-sync-alt text-orange-400 text-sm cursor-pointer hover-grow"></i> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3 text-sm"> |
|
|
<div class="flex items-start space-x-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-orange-900 bg-opacity-30 flex items-center justify-center mt-0.5"> |
|
|
<i class="fas fa-arrow-up text-green-400 text-xs"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between"> |
|
|
<span>BTC buy executed</span> |
|
|
<span class="font-mono text-green-400">+0.023 BTC</span> |
|
|
</div> |
|
|
<div class="text-xs text-gray-400">42,120.50 USDT • 2 mins ago</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-orange-900 bg-opacity-30 flex items-center justify-center mt-0.5"> |
|
|
<i class="fas fa-arrow-down text-red-400 text-xs"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between"> |
|
|
<span>ETH sell executed</span> |
|
|
<span class="font-mono text-red-400">-0.42 ETH</span> |
|
|
</div> |
|
|
<div class="text-xs text-gray-400">2,245.30 USDT • 15 mins ago</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start space-x-2"> |
|
|
<div class="w-6 h-6 rounded-full bg-orange-900 bg-opacity-30 flex items-center justify-center mt-0.5"> |
|
|
<i class="fas fa-bolt text-orange-400 text-xs"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Grid parameters adjusted</span> |
|
|
</div> |
|
|
<div class="text-xs text-gray-400">Increased TP to 0.2% • 28 mins ago</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="glass-panel p-6"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<h2 class="text-lg font-semibold text-orange-300">Bot Controls</h2> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<span class="text-xs bg-green-900 bg-opacity-30 px-2 py-1 rounded flex items-center"> |
|
|
<span class="w-2 h-2 rounded-full bg-green-400 mr-1 pulse"></span> |
|
|
ACTIVE |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="glass-panel py-3 px-4 flex flex-col items-center hover-grow"> |
|
|
<i class="fas fa-pause text-orange-400 mb-1"></i> |
|
|
<span class="text-xs">Pause</span> |
|
|
</button> |
|
|
|
|
|
<button class="glass-panel py-3 px-4 flex flex-col items-center hover-grow"> |
|
|
<i class="fas fa-sync-alt text-orange-400 mb-1"></i> |
|
|
<span class="text-xs">Reset Grid</span> |
|
|
</button> |
|
|
|
|
|
<button class="glass-panel py-3 px-4 flex flex-col items-center hover-grow"> |
|
|
<i class="fas fa-chart-line text-orange-400 mb-1"></i> |
|
|
<span class="text-xs">Optimize</span> |
|
|
</button> |
|
|
|
|
|
<button class="glass-panel py-3 px-4 flex flex-col items-center hover-grow"> |
|
|
<i class="fas fa-history text-orange-400 mb-1"></i> |
|
|
<span class="text-xs">Backtest</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6"> |
|
|
<h2 class="text-lg font-semibold text-orange-300 mb-4">Symbol Selection</h2> |
|
|
|
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search trading pairs..." class="w-full bg-gray-900 bg-opacity-30 border border-gray-800 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-orange-500"> |
|
|
<i class="fas fa-search absolute right-3 top-2.5 text-gray-500"></i> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 grid grid-cols-3 gap-2"> |
|
|
<button class="py-1.5 px-2 bg-orange-900 bg-opacity-30 rounded text-xs hover-grow">BTC/USDT</button> |
|
|
<button class="py-1.5 px-2 bg-gray-800 rounded text-xs hover-grow">ETH/USDT</button> |
|
|
<button class="py-1.5 px-2 bg-gray-800 rounded text-xs hover-grow">SOL/USDT</button> |
|
|
<button class="py-1.5 px-2 bg-gray-800 rounded text-xs hover-grow">ADA/USDT</button> |
|
|
<button class="py-1.5 px-2 bg-gray-800 rounded text-xs hover-grow">DOT/USDT</button> |
|
|
<button class="py-1.5 px-2 bg-gray-800 rounded text-xs hover-grow">AVAX/USDT</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-panel p-6"> |
|
|
<h2 class="text-lg font-semibold text-orange-300 mb-4">Risk Management</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Max Drawdown</span> |
|
|
<span>5%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5"> |
|
|
<div class="bg-orange-500 h-1.5 rounded-full" style="width: 30%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Daily Loss Limit</span> |
|
|
<span>15%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5"> |
|
|
<div class="bg-orange-500 h-1.5 rounded-full" style="width: 10%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between text-sm mb-1"> |
|
|
<span>Position Size</span> |
|
|
<span>2.5%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-1.5"> |
|
|
<div class="bg-orange-500 h-1.5 rounded-full" style="width: 25%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button class="w-full mt-2 py-2 bg-gradient-to-r from-orange-700 to-orange-500 rounded-lg text-sm font-medium hover-grow"> |
|
|
Adjust Risk Parameters |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.hover-grow').forEach(el => { |
|
|
el.addEventListener('mouseenter', () => { |
|
|
el.classList.add('transform', 'scale-105'); |
|
|
}); |
|
|
el.addEventListener('mouseleave', () => { |
|
|
el.classList.remove('transform', 'scale-105'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateLiveData() { |
|
|
const elements = [ |
|
|
{ selector: '.holographic-ticker span:nth-child(2)', values: ['BTC/USDT', 'ETH/USDT', 'SOL/USDT'] }, |
|
|
{ selector: '.font-mono.text-green-400', values: ['+$124.52', '+$128.75', '+$131.20', '+$119.85'] }, |
|
|
{ selector: '.text-xl.font-mono.text-orange-300', values: ['78%', '79%', '80%', '77%'] } |
|
|
]; |
|
|
|
|
|
elements.forEach(el => { |
|
|
const element = document.querySelector(el.selector); |
|
|
if (element) { |
|
|
const randomValue = el.values[Math.floor(Math.random() * el.values.length)]; |
|
|
element.textContent = randomValue; |
|
|
} |
|
|
}); |
|
|
|
|
|
setTimeout(updateLiveData, 5000); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(updateLiveData, 5000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
