commit c92f9cc298463eda823fe49d4d4524a67439cb65
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 01:12:48 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..3c9a305
--- /dev/null
+++ b/body.html
@@ -0,0 +1,23 @@
+<header>
+ <h1>Welcome to Cellscape</h1>
+ <p>Explore the fascinating world of cellular organelles through our interactive model.</p>
+</header>
+
+<main>
+ <section id="cell-model">
+ <div class="cell-container">
+ <!-- Organelles will be dynamically inserted here by JavaScript -->
+ </div>
+ </section>
+
+ <section id="organelle-info">
+ <h2>Organelle Guide</h2>
+ <div class="info-grid">
+ <!-- Organelle information will be dynamically inserted here by JavaScript -->
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Learn about the building blocks of life in this interactive experience.</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..2f22bc0
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://cellscape.scroll.pub
+metaTags
+editButton /edit.html
+title Explore the Cell: Interactive Organelle Model
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..aac43a6
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8db30f2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,76 @@
+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 = `
+ <h3>${organelle.name}</h3>
+ <p>${organelle.description}</p>
+ <p><strong>Count:</strong> ${organelle.count}</p>
+ `;
+ 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);
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3bcf5bf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,86 @@
+: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;
+ }
+}
\ No newline at end of file