Spaces:
Configuration error
Configuration error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Commodity Price Alerts</title> | |
| <style> | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1a1a1a; color: #f8fafc; min-height: 100vh; padding: 1rem; } | |
| .container { max-width: 800px; margin: 0 auto; } | |
| header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #333; } | |
| h1 { font-size: 1.5rem; background: linear-gradient(135deg, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| .debug { background: #111; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; max-height: 80px; overflow-y: auto; color: #94a3b8; } | |
| .card { background: #222; border: 1px solid #333; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; transition: all 0.3s; } | |
| .card:hover { border-color: #f59e0b; } | |
| .card.flash { animation: flash 0.5s ease 3; } | |
| @keyframes flash { 0%,100% { border-color: #333; box-shadow: none; } 50% { border-color: #f59e0b; box-shadow: 0 0 30px #f59e0b50; } } | |
| .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } | |
| .asset-name { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; } | |
| .asset-icon { font-size: 1.5rem; } | |
| .price { font-size: 1.75rem; font-weight: 700; color: #f59e0b; margin-bottom: 0.5rem; } | |
| .unit { font-size: 0.875rem; color: #94a3b8; margin-bottom: 0.5rem; } | |
| .range { color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.75rem; } | |
| .state { padding: 0.4rem 0.8rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-block; } | |
| .state.inside { background: #22c55e20; color: #22c55e; } | |
| .state.outside { background: #374151; color: #94a3b8; } | |
| .btn { padding: 0.5rem 1rem; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 0.875rem; } | |
| .btn-primary { background: #f59e0b; color: #1a1a1a; } | |
| .btn-primary:hover { background: #fbbf24; } | |
| .btn-danger { background: transparent; color: #ef4444; border: 1px solid #ef4444; } | |
| .btn-danger:hover { background: #ef4444; color: white; } | |
| .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 100; } | |
| .modal.active { display: flex; } | |
| .modal-content { background: #222; border: 1px solid #333; border-radius: 16px; padding: 2rem; width: 90%; max-width: 400px; } | |
| .modal h2 { margin-bottom: 1.5rem; } | |
| .form-group { margin-bottom: 1rem; } | |
| .form-group label { display: block; margin-bottom: 0.5rem; color: #94a3b8; font-size: 0.875rem; } | |
| .form-group input, .form-group select { width: 100%; padding: 0.75rem; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; color: #f8fafc; font-size: 1rem; } | |
| .form-group input:focus, .form-group select:focus { outline: none; border-color: #f59e0b; } | |
| .btn-block { width: 100%; padding: 1rem; margin-top: 0.5rem; } | |
| .toast { position: fixed; top: 20px; right: 20px; background: #222; border: 2px solid #22c55e; border-radius: 12px; padding: 1rem 1.5rem; z-index: 1000; animation: slideIn 0.3s; } | |
| @keyframes slideIn { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: translateX(0); } } | |
| .toast-title { font-weight: 700; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; } | |
| .toast-msg { font-size: 0.875rem; color: #94a3b8; } | |
| .empty { text-align: center; padding: 3rem; color: #94a3b8; } | |
| .section-title { font-size: 1.1rem; margin: 1.5rem 0 1rem; color: #94a3b8; } | |
| .alert-item { background: #222; border: 1px solid #333; border-radius: 8px; padding: 1rem; margin-bottom: 0.5rem; display: flex; gap: 1rem; align-items: center; } | |
| .status { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.875rem; color: #94a3b8; } | |
| .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; } | |
| .note { background: #333; padding: 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.875rem; color: #94a3b8; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="toasts"></div> | |
| <div class="container"> | |
| <header> | |
| <h1>🥇 Commodity Alerts</h1> | |
| <button class="btn btn-primary" onclick="showModal()">+ Add Alert</button> | |
| </header> | |
| <div class="note">Prices from Yahoo Finance (via proxy)</div> | |
| <div class="status"><span class="status-dot"></span> Live commodity prices</div> | |
| <div id="debug" class="debug">Initializing...</div> | |
| <div id="alertsContainer"></div> | |
| <div class="section-title">📋 Alert History</div> | |
| <div id="historyContainer"></div> | |
| </div> | |
| <div id="modal" class="modal" onclick="if(event.target===this)hideModal()"> | |
| <div class="modal-content"> | |
| <h2>Add Commodity Alert</h2> | |
| <div class="form-group"> | |
| <label>Commodity</label> | |
| <select id="assetSelect"> | |
| <option value="">Select commodity...</option> | |
| <option value="GC=F">Gold ($/oz)</option> | |
| <option value="SI=F">Silver ($/oz)</option> | |
| <option value="PL=F">Platinum ($/oz)</option> | |
| <option value="PA=F">Palladium ($/oz)</option> | |
| <option value="CL=F">Crude Oil ($/bbl)</option> | |
| <option value="NG=F">Natural Gas ($/MMBtu)</option> | |
| <option value="HG=F">Copper ($/lb)</option> | |
| <option value="ZC=F">Corn ($/bu)</option> | |
| <option value="ZS=F">Soybeans ($/bu)</option> | |
| <option value="ZW=F">Wheat ($/bu)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Min Price</label> | |
| <input type="number" id="minPrice" step="any" placeholder="1900"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Max Price</label> | |
| <input type="number" id="maxPrice" step="any" placeholder="2000"> | |
| </div> | |
| <button class="btn btn-primary btn-block" onclick="addAlert()">Add Alert</button> | |
| <button class="btn btn-danger btn-block" onclick="hideModal()">Cancel</button> | |
| </div> | |
| </div> | |
| <script> | |
| const COMMODITY_ICONS = { | |
| 'GC=F': '🥇', 'SI=F': '🥈', 'PL=F': '🥉', 'PA=F': '⚪', | |
| 'CL=F': '🛢️', 'NG=F': '🔥', 'HG=F': '🔶', 'ZC=F': '🌽', | |
| 'ZS=F': '🟢', 'ZW=F': '🍞' | |
| }; | |
| const COMMODITY_NAMES = { | |
| 'GC=F': 'Gold', 'SI=F': 'Silver', 'PL=F': 'Platinum', 'PA=F': 'Palladium', | |
| 'CL=F': 'Crude Oil', 'NG=F': 'Natural Gas', 'HG=F': 'Copper', 'ZC=F': 'Corn', | |
| 'ZS=F': 'Soybeans', 'ZW=F': 'Wheat' | |
| }; | |
| const COMMODITY_UNITS = { | |
| 'GC=F': 'per oz', 'SI=F': 'per oz', 'PL=F': 'per oz', 'PA=F': 'per oz', | |
| 'CL=F': 'per bbl', 'NG=F': 'per MMBtu', 'HG=F': 'per lb', 'ZC=F': 'per bu', | |
| 'ZS=F': 'per bu', 'ZW=F': 'per bu' | |
| }; | |
| let alerts = JSON.parse(localStorage.getItem('commodity_alerts') || '[]'); | |
| let history = JSON.parse(localStorage.getItem('commodity_history') || '[]'); | |
| let prices = {}; | |
| let triggered = new Set(); | |
| const debug = document.getElementById('debug'); | |
| function log(msg) { | |
| debug.textContent = new Date().toLocaleTimeString() + ' | ' + msg + '\n' + debug.textContent.slice(0, 300); | |
| } | |
| function save() { | |
| localStorage.setItem('commodity_alerts', JSON.stringify(alerts)); | |
| localStorage.setItem('commodity_history', JSON.stringify(history.slice(0, 30))); | |
| } | |
| function showModal() { | |
| document.getElementById('modal').classList.add('active'); | |
| } | |
| function hideModal() { | |
| document.getElementById('modal').classList.remove('active'); | |
| } | |
| function addAlert() { | |
| const symbol = document.getElementById('assetSelect').value; | |
| const min = parseFloat(document.getElementById('minPrice').value); | |
| const max = parseFloat(document.getElementById('maxPrice').value); | |
| if (!symbol || !min || !max || min >= max) { | |
| alert('Please fill all fields correctly.\nMin must be less than Max.'); | |
| return; | |
| } | |
| alerts = alerts.filter(a => a.symbol !== symbol); | |
| alerts.push({ symbol, min, max, lastInRange: false }); | |
| save(); | |
| render(); | |
| hideModal(); | |
| log('Added: ' + COMMODITY_NAMES[symbol] + ' | $' + min + ' - $' + max); | |
| } | |
| function removeAlert(symbol) { | |
| alerts = alerts.filter(a => a.symbol !== symbol); | |
| triggered.clear(); | |
| save(); | |
| render(); | |
| log('Removed: ' + symbol); | |
| } | |
| function triggerAlert(symbol, price, min, max) { | |
| const key = symbol + '-' + min + '-' + max; | |
| if (triggered.has(key)) return; | |
| triggered.add(key); | |
| history.unshift({ symbol, price, min, max, time: Date.now() }); | |
| save(); | |
| renderHistory(); | |
| showToast(symbol, price, min, max); | |
| if (Notification.permission === 'granted') { | |
| new Notification(COMMODITY_NAMES[symbol] + ' Alert!', { | |
| body: 'Price $' + price.toLocaleString() + ' is in range ($' + min + ' - $' + max + ')', | |
| }); | |
| } | |
| if ('vibrate' in navigator) navigator.vibrate([200, 100, 200]); | |
| const card = document.getElementById('card-' + symbol.replace(/[^a-z]/g, '')); | |
| if (card) { | |
| card.classList.add('flash'); | |
| setTimeout(() => card.classList.remove('flash'), 2000); | |
| } | |
| } | |
| function showToast(symbol, price, min, max) { | |
| const div = document.createElement('div'); | |
| div.className = 'toast'; | |
| div.innerHTML = ` | |
| <div class="toast-title">🔔 ${COMMODITY_NAMES[symbol]} Alert!</div> | |
| <div class="toast-msg">$${price.toLocaleString()} in range ($${min.toLocaleString()} - $${max.toLocaleString()})</div> | |
| `; | |
| document.getElementById('toasts').appendChild(div); | |
| setTimeout(() => div.remove(), 5000); | |
| } | |
| function render() { | |
| const container = document.getElementById('alertsContainer'); | |
| if (alerts.length === 0) { | |
| container.innerHTML = '<div class="empty">No alerts set. Click "+ Add Alert" to start.</div>'; | |
| return; | |
| } | |
| container.innerHTML = alerts.map(a => { | |
| const price = prices[a.symbol]; | |
| const inRange = price >= a.min && price <= a.max; | |
| const icon = COMMODITY_ICONS[a.symbol] || '📦'; | |
| const name = COMMODITY_NAMES[a.symbol] || a.symbol; | |
| const unit = COMMODITY_UNITS[a.symbol] || ''; | |
| return ` | |
| <div class="card" id="card-${a.symbol.replace(/[^a-z]/g, '')}"> | |
| <div class="card-header"> | |
| <span class="asset-name"><span class="asset-icon">${icon}</span>${name}</span> | |
| <button class="btn btn-danger" onclick="removeAlert('${a.symbol}')">Remove</button> | |
| </div> | |
| <div class="price">${price ? '$' + price.toLocaleString() : 'Loading...'}</div> | |
| <div class="unit">${unit}</div> | |
| <div class="range">Target: $${a.min.toLocaleString()} - $${a.max.toLocaleString()}</div> | |
| <span class="state ${inRange ? 'inside' : 'outside'}">${inRange ? '✓ In Range' : '○ Waiting'}</span> | |
| </div> | |
| `; | |
| }).join(''); | |
| } | |
| function renderHistory() { | |
| const container = document.getElementById('historyContainer'); | |
| if (history.length === 0) { | |
| container.innerHTML = '<div class="empty" style="padding:1rem">No alerts triggered yet</div>'; | |
| return; | |
| } | |
| container.innerHTML = history.map(h => ` | |
| <div class="alert-item"> | |
| <span>🔔</span> | |
| <div> | |
| <strong>${COMMODITY_NAMES[h.symbol] || h.symbol}</strong> - $${h.price.toLocaleString()} | |
| <div style="font-size:0.75rem;color:#64748b;margin-top:2px"> | |
| Range: $${h.min.toLocaleString()} - $${h.max.toLocaleString()} | ${new Date(h.time).toLocaleTimeString()} | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| async function fetchPrices() { | |
| if (alerts.length === 0) return; | |
| const symbols = alerts.map(a => a.symbol); | |
| const symbolsParam = symbols.join(','); | |
| try { | |
| const url = `https://query1.finance.yahoo.com/v7/finance/quote?symbols=${encodeURIComponent(symbolsParam)}`; | |
| log('Fetching commodities...'); | |
| const res = await fetch(url); | |
| if (!res.ok) { | |
| log('API error: ' + res.status); | |
| return; | |
| } | |
| const data = await res.json(); | |
| if (data.chart && data.chart.result) { | |
| for (const result of data.chart.result) { | |
| const symbol = result.meta.symbol; | |
| const price = result.meta.regularMarketPrice; | |
| if (price) { | |
| prices[symbol] = price; | |
| log(symbol + ': $' + price); | |
| } | |
| } | |
| } | |
| log('Price update complete'); | |
| } catch (e) { | |
| log('Fetch error: ' + e.message); | |
| } | |
| } | |
| function checkAlerts() { | |
| alerts.forEach(a => { | |
| const price = prices[a.symbol]; | |
| if (!price) return; | |
| const wasIn = a.lastInRange === true; | |
| const isIn = price >= a.min && price <= a.max; | |
| if (isIn && !wasIn) { | |
| log('TRIGGER: ' + a.symbol + ' at $' + price); | |
| triggerAlert(a.symbol, price, a.min, a.max); | |
| } | |
| a.lastInRange = isIn; | |
| }); | |
| save(); | |
| render(); | |
| } | |
| async function init() { | |
| log('Starting Commodity Alerts...'); | |
| render(); | |
| renderHistory(); | |
| await fetchPrices(); | |
| checkAlerts(); | |
| setInterval(async () => { | |
| await fetchPrices(); | |
| checkAlerts(); | |
| }, 30000); | |
| if ('Notification' in window && Notification.permission === 'default') { | |
| Notification.requestPermission(); | |
| } | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> | |