Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Trading Application</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <script src="https://s3.tradingview.com/tv.js"></script> | |
| <style> | |
| /* Basic styling for the tab navigation */ | |
| .tab { | |
| display: none; | |
| } | |
| .tab.active { | |
| display: block; | |
| } | |
| .tab-links { | |
| margin-bottom: 20px; | |
| } | |
| .tab-links button { | |
| margin-right: 10px; | |
| padding: 10px; | |
| cursor: pointer; | |
| } | |
| /* Basic styling for the trading journal */ | |
| #trading-journal { | |
| margin-top: 20px; | |
| } | |
| #journal-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| #journal-table th, #journal-table td { | |
| border: 1px solid #ddd; | |
| padding: 8px; | |
| } | |
| #journal-table th { | |
| background-color: #f2f2f2; | |
| } | |
| .edit-button, .delete-button { | |
| cursor: pointer; | |
| color: blue; | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Commodity Trading Dashboard</h1> | |
| <div class="tab-links"> | |
| <button onclick="showTab('dashboard')">Dashboard</button> | |
| <button onclick="showTab('trading-journal')">Trading Journal</button> | |
| </div> | |
| <div id="dashboard" class="tab active"> | |
| <div> | |
| <label for="commodity">Select Commodity:</label> | |
| <select id="commodity" onchange="updateChart()"> | |
| <option value="OANDA:WTICOUSD">Oil</option> | |
| <option value="OANDA:XAGUSD">Silver</option> | |
| <option value="OANDA:XAUUSD">Gold</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="timeframe">Select Timeframe:</label> | |
| <select id="timeframe" onchange="updateChart()"> | |
| <option value="1">1 Minute</option> | |
| <option value="5">5 Minutes</option> | |
| <option value="15">15 Minutes</option> | |
| <option value="60">1 Hour</option> | |
| <option value="240">4 Hours</option> | |
| <option value="D">1 Day</option> | |
| </select> | |
| </div> | |
| <h2>Indicator Parameters</h2> | |
| <div> | |
| <label for="rsi-period">RSI Period:</label> | |
| <input type="number" id="rsi-period" value="14" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div> | |
| <label for="macd-fast">MACD Fast Period:</label> | |
| <input type="number" id="macd-fast" value="12" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div> | |
| <label for="macd-slow">MACD Slow Period:</label> | |
| <input type="number" id="macd-slow" value="26" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div> | |
| <label for="macd-signal">MACD Signal Period:</label> | |
| <input type="number" id="macd-signal" value="9" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div> | |
| <label for="stochastic-k">Stochastic %K Period:</label> | |
| <input type="number" id="stochastic-k" value="14" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div> | |
| <label for="stochastic-d">Stochastic %D Period:</label> | |
| <input type="number" id="stochastic-d" value="3" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div> | |
| <label for="momentum-period">Momentum Period:</label> | |
| <input type="number" id="momentum-period" value="10" min="1" onchange="updateIndicators()"> | |
| </div> | |
| <div id="tradingview-chart"></div> | |
| <h2>Indicators</h2> | |
| <ul> | |
| <li>RSI: <span id="rsi-value">Loading...</span></li> | |
| <li>MACD: <span id="macd-value">Loading...</span></li> | |
| <li>Stochastic: <span id="stochastic-value">Loading...</span></li> | |
| <li>Awesome Oscillator: <span id="ao-value">Loading...</span></li> | |
| <li>Momentum: <span id="momentum-value">Loading...</span></li> | |
| </ul> | |
| <h2>Recommendations</h2> | |
| <div id="recommendations"> | |
| <p>RSI Recommendation: <span id="rsi-recommendation">Loading...</span></p> | |
| <p>MACD Recommendation: <span id="macd-recommendation">Loading...</span></p> | |
| <p>Stochastic Recommendation: <span id="stochastic-recommendation">Loading...</span></p> | |
| <p>Awesome Oscillator Recommendation: <span id="ao-recommendation">Loading...</span></p> | |
| <p>Momentum Recommendation: <span id="momentum-recommendation">Loading...</span></p> | |
| </div> | |
| <h2>Sentiment Analysis</h2> | |
| <div id="sentiment-analysis"> | |
| <p>Retail Position Recommendation: <span id="retail-recommendation">Loading...</span></p> | |
| <p>Market Maker Data: <span id="market-maker-data">Loading...</span></p> | |
| </div> | |
| <h2>Upcoming Economic Calendar</h2> | |
| <div id="economic-calendar"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Event</th> | |
| <th>Impact</th> | |
| <th>Actual</th> | |
| <th>Forecast</th> | |
| </tr> | |
| </thead> | |
| <tbody id="calendar-body"> | |
| <tr> | |
| <td colspan="5">Loading...</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div id="trading-journal" class="tab"> | |
| <h2>Trading Journal</h2> | |
| <input type="date" id="trade-date" placeholder="Trade Date"> | |
| <input type="number" id="buy-price" placeholder="Buy Price" step="0.01"> | |
| <input type="number" id="sell-price" placeholder="Sell Price" step="0.01"> | |
| <button onclick="addJournalEntry()">Add Entry</button> | |
| <table id="journal-table"> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Buy Price</th> | |
| <th>Sell Price</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="journal-body"> | |
| <tr> | |
| <td colspan="4">No entries yet.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script> | |
| let journalEntries = []; | |
| function showTab(tabName) { | |
| const tabs = document.querySelectorAll('.tab'); | |
| tabs.forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| document.getElementById(tabName).classList.add('active'); | |
| } | |
| function updateChart() { | |
| const commodity = document.getElementById("commodity").value; | |
| const timeframe = document.getElementById("timeframe").value; | |
| new TradingView.widget({ | |
| "container_id": "tradingview-chart", | |
| "width": 980, | |
| "height": 610, | |
| "symbol": commodity, | |
| "interval": timeframe, | |
| "timezone": "Etc/UTC", | |
| "theme": "light", | |
| "style": "1", | |
| "locale": "en", | |
| "toolbar_bg": "#f1f3f6", | |
| "enable_publishing": false, | |
| "allow_symbol_change": true, | |
| "details": true, | |
| "hotlist": true, | |
| "calendar": true, | |
| "news": ["headlines"], | |
| "studies": ["RSI", "MACD", "Stochastic", "AwesomeOscillator", "Momentum"] | |
| }); | |
| // Fetch and display indicators and sentiment analysis | |
| fetchIndicatorsAndSentiment(commodity, timeframe); | |
| fetchEconomicCalendar(); | |
| } | |
| function updateIndicators() { | |
| const rsiPeriod = parseInt(document.getElementById("rsi-period").value); | |
| const macdFast = parseInt(document.getElementById("macd-fast").value); | |
| const macdSlow = parseInt(document.getElementById("macd-slow").value); | |
| const macdSignal = parseInt(document.getElementById("macd-signal").value); | |
| const stochasticK = parseInt(document.getElementById("stochastic-k").value); | |
| const stochasticD = parseInt(document.getElementById("stochastic-d").value); | |
| const momentumPeriod = parseInt(document.getElementById("momentum-period").value); | |
| console.log("RSI Period:", rsiPeriod); | |
| console.log("MACD Fast Period:", macdFast); | |
| console.log("MACD Slow Period:", macdSlow); | |
| console.log("MACD Signal Period:", macdSignal); | |
| console.log("Stochastic %K Period:", stochasticK); | |
| console.log("Stochastic %D Period:", stochasticD); | |
| console.log("Momentum Period:", momentumPeriod); | |
| } | |
| function addJournalEntry() { | |
| const tradeDate = document.getElementById("trade-date").value; | |
| const buyPrice = parseFloat(document.getElementById("buy-price").value); | |
| const sellPrice = parseFloat(document.getElementById("sell-price").value); | |
| if (!tradeDate || isNaN(buyPrice) || isNaN(sellPrice)) { | |
| alert("Please fill in all fields correctly."); | |
| return; | |
| } | |
| journalEntries.push({ date: tradeDate, buy: buyPrice, sell: sellPrice }); | |
| document.getElementById("trade-date").value = ""; // Clear input | |
| document.getElementById("buy-price").value = ""; // Clear input | |
| document.getElementById("sell-price").value = ""; // Clear input | |
| renderJournalEntries(); | |
| } | |
| function renderJournalEntries() { | |
| const journalBody = document.getElementById("journal-body"); | |
| journalBody.innerHTML = ""; // Clear previous entries | |
| if (journalEntries.length === 0) { | |
| journalBody.innerHTML = "<tr><td colspan='4'>No entries yet.</td></tr>"; | |
| return; | |
| } | |
| journalEntries.forEach((entry, index) => { | |
| const row = document.createElement("tr"); | |
| row.innerHTML = ` | |
| <td>${entry.date}</td> | |
| <td>${entry.buy.toFixed(2)}</td> | |
| <td>${entry.sell.toFixed(2)}</td> | |
| <td> | |
| <span class="edit-button" onclick="editJournalEntry(${index})">Edit</span> | | |
| <span class="delete-button" onclick="deleteJournalEntry(${index})">Delete</span> | |
| </td> | |
| `; | |
| journalBody.appendChild(row); | |
| }); | |
| } | |
| function editJournalEntry(index) { | |
| const entry = journalEntries[index]; | |
| const newDate = prompt("Edit Trade Date:", entry.date); | |
| const newBuyPrice = prompt("Edit Buy Price:", entry.buy); | |
| const newSellPrice = prompt("Edit Sell Price:", entry.sell); | |
| if (newDate !== null && newBuyPrice !== null && newSellPrice !== null) { | |
| journalEntries[index] = { | |
| date: newDate, | |
| buy: parseFloat(newBuyPrice), | |
| sell: parseFloat(newSellPrice) | |
| }; | |
| renderJournalEntries(); | |
| } | |
| } | |
| function deleteJournalEntry(index) { | |
| if (confirm("Are you sure you want to delete this entry?")) { | |
| journalEntries.splice(index, 1); | |
| renderJournalEntries(); | |
| } | |
| } | |
| function fetchIndicatorsAndSentiment(commodity, timeframe) { | |
| const indicators = getIndicatorsBasedOnTimeframe(timeframe); | |
| const sentiment = { | |
| retailRecommendation: Math.random() > 0.5 ? "Bullish" : "Bearish", | |
| marketMakerData: Math.random() > 0.5 ? "Long" : "Short" | |
| }; | |
| document.getElementById("rsi-value").innerText = indicators.rsi.toFixed(2); | |
| document.getElementById("macd-value").innerText = indicators.macd.toFixed(2); | |
| document.getElementById("stochastic-value").innerText = indicators.stochastic.toFixed(2); | |
| document.getElementById("ao-value").innerText = indicators.ao.toFixed(2); | |
| document.getElementById("momentum-value").innerText = indicators.momentum.toFixed(2); | |
| document.getElementById("rsi-recommendation").innerText = getRSIRecommendation(indicators.rsi); | |
| document.getElementById("macd-recommendation").innerText = getMACDRecommendation(indicators.macd); | |
| document.getElementById("stochastic-recommendation").innerText = getStochasticRecommendation(indicators.stochastic); | |
| document.getElementById("ao-recommendation").innerText = getAORecommendation(indicators.ao); | |
| document.getElementById("momentum-recommendation").innerText = getMomentumRecommendation(indicators.momentum); | |
| document.getElementById("retail-recommendation").innerText = sentiment.retailRecommendation; | |
| document.getElementById("market-maker-data").innerText = sentiment.marketMakerData; | |
| } | |
| function fetchEconomicCalendar() { | |
| const events = [ | |
| { date: "2025-06-01", event: "Manufacturing PMI", impact: "High", actual: "N/A", forecast: "52.5" }, | |
| { date: "2025-06-03", event: "Non-Farm Payrolls", impact: "High", actual: "N/A", forecast: "200K" }, | |
| { date: "2025-06-04", event: "Crude Oil Inventories", impact: "Medium", actual: "N/A", forecast: "N/A" }, | |
| { date: "2025-06-05", event: "Interest Rate Decision", impact: "High", actual: "N/A", forecast: "2.00%" }, | |
| { date: "2025-06-06", event: "Unemployment Rate", impact: "High", actual: "N/A", forecast: "4.0%" }, | |
| { date: "2025-06-10", event: "Consumer Price Index (CPI)", impact: "High", actual: "N/A", forecast: "3.2%" }, | |
| { date: "2025-06-12", event: "Retail Sales", impact: "Medium", actual: "N/A", forecast: "0.5%" }, | |
| { date: "2025-06-14", event: "Federal Reserve Meeting Minutes", impact: "Medium", actual: "N/A", forecast: "N/A" } | |
| ]; | |
| const calendarBody = document.getElementById("calendar-body"); | |
| calendarBody.innerHTML = ""; // Clear previous data | |
| events.forEach(event => { | |
| const row = document.createElement("tr"); | |
| row.innerHTML = ` | |
| <td>${event.date}</td> | |
| <td>${event.event}</td> | |
| <td>${event.impact}</td> | |
| <td>${event.actual}</td> | |
| <td>${event.forecast}</td> | |
| `; | |
| calendarBody.appendChild(row); | |
| }); | |
| } | |
| function getIndicatorsBasedOnTimeframe(timeframe) { | |
| const baseValues = { | |
| rsi: Math.random() * 100, | |
| macd: Math.random() * 2 - 1, | |
| stochastic: Math.random() * 100, | |
| ao: Math.random() * 2 - 1, | |
| momentum: Math.random() * 100 | |
| }; | |
| switch (timeframe) { | |
| case "1": | |
| baseValues.rsi += 5; | |
| break; | |
| case "5": | |
| baseValues.macd += 0.1; | |
| break; | |
| case "15": | |
| baseValues.stochastic += 10; | |
| break; | |
| case "60": | |
| baseValues.ao += 0.5; | |
| break; | |
| case "240": | |
| baseValues.momentum += 15; | |
| break; | |
| case "D": | |
| baseValues.rsi -= 10; | |
| break; | |
| } | |
| return baseValues; | |
| } | |
| function getRSIRecommendation(rsi) { | |
| if (rsi < 30) { | |
| return "Buy (Oversold)"; | |
| } else if (rsi > 70) { | |
| return "Sell (Overbought)"; | |
| } else { | |
| return "Hold"; | |
| } | |
| } | |
| function getMACDRecommendation(macd) { | |
| return macd > 0 ? "Buy" : "Sell"; | |
| } | |
| function getStochasticRecommendation(stochastic) { | |
| if (stochastic < 20) { | |
| return "Buy (Oversold)"; | |
| } else if (stochastic > 80) { | |
| return "Sell (Overbought)"; | |
| } else { | |
| return "Hold"; | |
| } | |
| } | |
| function getAORecommendation(ao) { | |
| return ao > 0 ? "Buy" : "Sell"; | |
| } | |
| function getMomentumRecommendation(momentum) { | |
| return momentum > 0 ? "Buy" : "Sell"; | |
| } | |
| // Initialize the chart on page load | |
| window.onload = updateChart; | |
| </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-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/trading-insight" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |