-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
219 lines (208 loc) · 13.6 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TUCAN - A molecular identifier and descriptor for all domains of chemistry</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" sizes="32x32">
<script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js" integrity="sha384-sa6uixo5T2AshTFl3QRZOXvvEFbSIqG9u/ZkaIJKa0JflYM9sd0ZkW8GWITluEQH" crossorigin="anonymous"></script>
<script src="https://unpkg.com/openchemlib@8.0.1/dist/openchemlib-minimal.js" integrity="sha384-R1Y9uKVFFVmLDl/p7PRKRXxucaWa1JbRhYnsbayfITSYVqzjCsjeNZlArWBQ57FS" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" rel="stylesheet" integrity="sha384-xeJqLiuOvjUBq3iGOjvSQSIlwrpqjSHXpduPd6rQpuiM3f5/ijby8pCsnbu5S81n" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</head>
<body onload="onBodyLoad()">
<div class="container" style="margin-bottom: 4rem;">
<div class="row mt-1">
<img class="col-3" src="https://raw.githubusercontent.com/TUCAN-nest/TUCAN/HEAD/logo.png">
<h1 class="col-9 mt-auto">Converters</h1>
</div>
<noscript>You need to enable JavaScript!</noscript>
<ul class="nav nav-tabs mt-3" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#tab1-pane" type="button" role="tab" aria-controls="tab1-pane" aria-selected="true">Structure to TUCAN</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#tab2-pane" type="button" role="tab" aria-controls="tab2-pane" aria-selected="false">Molfile to TUCAN</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#tab3-pane" type="button" role="tab" aria-controls="tab3-pane" aria-selected="false">TUCAN to structure</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab4" data-bs-toggle="tab" data-bs-target="#tab4-pane" type="button" role="tab" aria-controls="tab4-pane" aria-selected="false">TUCAN to Molfile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab5" data-bs-toggle="tab" data-bs-target="#tab5-pane" type="button" role="tab" aria-controls="tab5-pane" aria-selected="false">TUCAN to canonical TUCAN</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab6" data-bs-toggle="tab" data-bs-target="#tab6-pane" type="button" role="tab" aria-controls="tab6-pane" aria-selected="false">Funding</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1-pane" role="tabpanel" aria-labelledby="tab1" tabindex="0">
<div class="row mt-1">
<div class="col-lg-8">
<div class="ratio" style="--bs-aspect-ratio:62%;min-height:450px;">
<iframe id="ketcher1" class="w-100" src="ketcher2/react-app/build/index.html" onload="onKetcher1Loaded()"></iframe>
</div>
</div>
<div class="col-lg-4 mt-auto">
<div class="form-check mb-3">
<input id="addImplicitHydrogensCheckbox" class="form-check-input" type="checkbox" value="" checked>
<label class="form-check-label" for="addImplicitHydrogensCheckbox">Add implicit hydrogens</label>
</div>
<button id="btnConvertMolfileFromEditor" class="btn btn-outline-secondary" onclick="convertMolfileFromEditor()" disabled="false">Convert to TUCAN</button>
</div>
</div>
<div class="row mt-3 border rounded bg-light" style="--bs-bg-opacity:.3;">
<div class="border-bottom py-1 px-3">
<small class="font-monospace">Generated TUCAN</small>
</div>
<pre id="tucanFromEditor" class="py-3 px-3 mb-0" style="white-space:pre-wrap;user-select:all;"></pre>
</div>
</div>
<div class="tab-pane fade" id="tab2-pane" role="tabpanel" aria-labelledby="tab2" tabindex="0">
<div class="row mt-1">
<div class="col-lg-8">
<div class="ratio" style="--bs-aspect-ratio:62%;min-height:450px;">
<div class="w-100">
<textarea id="molfileTextarea" class="form-control pe-5 h-100" style="resize:none;" placeholder="Paste or drag-and-drop a Molfile here" ondragover="onTextareaDragover(event)" ondrop="onMolfileTextareaDrop(event)"></textarea>
<button class="btn btn-outline-secondary border-0" style="position:absolute;top:10px;right:10px;" onclick="document.getElementById('molfileTextarea').value = '';writeResult('', 'tucanFromMolfile');clearLog();"><i class="bi bi-trash"></i></button>
</div>
</div>
</div>
<div class="col-lg-4 mt-auto">
<button id="btnConvertMolfileFromTextarea" class="btn btn-outline-secondary" onclick="convertMolfileFromTextarea()" disabled="true">Convert to TUCAN</button>
</div>
</div>
<div class="row mt-3 border rounded bg-light" style="--bs-bg-opacity:.3;">
<div class="border-bottom py-1 px-3">
<small class="font-monospace">Generated TUCAN</small>
</div>
<pre id="tucanFromMolfile" class="py-3 px-3 mb-0" style="white-space:pre-wrap;user-select:all;"></pre>
</div>
</div>
<div class="tab-pane fade" id="tab3-pane" role="tabpanel" aria-labelledby="tab3" tabindex="0">
<div class="row mt-1">
<div class="col-lg-8">
<div class="w-100" style="position:relative;height:150px;">
<textarea id="tucanTextarea1" class="form-control pe-5 h-100" style="resize:none;" placeholder="Paste or drag-and-drop a TUCAN here"></textarea>
<button class="btn btn-outline-secondary border-0" style="position:absolute;top:10px;right:10px;" onclick="document.getElementById('tucanTextarea1').value = '';clearKetcher2();clearLog();document.getElementById('nonCanonicalTucanAlert1').hidden = true;"><i class="bi bi-trash"></i></button>
</div>
</div>
<div class="col-lg-4 mt-auto">
<button id="btnConvertTucanToMolfileInEditor" class="btn btn-outline-secondary" onclick="convertTucanToMolfileInEditor()" disabled="true">Convert and draw structure</button>
</div>
</div>
<div id="nonCanonicalTucanAlert1" class="row mt-3" hidden>
<div class="alert alert-warning col-lg-8" role="alert">
This is not a canonical TUCAN string! The canonical TUCAN string would be:
<br>
<span id="canonicalTucan1" style="white-space:pre-wrap;user-select:all;"></span>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-8">
<div class="ratio" style="--bs-aspect-ratio:62%;min-height:450px;">
<iframe id="ketcher2" class="w-100" src="ketcher2/react-app/build/index.html" onload="onKetcher2Loaded()"></iframe>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab4-pane" role="tabpanel" aria-labelledby="tab4" tabindex="0">
<div class="row mt-1">
<div class="col-lg-8">
<div class="w-100" style="position:relative;height:150px;">
<textarea id="tucanTextarea2" class="form-control pe-5 h-100" style="resize:none;" placeholder="Paste or drag-and-drop a TUCAN here"></textarea>
<button class="btn btn-outline-secondary border-0" style="position:absolute;top:10px;right:10px;" onclick="document.getElementById('tucanTextarea2').value = '';writeResult('', 'molfileFromTucan');clearLog();document.getElementById('nonCanonicalTucanAlert2').hidden = true;"><i class="bi bi-trash"></i></button>
</div>
</div>
<div class="col-lg-4 mt-auto">
<div class="form-check mb-3">
<input id="calcCoordinatesCheckbox" class="form-check-input" type="checkbox" value="" checked>
<label class="form-check-label" for="calcCoordinatesCheckbox">Calculate atom coordinates</label>
</div>
<button id="btnConvertTucanToMolfileInTextarea" class="btn btn-outline-secondary" onclick="convertTucanToMolfileInTextarea()" disabled="true">Convert to Molfile</button>
</div>
</div>
<div id="nonCanonicalTucanAlert2" class="row mt-3" hidden>
<div class="alert alert-warning col-lg-8" role="alert">
This is not a canonical TUCAN string! The canonical TUCAN string would be:
<br>
<span id="canonicalTucan2" style="white-space:pre-wrap;user-select:all;"></span>
</div>
</div>
<div class="row mt-3 border rounded bg-light" style="--bs-bg-opacity:.3;">
<div class="border-bottom py-1 px-3">
<small class="font-monospace">Generated Molfile</small>
</div>
<pre id="molfileFromTucan" class="py-3 px-3 mb-0" style="white-space:pre-wrap;user-select:all;"></pre>
</div>
</div>
<div class="tab-pane fade" id="tab5-pane" role="tabpanel" aria-labelledby="tab5" tabindex="0">
<div class="row mt-1">
<div class="col-lg-8">
<div class="w-100" style="position:relative;height:150px;">
<textarea id="tucanTextarea3" class="form-control pe-5 h-100" style="resize:none;" placeholder="Paste or drag-and-drop a TUCAN here"></textarea>
<button class="btn btn-outline-secondary border-0" style="position:absolute;top:10px;right:10px;" onclick="document.getElementById('tucanTextarea3').value = '';writeResult('', 'canonicalTucan');clearLog();document.getElementById('canonicalTucanAlert').hidden = true;"><i class="bi bi-trash"></i></button>
</div>
</div>
<div class="col-lg-4 mt-auto">
<button id="btnConvertTucanToCanonicalTucan" class="btn btn-outline-secondary" onclick="convertTucanToCanonicalTucan()" disabled="true">Calculate canonical TUCAN</button>
</div>
</div>
<div id="canonicalTucanAlert" class="row mt-3" hidden>
<div class="alert alert-success col-lg-8" role="alert">
This is already a canonical TUCAN string.
</div>
</div>
<div class="row mt-3 border rounded bg-light" style="--bs-bg-opacity:.3;">
<div class="border-bottom py-1 px-3">
<small class="font-monospace">Canonical TUCAN</small>
</div>
<pre id="canonicalTucan" class="py-3 px-3 mb-0" style="white-space:pre-wrap;user-select:all;"></pre>
</div>
</div>
<div class="tab-pane fade" id="tab6-pane" role="tabpanel" aria-labelledby="tab6" tabindex="0">
<div class="row mt-1">
<div class="col-lg-12">
Development of this application has been supported by the following organizations:
</div>
<div class="row mt-5 mb-5">
<div class="col-lg-4">
<a href="https://www.nfdi4chem.de" target="_blank"><i>NFDI4Chem</i></a> funded by the German Research Foundation (project number <a href="https://gepris.dfg.de/gepris/projekt/441958208" target="_blank">441958208</a>).
</div>
<div class="col-lg-3 offset-lg-1">
<a href="https://www.dfg.de" target="_blank">
<img style="width:100%;height:auto;" src="img/dfg_logo.svg" alt="DFG Logo">
</a>
</div>
<div class="col-lg-3 offset-lg-1">
<a href="https://www.nfdi4chem.de" target="_blank">
<img style="width:100%;height:auto;" src="img/nfdi4chem_logo.png" alt="NFDI4Chem Logo">
</a>
<br>
<small>
"<a href="https://commons.wikimedia.org/wiki/File:NFDI4Chem-Logo_mehrfarbig_schwarz.png" target="_blank">Logo of NFDI4Chem</a>" by <i>TimeSpin</i> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.en" target="_blank">CC BY-SA 4.0</a>.
</small>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3 border rounded bg-light" style="--bs-bg-opacity:.3;">
<div class="border-bottom py-1 px-3">
<small class="font-monospace">Log message</small>
</div>
<pre id="log" class="py-3 px-3 mb-0" style="white-space:pre-wrap"></pre>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light" style="position:fixed;bottom:0;text-align:center;width:100%;">
<div style="container">
<a href="https://github.com/TUCAN-nest/TUCAN" target="_blank" class="link-secondary me-3">TUCAN GitHub Project</a>
<a href="https://github.com/TUCAN-nest/TUCAN/issues" target="_blank" class="link-secondary">Issues</a>
</div>
</footer>
<script src="tucanweb.js"></script>
</body>
</html>