site new version with events from steam

script.js

@@ -1,4 +1,5 @@
 document.addEventListener('DOMContentLoaded', () => {
+	
     // Newsletter form submission
     const form = document.getElementById('newsletter-form');
     form.addEventListener('submit', async (e) => {
@@ -8,7 +9,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const message = e.target.querySelector('input[id="sub_message"]');
 		    message.setAttribute('type','text');
 		    message.type = 'text';
-		    const response = await fetch('http://localhost:3001/newsletter', {
+		    const response = await fetch('/api/newsletter', {
             method: 'POST',
             body: JSON.stringify({
                 "email": email,
@@ -28,4 +29,83 @@ document.addEventListener('DOMContentLoaded', () => {
         const video = document.getElementById('background-video');
         video.style.transform = `scale(1.1) translate(${mouseX * -20}px, ${mouseY * -20}px)`;
     });
-});
+
+
+	//retrieve steam events
+	(async () => {
+		const container = document.querySelector("#steam-events");
+		console.log(container);
+		if (!container) return; 
+
+		const appId = container.dataset.appid || "3622810";
+		const count = 5;
+
+		async function loadSteamEvents({ appId, count }) {
+		  const url = `/api/steamevents?appId=${appId}&count=${count}`;
+		  const res = await fetch(url);
+		  if (!res.ok) throw new Error("Unable to retrieve events");
+		  return res.json();
+		}
+
+		function escapeHTML(str) {
+		  const p = document.createElement("p");
+		  p.textContent = str || "";
+		  return p.innerHTML;
+		}
+
+		function renderSteamEvents(container, data) {
+		  if (!data.items?.length) {
+			container.innerHTML = "<p>No event available.</p>";
+			return;
+		  }
+
+		  const list = document.createElement("ul");
+		  list.style.listStyle = "none";
+		  list.style.padding = "0";
+		  list.style.margin = "0";
+
+		  data.items.forEach(item => {
+			const li = document.createElement("li");
+			li.style.border = "1px solid #ddd";
+			li.style.borderRadius = "12px";
+			li.style.padding = "12px 16px";
+			li.style.margin = "8px 0";
+			li.style.background = "#fff";
+			li.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";
+
+			const title = document.createElement("a");
+			title.href = item.url;
+			title.target = "_blank";
+			title.rel = "noopener";
+			title.textContent = item.title || "Update";
+
+			const meta = document.createElement("div");
+			meta.style.fontSize = "12px";
+			meta.style.opacity = "0.7";
+			const d = item.date ? new Date(item.date).toLocaleString() : "";
+			meta.textContent = [d, item.feedlabel].filter(Boolean).join(" • ");
+
+			const excerpt = document.createElement("p");
+			const short = (item.contents || "").replace(/\s+/g, " ").trim().slice(0, 240);
+			excerpt.innerHTML = escapeHTML(short) + (short.length >= 240 ? "…" : "");
+
+			li.appendChild(title);
+			li.appendChild(meta);
+			li.appendChild(excerpt);
+			list.appendChild(li);
+		  });
+
+		  container.innerHTML = "";
+		  container.appendChild(list);
+		}
+
+		try {
+		  const data = await loadSteamEvents({ appId, count });
+		  renderSteamEvents(container, data);
+		} catch (e) {
+		  container.innerHTML = "<p>Error loading Steam events.</p>";
+		  console.error(e);
+		}
+	 })();
+
+});