-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
405 lines (405 loc) · 16.7 KB
/
index.html
File metadata and controls
405 lines (405 loc) · 16.7 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Human DNA Visualizer</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body
class="flex flex-col min-h-screen md:h-screen font-sans text-slate-800 bg-slate-100 antialiased overflow-x-hidden md:overflow-hidden"
>
<div
class="flex flex-1 flex-col md:flex-row w-full h-full md:min-h-0 p-4 md:p-6 gap-6"
>
<aside
class="hide-scrollbar w-full md:w-80 flex flex-col h-full bg-white rounded-2xl p-6 md:overflow-y-auto shrink-0 relative z-10 overscroll-y-none"
>
<header>
<h1
class="text-2xl font-bold text-teal-600 text-center mb-8 tracking-wide"
>
DNA Visualizer
</h1>
</header>
<label
for="rnaToggle"
class="flex items-center justify-between bg-purple-50 hover:bg-purple-100 rounded-lg p-3 mb-6 cursor-pointer group transition-all duration-300 ease-in-out select-none"
>
<div
class="text-xs font-semibold text-purple-700 uppercase tracking-wider flex items-center gap-2"
>
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
RNA Mode
</div>
<div class="relative flex items-center justify-center w-5 h-5">
<input type="checkbox" id="rnaToggle" class="peer sr-only" />
<div
class="absolute inset-0 border-2 border-purple-300 rounded peer-checked:bg-purple-600 peer-checked:border-purple-600 transition-all duration-300 ease-in-out bg-white"
></div>
<svg
class="relative z-10 w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-300 pointer-events-none"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3"
d="M5 13l4 4L19 7"
></path>
</svg>
</div>
</label>
<div
id="dnaFormSection"
class="flex flex-col gap-2 mb-6 transition-all duration-300 ease-in-out"
>
<label
for="dnaForm"
class="text-xs font-semibold text-slate-500 uppercase tracking-wider block select-none"
>DNA Form / Structure</label
>
<div class="relative" id="customSelectWrapper">
<select id="dnaForm" class="hidden">
<option value="B">B-DNA (Standard)</option>
<option value="A">A-DNA (Compact)</option>
<option value="Z">Z-DNA (Left-handed)</option>
</select>
<button
type="button"
id="customSelectBtn"
aria-haspopup="listbox"
aria-expanded="false"
class="w-full flex justify-between items-center p-3 bg-slate-50 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none transition-all duration-300 ease-in-out text-sm text-slate-700 cursor-pointer select-none"
>
<span id="customSelectValue">B-DNA (Standard)</span>
<svg
id="customSelectIcon"
class="h-4 w-4 text-slate-400 transition-transform duration-300 ease-in-out"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<ul
id="customSelectList"
class="absolute left-0 right-0 top-full mt-2 bg-white rounded-lg shadow-lg z-50 overflow-hidden transform opacity-0 scale-95 pointer-events-none transition-all duration-300 origin-top"
>
<li
data-value="B"
class="p-3 text-sm text-slate-700 hover:bg-slate-50 cursor-pointer transition-colors bg-teal-50/50"
>
B-DNA (Standard)
</li>
<li
data-value="A"
class="p-3 text-sm text-slate-700 hover:bg-slate-50 cursor-pointer transition-colors"
>
A-DNA (Compact)
</li>
<li
data-value="Z"
class="p-3 text-sm text-slate-700 hover:bg-slate-50 cursor-pointer transition-colors"
>
Z-DNA (Left-handed)
</li>
</ul>
</div>
</div>
<section class="flex flex-col gap-4 mb-6">
<div class="relative">
<label
class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1 block cursor-pointer transition-all duration-300 ease-in-out select-none"
for="sequence1"
>Chain 1</label
>
<input
type="text"
id="sequence1"
class="w-full p-3 bg-slate-50 rounded-lg focus:ring-2 focus:ring-teal-500 focus:outline-none transition-all duration-300 ease-in-out uppercase tracking-widest font-mono text-sm hide-scrollbar"
placeholder="e.g. TAGC ATGC"
/>
</div>
<div class="relative">
<label
class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1 block transition-all duration-300 ease-in-out select-none"
for="sequence2"
>Chain 2 (Auto)</label
>
<input
type="text"
id="sequence2"
class="w-full p-3 bg-slate-100 rounded-lg text-slate-500 font-mono uppercase tracking-widest text-sm cursor-not-allowed transition-all duration-300 ease-in-out hide-scrollbar"
placeholder="Complementary"
readonly
/>
</div>
</section>
<button
id="scrollDownButton"
class="hidden fixed bottom-6 left-6 right-6 z-50 py-3 bg-amber-500 hover:bg-amber-600 text-white text-sm font-bold tracking-wide rounded-xl shadow-2xl transition-all duration-300 ease-in-out active:scale-95 flex-row items-center justify-center gap-2 animate-bounce cursor-pointer"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
></path>
</svg>
Scroll down to see result
</button>
<section class="flex flex-col gap-3 mb-8">
<button
id="buildButton"
class="w-full py-3 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-lg transition-all duration-300 ease-in-out active:scale-95 flex items-center justify-center gap-2 cursor-pointer select-none"
aria-label="Generate DNA"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
></path>
</svg>
Generate DNA
</button>
<button
id="strongestButton"
class="w-full py-3 bg-teal-50 text-teal-600 hover:bg-teal-100 font-semibold rounded-lg transition-all duration-300 ease-in-out active:scale-95 flex items-center justify-center gap-2 cursor-pointer select-none"
aria-label="Find Maximum Stability DNA"
>
<svg
class="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
></path>
</svg>
Max Stability
</button>
<button
id="mutateButton"
class="w-full py-3 bg-amber-50 text-amber-600 hover:bg-amber-100 font-semibold rounded-lg transition-all duration-300 ease-in-out active:scale-95 flex items-center justify-center gap-2 cursor-pointer select-none"
aria-label="Randomly mutate one base"
>
<svg
class="w-5 h-5 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"
/>
</svg>
Mutate Sequence
</button>
</section>
<section class="bg-blue-50 rounded-lg p-4 mb-6 flex-col gap-3">
<h3 class="text-slate-700 font-semibold flex items-center gap-2">
<svg
class="w-5 h-5 text-blue-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
About Nucleotides
</h3>
<p class="text-xs text-slate-600 leading-relaxed mb-2">
Nucleotides are the basic building blocks of DNA and RNA:
</p>
<ul class="text-xs text-slate-600 space-y-1 ml-4 list-disc mb-3">
<li><strong class="text-slate-700">A (Adenine)</strong></li>
<li>
<strong class="text-slate-700">T (Thymine)</strong> — DNA only
</li>
<li>
<strong class="text-slate-700">U (Uracil)</strong> — RNA only
</li>
<li><strong class="text-slate-700">C (Cytosine)</strong></li>
<li><strong class="text-slate-700">G (Guanine)</strong></li>
</ul>
<p class="text-xs text-amber-700 font-semibold pt-2">
⚠️ Disclaimer: This visualization is an artistic and educational
tool. It does not reflect realistic molecular biology or actual
genetics.
</p>
</section>
<section
class="inline-flex mt-auto pt-6 border-t border-slate-100 flex-col gap-3"
>
<h3 class="text-slate-700 font-semibold flex items-center gap-2">
<svg
class="w-5 h-5 text-teal-500"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
Reference Guide
</h3>
<ul class="flex flex-col gap-3">
<li class="text-sm text-slate-500 leading-relaxed">
Enter characters
<strong id="validChars" class="text-slate-700">A, T, C, G</strong>
or paste a vertical list of sequences.
</li>
<li class="text-sm text-slate-500 leading-relaxed">
<strong class="text-slate-700">Max Stability</strong> algorithm
simulates generations to find robust G-C clusters.
</li>
<li>
<strong class="text-slate-700">Iterate</strong> finds the
strongest, weakest and mutated variants from a list.
</li>
<li class="text-sm text-slate-500 leading-relaxed">
<strong class="text-slate-700">Mutate Sequence</strong> modifies
one random base.
</li>
</ul>
</section>
</aside>
<main
class="flex-1 flex flex-col h-full min-h-[500px] md:min-h-0 bg-white rounded-2xl p-4 md:p-6 overflow-y-auto relative overscroll-y-none"
>
<section
id="single-dna-view"
class="flex flex-col flex-1 h-auto min-h-0 w-full relative"
>
<div class="absolute top-4 left-4 z-10 hidden sm:block">
<span
class="px-3 py-1 bg-white/80 backdrop-blur-sm border border-slate-200 text-slate-600 text-xs font-semibold rounded-full shadow-sm"
>3D Viewport</span
>
</div>
<div class="absolute top-4 right-4 z-10 flex gap-2">
<button
id="replicateButton"
class="px-3 py-1.5 bg-white/80 hover:bg-white backdrop-blur-sm border border-slate-200 text-slate-700 text-xs font-semibold rounded-lg shadow-sm transition-all cursor-pointer flex items-center gap-1.5"
>
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"
></path>
</svg>
<span>Replicate</span>
</button>
</div>
<div
id="three-canvas-container"
class="flex-1 w-full min-h-[350px] md:min-h-[400px] bg-slate-900 rounded-xl shadow-inner border border-slate-800 relative overflow-hidden transition-all duration-500"
></div>
<div
id="infoPanel"
class="hidden mt-4 p-4 rounded-xl font-medium border text-center text-sm shadow-sm transition-all duration-300 ease-in-out transform scale-95 opacity-0"
></div>
<div
id="aminoPanel"
class="hidden mt-2 p-3 bg-purple-50 border border-purple-200 text-purple-800 rounded-xl text-center text-sm shadow-sm transition-all duration-300 ease-in-out"
></div>
<div
class="flex flex-wrap justify-center gap-3 mt-4 text-xs font-bold text-white uppercase tracking-wider"
>
<div
class="px-4 py-2 rounded-lg bg-green-600 shadow-sm flex items-center gap-2"
>
<span class="w-2 h-2 rounded-full bg-white/50 block"></span>
Adenine
</div>
<div
class="px-4 py-2 rounded-lg bg-blue-600 shadow-sm flex items-center gap-2"
>
<span class="w-2 h-2 rounded-full bg-white/50 block"></span>
<span id="legend-t">Thymine</span>
</div>
<div
class="px-4 py-2 rounded-lg bg-orange-500 shadow-sm flex items-center gap-2"
>
<span class="w-2 h-2 rounded-full bg-white/50 block"></span>
Cytosine
</div>
<div
class="px-4 py-2 rounded-lg bg-red-600 shadow-sm flex items-center gap-2"
>
<span class="w-2 h-2 rounded-full bg-white/50 block"></span>
Guanine
</div>
</div>
</section>
</main>
</div>
<script src="script.js"></script>
</body>
</html>