Spaces:

WormGPT128
/

what

Running

App Files Files Community

WormGPT128 commited on Jun 21, 2025

Commit

c67dc0f

verified ·

1 Parent(s): be29f4b

Build a fully functional and professional mobile trading application named SmartTradeX using Flutter for cross-platform compatibility (Android + iOS). The app should feature real-time candlestick charts, price data, and trading tools similar to MetaTrader. 📱 App Features: 1. 📊 Live Candlestick Chart: - Real-time chart updates - Zoom & scroll gestures - Multiple timeframes (M1, M5, M15, 1H, 1D) - Chart type: Candlestick (like in the image) 2. 📈 Asset Info: - Pair: Example `EUR/USD` - Live price updates from a real API (e.g., Binance, Alpha Vantage, or custom broker API) - Price displayed at the top (open, high, low, close) 3. 🛠️ Toolbar Options: - Timeframe switcher - Drawing tools (trendlines, Fibonacci, etc.) - Indicator list (RSI, MACD, Bollinger Bands) 4. 🧭 Bottom Navigation: - Quotes - Chart (current active tab) - Trade (open/close positions) - History (previous trades) - Settings 5. 🌙 Dark & Light Mode support 6. 🌐 Language Support: - English & Arabic 7. 📡 Live Trading Data Integration: - Connect to a broker or exchange via API - Fetch OHLC (Open, High, Low, Close) data - Handle user authentication and real trades 8. 💾 Offline Mode: - Cache latest chart data and load when offline --- ### 🧠 Tech Stack Recommendation: - Frontend: Flutter - Chart Library: `syncfusion_flutter_charts` or `flutter_candlesticks` - Backend (optional): Node.js or Firebase - API Source: Binance API, Alpha Vantage, or MetaTrader API (if broker provides access) --- 🛠️ If you want, I can generate a full Flutter app template for this — just say "Start Flutter Project". - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +441 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: What
-emoji: 🏢
-colorFrom: red
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

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

index.html CHANGED Viewed

