commit 2d12dc7935c1b9339cbd45233a7629ee338f2720
Author: root <root@hub.scroll.pub>
Date: 2025-01-10 00:47:55 +0000
Subject: Initial commit
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..60d612d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,69 @@
+buildTxt
+buildHtml
+title Mitochondria: The Ultimate Cell Power Plant
+metaTags keywords=mitochondria,cell biology,powerhouse,energy
+style.css
+script.js
+slideshow
+
+***
+
+# Mitochondria
+## The Ultimate Cell Power Plant
+<div class="hero-image"></div>
+
+***
+
+# What Are Mitochondria?
+<div class="split-slide">
+ <div class="text-col">
+ • Tiny but mighty organelles
+ • Present in almost every cell
+ • Like miniature batteries
+ • Double membrane structure
+ </div>
+ <div class="image-col membrane-animation"></div>
+</div>
+
+***
+
+# The Real MVPs
+<div class="power-stats">
+ <div class="stat">
+ <span class="number">90%</span>
+ <span class="label">of cell's energy production</span>
+ </div>
+ <div class="stat">
+ <span class="number">100-1000+</span>
+ <span class="label">mitochondria per cell</span>
+ </div>
+</div>
+
+***
+
+# Fun Fact
+<div class="fun-fact">
+ <div class="pulse-circle"></div>
+ <p>Mitochondria have their own DNA!</p>
+ <p class="subtext">They're the only organelles besides the nucleus with their own genetic material</p>
+</div>
+
+***
+
+# The Power Process
+<div class="process-grid">
+ <div class="step">1. Glucose enters</div>
+ <div class="step">2. ATP production begins</div>
+ <div class="step">3. Energy released</div>
+ <div class="step">4. Cell powered up!</div>
+</div>
+
+***
+
+# When Mitochondria Unite
+<div class="final-message">
+ <h2>They don't just survive...</h2>
+ <h1 class="glow">They Power-thrive! 🔋</h1>
+</div>
+
+****
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..f6e4bdf
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01NdovztD7pifkRaAM4NfGxH",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create an engaging presentation about mitochondria with a focus on their role as the \"powerhouse of the cell\" theme.\n\n---domain---\npowerhouse.scroll.pub\n\n---index.scroll---\nbuildTxt\nbuildHtml\ntitle Mitochondria: The Ultimate Cell Power Plant\nmetaTags keywords=mitochondria,cell biology,powerhouse,energy\nstyle.css\nscript.js\nslideshow\n\n***\n\n# Mitochondria\n## The Ultimate Cell Power Plant\n<div class=\"hero-image\"></div>\n\n***\n\n# What Are Mitochondria?\n<div class=\"split-slide\">\n <div class=\"text-col\">\n • Tiny but mighty organelles\n • Present in almost every cell\n • Like miniature batteries\n • Double membrane structure\n </div>\n <div class=\"image-col membrane-animation\"></div>\n</div>\n\n***\n\n# The Real MVPs\n<div class=\"power-stats\">\n <div class=\"stat\">\n <span class=\"number\">90%</span>\n <span class=\"label\">of cell's energy production</span>\n </div>\n <div class=\"stat\">\n <span class=\"number\">100-1000+</span>\n <span class=\"label\">mitochondria per cell</span>\n </div>\n</div>\n\n***\n\n# Fun Fact\n<div class=\"fun-fact\">\n <div class=\"pulse-circle\"></div>\n <p>Mitochondria have their own DNA!</p>\n <p class=\"subtext\">They're the only organelles besides the nucleus with their own genetic material</p>\n</div>\n\n***\n\n# The Power Process\n<div class=\"process-grid\">\n <div class=\"step\">1. Glucose enters</div>\n <div class=\"step\">2. ATP production begins</div>\n <div class=\"step\">3. Energy released</div>\n <div class=\"step\">4. Cell powered up!</div>\n</div>\n\n***\n\n# When Mitochondria Unite\n<div class=\"final-message\">\n <h2>They don't just survive...</h2>\n <h1 class=\"glow\">They Power-thrive! 🔋</h1>\n</div>\n\n****\n\n---style.css---\n:root {\n --primary: #2C3E50;\n --accent: #E74C3C;\n --text: #ECF0F1;\n --gradient: linear-gradient(135deg, #2C3E50, #3498DB);\n}\n\nbody {\n background: var(--gradient);\n color: var(--text);\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n}\n\n.slide {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n text-align: center;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n background: linear-gradient(45deg, var(--text), #3498DB);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n.hero-image {\n width: 200px;\n height: 200px;\n background: radial-gradient(circle at center, #E74C3C 0%, transparent 70%);\n animation: pulse 2s infinite;\n}\n\n.split-slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2rem;\n width: 100%;\n}\n\n.membrane-animation {\n background: repeating-linear-gradient(45deg, #E74C3C, #E74C3C 10px, #C0392B 10px, #C0392B 20px);\n border-radius: 50%;\n animation: rotate 20s linear infinite;\n}\n\n.power-stats {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 2rem;\n}\n\n.stat {\n text-align: center;\n}\n\n.number {\n font-size: 3rem;\n font-weight: bold;\n color: var(--accent);\n}\n\n.fun-fact {\n position: relative;\n padding: 2rem;\n border-radius: 1rem;\n background: rgba(255,255,255,0.1);\n backdrop-filter: blur(10px);\n}\n\n.pulse-circle {\n width: 20px;\n height: 20px;\n background: var(--accent);\n border-radius: 50%;\n margin: 0 auto 1rem;\n animation: pulse 2s infinite;\n}\n\n.process-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n max-width: 600px;\n}\n\n.step {\n background: rgba(255,255,255,0.1);\n padding: 1rem;\n border-radius: 0.5rem;\n transition: transform 0.3s;\n}\n\n.step:hover {\n transform: scale(1.05);\n}\n\n.glow {\n text-shadow: 0 0 10px var(--accent);\n animation: glow 2s infinite;\n}\n\n@keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n}\n\n@keyframes rotate {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n@keyframes glow {\n 0% { text-shadow: 0 0 10px var(--accent); }\n 50% { text-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent); }\n 100% { text-shadow: 0 0 10px var(--accent); }\n}\n\n@media (max-width: 768px) {\n .split-slide {\n grid-template-columns: 1fr;\n }\n \n .power-stats {\n flex-direction: column;\n }\n \n .process-grid {\n grid-template-columns: 1fr;\n }\n \n h1 {\n font-size: 2rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const steps = document.querySelectorAll('.step');\n steps.forEach((step, index) => {\n setTimeout(() => {\n step.style.opacity = '1';\n }, index * 300);\n });\n});\n\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 635,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1688
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..26ea2bb
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,3 @@
+# powerhouse1.scroll.pub
+
+slideshow generated by Claude from prompt: a presentation about mitochondria
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..65eb2f1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const steps = document.querySelectorAll('.step');
+ steps.forEach((step, index) => {
+ setTimeout(() => {
+ step.style.opacity = '1';
+ }, index * 300);
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..301a3ea
--- /dev/null
+++ b/style.css
@@ -0,0 +1,143 @@
+:root {
+ --primary: #2C3E50;
+ --accent: #E74C3C;
+ --text: #ECF0F1;
+ --gradient: linear-gradient(135deg, #2C3E50, #3498DB);
+}
+
+body {
+ background: var(--gradient);
+ color: var(--text);
+ font-family: system-ui, -apple-system, sans-serif;
+ line-height: 1.6;
+}
+
+.slide {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ text-align: center;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ background: linear-gradient(45deg, var(--text), #3498DB);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.hero-image {
+ width: 200px;
+ height: 200px;
+ background: radial-gradient(circle at center, #E74C3C 0%, transparent 70%);
+ animation: pulse 2s infinite;
+}
+
+.split-slide {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ width: 100%;
+}
+
+.membrane-animation {
+ background: repeating-linear-gradient(45deg, #E74C3C, #E74C3C 10px, #C0392B 10px, #C0392B 20px);
+ border-radius: 50%;
+ animation: rotate 20s linear infinite;
+}
+
+.power-stats {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 2rem;
+}
+
+.stat {
+ text-align: center;
+}
+
+.number {
+ font-size: 3rem;
+ font-weight: bold;
+ color: var(--accent);
+}
+
+.fun-fact {
+ position: relative;
+ padding: 2rem;
+ border-radius: 1rem;
+ background: rgba(255,255,255,0.1);
+ backdrop-filter: blur(10px);
+}
+
+.pulse-circle {
+ width: 20px;
+ height: 20px;
+ background: var(--accent);
+ border-radius: 50%;
+ margin: 0 auto 1rem;
+ animation: pulse 2s infinite;
+}
+
+.process-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ max-width: 600px;
+}
+
+.step {
+ background: rgba(255,255,255,0.1);
+ padding: 1rem;
+ border-radius: 0.5rem;
+ transition: transform 0.3s;
+}
+
+.step:hover {
+ transform: scale(1.05);
+}
+
+.glow {
+ text-shadow: 0 0 10px var(--accent);
+ animation: glow 2s infinite;
+}
+
+@keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.1); }
+ 100% { transform: scale(1); }
+}
+
+@keyframes rotate {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes glow {
+ 0% { text-shadow: 0 0 10px var(--accent); }
+ 50% { text-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent); }
+ 100% { text-shadow: 0 0 10px var(--accent); }
+}
+
+@media (max-width: 768px) {
+ .split-slide {
+ grid-template-columns: 1fr;
+ }
+
+ .power-stats {
+ flex-direction: column;
+ }
+
+ .process-grid {
+ grid-template-columns: 1fr;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+}