a futures/crypto trading interface with a main tradingview chart with indicators, right hand sidebar with trading contols, a tabset underthe chart - cryptowat.ch vibes

README.md

@@ -1,10 +1,13 @@
 ---
-title: Cryptotrader Pro
-emoji: 👀
-colorFrom: yellow
+title: CryptoTrader Pro 🚀📊
+colorFrom: red
 colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,64 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #1e293b;
+          color: #94a3b8;
+          padding: 1.5rem;
+          text-align: center;
+          font-size: 0.875rem;
+          border-top: 1px solid #334155;
+          margin-top: auto;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 1rem;
+          flex-wrap: wrap;
+        }
+        .footer-links a {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: white;
+        }
+        .social-links {
+          display: flex;
+          justify-content: center;
+          gap: 1rem;
+          margin-top: 1rem;
+        }
+        .social-links a {
+          color: #94a3b8;
+          transition: color 0.2s;
+        }
+        .social-links a:hover {
+          color: white;
+        }
+      </style>
+      <footer>
+        <div class="footer-links">
+          <a href="#">Terms</a>
+          <a href="#">Privacy</a>
+          <a href="#">API</a>
+          <a href="#">Status</a>
+          <a href="#">Contact</a>
+          <a href="#">Help</a>
+        </div>
+        <div>© 2023 CryptoTrader Pro. All rights reserved.</div>
+        <div class="social-links">
+          <a href="#"><i data-feather="twitter"></i></a>
+          <a href="#"><i data-feather="discord"></i></a>
+          <a href="#"><i data-feather="github"></i></a>
+          <a href="#"><i data-feather="linkedin"></i></a>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,92 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: #1e293b;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #334155;
+        }
+        .logo {
+          color: white;
+          font-weight: bold;
+          font-size: 1.25rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .logo-icon {
+          color: #3b82f6;
+        }
+        ul {
+          display: flex;
+          gap: 1.5rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        a {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.2s;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+          font-size: 0.9375rem;
+        }
+        a:hover {
+          color: white;
+        }
+        a.active {
+          color: white;
+        }
+        .user-menu {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        .balance {
+          background: #334155;
+          padding: 0.375rem 0.75rem;
+          border-radius: 9999px;
+          font-size: 0.875rem;
+          font-weight: 500;
+        }
+        .avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 9999px;
+          background: #475569;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          font-weight: bold;
+          cursor: pointer;
+        }
+      </style>
+      <nav>
+        <div class="logo">
+          <i data-feather="activity" class="logo-icon"></i>
+          <span>CryptoTrader Pro</span>
+        </div>
+        <ul>
+          <li><a href="/" class="active"><i data-feather="home"></i> Dashboard</a></li>
+          <li><a href="#"><i data-feather="dollar-sign"></i> Markets</a></li>
+          <li><a href="#"><i data-feather="briefcase"></i> Portfolio</a></li>
+          <li><a href="#"><i data-feather="file-text"></i> Reports</a></li>
+        </ul>
+        <div class="user-menu">
+          <div class="balance">$12,345.67</div>
+          <div class="avatar">JD</div>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,226 @@
-<!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>CryptoTrader Pro 🚀📊</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://s3.tradingview.com/tv.js"></script>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <custom-navbar></custom-navbar>
+    
+    <div class="container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
+        <!-- Main Chart Area -->
+        <div class="flex-1">
+            <div class="bg-gray-800 rounded-lg shadow-xl overflow-hidden">
+                <!-- Chart Tabs -->
+                <div class="flex border-b border-gray-700">
+                    <button class="px-4 py-2 font-medium text-blue-400 border-b-2 border-blue-400">BTC/USDT</button>
+                    <button class="px-4 py-2 font-medium text-gray-400 hover:text-gray-200">ETH/USDT</button>
+                    <button class="px-4 py-2 font-medium text-gray-400 hover:text-gray-200">SOL/USDT</button>
+                    <div class="flex-1"></div>
+                    <button class="px-4 py-2 text-gray-400 hover:text-gray-200">
+                        <i data-feather="plus"></i>
+                    </button>
+                </div>
+                
+                <!-- TradingView Widget -->
+                <div id="tradingview-chart" class="w-full h-[500px]"></div>
+                
+                <!-- Chart Controls -->
+                <div class="p-4 bg-gray-800 border-t border-gray-700 flex items-center justify-between">
+                    <div class="flex gap-2">
+                        <button class="px-3 py-1 bg-gray-700 rounded-md hover:bg-gray-600">
+                            <i data-feather="settings"></i>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-700 rounded-md hover:bg-gray-600">
+                            <i data-feather="bar-chart-2"></i>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-700 rounded-md hover:bg-gray-600">
+                            <i data-feather="trending-up"></i>
+                        </button>
+                    </div>
+                    <div class="flex gap-2">
+                        <button class="px-3 py-1 bg-gray-700 rounded-md hover:bg-gray-600">
+                            <i data-feather="clock"></i>
+                        </button>
+                        <button class="px-3 py-1 bg-gray-700 rounded-md hover:bg-gray-600">
+                            <i data-feather="maximize"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Bottom Tabs -->
+            <div class="mt-4 bg-gray-800 rounded-lg shadow-xl overflow-hidden">
+                <div class="flex border-b border-gray-700">
+                    <button class="px-4 py-2 font-medium text-blue-400 border-b-2 border-blue-400">Orders</button>
+                    <button class="px-4 py-2 font-medium text-gray-400 hover:text-gray-200">Positions</button>
+                    <button class="px-4 py-2 font-medium text-gray-400 hover:text-gray-200">History</button>
+                </div>
+                
+                <div class="p-4">
+                    <div class="overflow-x-auto">
+                        <table class="w-full">
+                            <thead>
+                                <tr class="text-gray-400 text-left border-b border-gray-700">
+                                    <th class="pb-2">Date</th>
+                                    <th class="pb-2">Pair</th>
+                                    <th class="pb-2">Type</th>
+                                    <th class="pb-2">Side</th>
+                                    <th class="pb-2">Price</th>
+                                    <th class="pb-2">Amount</th>
+                                    <th class="pb-2">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-gray-700 hover:bg-gray-700">
+                                    <td class="py-3">2023-06-15 14:32</td>
+                                    <td>BTC/USDT</td>
+                                    <td>Limit</td>
+                                    <td class="text-green-400">Buy</td>
+                                    <td>25,432.12</td>
+                                    <td>0.05</td>
+                                    <td class="text-blue-400">Filled</td>
+                                </tr>
+                                <tr class="border-b border-gray-700 hover:bg-gray-700">
+                                    <td class="py-3">2023-06-15 09:47</td>
+                                    <td>ETH/USDT</td>
+                                    <td>Market</td>
+                                    <td class="text-red-400">Sell</td>
+                                    <td>1,832.45</td>
+                                    <td>1.2</td>
+                                    <td class="text-blue-400">Filled</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Right Sidebar -->
+        <div class="w-full lg:w-80 flex-shrink-0">
+            <div class="bg-gray-800 rounded-lg shadow-xl overflow-hidden">
+                <!-- Order Form -->
+                <div class="p-4 border-b border-gray-700">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="font-bold text-lg">New Order</h3>
+                        <div class="flex gap-1">
+                            <button class="px-2 py-1 bg-blue-600 rounded-md text-xs font-medium">Limit</button>
+                            <button class="px-2 py-1 bg-gray-700 rounded-md text-xs font-medium hover:bg-gray-600">Market</button>
+                            <button class="px-2 py-1 bg-gray-700 rounded-md text-xs font-medium hover:bg-gray-600">Stop</button>
+                        </div>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-1">Amount</label>
+                            <div class="relative">
+                                <input type="number" class="w-full bg-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="0.00">
+                                <div class="absolute right-3 top-2 text-xs text-gray-400">BTC</div>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <label class="block text-sm text-gray-400 mb-1">Price</label>
+                            <input type="number" class="w-full bg-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="0.00">
+                        </div>
+                        
+                        <div class="grid grid-cols-2 gap-2">
+                            <button class="py-2 bg-green-600 rounded-md font-medium hover:bg-green-700">Buy</button>
+                            <button class="py-2 bg-red-600 rounded-md font-medium hover:bg-red-700">Sell</button>
+                        </div>
+                        
+                        <div class="pt-2 border-t border-gray-700">
+                            <div class="flex justify-between text-sm text-gray-400">
+                                <span>Available:</span>
+                                <span>5,432.12 USDT</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Market Data -->
+                <div class="p-4">
+                    <h3 class="font-bold text-lg mb-3">Market Data</h3>
+                    <div class="space-y-3">
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">Price</span>
+                            <span class="font-medium">25,432.12</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">24h Change</span>
+                            <span class="text-green-400">+2.34%</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">24h High</span>
+                            <span>25,678.90</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">24h Low</span>
+                            <span>24,543.21</span>
+                        </div>
+                        <div class="flex justify-between">
+                            <span class="text-gray-400">24h Volume</span>
+                            <span>1,234.56 BTC</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Open Positions -->
+            <div class="mt-4 bg-gray-800 rounded-lg shadow-xl overflow-hidden">
+                <div class="p-4 border-b border-gray-700">
+                    <h3 class="font-bold text-lg">Open Positions</h3>
+                </div>
+                <div class="p-4">
+                    <div class="space-y-4">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <div class="font-medium">BTC/USDT</div>
+                                <div class="text-sm text-gray-400">Long 0.05 BTC</div>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-green-400 font-medium">+$124.32 (+2.1%)</div>
+                                <div class="text-sm text-gray-400">25,432.12</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Initialize TradingView widget
+        new TradingView.widget({
+            "autosize": true,
+            "symbol": "BINANCE:BTCUSDT",
+            "interval": "15",
+            "timezone": "Etc/UTC",
+            "theme": "dark",
+            "style": "1",
+            "locale": "en",
+            "toolbar_bg": "#1e293b",
+            "enable_publishing": false,
+            "hide_top_toolbar": false,
+            "hide_side_toolbar": false,
+            "allow_symbol_change": true,
+            "container_id": "tradingview-chart"
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,44 @@
+// Trading interface functionality
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize tooltips
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltipTriggerList.forEach(tooltipTriggerEl => {
+        new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Tab functionality
+    const tabs = document.querySelectorAll('[data-tab-target]');
+    tabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const target = document.querySelector(tab.dataset.tabTarget);
+            document.querySelectorAll('[data-tab-content]').forEach(tabContent => {
+                tabContent.classList.add('hidden');
+            });
+            target.classList.remove('hidden');
+        });
+    });
+
+    // Order form validation
+    const orderForm = document.querySelector('#order-form');
+    if (orderForm) {
+        orderForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            // Validate and submit order
+        });
+    }
+});
+
+// Utility functions
+function formatPrice(price) {
+    return parseFloat(price).toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    });
+}
+
+function formatAmount(amount) {
+    return parseFloat(amount).toLocaleString('en-US', {
+        minimumFractionDigits: 4,
+        maximumFractionDigits: 4
+    });
+}

style.css

@@ -1,28 +1,59 @@
+/* Custom styles for trading interface */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #1e293b;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #334155;
+    border-radius: 4px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #475569;
 }
+
+/* TradingView chart container */
+#tradingview-chart {
+    min-height: 500px;
+}
+
+/* Custom table styling */
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+th {
+    font-weight: 500;
+    font-size: 0.875rem;
+}
+
+td {
+    font-size: 0.875rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+}
+
+/* Input number arrows */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}