added new wallpaper

FlawCra · Jun 13, 2024 · 660f47d · 660f47d
1 parent c611c3b
commit 660f47d
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 0 deletions.
diff --git a/miniweb/htdocs_balls/index.html b/miniweb/htdocs_balls/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weird Patterns</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #000;
+        }
+        canvas {
+            border: 1px solid white;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        const colors = ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1', '#955251', '#B565A7'];
+        const shapes = [];
+
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+
+        function getRandomColor() {
+            return colors[Math.floor(Math.random() * colors.length)];
+        }
+
+        function Shape(x, y, dx, dy, size, color) {
+            this.x = x;
+            this.y = y;
+            this.dx = dx;
+            this.dy = dy;
+            this.size = size;
+            this.color = color;
+
+            this.draw = function() {
+                ctx.beginPath();
+                //if (Math.random() > 0.5) {
+                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
+                //} else {
+                //    ctx.rect(this.x, this.y, this.size, this.size);
+                //}
+                ctx.fillStyle = this.color;
+                ctx.fill();
+                ctx.closePath();
+            }
+
+            this.update = function() {
+                if (this.x + this.size > canvas.width || this.x - this.size < 0) {
+                    this.dx = -this.dx;
+                }
+
+                if (this.y + this.size > canvas.height || this.y - this.size < 0) {
+                    this.dy = -this.dy;
+                }
+
+                this.x += this.dx;
+                this.y += this.dy;
+
+                this.draw();
+            }
+        }
+
+        function init() {
+            for (let i = 0; i < 100; i++) {
+                let size = getRandomInt(10, 50);
+                let x = getRandomInt(size, canvas.width - size);
+                let y = getRandomInt(size, canvas.height - size);
+                let dx = (Math.random() - 0.5) * 4;
+                let dy = (Math.random() - 0.5) * 4;
+                let color = getRandomColor();
+                shapes.push(new Shape(x, y, dx, dy, size, color));
+            }
+        }
+
+        function animate() {
+            requestAnimationFrame(animate);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            shapes.forEach(shape => {
+                shape.update();
+            });
+        }
+
+        init();
+        animate();
+    </script>
+</body>
+</html>
diff --git a/miniweb/htdocs_balls/info.json b/miniweb/htdocs_balls/info.json
@@ -0,0 +1,4 @@
+{
+    "name":"Balls",
+    "folder":"htdocs_balls"
+}