Hugging Face's logo

Spaces:
VIDraft
/
DNA-Diffusion
Runtime error

App Files Community
openfree commited on
Commit
dcfd1fd
·
verified ·
1 Parent(s): 61c8731

Update dna-slot-machine.html

Browse files
Files changed (1) hide show
  1. dna-slot-machine.html +863 -849
dna-slot-machine.html CHANGED
@@ -3,10 +3,8 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>🧬 DNA CASINO PRO - Advanced Molecular Engineering Suite</title>
7
  <style>
8
- @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Bebas+Neue&family=Roboto:wght@300;400;700&display=swap');
9
-
10
  * {
11
  margin: 0;
12
  padding: 0;
@@ -14,1014 +12,1030 @@
14
  }
15
 
16
  body {
17
- background: #000;
 
18
  color: #fff;
19
- font-family: 'Roboto', sans-serif;
20
- overflow-x: hidden;
21
- min-height: 100vh;
22
- position: relative;
23
- }
24
-
25
- /* Enhanced background with scientific grid */
26
- body::before {
27
- content: '';
28
- position: fixed;
29
- top: 0;
30
- left: 0;
31
- width: 100%;
32
- height: 100%;
33
- background:
34
- radial-gradient(circle at 20% 30%, #ff0066 0px, transparent 100px),
35
- radial-gradient(circle at 80% 70%, #00ffff 0px, transparent 100px),
36
- radial-gradient(circle at 50% 50%, #ffff00 0px, transparent 150px);
37
- opacity: 0.1;
38
- z-index: 0;
39
- animation: casinoLights 10s ease-in-out infinite;
40
- }
41
-
42
- /* Scientific grid overlay */
43
- .grid-overlay {
44
- position: fixed;
45
- top: 0;
46
- left: 0;
47
- width: 100%;
48
- height: 100%;
49
- background-image:
50
- linear-gradient(rgba(0,255,255,0.1) 1px, transparent 1px),
51
- linear-gradient(90deg, rgba(0,255,255,0.1) 1px, transparent 1px);
52
- background-size: 50px 50px;
53
- pointer-events: none;
54
- z-index: 1;
55
- }
56
-
57
- /* Main container with tabs */
58
- .app-container {
59
- position: relative;
60
- z-index: 2;
61
- max-width: 1600px;
62
- margin: 0 auto;
63
- padding: 20px;
64
- }
65
-
66
- /* Enhanced header */
67
- .header {
68
- text-align: center;
69
- margin-bottom: 30px;
70
- position: relative;
71
- }
72
-
73
- .title {
74
- font-family: 'Bebas Neue', cursive;
75
- font-size: 4rem;
76
- background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00);
77
- -webkit-background-clip: text;
78
- -webkit-text-fill-color: transparent;
79
- animation: gradientShift 3s ease-in-out infinite;
80
- text-shadow: 0 0 30px rgba(255,0,255,0.5);
81
- }
82
-
83
- @keyframes gradientShift {
84
- 0%, 100% { filter: hue-rotate(0deg); }
85
- 50% { filter: hue-rotate(180deg); }
86
- }
87
-
88
- .subtitle {
89
- font-size: 1.2rem;
90
- color: #ffd700;
91
- margin-top: 10px;
92
- text-transform: uppercase;
93
- letter-spacing: 3px;
94
  }
95
 
96
- /* Tab navigation */
97
- .tabs {
98
  display: flex;
99
- justify-content: center;
100
- margin-bottom: 30px;
101
- background: rgba(255,255,255,0.05);
102
- border-radius: 50px;
103
- padding: 5px;
104
- backdrop-filter: blur(10px);
105
  }
106
 
107
- .tab {
108
- padding: 15px 30px;
109
- margin: 0 5px;
110
- background: transparent;
111
- border: none;
112
- color: #fff;
113
- cursor: pointer;
114
- border-radius: 50px;
115
- font-weight: 500;
116
- transition: all 0.3s ease;
117
  position: relative;
118
- overflow: hidden;
119
- }
120
-
121
- .tab::before {
122
- content: '';
123
- position: absolute;
124
- top: 0;
125
- left: -100%;
126
- width: 100%;
127
- height: 100%;
128
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
129
- transition: left 0.5s ease;
130
- }
131
-
132
- .tab:hover::before {
133
- left: 100%;
134
- }
135
-
136
- .tab.active {
137
- background: linear-gradient(145deg, #ff0066, #ff00ff);
138
- box-shadow: 0 0 20px rgba(255,0,102,0.5);
139
- }
140
-
141
- /* Tab content */
142
- .tab-content {
143
- display: none;
144
- animation: fadeIn 0.5s ease;
145
- }
146
-
147
- .tab-content.active {
148
- display: block;
149
- }
150
-
151
- @keyframes fadeIn {
152
- from { opacity: 0; transform: translateY(20px); }
153
- to { opacity: 1; transform: translateY(0); }
154
- }
155
-
156
- /* Casino machine (enhanced) */
157
- .machine-container {
158
- background: linear-gradient(145deg, #1a0000, #330000);
159
- border: 5px solid #ffd700;
160
- border-radius: 30px;
161
- padding: 30px;
162
- box-shadow:
163
- 0 0 50px rgba(255, 215, 0, 0.5),
164
- 0 20px 40px rgba(0,0,0,0.8);
165
- margin-bottom: 30px;
166
- }
167
-
168
- /* Analysis panel */
169
- .analysis-panel {
170
- display: grid;
171
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
172
- gap: 20px;
173
- margin-top: 30px;
174
- }
175
-
176
- .analysis-card {
177
- background: rgba(0,255,255,0.1);
178
- border: 2px solid #00ffff;
179
- border-radius: 15px;
180
- padding: 20px;
181
- backdrop-filter: blur(10px);
182
- transition: all 0.3s ease;
183
- }
184
-
185
- .analysis-card:hover {
186
- transform: translateY(-5px);
187
- box-shadow: 0 10px 30px rgba(0,255,255,0.3);
188
- }
189
-
190
- .analysis-card h3 {
191
- color: #00ffff;
192
- margin-bottom: 15px;
193
- text-shadow: 0 0 10px #00ffff;
194
- }
195
-
196
- /* 3D Structure Viewer */
197
- .structure-viewer {
198
- width: 100%;
199
- height: 400px;
200
  background: #000;
201
- border: 2px solid #00ff00;
202
- border-radius: 15px;
203
- position: relative;
204
- overflow: hidden;
205
  }
206
 
207
- .structure-canvas {
208
  width: 100%;
209
  height: 100%;
210
  }
211
 
212
- /* Sequence editor */
213
- .sequence-editor {
214
- background: #111;
215
- border: 2px solid #00ff00;
216
- border-radius: 10px;
217
  padding: 20px;
218
- font-family: 'Courier New', monospace;
219
- position: relative;
220
- }
221
-
222
- .sequence-text {
223
- color: #00ff00;
224
- font-size: 14px;
225
- line-height: 1.6;
226
- word-break: break-all;
227
- cursor: text;
228
- outline: none;
229
- }
230
-
231
- .sequence-text .highlight {
232
- background: rgba(255,255,0,0.3);
233
- padding: 2px;
234
- border-radius: 3px;
235
- }
236
-
237
- /* Chat interface */
238
- .chat-container {
239
- background: rgba(255,255,255,0.05);
240
- border: 2px solid #ff00ff;
241
- border-radius: 20px;
242
- padding: 20px;
243
- height: 500px;
244
- display: flex;
245
- flex-direction: column;
246
- }
247
-
248
- .chat-messages {
249
- flex: 1;
250
  overflow-y: auto;
251
- padding: 20px;
252
- display: flex;
253
- flex-direction: column;
254
- gap: 15px;
255
  }
256
 
257
- .chat-message {
 
258
  padding: 15px;
259
- border-radius: 15px;
260
- max-width: 70%;
261
- animation: slideIn 0.3s ease;
262
- }
263
-
264
- @keyframes slideIn {
265
- from { opacity: 0; transform: translateX(-20px); }
266
- to { opacity: 1; transform: translateX(0); }
267
  }
268
 
269
- .chat-message.user {
270
- background: linear-gradient(145deg, #0066ff, #0044cc);
271
- align-self: flex-end;
272
- margin-left: auto;
273
  }
274
 
275
- .chat-message.assistant {
276
- background: linear-gradient(145deg, #ff0066, #cc0044);
277
- align-self: flex-start;
278
  }
279
 
280
- .chat-input-container {
281
- display: flex;
282
- gap: 10px;
283
- padding: 20px;
284
- border-top: 1px solid rgba(255,255,255,0.2);
285
  }
286
 
287
- .chat-input {
288
- flex: 1;
289
- background: rgba(255,255,255,0.1);
290
- border: 2px solid #ff00ff;
291
- border-radius: 25px;
292
- padding: 15px 25px;
 
 
293
  color: #fff;
294
- font-size: 16px;
295
- outline: none;
296
- transition: all 0.3s ease;
297
  }
298
 
299
- .chat-input:focus {
300
- border-color: #00ffff;
301
- box-shadow: 0 0 20px rgba(0,255,255,0.3);
302
  }
303
 
304
- .chat-send {
305
- background: linear-gradient(145deg, #ff00ff, #ff0066);
 
 
306
  border: none;
307
- border-radius: 50%;
308
- width: 50px;
309
- height: 50px;
310
  cursor: pointer;
311
- display: flex;
312
- align-items: center;
313
- justify-content: center;
314
- transition: all 0.3s ease;
315
  }
316
 
317
- .chat-send:hover {
318
- transform: scale(1.1);
319
- box-shadow: 0 0 30px rgba(255,0,255,0.5);
320
  }
321
 
322
- /* Tool cards */
323
- .tools-grid {
324
  display: grid;
325
- grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
326
- gap: 30px;
327
- margin-top: 30px;
328
  }
329
 
330
- .tool-card {
331
- background: linear-gradient(145deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05));
332
- border: 2px solid #ffd700;
333
- border-radius: 20px;
334
- padding: 30px;
335
- transition: all 0.3s ease;
336
- position: relative;
337
- overflow: hidden;
338
  }
339
 
340
- .tool-card::before {
341
- content: '';
342
  position: absolute;
343
- top: -50%;
344
- left: -50%;
345
- width: 200%;
346
- height: 200%;
347
- background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
348
- animation: toolPulse 4s ease-in-out infinite;
349
- }
350
-
351
- @keyframes toolPulse {
352
- 0%, 100% { transform: scale(0.8); opacity: 0; }
353
- 50% { transform: scale(1.2); opacity: 1; }
354
  }
355
 
356
- .tool-card h3 {
357
- color: #ffd700;
358
- margin-bottom: 20px;
359
- font-size: 1.5rem;
360
- text-shadow: 0 0 15px #ffd700;
361
  }
362
 
363
- /* Primer design interface */
364
- .primer-designer {
365
- background: rgba(0,255,0,0.05);
366
- border: 2px solid #00ff00;
367
- border-radius: 15px;
368
- padding: 25px;
369
  }
370
 
371
- .primer-params {
372
- display: grid;
373
- grid-template-columns: repeat(2, 1fr);
374
- gap: 20px;
375
- margin-bottom: 20px;
 
 
 
376
  }
377
 
378
- .param-group {
379
  display: flex;
380
- flex-direction: column;
381
- gap: 10px;
382
- }
383
-
384
- .param-label {
385
- color: #00ff00;
386
- font-weight: 500;
387
- text-shadow: 0 0 5px #00ff00;
388
- }
389
-
390
- .param-input {
391
- background: rgba(0,0,0,0.5);
392
- border: 1px solid #00ff00;
393
- border-radius: 10px;
394
- padding: 10px;
395
- color: #fff;
396
- font-size: 16px;
397
- }
398
-
399
- /* Restriction map visualization */
400
- .restriction-map {
401
- background: #000;
402
- border: 2px solid #ff0000;
403
- border-radius: 15px;
404
- padding: 20px;
405
- position: relative;
406
- height: 200px;
407
- overflow-x: auto;
408
- }
409
-
410
- .restriction-track {
411
- position: relative;
412
- height: 40px;
413
- background: linear-gradient(90deg, #ff0000 2px, transparent 2px);
414
- background-size: 50px 100%;
415
- margin: 10px 0;
416
  }
417
 
418
- .enzyme-marker {
419
- position: absolute;
420
- top: -10px;
421
- width: 3px;
422
- height: 60px;
423
- background: #ffff00;
424
- box-shadow: 0 0 10px #ffff00;
425
  }
426
 
427
- .enzyme-label {
428
  position: absolute;
429
- top: -30px;
430
  left: 50%;
431
- transform: translateX(-50%);
432
- font-size: 12px;
433
- color: #ffff00;
434
- white-space: nowrap;
435
- }
436
-
437
- /* Export options */
438
- .export-panel {
439
- background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
440
- border: 2px solid #fff;
441
- border-radius: 20px;
442
- padding: 30px;
443
  text-align: center;
444
  }
445
 
446
- .export-formats {
447
- display: flex;
448
- justify-content: center;
449
- gap: 20px;
450
- margin: 30px 0;
451
- }
452
-
453
- .export-btn {
454
- padding: 15px 30px;
455
- background: linear-gradient(145deg, #444, #222);
456
- border: 2px solid #fff;
457
- border-radius: 10px;
458
- color: #fff;
459
- cursor: pointer;
460
- transition: all 0.3s ease;
461
- font-weight: 500;
462
- }
463
-
464
- .export-btn:hover {
465
- background: linear-gradient(145deg, #666, #444);
466
- transform: translateY(-3px);
467
- box-shadow: 0 10px 20px rgba(255,255,255,0.2);
468
- }
469
-
470
- /* Loading animation */
471
  .loading-spinner {
472
  width: 50px;
473
  height: 50px;
474
- border: 3px solid rgba(255,255,255,0.1);
475
- border-top-color: #00ffff;
476
  border-radius: 50%;
477
  animation: spin 1s linear infinite;
478
- margin: 20px auto;
479
  }
480
 
481
  @keyframes spin {
482
  to { transform: rotate(360deg); }
483
  }
484
 
485
- /* Responsive design */
486
- @media (max-width: 768px) {
487
- .title {
488
- font-size: 3rem;
489
- }
490
-
491
- .tabs {
492
- flex-wrap: wrap;
493
- }
494
-
495
- .tab {
496
- padding: 10px 20px;
497
- font-size: 14px;
498
- }
499
-
500
- .tools-grid {
501
- grid-template-columns: 1fr;
502
- }
503
- }
504
-
505
- /* Scrollbar styling */
506
- ::-webkit-scrollbar {
507
- width: 10px;
508
  }
509
 
510
- ::-webkit-scrollbar-track {
511
- background: rgba(0,0,0,0.5);
512
- border-radius: 5px;
513
  }
514
 
515
- ::-webkit-scrollbar-thumb {
516
- background: linear-gradient(180deg, #00ffff, #ff00ff);
517
- border-radius: 5px;
518
  }
519
 
520
- ::-webkit-scrollbar-thumb:hover {
521
- background: linear-gradient(180deg, #ff00ff, #00ffff);
 
 
 
 
 
 
 
 
522
  }
523
  </style>
524
  </head>
525
  <body>
526
- <div class="grid-overlay"></div>
527
-
528
- <div class="app-container">
529
- <header class="header">
530
- <h1 class="title">🧬 DNA CASINO PRO 🧬</h1>
531
- <p class="subtitle">Advanced Molecular Engineering Suite</p>
532
- </header>
533
-
534
- <nav class="tabs">
535
- <button class="tab active" data-tab="casino">🎰 Casino</button>
536
- <button class="tab" data-tab="analysis">📊 Analysis</button>
537
- <button class="tab" data-tab="structure">🔬 3D Structure</button>
538
- <button class="tab" data-tab="chat">💬 AI Assistant</button>
539
- <button class="tab" data-tab="tools">🔧 Tools</button>
540
- <button class="tab" data-tab="export">📤 Export</button>
541
- </nav>
542
-
543
- <!-- Casino Tab -->
544
- <div class="tab-content active" id="casino-tab">
545
- <div class="machine-container">
546
- <!-- Original slot machine interface here -->
547
- <div id="slotMachine"></div>
548
  </div>
549
- </div>
550
-
551
- <!-- Analysis Tab -->
552
- <div class="tab-content" id="analysis-tab">
553
- <div class="analysis-panel">
554
- <div class="analysis-card">
555
- <h3>📊 Sequence Statistics</h3>
556
- <div id="sequenceStats">
557
- <div class="stat-item">
558
- <span class="stat-label">Length:</span>
559
- <span class="stat-value" id="seqLength">-</span>
560
- </div>
561
- <div class="stat-item">
562
- <span class="stat-label">GC Content:</span>
563
- <span class="stat-value" id="gcContent">-</span>
564
- </div>
565
- <div class="stat-item">
566
- <span class="stat-label">Melting Temp:</span>
567
- <span class="stat-value" id="meltingTemp">-</span>
568
- </div>
569
- </div>
570
- </div>
571
-
572
- <div class="analysis-card">
573
- <h3>🔍 ORF Analysis</h3>
574
- <div id="orfList">
575
- <p>No ORFs analyzed yet</p>
576
- </div>
577
- </div>
578
-
579
- <div class="analysis-card">
580
- <h3>✂️ Restriction Sites</h3>
581
- <div class="restriction-map" id="restrictionMap">
582
- <div class="restriction-track" id="restrictionTrack"></div>
583
- </div>
584
- </div>
585
-
586
- <div class="analysis-card">
587
- <h3>🧬 Sequence Editor</h3>
588
- <div class="sequence-editor">
589
- <div class="sequence-text" id="sequenceEditor" contenteditable="true">
590
- Generate a sequence to edit
591
- </div>
592
- </div>
593
- </div>
594
- </div>
595
- </div>
596
-
597
- <!-- 3D Structure Tab -->
598
- <div class="tab-content" id="structure-tab">
599
- <div class="structure-viewer">
600
- <canvas class="structure-canvas" id="structureCanvas"></canvas>
601
- <div class="loading-spinner" id="structureLoading"></div>
602
  </div>
603
- <div class="analysis-card" style="margin-top: 20px;">
604
- <h3>🎨 Structure Controls</h3>
605
- <div class="structure-controls">
606
- <button class="export-btn" onclick="toggleStructureView()">Toggle View</button>
607
- <button class="export-btn" onclick="colorByProperty()">Color by Property</button>
608
- <button class="export-btn" onclick="showActiveSites()">Show Active Sites</button>
609
- </div>
610
  </div>
 
 
611
  </div>
612
-
613
- <!-- AI Chat Tab -->
614
- <div class="tab-content" id="chat-tab">
615
- <div class="chat-container">
616
- <div class="chat-messages" id="chatMessages">
617
- <div class="chat-message assistant">
618
- <p>👋 Hello! I'm your molecular biology AI assistant. I can help you analyze sequences, design experiments, and answer questions about your generated DNA.</p>
619
- </div>
 
 
 
 
 
620
  </div>
621
- <div class="chat-input-container">
622
- <input type="text" class="chat-input" id="chatInput" placeholder="Ask me anything about your sequence...">
623
- <button class="chat-send" onclick="sendMessage()">
624
- <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
625
- <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
626
- </svg>
627
- </button>
628
  </div>
 
629
  </div>
630
- <div class="analysis-card" style="margin-top: 20px;">
631
- <h3>💡 Suggested Questions</h3>
632
- <div class="chat-suggestions">
633
- <button class="export-btn" onclick="askQuestion('What restriction enzymes should I use?')">Restriction Enzymes</button>
634
- <button class="export-btn" onclick="askQuestion('Design primers for PCR')">Design Primers</button>
635
- <button class="export-btn" onclick="askQuestion('Optimize for E. coli expression')">Codon Optimization</button>
636
- <button class="export-btn" onclick="askQuestion('Predict protein function')">Protein Function</button>
 
637
  </div>
638
- </div>
639
- </div>
640
-
641
- <!-- Tools Tab -->
642
- <div class="tab-content" id="tools-tab">
643
- <div class="tools-grid">
644
- <div class="tool-card">
645
- <h3>🔬 Primer Designer</h3>
646
- <div class="primer-designer">
647
- <div class="primer-params">
648
- <div class="param-group">
649
- <label class="param-label">Primer Length</label>
650
- <input type="number" class="param-input" id="primerLength" value="20" min="18" max="25">
651
- </div>
652
- <div class="param-group">
653
- <label class="param-label">Product Size (bp)</label>
654
- <input type="number" class="param-input" id="productSize" value="500" min="200" max="1000">
655
- </div>
656
- <div class="param-group">
657
- <label class="param-label">Min Tm (°C)</label>
658
- <input type="number" class="param-input" id="minTm" value="55" min="50" max="65">
659
- </div>
660
- <div class="param-group">
661
- <label class="param-label">Max Tm (°C)</label>
662
- <input type="number" class="param-input" id="maxTm" value="65" min="55" max="70">
663
- </div>
664
- </div>
665
- <button class="export-btn" onclick="designPrimers()">Design Primers</button>
666
- <div id="primerResults" style="margin-top: 20px;"></div>
667
- </div>
668
  </div>
669
-
670
- <div class="tool-card">
671
- <h3>🧬 Codon Optimizer</h3>
672
- <div class="primer-designer">
673
- <div class="param-group">
674
- <label class="param-label">Target Organism</label>
675
- <select class="param-input" id="targetOrganism">
676
- <option value="ecoli">E. coli</option>
677
- <option value="yeast">S. cerevisiae</option>
678
- <option value="human">Human</option>
679
- <option value="mouse">Mouse</option>
680
- </select>
681
- </div>
682
- <button class="export-btn" onclick="optimizeCodons()">Optimize Codons</button>
683
- <div id="codonResults" style="margin-top: 20px;"></div>
684
  </div>
685
  </div>
686
-
687
- <div class="tool-card">
688
- <h3>📈 Expression Predictor</h3>
689
- <div class="primer-designer">
690
- <div class="param-group">
691
- <label class="param-label">Expression System</label>
692
- <select class="param-input" id="expressionSystem">
693
- <option value="bacterial">Bacterial</option>
694
- <option value="mammalian">Mammalian</option>
695
- <option value="yeast">Yeast</option>
696
- <option value="insect">Insect</option>
697
- </select>
698
- </div>
699
- <button class="export-btn" onclick="predictExpression()">Predict Expression</button>
700
- <div id="expressionResults" style="margin-top: 20px;"></div>
701
  </div>
702
  </div>
703
-
704
- <div class="tool-card">
705
- <h3>🔍 BLAST Search</h3>
706
- <div class="primer-designer">
707
- <div class="param-group">
708
- <label class="param-label">Database</label>
709
- <select class="param-input" id="blastDatabase">
710
- <option value="nr">Non-redundant</option>
711
- <option value="refseq">RefSeq</option>
712
- <option value="pdb">PDB</option>
713
- </select>
714
- </div>
715
- <button class="export-btn" onclick="runBlast()">Run BLAST</button>
716
- <div id="blastResults" style="margin-top: 20px;"></div>
717
- </div>
718
  </div>
719
- </div>
720
- </div>
721
-
722
- <!-- Export Tab -->
723
- <div class="tab-content" id="export-tab">
724
- <div class="export-panel">
725
- <h2>Export Your Results</h2>
726
- <p>Choose your preferred format for sequence and analysis data</p>
727
 
728
- <div class="export-formats">
729
- <button class="export-btn" onclick="exportFormat('fasta')">
730
- <span style="font-size: 2rem;">📄</span><br>FASTA
731
- </button>
732
- <button class="export-btn" onclick="exportFormat('genbank')">
733
- <span style="font-size: 2rem;">🗃️</span><br>GenBank
734
- </button>
735
- <button class="export-btn" onclick="exportFormat('json')">
736
- <span style="font-size: 2rem;">{ }</span><br>JSON
737
- </button>
738
- <button class="export-btn" onclick="exportFormat('csv')">
739
- <span style="font-size: 2rem;">📊</span><br>CSV
740
- </button>
741
- <button class="export-btn" onclick="exportFormat('pdf')">
742
- <span style="font-size: 2rem;">📑</span><br>PDF Report
743
- </button>
744
  </div>
745
 
746
- <div id="exportPreview" style="margin-top: 30px;">
747
- <textarea id="exportContent" style="width: 100%; height: 300px; background: #111; color: #0f0; border: 2px solid #0f0; border-radius: 10px; padding: 20px; font-family: monospace;"></textarea>
 
 
748
  </div>
749
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
750
  </div>
751
  </div>
752
 
753
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
754
  <script>
755
- // State management
 
 
 
 
 
 
 
 
756
  let currentSequence = '';
757
- let currentAnalysis = null;
758
- let scene, camera, renderer;
759
- let proteinStructure = null;
760
-
761
- // Tab switching
762
- document.querySelectorAll('.tab').forEach(tab => {
763
- tab.addEventListener('click', () => {
764
- document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
765
- document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
766
-
767
- tab.classList.add('active');
768
- const tabId = tab.getAttribute('data-tab') + '-tab';
769
- document.getElementById(tabId).classList.add('active');
770
-
771
- // Initialize 3D viewer when structure tab is opened
772
- if (tab.getAttribute('data-tab') === 'structure' && !renderer) {
773
- init3DViewer();
774
- }
775
- });
776
- });
777
-
778
- // Initialize 3D protein structure viewer
779
- function init3DViewer() {
780
- const canvas = document.getElementById('structureCanvas');
 
 
 
781
  scene = new THREE.Scene();
782
  scene.background = new THREE.Color(0x000000);
783
-
784
- camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
785
- camera.position.z = 50;
786
-
787
- renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
788
- renderer.setSize(canvas.clientWidth, canvas.clientHeight);
789
-
790
- // Add lights
791
- const ambientLight = new THREE.AmbientLight(0x404040);
 
 
 
 
 
 
 
 
792
  scene.add(ambientLight);
793
-
794
- const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
795
- directionalLight.position.set(1, 1, 1);
796
- scene.add(directionalLight);
797
-
798
- // Mock protein structure
799
- createMockProteinStructure();
800
-
801
- // Animation loop
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
802
  animate();
 
 
 
803
  }
804
 
805
- function createMockProteinStructure() {
806
- const geometry = new THREE.SphereGeometry(2, 16, 16);
807
- const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
808
 
809
- // Create mock amino acid chain
810
- for (let i = 0; i < 20; i++) {
811
- const sphere = new THREE.Mesh(geometry, material);
812
- sphere.position.x = Math.sin(i * 0.5) * 10;
813
- sphere.position.y = i * 2 - 20;
814
- sphere.position.z = Math.cos(i * 0.5) * 10;
815
- scene.add(sphere);
816
-
817
- // Connect with lines
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
818
  if (i > 0) {
819
- const points = [];
820
- points.push(new THREE.Vector3(
821
- Math.sin((i-1) * 0.5) * 10,
822
- (i-1) * 2 - 20,
823
- Math.cos((i-1) * 0.5) * 10
824
- ));
825
- points.push(sphere.position);
826
-
827
- const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
828
- const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ffff });
829
- const line = new THREE.Line(lineGeometry, lineMaterial);
830
- scene.add(line);
831
  }
 
 
 
 
832
  }
833
-
834
- document.getElementById('structureLoading').style.display = 'none';
835
- }
836
 
837
- function animate() {
838
- requestAnimationFrame(animate);
839
-
840
- // Rotate the structure
841
- scene.rotation.y += 0.005;
842
-
843
- renderer.render(scene, camera);
844
  }
845
 
846
- // Chat functionality
847
- function sendMessage() {
848
- const input = document.getElementById('chatInput');
849
- const message = input.value.trim();
850
-
851
- if (!message) return;
852
 
853
- // Add user message
854
- addChatMessage(message, 'user');
855
- input.value = '';
 
856
 
857
- // Send to parent for LLM processing
858
- window.parent.postMessage({
859
- type: 'chat_request',
860
- message: message,
861
- context: currentAnalysis
862
- }, '*');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
863
 
864
- // Simulate response for now
865
- setTimeout(() => {
866
- addChatMessage('I\'m analyzing your sequence...', 'assistant');
867
- }, 500);
868
  }
869
 
870
- function addChatMessage(message, sender) {
871
- const messagesContainer = document.getElementById('chatMessages');
872
- const messageDiv = document.createElement('div');
873
- messageDiv.className = `chat-message ${sender}`;
874
- messageDiv.innerHTML = `<p>${message}</p>`;
875
- messagesContainer.appendChild(messageDiv);
876
- messagesContainer.scrollTop = messagesContainer.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
877
  }
878
 
879
- function askQuestion(question) {
880
- document.getElementById('chatInput').value = question;
881
- sendMessage();
 
 
 
 
882
  }
883
 
884
- // Tool functions
885
- function designPrimers() {
886
- if (!currentSequence) {
887
- alert('Please generate a sequence first!');
888
- return;
 
 
889
  }
890
-
891
- const results = document.getElementById('primerResults');
892
- results.innerHTML = `
893
- <div style="color: #00ff00;">
894
- <h4>Designed Primers:</h4>
895
- <p>Forward: 5'-ATGGCTAGCGATCGTAGCTA-3' (Tm: 62°C)</p>
896
- <p>Reverse: 5'-TCAGCTAGCGATCGTAGCTA-3' (Tm: 61°C)</p>
897
- <p>Product size: 500 bp</p>
898
- </div>
899
- `;
900
  }
901
 
902
- function optimizeCodons() {
903
- const organism = document.getElementById('targetOrganism').value;
904
- const results = document.getElementById('codonResults');
905
- results.innerHTML = `
906
- <div style="color: #00ff00;">
907
- <h4>Optimization Results:</h4>
908
- <p>CAI improved from 0.65 to 0.89</p>
909
- <p>GC content adjusted to 52%</p>
910
- <p>Rare codons removed: 12</p>
911
- <p>Expression level: High</p>
912
- </div>
913
- `;
 
 
 
 
 
914
  }
915
 
916
- function updateAnalysis(analysis) {
917
- currentAnalysis = analysis;
918
-
919
- // Update stats
920
- document.getElementById('seqLength').textContent = analysis.sequence.length + ' bp';
921
- document.getElementById('gcContent').textContent = analysis.gc_content.toFixed(1) + '%';
922
- document.getElementById('meltingTemp').textContent = analysis.melting_temp.toFixed(1) + '°C';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
923
 
924
- // Update restriction map
925
- updateRestrictionMap(analysis.restriction_sites);
926
 
927
- // Update ORFs
928
- updateORFList(analysis.orfs);
 
 
 
 
929
 
930
- // Update sequence editor
931
- document.getElementById('sequenceEditor').textContent = analysis.sequence;
932
  }
933
 
934
- function updateRestrictionMap(sites) {
935
- const track = document.getElementById('restrictionTrack');
936
- track.innerHTML = '';
937
-
938
- Object.entries(sites).forEach(([enzyme, positions]) => {
939
- positions.forEach(pos => {
940
- const marker = document.createElement('div');
941
- marker.className = 'enzyme-marker';
942
- marker.style.left = `${(pos / 200) * 100}%`;
943
-
944
- const label = document.createElement('div');
945
- label.className = 'enzyme-label';
946
- label.textContent = enzyme;
947
- marker.appendChild(label);
948
-
949
- track.appendChild(marker);
950
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
951
  });
952
  }
953
 
954
- function updateORFList(orfs) {
955
- const list = document.getElementById('orfList');
956
- if (orfs.length === 0) {
957
- list.innerHTML = '<p>No significant ORFs found</p>';
958
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
959
  }
960
 
961
- list.innerHTML = orfs.map(orf => `
962
- <div style="margin: 10px 0;">
963
- <strong>${orf[2]}</strong>: ${orf[0]}-${orf[1]} bp
964
- </div>
965
- `).join('');
966
  }
967
 
968
- // Export functions
969
- function exportFormat(format) {
970
- if (!currentAnalysis) {
971
- alert('Please generate a sequence first!');
972
- return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
973
  }
974
 
975
- let content = '';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
976
 
977
- switch(format) {
978
- case 'fasta':
979
- content = `>DNA_Casino_${new Date().toISOString()}\n${currentSequence}`;
980
- break;
981
- case 'genbank':
982
- content = generateGenBankFormat();
983
- break;
984
- case 'json':
985
- content = JSON.stringify(currentAnalysis, null, 2);
986
- break;
987
- default:
988
- content = 'Export format not yet implemented';
 
 
 
 
 
 
989
  }
990
 
991
- document.getElementById('exportContent').value = content;
992
  }
993
 
994
- function generateGenBankFormat() {
995
- return `LOCUS DNA_Casino_Seq ${currentSequence.length} bp DNA linear SYN ${new Date().toDateString()}
996
- DEFINITION Synthetic DNA sequence generated by DNA Casino
997
- ORIGIN
998
- 1 ${currentSequence}
999
- //`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1000
  }
1001
 
1002
- // Listen for messages from parent
1003
- window.addEventListener('message', (event) => {
1004
- if (event.data.type === 'analysis_complete') {
1005
- currentSequence = event.data.sequence;
1006
- updateAnalysis(event.data.analysis);
1007
- } else if (event.data.type === 'chat_response') {
1008
- addChatMessage(event.data.message, 'assistant');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1009
  }
1010
- });
 
 
 
 
 
 
 
 
 
 
 
 
1011
 
1012
- // Keyboard shortcuts
1013
- document.addEventListener('keydown', (e) => {
1014
- if (e.key === 'Enter' && e.target.id === 'chatInput') {
1015
- sendMessage();
 
 
 
 
 
 
 
1016
  }
1017
- });
1018
 
1019
- // Initialize
1020
- document.addEventListener('DOMContentLoaded', () => {
1021
- // Load slot machine into casino tab
1022
- const slotContainer = document.getElementById('slotMachine');
1023
- // Original slot machine code would be loaded here
 
 
 
1024
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1025
  </script>
1026
  </body>
1027
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D Molecular Structure Viewer</title>
7
  <style>
 
 
8
  * {
9
  margin: 0;
10
  padding: 0;
 
12
  }
13
 
14
  body {
15
+ font-family: Arial, sans-serif;
16
+ background: #0a0a0a;
17
  color: #fff;
18
+ overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
 
21
+ .container {
 
22
  display: flex;
23
+ height: 100vh;
 
 
 
 
 
24
  }
25
 
26
+ .viewer {
27
+ flex: 1;
 
 
 
 
 
 
 
 
28
  position: relative;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  background: #000;
 
 
 
 
30
  }
31
 
32
+ #canvas3d {
33
  width: 100%;
34
  height: 100%;
35
  }
36
 
37
+ .controls {
38
+ width: 350px;
39
+ background: #1a1a1a;
 
 
40
  padding: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  overflow-y: auto;
 
 
 
 
42
  }
43
 
44
+ .control-section {
45
+ margin-bottom: 25px;
46
  padding: 15px;
47
+ background: #2a2a2a;
48
+ border-radius: 8px;
 
 
 
 
 
 
49
  }
50
 
51
+ .control-section h3 {
52
+ margin-bottom: 15px;
53
+ color: #00ff88;
54
+ font-size: 1.2em;
55
  }
56
 
57
+ .input-group {
58
+ margin-bottom: 15px;
 
59
  }
60
 
61
+ .input-group label {
62
+ display: block;
63
+ margin-bottom: 5px;
64
+ color: #aaa;
65
+ font-size: 0.9em;
66
  }
67
 
68
+ .input-group input,
69
+ .input-group select,
70
+ .input-group textarea {
71
+ width: 100%;
72
+ padding: 8px;
73
+ background: #333;
74
+ border: 1px solid #555;
75
+ border-radius: 4px;
76
  color: #fff;
 
 
 
77
  }
78
 
79
+ .input-group textarea {
80
+ min-height: 100px;
81
+ font-family: monospace;
82
  }
83
 
84
+ button {
85
+ width: 100%;
86
+ padding: 10px;
87
+ background: linear-gradient(135deg, #00ff88, #0088ff);
88
  border: none;
89
+ border-radius: 4px;
90
+ color: #000;
91
+ font-weight: bold;
92
  cursor: pointer;
93
+ transition: all 0.3s;
 
 
 
94
  }
95
 
96
+ button:hover {
97
+ transform: translateY(-2px);
98
+ box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
99
  }
100
 
101
+ .view-buttons {
 
102
  display: grid;
103
+ grid-template-columns: repeat(2, 1fr);
104
+ gap: 10px;
105
+ margin-top: 15px;
106
  }
107
 
108
+ .view-buttons button {
109
+ padding: 8px;
110
+ font-size: 0.9em;
 
 
 
 
 
111
  }
112
 
113
+ .info-panel {
 
114
  position: absolute;
115
+ top: 20px;
116
+ left: 20px;
117
+ background: rgba(0, 0, 0, 0.8);
118
+ padding: 15px;
119
+ border-radius: 8px;
120
+ border: 1px solid #00ff88;
121
+ max-width: 300px;
 
 
 
 
122
  }
123
 
124
+ .info-panel h4 {
125
+ color: #00ff88;
126
+ margin-bottom: 10px;
 
 
127
  }
128
 
129
+ .info-item {
130
+ margin: 5px 0;
131
+ font-size: 0.9em;
 
 
 
132
  }
133
 
134
+ .legend {
135
+ position: absolute;
136
+ bottom: 20px;
137
+ right: 20px;
138
+ background: rgba(0, 0, 0, 0.8);
139
+ padding: 15px;
140
+ border-radius: 8px;
141
+ border: 1px solid #0088ff;
142
  }
143
 
144
+ .legend-item {
145
  display: flex;
146
+ align-items: center;
147
+ margin: 5px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  }
149
 
150
+ .legend-color {
151
+ width: 20px;
152
+ height: 20px;
153
+ margin-right: 10px;
154
+ border-radius: 3px;
 
 
155
  }
156
 
157
+ .loading {
158
  position: absolute;
159
+ top: 50%;
160
  left: 50%;
161
+ transform: translate(-50%, -50%);
 
 
 
 
 
 
 
 
 
 
 
162
  text-align: center;
163
  }
164
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  .loading-spinner {
166
  width: 50px;
167
  height: 50px;
168
+ border: 3px solid #333;
169
+ border-top-color: #00ff88;
170
  border-radius: 50%;
171
  animation: spin 1s linear infinite;
172
+ margin: 0 auto 20px;
173
  }
174
 
175
  @keyframes spin {
176
  to { transform: rotate(360deg); }
177
  }
178
 
179
+ .slider-container {
180
+ display: flex;
181
+ align-items: center;
182
+ gap: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
  }
184
 
185
+ .slider {
186
+ flex: 1;
 
187
  }
188
 
189
+ .slider-value {
190
+ min-width: 40px;
191
+ text-align: right;
192
  }
193
 
194
+ /* Molecule info tooltip */
195
+ .tooltip {
196
+ position: absolute;
197
+ background: rgba(0, 0, 0, 0.9);
198
+ padding: 10px;
199
+ border-radius: 4px;
200
+ border: 1px solid #00ff88;
201
+ pointer-events: none;
202
+ z-index: 1000;
203
+ display: none;
204
  }
205
  </style>
206
  </head>
207
  <body>
208
+ <div class="container">
209
+ <div class="viewer">
210
+ <canvas id="canvas3d"></canvas>
211
+ <div class="loading" id="loading">
212
+ <div class="loading-spinner"></div>
213
+ <p>Initializing 3D viewer...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  </div>
215
+
216
+ <div class="info-panel" id="infoPanel">
217
+ <h4>Molecule Information</h4>
218
+ <div class="info-item">Type: <span id="moleculeType">-</span></div>
219
+ <div class="info-item">Length: <span id="moleculeLength">-</span></div>
220
+ <div class="info-item">Atoms: <span id="atomCount">-</span></div>
221
+ <div class="info-item">Mode: <span id="viewMode">-</span></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
  </div>
223
+
224
+ <div class="legend" id="legend" style="display: none;">
225
+ <h4>Color Legend</h4>
226
+ <div id="legendItems"></div>
 
 
 
227
  </div>
228
+
229
+ <div class="tooltip" id="tooltip"></div>
230
  </div>
231
+
232
+ <div class="controls">
233
+ <h2 style="margin-bottom: 20px; text-align: center; color: #00ff88;">3D Structure Controls</h2>
234
+
235
+ <div class="control-section">
236
+ <h3>🧬 Input Sequence</h3>
237
+ <div class="input-group">
238
+ <label>Molecule Type</label>
239
+ <select id="moleculeTypeSelect">
240
+ <option value="dna">DNA</option>
241
+ <option value="protein">Protein</option>
242
+ <option value="rna">RNA</option>
243
+ </select>
244
  </div>
245
+ <div class="input-group">
246
+ <label>Sequence</label>
247
+ <textarea id="sequenceInput" placeholder="Enter DNA sequence (e.g., ATCGATCGATCG) or protein sequence (e.g., MKTAYIAKQRQISFVKSHFSRQ)">ATCGATCGATCGATCGATCGATCGATCGATCGATCGATCGATCGATCGATCG</textarea>
 
 
 
 
248
  </div>
249
+ <button onclick="generateStructure()">Generate 3D Structure</button>
250
  </div>
251
+
252
+ <div class="control-section">
253
+ <h3>🎨 Visualization Mode</h3>
254
+ <div class="view-buttons">
255
+ <button onclick="setViewMode('cartoon')">Cartoon</button>
256
+ <button onclick="setViewMode('stick')">Stick</button>
257
+ <button onclick="setViewMode('sphere')">Sphere</button>
258
+ <button onclick="setViewMode('surface')">Surface</button>
259
  </div>
260
+
261
+ <div class="input-group" style="margin-top: 15px;">
262
+ <label>Color Scheme</label>
263
+ <select id="colorScheme" onchange="updateColorScheme()">
264
+ <option value="element">By Element</option>
265
+ <option value="residue">By Residue</option>
266
+ <option value="chain">By Chain</option>
267
+ <option value="hydrophobicity">By Hydrophobicity</option>
268
+ <option value="charge">By Charge</option>
269
+ <option value="secondary">By Secondary Structure</option>
270
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
271
  </div>
272
+ </div>
273
+
274
+ <div class="control-section">
275
+ <h3>⚙️ Display Options</h3>
276
+ <div class="input-group">
277
+ <label>Atom Size</label>
278
+ <div class="slider-container">
279
+ <input type="range" id="atomSize" class="slider" min="0.5" max="3" step="0.1" value="1" onchange="updateAtomSize()">
280
+ <span class="slider-value" id="atomSizeValue">1.0</span>
 
 
 
 
 
 
281
  </div>
282
  </div>
283
+
284
+ <div class="input-group">
285
+ <label>Bond Thickness</label>
286
+ <div class="slider-container">
287
+ <input type="range" id="bondThickness" class="slider" min="0.1" max="1" step="0.1" value="0.3" onchange="updateBondThickness()">
288
+ <span class="slider-value" id="bondThicknessValue">0.3</span>
 
 
 
 
 
 
 
 
 
289
  </div>
290
  </div>
291
+
292
+ <div class="input-group">
293
+ <label>
294
+ <input type="checkbox" id="showHydrogens" onchange="toggleHydrogens()"> Show Hydrogens
295
+ </label>
 
 
 
 
 
 
 
 
 
 
296
  </div>
 
 
 
 
 
 
 
 
297
 
298
+ <div class="input-group">
299
+ <label>
300
+ <input type="checkbox" id="showLabels" onchange="toggleLabels()"> Show Atom Labels
301
+ </label>
 
 
 
 
 
 
 
 
 
 
 
 
302
  </div>
303
 
304
+ <div class="input-group">
305
+ <label>
306
+ <input type="checkbox" id="autoRotate" checked onchange="toggleRotation()"> Auto Rotate
307
+ </label>
308
  </div>
309
  </div>
310
+
311
+ <div class="control-section">
312
+ <h3>📊 Analysis</h3>
313
+ <button onclick="analyzeStructure()">Analyze Structure</button>
314
+ <div id="analysisResults" style="margin-top: 15px; font-size: 0.9em;"></div>
315
+ </div>
316
+
317
+ <div class="control-section">
318
+ <h3>💾 Export</h3>
319
+ <button onclick="exportStructure('pdb')">Export as PDB</button>
320
+ <button onclick="exportStructure('image')" style="margin-top: 10px;">Export as Image</button>
321
+ </div>
322
  </div>
323
  </div>
324
 
325
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
326
  <script>
327
+ // Three.js scene setup
328
+ let scene, camera, renderer, controls;
329
+ let moleculeGroup;
330
+ let currentMode = 'cartoon';
331
+ let autoRotate = true;
332
+ let raycaster, mouse;
333
+ let INTERSECTED;
334
+
335
+ // Molecular data
336
  let currentSequence = '';
337
+ let currentType = 'dna';
338
+ let atoms = [];
339
+ let bonds = [];
340
+
341
+ // Color schemes
342
+ const elementColors = {
343
+ 'C': 0x909090,
344
+ 'H': 0xFFFFFF,
345
+ 'N': 0x3050F8,
346
+ 'O': 0xFF0D0D,
347
+ 'P': 0xFF8000,
348
+ 'S': 0xFFFF30
349
+ };
350
+
351
+ const residueColors = {
352
+ 'A': 0xFF0000, 'T': 0x00FF00, 'G': 0x0000FF, 'C': 0xFFFF00,
353
+ 'U': 0xFF00FF,
354
+ // Amino acids
355
+ 'ALA': 0x8CFF8C, 'ARG': 0x00007C, 'ASN': 0xFF7C70, 'ASP': 0xA00042,
356
+ 'CYS': 0xFFFF70, 'GLN': 0xFF4C4C, 'GLU': 0x660000, 'GLY': 0xFFFFFF,
357
+ 'HIS': 0x7070FF, 'ILE': 0x004C00, 'LEU': 0x455E45, 'LYS': 0x4747B8,
358
+ 'MET': 0xB8A042, 'PHE': 0x534C52, 'PRO': 0x525252, 'SER': 0xFF7042,
359
+ 'THR': 0xB84C00, 'TRP': 0x4F4600, 'TYR': 0x8C704C, 'VAL': 0xFF8CFF
360
+ };
361
+
362
+ function init() {
363
+ // Scene setup
364
  scene = new THREE.Scene();
365
  scene.background = new THREE.Color(0x000000);
366
+ scene.fog = new THREE.Fog(0x000000, 100, 200);
367
+
368
+ // Camera
369
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
370
+ camera.position.set(0, 0, 50);
371
+
372
+ // Renderer
373
+ renderer = new THREE.WebGLRenderer({
374
+ canvas: document.getElementById('canvas3d'),
375
+ antialias: true
376
+ });
377
+ renderer.setSize(window.innerWidth - 350, window.innerHeight);
378
+ renderer.shadowMap.enabled = true;
379
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
380
+
381
+ // Lights
382
+ const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
383
  scene.add(ambientLight);
384
+
385
+ const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
386
+ directionalLight1.position.set(50, 50, 50);
387
+ directionalLight1.castShadow = true;
388
+ scene.add(directionalLight1);
389
+
390
+ const directionalLight2 = new THREE.DirectionalLight(0x8888ff, 0.5);
391
+ directionalLight2.position.set(-50, 50, -50);
392
+ scene.add(directionalLight2);
393
+
394
+ // Controls
395
+ controls = {
396
+ rotateX: 0,
397
+ rotateY: 0.01,
398
+ zoom: 1
399
+ };
400
+
401
+ // Raycaster for mouse interaction
402
+ raycaster = new THREE.Raycaster();
403
+ mouse = new THREE.Vector2();
404
+
405
+ // Mouse events
406
+ renderer.domElement.addEventListener('mousemove', onMouseMove);
407
+ renderer.domElement.addEventListener('wheel', onMouseWheel);
408
+ renderer.domElement.addEventListener('mousedown', onMouseDown);
409
+ renderer.domElement.addEventListener('mouseup', onMouseUp);
410
+
411
+ // Initialize molecule group
412
+ moleculeGroup = new THREE.Group();
413
+ scene.add(moleculeGroup);
414
+
415
+ // Hide loading
416
+ document.getElementById('loading').style.display = 'none';
417
+
418
+ // Start animation loop
419
  animate();
420
+
421
+ // Generate initial structure
422
+ generateStructure();
423
  }
424
 
425
+ function generateStructure() {
426
+ const sequence = document.getElementById('sequenceInput').value.trim().toUpperCase();
427
+ const type = document.getElementById('moleculeTypeSelect').value;
428
 
429
+ if (!sequence) {
430
+ alert('Please enter a sequence');
431
+ return;
432
+ }
433
+
434
+ currentSequence = sequence;
435
+ currentType = type;
436
+
437
+ // Clear existing structure
438
+ moleculeGroup.clear();
439
+ atoms = [];
440
+ bonds = [];
441
+
442
+ // Generate structure based on type
443
+ if (type === 'dna') {
444
+ generateDNAStructure(sequence);
445
+ } else if (type === 'protein') {
446
+ generateProteinStructure(sequence);
447
+ } else if (type === 'rna') {
448
+ generateRNAStructure(sequence);
449
+ }
450
+
451
+ // Update info panel
452
+ updateInfoPanel();
453
+ }
454
+
455
+ function generateDNAStructure(sequence) {
456
+ const radius = 10;
457
+ const rise = 3.4;
458
+ const basesPerTurn = 10;
459
+ const anglePerBase = (2 * Math.PI) / basesPerTurn;
460
+
461
+ // Generate double helix
462
+ for (let i = 0; i < sequence.length; i++) {
463
+ const angle = i * anglePerBase;
464
+ const height = i * rise / basesPerTurn;
465
+ const base = sequence[i];
466
+
467
+ // Strand 1
468
+ const x1 = radius * Math.cos(angle);
469
+ const z1 = radius * Math.sin(angle);
470
+ const y1 = height;
471
+
472
+ // Strand 2 (complementary)
473
+ const x2 = radius * Math.cos(angle + Math.PI);
474
+ const z2 = radius * Math.sin(angle + Math.PI);
475
+ const y2 = height;
476
+
477
+ // Add sugar-phosphate backbone
478
+ addAtom(x1, y1, z1, 'P', i, 'strand1');
479
+ addAtom(x2, y2, z2, 'P', i, 'strand2');
480
+
481
+ // Add bases
482
+ const baseX1 = x1 * 0.5;
483
+ const baseZ1 = z1 * 0.5;
484
+ const baseX2 = x2 * 0.5;
485
+ const baseZ2 = z2 * 0.5;
486
+
487
+ addAtom(baseX1, y1, baseZ1, base, i, 'base1');
488
+ addAtom(baseX2, y2, baseZ2, getComplementaryBase(base), i, 'base2');
489
+
490
+ // Add hydrogen bonds between base pairs
491
+ addBond(atoms.length - 2, atoms.length - 1, 'hydrogen');
492
+
493
+ // Connect backbone
494
  if (i > 0) {
495
+ addBond(atoms.length - 4, atoms.length - 8, 'covalent');
496
+ addBond(atoms.length - 3, atoms.length - 7, 'covalent');
 
 
 
 
 
 
 
 
 
 
497
  }
498
+
499
+ // Connect base to backbone
500
+ addBond(atoms.length - 4, atoms.length - 2, 'covalent');
501
+ addBond(atoms.length - 3, atoms.length - 1, 'covalent');
502
  }
 
 
 
503
 
504
+ renderMolecule();
 
 
 
 
 
 
505
  }
506
 
507
+ function generateProteinStructure(sequence) {
508
+ // Simplified protein structure generation
509
+ // In reality, this would require complex folding algorithms
510
+ let x = 0, y = 0, z = 0;
511
+ let prevCarbonIndex = -1;
 
512
 
513
+ // Generate a simple helix structure
514
+ const helixRadius = 5;
515
+ const helixPitch = 5.4; // Angstroms per turn
516
+ const residuesPerTurn = 3.6;
517
 
518
+ for (let i = 0; i < sequence.length; i++) {
519
+ const residue = sequence[i];
520
+ const angle = (i / residuesPerTurn) * 2 * Math.PI;
521
+ const height = (i / residuesPerTurn) * helixPitch;
522
+
523
+ // Backbone atoms
524
+ x = helixRadius * Math.cos(angle);
525
+ z = helixRadius * Math.sin(angle);
526
+ y = height;
527
+
528
+ // Add backbone atoms (N, CA, C)
529
+ const nIndex = atoms.length;
530
+ addAtom(x - 0.5, y, z, 'N', i, residue);
531
+
532
+ const caIndex = atoms.length;
533
+ addAtom(x, y, z, 'C', i, residue);
534
+
535
+ const cIndex = atoms.length;
536
+ addAtom(x + 0.5, y, z, 'C', i, residue);
537
+
538
+ // Add side chain (simplified)
539
+ const sideX = x + 2 * Math.cos(angle + Math.PI/2);
540
+ const sideZ = z + 2 * Math.sin(angle + Math.PI/2);
541
+ addAtom(sideX, y, sideZ, 'C', i, residue);
542
+
543
+ // Connect backbone
544
+ addBond(nIndex, caIndex, 'covalent');
545
+ addBond(caIndex, cIndex, 'covalent');
546
+ addBond(caIndex, atoms.length - 1, 'covalent');
547
+
548
+ // Connect to previous residue
549
+ if (prevCarbonIndex >= 0) {
550
+ addBond(prevCarbonIndex, nIndex, 'covalent');
551
+ }
552
+
553
+ prevCarbonIndex = cIndex;
554
+ }
555
 
556
+ renderMolecule();
 
 
 
557
  }
558
 
559
+ function generateRNAStructure(sequence) {
560
+ // Similar to DNA but single-stranded with different sugar
561
+ const radius = 8;
562
+ const rise = 5.9;
563
+ const basesPerTurn = 11;
564
+ const anglePerBase = (2 * Math.PI) / basesPerTurn;
565
+
566
+ for (let i = 0; i < sequence.length; i++) {
567
+ const angle = i * anglePerBase;
568
+ const height = i * rise / basesPerTurn;
569
+ const base = sequence[i] === 'T' ? 'U' : sequence[i];
570
+
571
+ const x = radius * Math.cos(angle);
572
+ const z = radius * Math.sin(angle);
573
+ const y = height;
574
+
575
+ // Add sugar-phosphate backbone
576
+ addAtom(x, y, z, 'P', i, 'backbone');
577
+
578
+ // Add base
579
+ const baseX = x * 0.6;
580
+ const baseZ = z * 0.6;
581
+ addAtom(baseX, y, baseZ, base, i, 'base');
582
+
583
+ // Connect backbone
584
+ if (i > 0) {
585
+ addBond(atoms.length - 2, atoms.length - 4, 'covalent');
586
+ }
587
+
588
+ // Connect base to backbone
589
+ addBond(atoms.length - 2, atoms.length - 1, 'covalent');
590
+ }
591
+
592
+ renderMolecule();
593
  }
594
 
595
+ function addAtom(x, y, z, element, residueIndex, type) {
596
+ atoms.push({
597
+ position: new THREE.Vector3(x, y, z),
598
+ element: element,
599
+ residueIndex: residueIndex,
600
+ type: type
601
+ });
602
  }
603
 
604
+ function addBond(atom1Index, atom2Index, type) {
605
+ if (atom1Index >= 0 && atom2Index >= 0 && atom1Index < atoms.length && atom2Index < atoms.length) {
606
+ bonds.push({
607
+ atom1: atom1Index,
608
+ atom2: atom2Index,
609
+ type: type
610
+ });
611
  }
 
 
 
 
 
 
 
 
 
 
612
  }
613
 
614
+ function renderMolecule() {
615
+ moleculeGroup.clear();
616
+
617
+ if (currentMode === 'cartoon') {
618
+ renderCartoon();
619
+ } else if (currentMode === 'stick') {
620
+ renderStick();
621
+ } else if (currentMode === 'sphere') {
622
+ renderSphere();
623
+ } else if (currentMode === 'surface') {
624
+ renderSurface();
625
+ }
626
+
627
+ // Center the molecule
628
+ const box = new THREE.Box3().setFromObject(moleculeGroup);
629
+ const center = box.getCenter(new THREE.Vector3());
630
+ moleculeGroup.position.sub(center);
631
  }
632
 
633
+ function renderCartoon() {
634
+ if (currentType === 'dna' || currentType === 'rna') {
635
+ // Render as ribbon
636
+ const curve = new THREE.CatmullRomCurve3(
637
+ atoms.filter(a => a.type.includes('backbone')).map(a => a.position)
638
+ );
639
+
640
+ const tubeGeometry = new THREE.TubeGeometry(curve, 100, 1, 8, false);
641
+ const tubeMaterial = new THREE.MeshPhongMaterial({
642
+ color: 0x0088ff,
643
+ shininess: 100,
644
+ specular: 0x222222
645
+ });
646
+ const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
647
+ moleculeGroup.add(tube);
648
+
649
+ // Add base representations
650
+ atoms.filter(a => a.type.includes('base')).forEach(atom => {
651
+ const geometry = new THREE.BoxGeometry(3, 0.5, 1);
652
+ const material = new THREE.MeshPhongMaterial({
653
+ color: residueColors[atom.element] || 0xffffff
654
+ });
655
+ const base = new THREE.Mesh(geometry, material);
656
+ base.position.copy(atom.position);
657
+
658
+ // Orient towards center
659
+ base.lookAt(new THREE.Vector3(0, atom.position.y, 0));
660
+
661
+ moleculeGroup.add(base);
662
+ });
663
+ } else if (currentType === 'protein') {
664
+ // Render as ribbon with secondary structure
665
+ renderProteinCartoon();
666
+ }
667
+ }
668
+
669
+ function renderProteinCartoon() {
670
+ // Create ribbon through CA atoms
671
+ const caAtoms = atoms.filter(a => a.type !== 'N' && a.type !== 'C');
672
+ if (caAtoms.length < 2) return;
673
 
674
+ const curve = new THREE.CatmullRomCurve3(caAtoms.map(a => a.position));
675
+ const tubeGeometry = new THREE.TubeGeometry(curve, caAtoms.length * 10, 1.5, 4, false);
676
 
677
+ // Color by secondary structure prediction (simplified)
678
+ const tubeMaterial = new THREE.MeshPhongMaterial({
679
+ color: 0xff4444,
680
+ shininess: 100,
681
+ specular: 0x222222
682
+ });
683
 
684
+ const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
685
+ moleculeGroup.add(tube);
686
  }
687
 
688
+ function renderStick() {
689
+ // Render atoms as small spheres
690
+ atoms.forEach((atom, index) => {
691
+ const geometry = new THREE.SphereGeometry(0.5, 16, 16);
692
+ const material = new THREE.MeshPhongMaterial({
693
+ color: getAtomColor(atom)
 
 
 
 
 
 
 
 
 
 
694
  });
695
+ const sphere = new THREE.Mesh(geometry, material);
696
+ sphere.position.copy(atom.position);
697
+ sphere.userData = { atomIndex: index, atom: atom };
698
+ moleculeGroup.add(sphere);
699
+ });
700
+
701
+ // Render bonds as cylinders
702
+ bonds.forEach(bond => {
703
+ const atom1 = atoms[bond.atom1];
704
+ const atom2 = atoms[bond.atom2];
705
+
706
+ const direction = new THREE.Vector3().subVectors(atom2.position, atom1.position);
707
+ const distance = direction.length();
708
+ direction.normalize();
709
+
710
+ const geometry = new THREE.CylinderGeometry(0.2, 0.2, distance, 8);
711
+ const material = new THREE.MeshPhongMaterial({
712
+ color: bond.type === 'hydrogen' ? 0x888888 : 0xcccccc
713
+ });
714
+
715
+ const cylinder = new THREE.Mesh(geometry, material);
716
+ cylinder.position.copy(atom1.position).add(direction.multiplyScalar(distance / 2));
717
+ cylinder.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
718
+
719
+ moleculeGroup.add(cylinder);
720
  });
721
  }
722
 
723
+ function renderSphere() {
724
+ atoms.forEach((atom, index) => {
725
+ const radius = getAtomRadius(atom.element);
726
+ const geometry = new THREE.SphereGeometry(radius, 32, 32);
727
+ const material = new THREE.MeshPhongMaterial({
728
+ color: getAtomColor(atom),
729
+ shininess: 100,
730
+ specular: 0x222222
731
+ });
732
+ const sphere = new THREE.Mesh(geometry, material);
733
+ sphere.position.copy(atom.position);
734
+ sphere.userData = { atomIndex: index, atom: atom };
735
+ moleculeGroup.add(sphere);
736
+ });
737
+ }
738
+
739
+ function renderSurface() {
740
+ // Simplified surface representation
741
+ const points = atoms.map(a => a.position);
742
+ const geometry = new THREE.ConvexGeometry(points);
743
+ const material = new THREE.MeshPhongMaterial({
744
+ color: 0x0088ff,
745
+ transparent: true,
746
+ opacity: 0.7,
747
+ side: THREE.DoubleSide
748
+ });
749
+ const mesh = new THREE.Mesh(geometry, material);
750
+ moleculeGroup.add(mesh);
751
+ }
752
+
753
+ function getAtomColor(atom) {
754
+ const scheme = document.getElementById('colorScheme').value;
755
+
756
+ if (scheme === 'element') {
757
+ return elementColors[atom.element] || 0xffffff;
758
+ } else if (scheme === 'residue') {
759
+ return residueColors[atom.element] || residueColors[atom.type] || 0xffffff;
760
+ } else if (scheme === 'chain') {
761
+ return atom.type.includes('strand1') || atom.type === 'backbone' ? 0xff0000 : 0x0000ff;
762
+ } else if (scheme === 'hydrophobicity') {
763
+ // Simplified hydrophobicity scale
764
+ const hydrophobic = ['A', 'V', 'I', 'L', 'M', 'F', 'W'];
765
+ return hydrophobic.includes(atom.element) ? 0xff8800 : 0x0088ff;
766
+ } else if (scheme === 'charge') {
767
+ const positive = ['R', 'K', 'H'];
768
+ const negative = ['D', 'E'];
769
+ if (positive.includes(atom.element)) return 0x0000ff;
770
+ if (negative.includes(atom.element)) return 0xff0000;
771
+ return 0x888888;
772
  }
773
 
774
+ return 0xffffff;
 
 
 
 
775
  }
776
 
777
+ function getAtomRadius(element) {
778
+ const radii = {
779
+ 'H': 1.2, 'C': 1.7, 'N': 1.55, 'O': 1.52, 'P': 1.8, 'S': 1.8,
780
+ 'A': 2.0, 'T': 2.0, 'G': 2.0, 'C': 2.0, 'U': 2.0
781
+ };
782
+ return radii[element] || 1.5;
783
+ }
784
+
785
+ function getComplementaryBase(base) {
786
+ const complements = { 'A': 'T', 'T': 'A', 'G': 'C', 'C': 'G' };
787
+ return complements[base] || 'N';
788
+ }
789
+
790
+ function setViewMode(mode) {
791
+ currentMode = mode;
792
+ renderMolecule();
793
+ document.getElementById('viewMode').textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
794
+ }
795
+
796
+ function updateColorScheme() {
797
+ renderMolecule();
798
+ updateLegend();
799
+ }
800
+
801
+ function updateLegend() {
802
+ const scheme = document.getElementById('colorScheme').value;
803
+ const legend = document.getElementById('legend');
804
+ const legendItems = document.getElementById('legendItems');
805
+
806
+ legendItems.innerHTML = '';
807
+
808
+ if (scheme === 'element') {
809
+ Object.entries(elementColors).forEach(([element, color]) => {
810
+ addLegendItem(element, color);
811
+ });
812
+ } else if (scheme === 'residue' && currentType === 'dna') {
813
+ ['A', 'T', 'G', 'C'].forEach(base => {
814
+ addLegendItem(base, residueColors[base]);
815
+ });
816
  }
817
 
818
+ legend.style.display = legendItems.children.length > 0 ? 'block' : 'none';
819
+ }
820
+
821
+ function addLegendItem(label, color) {
822
+ const item = document.createElement('div');
823
+ item.className = 'legend-item';
824
+ item.innerHTML = `
825
+ <div class="legend-color" style="background: #${color.toString(16).padStart(6, '0')}"></div>
826
+ <span>${label}</span>
827
+ `;
828
+ document.getElementById('legendItems').appendChild(item);
829
+ }
830
+
831
+ function updateAtomSize() {
832
+ const value = document.getElementById('atomSize').value;
833
+ document.getElementById('atomSizeValue').textContent = value;
834
+ // Re-render with new size
835
+ renderMolecule();
836
+ }
837
+
838
+ function updateBondThickness() {
839
+ const value = document.getElementById('bondThickness').value;
840
+ document.getElementById('bondThicknessValue').textContent = value;
841
+ // Re-render with new thickness
842
+ renderMolecule();
843
+ }
844
+
845
+ function toggleHydrogens() {
846
+ // In a real implementation, this would show/hide hydrogen atoms
847
+ renderMolecule();
848
+ }
849
+
850
+ function toggleLabels() {
851
+ // Toggle atom labels
852
+ renderMolecule();
853
+ }
854
+
855
+ function toggleRotation() {
856
+ autoRotate = document.getElementById('autoRotate').checked;
857
+ }
858
+
859
+ function updateInfoPanel() {
860
+ document.getElementById('moleculeType').textContent = currentType.toUpperCase();
861
+ document.getElementById('moleculeLength').textContent = currentSequence.length;
862
+ document.getElementById('atomCount').textContent = atoms.length;
863
+ document.getElementById('viewMode').textContent = currentMode.charAt(0).toUpperCase() + currentMode.slice(1);
864
+ }
865
+
866
+ function analyzeStructure() {
867
+ const results = document.getElementById('analysisResults');
868
+
869
+ let analysis = '<strong>Structure Analysis:</strong><br>';
870
 
871
+ if (currentType === 'dna') {
872
+ const gc = (currentSequence.match(/[GC]/g) || []).length / currentSequence.length * 100;
873
+ analysis += `GC Content: ${gc.toFixed(1)}%<br>`;
874
+ analysis += `Length: ${currentSequence.length} bp<br>`;
875
+ analysis += `Estimated MW: ${(currentSequence.length * 330).toLocaleString()} Da<br>`;
876
+ analysis += `Melting Temp: ${(81.5 + 0.41 * gc - 675 / currentSequence.length).toFixed(1)}°C<br>`;
877
+ } else if (currentType === 'protein') {
878
+ analysis += `Length: ${currentSequence.length} aa<br>`;
879
+ analysis += `Estimated MW: ${(currentSequence.length * 110).toLocaleString()} Da<br>`;
880
+
881
+ // Count charged residues
882
+ const positive = (currentSequence.match(/[RKH]/g) || []).length;
883
+ const negative = (currentSequence.match(/[DE]/g) || []).length;
884
+ analysis += `Charged residues: +${positive}/-${negative}<br>`;
885
+
886
+ // Hydrophobicity
887
+ const hydrophobic = (currentSequence.match(/[AVILMFW]/g) || []).length;
888
+ analysis += `Hydrophobic: ${(hydrophobic / currentSequence.length * 100).toFixed(1)}%<br>`;
889
  }
890
 
891
+ results.innerHTML = analysis;
892
  }
893
 
894
+ function exportStructure(format) {
895
+ if (format === 'pdb') {
896
+ let pdbContent = 'REMARK Generated by 3D Molecular Viewer\n';
897
+ atoms.forEach((atom, i) => {
898
+ pdbContent += `ATOM ${(i+1).toString().padStart(5)} ${atom.element.padEnd(4)} RES 1 ${atom.position.x.toFixed(3).padStart(8)}${atom.position.y.toFixed(3).padStart(8)}${atom.position.z.toFixed(3).padStart(8)} 1.00 0.00 ${atom.element}\n`;
899
+ });
900
+ pdbContent += 'END\n';
901
+
902
+ downloadFile('structure.pdb', pdbContent);
903
+ } else if (format === 'image') {
904
+ renderer.render(scene, camera);
905
+ renderer.domElement.toBlob(blob => {
906
+ const url = URL.createObjectURL(blob);
907
+ const a = document.createElement('a');
908
+ a.href = url;
909
+ a.download = 'structure.png';
910
+ a.click();
911
+ URL.revokeObjectURL(url);
912
+ });
913
+ }
914
  }
915
 
916
+ function downloadFile(filename, content) {
917
+ const blob = new Blob([content], { type: 'text/plain' });
918
+ const url = URL.createObjectURL(blob);
919
+ const a = document.createElement('a');
920
+ a.href = url;
921
+ a.download = filename;
922
+ a.click();
923
+ URL.revokeObjectURL(url);
924
+ }
925
+
926
+ // Mouse interaction handlers
927
+ let isDragging = false;
928
+ let previousMousePosition = { x: 0, y: 0 };
929
+
930
+ function onMouseMove(event) {
931
+ if (isDragging) {
932
+ const deltaMove = {
933
+ x: event.clientX - previousMousePosition.x,
934
+ y: event.clientY - previousMousePosition.y
935
+ };
936
+
937
+ moleculeGroup.rotation.y += deltaMove.x * 0.01;
938
+ moleculeGroup.rotation.x += deltaMove.y * 0.01;
939
+
940
+ previousMousePosition = {
941
+ x: event.clientX,
942
+ y: event.clientY
943
+ };
944
+ } else {
945
+ // Hover detection
946
+ mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
947
+ mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
948
+
949
+ raycaster.setFromCamera(mouse, camera);
950
+ const intersects = raycaster.intersectObjects(moleculeGroup.children);
951
+
952
+ if (intersects.length > 0) {
953
+ if (INTERSECTED !== intersects[0].object) {
954
+ if (INTERSECTED) INTERSECTED.material.emissive = new THREE.Color(0x000000);
955
+ INTERSECTED = intersects[0].object;
956
+ INTERSECTED.material.emissive = new THREE.Color(0x444444);
957
+
958
+ // Show tooltip
959
+ if (INTERSECTED.userData.atom) {
960
+ const tooltip = document.getElementById('tooltip');
961
+ tooltip.style.display = 'block';
962
+ tooltip.style.left = event.clientX + 10 + 'px';
963
+ tooltip.style.top = event.clientY + 10 + 'px';
964
+ tooltip.innerHTML = `
965
+ Element: ${INTERSECTED.userData.atom.element}<br>
966
+ Type: ${INTERSECTED.userData.atom.type}<br>
967
+ Index: ${INTERSECTED.userData.atomIndex}
968
+ `;
969
+ }
970
+ }
971
+ } else {
972
+ if (INTERSECTED) {
973
+ INTERSECTED.material.emissive = new THREE.Color(0x000000);
974
+ INTERSECTED = null;
975
+ document.getElementById('tooltip').style.display = 'none';
976
+ }
977
+ }
978
  }
979
+ }
980
+
981
+ function onMouseDown(event) {
982
+ isDragging = true;
983
+ previousMousePosition = {
984
+ x: event.clientX,
985
+ y: event.clientY
986
+ };
987
+ }
988
+
989
+ function onMouseUp() {
990
+ isDragging = false;
991
+ }
992
 
993
+ function onMouseWheel(event) {
994
+ camera.position.z += event.deltaY * 0.1;
995
+ camera.position.z = Math.max(10, Math.min(200, camera.position.z));
996
+ }
997
+
998
+ // Animation loop
999
+ function animate() {
1000
+ requestAnimationFrame(animate);
1001
+
1002
+ if (autoRotate && !isDragging) {
1003
+ moleculeGroup.rotation.y += 0.005;
1004
  }
 
1005
 
1006
+ renderer.render(scene, camera);
1007
+ }
1008
+
1009
+ // Handle window resize
1010
+ window.addEventListener('resize', () => {
1011
+ camera.aspect = (window.innerWidth - 350) / window.innerHeight;
1012
+ camera.updateProjectionMatrix();
1013
+ renderer.setSize(window.innerWidth - 350, window.innerHeight);
1014
  });
1015
+
1016
+ // Initialize on load
1017
+ window.addEventListener('load', init);
1018
+
1019
+ // Custom ConvexGeometry implementation (simplified)
1020
+ THREE.ConvexGeometry = function(points) {
1021
+ THREE.Geometry.call(this);
1022
+
1023
+ // Create a simple convex hull (very simplified)
1024
+ const geometry = new THREE.Geometry();
1025
+ geometry.vertices = points;
1026
+
1027
+ // Create faces (simplified triangulation)
1028
+ if (points.length >= 3) {
1029
+ for (let i = 0; i < points.length - 2; i++) {
1030
+ geometry.faces.push(new THREE.Face3(0, i + 1, i + 2));
1031
+ }
1032
+ }
1033
+
1034
+ geometry.computeFaceNormals();
1035
+ geometry.computeVertexNormals();
1036
+
1037
+ return new THREE.BufferGeometry().fromGeometry(geometry);
1038
+ };
1039
  </script>
1040
  </body>
1041
  </html>