diff --git a/src/website/app.js b/src/website/app.js index c444d2a..7b77eae 100644 --- a/src/website/app.js +++ b/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; } diff --git a/src/website/styles.css b/src/website/styles.css index 15ab570..07072fa 100644 --- a/src/website/styles.css +++ b/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 {