Spaces:
Running
Running
File size: 7,479 Bytes
5919422 ff607b4 5919422 ff607b4 5919422 ff607b4 846171f 5919422 846171f 5919422 53f8b01 84be386 5919422 53f8b01 84be386 5919422 846171f 53f8b01 5919422 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CryptoSignal Sleuth Pro</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
500: '#6366f1',
},
secondary: {
500: '#ec4899',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-gray-100">
<custom-navbar></custom-navbar>
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Chart Upload Section -->
<div class="bg-gray-800 rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-feather="upload"></i>
Upload Chart Screenshot
</h2>
<div id="drop-zone" class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-500 transition-colors">
<i data-feather="image" class="w-12 h-12 mx-auto mb-4 text-gray-400"></i>
<p class="text-gray-400 mb-2">Drag & drop your trading chart screenshot here</p>
<p class="text-sm text-gray-500">Supports PNG, JPG, WEBP up to 5MB</p>
<input type="file" id="chart-upload" class="hidden" accept="image/png, image/jpeg, image/webp">
</div>
<button id="analyze-btn" class="mt-4 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center gap-2">
<i data-feather="zap"></i>
Analyze Chart
</button>
</div>
<!-- Forex Signals Section -->
<div class="col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-feather="trending-up"></i>
ApexTrader AI Forex Signals
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<forex-signal-card></forex-signal-card>
<forex-signal-card></forex-signal-card>
</div>
</div>
<!-- Live Market Analysis -->
<div class="bg-gray-800 rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-bold mb-4 flex items-center gap-2">
<i data-feather="activity"></i>
Live Market Analysis
</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Exchange</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500">
<option value="crypto">Crypto (Binance)</option>
<option value="forex">Forex (yFinance)</option>
</select>
</div>
<div>
<label class="block text-sm font-medium mb-1">Pair</label>
<input type="text" id="pair-input" placeholder="BTCUSDT or EURUSD" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500">
<forex-selector class="mt-2 hidden"></forex-selector>
</div>
<div>
<label class="block text-sm font-medium mb-1">Timeframe</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 focus:ring-indigo-500 focus:border-indigo-500">
<option>5m</option>
<option>15m</option>
<option>1h</option>
<option>4h</option>
<option>1D</option>
</select>
</div>
<button class="mt-2 w-full bg-pink-600 hover:bg-pink-700 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center gap-2">
<i data-feather="bar-chart-2"></i>
Analyze Market
</button>
</div>
</div>
</div>
<!-- Results Section -->
<div id="results-section" class="mt-8 hidden">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Signal Card -->
<div class="bg-gray-800 rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-bold mb-4">Signal Analysis</h2>
<div class="flex items-center mb-6">
<div id="signal-direction" class="px-4 py-2 rounded-lg font-bold mr-4">
LONG
</div>
<div class="w-full bg-gray-700 h-4 rounded-full overflow-hidden">
<div id="confidence-bar" class="h-full bg-indigo-500" style="width: 75%"></div>
</div>
<span id="confidence-text" class="ml-2 font-medium">75%</span>
</div>
<div class="space-y-4">
<div class="flex justify-between">
<span class="text-gray-400">Entry Zone</span>
<span id="entry-zone" class="font-medium">$42,300 - $42,500</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Stop Loss</span>
<span id="stop-loss" class="font-medium">$41,800</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Take Profit 1</span>
<span id="tp1" class="font-medium">$43,200</span>
</div>
<div class="flex justify-between">
<span class="text-gray-400">Take Profit 2</span>
<span id="tp2{"ok":false,"message":"terminated"}
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
<script src="components/forex-selector.js"></script>
<script src="components/forex-signal-card.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const assetTypeSelect = document.querySelector('select');
const forexSelector = document.querySelector('forex-selector');
assetTypeSelect.addEventListener('change', (e) => {
if (e.target.value === 'forex') {
forexSelector.classList.remove('hidden');
document.getElementById('pair-input').placeholder = 'EURUSD';
} else {
forexSelector.classList.add('hidden');
document.getElementById('pair-input').placeholder = 'BTCUSDT';
}
});
});
</script>
</body>
</html> |