Hugging Face's logo

Spaces:
Davidpascal
/
first-project
Running

App Files Community
first-project / index.html
Davidpascal's picture
Davidpascal
<!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 --> <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> <!-- Hero Section --> <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> <!-- Dashboard 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"> <!-- Portfolio Overview --> <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> <!-- Watchlist --> <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> <!-- Market News --> <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> <!-- Trade 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 --> <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> <!-- JavaScript --> <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
c4e5937 verified
raw
history blame contribute delete
43.2 kB
 <!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>