Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="Content-Language" content="en-US"> | |
| <title>IRIS-AI | Vision in Volatility</title> | |
| <style> | |
| /* Force emoji rendering through emoji-capable fonts, not CJK fallbacks */ | |
| body, .llm-report-item, .llm-trend-up, .llm-trend-down, .llm-trend-flat, | |
| .trend-badge, .signal-badge, .headline-title, .headline-meta { | |
| font-family: 'Inter', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; | |
| } | |
| </style> | |
| <script> | |
| (function () { | |
| const saved = localStorage.getItem('iris-theme') || localStorage.getItem('iris-theme-preference'); | |
| const preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; | |
| const theme = saved === 'dark' || saved === 'light' ? saved : (preferDark ? 'dark' : 'light'); | |
| document.documentElement.setAttribute('data-theme', theme); | |
| })(); | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/style.css?v=11"> | |
| <link rel="icon" type="image/svg+xml" | |
| href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 fill=%22%233b82f6%22>IA</text></svg>"> | |
| </head> | |
| <body> | |
| <div class="glow-bg"></div> | |
| <nav class="top-nav"> | |
| <div class="top-nav-inner"> | |
| <a href="/" class="nav-brand">IRIS<span class="brand-highlight">-AI</span></a> | |
| <div class="nav-actions"> | |
| <a href="/almanac" class="nav-link">Almanac</a> | |
| <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle light and dark mode" | |
| aria-pressed="false"> | |
| <span class="theme-toggle-track" aria-hidden="true"> | |
| <span class="theme-toggle-thumb"></span> | |
| </span> | |
| <span class="theme-toggle-label">Light / Dark</span> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <header> | |
| <div class="logo"> | |
| <h1>IRIS<span class="highlight">-AI</span></h1> | |
| </div> | |
| <p class="subtitle">Vision in Volatility</p> | |
| </header> | |
| <main class="container"> | |
| <!-- Search Bar section --> | |
| <section class="search-section glass-panel"> | |
| <h2>Enter Ticker to Analyze</h2> | |
| <form id="analyze-form"> | |
| <div class="search-box"> | |
| <div class="input-wrapper" id="ticker-input-wrapper"> | |
| <input type="text" id="ticker-input" | |
| placeholder="Enter stock ticker (e.g., AAPL)" | |
| autocomplete="off" spellcheck="false" maxlength="10" | |
| role="combobox" aria-expanded="false" aria-haspopup="listbox" | |
| aria-autocomplete="list" aria-controls="ticker-dropdown"> | |
| <ul id="ticker-dropdown" role="listbox" class="ticker-dropdown hidden" | |
| aria-label="Ticker suggestions"></ul> | |
| <button type="button" id="ticker-clear" class="ticker-clear hidden" | |
| aria-label="Clear ticker input" tabindex="-1"> | |
| <svg width="10" height="10" viewBox="0 0 10 10" fill="none" | |
| stroke="currentColor" stroke-width="1.8" stroke-linecap="round" | |
| aria-hidden="true"> | |
| <line x1="1" y1="1" x2="9" y2="9"/> | |
| <line x1="9" y1="1" x2="1" y2="9"/> | |
| </svg> | |
| </button> | |
| <span id="ticker-val-indicator" class="ticker-val-indicator hidden" | |
| aria-hidden="true"></span> | |
| </div> | |
| <button type="submit" id="analyze-btn" disabled> | |
| <span class="btn-text">Analyze Risk</span> | |
| <div class="spinner hidden" id="loading-spinner"></div> | |
| </button> | |
| </div> | |
| </form> | |
| <div id="validation-hint" class="validation-hint hidden"> | |
| <span id="validation-msg" class="validation-msg"></span> | |
| <div id="suggestion-chips" class="suggestion-chips"></div> | |
| </div> | |
| <div id="error-message" class="error-msg hidden"></div> | |
| </section> | |
| <div id="ticker-ac-live" class="sr-only" aria-live="polite" aria-atomic="true"></div> | |
| <!-- Error Banner (shown on 422 / 429 / 500 / timeout) --> | |
| <div id="error-banner" class="error-banner hidden" role="alert" aria-live="assertive"> | |
| <div class="error-banner-body"> | |
| <span id="error-banner-msg" class="error-banner-text"></span> | |
| <div id="error-banner-chips" class="suggestion-chips"></div> | |
| </div> | |
| <div class="error-banner-actions"> | |
| <button id="error-banner-retry" class="error-banner-retry hidden" type="button">↺ Retry</button> | |
| <button id="error-banner-dismiss" class="error-banner-dismiss" type="button" aria-label="Dismiss">×</button> | |
| </div> | |
| </div> | |
| <!-- Analysis progress + skeleton (shown while loading) --> | |
| <div id="analysis-progress" class="analysis-progress hidden" aria-live="polite"> | |
| <div class="progress-step" id="prog-step-1"><span class="prog-icon">✓</span><span class="prog-label">Ticker validated</span></div> | |
| <div class="progress-step" id="prog-step-2"><span class="prog-icon">●</span><span class="prog-label">Fetching market data…</span></div> | |
| <div class="progress-step" id="prog-step-3"><span class="prog-icon">○</span><span class="prog-label">Running risk analysis</span></div> | |
| <div class="progress-step" id="prog-step-4"><span class="prog-icon">○</span><span class="prog-label">Generating report</span></div> | |
| </div> | |
| <div id="analysis-skeleton" class="analysis-skeleton hidden" aria-hidden="true"> | |
| <div class="skeleton-grid"> | |
| <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-block"></div></div> | |
| <div class="skeleton-card skeleton-card--tall"><div class="skeleton-line"></div><div class="skeleton-block"></div><div class="skeleton-block"></div></div> | |
| <div class="skeleton-card"><div class="skeleton-line"></div><div class="skeleton-block"></div></div> | |
| </div> | |
| </div> | |
| <!-- Dashboard Results (Hidden by default) --> | |
| <section id="results-dashboard" class="dashboard hidden"> | |
| <div class="dashboard-header"> | |
| <h2 id="res-ticker">AAPL</h2> | |
| <div class="time-stamp" id="res-time">Updated: --</div> | |
| </div> | |
| <div class="cards-grid dashboard-3col"> | |
| <!-- Row 1, Col 1: Risk Indicator --> | |
| <div class="card glass-panel engine-light-card"> | |
| <h3>Risk Indicator</h3> | |
| <div class="engine-indicator" id="engine-light"> | |
| <div class="light-bulb" id="light-bulb"></div> | |
| <h4 id="light-status">NEUTRAL</h4> | |
| </div> | |
| </div> | |
| <!-- Row 1, Col 2: Market Prediction --> | |
| <div class="card glass-panel price-card"> | |
| <h3>Market Prediction</h3> | |
| <div class="price-info"> | |
| <div class="price-row"> | |
| <span class="label">Current</span> | |
| <span class="value" id="current-price">$0.00</span> | |
| </div> | |
| <div class="price-row highlight"> | |
| <span class="label" id="predicted-price-label">Predicted (1 Day)</span> | |
| <span class="value" id="predicted-price">$0.00</span> | |
| </div> | |
| <div class="price-row accuracy-row hidden" id="accuracy-row"> | |
| <span class="label">Model Confidence</span> | |
| <span class="value" id="accuracy-value">—</span> | |
| </div> | |
| </div> | |
| <div class="trend-badge" id="trend-label">UNKNOWN TREND</div> | |
| </div> | |
| <!-- Col 3, spans rows 1–2: Recent Headlines --> | |
| <div class="card glass-panel headlines-card"> | |
| <h3>Recent Headlines Analyzed</h3> | |
| <ul id="headlines-list" class="headlines-list"></ul> | |
| <div class="headlines-scroll-hint">scroll for more</div> | |
| </div> | |
| <!-- Row 2, Col 1: Sentiment Analysis --> | |
| <div class="card glass-panel sentiment-card"> | |
| <h3>Sentiment Analysis</h3> | |
| <div class="sentiment-meter"> | |
| <div class="score-display"> | |
| <span id="sentiment-score">0.00</span> | |
| </div> | |
| <p class="sentiment-desc" id="sentiment-desc">Neutral Sentiment</p> | |
| </div> | |
| </div> | |
| <!-- Row 2, Col 2: LLM Insights --> | |
| <div class="card glass-panel llm-card"> | |
| <h3>LLM Insights</h3> | |
| <div class="llm-info" id="llm-insights-container" | |
| style="display:flex;flex-direction:column;gap:8px;margin-top:8px;"> | |
| <p class="text-muted">No LLM insights available.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Market Chart --> | |
| <div class="card glass-panel chart-card" id="chart-section"> | |
| <h3>Market Chart & Trend</h3> | |
| <p class="chart-timeframe-hint">Select timeframe: shows historical chart + future prediction for the selected period</p> | |
| <div class="chart-controls-row"> | |
| <div class="chart-timeframes" role="tablist" aria-label="Chart timeframe"> | |
| <button type="button" class="timeframe-btn" data-timeframe="1D" title="Last 1 day chart + next session prediction">1D</button> | |
| <button type="button" class="timeframe-btn" data-timeframe="5D" title="Last 5 days chart + 5-day ahead prediction">5D</button> | |
| <button type="button" class="timeframe-btn" data-timeframe="1M" title="Last 1 month chart + 1-month ahead prediction">1M</button> | |
| <button type="button" class="timeframe-btn active" data-timeframe="6M" title="Last 6 months chart + 6-month ahead prediction">6M</button> | |
| <button type="button" class="timeframe-btn" data-timeframe="1Y" title="Last 1 year chart + 1-year ahead prediction">1Y</button> | |
| <button type="button" class="timeframe-btn" data-timeframe="5Y" title="Last 5 years chart + 5-year ahead prediction">5Y</button> | |
| </div> | |
| <span id="chart-forecast-confidence" class="chart-forecast-confidence hidden"></span> | |
| </div> | |
| <div class="chart-container" id="advanced-chart" | |
| style="position: relative; width: 100%; height: 300px;"> | |
| <div id="chart-placeholder" class="chart-placeholder">Loading chart...</div> | |
| </div> | |
| </div> | |
| <!-- Recommended For You --> | |
| <div id="recommended-section" class="recommended-section hidden"> | |
| <div class="recommended-header"> | |
| <div> | |
| <h3 class="rec-title">Recommended for you</h3> | |
| <span class="rec-subtitle" id="rec-subtitle">Related stocks in the same sector</span> | |
| </div> | |
| <div class="rec-nav"> | |
| <button type="button" class="rec-nav-btn" id="rec-prev" disabled aria-label="Scroll left">‹</button> | |
| <button type="button" class="rec-nav-btn" id="rec-next" aria-label="Scroll right">›</button> | |
| </div> | |
| </div> | |
| <div class="rec-scroll-wrapper"> | |
| <div class="rec-scroll" id="rec-scroll"></div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <p>IRIS-AI provides decision support flags based on historical data and sentiment analysis. It does not provide | |
| financial advice.</p> | |
| <p>© CP3405 Team Project</p> | |
| </footer> | |
| <button id="feedback-open" class="feedback-fab" type="button" aria-haspopup="dialog" aria-controls="feedback-modal"> | |
| Feedback | |
| </button> | |
| <div id="feedback-modal" class="feedback-modal hidden" role="dialog" aria-modal="true" | |
| aria-labelledby="feedback-modal-title"> | |
| <div class="feedback-modal-card"> | |
| <h3 id="feedback-modal-title">Report an Issue</h3> | |
| <textarea id="feedback-message" class="feedback-textarea" | |
| placeholder="Tell us what went wrong or how we can improve..."></textarea> | |
| <div class="feedback-modal-actions"> | |
| <button id="feedback-cancel" class="feedback-btn feedback-btn-secondary" type="button">Cancel</button> | |
| <button id="feedback-submit" class="feedback-btn feedback-btn-primary" type="button">Submit</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TradingView Lightweight Charts --> | |
| <script | |
| src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js?v=4"></script> | |
| <script src="/static/tickerValidation.js?v=1"></script> | |
| <script src="/static/app.js?v=25"></script> | |
| </body> | |
| </html> | |