crypto-chart-test / index.html
xereon's picture
Add 3 files
c64a9ba verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quantum Trading Algorithm | BTC/USDT</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://s3.tradingview.com/tv.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap');
:root {
--quantum-primary: #00f0ff;
--quantum-secondary: #7b2dff;
--quantum-dark: #0a0a1a;
--quantum-darker: #050510;
--quantum-accent: #ff00aa;
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--quantum-dark);
color: white;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.quantum-font {
font-family: 'Orbitron', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, var(--quantum-darker) 0%, var(--quantum-dark) 100%);
}
.quantum-border {
border: 1px solid rgba(123, 45, 255, 0.3);
}
.quantum-glow {
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}
.quantum-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
.signal-buy {
background: rgba(0, 255, 0, 0.1);
border-left: 3px solid #00ff00;
}
.signal-sell {
background: rgba(255, 0, 0, 0.1);
border-left: 3px solid #ff0000;
}
.signal-hold {
background: rgba(255, 255, 0, 0.1);
border-left: 3px solid #ffff00;
}
.quantum-loader {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--quantum-primary);
box-shadow: 24px 0 var(--quantum-primary), -24px 0 var(--quantum-primary);
position: relative;
animation: quantum-flash 1s ease-out infinite alternate;
}
@keyframes quantum-flash {
0% { background-color: var(--quantum-secondary); box-shadow: 24px 0 var(--quantum-secondary), -24px 0 var(--quantum-primary); }
50% { background-color: var(--quantum-primary); box-shadow: 24px 0 var(--quantum-secondary), -24px 0 var(--quantum-secondary); }
100% { background-color: var(--quantum-secondary); box-shadow: 24px 0 var(--quantum-primary), -24px 0 var(--quantum-secondary); }
}
#tradingview-chart {
height: 600px;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.quantum-tab {
transition: all 0.3s ease;
}
.quantum-tab:hover {
background: rgba(123, 45, 255, 0.2);
}
.quantum-tab.active {
background: rgba(123, 45, 255, 0.4);
border-bottom: 2px solid var(--quantum-primary);
}
.quantum-card {
backdrop-filter: blur(10px);
background: rgba(10, 10, 26, 0.6);
}
.quantum-input {
background: rgba(20, 20, 40, 0.8);
border: 1px solid rgba(123, 45, 255, 0.3);
transition: all 0.3s ease;
}
.quantum-input:focus {
outline: none;
border-color: var(--quantum-primary);
box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.2);
}
.quantum-button {
background: linear-gradient(90deg, var(--quantum-secondary) 0%, var(--quantum-primary) 100%);
transition: all 0.3s ease;
}
.quantum-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 240, 255, 0.3);
}
.quantum-button-secondary {
background: rgba(123, 45, 255, 0.2);
border: 1px solid var(--quantum-secondary);
transition: all 0.3s ease;
}
.quantum-button-secondary:hover {
background: rgba(123, 45, 255, 0.4);
}
.quantum-progress {
height: 4px;
background: linear-gradient(90deg, var(--quantum-secondary) 0%, var(--quantum-primary) 100%);
animation: progress-animation 2s ease-in-out infinite;
}
@keyframes progress-animation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.quantum-neon-text {
text-shadow: 0 0 5px var(--quantum-primary), 0 0 10px var(--quantum-primary);
}
.quantum-wave {
position: relative;
overflow: hidden;
}
.quantum-wave::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
</style>
</head>
<body class="gradient-bg">
<div class="min-h-screen">
<!-- Header -->
<header class="border-b border-gray-800">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center">
<i class="fas fa-atom text-white"></i>
</div>
<span class="quantum-font text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-blue-400">
QuantumTradeX
</span>
</div>
<div class="flex items-center space-x-6">
<div class="hidden md:flex items-center space-x-6">
<a href="#" class="text-gray-300 hover:text-white transition">Dashboard</a>
<a href="#" class="text-gray-300 hover:text-white transition">Markets</a>
<a href="#" class="text-gray-300 hover:text-white transition">Portfolio</a>
<a href="#" class="text-gray-300 hover:text-white transition">Documentation</a>
</div>
<div class="flex items-center space-x-4">
<button class="px-4 py-2 rounded-full quantum-button-secondary text-sm font-medium">
<i class="fas fa-wallet mr-2"></i> Connect Wallet
</button>
<button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center">
<i class="fas fa-user"></i>
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Sidebar -->
<div class="w-full lg:w-1/4 space-y-6">
<!-- Pair Selector -->
<div class="quantum-card rounded-xl p-4 quantum-border quantum-glow">
<div class="flex justify-between items-center mb-4">
<h3 class="quantum-font font-medium text-lg">Market Pair</h3>
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-400">Live</span>
<div class="quantum-loader"></div>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center">
<i class="fas fa-bolt text-white text-xs"></i>
</div>
<span class="font-medium">BTC/USDT</span>
</div>
<span class="text-green-400 text-sm">+2.34%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center">
<i class="fab fa-ethereum text-white text-xs"></i>
</div>
<span class="font-medium">ETH/USDT</span>
</div>
<span class="text-red-400 text-sm">-1.12%</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center">
<i class="fas fa-dollar-sign text-white text-xs"></i>
</div>
<span class="font-medium">SOL/USDT</span>
</div>
<span class="text-green-400 text-sm">+5.67%</span>
</div>
</div>
</div>
<!-- Quantum Parameters -->
<div class="quantum-card rounded-xl p-4 quantum-border">
<div class="flex justify-between items-center mb-4">
<h3 class="quantum-font font-medium text-lg">Quantum Parameters</h3>
<i class="fas fa-quantum text-blue-400"></i>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm text-gray-400 mb-1">Entanglement Factor</label>
<input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Superposition Depth</label>
<input type="range" min="0" max="100" value="60" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Decoherence Threshold</label>
<input type="range" min="0" max="100" value="40" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
</div>
<div>
<label class="block text-sm text-gray-400 mb-1">Quantum Noise Filter</label>
<div class="flex items-center space-x-2 mt-1">
<button class="px-3 py-1 text-xs rounded-full bg-blue-900 text-blue-200">Low</button>
<button class="px-3 py-1 text-xs rounded-full bg-blue-900 text-blue-200">Medium</button>
<button class="px-3 py-1 text-xs rounded-full bg-blue-600 text-white">High</button>
</div>
</div>
</div>
</div>
<!-- Recent Signals -->
<div class="quantum-card rounded-xl p-4 quantum-border">
<div class="flex justify-between items-center mb-4">
<h3 class="quantum-font font-medium text-lg">Recent Signals</h3>
<span class="text-xs text-gray-400">Last 24h</span>
</div>
<div class="space-y-3 max-h-80 overflow-y-auto">
<div class="p-3 rounded-lg signal-buy">
<div class="flex justify-between items-center">
<div>
<span class="font-medium">BUY</span>
<span class="text-xs text-gray-400 ml-2">BTC/USDT</span>
</div>
<span class="text-xs">2h ago</span>
</div>
<div class="mt-1 text-sm">
<span>Entry: $42,356.12</span>
<span class="ml-3">Target: $44,200.00</span>
</div>
</div>
<div class="p-3 rounded-lg signal-sell">
<div class="flex justify-between items-center">
<div>
<span class="font-medium">SELL</span>
<span class="text-xs text-gray-400 ml-2">BTC/USDT</span>
</div>
<span class="text-xs">5h ago</span>
</div>
<div class="mt-1 text-sm">
<span>Entry: $43,120.45</span>
<span class="ml-3">Target: $41,800.00</span>
</div>
</div>
<div class="p-3 rounded-lg signal-hold">
<div class="flex justify-between items-center">
<div>
<span class="font-medium">HOLD</span>
<span class="text-xs text-gray-400 ml-2">BTC/USDT</span>
</div>
<span class="text-xs">8h ago</span>
</div>
<div class="mt-1 text-sm">
<span>Price: $42,890.34</span>
<span class="ml-3">Wait for confirmation</span>
</div>
</div>
<div class="p-3 rounded-lg signal-buy">
<div class="flex justify-between items-center">
<div>
<span class="font-medium">BUY</span>
<span class="text-xs text-gray-400 ml-2">BTC/USDT</span>
</div>
<span class="text-xs">12h ago</span>
</div>
<div class="mt-1 text-sm">
<span>Entry: $41,756.89</span>
<span class="ml-3">Target: $43,500.00</span>
</div>
</div>
</div>
</div>
</div>
<!-- Main Chart Area -->
<div class="w-full lg:w-3/4 space-y-6">
<!-- Chart Header -->
<div class="flex flex-col md:flex-row md:items-center justify-between">
<div>
<h1 class="quantum-font text-2xl font-bold">BTC/USDT</h1>
<div class="flex items-center space-x-4 mt-2">
<div class="flex items-center">
<span class="text-2xl font-bold">$42,789.34</span>
<span class="ml-2 text-green-400 text-sm flex items-center">
<i class="fas fa-caret-up mr-1"></i> 2.34%
</span>
</div>
<div class="text-sm text-gray-400">
24h High: $43,120.45 | 24h Low: $41,890.12
</div>
</div>
</div>
<div class="flex items-center space-x-2 mt-4 md:mt-0">
<div class="flex border border-gray-700 rounded-lg overflow-hidden">
<button class="px-3 py-1 text-sm bg-gray-800">1H</button>
<button class="px-3 py-1 text-sm">4H</button>
<button class="px-3 py-1 text-sm">1D</button>
<button class="px-3 py-1 text-sm">1W</button>
<button class="px-3 py-1 text-sm">1M</button>
</div>
<button class="px-4 py-2 rounded-lg quantum-button text-sm font-medium">
<i class="fas fa-bolt mr-2"></i> Execute Trade
</button>
</div>
</div>
<!-- Quantum Indicators -->
<div class="flex flex-wrap gap-2">
<div class="px-3 py-1 rounded-full bg-blue-900 text-blue-200 text-xs flex items-center">
<i class="fas fa-wave-square mr-1"></i> Quantum Wave
</div>
<div class="px-3 py-1 rounded-full bg-purple-900 text-purple-200 text-xs flex items-center">
<i class="fas fa-project-diagram mr-1"></i> Entanglement Index
</div>
<div class="px-3 py-1 rounded-full bg-pink-900 text-pink-200 text-xs flex items-center">
<i class="fas fa-atom mr-1"></i> Superposition MACD
</div>
<div class="px-3 py-1 rounded-full bg-green-900 text-green-200 text-xs flex items-center">
<i class="fas fa-chart-line mr-1"></i> Q-RSI
</div>
<div class="px-3 py-1 rounded-full bg-yellow-900 text-yellow-200 text-xs flex items-center">
<i class="fas fa-expand mr-1"></i> Decoherence Bands
</div>
</div>
<!-- TradingView Chart -->
<div class="quantum-card rounded-xl p-1 quantum-border quantum-glow">
<div id="tradingview-chart"></div>
</div>
<!-- Current Signal -->
<div class="quantum-card rounded-xl p-4 quantum-border">
<div class="flex justify-between items-center mb-4">
<h3 class="quantum-font font-medium text-lg">Current Quantum Signal</h3>
<div class="flex items-center space-x-2">
<span class="text-xs text-gray-400">Confidence:</span>
<span class="text-green-400 font-medium">87.6%</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 rounded-lg bg-gradient-to-br from-blue-900 to-blue-800">
<div class="flex justify-between items-center">
<span class="text-sm text-blue-200">Signal Type</span>
<i class="fas fa-bolt text-yellow-400"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold text-white">STRONG BUY</span>
</div>
</div>
<div class="p-4 rounded-lg bg-gradient-to-br from-purple-900 to-purple-800">
<div class="flex justify-between items-center">
<span class="text-sm text-purple-200">Optimal Entry</span>
<i class="fas fa-arrow-down text-green-400"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold text-white">$42,345 - $42,780</span>
</div>
</div>
<div class="p-4 rounded-lg bg-gradient-to-br from-pink-900 to-pink-800">
<div class="flex justify-between items-center">
<span class="text-sm text-pink-200">Price Target</span>
<i class="fas fa-arrow-up text-green-400"></i>
</div>
<div class="mt-2">
<span class="text-xl font-bold text-white">$44,200 - $45,800</span>
</div>
</div>
</div>
<div class="mt-4">
<div class="flex justify-between text-sm text-gray-400 mb-1">
<span>Quantum Analysis Summary</span>
<span>Updated: Just now</span>
</div>
<div class="p-3 bg-gray-800 rounded-lg text-sm">
<p>The quantum algorithm has detected a high-probability buy signal with strong entanglement correlation across multiple timeframes. Superposition analysis shows an 87.6% probability of upward movement within the next 24-48 hours. Decoherence levels are low, indicating stable market conditions for entry.</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Footer -->
<footer class="border-t border-gray-800 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center">
<i class="fas fa-atom text-white"></i>
</div>
<span class="quantum-font text-lg font-bold">QuantumTradeX</span>
</div>
<div class="flex items-center space-x-6">
<a href="#" class="text-gray-400 hover:text-white transition">Terms</a>
<a href="#" class="text-gray-400 hover:text-white transition">Privacy</a>
<a href="#" class="text-gray-400 hover:text-white transition">API</a>
<a href="#" class="text-gray-400 hover:text-white transition">Contact</a>
</div>
<div class="flex items-center space-x-4 mt-4 md:mt-0">
<span class="text-sm text-gray-500">© 2023 QuantumTradeX. All rights reserved.</span>
</div>
</div>
<div class="mt-8 text-center text-xs text-gray-600">
<p>Disclaimer: QuantumTradeX provides algorithmic trading signals for informational purposes only. Cryptocurrency trading involves substantial risk and may result in the loss of your invested capital. Past performance is not indicative of future results.</p>
</div>
</div>
</footer>
<script>
// Initialize TradingView Widget
new TradingView.widget({
"autosize": true,
"symbol": "BINANCE:BTCUSDT",
"interval": "60",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#0a0a1a",
"enable_publishing": false,
"hide_side_toolbar": false,
"allow_symbol_change": true,
"container_id": "tradingview-chart",
"studies": [
"QuantumWave@tv-basicstudies",
"QuantumRSI@tv-basicstudies",
"SuperpositionMACD@tv-basicstudies",
{
"id": "QuantumSignals@tv-basicstudies",
"inputs": {
"showBuySignals": true,
"showSellSignals": true,
"quantumConfidenceThreshold": 75
}
}
]
});
// Simulate live data updates
function updatePrice() {
const priceElement = document.querySelector('.text-2xl.font-bold');
const changeElement = document.querySelector('.text-green-400');
if (priceElement && changeElement) {
// Simulate small price fluctuations
const currentPrice = parseFloat(priceElement.textContent.replace('$', '').replace(',', ''));
const randomChange = (Math.random() * 100 - 50); // Random change between -50 and +50
const newPrice = currentPrice + randomChange;
// Update price display
priceElement.textContent = '$' + newPrice.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
// Update change percentage
const changePercent = (Math.random() * 3 - 1.5).toFixed(2);
const isPositive = parseFloat(changePercent) >= 0;
changeElement.textContent = (isPositive ? '+' : '') + changePercent + '%';
changeElement.className = isPositive ? 'ml-2 text-green-400 text-sm flex items-center' : 'ml-2 text-red-400 text-sm flex items-center';
changeElement.innerHTML = (isPositive ? '<i class="fas fa-caret-up mr-1"></i>' : '<i class="fas fa-caret-down mr-1"></i>') + changePercent + '%';
}
}
// Update price every 3 seconds to simulate live data
setInterval(updatePrice, 3000);
// Simulate signal confidence changes
function updateConfidence() {
const confidenceElement = document.querySelector('.text-green-400.font-medium');
if (confidenceElement) {
const currentConfidence = parseFloat(confidenceElement.textContent);
const randomChange = (Math.random() * 5 - 2.5); // Random change between -2.5 and +2.5
let newConfidence = currentConfidence + randomChange;
// Keep within reasonable bounds
newConfidence = Math.max(50, Math.min(95, newConfidence));
confidenceElement.textContent = newConfidence.toFixed(1) + '%';
// Update color based on confidence
if (newConfidence > 80) {
confidenceElement.className = 'text-green-400 font-medium';
} else if (newConfidence > 65) {
confidenceElement.className = 'text-yellow-400 font-medium';
} else {
confidenceElement.className = 'text-red-400 font-medium';
}
}
}
// Update confidence every 5 seconds
setInterval(updateConfidence, 5000);
// Tab functionality
document.querySelectorAll('.quantum-tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.quantum-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
</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=xereon/crypto-chart-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>