index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://cell.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Cell Particle Simulator
+ style.css
+ header
+ class hero
+ h1 Cell Particle Simulator
+ p Experience cellular dynamics in real-time
+ main
+ section
+ class simulator-container
+ canvas
+ id particleCanvas
+ width 800
+ height 600
+ div
+ class controls
+ button Reset
+ id resetBtn
+ div
+ class slider-container
+ label Particle Count
+ for particleCount
+ input
+ type range
+ id particleCount
+ min 50
+ max 500
+ value 200
+ div
+ class slider-container
+ label Particle Speed
+ for particleSpeed
+ input
+ type range
+ id particleSpeed
+ min 1
+ max 10
+ value 5
+ footer
+ p Built with passion for cellular biology and web technology
+ nav
+ a About
+ href #about
+ a Contact
+ href #contact
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01C5HUJoEJ6B4trANGowunoV",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a particle cell simulator website. For the domain, I suggest:\n\n---domain---\ncell.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://cell.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Cell Particle Simulator\nstyle.css\nheader\n class hero\n h1 Cell Particle Simulator\n p Experience cellular dynamics in real-time\nmain\n section\n class simulator-container\n canvas\n id particleCanvas\n width 800\n height 600\n div\n class controls\n button Reset\n id resetBtn\n div\n class slider-container\n label Particle Count\n for particleCount\n input\n type range\n id particleCount\n min 50\n max 500\n value 200\n div\n class slider-container\n label Particle Speed\n for particleSpeed\n input\n type range\n id particleSpeed\n min 1\n max 10\n value 5\nfooter\n p Built with passion for cellular biology and web technology\n nav\n a About\n href #about\n a Contact\n href #contact\nscript.js\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --accent-color: #3498db;\n --bg-color: #ecf0f1;\n --text-color: #2c3e50;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background: var(--bg-color);\n color: var(--text-color);\n line-height: 1.6;\n}\n\nheader {\n padding: 2rem;\n text-align: center;\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n color: white;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n}\n\n.simulator-container {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 1rem;\n background: white;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\ncanvas {\n width: 100%;\n height: auto;\n border-radius: 0.5rem;\n background: #000;\n}\n\n.controls {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n padding: 1rem;\n align-items: center;\n justify-content: center;\n}\n\n.slider-container {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\ninput[type=\"range\"] {\n width: 200px;\n height: 8px;\n border-radius: 4px;\n -webkit-appearance: none;\n background: var(--accent-color);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n background: white;\n border: 2px solid var(--accent-color);\n border-radius: 50%;\n cursor: pointer;\n}\n\nbutton {\n padding: 0.5rem 1.5rem;\n border: none;\n border-radius: 0.25rem;\n background: var(--accent-color);\n color: white;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\nbutton:hover {\n transform: scale(1.05);\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--primary-color);\n color: white;\n}\n\nfooter nav {\n margin-top: 1rem;\n}\n\nfooter a {\n color: white;\n text-decoration: none;\n margin: 0 1rem;\n}\n\n@media (max-width: 768px) {\n .simulator-container {\n margin: 1rem;\n }\n \n .controls {\n flex-direction: column;\n }\n}\n---script.js---\nclass Particle {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.vx = (Math.random() - 0.5) * 2;\n this.vy = (Math.random() - 0.5) * 2;\n this.radius = Math.random() * 3 + 2;\n this.color = `hsl(${Math.random() * 60 + 180}, 70%, 50%)`;\n }\n\n update(speed) {\n this.x += this.vx * speed;\n this.y += this.vy * speed;\n }\n\n draw(ctx) {\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n ctx.fillStyle = this.color;\n ctx.fill();\n ctx.closePath();\n }\n}\n\nclass CellSimulator {\n constructor() {\n this.canvas = document.getElementById('particleCanvas');\n this.ctx = this.canvas.getContext('2d');\n this.particles = [];\n this.speed = 5;\n this.resizeCanvas();\n this.bindEvents();\n this.createParticles(200);\n this.animate();\n }\n\n resizeCanvas() {\n this.canvas.width = this.canvas.offsetWidth;\n this.canvas.height = this.canvas.offsetHeight;\n }\n\n bindEvents() {\n window.addEventListener('resize', () => this.resizeCanvas());\n document.getElementById('resetBtn').addEventListener('click', () => this.reset());\n document.getElementById('particleCount').addEventListener('input', (e) => {\n this.createParticles(parseInt(e.target.value));\n });\n document.getElementById('particleSpeed').addEventListener('input', (e) => {\n this.speed = parseInt(e.target.value);\n });\n }\n\n createParticles(count) {\n this.particles = [];\n for (let i = 0; i < count; i++) {\n const x = Math.random() * this.canvas.width;\n const y = Math.random() * this.canvas.height;\n this.particles.push(new Particle(x, y));\n }\n }\n\n reset() {\n this.createParticles(this.particles.length);\n }\n\n animate() {\n this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';\n this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);\n\n this.particles.forEach(particle => {\n particle.update(this.speed);\n\n if (particle.x < 0 || particle.x > this.canvas.width) particle.vx *= -1;\n if (particle.y < 0 || particle.y > this.canvas.height) particle.vy *= -1;\n\n particle.draw(this.ctx);\n });\n\n requestAnimationFrame(() => this.animate());\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n new CellSimulator();\n});\n---end---\n\nThis creates a beautiful, interactive cell particle simulator with the following features:\n\n1. Realistic particle movement with collision detection\n2. Adjustable particle count and speed\n3. Beautiful blue color scheme with smooth gradients\n4. Responsive design that works on all devices\n5. Canvas-based animation with trailing effects\n6. Interactive controls with styled sliders and buttons\n7. Smooth animations and transitions\n8. Professional layout with proper spacing and typography\n\nThe particles simulate cellular movement with a slight biological feel through their color scheme and movement patterns. The trailing effect creates a beautiful visualization of particle paths, making it both educational and visually appealing."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 827,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2033
+ }
+ }
readme.scroll
Changed around line 1
+ # cell.scroll.pub
+
+ website generated by Claude from prompt: a website with a particle simulator that can simulate a cell
script.js
Changed around line 1
+ class Particle {
+ constructor(x, y) {
+ this.x = x;
+ this.y = y;
+ this.vx = (Math.random() - 0.5) * 2;
+ this.vy = (Math.random() - 0.5) * 2;
+ this.radius = Math.random() * 3 + 2;
+ this.color = `hsl(${Math.random() * 60 + 180}, 70%, 50%)`;
+ }
+
+ update(speed) {
+ this.x += this.vx * speed;
+ this.y += this.vy * speed;
+ }
+
+ draw(ctx) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+ ctx.fillStyle = this.color;
+ ctx.fill();
+ ctx.closePath();
+ }
+ }
+
+ class CellSimulator {
+ constructor() {
+ this.canvas = document.getElementById('particleCanvas');
+ this.ctx = this.canvas.getContext('2d');
+ this.particles = [];
+ this.speed = 5;
+ this.resizeCanvas();
+ this.bindEvents();
+ this.createParticles(200);
+ this.animate();
+ }
+
+ resizeCanvas() {
+ this.canvas.width = this.canvas.offsetWidth;
+ this.canvas.height = this.canvas.offsetHeight;
+ }
+
+ bindEvents() {
+ window.addEventListener('resize', () => this.resizeCanvas());
+ document.getElementById('resetBtn').addEventListener('click', () => this.reset());
+ document.getElementById('particleCount').addEventListener('input', (e) => {
+ this.createParticles(parseInt(e.target.value));
+ });
+ document.getElementById('particleSpeed').addEventListener('input', (e) => {
+ this.speed = parseInt(e.target.value);
+ });
+ }
+
+ createParticles(count) {
+ this.particles = [];
+ for (let i = 0; i < count; i++) {
+ const x = Math.random() * this.canvas.width;
+ const y = Math.random() * this.canvas.height;
+ this.particles.push(new Particle(x, y));
+ }
+ }
+
+ reset() {
+ this.createParticles(this.particles.length);
+ }
+
+ animate() {
+ this.ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+ this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+ this.particles.forEach(particle => {
+ particle.update(this.speed);
+
+ if (particle.x < 0 || particle.x > this.canvas.width) particle.vx *= -1;
+ if (particle.y < 0 || particle.y > this.canvas.height) particle.vy *= -1;
+
+ particle.draw(this.ctx);
+ });
+
+ requestAnimationFrame(() => this.animate());
+ }
+ }
+
+ document.addEventListener('DOMContentLoaded', () => {
+ new CellSimulator();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --bg-color: #ecf0f1;
+ --text-color: #2c3e50;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ }
+
+ header {
+ padding: 2rem;
+ text-align: center;
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ color: white;
+ }
+
+ h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+ }
+
+ .simulator-container {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 1rem;
+ background: white;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+
+ canvas {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ background: #000;
+ }
+
+ .controls {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+ padding: 1rem;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .slider-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ input[type="range"] {
+ width: 200px;
+ height: 8px;
+ border-radius: 4px;
+ -webkit-appearance: none;
+ background: var(--accent-color);
+ }
+
+ input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 20px;
+ height: 20px;
+ background: white;
+ border: 2px solid var(--accent-color);
+ border-radius: 50%;
+ cursor: pointer;
+ }
+
+ button {
+ padding: 0.5rem 1.5rem;
+ border: none;
+ border-radius: 0.25rem;
+ background: var(--accent-color);
+ color: white;
+ cursor: pointer;
+ transition: transform 0.2s;
+ }
+
+ button:hover {
+ transform: scale(1.05);
+ }
+
+ footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--primary-color);
+ color: white;
+ }
+
+ footer nav {
+ margin-top: 1rem;
+ }
+
+ footer a {
+ color: white;
+ text-decoration: none;
+ margin: 0 1rem;
+ }
+
+ @media (max-width: 768px) {
+ .simulator-container {
+ margin: 1rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+ }