File size: 10,536 Bytes
1bf72a0 3028aeb 1bf72a0 3028aeb 1bf72a0 3028aeb 1bf72a0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 |
<!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>
<!-- Data Inspection Modal -->
<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> |