Spaces:

Davidpascal
/

first-project

Running

App Files Files Community

Davidpascal commited on Jun 21, 2025

Commit

c4e5937

verified ·

1 Parent(s): 4ebf70a

<!DOCTYPE html> <html lang="en"> <head> <title>TradePulse: Online Brokerage</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta charset="utf-8" /> <meta name="description" content="Trade stocks, ETFs, and crypto with TradePulse's online brokerage platform" /> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.min.js"></script> <style> input:focus { outline: 2px solid #1d4ed8; } .error { border-color: #ef4444; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-in; } .autocomplete-suggestions { position: absolute; background: white; border: 1px solid #d1d5db; max-height: 150px; overflow-y: auto; width: 100%; z-index: 10; } .autocomplete-suggestions div { padding: 8px; cursor: pointer; } .autocomplete-suggestions div:hover { background: #f3f4f6; } </style> </head> <body class="flex flex-col min-h-screen bg-gray-100 font-sans transition-colors duration-300" id="theme-body">  <header class="bg-blue-800 text-white py-4 shadow-md"> <div class="container mx-auto px-6 flex justify-between items-center"> <h1 class="text-xl font-bold">TradePulse</h1> <nav class="flex items-center space-x-4"> <a href="#home" class="hover:underline">Home</a> <a href="#dashboard" class="hover:underline">Dashboard</a> <a href="#trade" class="hover:underline">Trade</a> <button id="theme-toggle" class="bg-blue-600 px-4 py-2 rounded-md hover:bg-blue-700">Dark Mode</button> <button class="bg-blue-600 px-4 py-2 rounded-md hover:bg-blue-700">Login</button> </nav> </div> </header>  <section id="home" class="bg-blue-50 py-12 text-center"> <div class="container mx-auto px-6"> <span class="text-xs rounded-full mb-2 inline-block px-2 py-1 border border-blue-500/15 bg-blue-500/15 text-blue-500">🔥 Start Investing Today</span> <h2 class="text-3xl lg:text-5xl font-bold text-gray-800"> <span class="text-xl lg:text-3xl text-gray-400 block font-medium">Your Wealth, Your Way,</span> Trade with TradePulse. </h2> <p class="mt-4 text-gray-600 max-w-2xl mx-auto">Buy and sell stocks, ETFs, and cryptocurrencies with zero commissions and real-time insights.</p> <button onclick="alert('Please verify your identity to start trading.')" class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700">Get Started</button> </div> <img src="https://enzostvs-deepsite.hf.space/arrow.svg" alt="Decorative arrow" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" /> </section>  <section id="dashboard" class="py-12 bg-white"> <div class="container mx-auto px-6"> <h3 class="text-2xl font-bold text-gray-800 text-center">Your Dashboard</h3> <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">  <div class="bg-gray-50 p-6 rounded-lg shadow-md"> <h4 class="text-lg font-semibold text-gray-700">Portfolio Value</h4> <p class="text-3xl font-bold text-blue-600 mt-2">$12,345.67</p> <p class="text-sm text-gray-500">+2.3% ($280.45) today</p> <canvas id="portfolio-chart" class="mt-4" aria-label="Portfolio allocation chart"></canvas> </div>  <div class="bg-gray-50 p-6 rounded-lg shadow-md"> <h4 class="text-lg font-semibold text-gray-700">Watchlist</h4> <ul class="mt-4 space-y-2"> <li class="flex justify-between text-sm"> <span>Apple (AAPL)</span> <span class="text-blue-600">+1.2% ($235.40)</span> </li> <li class="flex justify-between text-sm"> <span>Tesla (TSLA)</span> <span class="text-red-600">-0.8% ($420.15)</span> </li> <li class="flex justify-between text-sm"> <span>Bitcoin (BTC)</span> <span class="text-blue-600">+3.5% ($65,200.00)</span> </li> </ul> </div>  <div class="bg-gray-50 p-6 rounded-lg shadow-md"> <h4 class="text-lg font-semibold text-gray-700">Market News</h4> <ul class="mt-4 space-y-2 text-sm text-gray-600"> <li>Tech stocks rally as AI demand surges.</li> <li>Fed signals steady interest rates for 2025.</li> <li>Bitcoin hits new high amid ETF approvals.</li> </ul> </div> </div> <p class="mt-4 text-center text-sm text-gray-500">Available Cash: <span class="font-medium">$5,000.00</span></p> </div> </section>  <section id="trade" class="py-12 bg-gray-100"> <div class="container mx-auto px-6"> <h3 class="text-2xl font-bold text-gray-800 text-center">Trade Assets</h3> <form id="trade-form" class="mt-6 max-w-md mx-auto bg-white p-6 rounded-lg shadow-md relative" novalidate> <div class="mb-4"> <label for="asset-search" class="block text-sm font-medium text-gray-700">Search Asset <span title="Enter stock or crypto ticker" class="text-blue-500 cursor-help">ℹ️</span></label> <input id="asset-search" type="text" placeholder="e.g., AAPL, Bitcoin" class="w-full p-2 border border-gray-300 rounded-md" aria-describedby="asset-error" autocomplete="off" /> <div id="autocomplete-suggestions" class="autocomplete-suggestions hidden"></div> <p id="asset-error" class="text-sm text-red-500 hidden"></p> </div> <div class="mb-4"> <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity</label> <input id="quantity" type="number" step="1" min="1" placeholder="e.g., 10" class="w-full p-2 border border-gray-300 rounded-md" aria-describedby="quantity-error" required /> <p id="quantity-error" class="text-sm text-red-500 hidden"></p> </div> <div class="mb-4"> <label for="order-type" class="block text-sm font-medium text-gray-700">Order Type</label> <select id="order-type" class="w-full p-2 border border-gray-300 rounded-md"> <option value="buy">Buy</option> <option value="sell">Sell</option> </select> </div> <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500" > Place Order </button> </form> <p id="trade-result" class="mt-4 text-center text-lg text-gray-700 fade-in" role="alert"></p> </div> </section>  <footer class="bg-blue-800 text-white py-4 mt-auto"> <div class="container mx-auto px-6 text-center"> <p class="text-sm">TradePulse is a demo brokerage platform for educational purposes. Investing involves risks, including loss of principal. Consult a financial advisor.</p> <p class="text-sm mt-2">© 2025 TradePulse. All rights reserved.</p> </div> </footer>  <scriptPILOTscript> // DOM Elements const tradeForm = document.getElementById('trade-form'); const inputs = { asset: document.getElementById('asset-search'), quantity: document.getElementById('quantity'), }; const errors = { asset: document.getElementById('asset-error'), quantity: document.getElementById('quantity-error'), }; const orderType = document.getElementById('order-type'); const tradeResult = document.getElementById('trade-result'); const suggestions = document.getElementById('autocomplete-suggestions'); const themeToggle body = document.getElementById('theme-body'); const themeToggle = document.getElementById('theme-toggle'); let chartInstance = null; // Mock asset data const assets = [ { ticker: 'aapl', name: 'Apple', price: 235.4 }, { ticker: 'tsla', name: 'Tesla', price: 420.15 }, { ticker: 'btc', name: 'Bitcoin', price: 65200.0 }, { ticker: 'spy', name: 'SPDR S&P 500 ETF', price: 550.2 }, ]; // Input validation function validateInput(id, value) { if (id === 'asset') { const asset = value.toLowerCase().trim(); return !asset || !assets.some(a => a.ticker === asset) ? 'Please enter a valid asset (e.g., AAPL, TSLA, BTC, SPY).' : ''; } if (!value || value <= 0) { return 'Please enter a positive number.'; } return ''; } // Update error display function updateError(id, message) { errors[id].textContent = message; errors[id].classList.toggle('hidden', !message); inputs[id].classList.toggle('error', !!message); } // Simulate trade function simulateTrade(asset, quantity, type) { try { const assetData = assets.find(a => a.ticker === asset.toLowerCase()); if (!assetData) throw new Error('Unknown asset.'); const total = (assetData.price * quantity).toFixed(2); return `Order placed: ${type.toUpperCase()} ${quantity} ${assetData.name} (${asset.toUpperCase()}) for $${total}`; } catch (error) { console.error('Trade error:', error); return null; } } // Autocomplete suggestions function showSuggestions(value) { suggestions.innerHTML = ''; if (!value) { suggestions.classList.add('hidden'); return; } const matches = assets.filter(a => a.ticker.includes(value.toLowerCase()) || a.name.toLowerCase().includes(value.toLowerCase())); if (matches.length === 0) { suggestions.classList.add('hidden'); return; } matches.forEach(asset => { const div = document.createElement('div'); div.textContent = `${asset.name} (${asset.ticker.toUpperCase()})`; div.onclick = () => { inputs.asset.value = asset.ticker; suggestions.classList.add('hidden'); updateError('asset', validateInput('asset', asset.ticker)); }; suggestions.appendChild(div); }); suggestions.classList.remove('hidden'); } // Render portfolio chart function renderPortfolioChart() { if (chartInstance) chartInstance.destroy(); new Chart(document.getElementById('portfolio-chart'), { type: 'pie', data: { labels: ['Stocks', 'ETFs', 'Crypto'], datasets: [{ data: [8500, 3200, 645.67], backgroundColor: ['#1d4ed8', '#3b82f6', '#93c5fd'], }], }, options: { responsive: true, plugins: { legend: { position: 'bottom' } }, }, }); } // Theme toggle let isDark = localStorage.getItem('theme') === 'dark'; function updateTheme() { body.classList.toggle('dark', isDark); body.classList.toggle('bg-gray-100', !isDark); body.classList.toggle('bg-gray-900', isDark); themeToggle.textContent = isDark ? 'Light Mode' : 'Dark Mode'; localStorage.setItem('theme', isDark ? 'dark' : 'light'); } updateTheme(); themeToggle.addEventListener('click', () => { isDark = !isDark; updateTheme(); }); // Form submission tradeForm.addEventListener('submit', (event) => { event.preventDefault(); const asset = inputs.asset.value; const quantity = parseFloat(inputs.quantity.value); const type = orderType.value; const assetError = validateInput('asset', asset); const quantityError = validateInput('quantity', quantity); updateError('asset', assetError); updateError('quantity', quantityError); if (!assetError && !quantityError) { const result = simulateTrade(asset, quantity, type); if (result) { tradeResult.textContent = result; tradeResult.classList.add('text-gray-700', 'fade-in'); suggestions.classList.add('hidden'); } else { tradeResult.textContent = 'Error placing order. Please try again.'; tradeResult.classList.add('text-red-500'); } } else { tradeResult.textContent = ''; } }); // Real-time validation and autocomplete const debounce = (fn, delay) => { let timeout; return (...args) => { clearTimeout(timeout); timeout = setTimeout(() => fn(...args), delay); }; }; inputs.asset.addEventListener('input', debounce(() => { const value = inputs.asset.value; updateError('asset', validateInput('asset', value)); showSuggestions(value); }, 300)); inputs.quantity.addEventListener('input', debounce(() => { const value = parseFloat(inputs.quantity.value); updateError('quantity', validateInput('quantity', value)); }, 300)); // Initialize chart renderPortfolioChart(); </script> </body> </html> - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: First Project
-emoji: 💻
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: first-project
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 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,950 @@
-<!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>
+    <title>TradePulse: Online Brokerage</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="utf-8" />
+    <meta name="description" content="Trade stocks, ETFs, and crypto with TradePulse's online brokerage platform" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <style>
+      input:focus {
+        outline: 2px solid #1d4ed8;
+      }
+      .error {
+        border-color: #ef4444;
+      }
+      @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .fade-in {
+        animation: fadeIn 0.5s ease-in;
+      }
+      .autocomplete-suggestions {
+        position: absolute;
+        background: white;
+        border: 1px solid #d1d5db;
+        max-height: 150px;
+        overflow-y: auto;
+        width: 100%;
+        z-index: 10;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      }
+      .autocomplete-suggestions div {
+        padding: 8px;
+        cursor: pointer;
+      }
+      .autocomplete-suggestions div:hover {
+        background: #f3f4f6;
+      }
+      .dark .autocomplete-suggestions {
+        background: #1f2937;
+        border-color: #374151;
+      }
+      .dark .autocomplete-suggestions div:hover {
+        background: #374151;
+      }
+      .glow {
+        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+      }
+      .price-up {
+        color: #10b981;
+      }
+      .price-down {
+        color: #ef4444;
+      }
+      .price-neutral {
+        color: #6b7280;
+      }
+      .ticker-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      }
+      .ticker-card {
+        transition: all 0.2s ease;
+      }
+      .blink {
+        animation: blink 1s step-end infinite;
+      }
+      @keyframes blink {
+        50% { opacity: 0.5; }
+      }
+    </style>
+  </head>
+  <body class="flex flex-col min-h-screen bg-gray-100 font-sans transition-colors duration-300 dark:bg-gray-900" id="theme-body">
+    <!-- Header -->
+    <header class="bg-blue-800 text-white py-4 shadow-md dark:bg-gray-800">
+      <div class="container mx-auto px-4 sm:px-6 flex justify-between items-center">
+        <div class="flex items-center space-x-2">
+          <i class="fas fa-chart-line text-xl"></i>
+          <h1 class="text-xl font-bold">TradePulse</h1>
+        </div>
+        <nav class="hidden md:flex items-center space-x-4">
+          <a href="#home" class="hover:underline flex items-center space-x-1">
+            <i class="fas fa-home"></i>
+            <span>Home</span>
+          </a>
+          <a href="#dashboard" class="hover:underline flex items-center space-x-1">
+            <i class="fas fa-tachometer-alt"></i>
+            <span>Dashboard</span>
+          </a>
+          <a href="#trade" class="hover:underline flex items-center space-x-1">
+            <i class="fas fa-exchange-alt"></i>
+            <span>Trade</span>
+          </a>
+          <button id="theme-toggle" class="bg-blue-600 px-4 py-2 rounded-md hover:bg-blue-700 flex items-center space-x-2 dark:bg-gray-700 dark:hover:bg-gray-600">
+            <i class="fas fa-moon"></i>
+            <span>Dark Mode</span>
+          </button>
+          <button class="bg-blue-600 px-4 py-2 rounded-md hover:bg-blue-700 flex items-center space-x-2 dark:bg-gray-700 dark:hover:bg-gray-600">
+            <i class="fas fa-sign-in-alt"></i>
+            <span>Login</span>
+          </button>
+        </nav>
+        <button id="mobile-menu-button" class="md:hidden text-xl">
+          <i class="fas fa-bars"></i>
+        </button>
+      </div>
+      <!-- Mobile menu -->
+      <div id="mobile-menu" class="hidden md:hidden bg-blue-900 dark:bg-gray-700">
+        <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
+          <a href="#home" class="hover:underline flex items-center space-x-2 py-1">
+            <i class="fas fa-home w-5"></i>
+            <span>Home</span>
+          </a>
+          <a href="#dashboard" class="hover:underline flex items-center space-x-2 py-1">
+            <i class="fas fa-tachometer-alt w-5"></i>
+            <span>Dashboard</span>
+          </a>
+          <a href="#trade" class="hover:underline flex items-center space-x-2 py-1">
+            <i class="fas fa-exchange-alt w-5"></i>
+            <span>Trade</span>
+          </a>
+          <button id="theme-toggle-mobile" class="w-full text-left hover:underline flex items-center space-x-2 py-1">
+            <i class="fas fa-moon w-5"></i>
+            <span>Dark Mode</span>
+          </button>
+          <button class="w-full text-left hover:underline flex items-center space-x-2 py-1">
+            <i class="fas fa-sign-in-alt w-5"></i>
+            <span>Login</span>
+          </button>
+        </div>
+      </div>
+    </header>
+    <!-- Hero Section -->
+    <section id="home" class="bg-gradient-to-r from-blue-50 to-blue-100 py-12 text-center dark:from-gray-800 dark:to-gray-700 relative overflow-hidden">
+      <div class="absolute inset-0 opacity-10 dark:opacity-5">
+        <div class="absolute top-0 left-0 w-full h-full bg-[url('https://enzostvs-deepsite.hf.space/grid.svg')]"></div>
+      </div>
+      <div class="container mx-auto px-6 relative z-10">
+        <span class="text-xs rounded-full mb-2 inline-block px-3 py-1 border border-blue-500/15 bg-blue-500/15 text-blue-500 dark:bg-blue-400/15 dark:text-blue-300">
+          <i class="fas fa-bolt mr-1"></i> Start Investing Today
+        </span>
+        <h2 class="text-3xl lg:text-5xl font-bold text-gray-800 dark:text-white">
+          <span class="text-xl lg:text-3xl text-gray-400 block font-medium dark:text-gray-300">Your Wealth, Your Way,</span>
+          Trade with <span class="text-blue-600 dark:text-blue-400">TradePulse</span>.
+        </h2>
+        <p class="mt-4 text-gray-600 max-w-2xl mx-auto dark:text-gray-300">
+          Buy and sell stocks, ETFs, and cryptocurrencies with zero commissions and real-time insights.
+        </p>
+        <button onclick="alert('Please verify your identity to start trading.')" class="mt-6 bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 glow transition-all duration-300 flex items-center mx-auto space-x-2">
+          <i class="fas fa-play"></i>
+          <span>Get Started</span>
+        </button>
+      </div>
+      <img
+        src="https://enzostvs-deepsite.hf.space/arrow.svg"
+        alt="Decorative arrow"
+        class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg] hidden md:block"
+      />
+    </section>
+    <!-- Market Tickers -->
+    <div class="bg-white dark:bg-gray-800 py-3 border-b border-gray-200 dark:border-gray-700 overflow-hidden">
+      <div class="container mx-auto px-4">
+        <div class="marquee">
+          <div class="marquee-content flex space-x-8">
+            <!-- Tickers will be added here by JavaScript -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Dashboard Section -->
+    <section id="dashboard" class="py-12 bg-white dark:bg-gray-900">
+      <div class="container mx-auto px-6">
+        <h3 class="text-2xl font-bold text-gray-800 dark:text-white text-center">
+          <i class="fas fa-tachometer-alt mr-2"></i>Your Dashboard
+        </h3>
+        <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <!-- Portfolio Overview -->
+          <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+            <div class="flex justify-between items-center">
+              <h4 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
+                <i class="fas fa-wallet mr-2"></i>Portfolio Value
+              </h4>
+              <span class="text-xs bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300 px-2 py-1 rounded-full">
+                <i class="fas fa-arrow-up mr-1"></i>2.3%
+              </span>
+            </div>
+            <p class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-2">$12,345.67</p>
+            <p class="text-sm text-gray-500 dark:text-gray-400">+$280.45 today</p>
+            <div class="mt-4 h-64">
+              <canvas id="portfolio-chart" class="w-full h-full" aria-label="Portfolio allocation chart"></canvas>
+            </div>
+            <div class="mt-4 flex justify-between text-sm">
+              <span class="text-gray-500 dark:text-gray-400">Available Cash</span>
+              <span class="font-medium text-gray-700 dark:text-gray-300">$5,000.00</span>
+            </div>
+          </div>
+          <!-- Watchlist -->
+          <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+            <div class="flex justify-between items-center">
+              <h4 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
+                <i class="fas fa-star mr-2"></i>Watchlist
+              </h4>
+              <button class="text-blue-600 dark:text-blue-400 text-sm">
+                <i class="fas fa-plus mr-1"></i>Add
+              </button>
+            </div>
+            <ul class="mt-4 space-y-3">
+              <li class="ticker-card bg-white dark:bg-gray-700 p-3 rounded-md flex justify-between items-center">
+                <div>
+                  <div class="font-medium text-gray-800 dark:text-gray-200">Apple</div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">AAPL</div>
+                </div>
+                <div class="text-right">
+                  <div class="font-medium text-gray-800 dark:text-gray-200">$235.40</div>
+                  <div class="text-xs price-up">
+                    <i class="fas fa-arrow-up mr-1"></i>1.2%
+                  </div>
+                </div>
+              </li>
+              <li class="ticker-card bg-white dark:bg-gray-700 p-3 rounded-md flex justify-between items-center">
+                <div>
+                  <div class="font-medium text-gray-800 dark:text-gray-200">Tesla</div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">TSLA</div>
+                </div>
+                <div class="text-right">
+                  <div class="font-medium text-gray-800 dark:text-gray-200">$420.15</div>
+                  <div class="text-xs price-down">
+                    <i class="fas fa-arrow-down mr-1"></i>0.8%
+                  </div>
+                </div>
+              </li>
+              <li class="ticker-card bg-white dark:bg-gray-700 p-3 rounded-md flex justify-between items-center">
+                <div>
+                  <div class="font-medium text-gray-800 dark:text-gray-200">Bitcoin</div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">BTC</div>
+                </div>
+                <div class="text-right">
+                  <div class="font-medium text-gray-800 dark:text-gray-200">$65,200.00</div>
+                  <div class="text-xs price-up">
+                    <i class="fas fa-arrow-up mr-1"></i>3.5%
+                  </div>
+                </div>
+              </li>
+              <li class="ticker-card bg-white dark:bg-gray-700 p-3 rounded-md flex justify-between items-center">
+                <div>
+                  <div class="font-medium text-gray-800 dark:text-gray-200">SPDR S&P 500</div>
+                  <div class="text-xs text-gray-500 dark:text-gray-400">SPY</div>
+                </div>
+                <div class="text-right">
+                  <div class="font-medium text-gray-800 dark:text-gray-200">$550.20</div>
+                  <div class="text-xs price-neutral">
+                    <i class="fas fa-minus mr-1"></i>0.0%
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!-- Market News -->
+          <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+            <h4 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
+              <i class="fas fa-newspaper mr-2"></i>Market News
+            </h4>
+            <ul class="mt-4 space-y-4">
+              <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
+                <h5 class="font-medium text-gray-800 dark:text-gray-200">Tech stocks rally as AI demand surges</h5>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Major tech companies report strong earnings driven by AI product demand...</p>
+                <span class="text-xs text-gray-500 dark:text-gray-500 mt-1 block">2 hours ago</span>
+              </li>
+              <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
+                <h5 class="font-medium text-gray-800 dark:text-gray-200">Fed signals steady interest rates for 2025</h5>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Federal Reserve indicates no rate cuts until inflation reaches 2% target...</p>
+                <span class="text-xs text-gray-500 dark:text-gray-500 mt-1 block">5 hours ago</span>
+              </li>
+              <li>
+                <h5 class="font-medium text-gray-800 dark:text-gray-200">Bitcoin hits new high amid ETF approvals</h5>
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Cryptocurrency markets surge as SEC approves additional Bitcoin ETFs...</p>
+                <span class="text-xs text-gray-500 dark:text-gray-500 mt-1 block">1 day ago</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Trade Section -->
+    <section id="trade" class="py-12 bg-gray-100 dark:bg-gray-800">
+      <div class="container mx-auto px-6">
+        <h3 class="text-2xl font-bold text-gray-800 dark:text-white text-center">
+          <i class="fas fa-exchange-alt mr-2"></i>Trade Assets
+        </h3>
+        <div class="mt-8 max-w-4xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <!-- Trade Form -->
+          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+            <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
+              <i class="fas fa-trade-alt mr-2"></i>Place Order
+            </h4>
+            <form id="trade-form" class="space-y-4" novalidate>
+              <div>
+                <label for="asset-search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Search Asset
+                  <span title="Enter stock or crypto ticker" class="text-blue-500 dark:text-blue-400 cursor-help ml-1">
+                    <i class="fas fa-info-circle"></i>
+                  </span>
+                </label>
+                <div class="relative mt-1">
+                  <input
+                    id="asset-search"
+                    type="text"
+                    placeholder="e.g., AAPL, Bitcoin"
+                    class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-600 dark:text-white"
+                    aria-describedby="asset-error"
+                    autocomplete="off"
+                  />
+                  <div id="autocomplete-suggestions" class="autocomplete-suggestions hidden"></div>
+                </div>
+                <p id="asset-error" class="mt-1 text-sm text-red-500 dark:text-red-400 hidden"></p>
+              </div>
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Quantity</label>
+                  <input
+                    id="quantity"
+                    type="number"
+                    step="1"
+                    min="1"
+                    placeholder="e.g., 10"
+                    class="w-full p-3 mt-1 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-600 dark:text-white"
+                    aria-describedby="quantity-error"
+                    required
+                  />
+                  <p id="quantity-error" class="mt-1 text-sm text-red-500 dark:text-red-400 hidden"></p>
+                </div>
+                <div>
+                  <label for="order-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Order Type</label>
+                  <select id="order-type" class="w-full p-3 mt-1 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-600 dark:text-white">
+                    <option value="buy">Buy</option>
+                    <option value="sell">Sell</option>
+                  </select>
+                </div>
+              </div>
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Price Type</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <button type="button" class="order-price-type bg-blue-600 text-white px-4 py-2 rounded-l-md dark:bg-blue-700" data-type="market">
+                      Market
+                    </button>
+                    <button type="button" class="order-price-type bg-gray-200 px-4 py-2 rounded-r-md dark:bg-gray-600 dark:text-gray-300" data-type="limit">
+                      Limit
+                    </button>
+                  </div>
+                </div>
+                <div id="limit-price-container" class="hidden">
+                  <label for="limit-price" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Limit Price</label>
+                  <input
+                    id="limit-price"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    placeholder="e.g., 235.50"
+                    class="w-full p-3 mt-1 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-600 dark:text-white"
+                  />
+                </div>
+              </div>
+              <div class="pt-2">
+                <button
+                  type="submit"
+                  class="w-full bg-blue-600 text-white p-3 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800 transition-colors"
+                >
+                  <i class="fas fa-paper-plane mr-2"></i>Place Order
+                </button>
+              </div>
+            </form>
+            <p id="trade-result" class="mt-4 text-center text-lg text-gray-700 dark:text-gray-300 fade-in" role="alert"></p>
+          </div>
+          <!-- Order Preview -->
+          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
+            <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
+              <i class="fas fa-eye mr-2"></i>Order Preview
+            </h4>
+            <div id="order-preview" class="bg-gray-50 dark:bg-gray-600 rounded-lg p-4">
+              <div class="text-center text-gray-500 dark:text-gray-400 py-8">
+                <i class="fas fa-search-dollar text-3xl mb-2"></i>
+                <p>Search for an asset to see order details</p>
+              </div>
+              <div id="preview-details" class="hidden space-y-4">
+                <div class="flex justify-between">
+                  <span class="text-gray-600 dark:text-gray-300">Asset:</span>
+                  <span id="preview-asset" class="font-medium text-gray-800 dark:text-white"></span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600 dark:text-gray-300">Action:</span>
+                  <span id="preview-action" class="font-medium"></span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600 dark:text-gray-300">Price Type:</span>
+                  <span id="preview-price-type" class="font-medium"></span>
+                </div>
+                <div id="preview-limit-price-container" class="flex justify-between hidden">
+                  <span class="text-gray-600 dark:text-gray-300">Limit Price:</span>
+                  <span id="preview-limit-price" class="font-medium"></span>
+                </div>
+                <div class="flex justify-between">
+                  <span class="text-gray-600 dark:text-gray-300">Quantity:</span>
+                  <span id="preview-quantity" class="font-medium text-gray-800 dark:text-white"></span>
+                </div>
+                <div class="border-t border-gray-200 dark:border-gray-600 pt-2 mt-2">
+                  <div class="flex justify-between">
+                    <span class="text-gray-600 dark:text-gray-300">Estimated Cost:</span>
+                    <span id="preview-cost" class="font-bold text-lg text-gray-800 dark:text-white"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-12 bg-blue-50 dark:bg-gray-800">
+      <div class="container mx-auto px-6">
+        <h3 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-8">
+          <i class="fas fa-star mr-2"></i>Why Choose TradePulse?
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
+            <div class="text-blue-600 dark:text-blue-400 text-4xl mb-4">
+              <i class="fas fa-dollar-sign"></i>
+            </div>
+            <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Zero Commissions</h4>
+            <p class="text-gray-600 dark:text-gray-300">
+              Trade stocks, ETFs, and options with no commission fees. Keep more of your profits.
+            </p>
+          </div>
+          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
+            <div class="text-blue-600 dark:text-blue-400 text-4xl mb-4">
+              <i class="fas fa-bolt"></i>
+            </div>
+            <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Real-Time Data</h4>
+            <p class="text-gray-600 dark:text-gray-300">
+              Get real-time market data and lightning-fast execution on all your trades.
+            </p>
+          </div>
+          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow text-center">
+            <div class="text-blue-600 dark:text-blue-400 text-4xl mb-4">
+              <i class="fas fa-lock"></i>
+            </div>
+            <h4 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Secure Platform</h4>
+            <p class="text-gray-600 dark:text-gray-300">
+              Bank-level security and encryption to protect your account and personal information.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-blue-800 dark:bg-gray-800 text-white py-8 mt-auto">
+      <div class="container mx-auto px-6">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div>
+            <h5 class="text-lg font-semibold mb-4 flex items-center">
+              <i class="fas fa-chart-line mr-2"></i> TradePulse
+            </h5>
+            <p class="text-sm text-blue-200 dark:text-gray-300">
+              Empowering investors with powerful tools and zero-commission trading.
+            </p>
+          </div>
+          <div>
+            <h5 class="text-lg font-semibold mb-4">Trading</h5>
+            <ul class="space-y-2 text-sm text-blue-200 dark:text-gray-300">
+              <li><a href="#" class="hover:underline">Stocks</a></li>
+              <li><a href="#" class="hover:underline">ETFs</a></li>
+              <li><a href="#" class="hover:underline">Options</a></li>
+              <li><a href="#" class="hover:underline">Crypto</a></li>
+            </ul>
+          </div>
+          <div>
+            <h5 class="text-lg font-semibold mb-4">Resources</h5>
+            <ul class="space-y-2 text-sm text-blue-200 dark:text-gray-300">
+              <li><a href="#" class="hover:underline">Learning Center</a></li>
+              <li><a href="#" class="hover:underline">Market Research</a></li>
+              <li><a href="#" class="hover:underline">Investment Tools</a></li>
+              <li><a href="#" class="hover:underline">API</a></li>
+            </ul>
+          </div>
+          <div>
+            <h5 class="text-lg font-semibold mb-4">Company</h5>
+            <ul class="space-y-2 text-sm text-blue-200 dark:text-gray-300">
+              <li><a href="#" class="hover:underline">About Us</a></li>
+              <li><a href="#" class="hover:underline">Careers</a></li>
+              <li><a href="#" class="hover:underline">Contact</a></li>
+              <li><a href="#" class="hover:underline">Legal</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="border-t border-blue-700 dark:border-gray-700 mt-8 pt-6 text-center">
+          <p class="text-sm text-blue-200 dark:text-gray-300">
+            TradePulse is a demo brokerage platform for educational purposes. Investing involves risks, including loss of principal. Consult a financial advisor.
+          </p>
+          <p class="text-sm mt-2 text-blue-200 dark:text-gray-300">
+            © 2025 TradePulse. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+    <!-- JavaScript -->
+    <script>
+      // DOM Elements
+      const tradeForm = document.getElementById('trade-form');
+      const inputs = {
+        asset: document.getElementById('asset-search'),
+        quantity: document.getElementById('quantity'),
+        limitPrice: document.getElementById('limit-price')
+      };
+      const errors = {
+        asset: document.getElementById('asset-error'),
+        quantity: document.getElementById('quantity-error')
+      };
+      const orderType = document.getElementById('order-type');
+      const tradeResult = document.getElementById('trade-result');
+      const suggestions = document.getElementById('autocomplete-suggestions');
+      const themeBody = document.getElementById('theme-body');
+      const themeToggle = document.getElementById('theme-toggle');
+      const themeToggleMobile = document.getElementById('theme-toggle-mobile');
+      const mobileMenuButton = document.getElementById('mobile-menu-button');
+      const mobileMenu = document.getElementById('mobile-menu');
+      const priceTypeButtons = document.querySelectorAll('.order-price-type');
+      const limitPriceContainer = document.getElementById('limit-price-container');
+      const previewDetails = document.getElementById('preview-details');
+      const previewAsset = document.getElementById('preview-asset');
+      const previewAction = document.getElementById('preview-action');
+      const previewPriceType = document.getElementById('preview-price-type');
+      const previewLimitPrice = document.getElementById('preview-limit-price');
+      const previewLimitPriceContainer = document.getElementById('preview-limit-price-container');
+      const previewQuantity = document.getElementById('preview-quantity');
+      const previewCost = document.getElementById('preview-cost');
+      const marqueeContent = document.querySelector('.marquee-content');
+      let chartInstance = null;
+      let currentPriceType = 'market';
+      let isDark = localStorage.getItem('theme') === 'dark';
+      // Mock asset data
+      const assets = [
+        { ticker: 'aapl', name: 'Apple', price: 235.4, change: 1.2 },
+        { ticker: 'tsla', name: 'Tesla', price: 420.15, change: -0.8 },
+        { ticker: 'btc', name: 'Bitcoin', price: 65200.0, change: 3.5 },
+        { ticker: 'spy', name: 'SPDR S&P 500 ETF', price: 550.2, change: 0.0 },
+        { ticker: 'msft', name: 'Microsoft', price: 420.5, change: 0.7 },
+        { ticker: 'amzn', name: 'Amazon', price: 185.75, change: -1.2 },
+        { ticker: 'googl', name: 'Alphabet', price: 175.3, change: 0.5 },
+        { ticker: 'eth', name: 'Ethereum', price: 3500.0, change: 2.1 }
+      ];
+      // Market tickers data
+      const marketTickers = [
+        { symbol: '^GSPC', name: 'S&P 500', price: 5502.34, change: 0.23 },
+        { symbol: '^DJI', name: 'Dow 30', price: 39231.23, change: -0.12 },
+        { symbol: '^IXIC', name: 'Nasdaq', price: 16382.34, change: 0.45 },
+        { symbol: '^RUT', name: 'Russell 2000', price: 2034.56, change: -0.34 },
+        { symbol: 'CL=F', name: 'Crude Oil', price: 78.45, change: 1.23 },
+        { symbol: 'GC=F', name: 'Gold', price: 2345.67, change: 0.56 },
+        { symbol: 'EURUSD=X', name: 'EUR/USD', price: 1.0823, change: -0.12 },
+        { symbol: 'BTC-USD', name: 'Bitcoin', price: 65200.0, change: 3.45 }
+      ];
+      // Initialize marquee with market tickers
+      function initMarquee() {
+        marketTickers.forEach(ticker => {
+          const changeClass = ticker.change > 0 ? 'price-up' : ticker.change < 0 ? 'price-down' : 'price-neutral';
+          const changeIcon = ticker.change > 0 ? 'fa-arrow-up' : ticker.change < 0 ? 'fa-arrow-down' : 'fa-minus';
+          const tickerElement = document.createElement('div');
+          tickerElement.className = 'flex items-center whitespace-nowrap';
+          tickerElement.innerHTML = `
+            <span class="font-medium mr-1">${ticker.symbol}</span>
+            <span class="mr-2">${ticker.price.toFixed(2)}</span>
+            <span class="${changeClass}">
+              <i class="fas ${changeIcon} mr-1"></i>${Math.abs(ticker.change)}%
+            </span>
+          `;
+          marqueeContent.appendChild(tickerElement);
+        });
+        // Clone content for seamless looping
+        const clone = marqueeContent.cloneNode(true);
+        marqueeContent.parentNode.appendChild(clone);
+      }
+      // Input validation
+      function validateInput(id, value) {
+        if (id === 'asset') {
+          const asset = value.toLowerCase().trim();
+          return !asset || !assets.some(a => a.ticker === asset) ? 'Please enter a valid asset (e.g., AAPL, TSLA, BTC, SPY).' : '';
+        }
+        if (!value || value <= 0) {
+          return 'Please enter a positive number.';
+        }
+        return '';
+      }
+      // Update error display
+      function updateError(id, message) {
+        errors[id].textContent = message;
+        errors[id].classList.toggle('hidden', !message);
+        inputs[id].classList.toggle('error', !!message);
+      }
+      // Simulate trade
+      function simulateTrade(asset, quantity, type, priceType, limitPrice) {
+        try {
+          const assetData = assets.find(a => a.ticker === asset.toLowerCase());
+          if (!assetData) throw new Error('Unknown asset.');
+          let price = assetData.price;
+          let priceNote = '';
+          if (priceType === 'limit') {
+            if (limitPrice) {
+              priceNote = ` at limit price $${limitPrice}`;
+              price = parseFloat(limitPrice);
+            } else {
+              throw new Error('Limit price required for limit orders.');
+            }
+          }
+          const total = (price * quantity).toFixed(2);
+          return `Order placed: ${type.toUpperCase()} ${quantity} ${assetData.name} (${asset.toUpperCase()})${priceNote} for $${total}`;
+        } catch (error) {
+          console.error('Trade error:', error);
+          return null;
+        }
+      }
+      // Update order preview
+      function updateOrderPreview() {
+        const asset = inputs.asset.value.trim();
+        const quantity = parseFloat(inputs.quantity.value);
+        const type = orderType.value;
+        const assetData = assets.find(a => a.ticker === asset.toLowerCase());
+        if (!asset || !assetData || isNaN(quantity) || quantity <= 0) {
+          previewDetails.classList.add('hidden');
+          return;
+        }
+        previewDetails.classList.remove('hidden');
+        previewAsset.textContent = `${assetData.name} (${asset.toUpperCase()})`;
+        previewAction.textContent = type === 'buy' ? 'Buy' : 'Sell';
+        previewAction.className = type === 'buy' ? 'font-medium price-up' : 'font-medium price-down';
+        previewPriceType.textContent = currentPriceType === 'market' ? 'Market' : 'Limit';
+        if (currentPriceType === 'limit' && inputs.limitPrice.value) {
+          previewLimitPrice.textContent = `$${parseFloat(inputs.limitPrice.value).toFixed(2)}`;
+          previewLimitPriceContainer.classList.remove('hidden');
+        } else {
+          previewLimitPriceContainer.classList.add('hidden');
+        }
+        previewQuantity.textContent = quantity;
+        let price = assetData.price;
+        if (currentPriceType === 'limit' && inputs.limitPrice.value) {
+          price = parseFloat(inputs.limitPrice.value);
+        }
+        const total = (price * quantity).toFixed(2);
+        previewCost.textContent = `$${total}`;
+      }
+      // Autocomplete suggestions
+      function showSuggestions(value) {
+        suggestions.innerHTML = '';
+        if (!value) {
+          suggestions.classList.add('hidden');
+          return;
+        }
+        const matches = assets.filter(a =>
+          a.ticker.includes(value.toLowerCase()) ||
+          a.name.toLowerCase().includes(value.toLowerCase())
+        );
+        if (matches.length === 0) {
+          suggestions.classList.add('hidden');
+          return;
+        }
+        matches.forEach(asset => {
+          const div = document.createElement('div');
+          div.className = 'flex justify-between items-center';
+          div.innerHTML = `
+            <div>
+              <div class="font-medium">${asset.name}</div>
+              <div class="text-xs text-gray-500">${asset.ticker.toUpperCase()}</div>
+            </div>
+            <div class="text-right">
+              <div class="font-medium">$${asset.price.toFixed(2)}</div>
+              <div class="text-xs ${asset.change > 0 ? 'price-up' : asset.change < 0 ? 'price-down' : 'price-neutral'}">
+                <i class="fas ${asset.change > 0 ? 'fa-arrow-up' : asset.change < 0 ? 'fa-arrow-down' : 'fa-minus'} mr-1"></i>
+                ${Math.abs(asset.change)}%
+              </div>
+            </div>
+          `;
+          div.onclick = () => {
+            inputs.asset.value = asset.ticker;
+            suggestions.classList.add('hidden');
+            updateError('asset', validateInput('asset', asset.ticker));
+            updateOrderPreview();
+          };
+          suggestions.appendChild(div);
+        });
+        suggestions.classList.remove('hidden');
+      }
+      // Handle price type selection
+      function handlePriceTypeSelection(type) {
+        currentPriceType = type;
+        priceTypeButtons.forEach(btn => {
+          if (btn.dataset.type === type) {
+            btn.classList.remove('bg-gray-200', 'dark:bg-gray-600', 'dark:text-gray-300');
+            btn.classList.add('bg-blue-600', 'text-white', 'dark:bg-blue-700');
+          } else {
+            btn.classList.remove('bg-blue-600', 'text-white', 'dark:bg-blue-700');
+            btn.classList.add('bg-gray-200', 'dark:bg-gray-600', 'dark:text-gray-300');
+          }
+        });
+        if (type === 'limit') {
+          limitPriceContainer.classList.remove('hidden');
+          previewLimitPriceContainer.classList.remove('hidden');
+        } else {
+          limitPriceContainer.classList.add('hidden');
+          previewLimitPriceContainer.classList.add('hidden');
+        }
+        updateOrderPreview();
+      }
+      // Render portfolio chart
+      function renderPortfolioChart() {
+        if (chartInstance) chartInstance.destroy();
+        const ctx = document.getElementById('portfolio-chart').getContext('2d');
+        chartInstance = new Chart(ctx, {
+          type: 'doughnut',
+          data: {
+            labels: ['Stocks', 'ETFs', 'Crypto', 'Cash'],
+            datasets: [{
+              data: [6500, 3200, 645.67, 5000],
+              backgroundColor: [
+                '#1d4ed8',
+                '#3b82f6',
+                '#93c5fd',
+                '#dbeafe'
+              ],
+              borderWidth: 0
+            }]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                position: 'bottom',
+                labels: {
+                  color: isDark ? '#e5e7eb' : '#4b5563',
+                  font: {
+                    family: "'Inter', sans-serif"
+                  }
+                }
+              },
+              tooltip: {
+                callbacks: {
+                  label: function(context) {
+                    const label = context.label || '';
+                    const value = context.raw || 0;
+                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                    const percentage = Math.round((value / total) * 100);
+                    return `${label}: $${value.toLocaleString()} (${percentage}%)`;
+                  }
+                }
+              }
+            },
+            cutout: '70%'
+          }
+        });
+      }
+      // Theme toggle
+      function updateTheme() {
+        themeBody.classList.toggle('dark', isDark);
+        themeToggle.innerHTML = isDark
+          ? '<i class="fas fa-sun mr-2"></i><span>Light Mode</span>'
+          : '<i class="fas fa-moon mr-2"></i><span>Dark Mode</span>';
+        if (themeToggleMobile) {
+          themeToggleMobile.innerHTML = isDark
+            ? '<i class="fas fa-sun mr-2"></i><span>Light Mode</span>'
+            : '<i class="fas fa-moon mr-2"></i><span>Dark Mode</span>';
+        }
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        // Re-render chart with updated theme colors
+        if (chartInstance) {
+          chartInstance.options.plugins.legend.labels.color = isDark ? '#e5e7eb' : '#4b5563';
+          chartInstance.update();
+        }
+      }
+      // Initialize
+      function init() {
+        // Set initial theme
+        updateTheme();
+        // Initialize marquee
+        initMarquee();
+        // Render portfolio chart
+        renderPortfolioChart();
+        // Set default price type
+        handlePriceTypeSelection('market');
+        // Event listeners
+        themeToggle.addEventListener('click', () => {
+          isDark = !isDark;
+          updateTheme();
+        });
+        if (themeToggleMobile) {
+          themeToggleMobile.addEventListener('click', () => {
+            isDark = !isDark;
+            updateTheme();
+          });
+        }
+        mobileMenuButton.addEventListener('click', () => {
+          mobileMenu.classList.toggle('hidden');
+        });
+        priceTypeButtons.forEach(btn => {
+          btn.addEventListener('click', () => {
+            handlePriceTypeSelection(btn.dataset.type);
+          });
+        });
+        // Form submission
+        tradeForm.addEventListener('submit', (event) => {
+          event.preventDefault();
+          const asset = inputs.asset.value.trim();
+          const quantity = parseFloat(inputs.quantity.value);
+          const type = orderType.value;
+          const assetError = validateInput('asset', asset);
+          const quantityError = validateInput('quantity', quantity);
+          updateError('asset', assetError);
+          updateError('quantity', quantityError);
+          if (!assetError && !quantityError) {
+            const limitPrice = currentPriceType === 'limit' ? inputs.limitPrice.value : null;
+            const result = simulateTrade(asset, quantity, type, currentPriceType, limitPrice);
+            if (result) {
+              tradeResult.textContent = result;
+              tradeResult.classList.remove('text-red-500');
+              tradeResult.classList.add('text-gray-700', 'dark:text-gray-300', 'fade-in');
+              suggestions.classList.add('hidden');
+              // Reset form
+              setTimeout(() => {
+                tradeForm.reset();
+                tradeResult.textContent = '';
+                handlePriceTypeSelection('market');
+                updateOrderPreview();
+              }, 3000);
+            } else {
+              tradeResult.textContent = 'Error placing order. Please try again.';
+              tradeResult.classList.remove('text-gray-700', 'dark:text-gray-300');
+              tradeResult.classList.add('text-red-500');
+            }
+          } else {
+            tradeResult.textContent = '';
+          }
+        });
+        // Real-time validation and autocomplete
+        const debounce = (fn, delay) => {
+          let timeout;
+          return (...args) => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => fn(...args), delay);
+          };
+        };
+        inputs.asset.addEventListener('input', debounce(() => {
+          const value = inputs.asset.value;
+          updateError('asset', validateInput('asset', value));
+          showSuggestions(value);
+          updateOrderPreview();
+        }, 300));
+        inputs.quantity.addEventListener('input', debounce(() => {
+          const value = parseFloat(inputs.quantity.value);
+          updateError('quantity', validateInput('quantity', value));
+          updateOrderPreview();
+        }, 300));
+        inputs.limitPrice.addEventListener('input', debounce(() => {
+          updateOrderPreview();
+        }, 300));
+        orderType.addEventListener('change', () => {
+          updateOrderPreview();
+        });
+        // Close suggestions when clicking outside
+        document.addEventListener('click', (event) => {
+          if (!inputs.asset.contains(event.target) && !suggestions.contains(event.target)) {
+            suggestions.classList.add('hidden');
+          }
+        });
+      }
+      // Initialize when DOM is loaded
+      document.addEventListener('DOMContentLoaded', init);
+    </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=Davidpascal/first-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>