| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PIOE 2.0 - Personal Advantage Engine</title> |
| <link rel="stylesheet" href="/static/styles.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| </head> |
|
|
| <body> |
| <div class="app"> |
| |
| <nav class="sidebar"> |
| <div class="logo"> |
| <span class="logo-icon">[P]</span> |
| <span class="logo-text">PIOE 2.0</span> |
| </div> |
|
|
| <div class="nav-section"> |
| <span class="nav-label">Dashboard</span> |
| <a href="#" class="nav-item active" data-view="feed"> |
| <span class="icon">[F]</span> Opportunity Feed |
| </a> |
| <a href="#" class="nav-item" data-view="digest"> |
| <span class="icon">[D]</span> Daily Brief |
| </a> |
| <a href="#" class="nav-item" data-view="urgent"> |
| <span class="icon">[!]</span> Urgent |
| </a> |
| <a href="#" class="nav-item" id="open-chat"> |
| <span class="icon">[AI]</span> AI Search |
| </a> |
| </div> |
|
|
| <div class="nav-section"> |
| <span class="nav-label">Categories</span> |
| <a href="#" class="nav-item" data-category="hackathon">[H] Hackathons</a> |
| <a href="#" class="nav-item" data-category="internship">[I] Internships</a> |
| <a href="#" class="nav-item" data-category="scholarship">[S] Scholarships</a> |
| <a href="#" class="nav-item" data-category="research">[R] Research</a> |
| <a href="#" class="nav-item" data-category="job">[J] Jobs</a> |
| <a href="#" class="nav-item" data-category="grant">[G] Grants</a> |
| <a href="#" class="nav-item" data-category="ecosystem_grant">[E] Ecosystem Grants</a> |
| <a href="#" class="nav-item" data-category="bounty">[B] Bounties</a> |
| <a href="#" class="nav-item" data-category="open_source">[O] Open Source</a> |
| </div> |
|
|
| <div class="nav-section"> |
| <span class="nav-label">System</span> |
| <a href="#" class="nav-item" id="run-ingestion"> |
| <span class="icon">[>]</span> Run Ingestion |
| </a> |
| <a href="#" class="nav-item" id="view-stats"> |
| <span class="icon">[#]</span> Statistics |
| </a> |
| </div> |
| </nav> |
|
|
| |
| <main class="main-content"> |
| <header class="header"> |
| <div class="header-title"> |
| <h1 id="page-title">Opportunity Feed</h1> |
| <p class="subtitle" id="page-subtitle">High-signal opportunities detected by PIOE</p> |
| </div> |
| <div class="header-actions"> |
| <select id="domain-filter" class="filter-select"> |
| <option value="">All Domains</option> |
| <option value="ai">AI</option> |
| <option value="computer_vision">Computer Vision</option> |
| <option value="robotics">Robotics</option> |
| <option value="finance">Finance</option> |
| <option value="crypto">Crypto</option> |
| <option value="academia">Academia</option> |
| </select> |
| <select id="score-filter" class="filter-select"> |
| <option value="0">All Scores</option> |
| <option value="0.5">Score > 0.5</option> |
| <option value="0.7">Score > 0.7</option> |
| <option value="0.8">Score > 0.8</option> |
| </select> |
| </div> |
| </header> |
|
|
| <div class="content-area"> |
| |
| <div class="stats-banner" id="stats-banner"> |
| <div class="stat-card"> |
| <span class="stat-value" id="total-count">-</span> |
| <span class="stat-label">Total</span> |
| </div> |
| <div class="stat-card"> |
| <span class="stat-value" id="new-count">-</span> |
| <span class="stat-label">New</span> |
| </div> |
| <div class="stat-card highlight"> |
| <span class="stat-value" id="hackathon-count">-</span> |
| <span class="stat-label">Hackathons</span> |
| </div> |
| <div class="stat-card"> |
| <span class="stat-value" id="internship-count">-</span> |
| <span class="stat-label">Internships</span> |
| </div> |
| </div> |
|
|
| |
| <div class="feed" id="opportunity-feed"> |
| <div class="loading">Loading opportunities...</div> |
| </div> |
|
|
| |
| <div class="digest-view" id="digest-view" style="display: none;"> |
| <div class="digest-content" id="digest-content"></div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div class="modal" id="detail-modal"> |
| <div class="modal-backdrop"></div> |
| <div class="modal-content"> |
| <button class="modal-close">×</button> |
| <div id="modal-body"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="chat-panel" id="chat-panel"> |
| <div class="chat-header"> |
| <span>PIOE AI Search</span> |
| <button class="chat-close" onclick="app.toggleChat()">×</button> |
| </div> |
| <div class="chat-messages" id="chat-messages"> |
| <div class="chat-message bot"> |
| <p>Hi! I'm PIOE AI. Ask me to find opportunities:</p> |
| <ul style="margin: 8px 0; padding-left: 20px; font-size: 12px; opacity: 0.8"> |
| <li>"Find hackathons in Nigeria"</li> |
| <li>"What grants are available for AI?"</li> |
| <li>"Show high ROI opportunities"</li> |
| <li>"Internships in robotics"</li> |
| </ul> |
| </div> |
| </div> |
| <div class="chat-input-area"> |
| <input type="text" id="chat-input" placeholder="Ask about opportunities..." |
| onkeypress="if(event.key==='Enter') app.sendChatMessage()"> |
| <button onclick="app.sendChatMessage()">Send</button> |
| </div> |
| </div> |
|
|
| |
| <button class="chat-fab" id="chat-fab" onclick="app.toggleChat()"> |
| AI |
| </button> |
|
|
| <script src="/static/app.js"></script> |
| </body> |
|
|
| </html> |
