Hugging Face's logo

Spaces:
smjain
/
dna
Running

App Files Community
smjain commited on
Commit
924efe8
·
verified ·
1 Parent(s): 7902e8b

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +634 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Dna
3
- emoji: 🌍
4
- colorFrom: purple
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: dna
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,634 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Genome Explorers - Learn About DNA!</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating {
15
+ animation: float 3s ease-in-out infinite;
16
+ }
17
+ .dna-strand {
18
+ position: relative;
19
+ height: 200px;
20
+ width: 100px;
21
+ }
22
+ .dna-base {
23
+ position: absolute;
24
+ width: 20px;
25
+ height: 20px;
26
+ border-radius: 50%;
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ color: white;
31
+ font-weight: bold;
32
+ }
33
+ .dna-connector {
34
+ position: absolute;
35
+ width: 2px;
36
+ background-color: #4a5568;
37
+ left: 50%;
38
+ transform: translateX(-50%);
39
+ }
40
+ .cell-membrane {
41
+ border: 3px dashed #4a5568;
42
+ border-radius: 50%;
43
+ position: relative;
44
+ overflow: hidden;
45
+ }
46
+ .mitochondria {
47
+ position: absolute;
48
+ width: 40px;
49
+ height: 40px;
50
+ background-color: #f6ad55;
51
+ border-radius: 50%;
52
+ opacity: 0.8;
53
+ }
54
+ .nucleus {
55
+ position: absolute;
56
+ width: 60px;
57
+ height: 60px;
58
+ background-color: #4299e1;
59
+ border-radius: 50%;
60
+ opacity: 0.8;
61
+ }
62
+ .atp-molecule {
63
+ position: absolute;
64
+ width: 20px;
65
+ height: 20px;
66
+ background-color: #68d391;
67
+ border-radius: 50%;
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ color: white;
72
+ font-size: 10px;
73
+ font-weight: bold;
74
+ }
75
+ .info-theory-bit {
76
+ position: absolute;
77
+ width: 15px;
78
+ height: 15px;
79
+ background-color: #9f7aea;
80
+ border-radius: 50%;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ color: white;
85
+ font-size: 8px;
86
+ font-weight: bold;
87
+ }
88
+ .tab-content {
89
+ display: none;
90
+ }
91
+ .tab-content.active {
92
+ display: block;
93
+ animation: fadeIn 0.5s;
94
+ }
95
+ @keyframes fadeIn {
96
+ from { opacity: 0; }
97
+ to { opacity: 1; }
98
+ }
99
+ .telomere-end {
100
+ position: absolute;
101
+ width: 10px;
102
+ height: 10px;
103
+ background-color: #f687b3;
104
+ border-radius: 50%;
105
+ }
106
+ </style>
107
+ </head>
108
+ <body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen">
109
+ <div class="container mx-auto px-4 py-8">
110
+ <!-- Header -->
111
+ <header class="text-center mb-10">
112
+ <h1 class="text-4xl md:text-5xl font-bold text-purple-800 mb-4">
113
+ <i class="fas fa-dna mr-2"></i> Genome Explorers
114
+ </h1>
115
+ <p class="text-lg text-gray-700 max-w-2xl mx-auto">
116
+ Discover the amazing world inside your cells! Learn about DNA, energy, and how your body works.
117
+ </p>
118
+ </header>
119
+
120
+ <!-- Main Content -->
121
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
122
+ <!-- Tabs -->
123
+ <div class="flex border-b border-gray-200">
124
+ <button class="tab-btn py-4 px-6 font-medium text-purple-800 border-b-2 border-purple-600" data-tab="dna">
125
+ <i class="fas fa-dna mr-2"></i> DNA Basics
126
+ </button>
127
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="cell">
128
+ <i class="fas fa-microscope mr-2"></i> Cell Factory
129
+ </button>
130
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="energy">
131
+ <i class="fas fa-bolt mr-2"></i> Energy (ATP)
132
+ </button>
133
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="exercise">
134
+ <i class="fas fa-running mr-2"></i> Exercise Science
135
+ </button>
136
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="info">
137
+ <i class="fas fa-code mr-2"></i> DNA as Code
138
+ </button>
139
+ </div>
140
+
141
+ <!-- Tab Contents -->
142
+ <div class="p-6 md:p-8">
143
+ <!-- DNA Tab -->
144
+ <div id="dna" class="tab-content active">
145
+ <h2 class="text-2xl font-bold text-purple-800 mb-6">The DNA Double Helix</h2>
146
+ <div class="flex flex-col md:flex-row gap-8 items-center">
147
+ <div class="flex-1">
148
+ <p class="mb-4 text-gray-700">
149
+ DNA is like a twisted ladder inside your cells. It contains all the instructions to make you, you!
150
+ </p>
151
+ <p class="mb-4 text-gray-700">
152
+ The ladder has four special letters: <span class="font-bold text-green-600">A</span> (Adenine),
153
+ <span class="font-bold text-blue-600">T</span> (Thymine),
154
+ <span class="font-bold text-red-600">C</span> (Cytosine), and
155
+ <span class="font-bold text-yellow-600">G</span> (Guanine).
156
+ </p>
157
+ <p class="mb-6 text-gray-700">
158
+ <span class="font-bold">Telomeres</span> are like the plastic tips on shoelaces - they protect the ends of your DNA! They get shorter as cells divide.
159
+ </p>
160
+ <button id="spin-dna" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
161
+ <i class="fas fa-sync-alt mr-2"></i> Spin the DNA
162
+ </button>
163
+ </div>
164
+ <div class="flex-1 flex justify-center">
165
+ <div class="dna-strand relative" id="dna-model">
166
+ <!-- DNA will be generated here by JS -->
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Cell Tab -->
173
+ <div id="cell" class="tab-content">
174
+ <h2 class="text-2xl font-bold text-purple-800 mb-6">The Amazing Cell Factory</h2>
175
+ <div class="flex flex-col md:flex-row gap-8 items-center">
176
+ <div class="flex-1">
177
+ <p class="mb-4 text-gray-700">
178
+ Your cells are like tiny factories with different departments working together:
179
+ </p>
180
+ <ul class="list-disc pl-5 mb-6 text-gray-700 space-y-2">
181
+ <li><span class="font-bold">Nucleus</span> - The boss's office (holds DNA instructions)</li>
182
+ <li><span class="font-bold">Mitochondria</span> - Power plants (make ATP energy)</li>
183
+ <li><span class="font-bold">Ribosomes</span> - Assembly lines (build proteins)</li>
184
+ <li><span class="font-bold">Cell Membrane</span> - Security gates (controls what enters/exits)</li>
185
+ </ul>
186
+ <button id="show-cell" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
187
+ <i class="fas fa-eye mr-2"></i> Show Cell Parts
188
+ </button>
189
+ </div>
190
+ <div class="flex-1 flex justify-center">
191
+ <div class="cell-membrane w-64 h-64 relative bg-gray-100" id="cell-model">
192
+ <!-- Cell parts will be added here by JS -->
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Energy (ATP) Tab -->
199
+ <div id="energy" class="tab-content">
200
+ <h2 class="text-2xl font-bold text-purple-800 mb-6">ATP - Cellular Energy</h2>
201
+ <div class="flex flex-col md:flex-row gap-8 items-center">
202
+ <div class="flex-1">
203
+ <p class="mb-4 text-gray-700">
204
+ ATP (Adenosine Triphosphate) is like cellular money - it powers all activities in your body!
205
+ </p>
206
+ <p class="mb-4 text-gray-700">
207
+ Mitochondria make ATP by breaking down food (like glucose) with oxygen. This is why we breathe!
208
+ </p>
209
+ <p class="mb-6 text-gray-700">
210
+ When you exercise, your muscles need more ATP. That's why you breathe harder - to get more oxygen to your mitochondria!
211
+ </p>
212
+ <div class="flex gap-4">
213
+ <button id="make-atp" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition">
214
+ <i class="fas fa-bolt mr-2"></i> Make ATP
215
+ </button>
216
+ <button id="use-atp" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition">
217
+ <i class="fas fa-running mr-2"></i> Use ATP
218
+ </button>
219
+ </div>
220
+ </div>
221
+ <div class="flex-1 flex justify-center">
222
+ <div class="relative w-64 h-64" id="atp-model">
223
+ <!-- ATP animation will go here -->
224
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
225
+ <div class="text-5xl mb-2">ATP</div>
226
+ <div class="text-gray-600" id="atp-count">100 energy units</div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Exercise Tab -->
234
+ <div id="exercise" class="tab-content">
235
+ <h2 class="text-2xl font-bold text-purple-800 mb-6">Exercise & Your Cells</h2>
236
+ <div class="flex flex-col md:flex-row gap-8">
237
+ <div class="flex-1">
238
+ <p class="mb-4 text-gray-700">
239
+ When you exercise, amazing things happen in your cells:
240
+ </p>
241
+ <ul class="list-disc pl-5 mb-6 text-gray-700 space-y-2">
242
+ <li>Muscle cells make more mitochondria (more power plants!)</li>
243
+ <li>Your heart pumps faster to deliver more oxygen</li>
244
+ <li>Cells release happy chemicals (endorphins)</li>
245
+ <li>DNA gets signals to make proteins for stronger muscles</li>
246
+ </ul>
247
+ <div class="bg-blue-50 p-4 rounded-lg mb-6">
248
+ <h3 class="font-bold text-blue-800 mb-2">Try This!</h3>
249
+ <p class="text-gray-700">Jump 10 times and feel your heartbeat. That's your cells asking for more ATP!</p>
250
+ </div>
251
+ <button id="start-exercise" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
252
+ <i class="fas fa-play mr-2"></i> Simulate Exercise
253
+ </button>
254
+ </div>
255
+ <div class="flex-1 flex flex-col justify-center items-center">
256
+ <div class="relative w-48 h-48 mb-6" id="exercise-model">
257
+ <div class="absolute inset-0 flex items-center justify-center">
258
+ <div class="w-24 h-24 bg-red-500 rounded-full opacity-20" id="heartbeat"></div>
259
+ </div>
260
+ <div class="absolute inset-0 flex items-center justify-center">
261
+ <i class="fas fa-heart text-red-500 text-4xl" id="heart-icon"></i>
262
+ </div>
263
+ </div>
264
+ <div class="w-full bg-gray-200 rounded-full h-4">
265
+ <div class="bg-green-500 h-4 rounded-full" id="energy-bar" style="width: 100%"></div>
266
+ </div>
267
+ <p class="mt-2 text-gray-700" id="energy-text">Energy level: 100%</p>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Information Theory Tab -->
273
+ <div id="info" class="tab-content">
274
+ <h2 class="text-2xl font-bold text-purple-800 mb-6">DNA: Nature's Information System</h2>
275
+ <div class="flex flex-col md:flex-row gap-8">
276
+ <div class="flex-1">
277
+ <p class="mb-4 text-gray-700">
278
+ DNA is like a biological computer code! It uses 4 letters (A,T,C,G) instead of 0s and 1s.
279
+ </p>
280
+ <p class="mb-4 text-gray-700">
281
+ <span class="font-bold">3 billion</span> letters in human DNA = 750MB of information (like a video game!)
282
+ </p>
283
+ <p class="mb-6 text-gray-700">
284
+ Cells read DNA like a recipe book to make proteins. Mistakes in copying (mutations) can cause changes.
285
+ </p>
286
+ <button id="show-bits" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
287
+ <i class="fas fa-project-diagram mr-2"></i> Show Information Flow
288
+ </button>
289
+ </div>
290
+ <div class="flex-1 flex justify-center">
291
+ <div class="relative w-64 h-64" id="info-model">
292
+ <!-- Information theory visualization will go here -->
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <!-- Fun Facts Section -->
301
+ <div class="mt-12 bg-purple-100 rounded-xl p-6 max-w-4xl mx-auto">
302
+ <h3 class="text-xl font-bold text-purple-800 mb-4">
303
+ <i class="fas fa-lightbulb mr-2"></i> Amazing DNA Facts
304
+ </h3>
305
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
306
+ <div class="bg-white p-4 rounded-lg shadow">
307
+ <h4 class="font-bold text-purple-700 mb-2">DNA Length</h4>
308
+ <p class="text-gray-700">If you stretched out all the DNA in one cell, it would be 2 meters long! That's taller than you!</p>
309
+ </div>
310
+ <div class="bg-white p-4 rounded-lg shadow">
311
+ <h4 class="font-bold text-purple-700 mb-2">Shared DNA</h4>
312
+ <p class="text-gray-700">You share 50% of your DNA with bananas! All living things use the same genetic code.</p>
313
+ </div>
314
+ <div class="bg-white p-4 rounded-lg shadow">
315
+ <h4 class="font-bold text-purple-700 mb-2">Cell Division</h4>
316
+ <p class="text-gray-700">Your cells divide about 2 trillion times every day! That's how you grow and heal.</p>
317
+ </div>
318
+ <div class="bg-white p-4 rounded-lg shadow">
319
+ <h4 class="font-bold text-purple-700 mb-2">Energy Production</h4>
320
+ <p class="text-gray-700">Your body makes and uses about your weight in ATP every day! It recycles the molecules.</p>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <script>
327
+ // Tab switching functionality
328
+ document.querySelectorAll('.tab-btn').forEach(btn => {
329
+ btn.addEventListener('click', () => {
330
+ // Remove active class from all tabs and buttons
331
+ document.querySelectorAll('.tab-btn').forEach(b => {
332
+ b.classList.remove('border-purple-600', 'text-purple-800');
333
+ b.classList.add('text-gray-500');
334
+ });
335
+ document.querySelectorAll('.tab-content').forEach(tab => {
336
+ tab.classList.remove('active');
337
+ });
338
+
339
+ // Add active class to clicked tab
340
+ btn.classList.add('border-purple-600', 'text-purple-800');
341
+ btn.classList.remove('text-gray-500');
342
+ document.getElementById(btn.dataset.tab).classList.add('active');
343
+ });
344
+ });
345
+
346
+ // DNA Model
347
+ const dnaModel = document.getElementById('dna-model');
348
+ let rotationAngle = 0;
349
+ const bases = ['A', 'T', 'C', 'G'];
350
+ const baseColors = {
351
+ 'A': 'bg-green-600',
352
+ 'T': 'bg-blue-600',
353
+ 'C': 'bg-red-600',
354
+ 'G': 'bg-yellow-600'
355
+ };
356
+
357
+ function createDNA() {
358
+ dnaModel.innerHTML = '';
359
+ const pairs = 10;
360
+ const spacing = 180 / (pairs - 1);
361
+
362
+ // Create telomeres (special ends)
363
+ createTelomere(0);
364
+ createTelomere(180);
365
+
366
+ for (let i = 0; i < pairs; i++) {
367
+ const yPos = i * spacing;
368
+ const base1 = bases[Math.floor(Math.random() * bases.length)];
369
+ let base2;
370
+
371
+ // Pair A with T and C with G
372
+ if (base1 === 'A') base2 = 'T';
373
+ else if (base1 === 'T') base2 = 'A';
374
+ else if (base1 === 'C') base2 = 'G';
375
+ else base2 = 'C';
376
+
377
+ // Left base
378
+ createBase(base1, 30, yPos);
379
+ // Right base
380
+ createBase(base2, 70, yPos);
381
+ // Connector
382
+ createConnector(yPos);
383
+ }
384
+
385
+ dnaModel.style.transform = `rotate(${rotationAngle}deg)`;
386
+ }
387
+
388
+ function createBase(base, x, y) {
389
+ const baseElement = document.createElement('div');
390
+ baseElement.className = `dna-base ${baseColors[base]} floating`;
391
+ baseElement.style.left = `${x}px`;
392
+ baseElement.style.top = `${y}px`;
393
+ baseElement.textContent = base;
394
+ dnaModel.appendChild(baseElement);
395
+ }
396
+
397
+ function createConnector(y) {
398
+ const connector = document.createElement('div');
399
+ connector.className = 'dna-connector';
400
+ connector.style.top = `${y}px`;
401
+ connector.style.height = '20px';
402
+ dnaModel.appendChild(connector);
403
+ }
404
+
405
+ function createTelomere(y) {
406
+ const telomere = document.createElement('div');
407
+ telomere.className = 'telomere-end';
408
+ telomere.style.top = `${y}px`;
409
+ telomere.style.left = '45px';
410
+ dnaModel.appendChild(telomere);
411
+ }
412
+
413
+ document.getElementById('spin-dna').addEventListener('click', () => {
414
+ rotationAngle += 180;
415
+ dnaModel.style.transform = `rotate(${rotationAngle}deg)`;
416
+ createDNA(); // Regenerate with new random bases
417
+ });
418
+
419
+ // Cell Model
420
+ const cellModel = document.getElementById('cell-model');
421
+
422
+ document.getElementById('show-cell').addEventListener('click', () => {
423
+ cellModel.innerHTML = '';
424
+
425
+ // Nucleus
426
+ const nucleus = document.createElement('div');
427
+ nucleus.className = 'nucleus floating';
428
+ nucleus.style.top = '50px';
429
+ nucleus.style.left = '50px';
430
+ cellModel.appendChild(nucleus);
431
+
432
+ // Mitochondria (multiple)
433
+ for (let i = 0; i < 5; i++) {
434
+ const mitochondria = document.createElement('div');
435
+ mitochondria.className = 'mitochondria floating';
436
+ mitochondria.style.top = `${30 + Math.random() * 140}px`;
437
+ mitochondria.style.left = `${30 + Math.random() * 140}px`;
438
+ mitochondria.style.animationDelay = `${i * 0.5}s`;
439
+ cellModel.appendChild(mitochondria);
440
+ }
441
+
442
+ // Add some ATP molecules
443
+ for (let i = 0; i < 10; i++) {
444
+ const atp = document.createElement('div');
445
+ atp.className = 'atp-molecule floating';
446
+ atp.style.top = `${20 + Math.random() * 160}px`;
447
+ atp.style.left = `${20 + Math.random() * 160}px`;
448
+ atp.style.animationDelay = `${i * 0.2}s`;
449
+ atp.textContent = 'ATP';
450
+ cellModel.appendChild(atp);
451
+ }
452
+ });
453
+
454
+ // ATP Model
455
+ let atpCount = 100;
456
+ const atpCountElement = document.getElementById('atp-count');
457
+ const atpModel = document.getElementById('atp-model');
458
+
459
+ document.getElementById('make-atp').addEventListener('click', () => {
460
+ atpCount += 20;
461
+ if (atpCount > 200) atpCount = 200;
462
+ updateATPDisplay();
463
+
464
+ // Visual effect
465
+ const atp = document.createElement('div');
466
+ atp.className = 'atp-molecule';
467
+ atp.textContent = 'ATP';
468
+ atp.style.top = '50%';
469
+ atp.style.left = '50%';
470
+ atp.style.transform = 'translate(-50%, -50%) scale(0)';
471
+ atpModel.appendChild(atp);
472
+
473
+ setTimeout(() => {
474
+ atp.style.transition = 'all 0.5s';
475
+ atp.style.transform = 'translate(-50%, -50%) scale(1)';
476
+ setTimeout(() => {
477
+ atp.style.opacity = '0';
478
+ setTimeout(() => atp.remove(), 500);
479
+ }, 500);
480
+ }, 10);
481
+ });
482
+
483
+ document.getElementById('use-atp').addEventListener('click', () => {
484
+ atpCount -= 30;
485
+ if (atpCount < 0) atpCount = 0;
486
+ updateATPDisplay();
487
+
488
+ // Visual effect
489
+ for (let i = 0; i < 3; i++) {
490
+ const energy = document.createElement('div');
491
+ energy.className = 'atp-molecule';
492
+ energy.textContent = 'ATP';
493
+ energy.style.top = '50%';
494
+ energy.style.left = '50%';
495
+ energy.style.transform = 'translate(-50%, -50%)';
496
+ atpModel.appendChild(energy);
497
+
498
+ setTimeout(() => {
499
+ energy.style.transition = 'all 0.5s';
500
+ const angle = Math.random() * Math.PI * 2;
501
+ const distance = 50 + Math.random() * 50;
502
+ energy.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;
503
+ energy.style.opacity = '0';
504
+ setTimeout(() => energy.remove(), 500);
505
+ }, i * 100);
506
+ }
507
+ });
508
+
509
+ function updateATPDisplay() {
510
+ atpCountElement.textContent = `${atpCount} energy units`;
511
+ }
512
+
513
+ // Exercise Model
514
+ let exerciseInterval;
515
+ let energyLevel = 100;
516
+ const energyBar = document.getElementById('energy-bar');
517
+ const energyText = document.getElementById('energy-text');
518
+ const heartbeat = document.getElementById('heartbeat');
519
+ const heartIcon = document.getElementById('heart-icon');
520
+
521
+ document.getElementById('start-exercise').addEventListener('click', function() {
522
+ if (exerciseInterval) {
523
+ clearInterval(exerciseInterval);
524
+ exerciseInterval = null;
525
+ this.innerHTML = '<i class="fas fa-play mr-2"></i> Simulate Exercise';
526
+ heartbeat.style.animation = 'none';
527
+ heartIcon.style.animation = 'none';
528
+ return;
529
+ }
530
+
531
+ this.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Exercise';
532
+ heartbeat.style.animation = 'pulse 0.8s infinite';
533
+ heartIcon.style.animation = 'pulse 0.8s infinite';
534
+
535
+ exerciseInterval = setInterval(() => {
536
+ energyLevel -= 2;
537
+ if (energyLevel < 0) energyLevel = 0;
538
+ energyBar.style.width = `${energyLevel}%`;
539
+ energyText.textContent = `Energy level: ${energyLevel}%`;
540
+
541
+ if (energyLevel < 30) {
542
+ energyBar.classList.remove('bg-green-500');
543
+ energyBar.classList.add('bg-red-500');
544
+ } else {
545
+ energyBar.classList.remove('bg-red-500');
546
+ energyBar.classList.add('bg-green-500');
547
+ }
548
+
549
+ if (energyLevel === 0) {
550
+ clearInterval(exerciseInterval);
551
+ exerciseInterval = null;
552
+ document.getElementById('start-exercise').innerHTML = '<i class="fas fa-play mr-2"></i> Simulate Exercise';
553
+ heartbeat.style.animation = 'none';
554
+ heartIcon.style.animation = 'none';
555
+
556
+ // Recharge after rest
557
+ setTimeout(() => {
558
+ const recharge = setInterval(() => {
559
+ energyLevel += 5;
560
+ if (energyLevel > 100) {
561
+ energyLevel = 100;
562
+ clearInterval(recharge);
563
+ }
564
+ energyBar.style.width = `${energyLevel}%`;
565
+ energyText.textContent = `Energy level: ${energyLevel}%`;
566
+ }, 200);
567
+ }, 1000);
568
+ }
569
+ }, 200);
570
+ });
571
+
572
+ // Information Theory Model
573
+ document.getElementById('show-bits').addEventListener('click', function() {
574
+ const infoModel = document.getElementById('info-model');
575
+ infoModel.innerHTML = '';
576
+
577
+ // Create DNA strand
578
+ const dnaStrand = document.createElement('div');
579
+ dnaStrand.className = 'relative w-full h-16 mb-8';
580
+ infoModel.appendChild(dnaStrand);
581
+
582
+ for (let i = 0; i < 8; i++) {
583
+ const base = bases[Math.floor(Math.random() * bases.length)];
584
+ const baseElement = document.createElement('div');
585
+ baseElement.className = `absolute ${baseColors[base]} text-white font-bold rounded-full w-8 h-8 flex items-center justify-center`;
586
+ baseElement.style.left = `${i * 32}px`;
587
+ baseElement.style.top = '0';
588
+ baseElement.textContent = base;
589
+ dnaStrand.appendChild(baseElement);
590
+ }
591
+
592
+ // Create binary bits flowing
593
+ for (let i = 0; i < 20; i++) {
594
+ setTimeout(() => {
595
+ const bit = document.createElement('div');
596
+ bit.className = 'info-theory-bit';
597
+ bit.textContent = Math.random() > 0.5 ? '1' : '0';
598
+ bit.style.left = `${20 + Math.random() * 180}px`;
599
+ bit.style.top = '100px';
600
+ infoModel.appendChild(bit);
601
+
602
+ // Animate bit
603
+ setTimeout(() => {
604
+ bit.style.transition = 'all 1.5s';
605
+ bit.style.top = '200px';
606
+ bit.style.opacity = '0';
607
+ setTimeout(() => bit.remove(), 1500);
608
+ }, 10);
609
+ }, i * 150);
610
+ }
611
+
612
+ // Create protein at bottom
613
+ setTimeout(() => {
614
+ const protein = document.createElement('div');
615
+ protein.className = 'absolute bg-orange-500 text-white font-bold rounded-lg w-24 h-8 flex items-center justify-center';
616
+ protein.style.left = '50%';
617
+ protein.style.bottom = '20px';
618
+ protein.style.transform = 'translateX(-50%)';
619
+ protein.textContent = 'Protein';
620
+ protein.style.opacity = '0';
621
+ infoModel.appendChild(protein);
622
+
623
+ setTimeout(() => {
624
+ protein.style.transition = 'opacity 0.5s';
625
+ protein.style.opacity = '1';
626
+ }, 2000);
627
+ }, 1000);
628
+ });
629
+
630
+ // Initialize DNA on page load
631
+ createDNA();
632
+ </script>
633
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=smjain/dna" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
634
+ </html>