| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Academic Project Advisor Bot</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .chat-container { |
| height: calc(100vh - 200px); |
| overflow-y: auto; |
| scrollbar-width: thin; |
| scrollbar-color: #4b5563 #1f2937; |
| } |
| .chat-container::-webkit-scrollbar { |
| width: 8px; |
| } |
| .chat-container::-webkit-scrollbar-track { |
| background: #1f2937; |
| } |
| .chat-container::-webkit-scrollbar-thumb { |
| background-color: #4b5563; |
| border-radius: 4px; |
| } |
| .typing-indicator::after { |
| content: '...'; |
| animation: typing 1.5s infinite; |
| } |
| @keyframes typing { |
| 0% { content: '.'; } |
| 33% { content: '..'; } |
| 66% { content: '...'; } |
| } |
| .call-card { |
| transition: all 0.3s ease; |
| } |
| .call-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| .modal { |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
| .modal-content { |
| max-height: calc(100vh - 100px); |
| } |
| .data-table { |
| font-family: monospace; |
| } |
| .data-table th { |
| text-align: left; |
| position: sticky; |
| top: 0; |
| background-color: #1f2937; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100"> |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| <header class="flex items-center justify-between mb-8"> |
| <div class="flex items-center space-x-4"> |
| <div class="bg-blue-600 p-3 rounded-full"> |
| <i class="fas fa-graduation-cap text-white text-2xl"></i> |
| </div> |
| <div> |
| <h1 class="text-2xl font-bold">Academic Project Advisor</h1> |
| <p class="text-gray-400">European Research Funding Expert</p> |
| </div> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button id="dataBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition"> |
| <i class="fas fa-database"></i> |
| <span>Check Data</span> |
| </button> |
| <button id="refreshBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition"> |
| <i class="fas fa-sync-alt"></i> |
| <span>Refresh Data</span> |
| </button> |
| <div id="lastUpdated" class="text-sm text-gray-400 px-3 py-1 bg-gray-800 rounded-lg"> |
| Last updated: <span id="updateTime">Loading...</span> |
| </div> |
| </div> |
| </header> |
|
|
| <div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden"> |
| <div id="chatContainer" class="chat-container p-6 space-y-4"> |
| <div class="flex justify-start"> |
| <div class="max-w-3/4 bg-gray-700 rounded-lg p-4"> |
| <p class="font-medium text-blue-400">Academic Project Advisor</p> |
| <p>Hello! I'm your European research funding advisor. I can help you find suitable funding calls from ERC, Horizon Europe, COST and other programs based on your CV and project ideas.</p> |
| <p class="mt-2">How can I assist you today?</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="border-t border-gray-700 p-4 bg-gray-800"> |
| <div class="flex items-center space-x-2"> |
| <input id="userInput" type="text" placeholder="Ask about funding opportunities..." class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button id="sendBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| <button id="uploadBtn" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-3 rounded-lg transition flex items-center space-x-2"> |
| <i class="fas fa-upload"></i> |
| <span>Upload CV</span> |
| </button> |
| </div> |
| <div id="uploadSection" class="mt-4 hidden"> |
| <div class="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center"> |
| <i class="fas fa-file-alt text-4xl text-gray-400 mb-3"></i> |
| <p class="mb-4">Upload your CV or project documents (PDF, DOCX, CSV)</p> |
| <input type="file" id="fileInput" class="hidden" accept=".pdf,.docx,.csv"> |
| <label for="fileInput" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg cursor-pointer inline-block"> |
| Select Files |
| </label> |
| <div id="fileName" class="mt-2 text-sm text-gray-400"></div> |
| </div> |
| <div class="flex justify-end mt-4"> |
| <button id="cancelUpload" class="text-gray-400 hover:text-gray-300 mr-4">Cancel</button> |
| <button id="submitUpload" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg disabled:opacity-50" disabled> |
| Process Document |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8"> |
| <h2 class="text-xl font-bold mb-4">Quick Examples</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
| <button class="example-btn bg-gray-800 hover:bg-gray-700 p-4 rounded-lg transition"> |
| "ERC Consolidator için uygun muyum?" |
| </button> |
| <button class="example-btn bg-gray-800 hover:bg-gray-700 p-4 rounded-lg transition"> |
| "Show me open Cluster-6 calls on alternative proteins" |
| </button> |
| <button class="example-btn bg-gray-800 hover:bg-gray-700 p-4 rounded-lg transition"> |
| "AI ethics interdisciplinary project suggestions" |
| </button> |
| <button class="example-btn bg-gray-800 hover:bg-gray-700 p-4 rounded-lg transition"> |
| "Latest Horizon Europe health calls" |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="dataModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 opacity-0 pointer-events-none modal"> |
| <div class="bg-gray-800 rounded-xl shadow-2xl w-full max-w-5xl modal-content overflow-hidden"> |
| <div class="flex items-center justify-between p-4 border-b border-gray-700"> |
| <h3 class="text-xl font-bold">Knowledge Base Inspection</h3> |
| <button id="closeModal" class="text-gray-400 hover:text-gray-300"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="p-4 overflow-auto"> |
| <div class="mb-4"> |
| <div class="flex items-center space-x-4 mb-4"> |
| <div class="flex-1"> |
| <label class="block text-sm font-medium mb-1">Search Knowledge Base</label> |
| <input type="text" id="dataSearch" placeholder="Filter questions or answers..." class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium mb-1">Data Type</label> |
| <select id="dataType" class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2"> |
| <option value="all">All Data</option> |
| <option value="questions">Questions Only</option> |
| <option value="answers">Answers Only</option> |
| <option value="calls">Funding Calls</option> |
| </select> |
| </div> |
| </div> |
| <div class="bg-gray-700 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm font-medium">Knowledge Base Statistics</span> |
| <span class="text-xs bg-blue-600 px-2 py-1 rounded">Simulated Data</span> |
| </div> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-center"> |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="text-sm text-gray-400">Total Entries</div> |
| <div class="text-xl font-bold" id="totalEntries">24</div> |
| </div> |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="text-sm text-gray-400">ERC Calls</div> |
| <div class="text-xl font-bold" id="ercCalls">5</div> |
| </div> |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="text-sm text-gray-400">Horizon Calls</div> |
| <div class="text-xl font-bold" id="horizonCalls">12</div> |
| </div> |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="text-sm text-gray-400">Other Calls</div> |
| <div class="text-xl font-bold" id="otherCalls">7</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="overflow-auto"> |
| |
| </html> |
