From 12636e9676df0d817f9b2329f48de605a80bb6e0 Mon Sep 17 00:00:00 2001
From: Jevinca Marvella <mjevincamarvella@gmail.com>
Date: Sat, 15 Nov 2025 14:26:53 +0700
Subject: [PATCH] Frontend

---
 API Register.js       | 15 ++++++++
 Animation Register.js | 81 +++++++++++++++++++++++++++++++++++++++++++
 Register.html         |  2 +-
 3 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 API Register.js
 create mode 100644 Animation Register.js

diff --git a/API Register.js b/API Register.js
new file mode 100644
index 0000000..b191967
--- /dev/null
+++ b/API Register.js	
@@ -0,0 +1,15 @@
+const BASE_URL = "http://localhost:3000/api";
+
+export async function registerRequest(username, password) {
+    try {
+        const response = await fetch(`${BASE_URL}/register`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ username, password })
+        });
+        return await response.json();
+    } catch (err) {
+        console.error("API register error:", err);
+        throw err;
+    }
+}
diff --git a/Animation Register.js b/Animation Register.js
new file mode 100644
index 0000000..9a24f9f
--- /dev/null
+++ b/Animation Register.js	
@@ -0,0 +1,81 @@
+// Particle System
+const particlesContainer = document.getElementById('particles');
+const particleCount = 150;
+const particles = [];
+
+class Particle {
+    constructor() {
+        this.element = document.createElement('div');
+        this.element.className = 'particle';
+        this.reset();
+        particlesContainer.appendChild(this.element);
+    }
+
+    reset() {
+        this.x = Math.random() * window.innerWidth;
+        this.y = Math.random() * window.innerHeight;
+        this.vx = (Math.random() - 0.5) * 1.2;
+        this.vy = (Math.random() - 0.5) * 1.2;
+        this.size = Math.random() * 3 + 2;
+
+        const colors = [
+            '#00d9ff', '#ff00ff', '#00ffff',
+            '#ff0080', '#9d00ff', '#00ff88'
+        ];
+
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        this.element.style.background = color;
+        this.element.style.boxShadow = `0 0 15px ${color}`;
+        this.element.style.width = `${this.size}px`;
+        this.element.style.height = `${this.size}px`;
+
+        this.updatePosition();
+    }
+
+    updatePosition() {
+        this.element.style.left = `${this.x}px`;
+        this.element.style.top = `${this.y}px`;
+    }
+
+    move() {
+        this.x += this.vx;
+        this.y += this.vy;
+
+        if (this.x < -10) this.x = window.innerWidth + 10;
+        if (this.x > window.innerWidth + 10) this.x = -10;
+        if (this.y < -10) this.y = window.innerHeight + 10;
+        if (this.y > window.innerHeight + 10) this.y = -10;
+
+        this.updatePosition();
+    }
+}
+
+// Create particles with even distribution
+const cols = 15;
+const rows = 10;
+let particleIndex = 0;
+
+for (let i = 0; i < rows; i++) {
+    for (let j = 0; j < cols; j++) {
+        if (particleIndex >= particleCount) break;
+
+        const particle = new Particle();
+
+        // Even distribution + slight random offset
+        particle.x = (j / cols) * window.innerWidth + (Math.random() - 0.5) * 100;
+        particle.y = (i / rows) * window.innerHeight + (Math.random() - 0.5) * 100;
+        particle.updatePosition();
+
+        particles.push(particle);
+        particleIndex++;
+    }
+    if (particleIndex >= particleCount) break;
+}
+
+// Animate
+function animate() {
+    particles.forEach(p => p.move());
+    requestAnimationFrame(animate);
+}
+
+animate();
\ No newline at end of file
diff --git a/Register.html b/Register.html
index 62626e2..dbee130 100644
--- a/Register.html
+++ b/Register.html
@@ -60,7 +60,7 @@
     </div>
 
     <script src="Register.js"></script>
-    <script src="Animation Login.js"></script>
+    <script src="Animation Register.js"></script>
     <script src="Modal.js"></script>
     <script src="API Register.js"></script>
   </body>