File size: 26,255 Bytes
b5a1063
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Academic Funding Assistant</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>
        .gradient-bg {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        }
        .chat-container {
            height: 70vh;
            scrollbar-width: thin;
            scrollbar-color: #4fd1c5 transparent;
        }
        .chat-container::-webkit-scrollbar {
            width: 6px;
        }
        .chat-container::-webkit-scrollbar-track {
            background: transparent;
        }
        .chat-container::-webkit-scrollbar-thumb {
            background-color: #4fd1c5;
            border-radius: 20px;
        }
        .typing-indicator::after {
            content: '...';
            animation: typing-dots 1.5s infinite;
        }
        @keyframes typing-dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }
        .program-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body class="gradient-bg min-h-screen text-white font-sans">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- Header -->
        <header class="flex flex-col md:flex-row justify-between items-center mb-8">
            <div class="flex items-center mb-4 md:mb-0">
                <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-graduation-cap text-xl"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold">Academic Funding Assistant</h1>
                    <p class="text-gray-300">Your guide to European research funding</p>
                </div>
            </div>
            <div class="flex space-x-2">
                <button class="bg-cyan-600 hover:bg-cyan-700 px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-user-graduate mr-2"></i> Researcher Profile
                </button>
                <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-bookmark mr-2"></i> Saved Programs
                </button>
            </div>
        </header>

        <!-- Main Chat Interface -->
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl overflow-hidden shadow-xl">
            <!-- Chat Header -->
            <div class="bg-black bg-opacity-20 px-6 py-4 border-b border-gray-700 flex items-center">
                <div class="w-10 h-10 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-robot"></i>
                </div>
                <div>
                    <h2 class="font-semibold">Funding Assistant</h2>
                    <p class="text-xs text-gray-300">Online</p>
                </div>
                <div class="ml-auto flex space-x-2">
                    <button class="w-8 h-8 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </div>
            </div>

            <!-- Chat Messages -->
            <div class="chat-container overflow-y-auto p-4 space-y-4">
                <!-- Welcome Message -->
                <div class="flex">
                    <div class="w-8 h-8 bg-cyan-500 rounded-full flex-shrink-0 flex items-center justify-center mr-3">
                        <i class="fas fa-robot text-sm"></i>
                    </div>
                    <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 max-w-[80%]">
                        <p class="font-medium mb-1">Hello, Dr. Researcher!</p>
                        <p>I'm your AI assistant for European research funding programs. I can help you find information about:</p>
                        <ul class="list-disc pl-5 mt-2 space-y-1">
                            <li>Horizon Europe calls and deadlines</li>
                            <li>ERC grant requirements and success rates</li>
                            <li>Marie Skłodowska-Curie Actions</li>
                            <li>National funding opportunities</li>
                        </ul>
                        <p class="mt-2">How can I assist you with your research funding needs today?</p>
                    </div>
                </div>

                <!-- Suggested Questions -->
                <div class="flex justify-center">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 w-full max-w-2xl">
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-3 rounded-lg text-sm">
                            What are the upcoming Horizon Europe deadlines?
                        </button>
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-3 rounded-lg text-sm">
                            Explain the difference between ERC Starting and Consolidator grants
                        </button>
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-3 rounded-lg text-sm">
                            What MSCA postdoctoral fellowship opportunities exist in my field?
                        </button>
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-3 rounded-lg text-sm">
                            Help me prepare a competitive ERC proposal
                        </button>
                    </div>
                </div>

                <!-- Sample Response -->
                <div class="flex justify-end">
                    <div class="bg-gradient-to-r from-cyan-600 to-blue-600 rounded-lg p-4 max-w-[80%]">
                        <p>I'm looking for information about ERC Advanced Grants for my work in quantum computing.</p>
                    </div>
                </div>

                <!-- Sample Answer -->
                <div class="flex">
                    <div class="w-8 h-8 bg-cyan-500 rounded-full flex-shrink-0 flex items-center justify-center mr-3">
                        <i class="fas fa-robot text-sm"></i>
                    </div>
                    <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 max-w-[80%]">
                        <p class="font-medium mb-2">ERC Advanced Grants - Quantum Computing</p>
                        <div class="program-card bg-gray-800 p-4 rounded-lg mb-3 transition-all duration-300">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="font-semibold text-cyan-400">ERC Advanced Grants 2024</h3>
                                    <p class="text-sm text-gray-300">For established research leaders</p>
                                </div>
                                <span class="bg-green-900 text-green-300 text-xs px-2 py-1 rounded">Open</span>
                            </div>
                            <div class="mt-3 text-sm">
                                <p class="flex items-center mb-1"><i class="fas fa-euro-sign mr-2 text-gray-400"></i> Up to €2.5M for 5 years</p>
                                <p class="flex items-center mb-1"><i class="fas fa-calendar-alt mr-2 text-gray-400"></i> Deadline: 31 August 2024</p>
                                <p class="flex items-center"><i class="fas fa-chart-line mr-2 text-gray-400"></i> Success rate: ~12%</p>
                            </div>
                            <div class="mt-3 pt-3 border-t border-gray-700">
                                <p class="text-xs text-gray-400">Quantum computing projects have received 7 Advanced Grants in the last 3 years, with average funding of €2.1M.</p>
                            </div>
                        </div>
                        <p>For quantum computing specifically, the ERC looks for proposals that demonstrate:</p>
                        <ul class="list-disc pl-5 mt-2 text-sm space-y-1">
                            <li>Breakthrough potential in quantum algorithms or error correction</li>
                            <li>Clear pathway to practical implementation</li>
                            <li>Interdisciplinary approaches combining physics, CS, and engineering</li>
                        </ul>
                        <button class="mt-3 bg-cyan-600 hover:bg-cyan-700 px-3 py-1 rounded text-sm flex items-center">
                            <i class="fas fa-download mr-1"></i> Download Quantum Computing ERC Guide
                        </button>
                    </div>
                </div>

                <!-- Typing Indicator -->
                <div class="flex" id="typing-indicator" style="display: none;">
                    <div class="w-8 h-8 bg-cyan-500 rounded-full flex-shrink-0 flex items-center justify-center mr-3">
                        <i class="fas fa-robot text-sm"></i>
                    </div>
                    <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 max-w-[50%]">
                        <p class="typing-indicator">Assistant is typing</p>
                    </div>
                </div>
            </div>

            <!-- Input Area -->
            <div class="border-t border-gray-700 p-4 bg-black bg-opacity-20">
                <div class="flex items-center">
                    <button class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center mr-2">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <div class="flex-1 relative">
                        <input 
                            type="text" 
                            id="chat-input" 
                            placeholder="Ask about Horizon Europe, ERC grants, MSCA..." 
                            class="w-full bg-gray-700 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-cyan-500"
                        >
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 w-8 h-8 rounded-full bg-cyan-600 hover:bg-cyan-700 flex items-center justify-center">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                    <button class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center ml-2">
                        <i class="fas fa-microphone"></i>
                    </button>
                </div>
                <div class="flex justify-between mt-2 text-xs text-gray-400">
                    <div>
                        <button class="hover:text-cyan-400 mr-2">
                            <i class="fas fa-lightbulb mr-1"></i> Funding Tips
                        </button>
                        <button class="hover:text-cyan-400">
                            <i class="fas fa-calendar-check mr-1"></i> Deadlines
                        </button>
                    </div>
                    <div>
                        <span>Press <kbd class="bg-gray-700 px-1 rounded"></kbd> to send</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Access -->
        <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-4">
            <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg flex items-center transition-colors">
                <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-atom"></i>
                </div>
                <div>
                    <h3 class="font-medium">ERC Grants</h3>
                    <p class="text-xs text-gray-400">Excellence-based funding</p>
                </div>
            </a>
            <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg flex items-center transition-colors">
                <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-globe-europe"></i>
                </div>
                <div>
                    <h3 class="font-medium">Horizon Europe</h3>
                    <p class="text-xs text-gray-400">Cluster calls</p>
                </div>
            </a>
            <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg flex items-center transition-colors">
                <div class="w-10 h-10 bg-green-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-user-graduate"></i>
                </div>
                <div>
                    <h3 class="font-medium">MSCA</h3>
                    <p class="text-xs text-gray-400">Fellowships & staff exchanges</p>
                </div>
            </a>
            <a href="#" class="bg-gray-800 hover:bg-gray-700 p-4 rounded-lg flex items-center transition-colors">
                <div class="w-10 h-10 bg-yellow-600 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-flag"></i>
                </div>
                <div>
                    <h3 class="font-medium">National Funds</h3>
                    <p class="text-xs text-gray-400">Country-specific programs</p>
                </div>
            </a>
        </div>
    </div>

    <script>
        // Chat functionality
        document.addEventListener('DOMContentLoaded', function() {
            const chatInput = document.getElementById('chat-input');
            const chatContainer = document.querySelector('.chat-container');
            const typingIndicator = document.getElementById('typing-indicator');
            
            // Handle suggestion buttons
            document.querySelectorAll('.suggestion-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const question = this.textContent.trim();
                    chatInput.value = question;
                    chatInput.focus();
                });
            });
            
            // Handle sending messages
            chatInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && this.value.trim() !== '') {
                    sendMessage(this.value.trim());
                    this.value = '';
                }
            });
            
            function sendMessage(message) {
                // Add user message to chat
                const userMessage = document.createElement('div');
                userMessage.className = 'flex justify-end';
                userMessage.innerHTML = `
                    <div class="bg-gradient-to-r from-cyan-600 to-blue-600 rounded-lg p-4 max-w-[80%]">
                        <p>${message}</p>
                    </div>
                `;
                chatContainer.appendChild(userMessage);
                
                // Show typing indicator
                typingIndicator.style.display = 'flex';
                chatContainer.scrollTop = chatContainer.scrollHeight;
                
                // Simulate AI response after delay
                setTimeout(() => {
                    typingIndicator.style.display = 'none';
                    
                    // Create sample response based on question
                    let response = '';
                    if (message.toLowerCase().includes('horizon')) {
                        response = createHorizonResponse();
                    } else if (message.toLowerCase().includes('erc')) {
                        response = createERCResponse();
                    } else if (message.toLowerCase().includes('msca') || message.toLowerCase().includes('marie')) {
                        response = createMSCAResponse();
                    } else {
                        response = createGenericResponse();
                    }
                    
                    const aiMessage = document.createElement('div');
                    aiMessage.className = 'flex';
                    aiMessage.innerHTML = `
                        <div class="w-8 h-8 bg-cyan-500 rounded-full flex-shrink-0 flex items-center justify-center mr-3">
                            <i class="fas fa-robot text-sm"></i>
                        </div>
                        <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 max-w-[80%]">
                            ${response}
                        </div>
                    `;
                    chatContainer.appendChild(aiMessage);
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5s
            }
            
            function createHorizonResponse() {
                return `
                    <p class="font-medium mb-2">Horizon Europe Funding Opportunities</p>
                    <div class="program-card bg-gray-800 p-4 rounded-lg mb-3">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="font-semibold text-cyan-400">Cluster 4 - Digital, Industry & Space</h3>
                                <p class="text-sm text-gray-300">2024 Calls</p>
                            </div>
                            <span class="bg-green-900 text-green-300 text-xs px-2 py-1 rounded">Open</span>
                        </div>
                        <div class="mt-3 text-sm">
                            <p class="flex items-center mb-1"><i class="fas fa-euro-sign mr-2 text-gray-400"></i> Budget: €1.8B total</p>
                            <p class="flex items-center mb-1"><i class="fas fa-calendar-alt mr-2 text-gray-400"></i> Deadline: 15 October 2024</p>
                            <p class="flex items-center"><i class="fas fa-users mr-2 text-gray-400"></i> Consortium: 3+ partners from different countries</p>
                        </div>
                    </div>
                    <p class="text-sm">Key focus areas for 2024 include:</p>
                    <ul class="list-disc pl-5 mt-2 text-sm space-y-1">
                        <li>Quantum technologies and infrastructure</li>
                        <li>AI and robotics for industry</li>
                        <li>Next-gen computing and big data</li>
                        <li>Advanced materials and manufacturing</li>
                    </ul>
                    <button class="mt-3 bg-cyan-600 hover:bg-cyan-700 px-3 py-1 rounded text-sm flex items-center">
                        <i class="fas fa-file-alt mr-1"></i> View All Cluster 4 Topics
                    </button>
                `;
            }
            
            function createERCResponse() {
                return `
                    <p class="font-medium mb-2">European Research Council Grants</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
                        <div class="program-card bg-gray-800 p-3 rounded-lg">
                            <h3 class="font-semibold text-sm text-cyan-400">Starting Grants</h3>
                            <p class="text-xs text-gray-300 mt-1">2-7 years post-PhD</p>
                            <p class="text-xs mt-2"><i class="fas fa-euro-sign mr-1"></i> Up to €1.5M (5y)</p>
                        </div>
                        <div class="program-card bg-gray-800 p-3 rounded-lg">
                            <h3 class="font-semibold text-sm text-cyan-400">Consolidator Grants</h3>
                            <p class="text-xs text-gray-300 mt-1">7-12 years post-PhD</p>
                            <p class="text-xs mt-2"><i class="fas fa-euro-sign mr-1"></i> Up to €2M (5y)</p>
                        </div>
                        <div class="program-card bg-gray-800 p-3 rounded-lg">
                            <h3 class="font-semibold text-sm text-cyan-400">Advanced Grants</h3>
                            <p class="text-xs text-gray-300 mt-1">Established PIs</p>
                            <p class="text-xs mt-2"><i class="fas fa-euro-sign mr-1"></i> Up to €2.5M (5y)</p>
                        </div>
                        <div class="program-card bg-gray-800 p-3 rounded-lg">
                            <h3 class="font-semibold text-sm text-cyan-400">Synergy Grants</h3>
                            <p class="text-xs text-gray-300 mt-1">2-4 PIs collaborating</p>
                            <p class="text-xs mt-2"><i class="fas fa-euro-sign mr-1"></i> Up to €10M (6y)</p>
                        </div>
                    </div>
                    <p class="text-sm">ERC evaluates proposals based on:</p>
                    <ul class="list-disc pl-5 mt-2 text-sm space-y-1">
                        <li>Scientific excellence (90% weight)</li>
                        <li>Pioneering nature of the research</li>
                        <li>PI's track record and potential</li>
                    </ul>
                    <button class="mt-3 bg-cyan-600 hover:bg-cyan-700 px-3 py-1 rounded text-sm flex items-center">
                        <i class="fas fa-chart-bar mr-1"></i> View Success Rates by Discipline
                    </button>
                `;
            }
            
            function createMSCAResponse() {
                return `
                    <p class="font-medium mb-2">Marie Skłodowska-Curie Actions</p>
                    <div class="program-card bg-gray-800 p-4 rounded-lg mb-3">
                        <div class="flex justify-between items-start">
                            <div>
                                <h3 class="font-semibold text-cyan-400">Postdoctoral Fellowships 2024</h3>
                                <p class="text-sm text-gray-300">European & Global Fellowships</p>
                            </div>
                            <span class="bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded">Opening Soon</span>
                        </div>
                        <div class="mt-3 text-sm">
                            <p class="flex items-center mb-1"><i class="fas fa-euro-sign mr-2 text-gray-400"></i> €4,880-€6,760/month (depending on country)</p>
                            <p class="flex items-center mb-1"><i class="fas fa-calendar-alt mr-2 text-gray-400"></i> Expected deadline: 11 September 2024</p>
                            <p class="flex items-center"><i class="fas fa-user-graduate mr-2 text-gray-400"></i> PhD required, max 8 years experience</p>
                        </div>
                    </div>
                    <p class="text-sm">Key aspects of MSCA:</p>
                    <ul class="list-disc pl-5 mt-2 text-sm space-y-1">
                        <li>Mobility requirement: cannot have lived/worked in host country for >12 months in last 3 years</li>
                        <li>Focus on career development and training</li>
                        <li>No predefined research topics - bottom-up approach</li>
                    </ul>
                    <button class="mt-3 bg-cyan-600 hover:bg-cyan-700 px-3 py-1 rounded text-sm flex items-center">
                        <i class="fas fa-search mr-1"></i> Find Potential Host Institutions
                    </button>
                `;
            }
            
            function createGenericResponse() {
                return `
                    <p class="font-medium mb-2">Research Funding Information</p>
                    <p class="text-sm mb-3">I can provide detailed information about various European research funding programs. Could you please specify which program or aspect you're interested in? For example:</p>
                    <ul class="list-disc pl-5 text-sm space-y-1 mb-3">
                        <li>Specific call deadlines and requirements</li>
                        <li>Eligibility criteria for your career stage</li>
                        <li>Success rates in your research area</li>
                        <li>Proposal writing tips</li>
                    </ul>
                    <p class="text-sm">Or you might want to explore one of these popular topics:</p>
                    <div class="grid grid-cols-2 gap-2 mt-3">
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-2 rounded text-xs">
                            ERC evaluation criteria
                        </button>
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-2 rounded text-xs">
                            Horizon Europe work programs
                        </button>
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-2 rounded text-xs">
                            MSCA application timeline
                        </button>
                        <button class="suggestion-btn bg-gray-700 hover:bg-gray-600 text-left p-2 rounded text-xs">
                            National funding matches
                        </button>
                    </div>
                `;
            }
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Dragon09/odt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>