@@ -1,19 +1,441 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SmartTradeX - Mobile Trading App</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">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
+    <style>
+        .candle-up {
+            background-color: #10b981;
+        }
+        .candle-down {
+            background-color: #ef4444;
+        }
+        .chart-container {
+            height: 400px;
+            position: relative;
+        }
+        .timeframe-btn.active {
+            background-color: #3b82f6;
+            color: white;
+        }
+        .drawing-tool.active {
+            background-color: #e5e7eb;
+        }
+        .indicator-item.active {
+            background-color: #e5e7eb;
+        }
+        .tab-active {
+            color: #3b82f6;
+            border-bottom: 2px solid #3b82f6;
+        }
+        .dark .candle-up {
+            background-color: #059669;
+        }
+        .dark .candle-down {
+            background-color: #dc2626;
+        }
+        .dark .timeframe-btn.active {
+            background-color: #1d4ed8;
+        }
+        .dark .drawing-tool.active {
+            background-color: #4b5563;
+        }
+        .dark .indicator-item.active {
+            background-color: #4b5563;
+        }
+        .dark .tab-active {
+            color: #60a5fa;
+            border-bottom-color: #60a5fa;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
+    <div class="max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg min-h-screen flex flex-col">
+        <!-- Header -->
+        <header class="p-4 border-b border-gray-200 dark:border-gray-700">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center">
+                    <i class="fas fa-chart-line text-blue-500 dark:text-blue-400 text-xl mr-2"></i>
+                    <h1 class="text-xl font-bold text-gray-800 dark:text-white">SmartTradeX</h1>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <i class="fas fa-moon dark:hidden text-gray-600"></i>
+                        <i class="fas fa-sun hidden dark:block text-yellow-300"></i>
+                    </button>
+                    <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <i class="fas fa-language text-gray-600 dark:text-gray-300"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Asset Info -->
+            <div class="mt-4">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">EUR/USD</h2>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Euro / US Dollar</p>
+                    </div>
+                    <div class="text-right">
+                        <p class="text-2xl font-bold text-gray-800 dark:text-white" id="current-price">1.0954</p>
+                        <p class="text-sm" id="price-change">
+                            <span class="text-green-500">+0.0024</span>
+                            <span class="text-green-500">(+0.22%)</span>
+                        </p>
+                    </div>
+                </div>
+                <div class="grid grid-cols-4 gap-2 mt-3 text-center">
+                    <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded">
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Open</p>
+                        <p class="text-sm font-medium text-gray-800 dark:text-white">1.0930</p>
+                    </div>
+                    <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded">
+                        <p class="text-xs text-gray-500 dark:text-gray-400">High</p>
+                        <p class="text-sm font-medium text-gray-800 dark:text-white">1.0962</p>
+                    </div>
+                    <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded">
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Low</p>
+                        <p class="text-sm font-medium text-gray-800 dark:text-white">1.0925</p>
+                    </div>
+                    <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded">
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Close</p>
+                        <p class="text-sm font-medium text-gray-800 dark:text-white">1.0954</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="flex-1 overflow-hidden">
+            <!-- Timeframe Selector -->
+            <div class="flex overflow-x-auto p-2 space-x-1 bg-gray-50 dark:bg-gray-700">
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm" data-timeframe="1m">1m</button>
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm" data-timeframe="5m">5m</button>
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm active" data-timeframe="15m">15m</button>
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm" data-timeframe="1h">1h</button>
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm" data-timeframe="4h">4h</button>
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm" data-timeframe="1d">1d</button>
+                <button class="timeframe-btn px-3 py-1 rounded-full text-sm" data-timeframe="1w">1w</button>
+            </div>
+            <!-- Chart Container -->
+            <div class="chart-container p-2">
+                <canvas id="priceChart"></canvas>
+            </div>
+            <!-- Toolbar -->
+            <div class="border-t border-b border-gray-200 dark:border-gray-700 p-2">
+                <div class="flex justify-between">
+                    <div class="flex space-x-2 overflow-x-auto">
+                        <button class="drawing-tool p-2 rounded" data-tool="line">
+                            <i class="fas fa-slash"></i>
+                        </button>
+                        <button class="drawing-tool p-2 rounded" data-tool="horizontal">
+                            <i class="fas fa-grip-lines"></i>
+                        </button>
+                        <button class="drawing-tool p-2 rounded" data-tool="vertical">
+                            <i class="fas fa-grip-lines-vertical"></i>
+                        </button>
+                        <button class="drawing-tool p-2 rounded" data-tool="fibonacci">
+                            <i class="fas fa-wave-square"></i>
+                        </button>
+                        <button class="drawing-tool p-2 rounded" data-tool="rectangle">
+                            <i class="far fa-square"></i>
+                        </button>
+                    </div>
+                    <button id="indicators-btn" class="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <i class="fas fa-chart-bar"></i>
+                    </button>
+                </div>
+                <!-- Indicators Panel (hidden by default) -->
+                <div id="indicators-panel" class="hidden mt-2 p-2 bg-gray-100 dark:bg-gray-700 rounded">
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="indicator-item p-2 text-left rounded" data-indicator="rsi">RSI</button>
+                        <button class="indicator-item p-2 text-left rounded" data-indicator="macd">MACD</button>
+                        <button class="indicator-item p-2 text-left rounded" data-indicator="bollinger">Bollinger Bands</button>
+                        <button class="indicator-item p-2 text-left rounded" data-indicator="sma">SMA</button>
+                        <button class="indicator-item p-2 text-left rounded" data-indicator="ema">EMA</button>
+                        <button class="indicator-item p-2 text-left rounded" data-indicator="volume">Volume</button>
+                    </div>
+                </div>
+            </div>
+            <!-- Order Panel -->
+            <div class="p-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <button class="bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center">
+                        <i class="fas fa-arrow-up mr-2"></i> Buy
+                    </button>
+                    <button class="bg-red-500 hover:bg-red-600 text-white py-3 px-4 rounded-lg font-medium flex items-center justify-center">
+                        <i class="fas fa-arrow-down mr-2"></i> Sell
+                    </button>
+                </div>
+                <div class="mt-4 space-y-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Volume</label>
+                        <div class="flex">
+                            <input type="number" value="0.1" min="0.01" step="0.01" class="flex-1 border border-gray-300 dark:border-gray-600 rounded-l-lg px-3 py-2 dark:bg-gray-700 dark:text-white">
+                            <select class="border border-gray-300 dark:border-gray-600 rounded-r-lg px-2 dark:bg-gray-700 dark:text-white">
+                                <option>LOT</option>
+                                <option>%</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Take Profit</label>
+                            <input type="number" value="1.1000" step="0.0001" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 dark:bg-gray-700 dark:text-white">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Stop Loss</label>
+                            <input type="number" value="1.0900" step="0.0001" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 dark:bg-gray-700 dark:text-white">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Bottom Navigation -->
+        <nav class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
+            <div class="flex justify-around">
+                <a href="#" class="flex flex-col items-center p-3 text-gray-500 dark:text-gray-400">
+                    <i class="fas fa-list-ol text-lg"></i>
+                    <span class="text-xs mt-1">Quotes</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-3 text-blue-500 dark:text-blue-400 tab-active">
+                    <i class="fas fa-chart-line text-lg"></i>
+                    <span class="text-xs mt-1">Chart</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-3 text-gray-500 dark:text-gray-400">
+                    <i class="fas fa-exchange-alt text-lg"></i>
+                    <span class="text-xs mt-1">Trade</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-3 text-gray-500 dark:text-gray-400">
+                    <i class="fas fa-history text-lg"></i>
+                    <span class="text-xs mt-1">History</span>
+                </a>
+                <a href="#" class="flex flex-col items-center p-3 text-gray-500 dark:text-gray-400">
+                    <i class="fas fa-cog text-lg"></i>
+                    <span class="text-xs mt-1">Settings</span>
+                </a>
+            </div>
+        </nav>
+    </div>
+    <script>
+        // Theme toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        // Check for saved theme preference or use system preference
+        if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            html.classList.add('dark');
+        } else {
+            html.classList.remove('dark');
+        }
+        themeToggle.addEventListener('click', () => {
+            html.classList.toggle('dark');
+            localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
+        });
+        // Timeframe buttons
+        const timeframeButtons = document.querySelectorAll('.timeframe-btn');
+        timeframeButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                timeframeButtons.forEach(btn => btn.classList.remove('active'));
+                button.classList.add('active');
+                // In a real app, this would fetch new data for the selected timeframe
+                console.log('Selected timeframe:', button.dataset.timeframe);
+            });
+        });
+        // Drawing tools
+        const drawingTools = document.querySelectorAll('.drawing-tool');
+        drawingTools.forEach(tool => {
+            tool.addEventListener('click', () => {
+                drawingTools.forEach(t => t.classList.remove('active'));
+                tool.classList.add('active');
+                console.log('Selected drawing tool:', tool.dataset.tool);
+            });
+        });
+        // Indicators
+        const indicatorsBtn = document.getElementById('indicators-btn');
+        const indicatorsPanel = document.getElementById('indicators-panel');
+        const indicatorItems = document.querySelectorAll('.indicator-item');
+        indicatorsBtn.addEventListener('click', () => {
+            indicatorsPanel.classList.toggle('hidden');
+        });
+        indicatorItems.forEach(item => {
+            item.addEventListener('click', () => {
+                item.classList.toggle('active');
+                console.log('Indicator toggled:', item.dataset.indicator);
+            });
+        });
+        // Simulate price updates
+        function updatePrice() {
+            const currentPriceElement = document.getElementById('current-price');
+            const priceChangeElement = document.getElementById('price-change');
+            // Generate random price movement
+            const currentPrice = parseFloat(currentPriceElement.textContent);
+            const change = (Math.random() - 0.5) * 0.002;
+            const newPrice = currentPrice + change;
+            currentPriceElement.textContent = newPrice.toFixed(4);
+            const priceChange = (newPrice - 1.0950).toFixed(4);
+            const percentChange = ((priceChange / 1.0950) * 100).toFixed(2);
+            if (priceChange >= 0) {
+                priceChangeElement.innerHTML = `
+                    <span class="text-green-500">+${priceChange}</span>
+                    <span class="text-green-500">(+${percentChange}%)</span>
+                `;
+            } else {
+                priceChangeElement.innerHTML = `
+                    <span class="text-red-500">${priceChange}</span>
+                    <span class="text-red-500">(${percentChange}%)</span>
+                `;
+            }
+            // Update chart with new data point
+            addNewDataPoint(newPrice);
+        }
+        // Update price every 3 seconds
+        setInterval(updatePrice, 3000);
+        // Initialize Chart
+        const ctx = document.getElementById('priceChart').getContext('2d');
+        // Generate sample candlestick data
+        function generateSampleData(count = 50) {
+            const data = [];
+            let price = 1.0900;
+            for (let i = 0; i < count; i++) {
+                const open = price;
+                const change = (Math.random() - 0.5) * 0.005;
+                const close = open + change;
+                const high = Math.max(open, close) + Math.random() * 0.002;
+                const low = Math.min(open, close) - Math.random() * 0.002;
+                data.push({
+                    x: new Date(Date.now() - (count - i) * 15 * 60 * 1000), // 15 minute intervals
+                    o: open,
+                    h: high,
+                    l: low,
+                    c: close
+                });
+                price = close;
+            }
+            return data;
+        }
+        const sampleData = generateSampleData();
+        const chart = new Chart(ctx, {
+            type: 'candlestick',
+            data: {
+                datasets: [{
+                    label: 'EUR/USD',
+                    data: sampleData,
+                    color: {
+                        up: '#10b981',
+                        down: '#ef4444',
+                        unchanged: '#9ca3af',
+                    }
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    x: {
+                        type: 'time',
+                        time: {
+                            unit: 'minute',
+                            displayFormats: {
+                                minute: 'HH:mm'
+                            }
+                        },
+                        grid: {
+                            display: false
+                        }
+                    },
+                    y: {
+                        position: 'right',
+                        ticks: {
+                            callback: function(value) {
+                                return value.toFixed(4);
+                            }
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    },
+                    zoom: {
+                        zoom: {
+                            wheel: {
+                                enabled: true,
+                            },
+                            pinch: {
+                                enabled: true
+                            },
+                            mode: 'xy',
+                        },
+                        pan: {
+                            enabled: true,
+                            mode: 'xy',
+                        }
+                    }
+                }
+            }
+        });
+        // Add new data point to chart
+        function addNewDataPoint(price) {
+            const lastData = chart.data.datasets[0].data[chart.data.datasets[0].data.length - 1];
+            const change = (Math.random() - 0.5) * 0.005;
+            const close = price;
+            const open = lastData.c;
+            const high = Math.max(open, close) + Math.random() * 0.002;
+            const low = Math.min(open, close) - Math.random() * 0.002;
+            // Remove first data point if we have too many
+            if (chart.data.datasets[0].data.length > 100) {
+                chart.data.datasets[0].data.shift();
+            }
+            // Add new data point
+            chart.data.datasets[0].data.push({
+                x: new Date(),
+                o: open,
+                h: high,
+                l: low,
+                c: close
+            });
+            chart.update();
+        }
+    </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=WormGPT128/what" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>