Spaces:
Running
Running
Create a full-stack website called "SmartTrade Signals" that analyzes uploaded trading chart images and returns trading signals like Buy/Sell, Stoploss, and Take Profit. 🔧 Features Required: 1. **Frontend UI** - Header: "SmartTrade Signals" - Subheading: "Upload your chart and get instant trade signals." - Upload box for image files (drag & drop + browse) - Analyze button - Output box to display: - Signal: BUY / SELL - Stoploss: ₹xxxx.xx - Take Profit: ₹xxxx.xx - Clean, dark theme UI with neon green accents - Fully mobile responsive 2. **Backend Logic** - Use Python (Flask or FastAPI) as backend - When an image is uploaded, simulate analysis by returning a JSON like: ```json { "signal": "BUY", "stoploss": "1835.50", "take_profit": "1878.90" } - Initial Deployment
66aff6a
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SmartTrade Signals - AI Trading Analysis</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0a0a0a; | |
| color: #e2e8f0; | |
| } | |
| .header-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .dropzone { | |
| border: 2px dashed #4ade80; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #22c55e; | |
| background-color: rgba(74, 222, 128, 0.05); | |
| } | |
| .signal-buy { | |
| background-color: rgba(74, 222, 128, 0.1); | |
| border-left: 4px solid #4ade80; | |
| } | |
| .signal-sell { | |
| background-color: rgba(239, 68, 68, 0.1); | |
| border-left: 4px solid #ef4444; | |
| } | |
| .glow { | |
| text-shadow: 0 0 8px rgba(74, 222, 128, 0.7); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-gray-900 border-b border-gray-800 py-6 px-4"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chart-line text-white"></i> | |
| </div> | |
| <h1 class="header-font text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-green-600 glow"> | |
| SmartTrade Signals | |
| </h1> | |
| </div> | |
| <nav class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition">Home</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition">How It Works</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition">Pricing</a> | |
| <a href="#" class="text-gray-400 hover:text-green-400 transition">Contact</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8 md:py-12"> | |
| <div class="max-w-4xl mx-auto text-center mb-10"> | |
| <h2 class="header-font text-3xl md:text-4xl font-bold mb-4">Upload your chart and get instant trade signals</h2> | |
| <p class="text-gray-400 text-lg max-w-2xl mx-auto"> | |
| Our AI analyzes your trading charts in seconds to provide accurate BUY/SELL signals with precise stoploss and take profit levels. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Upload Section --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700"> | |
| <h3 class="header-font text-xl font-semibold mb-4 text-green-400 flex items-center"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Upload Chart | |
| </h3> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-image text-4xl text-green-400 mb-3"></i> | |
| <p class="text-gray-300 mb-1">Drag & drop your trading chart here</p> | |
| <p class="text-gray-500 text-sm">or</p> | |
| <button id="browseBtn" class="mt-3 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition"> | |
| Browse Files | |
| </button> | |
| </div> | |
| <input type="file" id="fileInput" accept="image/*" class="hidden"> | |
| </div> | |
| <div id="previewContainer" class="hidden mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Selected file:</span> | |
| <button id="removeFile" class="text-red-400 hover:text-red-300"> | |
| <i class="fas fa-times"></i> Remove | |
| </button> | |
| </div> | |
| <div id="imagePreview" class="rounded-lg overflow-hidden border border-gray-700"> | |
| <!-- Preview will be inserted here --> | |
| </div> | |
| </div> | |
| <button id="analyzeBtn" class="w-full py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition flex items-center justify-center pulse"> | |
| <i class="fas fa-bolt mr-2"></i> Analyze Chart | |
| </button> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700"> | |
| <h3 class="header-font text-xl font-semibold mb-4 text-green-400 flex items-center"> | |
| <i class="fas fa-chart-bar mr-2"></i> Trading Signals | |
| </h3> | |
| <div id="resultsPlaceholder" class="bg-gray-900 rounded-lg p-8 text-center border border-dashed border-gray-700"> | |
| <i class="fas fa-chart-pie text-4xl text-gray-600 mb-4"></i> | |
| <h4 class="text-gray-500 font-medium">Analysis Results</h4> | |
| <p class="text-gray-600 text-sm mt-1">Upload a chart and click "Analyze" to get trading signals</p> | |
| </div> | |
| <div id="resultsContainer" class="hidden"> | |
| <div id="signalCard" class="rounded-lg p-5 mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-400">Signal:</span> | |
| <span id="signalValue" class="font-bold text-xl"></span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Stoploss:</span> | |
| <span id="stoplossValue" class="font-bold text-green-400"></span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-4 border border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400">Take Profit:</span> | |
| <span id="takeProfitValue" class="font-bold text-green-400"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gray-900 rounded-lg p-4 border border-gray-700"> | |
| <h4 class="text-gray-400 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Analysis Summary | |
| </h4> | |
| <p id="analysisSummary" class="text-gray-300 text-sm"></p> | |
| </div> | |
| <button id="saveBtn" class="w-full mt-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition flex items-center justify-center"> | |
| <i class="fas fa-save mr-2"></i> Save This Analysis | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800 py-6 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-gray-500 text-sm"> | |
| © 2023 SmartTrade Signals. All rights reserved. | |
| </p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-green-400 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-green-400 transition"> | |
| <i class="fab fa-telegram"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-green-400 transition"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-green-400 transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const browseBtn = document.getElementById('browseBtn'); | |
| const removeFile = document.getElementById('removeFile'); | |
| const previewContainer = document.getElementById('previewContainer'); | |
| const imagePreview = document.getElementById('imagePreview'); | |
| const analyzeBtn = document.getElementById('analyzeBtn'); | |
| const resultsPlaceholder = document.getElementById('resultsPlaceholder'); | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const signalValue = document.getElementById('signalValue'); | |
| const stoplossValue = document.getElementById('stoplossValue'); | |
| const takeProfitValue = document.getElementById('takeProfitValue'); | |
| const analysisSummary = document.getElementById('analysisSummary'); | |
| const saveBtn = document.getElementById('saveBtn'); | |
| let currentFile = null; | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropzone.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropzone.classList.add('active'); | |
| } | |
| function unhighlight() { | |
| dropzone.classList.remove('active'); | |
| } | |
| dropzone.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| browseBtn.addEventListener('click', () => { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', () => { | |
| handleFiles(fileInput.files); | |
| }); | |
| removeFile.addEventListener('click', () => { | |
| currentFile = null; | |
| previewContainer.classList.add('hidden'); | |
| fileInput.value = ''; | |
| }); | |
| function handleFiles(files) { | |
| if (files.length > 0) { | |
| currentFile = files[0]; | |
| previewContainer.classList.remove('hidden'); | |
| if (currentFile.type.startsWith('image/')) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| imagePreview.innerHTML = `<img src="${e.target.result}" class="w-full h-auto max-h-64 object-contain" alt="Preview">`; | |
| }; | |
| reader.readAsDataURL(currentFile); | |
| } else { | |
| imagePreview.innerHTML = `<div class="p-4 text-center text-gray-400"><i class="fas fa-file-alt text-3xl mb-2"></i><p>${currentFile.name}</p></div>`; | |
| } | |
| } | |
| } | |
| analyzeBtn.addEventListener('click', () => { | |
| if (!currentFile) { | |
| showAlert('Please upload a chart first', 'error'); | |
| return; | |
| } | |
| // Show loading state | |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyzing...'; | |
| analyzeBtn.disabled = true; | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // This would be replaced with actual API call to your Python backend | |
| // For demo purposes, we'll generate random results | |
| const results = generateRandomResults(); | |
| // Display results | |
| displayResults(results); | |
| // Reset button | |
| analyzeBtn.innerHTML = '<i class="fas fa-bolt mr-2"></i> Analyze Chart'; | |
| analyzeBtn.disabled = false; | |
| }, 2000); | |
| }); | |
| function generateRandomResults() { | |
| const signals = ['BUY', 'SELL']; | |
| const randomSignal = signals[Math.floor(Math.random() * signals.length)]; | |
| // Generate random prices between 1000 and 2000 with 2 decimal places | |
| const basePrice = (Math.random() * 1000 + 1000).toFixed(2); | |
| const stoploss = (parseFloat(basePrice) * (randomSignal === 'BUY' ? 0.98 : 1.02)).toFixed(2); | |
| const takeProfit = (parseFloat(basePrice) * (randomSignal === 'BUY' ? 1.05 : 0.95)).toFixed(2); | |
| const summaries = [ | |
| "The chart shows a strong bullish breakout with increasing volume, suggesting a good buying opportunity.", | |
| "Bearish divergence detected on RSI with price making higher highs while RSI makes lower highs, indicating potential reversal.", | |
| "Price has bounced off key support level with confirmation from MACD crossover, suggesting upward momentum.", | |
| "Head and shoulders pattern identified with neckline break, signaling potential downward movement.", | |
| "Double bottom pattern confirmed with breakout above resistance, indicating bullish trend continuation." | |
| ]; | |
| const randomSummary = summaries[Math.floor(Math.random() * summaries.length)]; | |
| return { | |
| signal: randomSignal, | |
| stoploss: stoploss, | |
| take_profit: takeProfit, | |
| summary: randomSummary | |
| }; | |
| } | |
| function displayResults(results) { | |
| resultsPlaceholder.classList.add('hidden'); | |
| resultsContainer.classList.remove('hidden'); | |
| signalValue.textContent = results.signal; | |
| stoplossValue.textContent = `₹${results.stoploss}`; | |
| takeProfitValue.textContent = `₹${results.take_profit}`; | |
| analysisSummary.textContent = results.summary; | |
| const signalCard = document.getElementById('signalCard'); | |
| signalCard.className = 'rounded-lg p-5 mb-4'; | |
| if (results.signal === 'BUY') { | |
| signalCard.classList.add('signal-buy'); | |
| signalValue.className = 'font-bold text-xl text-green-400'; | |
| } else { | |
| signalCard.classList.add('signal-sell'); | |
| signalValue.className = 'font-bold text-xl text-red-400'; | |
| } | |
| } | |
| saveBtn.addEventListener('click', () => { | |
| if (!currentFile) { | |
| showAlert('No analysis to save', 'error'); | |
| return; | |
| } | |
| showAlert('Analysis saved successfully!', 'success'); | |
| }); | |
| function showAlert(message, type) { | |
| const alert = document.createElement('div'); | |
| alert.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${ | |
| type === 'error' ? 'bg-red-600' : 'bg-green-600' | |
| } text-white flex items-center`; | |
| alert.innerHTML = ` | |
| <i class="fas ${type === 'error' ? 'fa-exclamation-circle' : 'fa-check-circle'} mr-2"></i> | |
| ${message} | |
| `; | |
| document.body.appendChild(alert); | |
| setTimeout(() => { | |
| alert.classList.add('opacity-0', 'transition-opacity', 'duration-300'); | |
| setTimeout(() => { | |
| alert.remove(); | |
| }, 300); | |
| }, 3000); | |
| } | |
| }); | |
| </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=Pankajpegu07/chart" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |