finished final project

catalog/js/index.js

@@ -0,0 +1,172 @@
+const bg = document.querySelector("#bg");
+const bubbles = document.querySelectorAll(".bubble"); // Get bubbles *after* the page has loaded
+const cart_btn = document.querySelector("#add_to_cart_btn");
+
+const colors = [
+  "#cedff3",
+  "#adcaeb",
+  "#ffd700",
+  "#f4a460",
+  "#1e90ff",
+  "#dc143c",
+  "#7CFC00",
+];
+
+const text_colors = ["#f4a460", "#1e90ff", "#dc143c"];
+
+let welcome = document.querySelector("#welcome");
+if (welcome != null) {
+  let h1 = welcome.querySelector("h1");
+  let p = welcome.querySelector("p");
+
+  let color = text_colors[Math.floor(Math.random() * colors.length)];
+  h1.style.color = color;
+  p.style.color = color;
+}
+
+function initial_bubbles() {
+  bubbles.forEach((bubble) => {
+    let size = Math.ceil(Math.random() * 100) + 50;
+    let color = colors[Math.floor(Math.random() * colors.length)];
+    let x = Math.floor(Math.random() * bg.offsetWidth) - size + 100;
+    let y = Math.floor(Math.random() * bg.offsetHeight) - size + 100;
+    const delay = Math.random() * 5 + "s";
+    const duration = Math.random() * 10 * Math.random() + 15 + "s";
+
+    let randomX = (Math.random() - 0.5) * 500;
+    let randomY = (Math.random() - 0.5) * 500;
+
+    while (randomX < 0 || randomX > window.innerWidth)
+      randomX = (Math.random() - 0.5) * 500;
+
+    while (randomY < 0 || randomY > window.innerHeight)
+      randomY = (Math.random() - 0.5) * 500;
+
+    randomX = randomX + "px";
+    randomY = randomY + "px";
+
+    let a = Math.random();
+    let b = Math.random();
+    let c = Math.random();
+    let d = Math.random();
+
+    if (Math.random() > 0.5) a *= -1;
+
+    if (Math.random() > 0.5) b *= -1;
+
+    if (Math.random() > 0.5) c *= -1;
+
+    if (Math.random() > 0.5) d *= -1;
+
+    if (Math.random() > 0.5) {
+      let curveX = (Math.random() - 0.5) * 500 + "px";
+      let curveY = (Math.random() - 0.5) * 500 + "px";
+      bubble.style.setProperty("--curve-x", curveX);
+      bubble.style.setProperty("--curve-y", curveY);
+      bubble.style.animationName = "float-curve"; // Apply the curved animation
+    } else {
+      bubble.style.animationName = "float-random"; // Keep the straight animation
+    }
+
+    bubble.style.position = "absolute";
+    bubble.style.top = y + "px";
+    bubble.style.left = x + "px";
+    bubble.style.height = size + "px";
+    bubble.style.width = size + "px";
+    bubble.style.borderRadius = "50%";
+    bubble.style.backgroundColor = color;
+    bubble.style.opacity = 0.8;
+    bubble.style.setProperty("--random-x", randomX);
+    bubble.style.setProperty("--random-y", randomY);
+    bubble.style.animationDelay = delay;
+    bubble.style.animationDuration = duration;
+    bubble.style.animationTimingFunction =
+      "cubic-bezier(" + a + ", " + b + ", " + c + ", " + d + ")";
+    bubble.style.boxShadow = "6px 6px 14px rgba(0, 0, 0, 0.45)";
+  });
+}
+
+initial_bubbles();
+if (document.startViewTransition) {
+  window.navigation.addEventListener("navigate", () =>
+    document.startViewTransition(),
+  );
+}
+
+//
+// // Function to capture the current state of the bubbles
+// function captureBubbleStates() {
+//   const bubbles = document.querySelectorAll(".bubble");
+//   bubbleStates = Array.from(bubbles).map((bubble) => ({
+//     left: bubble.style.left,
+//     top: bubble.style.top,
+//     width: bubble.style.width,
+//     height: bubble.style.height, // Added height
+//     backgroundColor: bubble.style.backgroundColor,
+//     opacity: bubble.style.opacity,
+//     delay: bubble.style.animationDelay,
+//     dur: bubble.style.animationDuration,
+//     ran_x: getComputedStyle(bubble).getPropertyValue("--random-x"),
+//     ran_y: getComputedStyle(bubble).getPropertyValue("--random-y"),
+//   }));
+//
+//   try {
+//     window.name = JSON.stringify(bubbleStates);
+//   } catch (error) {
+//     console.error("Error stringifying bubble states:", error);
+//     window.name = ""; // Clear window.name in case of error
+//   }
+// }
+//
+// // Function to apply the stored states to the new bubbles
+// function applyBubbleStates() {
+//   try {
+//     const storedStates = JSON.parse(window.name);
+//     if (storedStates && storedStates.length > 0) {
+//       const newBubbles = document.querySelectorAll(".bubble");
+//       newBubbles.forEach((bubble, index) => {
+//         if (storedStates[index]) {
+//           bubble.style.left = storedStates[index].left;
+//           bubble.style.top = storedStates[index].top;
+//           bubble.style.width = storedStates[index].width;
+//           bubble.style.height = storedStates[index].width;
+//           bubble.style.backgroundColor = storedStates[index].backgroundColor;
+//           bubble.style.borderRadius = "50%";
+//           bubble.style.position = "absolute"; // Ensure they are absolutely positioned
+//           bubble.style.opacity = storedStates[index].opacity;
+//           bubble.style.animationDuration = storedStates[index].dur;
+//           bubble.style.setProperty("--random-x", storedStates[index].ran_x);
+//           bubble.style.setProperty("--random-y", storedStates[index].ran_y);
+//         }
+//       });
+//
+//       bubbleStates = storedStates; // Update the local variable
+//     } else {
+//       initial_bubbles();
+//     }
+//   } catch (error) {
+//     console.error("Error parsing window.name:", error);
+//     initial_bubbles();
+//   }
+// }
+//
+// // Event listeners
+// window.addEventListener("load", applyBubbleStates);
+// window.addEventListener("beforeunload", captureBubbleStates);
+//
+// // View Transitions API Handling
+// if (document.startViewTransition) {
+//   window.navigation.addEventListener("navigate", (event) => {
+//     const promise = Promise.resolve()
+//       .then(captureBubbleStates)
+//       .then(() =>
+//         document.startViewTransition(async () => {
+//           await event.destination.loadPromise;
+//           applyBubbleStates();
+//         }),
+//       );
+//   });
+// } else {
+//   console.log("ViewTransition API not supported");
+//   initial_bubbles();
+// }