diff --git a/index.html b/index.html index 3b06d7b..0cfce38 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + @@ -23,6 +24,16 @@ Dots & Boxes Game - + + .circle { + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: darkturquoise; + pointer-events: none; + transform: translate(-50%, -50%); + z-index: 9999; +} + + + +
404 pic
- + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/pages/FAQs.html b/pages/FAQs.html index 9dca082..d572f75 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -19,10 +19,67 @@ .attribution a { color: hsl(228, 45%, 44%); } + .circle { + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: darkturquoise; + pointer-events: none; + transform: translate(-50%, -50%); + z-index: 9999; +} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/pages/termsofservice.html b/pages/termsofservice.html index 8a77c06..1290bae 100644 --- a/pages/termsofservice.html +++ b/pages/termsofservice.html @@ -8,7 +8,18 @@ - +
@@ -61,6 +72,53 @@

Contact Information

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/styles/index.style.css b/styles/index.style.css index fee31c2..6522915 100644 --- a/styles/index.style.css +++ b/styles/index.style.css @@ -8,6 +8,7 @@ body { linear-gradient(90deg, #ebf4f9 1px, transparent 1px); width: 100vw; min-height: 100vh; + overflow: hidden; } .settings { diff --git a/trail.js b/trail.js new file mode 100644 index 0000000..1e50253 --- /dev/null +++ b/trail.js @@ -0,0 +1,91 @@ +const coords = { x: 0, y: 0 }; +const circles = document.querySelectorAll(".circle"); + +const colors = [ + "#800080", // Color #800080 (Purple) + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", + "#800080", +]; + +circles.forEach((circle, index) => { + circle.style.backgroundColor = colors[index % colors.length]; +}); + +window.addEventListener("mousemove", (e) => { + coords.x = e.pageX; + coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position + + // Update circle sizes based on distance from cursor + circles.forEach((circle, index) => { + const distance = Math.sqrt( + Math.pow(coords.x - circle.offsetLeft, 2) + + Math.pow(coords.y - circle.offsetTop, 2) + ); + + // Calculate scale based on distance + const maxScale = 1; // Maximum scale for the circle under the cursor + const minScale = 0.2; // Minimum scale for the smallest circle + + // Scale factor based on distance (inverse relation) + const scaleFactor = 1 - (distance / 200); // Adjust 200 based on your preference for distance effect + + // Apply scale to the circle + circle.style.transform = `scale(${minScale + scaleFactor * (maxScale - minScale)})`; + }); +}); + +function animateCircles() { + let x = coords.x; + let y = coords.y; + + circles.forEach((circle, index) => { + circle.style.left = `${x}px`; + circle.style.top = `${y}px`; + + const nextCircle = circles[index + 1] || circles[0]; + x += (nextCircle.offsetLeft - x) * 0.3; + y += (nextCircle.offsetTop - y) * 0.3; + }); + + requestAnimationFrame(animateCircles); +} + +animateCircles();