Spaces:

enzostvs
/

deepsite

Running

App Files Files Community

518

ahmed000abdo commited on 13 days ago

Commit

9371307

verified ·

1 Parent(s): e85b124

trad

Browse files

Files changed (4) hide show

README.md +8 -25
gitattributes +35 -0
index (2).html +964 -0
style.css +28 -0

README.md CHANGED Viewed

@@ -1,29 +1,12 @@
 ---
-title: DeepSite v3
 emoji: 🐳
-colorFrom: blue
-colorTo: blue
-sdk: docker
-pinned: true
-app_port: 3000
-license: mit
-short_description: Generate any application by Vibe Coding
-models:
-  - deepseek-ai/DeepSeek-V3-0324
-  - deepseek-ai/DeepSeek-R1-0528
-  - deepseek-ai/DeepSeek-V3.1
-  - deepseek-ai/DeepSeek-V3.1-Terminus
-  - deepseek-ai/DeepSeek-V3.2-Exp
-  - Qwen/Qwen3-Coder-480B-A35B-Instruct
-  - moonshotai/Kimi-K2-Instruct
-  - moonshotai/Kimi-K2-Instruct-0905
-  - zai-org/GLM-4.6
 ---
-# DeepSite 🐳
-DeepSite is a Vibe Coding Platform designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
-## How to use it locally
-Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)

 ---
+title: tradincap
 emoji: 🐳
+colorFrom: yellow
+colorTo: red
+sdk: static
+pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

index (2).html ADDED Viewed

	@@ -0,0 +1,964 @@

+<!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">[email protected]</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>

style.css ADDED Viewed

	@@ -0,0 +1,28 @@

+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+.card p:last-child {
+	margin-bottom: 0;
+}