crypto-gaurdian / index.html
cu3126's picture
Add 3 files
7a00e80 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Risk Mitigation Trading Bot</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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.risk-indicator {
transition: all 0.3s ease;
}
.slider-thumb::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
}
.slider-thumb::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
cursor: pointer;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<i class="fas fa-robot text-3xl text-blue-300"></i>
<h1 class="text-2xl font-bold">CryptoGuardian</h1>
</div>
<div class="flex items-center space-x-6">
<div class="relative">
<select class="bg-blue-800 text-white px-4 py-2 rounded-lg focus:outline-none">
<option>Binance</option>
<option>Coinbase</option>
<option>Kraken</option>
<option>FTX</option>
</select>
</div>
<button class="bg-green-500 hover:bg-green-600 px-4 py-2 rounded-lg font-medium transition">
<i class="fas fa-wallet mr-2"></i>Connect Wallet
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Left Sidebar -->
<div class="lg:col-span-1 space-y-6">
<!-- Bot Status -->
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Bot Status</h2>
<div class="relative">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[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-green-500"></div>
</label>
</div>
</div>
<div class="space-y-4">
<div class="flex justify-between">
<span class="text-gray-600">Running Time:</span>
<span class="font-medium">12h 34m</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Trades Today:</span>
<span class="font-medium">27</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Profit/Loss:</span>
<span class="font-medium text-green-500">+2.34%</span>
</div>
</div>
</div>
<!-- Risk Profile -->
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<h2 class="text-lg font-semibold mb-4">Risk Profile</h2>
<div class="mb-4">
<div class="flex justify-between mb-2">
<span class="text-gray-600">Current Risk Level</span>
<span class="font-medium">Medium</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 60%"></div>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Max Position Size (%)</label>
<input type="range" min="1" max="100" value="15" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
<div class="flex justify-between text-xs text-gray-500">
<span>1%</span>
<span>15%</span>
<span>100%</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Daily Loss Limit (%)</label>
<input type="range" min="1" max="20" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
<div class="flex justify-between text-xs text-gray-500">
<span>1%</span>
<span>5%</span>
<span>20%</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Volatility Threshold</label>
<input type="range" min="1" max="10" value="6" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb">
<div class="flex justify-between text-xs text-gray-500">
<span>Low</span>
<span>Medium</span>
<span>High</span>
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<h2 class="text-lg font-semibold mb-4">Quick Actions</h2>
<div class="grid grid-cols-2 gap-3">
<button class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-2 rounded-lg text-sm font-medium transition flex items-center justify-center">
<i class="fas fa-pause mr-2"></i> Pause
</button>
<button class="bg-red-100 text-red-700 hover:bg-red-200 px-3 py-2 rounded-lg text-sm font-medium transition flex items-center justify-center">
<i class="fas fa-stop mr-2"></i> Stop
</button>
<button class="bg-green-100 text-green-700 hover:bg-green-200 px-3 py-2 rounded-lg text-sm font-medium transition flex items-center justify-center">
<i class="fas fa-sync-alt mr-2"></i> Reset
</button>
<button class="bg-purple-100 text-purple-700 hover:bg-purple-200 px-3 py-2 rounded-lg text-sm font-medium transition flex items-center justify-center">
<i class="fas fa-cog mr-2"></i> Settings
</button>
</div>
</div>
</div>
<!-- Main Dashboard -->
<div class="lg:col-span-3 space-y-6">
<!-- Market Overview -->
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<h2 class="text-lg font-semibold mb-4">Market Overview</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center justify-between">
<span class="text-gray-600">BTC/USDT</span>
<i class="fab fa-bitcoin text-yellow-500"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold">$42,876.34</span>
<span class="ml-2 text-sm text-green-500">+2.4%</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center justify-between">
<span class="text-gray-600">ETH/USDT</span>
<i class="fab fa-ethereum text-purple-500"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold">$2,345.67</span>
<span class="ml-2 text-sm text-red-500">-1.2%</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items-center justify-between">
<span class="text-gray-600">SOL/USDT</span>
<i class="fas fa-chart-line text-blue-500"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold">$123.45</span>
<span class="ml-2 text-sm text-green-500">+5.7%</span>
</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="flex items center justify-between">
<span class="text-gray-600">Total Balance</span>
<i class="fas fa-coins text-yellow-400"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold">$12,456.78</span>
<span class="ml-2 text-sm text-green-500">+3.1%</span>
</div>
</div>
</div>
</div>
<!-- Charts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Portfolio Performance</h2>
<select class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm focus:outline-none">
<option>24h</option>
<option>7d</option>
<option>30d</option>
<option selected>90d</option>
</select>
</div>
<canvas id="performanceChart" height="250"></canvas>
</div>
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Risk Exposure</h2>
<div class="flex space-x-2">
<button class="bg-blue-100 text-blue-700 px-3 py-1 rounded-lg text-sm">Assets</button>
<button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm">Sectors</button>
</div>
</div>
<canvas id="riskChart" height="250"></canvas>
</div>
</div>
<!-- Active Trades -->
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Active Trades</h2>
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
<i class="fas fa-plus mr-2"></i> New Trade
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pair</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entry</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Size</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">P/L</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">BTC/USDT</div>
<div class="text-sm text-gray-500">Binance</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Long</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$41,234.56</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$42,876.34</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">15%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+3.98%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-line"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-times"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://cryptologos.cc/logos/ethereum-eth-logo.png" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">ETH/USDT</div>
<div class="text-sm text-gray-500">Binance</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Short</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2,456.78</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$2,345.67</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">8%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+4.52%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-line"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-times"></i></button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">SOL/USDT</div>
<div class="text-sm text-gray-500">Binance</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Long</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$118.76</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$123.45</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">5%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">+3.95%</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-chart-line"></i></button>
<button class="text-red-600 hover:text-red-900"><i class="fas fa-times"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Risk Alerts -->
<div class="bg-white rounded-xl shadow-md p-6 transition duration-300 card-hover">
<div class="flex justify-between items-center mb-4">
<h2 class="text-lg font-semibold">Risk Alerts</h2>
<span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full">3 New</span>
</div>
<div class="space-y-3">
<div class="flex items-start p-3 bg-red-50 rounded-lg">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-red-100 text-red-600">
<i class="fas fa-exclamation text-sm"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-red-800">High volatility detected in BTC/USDT</p>
<p class="text-sm text-red-600">Price moved 5.2% in last 15 minutes</p>
</div>
</div>
<div class="flex items-start p-3 bg-yellow-50 rounded-lg">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-yellow-100 text-yellow-600">
<i class="fas fa-exclamation-triangle text-sm"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-yellow-800">Approaching daily loss limit</p>
<p class="text-sm text-yellow-600">Current daily loss: 3.8% (limit: 5%)</p>
</div>
</div>
<div class="flex items-start p-3 bg-blue-50 rounded-lg">
<div class="flex-shrink-0 mt-1">
<div class="flex items-center justify-center h-6 w-6 rounded-full bg-blue-100 text-blue-600">
<i class="fas fa-info-circle text-sm"></i>
</div>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-blue-800">Liquidity warning for SOL/USDT</p>
<p class="text-sm text-blue-600">Order book depth decreased by 40%</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<p class="text-sm">© 2023 CryptoGuardian. All rights reserved.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-discord"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fas fa-book"></i>
</a>
</div>
</div>
</div>
</footer>
</div>
<script>
// Initialize charts
document.addEventListener('DOMContentLoaded', function() {
// Performance Chart
const performanceCtx = document.getElementById('performanceChart').getContext('2d');
const performanceChart = new Chart(performanceCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Portfolio Value',
data: [10000, 10500, 11000, 11500, 12000, 11800, 12500, 13000, 12800, 13200, 13500, 14000],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.05)',
borderWidth: 2,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
y: {
beginAtZero: false
}
}
}
});
// Risk Chart
const riskCtx = document.getElementById('riskChart').getContext('2d');
const riskChart = new Chart(riskCtx, {
type: 'doughnut',
data: {
labels: ['Bitcoin', 'Ethereum', 'Solana', 'Cash'],
datasets: [{
data: [45, 30, 15, 10],
backgroundColor: [
'#f7931a',
'#627eea',
'#00ffbd',
'#9ca3af'
],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right'
}
},
cutout: '70%'
}
});
// Simulate real-time updates
setInterval(() => {
// Update performance chart with random walk
const lastValue = performanceChart.data.datasets[0].data[performanceChart.data.datasets[0].data.length - 1];
const newValue = lastValue * (1 + (Math.random() * 0.02 - 0.01));
performanceChart.data.datasets[0].data.push(newValue);
performanceChart.data.labels.push('');
if (performanceChart.data.datasets[0].data.length > 15) {
performanceChart.data.datasets[0].data.shift();
performanceChart.data.labels.shift();
}
performanceChart.update();
// Update risk chart slightly
riskChart.data.datasets[0].data = riskChart.data.datasets[0].data.map(value => {
return value * (1 + (Math.random() * 0.01 - 0.005));
});
riskChart.update();
}, 3000);
});
// Toggle dark mode (example functionality)
function toggleDarkMode() {
document.body.classList.toggle('dark');
}
</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=cu3126/crypto-gaurdian" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>