Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TradeTrack Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| secondary: '#10b981', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <i data-feather="trending-up" class="text-primary h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">TradeTrack Pro</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition"> | |
| <i data-feather="plus" class="mr-2"></i>New Trade | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="bg-white shadow rounded-lg overflow-hidden"> | |
| <!-- Header --> | |
| <div class="px-6 py-5 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-medium text-gray-900">Trade Records</h2> | |
| <div class="flex space-x-3"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search trades..." class="pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="px-3 py-2 bg-gray-100 rounded-md hover:bg-gray-200 transition"> | |
| <i data-feather="filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Number</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Cost</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total No.</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avg/Break-even</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="tradeTableBody"> | |
| <!-- Table rows will be added dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Add New Trade Form --> | |
| <div class="px-6 py-4 border-t border-gray-200 bg-gray-50"> | |
| <div class="flex items-end space-x-4"> | |
| <div class="flex-1"> | |
| <label for="date" class="block text-sm font-medium text-gray-700">Date</label> | |
| <input type="date" id="date" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary"> | |
| </div> | |
| <div class="flex-1"> | |
| <label for="cost" class="block text-sm font-medium text-gray-700">Cost</label> | |
| <input type="text" id="cost" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary" placeholder="e.g. -$87,713.44"> | |
| </div> | |
| <div class="flex-1"> | |
| <label for="price" class="block text-sm font-medium text-gray-700">Price</label> | |
| <input type="text" id="price" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary" placeholder="e.g. $19.95"> | |
| </div> | |
| <div class="flex-1"> | |
| <label for="number" class="block text-sm font-medium text-gray-700">Number</label> | |
| <input type="text" id="number" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary focus:border-primary" placeholder="e.g. -44"> | |
| </div> | |
| <div> | |
| <button id="addTradeBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition"> | |
| <i data-feather="plus" class="mr-2"></i>Add Trade | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 mt-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <p class="text-center text-gray-500 text-sm"> | |
| © 2023 TradeTrack Pro. All data is stored locally in your browser. | |
| </p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Sample data | |
| const sampleData = [ | |
| { date: '8/24/22', cost: '-$87,713.44', price: '$19.95', number: '-44', totalCost: '-$87,713.44', totalNo: '-44', avg: '$19.93' }, | |
| { date: '8/24/22', cost: '-$43,968.23', price: '$20.00', number: '-22', totalCost: '-$131,681.67', totalNo: '-66', avg: '$19.95' }, | |
| { date: '8/24/22', cost: '-$46,057.19', price: '$20.04', number: '-23', totalCost: '-$177,738.86', totalNo: '-89', avg: '$19.97' }, | |
| { date: '8/24/22', cost: '-$2,013.49', price: '$20.15', number: '-1', totalCost: '-$179,752.35', totalNo: '-90', avg: '$19.97' }, | |
| { date: '10/12/22', cost: '$19,567.23', price: '$2.16', number: '90', totalCost: '-$160,185.12', totalNo: '0', avg: 'Final ROI' }, | |
| { date: '11/18', cost: '265/290P', price: '', number: '', totalCost: '', totalNo: '', avg: 'Max Loss' } | |
| ]; | |
| // Load data from localStorage or use sample data | |
| let tradeData = JSON.parse(localStorage.getItem('tradeData')) || sampleData; | |
| // Function to render the table | |
| function renderTable() { | |
| const tableBody = document.getElementById('tradeTableBody'); | |
| tableBody.innerHTML = ''; | |
| tradeData.forEach((trade, index) => { | |
| const row = document.createElement('tr'); | |
| row.className = index % 2 === 0 ? 'bg-white' : 'bg-gray-50'; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${trade.date}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 ${trade.cost.startsWith('-') ? 'text-red-600' : 'text-green-600'}">${trade.cost}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${trade.price}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 ${trade.number.startsWith('-') ? 'text-red-600' : 'text-green-600'}">${trade.number}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 ${trade.totalCost.startsWith('-') ? 'text-red-600' : 'text-green-600'}">${trade.totalCost}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 ${trade.totalNo.startsWith('-') ? 'text-red-600' : 'text-green-600'}">${trade.totalNo}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${trade.avg}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-primary hover:text-primary-600 mr-3" onclick="editTrade(${index})"> | |
| <i data-feather="edit-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-red-600 hover:text-red-900" onclick="deleteTrade(${index})"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| feather.replace(); | |
| } | |
| // Add new trade | |
| document.getElementById('addTradeBtn').addEventListener('click', function() { | |
| const date = document.getElementById('date').value; | |
| const cost = document.getElementById('cost').value; | |
| const price = document.getElementById('price').value; | |
| const number = document.getElementById('number').value; | |
| if (!date || !cost || !price || !number) { | |
| alert('Please fill all fields'); | |
| return; | |
| } | |
| // Calculate totals (simplified for demo) | |
| const newTrade = { | |
| date: new Date(date).toLocaleDateString('en-US', {month: 'numeric', day: 'numeric', year: '2-digit'}), | |
| cost, | |
| price, | |
| number, | |
| totalCost: cost, // In a real app, you'd calculate this | |
| totalNo: number, // In a real app, you'd calculate this | |
| avg: price // In a real app, you'd calculate this | |
| }; | |
| tradeData.push(newTrade); | |
| localStorage.setItem('tradeData', JSON.stringify(tradeData)); | |
| renderTable(); | |
| // Clear form | |
| document.getElementById('date').value = ''; | |
| document.getElementById('cost').value = ''; | |
| document.getElementById('price').value = ''; | |
| document.getElementById('number').value = ''; | |
| }); | |
| // Edit trade | |
| function editTrade(index) { | |
| const trade = tradeData[index]; | |
| if (confirm('Edit this trade?')) { | |
| document.getElementById('date').value = trade.date; | |
| document.getElementById('cost').value = trade.cost; | |
| document.getElementById('price').value = trade.price; | |
| document.getElementById('number').value = trade.number; | |
| // Remove the trade | |
| deleteTrade(index, false); | |
| } | |
| } | |
| // Delete trade | |
| function deleteTrade(index, confirmDelete = true) { | |
| if (confirmDelete && !confirm('Delete this trade?')) return; | |
| tradeData.splice(index, 1); | |
| localStorage.setItem('tradeData', JSON.stringify(tradeData)); | |
| renderTable(); | |
| } | |
| // Initial render | |
| renderTable(); | |
| </script> | |
| </body> | |
| </html> | |