commit ef513dcae1edc2ffc1fa96f60e925ce450b5ba91
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 07:10:20 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..51a707b
--- /dev/null
+++ b/body.html
@@ -0,0 +1,21 @@
+<header>
+ <h1>Welcome to ParticleVerse</h1>
+ <p>Explore the future of web design</p>
+</header>
+<main>
+ <section id="about">
+ <h2>About Us</h2>
+ <p>We create immersive 3D experiences that captivate and engage.</p>
+ </section>
+ <section id="portfolio">
+ <h2>Portfolio</h2>
+ <p>Discover our stunning projects and innovative solutions.</p>
+ </section>
+ <section id="contact">
+ <h2>Contact</h2>
+ <p>Get in touch with us to start your next project.</p>
+ </section>
+</main>
+<footer>
+ <p>ParticleVerse</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8f97491
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://particleverse.scroll.pub
+metaTags
+editButton /edit.html
+title ParticleVerse - Immersive 3D Experience
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..953ae77
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "6584c838-20b4-4078-82f0-072d0e9cea7e",
+ "object": "chat.completion",
+ "created": 1735369806,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nparticleverse.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://particleverse.scroll.pub\nmetaTags\neditButton /edit.html\ntitle ParticleVerse - Immersive 3D Experience\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>Welcome to ParticleVerse</h1>\n <p>Explore the future of web design</p>\n</header>\n<main>\n <section id=\"about\">\n <h2>About Us</h2>\n <p>We create immersive 3D experiences that captivate and engage.</p>\n </section>\n <section id=\"portfolio\">\n <h2>Portfolio</h2>\n <p>Discover our stunning projects and innovative solutions.</p>\n </section>\n <section id=\"contact\">\n <h2>Contact</h2>\n <p>Get in touch with us to start your next project.</p>\n </section>\n</main>\n<footer>\n <p>ParticleVerse</p>\n</footer>\n---style.css---\nbody {\n margin: 0;\n font-family: 'Arial', sans-serif;\n color: #fff;\n background: #1a1a1a;\n overflow: hidden;\n}\n\nheader {\n text-align: center;\n padding: 100px 20px;\n background: linear-gradient(135deg, #6a11cb, #2575fc);\n}\n\nh1 {\n font-size: 3rem;\n margin-bottom: 10px;\n}\n\np {\n font-size: 1.2rem;\n}\n\nmain {\n padding: 50px 20px;\n}\n\nsection {\n margin-bottom: 50px;\n}\n\nh2 {\n font-size: 2rem;\n margin-bottom: 20px;\n}\n\nfooter {\n text-align: center;\n padding: 20px;\n background: #333;\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const canvas = document.createElement('canvas');\n document.body.appendChild(canvas);\n const ctx = canvas.getContext('2d');\n\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n const particles = [];\n const particleCount = 100;\n\n class Particle {\n constructor() {\n this.x = Math.random() * canvas.width;\n this.y = Math.random() * canvas.height;\n this.size = Math.random() * 5 + 1;\n this.speedX = Math.random() * 3 - 1.5;\n this.speedY = Math.random() * 3 - 1.5;\n }\n\n update() {\n this.x += this.speedX;\n this.y += this.speedY;\n\n if (this.size > 0.2) this.size -= 0.1;\n }\n\n draw() {\n ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.closePath();\n ctx.fill();\n }\n }\n\n function init() {\n particles.length = 0;\n for (let i = 0; i < particleCount; i++) {\n particles.push(new Particle());\n }\n }\n\n function animate() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n particles.forEach(particle => {\n particle.update();\n particle.draw();\n });\n requestAnimationFrame(animate);\n }\n\n init();\n animate();\n\n window.addEventListener('resize', () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n init();\n });\n\n canvas.addEventListener('mousemove', (e) => {\n const mouseX = e.clientX;\n const mouseY = e.clientY;\n\n particles.forEach(particle => {\n const dx = mouseX - particle.x;\n const dy = mouseY - particle.y;\n const dist = Math.sqrt(dx * dx + dy * dy);\n\n if (dist < 100) {\n particle.speedX = dx * 0.05;\n particle.speedY = dy * 0.05;\n }\n });\n });\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 393,
+ "completion_tokens": 957,
+ "total_tokens": 1350,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 393
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..b613a4f
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# particleverse.scroll.pub
+Website generated by DeepSeek from prompt: Design and develop an immersive, visually stunning 3D website that integrates a dynamic particle system as a core design element. The website should feature an interactive homepage where particles react to user interactions, such as mouse movements or clicks, creating an engaging and modern experience. Include smooth transitions between sections, such as an about page, a portfolio or services section, and a contact page, all enhanced with subtle 3D effects and animations. Use a cohesive color scheme and typography that aligns with [insert brand or theme], and ensure the website is fully responsive and optimized for performance across devices. Implement the particle system using a library like Three.js or similar, and ensure it enhances the user experience without compromising load times or functionality. Deliver a fully functional, tested, and hosted website with documentation for future updates.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..a19fd7d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,79 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.createElement('canvas');
+ document.body.appendChild(canvas);
+ const ctx = canvas.getContext('2d');
+
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ const particles = [];
+ const particleCount = 100;
+
+ class Particle {
+ constructor() {
+ this.x = Math.random() * canvas.width;
+ this.y = Math.random() * canvas.height;
+ this.size = Math.random() * 5 + 1;
+ this.speedX = Math.random() * 3 - 1.5;
+ this.speedY = Math.random() * 3 - 1.5;
+ }
+
+ update() {
+ this.x += this.speedX;
+ this.y += this.speedY;
+
+ if (this.size > 0.2) this.size -= 0.1;
+ }
+
+ draw() {
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+ ctx.closePath();
+ ctx.fill();
+ }
+ }
+
+ function init() {
+ particles.length = 0;
+ for (let i = 0; i < particleCount; i++) {
+ particles.push(new Particle());
+ }
+ }
+
+ function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ particles.forEach(particle => {
+ particle.update();
+ particle.draw();
+ });
+ requestAnimationFrame(animate);
+ }
+
+ init();
+ animate();
+
+ window.addEventListener('resize', () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ init();
+ });
+
+ canvas.addEventListener('mousemove', (e) => {
+ const mouseX = e.clientX;
+ const mouseY = e.clientY;
+
+ particles.forEach(particle => {
+ const dx = mouseX - particle.x;
+ const dy = mouseY - particle.y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+
+ if (dist < 100) {
+ particle.speedX = dx * 0.05;
+ particle.speedY = dy * 0.05;
+ }
+ });
+ });
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..84a0f32
--- /dev/null
+++ b/style.css
@@ -0,0 +1,41 @@
+body {
+ margin: 0;
+ font-family: 'Arial', sans-serif;
+ color: #fff;
+ background: #1a1a1a;
+ overflow: hidden;
+}
+
+header {
+ text-align: center;
+ padding: 100px 20px;
+ background: linear-gradient(135deg, #6a11cb, #2575fc);
+}
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 10px;
+}
+
+p {
+ font-size: 1.2rem;
+}
+
+main {
+ padding: 50px 20px;
+}
+
+section {
+ margin-bottom: 50px;
+}
+
+h2 {
+ font-size: 2rem;
+ margin-bottom: 20px;
+}
+
+footer {
+ text-align: center;
+ padding: 20px;
+ background: #333;
+}
\ No newline at end of file