|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Genome Explorers - Learn About DNA!</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@keyframes float { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-10px); } |
|
} |
|
.floating { |
|
animation: float 3s ease-in-out infinite; |
|
} |
|
.dna-strand { |
|
position: relative; |
|
height: 200px; |
|
width: 100px; |
|
} |
|
.dna-base { |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: white; |
|
font-weight: bold; |
|
} |
|
.dna-connector { |
|
position: absolute; |
|
width: 2px; |
|
background-color: #4a5568; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
.cell-membrane { |
|
border: 3px dashed #4a5568; |
|
border-radius: 50%; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
.mitochondria { |
|
position: absolute; |
|
width: 40px; |
|
height: 40px; |
|
background-color: #f6ad55; |
|
border-radius: 50%; |
|
opacity: 0.8; |
|
} |
|
.nucleus { |
|
position: absolute; |
|
width: 60px; |
|
height: 60px; |
|
background-color: #4299e1; |
|
border-radius: 50%; |
|
opacity: 0.8; |
|
} |
|
.atp-molecule { |
|
position: absolute; |
|
width: 20px; |
|
height: 20px; |
|
background-color: #68d391; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: white; |
|
font-size: 10px; |
|
font-weight: bold; |
|
} |
|
.info-theory-bit { |
|
position: absolute; |
|
width: 15px; |
|
height: 15px; |
|
background-color: #9f7aea; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: white; |
|
font-size: 8px; |
|
font-weight: bold; |
|
} |
|
.tab-content { |
|
display: none; |
|
} |
|
.tab-content.active { |
|
display: block; |
|
animation: fadeIn 0.5s; |
|
} |
|
@keyframes fadeIn { |
|
from { opacity: 0; } |
|
to { opacity: 1; } |
|
} |
|
.telomere-end { |
|
position: absolute; |
|
width: 10px; |
|
height: 10px; |
|
background-color: #f687b3; |
|
border-radius: 50%; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-b from-blue-50 to-purple-50 min-h-screen"> |
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
<header class="text-center mb-10"> |
|
<h1 class="text-4xl md:text-5xl font-bold text-purple-800 mb-4"> |
|
<i class="fas fa-dna mr-2"></i> Genome Explorers |
|
</h1> |
|
<p class="text-lg text-gray-700 max-w-2xl mx-auto"> |
|
Discover the amazing world inside your cells! Learn about DNA, energy, and how your body works. |
|
</p> |
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto"> |
|
|
|
<div class="flex border-b border-gray-200"> |
|
<button class="tab-btn py-4 px-6 font-medium text-purple-800 border-b-2 border-purple-600" data-tab="dna"> |
|
<i class="fas fa-dna mr-2"></i> DNA Basics |
|
</button> |
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="cell"> |
|
<i class="fas fa-microscope mr-2"></i> Cell Factory |
|
</button> |
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="energy"> |
|
<i class="fas fa-bolt mr-2"></i> Energy (ATP) |
|
</button> |
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="exercise"> |
|
<i class="fas fa-running mr-2"></i> Exercise Science |
|
</button> |
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-purple-700" data-tab="info"> |
|
<i class="fas fa-code mr-2"></i> DNA as Code |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="p-6 md:p-8"> |
|
|
|
<div id="dna" class="tab-content active"> |
|
<h2 class="text-2xl font-bold text-purple-800 mb-6">The DNA Double Helix</h2> |
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
<div class="flex-1"> |
|
<p class="mb-4 text-gray-700"> |
|
DNA is like a twisted ladder inside your cells. It contains all the instructions to make you, you! |
|
</p> |
|
<p class="mb-4 text-gray-700"> |
|
The ladder has four special letters: <span class="font-bold text-green-600">A</span> (Adenine), |
|
<span class="font-bold text-blue-600">T</span> (Thymine), |
|
<span class="font-bold text-red-600">C</span> (Cytosine), and |
|
<span class="font-bold text-yellow-600">G</span> (Guanine). |
|
</p> |
|
<p class="mb-6 text-gray-700"> |
|
<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. |
|
</p> |
|
<button id="spin-dna" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-sync-alt mr-2"></i> Spin the DNA |
|
</button> |
|
</div> |
|
<div class="flex-1 flex justify-center"> |
|
<div class="dna-strand relative" id="dna-model"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="cell" class="tab-content"> |
|
<h2 class="text-2xl font-bold text-purple-800 mb-6">The Amazing Cell Factory</h2> |
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
<div class="flex-1"> |
|
<p class="mb-4 text-gray-700"> |
|
Your cells are like tiny factories with different departments working together: |
|
</p> |
|
<ul class="list-disc pl-5 mb-6 text-gray-700 space-y-2"> |
|
<li><span class="font-bold">Nucleus</span> - The boss's office (holds DNA instructions)</li> |
|
<li><span class="font-bold">Mitochondria</span> - Power plants (make ATP energy)</li> |
|
<li><span class="font-bold">Ribosomes</span> - Assembly lines (build proteins)</li> |
|
<li><span class="font-bold">Cell Membrane</span> - Security gates (controls what enters/exits)</li> |
|
</ul> |
|
<button id="show-cell" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-eye mr-2"></i> Show Cell Parts |
|
</button> |
|
</div> |
|
<div class="flex-1 flex justify-center"> |
|
<div class="cell-membrane w-64 h-64 relative bg-gray-100" id="cell-model"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="energy" class="tab-content"> |
|
<h2 class="text-2xl font-bold text-purple-800 mb-6">ATP - Cellular Energy</h2> |
|
<div class="flex flex-col md:flex-row gap-8 items-center"> |
|
<div class="flex-1"> |
|
<p class="mb-4 text-gray-700"> |
|
ATP (Adenosine Triphosphate) is like cellular money - it powers all activities in your body! |
|
</p> |
|
<p class="mb-4 text-gray-700"> |
|
Mitochondria make ATP by breaking down food (like glucose) with oxygen. This is why we breathe! |
|
</p> |
|
<p class="mb-6 text-gray-700"> |
|
When you exercise, your muscles need more ATP. That's why you breathe harder - to get more oxygen to your mitochondria! |
|
</p> |
|
<div class="flex gap-4"> |
|
<button id="make-atp" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-bolt mr-2"></i> Make ATP |
|
</button> |
|
<button id="use-atp" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-running mr-2"></i> Use ATP |
|
</button> |
|
</div> |
|
</div> |
|
<div class="flex-1 flex justify-center"> |
|
<div class="relative w-64 h-64" id="atp-model"> |
|
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center"> |
|
<div class="text-5xl mb-2">ATP</div> |
|
<div class="text-gray-600" id="atp-count">100 energy units</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="exercise" class="tab-content"> |
|
<h2 class="text-2xl font-bold text-purple-800 mb-6">Exercise & Your Cells</h2> |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="flex-1"> |
|
<p class="mb-4 text-gray-700"> |
|
When you exercise, amazing things happen in your cells: |
|
</p> |
|
<ul class="list-disc pl-5 mb-6 text-gray-700 space-y-2"> |
|
<li>Muscle cells make more mitochondria (more power plants!)</li> |
|
<li>Your heart pumps faster to deliver more oxygen</li> |
|
<li>Cells release happy chemicals (endorphins)</li> |
|
<li>DNA gets signals to make proteins for stronger muscles</li> |
|
</ul> |
|
<div class="bg-blue-50 p-4 rounded-lg mb-6"> |
|
<h3 class="font-bold text-blue-800 mb-2">Try This!</h3> |
|
<p class="text-gray-700">Jump 10 times and feel your heartbeat. That's your cells asking for more ATP!</p> |
|
</div> |
|
<button id="start-exercise" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-play mr-2"></i> Simulate Exercise |
|
</button> |
|
</div> |
|
<div class="flex-1 flex flex-col justify-center items-center"> |
|
<div class="relative w-48 h-48 mb-6" id="exercise-model"> |
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
<div class="w-24 h-24 bg-red-500 rounded-full opacity-20" id="heartbeat"></div> |
|
</div> |
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
<i class="fas fa-heart text-red-500 text-4xl" id="heart-icon"></i> |
|
</div> |
|
</div> |
|
<div class="w-full bg-gray-200 rounded-full h-4"> |
|
<div class="bg-green-500 h-4 rounded-full" id="energy-bar" style="width: 100%"></div> |
|
</div> |
|
<p class="mt-2 text-gray-700" id="energy-text">Energy level: 100%</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="info" class="tab-content"> |
|
<h2 class="text-2xl font-bold text-purple-800 mb-6">DNA: Nature's Information System</h2> |
|
<div class="flex flex-col md:flex-row gap-8"> |
|
<div class="flex-1"> |
|
<p class="mb-4 text-gray-700"> |
|
DNA is like a biological computer code! It uses 4 letters (A,T,C,G) instead of 0s and 1s. |
|
</p> |
|
<p class="mb-4 text-gray-700"> |
|
<span class="font-bold">3 billion</span> letters in human DNA = 750MB of information (like a video game!) |
|
</p> |
|
<p class="mb-6 text-gray-700"> |
|
Cells read DNA like a recipe book to make proteins. Mistakes in copying (mutations) can cause changes. |
|
</p> |
|
<button id="show-bits" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition"> |
|
<i class="fas fa-project-diagram mr-2"></i> Show Information Flow |
|
</button> |
|
</div> |
|
<div class="flex-1 flex justify-center"> |
|
<div class="relative w-64 h-64" id="info-model"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-purple-100 rounded-xl p-6 max-w-4xl mx-auto"> |
|
<h3 class="text-xl font-bold text-purple-800 mb-4"> |
|
<i class="fas fa-lightbulb mr-2"></i> Amazing DNA Facts |
|
</h3> |
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h4 class="font-bold text-purple-700 mb-2">DNA Length</h4> |
|
<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> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h4 class="font-bold text-purple-700 mb-2">Shared DNA</h4> |
|
<p class="text-gray-700">You share 50% of your DNA with bananas! All living things use the same genetic code.</p> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h4 class="font-bold text-purple-700 mb-2">Cell Division</h4> |
|
<p class="text-gray-700">Your cells divide about 2 trillion times every day! That's how you grow and heal.</p> |
|
</div> |
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
<h4 class="font-bold text-purple-700 mb-2">Energy Production</h4> |
|
<p class="text-gray-700">Your body makes and uses about your weight in ATP every day! It recycles the molecules.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
|
|
document.querySelectorAll('.tab-btn').forEach(b => { |
|
b.classList.remove('border-purple-600', 'text-purple-800'); |
|
b.classList.add('text-gray-500'); |
|
}); |
|
document.querySelectorAll('.tab-content').forEach(tab => { |
|
tab.classList.remove('active'); |
|
}); |
|
|
|
|
|
btn.classList.add('border-purple-600', 'text-purple-800'); |
|
btn.classList.remove('text-gray-500'); |
|
document.getElementById(btn.dataset.tab).classList.add('active'); |
|
}); |
|
}); |
|
|
|
|
|
const dnaModel = document.getElementById('dna-model'); |
|
let rotationAngle = 0; |
|
const bases = ['A', 'T', 'C', 'G']; |
|
const baseColors = { |
|
'A': 'bg-green-600', |
|
'T': 'bg-blue-600', |
|
'C': 'bg-red-600', |
|
'G': 'bg-yellow-600' |
|
}; |
|
|
|
function createDNA() { |
|
dnaModel.innerHTML = ''; |
|
const pairs = 10; |
|
const spacing = 180 / (pairs - 1); |
|
|
|
|
|
createTelomere(0); |
|
createTelomere(180); |
|
|
|
for (let i = 0; i < pairs; i++) { |
|
const yPos = i * spacing; |
|
const base1 = bases[Math.floor(Math.random() * bases.length)]; |
|
let base2; |
|
|
|
|
|
if (base1 === 'A') base2 = 'T'; |
|
else if (base1 === 'T') base2 = 'A'; |
|
else if (base1 === 'C') base2 = 'G'; |
|
else base2 = 'C'; |
|
|
|
|
|
createBase(base1, 30, yPos); |
|
|
|
createBase(base2, 70, yPos); |
|
|
|
createConnector(yPos); |
|
} |
|
|
|
dnaModel.style.transform = `rotate(${rotationAngle}deg)`; |
|
} |
|
|
|
function createBase(base, x, y) { |
|
const baseElement = document.createElement('div'); |
|
baseElement.className = `dna-base ${baseColors[base]} floating`; |
|
baseElement.style.left = `${x}px`; |
|
baseElement.style.top = `${y}px`; |
|
baseElement.textContent = base; |
|
dnaModel.appendChild(baseElement); |
|
} |
|
|
|
function createConnector(y) { |
|
const connector = document.createElement('div'); |
|
connector.className = 'dna-connector'; |
|
connector.style.top = `${y}px`; |
|
connector.style.height = '20px'; |
|
dnaModel.appendChild(connector); |
|
} |
|
|
|
function createTelomere(y) { |
|
const telomere = document.createElement('div'); |
|
telomere.className = 'telomere-end'; |
|
telomere.style.top = `${y}px`; |
|
telomere.style.left = '45px'; |
|
dnaModel.appendChild(telomere); |
|
} |
|
|
|
document.getElementById('spin-dna').addEventListener('click', () => { |
|
rotationAngle += 180; |
|
dnaModel.style.transform = `rotate(${rotationAngle}deg)`; |
|
createDNA(); |
|
}); |
|
|
|
|
|
const cellModel = document.getElementById('cell-model'); |
|
|
|
document.getElementById('show-cell').addEventListener('click', () => { |
|
cellModel.innerHTML = ''; |
|
|
|
|
|
const nucleus = document.createElement('div'); |
|
nucleus.className = 'nucleus floating'; |
|
nucleus.style.top = '50px'; |
|
nucleus.style.left = '50px'; |
|
cellModel.appendChild(nucleus); |
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
const mitochondria = document.createElement('div'); |
|
mitochondria.className = 'mitochondria floating'; |
|
mitochondria.style.top = `${30 + Math.random() * 140}px`; |
|
mitochondria.style.left = `${30 + Math.random() * 140}px`; |
|
mitochondria.style.animationDelay = `${i * 0.5}s`; |
|
cellModel.appendChild(mitochondria); |
|
} |
|
|
|
|
|
for (let i = 0; i < 10; i++) { |
|
const atp = document.createElement('div'); |
|
atp.className = 'atp-molecule floating'; |
|
atp.style.top = `${20 + Math.random() * 160}px`; |
|
atp.style.left = `${20 + Math.random() * 160}px`; |
|
atp.style.animationDelay = `${i * 0.2}s`; |
|
atp.textContent = 'ATP'; |
|
cellModel.appendChild(atp); |
|
} |
|
}); |
|
|
|
|
|
let atpCount = 100; |
|
const atpCountElement = document.getElementById('atp-count'); |
|
const atpModel = document.getElementById('atp-model'); |
|
|
|
document.getElementById('make-atp').addEventListener('click', () => { |
|
atpCount += 20; |
|
if (atpCount > 200) atpCount = 200; |
|
updateATPDisplay(); |
|
|
|
|
|
const atp = document.createElement('div'); |
|
atp.className = 'atp-molecule'; |
|
atp.textContent = 'ATP'; |
|
atp.style.top = '50%'; |
|
atp.style.left = '50%'; |
|
atp.style.transform = 'translate(-50%, -50%) scale(0)'; |
|
atpModel.appendChild(atp); |
|
|
|
setTimeout(() => { |
|
atp.style.transition = 'all 0.5s'; |
|
atp.style.transform = 'translate(-50%, -50%) scale(1)'; |
|
setTimeout(() => { |
|
atp.style.opacity = '0'; |
|
setTimeout(() => atp.remove(), 500); |
|
}, 500); |
|
}, 10); |
|
}); |
|
|
|
document.getElementById('use-atp').addEventListener('click', () => { |
|
atpCount -= 30; |
|
if (atpCount < 0) atpCount = 0; |
|
updateATPDisplay(); |
|
|
|
|
|
for (let i = 0; i < 3; i++) { |
|
const energy = document.createElement('div'); |
|
energy.className = 'atp-molecule'; |
|
energy.textContent = 'ATP'; |
|
energy.style.top = '50%'; |
|
energy.style.left = '50%'; |
|
energy.style.transform = 'translate(-50%, -50%)'; |
|
atpModel.appendChild(energy); |
|
|
|
setTimeout(() => { |
|
energy.style.transition = 'all 0.5s'; |
|
const angle = Math.random() * Math.PI * 2; |
|
const distance = 50 + Math.random() * 50; |
|
energy.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`; |
|
energy.style.opacity = '0'; |
|
setTimeout(() => energy.remove(), 500); |
|
}, i * 100); |
|
} |
|
}); |
|
|
|
function updateATPDisplay() { |
|
atpCountElement.textContent = `${atpCount} energy units`; |
|
} |
|
|
|
|
|
let exerciseInterval; |
|
let energyLevel = 100; |
|
const energyBar = document.getElementById('energy-bar'); |
|
const energyText = document.getElementById('energy-text'); |
|
const heartbeat = document.getElementById('heartbeat'); |
|
const heartIcon = document.getElementById('heart-icon'); |
|
|
|
document.getElementById('start-exercise').addEventListener('click', function() { |
|
if (exerciseInterval) { |
|
clearInterval(exerciseInterval); |
|
exerciseInterval = null; |
|
this.innerHTML = '<i class="fas fa-play mr-2"></i> Simulate Exercise'; |
|
heartbeat.style.animation = 'none'; |
|
heartIcon.style.animation = 'none'; |
|
return; |
|
} |
|
|
|
this.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Exercise'; |
|
heartbeat.style.animation = 'pulse 0.8s infinite'; |
|
heartIcon.style.animation = 'pulse 0.8s infinite'; |
|
|
|
exerciseInterval = setInterval(() => { |
|
energyLevel -= 2; |
|
if (energyLevel < 0) energyLevel = 0; |
|
energyBar.style.width = `${energyLevel}%`; |
|
energyText.textContent = `Energy level: ${energyLevel}%`; |
|
|
|
if (energyLevel < 30) { |
|
energyBar.classList.remove('bg-green-500'); |
|
energyBar.classList.add('bg-red-500'); |
|
} else { |
|
energyBar.classList.remove('bg-red-500'); |
|
energyBar.classList.add('bg-green-500'); |
|
} |
|
|
|
if (energyLevel === 0) { |
|
clearInterval(exerciseInterval); |
|
exerciseInterval = null; |
|
document.getElementById('start-exercise').innerHTML = '<i class="fas fa-play mr-2"></i> Simulate Exercise'; |
|
heartbeat.style.animation = 'none'; |
|
heartIcon.style.animation = 'none'; |
|
|
|
|
|
setTimeout(() => { |
|
const recharge = setInterval(() => { |
|
energyLevel += 5; |
|
if (energyLevel > 100) { |
|
energyLevel = 100; |
|
clearInterval(recharge); |
|
} |
|
energyBar.style.width = `${energyLevel}%`; |
|
energyText.textContent = `Energy level: ${energyLevel}%`; |
|
}, 200); |
|
}, 1000); |
|
} |
|
}, 200); |
|
}); |
|
|
|
|
|
document.getElementById('show-bits').addEventListener('click', function() { |
|
const infoModel = document.getElementById('info-model'); |
|
infoModel.innerHTML = ''; |
|
|
|
|
|
const dnaStrand = document.createElement('div'); |
|
dnaStrand.className = 'relative w-full h-16 mb-8'; |
|
infoModel.appendChild(dnaStrand); |
|
|
|
for (let i = 0; i < 8; i++) { |
|
const base = bases[Math.floor(Math.random() * bases.length)]; |
|
const baseElement = document.createElement('div'); |
|
baseElement.className = `absolute ${baseColors[base]} text-white font-bold rounded-full w-8 h-8 flex items-center justify-center`; |
|
baseElement.style.left = `${i * 32}px`; |
|
baseElement.style.top = '0'; |
|
baseElement.textContent = base; |
|
dnaStrand.appendChild(baseElement); |
|
} |
|
|
|
|
|
for (let i = 0; i < 20; i++) { |
|
setTimeout(() => { |
|
const bit = document.createElement('div'); |
|
bit.className = 'info-theory-bit'; |
|
bit.textContent = Math.random() > 0.5 ? '1' : '0'; |
|
bit.style.left = `${20 + Math.random() * 180}px`; |
|
bit.style.top = '100px'; |
|
infoModel.appendChild(bit); |
|
|
|
|
|
setTimeout(() => { |
|
bit.style.transition = 'all 1.5s'; |
|
bit.style.top = '200px'; |
|
bit.style.opacity = '0'; |
|
setTimeout(() => bit.remove(), 1500); |
|
}, 10); |
|
}, i * 150); |
|
} |
|
|
|
|
|
setTimeout(() => { |
|
const protein = document.createElement('div'); |
|
protein.className = 'absolute bg-orange-500 text-white font-bold rounded-lg w-24 h-8 flex items-center justify-center'; |
|
protein.style.left = '50%'; |
|
protein.style.bottom = '20px'; |
|
protein.style.transform = 'translateX(-50%)'; |
|
protein.textContent = 'Protein'; |
|
protein.style.opacity = '0'; |
|
infoModel.appendChild(protein); |
|
|
|
setTimeout(() => { |
|
protein.style.transition = 'opacity 0.5s'; |
|
protein.style.opacity = '1'; |
|
}, 2000); |
|
}, 1000); |
|
}); |
|
|
|
|
|
createDNA(); |
|
</script> |
|
<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> |
|
</html> |
