Hugging Face's logo

Spaces:
privacybug
/
trader
Running

App Files Community
trader / index.html
privacybug's picture
privacybug
undefined - Initial Deployment
3344e96 verified
raw
history blame contribute delete
71 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modular Trading Platform</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>
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.draggable-tab {
cursor: grab;
user-select: none;
}
.draggable-tab:active {
cursor: grabbing;
}
.module-card {
transition: all 0.2s ease;
}
.module-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.json-editor {
font-family: 'Courier New', Courier, monospace;
min-height: 300px;
}
.wallet-address {
font-family: monospace;
}
.trade-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
font-size: 10px;
background-color: #ef4444;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body class="bg-gray-100 text-gray-800 font-sans">
<!-- App Shell Container -->
<div class="flex flex-col h-screen">
<!-- App Header -->
<header class="bg-indigo-700 text-white p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<i class="fas fa-robot text-2xl"></i>
<h1 class="text-2xl font-bold">Modular Trading Platform</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button id="notifications-btn" class="p-2 rounded-full hover:bg-indigo-600 relative">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</button>
</div>
<div class="relative">
<button id="user-menu-btn" class="flex items-center space-x-2">
<img src="https://via.placeholder.com/40" alt="User" class="rounded-full w-8 h-8">
<span>Admin</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white shadow-md p-4 hidden md:block">
<div class="mb-6">
<h2 class="text-lg font-semibold mb-2">Quick Actions</h2>
<div class="space-y-2">
<button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-100">
<i class="fas fa-plus-circle text-green-500"></i>
<span>New Trade</span>
</button>
<button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-100">
<i class="fas fa-wallet text-blue-500"></i>
<span>Fund Wallet</span>
</button>
<button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-100">
<i class="fas fa-chart-line text-purple-500"></i>
<span>Market View</span>
</button>
</div>
</div>
<div class="mb-6">
<h2 class="text-lg font-semibold mb-2">Available Modules</h2>
<div class="space-y-2" id="module-library">
<!-- Module cards will be dynamically added here -->
</div>
</div>
<div class="mb-6">
<h2 class="text-lg font-semibold mb-2">System Status</h2>
<div class="space-y-2 text-sm">
<div class="flex justify-between">
<span>API Connection:</span>
<span class="text-green-500 font-medium">Active</span>
</div>
<div class="flex justify-between">
<span>WebSocket:</span>
<span class="text-green-500 font-medium">Connected</span>
</div>
<div class="flex justify-between">
<span>Memory Usage:</span>
<span class="text-yellow-500 font-medium">45%</span>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col overflow-hidden">
<!-- Tab Bar -->
<div class="bg-white border-b flex items-center overflow-x-auto">
<div id="tab-container" class="flex flex-nowrap">
<!-- Tabs will be dynamically added here -->
</div>
<button id="add-tab-btn" class="p-2 text-gray-500 hover:text-gray-700">
<i class="fas fa-plus"></i>
</button>
</div>
<!-- Tab Content Area -->
<div id="tab-content-area" class="flex-1 overflow-auto p-4 bg-white">
<!-- Tab contents will be dynamically loaded here -->
<div id="welcome-content" class="h-full flex flex-col items-center justify-center text-center">
<i class="fas fa-cubes text-6xl text-indigo-500 mb-4"></i>
<h2 class="text-2xl font-bold mb-2">Welcome to Modular Trading Platform</h2>
<p class="text-gray-600 max-w-md mb-6">
Load modules from the sidebar to get started. Each module runs as an independent application within this shell.
</p>
<button id="quick-start-btn" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">
Quick Start Guide
</button>
</div>
</div>
</main>
</div>
</div>
<!-- Module Templates (hidden) -->
<div id="templates" style="display: none;">
<!-- Trading Config Manager Template -->
<div id="trading-config-template">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2">
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-semibold">Strategy Configuration</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-blue-500 text-white rounded text-sm">Save</button>
<button class="px-3 py-1 bg-gray-200 rounded text-sm">Reset</button>
</div>
</div>
<div class="json-editor bg-white p-4 rounded border border-gray-300">
{
"strategy": "mean_reversion",
"parameters": {
"lookback_period": 14,
"entry_z_score": 1.5,
"exit_z_score": 0.5,
"max_position_size": 0.1
},
"risk_management": {
"stop_loss": 0.05,
"take_profit": 0.1,
"trailing_stop": true
}
}
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-semibold mb-2">Configuration Profiles</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="module-card bg-white p-3 rounded border border-gray-200 cursor-pointer">
<div class="flex justify-between">
<span class="font-medium">ETH Scalper</span>
<i class="fas fa-check-circle text-green-500"></i>
</div>
<div class="text-xs text-gray-500 mt-1">Last used: 2 hours ago</div>
</div>
<div class="module-card bg-white p-3 rounded border border-gray-200 cursor-pointer">
<div class="flex justify-between">
<span class="font-medium">BTC Swing</span>
<i class="fas fa-circle text-gray-300"></i>
</div>
<div class="text-xs text-gray-500 mt-1">Last used: 1 day ago</div>
</div>
<div class="module-card bg-white p-3 rounded border border-gray-200 cursor-pointer">
<div class="flex justify-between">
<span class="font-medium">Altcoin Mean Rev</span>
<i class="fas fa-circle text-gray-300"></i>
</div>
<div class="text-xs text-gray-500 mt-1">Last used: 3 days ago</div>
</div>
</div>
</div>
</div>
<div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<h3 class="font-semibold mb-2">Import/Export</h3>
<div class="space-y-3">
<button class="w-full py-2 bg-green-500 text-white rounded flex items-center justify-center space-x-2">
<i class="fas fa-file-export"></i>
<span>Export Config</span>
</button>
<button class="w-full py-2 bg-blue-500 text-white rounded flex items-center justify-center space-x-2">
<i class="fas fa-file-import"></i>
<span>Import Config</span>
</button>
<div class="border-t pt-3">
<label class="block text-sm font-medium mb-1">Format</label>
<select class="w-full p-2 border rounded">
<option>JSON</option>
<option>YAML</option>
<option>TOML</option>
</select>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-semibold mb-2">Recent Activity</h3>
<div class="space-y-2">
<div class="text-sm p-2 bg-white rounded border-l-4 border-blue-500">
<div class="font-medium">Config saved</div>
<div class="text-xs text-gray-500">2 minutes ago</div>
</div>
<div class="text-sm p-2 bg-white rounded border-l-4 border-green-500">
<div class="font-medium">Strategy activated</div>
<div class="text-xs text-gray-500">15 minutes ago</div>
</div>
<div class="text-sm p-2 bg-white rounded border-l-4 border-yellow-500">
<div class="font-medium">Parameter adjusted</div>
<div class="text-xs text-gray-500">1 hour ago</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wallet Management Template -->
<div id="wallet-management-template">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2">
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold">Connected Wallets</h3>
<button class="px-3 py-1 bg-blue-500 text-white rounded text-sm flex items-center space-x-1">
<i class="fas fa-plus"></i>
<span>Add Wallet</span>
</button>
</div>
<div class="space-y-3">
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex justify-between items-start">
<div>
<div class="font-medium flex items-center space-x-2">
<i class="fas fa-wallet text-blue-500"></i>
<span>Primary Trading Wallet</span>
</div>
<div class="wallet-address text-sm text-gray-600 mt-1">0x742d35Cc6634C0532925a3b844Bc454e4438f44e</div>
</div>
<div class="flex space-x-2">
<button class="p-1 text-blue-500 hover:text-blue-700">
<i class="fas fa-cog"></i>
</button>
<button class="p-1 text-green-500 hover:text-green-700">
<i class="fas fa-exchange-alt"></i>
</button>
</div>
</div>
<div class="mt-3 pt-3 border-t flex justify-between">
<div>
<div class="text-xs text-gray-500">Balance</div>
<div class="font-bold">3.452 ETH</div>
</div>
<div>
<div class="text-xs text-gray-500">USD Value</div>
<div class="font-bold">$6,742.12</div>
</div>
<div>
<div class="text-xs text-gray-500">Status</div>
<div class="text-green-500 font-medium">Active</div>
</div>
</div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex justify-between items-start">
<div>
<div class="font-medium flex items-center space-x-2">
<i class="fas fa-wallet text-purple-500"></i>
<span>Cold Storage</span>
</div>
<div class="wallet-address text-sm text-gray-600 mt-1">0x742d35Cc6634C0532925a3b844Bc454e4438f44e</div>
</div>
<div class="flex space-x-2">
<button class="p-1 text-blue-500 hover:text-blue-700">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
<div class="mt-3 pt-3 border-t flex justify-between">
<div>
<div class="text-xs text-gray-500">Balance</div>
<div class="font-bold">12.784 ETH</div>
</div>
<div>
<div class="text-xs text-gray-500">USD Value</div>
<div class="font-bold">$24,932.48</div>
</div>
<div>
<div class="text-xs text-gray-500">Status</div>
<div class="text-yellow-500 font-medium">Inactive</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-semibold mb-2">Activity Log</h3>
<div class="bg-white rounded-lg overflow-hidden border border-gray-200">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 text-sm">2023-06-15 14:32</td>
<td class="px-4 py-2 text-sm">ETH Transfer Out</td>
<td class="px-4 py-2 text-sm">-1.2 ETH</td>
<td class="px-4 py-2 text-sm text-green-500">Completed</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm">2023-06-15 11:18</td>
<td class="px-4 py-2 text-sm">USDC Deposit</td>
<td class="px-4 py-2 text-sm">+5,000 USDC</td>
<td class="px-4 py-2 text-sm text-green-500">Completed</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm">2023-06-14 09:45</td>
<td class="px-4 py-2 text-sm">Wallet Connect</td>
<td class="px-4 py-2 text-sm">-</td>
<td class="px-4 py-2 text-sm text-green-500">Connected</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<h3 class="font-semibold mb-2">Quick Actions</h3>
<div class="space-y-3">
<button class="w-full py-2 bg-blue-500 text-white rounded flex items-center justify-center space-x-2">
<i class="fas fa-exchange-alt"></i>
<span>Transfer Funds</span>
</button>
<button class="w-full py-2 bg-green-500 text-white rounded flex items-center justify-center space-x-2">
<i class="fas fa-download"></i>
<span>Deposit</span>
</button>
<button class="w-full py-2 bg-red-500 text-white rounded flex items-center justify-center space-x-2">
<i class="fas fa-upload"></i>
<span>Withdraw</span>
</button>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<h3 class="font-semibold mb-2">Security</h3>
<div class="space-y-3">
<div class="bg-white p-3 rounded border border-gray-200">
<div class="flex justify-between items-center">
<span class="font-medium">2FA Enabled</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
</label>
</div>
</div>
<div class="bg-white p-3 rounded border border-gray-200">
<div class="flex justify-between items-center">
<span class="font-medium">Session Timeout</span>
<span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">15 min</span>
</div>
</div>
<button class="w-full py-2 bg-yellow-500 text-white rounded flex items-center justify-center space-x-2">
<i class="fas fa-shield-alt"></i>
<span>Security Settings</span>
</button>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-semibold mb-2">Wallet Stats</h3>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">Total Balance</span>
<span class="font-bold">16.236 ETH</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">Active Wallets</span>
<span class="font-bold">1/2</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">Last Activity</span>
<span class="font-bold">2 hours ago</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-500">Total Value</span>
<span class="font-bold">$31,674.60</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sniper Trading Client Template -->
<div id="sniper-trading-template">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
<div class="lg:col-span-3">
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-semibold">Sniper Configuration</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-red-500 text-white rounded text-sm flex items-center space-x-1">
<i class="fas fa-bolt"></i>
<span>Emergency Stop</span>
</button>
<button class="px-3 py-1 bg-green-500 text-white rounded text-sm flex items-center space-x-1">
<i class="fas fa-play"></i>
<span>Activate</span>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="bg-white p-4 rounded-lg border border-gray-200">
<label class="block text-sm font-medium mb-2">Buy Threshold (ETH)</label>
<input type="range" min="0" max="5" step="0.01" value="1.25" class="w-full trade-slider mb-2">
<div class="flex justify-between text-sm">
<span>0</span>
<span class="font-bold">1.25 ETH</span>
<span>5</span>
</div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<label class="block text-sm font-medium mb-2">Sell Threshold (ETH)</label>
<input type="range" min="0" max="5" step="0.01" value="2.75" class="w-full trade-slider mb-2">
<div class="flex justify-between text-sm">
<span>0</span>
<span class="font-bold">2.75 ETH</span>
<span>5</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg border border-gray-200">
<label class="block text-sm font-medium mb-2">Gas Price (Gwei)</label>
<input type="range" min="1" max="100" step="1" value="25" class="w-full trade-slider mb-2">
<div class="flex justify-between text-sm">
<span>1</span>
<span class="font-bold">25 Gwei</span>
<span>100</span>
</div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<label class="block text-sm font-medium mb-2">Slippage (%)</label>
<input type="range" min="0.1" max="5" step="0.1" value="1.5" class="w-full trade-slider mb-2">
<div class="flex justify-between text-sm">
<span>0.1</span>
<span class="font-bold">1.5%</span>
<span>5</span>
</div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<label class="block text-sm font-medium mb-2">Max Buy (ETH)</label>
<input type="range" min="0.01" max="10" step="0.01" value="2.5" class="w-full trade-slider mb-2">
<div class="flex justify-between text-sm">
<span>0.01</span>
<span class="font-bold">2.5 ETH</span>
<span>10</span>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex justify-between items-center mb-2">
<h3 class="font-semibold">Execution Log</h3>
<div class="flex space-x-2">
<button class="px-2 py-1 bg-gray-200 rounded text-sm">
<i class="fas fa-trash"></i>
</button>
<button class="px-2 py-1 bg-gray-200 rounded text-sm">
<i class="fas fa-download"></i>
</button>
</div>
</div>
<div class="bg-white rounded-lg overflow-hidden border border-gray-200 max-h-64 overflow-y-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 sticky top-0">
<tr>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Price</th>
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-2 text-sm">14:32:45</td>
<td class="px-4 py-2 text-sm text-green-500">BUY</td>
<td class="px-4 py-2 text-sm">1.25 ETH</td>
<td class="px-4 py-2 text-sm">$1,852.34</td>
<td class="px-4 py-2 text-sm text-green-500">Filled</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm">14:30:12</td>
<td class="px-4 py-2 text-sm text-blue-500">Limit Order</td>
<td class="px-4 py-2 text-sm">1.25 ETH</td>
<td class="px-4 py-2 text-sm">$1,850.00</td>
<td class="px-4 py-2 text-sm text-yellow-500">Pending</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm">14:28:33</td>
<td class="px-4 py-2 text-sm text-red-500">SELL</td>
<td class="px-4 py-2 text-sm">0.75 ETH</td>
<td class="px-4 py-2 text-sm">$1,865.72</td>
<td class="px-4 py-2 text-sm text-green-500">Filled</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm">14:25:07</td>
<td class="px-4 py-2 text-sm text-red-500">SELL</td>
<td class="px-4 py-2 text-sm">1.00 ETH</td>
<td class="px-4 py-2 text-sm">$1,860.45</td>
<td class="px-4 py-2 text-sm text-green-500">Filled</td>
</tr>
<tr>
<td class="px-4 py-2 text-sm">14:22:56</td>
<td class="px-4 py-2 text-sm text-green-500">BUY</td>
<td class="px-4 py-2 text-sm">2.50 ETH</td>
<td class="px-4 py-2 text-sm">$1,842.11</td>
<td class="px-4 py-2 text-sm text-green-500">Filled</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<h3 class="font-semibold mb-2">Quick Controls</h3>
<div class="space-y-3">
<button class="w-full py-3 bg-green-500 text-white rounded-lg font-bold flex items-center justify-center space-x-2">
<i class="fas fa-bullseye"></i>
<span>Buy Now</span>
</button>
<button class="w-full py-3 bg-red-500 text-white rounded-lg font-bold flex items-center justify-center space-x-2">
<i class="fas fa-bullseye"></i>
<span>Sell Now</span>
</button>
<div class="border-t pt-3">
<label class="block text-sm font-medium mb-1">Target Token</label>
<select class="w-full p-2 border rounded">
<option>ETH</option>
<option>BTC</option>
<option>SOL</option>
<option>AVAX</option>
</select>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<h3 class="font-semibold mb-2">Market Data</h3>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">ETH Price</span>
<span class="font-bold">$1,852.34</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">24h Change</span>
<span class="font-bold text-green-500">+2.45%</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">24h Volume</span>
<span class="font-bold">$12.4B</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-500">Market Cap</span>
<span class="font-bold">$222.8B</span>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-semibold mb-2">Performance</h3>
<div class="bg-white p-4 rounded-lg border border-gray-200">
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">Today's P&L</span>
<span class="font-bold text-green-500">+$342.56</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">Week's P&L</span>
<span class="font-bold text-green-500">+$1,245.78</span>
</div>
<div class="flex justify-between mb-3">
<span class="text-sm text-gray-500">Total Trades</span>
<span class="font-bold">14</span>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-500">Win Rate</span>
<span class="font-bold">78.6%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- AI Agent Panel Template -->
<div id="ai-agent-template">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2">
<div class="bg-gray-50 p-4 rounded-lg mb-4 h-96 overflow-y-auto">
<div class="space-y-4" id="ai-chat-messages">
<div class="flex justify-start">
<div class="bg-white p-3 rounded-lg border border-gray-200 max-w-3xl">
<div class="flex items-center space-x-2 mb-1">
<i class="fas fa-robot text-blue-500"></i>
<span class="font-medium">Trading Assistant</span>
</div>
<p>Hello! I'm your AI trading assistant. How can I help you today? I can analyze market trends, review your trading strategies, or help debug your trading bot code.</p>
</div>
</div>
<div class="flex justify-end">
<div class="bg-blue-500 text-white p-3 rounded-lg max-w-3xl">
<div class="flex items-center space-x-2 mb-1 justify-end">
<span class="font-medium">You</span>
<i class="fas fa-user"></i>
</div>
<p>Can you analyze my current ETH trading strategy?</p>
</div>
</div>
<div class="flex justify-start">
<div class="bg-white p-3 rounded-lg border border-gray-200 max-w-3xl">
<div class="flex items-center space-x-2 mb-1">
<i class="fas fa-robot text-blue-500"></i>
<span class="font-medium">Trading Assistant</span>
</div>
<p>I've reviewed your ETH mean reversion strategy. The current parameters look good, but I notice your lookback period of 14 days might be too short given current market volatility. I'd recommend extending to 21 days for more stable z-score calculations.</p>
<div class="mt-2 p-2 bg-blue-50 rounded border border-blue-100">
<div class="font-medium mb-1">Suggested Adjustment:</div>
<code class="text-sm">"lookback_period": 21</code>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center space-x-2 mb-2">
<i class="fas fa-paperclip text-gray-500"></i>
<span class="text-sm text-gray-600">Attach files for analysis (CSV, JSON, code files)</span>
</div>
<div class="flex space-x-3">
<textarea id="ai-chat-input" class="flex-1 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Ask the AI assistant anything about trading, strategies, or code..."></textarea>
<button id="ai-send-btn" class="self-end p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div>
<div class="bg-gray-50 p-4 rounded-lg mb-4">
<h3 class="font-semibold mb-2">AI Tools</h3>
<div class="grid grid-cols-1 gap-3">
<button class="module-card bg-white p-3 rounded-lg border border-gray-200 flex items-center space-x-3">
<div class="p-2 bg-purple-100 rounded-full text-purple-600">
<i class="fas fa-chart-line"></i>
</div>
<div>
<div class="font-medium">Strategy Analyzer</div>
<div class="text-xs text-gray-500">Optimize trading parameters</div>
</div>
</button>
<button class="module-card bg-white p-3 rounded-lg border border-gray-200 flex items-center space-x-3">
<div class="p-2 bg-blue-100 rounded-full text-blue-600">
<i class="fas fa-code"></i>
</div>
<div>
<div class="font-medium">Code Debugger</div>
<div class="text-xs text-gray-500">Fix trading bot issues</div>
</div>
</button>
<button class="module-card bg-white p-3 rounded-lg border border-gray-200 flex items-center space-x-3">
<div class="p-2 bg-green-100 rounded-full text-green-600">
<i class="fas fa-lightbulb"></i>
</div>
<div>
<div class="font-medium">Idea Generator</div>
<div class="text-xs text-gray-500">New trading strategies</div>
</div>
</button>
<button class="module-card bg-white p-3 rounded-lg border border-gray-200 flex items-center space-x-3">
<div class="p-2 bg-yellow-100 rounded-full text-yellow-600">
<i class="fas fa-file-alt"></i>
</div>
<div>
<div class="font-medium">Report Builder</div>
<div class="text-xs text-gray-500">Performance analysis</div>
</div>
</button>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<h3 class="font-semibold mb-2">Recent Analysis</h3>
<div class="space-y-3">
<div class="bg-white p-3 rounded-lg border border-gray-200">
<div class="flex justify-between items-start">
<div>
<div class="font-medium">ETH Strategy Review</div>
<div class="text-xs text-gray-500">2 hours ago</div>
</div>
<button class="text-blue-500">
<i class="fas fa-external-link-alt"></i>
</button>
</div>
<div class="mt-2 text-sm">
<span class="inline-block px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Optimized</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200">
<div class="flex justify-between items-start">
<div>
<div class="font-medium">Code Debug</div>
<div class="text-xs text-gray-500">5 hours ago</div>
</div>
<button class="text-blue-500">
<i class="fas fa-external-link-alt"></i>
</button>
</div>
<div class="mt-2 text-sm">
<span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Fixed</span>
</div>
</div>
<div class="bg-white p-3 rounded-lg border border-gray-200">
<div class="flex justify-between items-start">
<div>
<div class="font-medium">Market Trend</div>
<div class="text-xs text-gray-500">1 day ago</div>
</div>
<button class="text-blue-500">
<i class="fas fa-external-link-alt"></i>
</button>
</div>
<div class="mt-2 text-sm">
<span class="inline-block px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs">Insight</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Template -->
<div id="tab-template" style="display: none;">
<div class="tab draggable-tab flex items-center px-4 py-2 border-r border-gray-200 hover:bg-gray-50 relative">
<i class="tab-icon mr-2"></i>
<span class="tab-title"></span>
<button class="tab-close ml-2 text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Module Card Template -->
<div id="module-card-template" style="display: none;">
<div class="module-card bg-white p-3 rounded-lg border border-gray-200 cursor-pointer">
<div class="flex items-center space-x-3">
<div class="module-icon p-2 rounded-full text-white">
<i class="fas fa-cog"></i>
</div>
<div>
<div class="font-medium module-title"></div>
<div class="text-xs text-gray-500 module-description"></div>
</div>
</div>
</div>
</div>
<!-- Project Structure Documentation (hidden) -->
<div id="project-structure" style="display: none;">
<div class="bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Project Structure Documentation</h2>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">File/Folder Layout</h3>
<pre class="bg-gray-100 p-4 rounded text-sm font-mono">
modules-platform/
├── apps/
│ ├── shell/ # Main GUI shell application
│ │ ├── src/
│ │ │ ├── components/ # Shared UI components
│ │ │ ├── lib/ # Core framework utilities
│ │ │ ├── store/ # Centralized state management
│ │ │ ├── App.vue # Shell root component
│ │ │ └── main.js # Shell entry point
│ │ └── vite.config.js
│ └── dashboard/ # Optional landing page
├── modules/ # Independent feature modules
│ ├── trading-config/ # Trading Config Manager
│ ├── wallet-mgmt/ # Wallet Management
│ ├── sniper-client/ # Sniper Trading Client
│ └── ai-agent/ # AI Agent Panel
├── packages/
│ ├── core/ # Shared core functionality
│ ├── types/ # Type definitions
│ └── utils/ # Shared utilities
├── turbo.json # Turborepo configuration
└── package.json</pre>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">Module Registration Logic</h3>
<pre class="bg-gray-100 p-4 rounded text-sm font-mono">
// In shell/src/lib/module-registry.js
const registeredModules = new Map();
export function registerModule(moduleConfig) {
// Validate module configuration
if (!moduleConfig.id || !moduleConfig.name || !moduleConfig.component) {
throw new Error('Invalid module configuration');
}
// Add to registry
registeredModules.set(moduleConfig.id, {
...moduleConfig,
active: false,
state: {}
});
// Emit event for UI to update
eventBus.emit('module-registered', moduleConfig);
}
// Example module registration
registerModule({
id: 'trading-config',
name: 'Trading Config Manager',
description: 'Advanced strategy configuration and management',
icon: 'fa-cog',
component: defineAsyncComponent(() => import('@modules/trading-config'))
});</pre>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">Example Module Configuration</h3>
<pre class="bg-gray-100 p-4 rounded text-sm font-mono">
// modules/trading-config/module.config.js
export default {
id: 'trading-config',
name: 'Trading Config Manager',
description: 'Advanced UI for strategy configuration and state persistence',
icon: 'fa-cog',
routes: [
{
path: '/config',
component: () => import('./views/MainConfig.vue')
},
{
path: '/config/editor',
component: () => import('./views/ConfigEditor.vue')
}
],
storeModule: () => import('./store'),
permissions: ['read:config', 'write:config'],
dependencies: ['wallet-mgmt']
};</pre>
</div>
<div class="mb-6">
<h3 class="text-lg font-semibold mb-2">State/Event Flow Diagram</h3>
<div class="bg-gray-100 p-4 rounded text-sm">
<div class="flex justify-center">
<div class="text-center">
<div class="font-bold mb-2">Shell Core</div>
<div class="border-2 border-blue-500 rounded p-2 mb-4">Event Bus</div>
<div class="flex justify-around">
<div>
<div class="font-bold mb-2">Trading Module</div>
<div class="border-2 border-green-500 rounded p-2">Trade Executed → Wallet Update</div>
</div>
<div>
<div class="font-bold mb-2">Wallet Module</div>
<div class="border-2 border-purple-500 rounded p-2">Balance Changed → UI Update</div>
</div>
</div>
<div class="mt-4">
<div class="font-bold mb-2">AI Module</div>
<div class="border-2 border-yellow-500 rounded p-2">Analysis Complete → Strategy Update</div>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-2">CI/CD & Containerization</h3>
<div class="bg-gray-100 p-4 rounded text-sm">
<p class="mb-2"><strong>Build Pipeline:</strong></p>
<ul class="list-disc pl-5 mb-3">
<li>Independent builds for shell and each module</li>
<li>Versioned artifacts stored in registry</li>
<li>Automated dependency checks</li>
</ul>
<p class="mb-2"><strong>Container Strategy:</strong></p>
<ul class="list-disc pl-5 mb-3">
<li>Microfrontends served from separate containers</li>
<li>Shell acts as composition layer</li>
<li>Module updates can be deployed independently</li>
</ul>
<p class="mb-2"><strong>Example Dockerfile:</strong></p>
<pre class="bg-gray-200 p-2 rounded">FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]</pre>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Module definitions
const modules = [
{
id: 'trading-config',
title: 'Trading Config',
description: 'Strategy configuration manager',
icon: 'fa-cog',
iconColor: 'bg-blue-500',
templateId: 'trading-config-template'
},
{
id: 'wallet-management',
title: 'Wallet Management',
description: 'Multi-wallet setup and tracking',
icon: 'fa-wallet',
iconColor: 'bg-green-500',
templateId: 'wallet-management-template'
},
{
id: 'sniper-trading',
title: 'Sniper Trading',
description: 'Real-time execution interface',
icon: 'fa-bullseye',
iconColor: 'bg-red-500',
templateId: 'sniper-trading-template'
},
{
id: 'ai-agent',
title: 'AI Agent',
description: 'Trading assistant and analysis',
icon: 'fa-robot',
iconColor: 'bg-purple-500',
templateId: 'ai-agent-template'
}
];
// State management
const state = {
activeTab: null,
tabs: [],
modules: [...modules]
};
// DOM elements
const tabContainer = document.getElementById('tab-container');
const tabContentArea = document.getElementById('tab-content-area');
const moduleLibrary = document.getElementById('module-library');
const addTabBtn = document.getElementById('add-tab-btn');
const welcomeContent = document.getElementById('welcome-content');
const quickStartBtn = document.getElementById('quick-start-btn');
const templates = document.getElementById('templates');
const projectStructure = document.getElementById('project-structure');
// Initialize module library
function initModuleLibrary() {
const template = document.getElementById('module-card-template');
state.modules.forEach(module => {
const clone = template.content.cloneNode(true);
const card = clone.querySelector('.module-card');
const icon = clone.querySelector('.module-icon');
const title = clone.querySelector('.module-title');
const description = clone.querySelector('.module-description');
icon.className = `module-icon p-2 rounded-full text-white ${module.iconColor}`;
icon.querySelector('i').className = `fas ${module.icon}`;
title.textContent = module.title;
description.textContent = module.description;
card.addEventListener('click', () => openModule(module));
moduleLibrary.appendChild(clone);
});
}
// Open a module in a new tab
function openModule(module) {
// Check if module is already open
const existingTab = state.tabs.find(tab => tab.moduleId === module.id);
if (existingTab) {
setActiveTab(existingTab.id);
return;
}
// Create new tab
const tabId = `tab-${Date.now()}`;
const tab = {
id: tabId,
moduleId: module.id,
title: module.title,
icon: module.icon
};
state.tabs.push(tab);
renderTab(tab);
setActiveTab(tabId);
// Create tab content
const template = document.getElementById(module.templateId);
const content = document.createElement('div');
content.id = `content-${tabId}`;
content.className = 'tab-content';
content.innerHTML = template.innerHTML;
tabContentArea.appendChild(content);
// Hide welcome content if it's the first tab
if (welcomeContent.style.display !== 'none') {
welcomeContent.style.display = 'none';
}
}
// Render a tab in the tab bar
function renderTab(tab) {
const template = document.getElementById('tab-template');
const clone = template.content.cloneNode(true);
const tabEl = clone.querySelector('.tab');
const icon = clone.querySelector('.tab-icon');
const title = clone.querySelector('.tab-title');
const closeBtn = clone.querySelector('.tab-close');
tabEl.id = tab.id;
icon.className = `tab-icon fas ${tab.icon}`;
title.textContent = tab.title;
closeBtn.addEventListener('click', (e) => {
e.stopPropagation();
closeTab(tab.id);
});
tabEl.addEventListener('click', () => setActiveTab(tab.id));
tabContainer.appendChild(clone);
}
// Set the active tab
function setActiveTab(tabId) {
// Update tab UI
document.querySelectorAll('.tab').forEach(tab => {
tab.classList.remove('bg-gray-100');
tab.classList.remove('font-medium');
});
const activeTabEl = document.getElementById(tabId);
if (activeTabEl) {
activeTabEl.classList.add('bg-gray-100');
activeTabEl.classList.add('font-medium');
}
// Update tab content
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
const activeContent = document.getElementById(`content-${tabId}`);
if (activeContent) {
activeContent.classList.add('active');
}
// Update state
state.activeTab = tabId;
}
// Close a tab
function closeTab(tabId) {
// Remove tab from DOM
const tabEl = document.getElementById(tabId);
if (tabEl) tabEl.remove();
// Remove content from DOM
const contentEl = document.getElementById(`content-${tabId}`);
if (contentEl) contentEl.remove();
// Remove tab from state
state.tabs = state.tabs.filter(tab => tab.id !== tabId);
// If no tabs left, show welcome content
if (state.tabs.length === 0) {
welcomeContent.style.display = 'flex';
} else {
// Set the last tab as active
setActiveTab(state.tabs[state.tabs.length - 1].id);
}
}
// Event listeners
addTabBtn.addEventListener('click', () => {
// For demo purposes, open the first module
if (state.modules.length > 0) {
openModule(state.modules[0]);
}
});
quickStartBtn.addEventListener('click', () => {
// Show project structure documentation
tabContentArea.innerHTML = '';
tabContentArea.appendChild(projectStructure.cloneNode(true));
projectStructure.style.display = 'block';
// Hide welcome content
welcomeContent.style.display = 'none';
});
// AI Chat functionality
document.addEventListener('click', function(e) {
if (e.target && e.target.id === 'ai-send-btn') {
const input = document.getElementById('ai-chat-input');
const message = input.value.trim();
if (message) {
// Add user message
const messagesContainer = document.getElementById('ai-chat-messages');
const userMessage = document.createElement('div');
userMessage.className = 'flex justify-end';
userMessage.innerHTML = `
<div class="bg-blue-500 text-white p-3 rounded-lg max-w-3xl">
<div class="flex items-center space-x-2 mb-1 justify-end">
<span class="font-medium">You</span>
<i class="fas fa-user"></i>
</div>
<p>${message}</p>
</div>
`;
messagesContainer.appendChild(userMessage);
// Clear input
input.value = '';
// Add loading indicator
const loading = document.createElement('div');
loading.className = 'flex justify-start';
loading.innerHTML = `
<div class="bg-white p-3 rounded-lg border border-gray-200 max-w-3xl">
<div class="flex items-center space-x-2 mb-1">
<i class="fas fa-robot text-blue-500"></i>
<span class="font-medium">Trading Assistant</span>
</div>
<div class="flex space-x-2">
<div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce"></div>
<div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce" style="animation-delay: 0.4s"></div>
</div>
</div>
`;
messagesContainer.appendChild(loading);
// Scroll to bottom
messagesContainer.scrollTop = messagesContainer.scrollHeight;
// Simulate AI response after delay
setTimeout(() => {
loading.remove();
const aiResponse = document.createElement('div');
aiResponse.className = 'flex justify-start';
// Simple response logic for demo
let responseText = "I've processed your request. Here's what I found...";
if (message.toLowerCase().includes('eth') || message.toLowerCase().includes('ethereum')) {
responseText = `Based on current ETH market conditions ($${Math.floor(Math.random() * 500) + 1500} price, ${Math.random() > 0.5 ? '+' : '-'}${(Math.random() * 5).toFixed(2)}% 24h change), I recommend ${['increasing', 'decreasing', 'maintaining'][Math.floor(Math.random() * 3)]} your position size.`;
} else if (message.toLowerCase().includes('strategy')) {
responseText = `Your current strategy parameters look ${['solid', 'risky', 'conservative'][Math.floor(Math.random() * 3)]}. Consider adjusting ${['lookback period', 'entry threshold', 'stop loss'][Math.floor(Math.random() * 3)]} for better performance.`;
} else if (message.toLowerCase().includes('code')) {
responseText = `I've analyzed your code. There's ${['a potential race condition', 'an unhandled exception', 'a memory leak'][Math.floor(Math.random() * 3)]} in the ${['order execution', 'price feed', 'wallet connection'][Math.floor(Math.random() * 3)]} module.`;
}
aiResponse.innerHTML = `
<div class="bg-white p-3 rounded-lg border border-gray-200 max-w-3xl">
<div class="flex items-center space-x-2 mb-1">
<i class="fas fa-robot text-blue-500"></i>
<span class="font-medium">Trading Assistant</span>
</div>
<p>${responseText}</p>
</div>
`;
messagesContainer.appendChild(aiResponse);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}, 1500);
}
}
});
// Initialize the app
initModuleLibrary();
// For demo purposes, open the trading config by default
setTimeout(() => {
openModule(state.modules[0]);
}, 500);
});
</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=privacybug/trader" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>