Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
538
deepsite / index (2).html
ahmed000abdo's picture
ahmed000abdo
trad
9371307 verified
raw
history blame
59.4 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tradincap AI - AI-Powered Chart Analysis</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #0a0a0a;
color: #ffffff;
}
.futuristic {
font-family: 'Orbitron', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, #ff0000, #ff4d4d);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dashboard-card {
background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
box-shadow: 0 4px 30px rgba(255, 0, 0, 0.1);
}
.file-upload {
border: 2px dashed #4a4a4a;
transition: all 0.3s ease;
}
.file-upload:hover {
border-color: #ff0000;
}
.analysis-result {
border-left: 4px solid #ff0000;
}
.nav-link:hover {
color: #ff0000 !important;
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="bg-black py-4 px-6 border-b border-gray-800">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<span class="futuristic text-2xl font-bold gradient-text">TRADINCAP AI</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="nav-link text-white hover:text-red-500 transition">Home</a>
<a href="#pricing" class="nav-link text-white hover:text-red-500 transition">Pricing</a>
<a href="#login" class="nav-link text-white hover:text-red-500 transition">Login</a>
<a href="#signup" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition">Sign Up</a>
</div>
<button class="md:hidden text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</nav>
<!-- Homepage -->
<section id="home" class="py-20 px-6">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="futuristic text-4xl md:text-6xl font-bold mb-6">
<span class="gradient-text">AI-Powered</span> Chart Insights. Instantly.
</h1>
<p class="text-gray-300 text-lg mb-8">
Upload your chart. Let AI detect entries, exits, TP/SL in seconds.
Our proprietary algorithm analyzes patterns with 92.7% accuracy.
</p>
<div class="flex space-x-4">
<a href="#pricing" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-md text-lg font-medium transition">
Get Started
</a>
<a href="#" class="border border-gray-600 hover:border-red-500 text-white px-8 py-3 rounded-md text-lg font-medium transition">
Watch Demo
</a>
</div>
<div class="mt-12 flex items-center space-x-4">
<div class="flex -space-x-2">
<img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
<img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
<img class="w-10 h-10 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
</div>
<div>
<p class="text-gray-400 text-sm">Trusted by 5,000+ traders</p>
<div class="flex items-center">
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
<span class="ml-2 text-gray-400">4.9/5 (1,200 reviews)</span>
</div>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="relative">
<div class="absolute -top-6 -left-6 w-64 h-64 bg-red-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div class="absolute -bottom-8 -right-8 w-64 h-64 bg-blue-900 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div class="relative">
<img src="https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="AI Analysis" class="rounded-lg shadow-2xl border border-gray-800">
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="py-20 px-6 bg-gradient-to-b from-black to-gray-900">
<div class="max-w-7xl mx-auto">
<h2 class="futuristic text-3xl md:text-4xl font-bold text-center mb-16">
How <span class="gradient-text">Tradincap AI</span> Works
</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition">
<div class="w-14 h-14 bg-red-900 rounded-full flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
</div>
<h3 class="text-xl font-bold mb-3">Upload Your Chart</h3>
<p class="text-gray-400">Simply upload any trading chart screenshot. We support all timeframes and asset classes.</p>
</div>
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition">
<div class="w-14 h-14 bg-red-900 rounded-full flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
</div>
<h3 class="text-xl font-bold mb-3">AI Analysis</h3>
<p class="text-gray-400">Our proprietary AI scans for patterns, trends, and key levels with 92.7% accuracy.</p>
</div>
<div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hover:border-red-500 transition">
<div class="w-14 h-14 bg-red-900 rounded-full flex items-center justify-center mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
<h3 class="text-xl font-bold mb-3">Get Actionable Signals</h3>
<p class="text-gray-400">Receive clear entry points, take profit targets, and stop loss levels in seconds.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Page -->
<section id="pricing" class="py-20 px-6 bg-black">
<div class="max-w-7xl mx-auto">
<h2 class="futuristic text-3xl md:text-4xl font-bold text-center mb-4">
Simple, <span class="gradient-text">Transparent</span> Pricing
</h2>
<p class="text-gray-400 text-center max-w-2xl mx-auto mb-16">
Choose the plan that fits your trading needs. Cancel anytime.
</p>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free Plan -->
<div class="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden transition hover:border-red-500">
<div class="p-8">
<h3 class="text-xl font-bold mb-2">Free</h3>
<p class="text-gray-400 mb-6">Try basic features</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-400">/month</span>
</div>
<button onclick="selectPlan('free')" class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-md transition">
Get Started
</button>
</div>
<div class="border-t border-gray-800 p-8">
<ul class="space-y-4">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>1 analysis per month</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Basic pattern recognition</span>
</li>
<li class="flex items-center text-gray-500">
<svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>No advanced indicators</span>
</li>
<li class="flex items-center text-gray-500">
<svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
<span>No priority processing</span>
</li>
</ul>
</div>
</div>
<!-- Pro Plan -->
<div class="bg-gray-900 rounded-lg border-2 border-red-600 overflow-hidden transform hover:scale-105 transition shadow-xl shadow-red-900/20">
<div class="p-8">
<div class="flex justify-between items-start">
<div>
<h3 class="text-xl font-bold mb-2">Pro</h3>
<p class="text-gray-400 mb-6">For active traders</p>
</div>
<span class="bg-red-600 text-white text-xs px-2 py-1 rounded-full">POPULAR</span>
</div>
<div class="mb-6">
<span class="text-4xl font-bold">$17</span>
<span class="text-gray-400">/month</span>
</div>
<button onclick="selectPlan('pro')" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-md transition">
Get Started
</button>
</div>
<div class="border-t border-gray-800 p-8">
<ul class="space-y-4">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>50 analyses per month</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Advanced pattern recognition</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Priority processing</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Basic indicators included</span>
</li>
</ul>
</div>
</div>
<!-- Premium Plan -->
<div class="bg-gray-900 rounded-lg border border-gray-800 overflow-hidden transition hover:border-red-500">
<div class="p-8">
<h3 class="text-xl font-bold mb-2">Premium</h3>
<p class="text-gray-400 mb-6">For professional traders</p>
<div class="mb-6">
<span class="text-4xl font-bold">$29</span>
<span class="text-gray-400">/month</span>
</div>
<button onclick="selectPlan('premium')" class="w-full bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-md transition">
Get Started
</button>
</div>
<div class="border-t border-gray-800 p-8">
<ul class="space-y-4">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Unlimited analyses</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>All advanced indicators</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Highest priority processing</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Custom indicator requests</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Sign Up Page -->
<section id="signup" class="py-20 px-6 bg-gradient-to-b from-black to-gray-900 hidden">
<div class="max-w-md mx-auto bg-gray-900 rounded-xl shadow-md overflow-hidden border border-gray-800">
<div class="p-8">
<div class="flex justify-center mb-8">
<span class="futuristic text-2xl font-bold gradient-text">TRADINCAP AI</span>
</div>
<h2 class="text-2xl font-bold text-center mb-6">Create Your Account</h2>
<form id="registerForm" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-white">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
<input type="password" id="password" name="password" required minlength="8" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-white">
</div>
<div>
<label for="confirmPassword" class="block text-sm font-medium text-gray-300 mb-1">Confirm Password</label>
<input type="password" id="confirmPassword" name="confirmPassword" required minlength="8" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-white">
</div>
<div class="flex items-center">
<input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-700 rounded bg-gray-800">
<label for="terms" class="ml-2 block text-sm text-gray-300">
I agree to the <a href="#" class="text-red-400 hover:text-red-300">Terms of Service</a> and <a href="#" class="text-red-400 hover:text-red-300">Privacy Policy</a>
</label>
</div>
<div>
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-md font-medium transition">
Create Account
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-gray-400 text-sm">
Already have an account?
<a href="#login" class="text-red-400 hover:text-red-300 font-medium">Sign in</a>
</p>
</div>
</div>
</div>
</section>
<!-- Login Page -->
<section id="login" class="py-20 px-6 bg-gradient-to-b from-black to-gray-900 hidden">
<div class="max-w-md mx-auto bg-gray-900 rounded-xl shadow-md overflow-hidden border border-gray-800">
<div class="p-8">
<div class="flex justify-center mb-8">
<span class="futuristic text-2xl font-bold gradient-text">TRADINCAP AI</span>
</div>
<h2 class="text-2xl font-bold text-center mb-6">Welcome Back</h2>
<form id="loginForm" class="space-y-6">
<div>
<label for="loginEmail" class="block text-sm font-medium text-gray-300 mb-1">Email</label>
<input type="email" id="loginEmail" name="email" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-white">
</div>
<div>
<label for="loginPassword" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
<input type="password" id="loginPassword" name="password" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-white">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-700 rounded bg-gray-800">
<label for="remember" class="ml-2 block text-sm text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-red-400 hover:text-red-300">Forgot password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-4 rounded-md font-medium transition">
Sign In
</button>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-gray-400 text-sm">
Don't have an account?
<a href="#signup" class="text-red-400 hover:text-red-300 font-medium">Sign up</a>
</p>
</div>
</div>
</div>
</section>
<!-- User Dashboard -->
<section id="dashboard" class="py-12 px-6 bg-gray-900 min-h-screen hidden">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-center mb-8">
<div>
<h1 class="futuristic text-2xl md:text-3xl font-bold">
<span class="gradient-text">Dashboard</span>
</h1>
<p class="text-gray-400">Welcome back, <span id="userEmail" class="text-red-400">user@example.com</span></p>
</div>
<div class="flex items-center space-x-4">
<button id="logoutBtn" class="text-gray-400 hover:text-white transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
</button>
</div>
</div>
<div class="grid md:grid-cols-3 gap-6 mb-8">
<!-- Plan Info -->
<div class="dashboard-card p-6 rounded-lg">
<h3 class="text-lg font-bold mb-4">Your Plan</h3>
<div class="flex items-center justify-between mb-2">
<span class="text-gray-400">Current Plan:</span>
<span id="userPlan" class="font-medium">Free</span>
</div>
<div class="flex items-center justify-between mb-4">
<span class="text-gray-400">Analyses Left:</span>
<span id="analysesLeft" class="font-medium">1/1</span>
</div>
<a href="#pricing" class="text-red-400 hover:text-red-300 text-sm font-medium">Upgrade Plan</a>
</div>
<!-- Quick Stats -->
<div class="dashboard-card p-6 rounded-lg">
<h3 class="text-lg font-bold mb-4">Quick Stats</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-400 text-sm">Total Analyses</p>
<p class="text-xl font-bold">12</p>
</div>
<div>
<p class="text-gray-400 text-sm">Success Rate</p>
<p class="text-xl font-bold">78%</p>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="dashboard-card p-6 rounded-lg">
<h3 class="text-lg font-bold mb-4">Recent Activity</h3>
<div class="space-y-2">
<div class="flex items-center text-sm">
<div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
<span>BTC/USD analysis completed</span>
<span class="text-gray-500 ml-auto">2h ago</span>
</div>
<div class="flex items-center text-sm">
<div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div>
<span>Account upgraded to Pro</span>
<span class="text-gray-500 ml-auto">1d ago</span>
</div>
</div>
</div>
</div>
<!-- Analysis Section -->
<div class="dashboard-card p-6 rounded-lg mb-8">
<h3 class="text-lg font-bold mb-6">New Analysis</h3>
<div id="freeUserMessage" class="bg-gray-800 border-l-4 border-yellow-500 p-4 mb-6">
<div class="flex">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-yellow-200">
You have <span id="remainingAnalyses">1</span> analysis remaining this month. <a href="#pricing" class="text-yellow-400 hover:text-yellow-300 underline">Upgrade your plan</a> for unlimited analyses.
</p>
</div>
</div>
</div>
<div class="file-upload p-8 rounded-lg text-center mb-6 cursor-pointer" id="dropArea">
<input type="file" id="upload" accept="image/*" class="hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<h4 class="mt-2 text-lg font-medium text-white">Upload Trading Chart</h4>
<p class="mt-1 text-sm text-gray-400">Drag & drop your chart image here, or click to browse</p>
<p class="mt-2 text-xs text-gray-500">Supports: JPG, PNG (Max 5MB)</p>
</div>
<div class="flex justify-end">
<button onclick="analyzeImage()" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-md font-medium transition flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
Analyze
</button>
</div>
<div id="resultBox" class="mt-6 p-4 bg-gray-800 rounded-lg hidden">
<h4 class="text-lg font-medium mb-3 text-white">Analysis Results</h4>
<pre class="text-gray-300 whitespace-pre-wrap"></pre>
</div>
</div>
<!-- Results Section -->
<div id="resultsSection" class="dashboard-card p-6 rounded-lg hidden">
<h3 class="text-lg font-bold mb-6">Analysis Results</h3>
<div class="grid md:grid-cols-2 gap-6 mb-8">
<!-- Original Chart -->
<div>
<h4 class="text-md font-medium mb-3 text-gray-300">Original Chart</h4>
<div class="bg-gray-800 rounded-lg p-4">
<img id="uploadedImage" src="" alt="Uploaded Chart" class="w-full h-auto rounded">
</div>
</div>
<!-- AI Analysis -->
<div>
<h4 class="text-md font-medium mb-3 text-gray-300">AI Analysis</h4>
<div class="analysis-result bg-gray-800 rounded-lg p-4">
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<p class="text-sm text-gray-400">Signal</p>
<p id="signalResult" class="text-lg font-bold">BUY</p>
</div>
<div>
<p class="text-sm text-gray-400">Confidence</p>
<p id="confidenceResult" class="text-lg font-bold">87%</p>
</div>
<div>
<p class="text-sm text-gray-400">Target Price</p>
<p id="targetResult" class="text-lg font-bold">$42,350</p>
</div>
<div>
<p class="text-sm text-gray-400">Stop Loss</p>
<p id="stopLossResult" class="text-lg font-bold">$38,200</p>
</div>
</div>
<div>
<p class="text-sm text-gray-400">AI Notes</p>
<p id="aiNotes" class="text-sm">
Strong bullish divergence on RSI with price making higher lows while RSI made lower lows.
Breakout above key resistance at $40,000 with increasing volume.
Next major resistance at $42,350.
</p>
</div>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-6">
<h4 class="text-md font-medium mb-3 text-gray-300">Save Analysis</h4>
<div class="flex space-x-3">
<input type="text" placeholder="Analysis name (e.g. BTC Weekly)" class="flex-1 px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 text-white">
<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md font-medium transition">
Save
</button>
</div>
</div>
</div>
<!-- Previous Analyses -->
<div class="dashboard-card p-6 rounded-lg mt-8">
<h3 class="text-lg font-bold mb-6">Previous Analyses</h3>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-800">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Pair</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Timeframe</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Signal</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Result</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-800">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2023-05-15</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">BTC/USD</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">4H</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">BUY</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">+8.2%</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
<a href="#" class="text-red-400 hover:text-red-300">View</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2023-05-10</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">ETH/USD</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">1D</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="px-2 py-1 bg-red-900 text-red-300 rounded-full text-xs">SELL</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<span class="px-2 py-1 bg-red-900 text-red-300 rounded-full text-xs">-3.5%</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
<a href="#" class="text-red-400 hover:text-red-300">View</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 text-center">
<a href="#" class="text-sm text-red-400 hover:text-red-300">View all analyses</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-black py-12 px-6 border-t border-gray-800">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8">
<div>
<span class="futuristic text-2xl font-bold gradient-text">TRADINCAP AI</span>
<p class="mt-4 text-gray-400 text-sm">
AI-powered chart analysis for traders. Get instant insights on your trading charts with our proprietary algorithm.
</p>
</div>
<div>
<h4 class="text-white font-medium mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#pricing" class="text-gray-400 hover:text-white text-sm transition">Pricing</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Features</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">API</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-medium mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">About</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Blog</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Careers</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-medium mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms</a></li>
<li><a href="#" class="text-gray-400 hover:text-white text-sm transition">Disclaimer</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 text-sm">© 2023 Tradincap AI. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-500 hover:text-white transition">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
</a>
<a href="#" class="text-gray-500 hover:text-white transition">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path></svg>
</a>
<a href="#" class="text-gray-500 hover:text-white transition">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</footer>
<script>
// Simple state management
let currentUser = null;
let selectedPlan = 'free';
let analysesUsed = 0;
// DOM elements
const homeSection = document.querySelector('#home');
const pricingSection = document.querySelector('#pricing');
const signupSection = document.querySelector('#signup');
const loginSection = document.querySelector('#login');
const dashboardSection = document.querySelector('#dashboard');
const registerForm = document.querySelector('#registerForm');
const loginForm = document.querySelector('#loginForm');
const logoutBtn = document.querySelector('#logoutBtn');
const fileInput = document.querySelector('#fileInput');
const dropArea = document.querySelector('#dropArea');
const analyzeBtn = document.querySelector('#analyzeBtn');
const resultsSection = document.querySelector('#resultsSection');
const freeUserMessage = document.querySelector('#freeUserMessage');
const remainingAnalyses = document.querySelector('#remainingAnalyses');
const userPlan = document.querySelector('#userPlan');
const analysesLeft = document.querySelector('#analysesLeft');
const userEmail = document.querySelector('#userEmail');
// Navigation functions
function showSection(section) {
homeSection.classList.add('hidden');
pricingSection.classList.add('hidden');
signupSection.classList.add('hidden');
loginSection.classList.add('hidden');
dashboardSection.classList.add('hidden');
section.classList.remove('hidden');
}
// Navigation event listeners
document.querySelectorAll('a[href="#home"]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
showSection(homeSection);
});
});
document.querySelectorAll('a[href="#pricing"]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
showSection(pricingSection);
});
});
document.querySelectorAll('a[href="#signup"]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
showSection(signupSection);
});
});
document.querySelectorAll('a[href="#login"]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
showSection(loginSection);
});
});
// Plan selection
function selectPlan(plan) {
selectedPlan = plan;
showSection(signupSection);
}
// Registration form
registerForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.querySelector('#email').value;
const password = document.querySelector('#password').value;
const confirmPassword = document.querySelector('#confirmPassword').value;
if (password !== confirmPassword) {
alert('Passwords do not match!');
return;
}
// Simple validation
if (email && password) {
currentUser = {
email,
plan: selectedPlan,
analysesUsed: 0
};
userEmail.textContent = email;
userPlan.textContent = selectedPlan.charAt(0).toUpperCase() + selectedPlan.slice(1);
if (selectedPlan === 'free') {
analysesLeft.textContent = '1/1';
remainingAnalyses.textContent = '1';
} else if (selectedPlan === 'pro') {
analysesLeft.textContent = '50/50';
remainingAnalyses.textContent = '50';
} else {
analysesLeft.textContent = 'Unlimited';
remainingAnalyses.textContent = 'Unlimited';
}
showSection(dashboardSection);
}
});
// Login form
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = document.querySelector('#loginEmail').value;
const password = document.querySelector('#loginPassword').value;
// Simple validation
if (email && password) {
currentUser = {
email,
plan: 'pro', // Default to pro for demo
analysesUsed: 3
};
userEmail.textContent = email;
userPlan.textContent = 'Pro';
analysesLeft.textContent = '47/50';
remainingAnalyses.textContent = '47';
showSection(dashboardSection);
}
});
// Logout
logoutBtn.addEventListener('click', () => {
currentUser = null;
showSection(homeSection);
});
// File upload handling
dropArea.addEventListener('click', () => {
fileInput.click();
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length) {
const file = e.target.files[0];
handleFileUpload(file);
}
});
// Drag and drop
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
});
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false);
});
['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false);
});
function highlight() {
dropArea.classList.add('border-red-500');
dropArea.classList.remove('border-gray-700');
}
function unhighlight() {
dropArea.classList.remove('border-red-500');
dropArea.classList.add('border-gray-700');
}
dropArea.addEventListener('drop', (e) => {
const dt = e.dataTransfer;
const file = dt.files[0];
handleFileUpload(file);
});
function handleFileUpload(file) {
if (!file.type.match('image.*')) {
alert('Please upload an image file (JPG, PNG)');
return;
}
if (file.size > 5 * 1024 * 1024) {
alert('File size exceeds 5MB limit');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
document.querySelector('#uploadedImage').src = e.target.result;
};
reader.readAsDataURL(file);
}
// Analyze button functionality
async function analyzeImage() {
const fileInput = document.getElementById("upload");
const imageFile = fileInput.files[0];
const resultBox = document.getElementById("resultBox");
if (!imageFile) {
alert("Please upload a chart image first.");
return;
}
if (currentUser.plan === 'free' && currentUser.analysesUsed >= 1) {
alert('You have used your free analysis for this month. Please upgrade to continue.');
return;
}
if (currentUser.plan === 'pro' && currentUser.analysesUsed >= 50) {
alert('You have reached your monthly analysis limit. Please upgrade to continue.');
return;
}
// Show loading state
resultBox.querySelector('pre').textContent = "Analyzing chart...";
resultBox.classList.remove('hidden');
const reader = new FileReader();
reader.onload = async function () {
const base64Image = reader.result.split(',')[1];
try {
const response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_KEY" // Replace with your actual API key
},
body: JSON.stringify({
model: "gpt-4-vision-preview",
messages: [
{
role: "user",
content: [
{
type: "text",
text: "Analyze this trading chart and provide the following in a structured format:\n\n- Signal (Buy/Sell)\n- Take Profit Level\n- Stop Loss Level\n- Recommended Timeframe\n- Entry Reason\n\nBe concise and professional."
},
{
type: "image_url",
image_url: {
url: `data:image/jpeg;base64,${base64Image}`
}
}
]
}
],
max_tokens: 500
})
});
const data = await response.json();
const analysisResult = data.choices?.[0]?.message?.content || "No analysis available.";
// Update usage
if (currentUser.plan !== 'premium') {
currentUser.analysesUsed++;
if (currentUser.plan === 'free') {
analysesLeft.textContent = `${1 - currentUser.analysesUsed}/1`;
remainingAnalyses.textContent = `${1 - currentUser.analysesUsed}`;
} else {
analysesLeft.textContent = `${50 - currentUser.analysesUsed}/50`;
remainingAnalyses.textContent = `${50 - currentUser.analysesUsed}`;
}
}
// Display results
resultBox.querySelector('pre').textContent = analysisResult;
resultBox.scrollIntoView({ behavior: 'smooth' });
} catch (error) {
console.error("Error analyzing image:", error);
resultBox.querySelector('pre').textContent = "Error analyzing chart. Please try again.";
}
};
reader.readAsDataURL(imageFile);
}
// Initialize
showSection(homeSection);
</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=ahmed000abdo/tradincap" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>