|
|
<!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> |
