body.html
Changed around line 1
+
+
Welcome to Cellscape
+
Explore the fascinating world of cellular organelles through our interactive model.
+
+
+
+
+
+
+
+
+
+
+
Organelle Guide
+
+
+
+
+
+
+
+
Learn about the building blocks of life in this interactive experience.
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://cellscape.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Explore the Cell: Interactive Organelle Model
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # cellscape.scroll.pub
+ Website generated by DeepSeek from prompt: A website that explains all the organelles in the cells and creates na interactive cell model where they swim around and also it should have an accurate depiction of the number of orangelles in that cell
script.js
Changed around line 1
+ const organelles = [
+ {
+ name: 'Nucleus',
+ count: 1,
+ color: '#FF5722',
+ description: 'The control center of the cell, containing DNA.'
+ },
+ {
+ name: 'Mitochondria',
+ count: 1000,
+ color: '#8BC34A',
+ description: 'The powerhouse of the cell, producing ATP.'
+ },
+ {
+ name: 'Ribosomes',
+ count: 10000,
+ color: '#9C27B0',
+ description: 'Protein synthesis factories.'
+ },
+ {
+ name: 'Endoplasmic Reticulum',
+ count: 1,
+ color: '#FFC107',
+ description: 'Membrane network for protein and lipid synthesis.'
+ },
+ {
+ name: 'Golgi Apparatus',
+ count: 1,
+ color: '#3F51B5',
+ description: 'Packaging and distribution center for cellular products.'
+ },
+ {
+ name: 'Lysosomes',
+ count: 300,
+ color: '#E91E63',
+ description: 'Cellular recycling centers containing digestive enzymes.'
+ }
+ ];
+
+ const cellContainer = document.querySelector('.cell-container');
+ const infoGrid = document.querySelector('.info-grid');
+
+ // Create organelle elements
+ organelles.forEach(organelle => {
+ // Create visual elements
+ for (let i = 0; i < organelle.count; i++) {
+ const el = document.createElement('div');
+ el.className = 'organelle';
+ el.style.backgroundColor = organelle.color;
+ el.style.left = `${Math.random() * 90}%`;
+ el.style.top = `${Math.random() * 90}%`;
+ el.style.animationDuration = `${3 + Math.random() * 4}s`;
+ cellContainer.appendChild(el);
+ }
+
+ // Create info cards
+ const card = document.createElement('div');
+ card.className = 'info-card';
+ card.innerHTML = `
+
${organelle.name}
+
${organelle.description}
+
Count: ${organelle.count}
+ `;
+ infoGrid.appendChild(card);
+ });
+
+ // Add interactivity
+ const organelleElements = document.querySelectorAll('.organelle');
+ organelleElements.forEach(el => {
+ el.addEventListener('click', () => {
+ el.style.backgroundColor = '#FF4081';
+ setTimeout(() => {
+ el.style.backgroundColor = el.dataset.originalColor;
+ }, 1000);
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #4CAF50;
+ --secondary-color: #2196F3;
+ --background-color: #f5f5f5;
+ --text-color: #333;
+ --cell-color: #FFEB3B;
+ }
+
+ body {
+ font-family: 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text-color);
+ background-color: var(--background-color);
+ margin: 0;
+ padding: 0;
+ }
+
+ header {
+ background: var(--primary-color);
+ color: white;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ }
+
+ .cell-container {
+ position: relative;
+ width: 100%;
+ height: 60vh;
+ background: var(--cell-color);
+ border-radius: 50%;
+ overflow: hidden;
+ margin: 2rem 0;
+ box-shadow: 0 0 20px rgba(0,0,0,0.1);
+ }
+
+ .organelle {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background: var(--secondary-color);
+ animation: float 5s infinite ease-in-out;
+ cursor: pointer;
+ transition: transform 0.3s ease;
+ }
+
+ .organelle:hover {
+ transform: scale(1.2);
+ }
+
+ @keyframes float {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-20px); }
+ }
+
+ .info-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 1rem;
+ }
+
+ .info-card {
+ background: white;
+ padding: 1rem;
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+ }
+
+ footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+ }
+
+ @media (max-width: 768px) {
+ .cell-container {
+ height: 40vh;
+ }
+ }