Hugging Face's logo

Spaces:
s-bally
/
deriv
Running

App Files Community
deriv / index.html
s-bally's picture
s-bally
Add 3 files
ba2be57 verified
raw
history blame contribute delete
28.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-Trader Pro | Automated Trading Robot</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>
.gradient-bg {
background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
}
.trading-card: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);
}
.chart-container {
height: 300px;
background: #1e293b;
border-radius: 0.5rem;
}
.blink {
animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to { opacity: 0.5; }
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Login Modal -->
<div id="loginModal" class="fixed inset-0 flex items-center justify-center z-50" style="background: rgba(0,0,0,0.8)">
<div class="bg-white rounded-xl p-8 w-full max-w-md">
<div class="text-center mb-6">
<img src="https://deriv.com/images/deriv-logo.svg" alt="Deriv Logo" class="h-10 mx-auto mb-4">
<h2 class="text-2xl font-bold text-gray-800">D-Trader Pro Login</h2>
<p class="text-gray-600">Automate your Deriv trades with AI</p>
</div>
<form id="loginForm">
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="email">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="your@email.com" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2" for="password">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="••••••••" required>
</div>
<button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-semibold hover:opacity-90 transition">Login to Dashboard</button>
</form>
<div class="mt-4 text-center text-sm text-gray-600">
<p>Don't have an account? <a href="#" class="text-blue-600 hover:underline">Sign up with Deriv</a></p>
</div>
</div>
</div>
<!-- Main Dashboard (hidden initially) -->
<div id="dashboard" class="hidden">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<img src="https://deriv.com/images/deriv-logo.svg" alt="Deriv Logo" class="h-8">
<span class="text-xl font-bold">D-Trader Pro</span>
</div>
<div class="flex items-center space-x-6">
<div class="flex items-center space-x-2 bg-blue-800 bg-opacity-30 px-3 py-1 rounded-full">
<div class="w-2 h-2 bg-green-400 rounded-full blink"></div>
<span class="text-sm">Connected</span>
</div>
<div class="relative group">
<button class="flex items-center space-x-2 focus:outline-none">
<div class="w-8 h-8 rounded-full bg-blue-200 flex items-center justify-center text-blue-800 font-semibold">JD</div>
<span>John Doe</span>
<i class="fas fa-chevron-down text-xs"></i>
</button>
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block">
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">Profile</a>
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">Settings</a>
<a href="#" id="logoutBtn" class="block px-4 py-2 text-gray-800 hover:bg-blue-50">Logout</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<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">
<!-- Account Summary -->
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-4">Account Summary</h3>
<div class="space-y-4">
<div>
<p class="text-gray-500 text-sm">Balance</p>
<p class="text-2xl font-bold">$12,450.75</p>
</div>
<div>
<p class="text-gray-500 text-sm">Today's Profit</p>
<p class="text-xl font-bold text-green-500">+$245.30</p>
</div>
<div>
<p class="text-gray-500 text-sm">Active Bots</p>
<p class="text-xl font-bold">3</p>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-4">Quick Actions</h3>
<div class="space-y-3">
<button class="w-full bg-blue-600 text-white py-2 rounded-lg font-medium hover:bg-blue-700 transition flex items-center justify-center space-x-2">
<i class="fas fa-plus"></i>
<span>New Trading Bot</span>
</button>
<button class="w-full bg-green-600 text-white py-2 rounded-lg font-medium hover:bg-green-700 transition flex items-center justify-center space-x-2">
<i class="fas fa-bolt"></i>
<span>Quick Trade</span>
</button>
<button class="w-full bg-gray-200 text-gray-800 py-2 rounded-lg font-medium hover:bg-gray-300 transition flex items-center justify-center space-x-2">
<i class="fas fa-history"></i>
<span>Transaction History</span>
</button>
</div>
</div>
<!-- Market Watch -->
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-4">Market Watch</h3>
<div class="space-y-3">
<div class="flex justify-between items-center pb-2 border-b">
<span class="font-medium">EUR/USD</span>
<span class="text-green-500">1.0987 <i class="fas fa-caret-up ml-1"></i></span>
</div>
<div class="flex justify-between items-center pb-2 border-b">
<span class="font-medium">GBP/USD</span>
<span class="text-red-500">1.2765 <i class="fas fa-caret-down ml-1"></i></span>
</div>
<div class="flex justify-between items-center pb-2 border-b">
<span class="font-medium">USD/JPY</span>
<span class="text-green-500">150.32 <i class="fas fa-caret-up ml-1"></i></span>
</div>
<div class="flex justify-between items-center">
<span class="font-medium">BTC/USD</span>
<span class="text-green-500">42,876 <i class="fas fa-caret-up ml-1"></i></span>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="lg:col-span-3 space-y-6">
<!-- Trading Dashboard -->
<div class="bg-white rounded-xl shadow p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Automated Trading Dashboard</h2>
<div class="flex space-x-3">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center space-x-2">
<i class="fas fa-robot"></i>
<span>Create Bot</span>
</button>
<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition flex items-center space-x-2">
<i class="fas fa-cog"></i>
<span>Settings</span>
</button>
</div>
</div>
<!-- Trading Chart -->
<div class="chart-container mb-6 flex items-center justify-center">
<div class="text-center text-gray-400">
<i class="fas fa-chart-line text-5xl mb-2"></i>
<p>Live Trading Chart</p>
</div>
</div>
<!-- Bot Controls -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-blue-800">Scalper Pro</h4>
<p class="text-sm text-blue-600">EUR/USD • 5min</p>
</div>
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Active</span>
</div>
<div class="mt-4 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500">Today's Profit</p>
<p class="font-bold text-green-500">+$87.50</p>
</div>
<div class="flex space-x-2">
<button class="p-2 bg-white rounded-full shadow text-blue-600 hover:bg-blue-100">
<i class="fas fa-pause"></i>
</button>
<button class="p-2 bg-white rounded-full shadow text-red-600 hover:bg-red-100">
<i class="fas fa-stop"></i>
</button>
</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-blue-800">Trend Rider</h4>
<p class="text-sm text-blue-600">BTC/USD • 15min</p>
</div>
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Active</span>
</div>
<div class="mt-4 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500">Today's Profit</p>
<p class="font-bold text-green-500">+$132.20</p>
</div>
<div class="flex space-x-2">
<button class="p-2 bg-white rounded-full shadow text-blue-600 hover:bg-blue-100">
<i class="fas fa-pause"></i>
</button>
<button class="p-2 bg-white rounded-full shadow text-red-600 hover:bg-red-100">
<i class="fas fa-stop"></i>
</button>
</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
<div class="flex justify-between items-start">
<div>
<h4 class="font-bold text-blue-800">Mean Reversion</h4>
<p class="text-sm text-blue-600">USD/JPY • 1H</p>
</div>
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Paused</span>
</div>
<div class="mt-4 flex justify-between items-center">
<div>
<p class="text-xs text-gray-500">Today's Profit</p>
<p class="font-bold text-gray-500">$0.00</p>
</div>
<div class="flex space-x-2">
<button class="p-2 bg-white rounded-full shadow text-green-600 hover:bg-green-100">
<i class="fas fa-play"></i>
</button>
<button class="p-2 bg-white rounded-full shadow text-red-600 hover:bg-red-100">
<i class="fas fa-stop"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Create New Bot Panel -->
<div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
<h3 class="font-bold text-lg mb-4">Create New Trading Bot</h3>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-gray-700 mb-2">Strategy</label>
<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Scalping</option>
<option>Trend Following</option>
<option>Mean Reversion</option>
<option>Breakout</option>
<option>Grid Trading</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-2">Asset</label>
<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>EUR/USD</option>
<option>GBP/USD</option>
<option>USD/JPY</option>
<option>BTC/USD</option>
<option>ETH/USD</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-2">Timeframe</label>
<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>1 Minute</option>
<option>5 Minutes</option>
<option>15 Minutes</option>
<option>1 Hour</option>
<option>4 Hours</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-2">Risk Level</label>
<select class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Low</option>
<option selected>Medium</option>
<option>High</option>
<option>Aggressive</option>
</select>
</div>
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2">Investment Amount ($)</label>
<input type="number" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="100" value="100">
</div>
<div class="flex justify-end space-x-3">
<button type="button" class="px-6 py-2 border border-gray-300 rounded-lg hover:bg-gray-100 transition">Cancel</button>
<button type="submit" class="px-6 py-2 gradient-bg text-white rounded-lg hover:opacity-90 transition font-medium">Activate Bot</button>
</div>
</form>
</div>
</div>
<!-- Recent Activity -->
<div class="bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-lg mb-4">Recent Trading Activity</h3>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="text-left text-gray-500 border-b">
<th class="pb-3">Time</th>
<th class="pb-3">Bot</th>
<th class="pb-3">Asset</th>
<th class="pb-3">Type</th>
<th class="pb-3">Amount</th>
<th class="pb-3">Result</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="py-3">10:45:23</td>
<td>Scalper Pro</td>
<td>EUR/USD</td>
<td>Rise</td>
<td>$50</td>
<td class="text-green-500 font-medium">+$3.20</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3">10:32:11</td>
<td>Trend Rider</td>
<td>BTC/USD</td>
<td>Fall</td>
<td>$100</td>
<td class="text-green-500 font-medium">+$12.50</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3">10:18:45</td>
<td>Scalper Pro</td>
<td>EUR/USD</td>
<td>Rise</td>
<td>$50</td>
<td class="text-red-500 font-medium">-$2.80</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3">09:56:32</td>
<td>Trend Rider</td>
<td>BTC/USD</td>
<td>Fall</td>
<td>$100</td>
<td class="text-green-500 font-medium">+$8.75</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3">09:42:15</td>
<td>Scalper Pro</td>
<td>EUR/USD</td>
<td>Rise</td>
<td>$50</td>
<td class="text-green-500 font-medium">+$4.10</td>
</tr>
</tbody>
</table>
</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">
<div class="flex items-center space-x-2">
<img src="https://deriv.com/images/deriv-logo.svg" alt="Deriv Logo" class="h-6">
<span class="font-bold">D-Trader Pro</span>
</div>
<p class="text-gray-400 text-sm mt-1">Automated Trading Solution for Deriv</p>
</div>
<div class="flex space-x-6">
<a href="#" class="hover:text-blue-300 transition">Terms</a>
<a href="#" class="hover:text-blue-300 transition">Privacy</a>
<a href="#" class="hover:text-blue-300 transition">Support</a>
<a href="#" class="hover:text-blue-300 transition">API Docs</a>
</div>
</div>
<div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
<p>© 2023 D-Trader Pro. Not affiliated with Deriv.com. Trading involves risk.</p>
</div>
</div>
</footer>
</div>
<script>
// Simple login simulation
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// Simple validation
if(email && password) {
// Hide login modal
document.getElementById('loginModal').classList.add('hidden');
// Show dashboard
document.getElementById('dashboard').classList.remove('hidden');
}
});
// Logout functionality
document.getElementById('logoutBtn').addEventListener('click', function() {
// Hide dashboard
document.getElementById('dashboard').classList.add('hidden');
// Show login modal
document.getElementById('loginModal').classList.remove('hidden');
// Reset form
document.getElementById('loginForm').reset();
});
// Bot control buttons functionality
document.querySelectorAll('.fa-play').forEach(btn => {
btn.addEventListener('click', function() {
const statusBadge = this.closest('.bg-blue-50').querySelector('span');
statusBadge.classList.remove('bg-yellow-100', 'text-yellow-800');
statusBadge.classList.add('bg-green-100', 'text-green-800');
statusBadge.textContent = 'Active';
// Change icon to pause
this.classList.remove('fa-play', 'text-green-600');
this.classList.add('fa-pause', 'text-blue-600');
});
});
document.querySelectorAll('.fa-pause').forEach(btn => {
btn.addEventListener('click', function() {
const statusBadge = this.closest('.bg-blue-50').querySelector('span');
statusBadge.classList.remove('bg-green-100', 'text-green-800');
statusBadge.classList.add('bg-yellow-100', 'text-yellow-800');
statusBadge.textContent = 'Paused';
// Change icon to play
this.classList.remove('fa-pause', 'text-blue-600');
this.classList.add('fa-play', 'text-green-600');
});
});
document.querySelectorAll('.fa-stop').forEach(btn => {
btn.addEventListener('click', function() {
const card = this.closest('.bg-blue-50');
card.classList.add('opacity-50');
const statusBadge = card.querySelector('span');
statusBadge.classList.remove('bg-green-100', 'text-green-800', 'bg-yellow-100', 'text-yellow-800');
statusBadge.classList.add('bg-red-100', 'text-red-800');
statusBadge.textContent = 'Stopped';
// Disable control buttons
const controls = card.querySelectorAll('button');
controls.forEach(ctrl => {
ctrl.disabled = true;
ctrl.classList.add('opacity-50');
});
});
});
</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=s-bally/deriv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>