-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (109 loc) · 6.01 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
<title>Search publication(s) that cite all these</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module">
import {
addInput,
removeInput,
clearInput,
copyToClipboard,
findCommonCitations,
updateClearButtonVisibility,
ensureRemoveButton,
initialisePage
} from './js/main.js';
// Export functions to window for onclick handlers
window.addInput = addInput;
window.removeInput = removeInput;
window.clearInput = clearInput;
window.copyToClipboard = copyToClipboard;
window.findCommonCitations = findCommonCitations;
window.updateClearButtonVisibility = updateClearButtonVisibility;
window.ensureRemoveButton = ensureRemoveButton;
// Initialize page when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
window.isInitialized = false;
window.lastUrlUpdate = Date.now();
initialisePage();
document.querySelectorAll('.article-input').forEach(textarea => {
textarea.addEventListener('input', function() {
updateClearButtonVisibility(this);
});
updateClearButtonVisibility(textarea);
});
});
// Handle popstate events (back/forward navigation)
window.addEventListener('popstate', function() {
// Only reinitialise if this wasn't triggered by our own URL update
if (Date.now() - window.lastUrlUpdate > 100) {
window.isInitialized = false;
initialisePage();
}
});
// Event listeners for search via Enter key
document.addEventListener('keypress', function(event) {
if (event.target.classList.contains('article-input') && event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
findCommonCitations();
}
});
</script>
</head>
<body class="bg-gray-50 min-h-screen">
<header class="relative mb-4 sm:mb-8 pt-4 sm:pt-8">
<h1 class="text-base sm:text-lg text-gray-800 text-left sm:text-center px-4 sm:px-16 max-w-[250px] sm:max-w-none">
<a href="index.html" id="home" class="text-grey-600 hover:underline inline-block text-center sm:inline sm:text-left">
<span class="sm:hidden">Search publication(s)<br>that cite all these</span>
<span class="hidden sm:inline">Search publication(s) that cite all these</span>
</a>
</h1>
<div class="absolute right-4 sm:right-10 top-4 sm:top-8">
<a href="raisondetre.html" id="about-link" class="text-grey-600 hover:underline">About</a>
</div>
</header>
<div id="errorMessage" class="hidden max-w-2xl mx-auto mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg"></div>
<div class="max-w-[1400px] mx-auto">
<div class="max-w-2xl mx-auto">
<div id="inputContainer" class="space-y-4 flex flex-col items-center">
<div class="input-group flex gap-2 w-full max-w-[800px] px-4 sm:px-0">
<div class="relative flex-grow">
<textarea class="article-input block w-full px-4 py-2 text-base text-gray-900 border border-gray-300 rounded-lg bg-gray-50 resize-y" placeholder="Title, DOI, or PubMed/ArXiv URL/ID" rows="2"></textarea>
<button class="clear-input absolute right-2 top-2 text-gray-400 hover:text-gray-600 hidden" onclick="window.clearInput(this)">
<span class="text-xl">×</span>
</button>
</div>
</div>
<div class="input-group flex gap-2 w-full max-w-[800px] px-4 sm:px-0">
<div class="relative flex-grow">
<textarea class="article-input block w-full px-4 py-2 text-base text-gray-900 border border-gray-300 rounded-lg bg-gray-50 resize-y" placeholder="Title, DOI, or PubMed/ArXiv URL/ID" rows="2"></textarea>
<button class="clear-input absolute right-2 top-2 text-gray-400 hover:text-gray-600 hidden" onclick="window.clearInput(this)">
<span class="text-xl">×</span>
</button>
</div>
<button class="remove-input h-auto bg-white hover:bg-red-500 text-gray-600 hover:text-white px-4 rounded-lg transition-colors flex-shrink-0 group relative flex items-center justify-center" onclick="window.removeInput(this)">
<span class="text-xl">−</span>
<span class="invisible group-hover:visible absolute -top-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-sm py-1 px-2 rounded whitespace-nowrap z-10">Remove</span>
</button>
</div>
</div>
<div class="flex justify-center space-x-4 mt-8">
<button onclick="window.findCommonCitations()" class="bg-blue-500 hover:bg-blue-700 text-white h-12 px-6 text-lg rounded-lg transition-colors flex items-center justify-center">
<img src="assets/search icon.png" alt="Search" class="h-6 w-6">
</button>
<button onclick="window.addInput()" class="bg-white hover:bg-green-600 hover:text-white text-slate-600 h-12 px-6 text-lg rounded-lg transition-colors flex items-center justify-center">
Add a publication
</button>
</div>
</div>
<div id="results" class="mt-8 container mx-auto px-4 max-w-[1200px] mx-auto">
<div class="bg-white shadow-sm rounded-lg overflow-hidden">
</div>
</div>
</div>
</body>
</html>