adding buttons for different types of website archives

src/website/app.js

@@ -31,9 +31,42 @@ function createPostElement(post) {
 
   content.appendChild(title);
 
+  // Create the buttons container
+  const buttonsContainer = document.createElement("div");
+  buttonsContainer.className = "post-buttons";
+
+  // Single button
+  const singleButton = document.createElement("a");
+  singleButton.href = post.url + "/singlefile";
+  singleButton.target = "_blank";
+  singleButton.rel = "noopener noreferrer";
+  singleButton.className = "post-button";
+  singleButton.textContent = "Single";
+
+  // HTML button
+  const htmlButton = document.createElement("a");
+  htmlButton.href = post.url + "/html";
+  htmlButton.target = "_blank";
+  htmlButton.rel = "noopener noreferrer";
+  htmlButton.className = "post-button";
+  htmlButton.textContent = "HTML";
+
+  // PDF button
+  const pdfButton = document.createElement("a");
+  pdfButton.href = post.url + "/pdf";
+  pdfButton.target = "_blank";
+  pdfButton.rel = "noopener noreferrer";
+  pdfButton.className = "post-button";
+  pdfButton.textContent = "PDF";
+
+  buttonsContainer.appendChild(singleButton);
+  buttonsContainer.appendChild(htmlButton);
+  buttonsContainer.appendChild(pdfButton);
+
   // Assemble the complete post
   postElement.appendChild(imageContainer);
   postElement.appendChild(content);
+  postElement.appendChild(buttonsContainer);
 
   return postElement;
 }

src/website/styles.css

@@ -152,6 +152,29 @@ body {
     }
 }
 
+.post-buttons {
+    display: flex;
+    gap: 10px;
+    padding: 0 20px 20px;
+    flex-wrap: wrap;
+}
+
+.post-button {
+    background-color: #ff4500;
+    color: white;
+    text-decoration: none;
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    transition: background-color 0.2s;
+    border: none;
+    cursor: pointer;
+}
+
+.post-button:hover {
+    background-color: #e03d00;
+}
+
 /* Grid layout for desktop */
 @media (min-width: 769px) {
     .posts-container {