Payload CMS MCP Server

MIT License
5
  • Linux
  • Apple
  • public
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matmax Logo Generator</title> <style> body { margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .logo-container { display: flex; align-items: center; background-color: transparent; padding: 10px; border-radius: 8px; } .logo-image { width: 80px; height: 80px; object-fit: contain; } .logo-text { margin-left: 15px; display: flex; flex-direction: column; } .logo-text strong { font-size: 24px; font-weight: 700; color: #333; } .server-text { font-size: 18px; font-weight: 500; color: #555; } canvas { border: 1px dashed #ccc; margin-top: 20px; background-color: transparent; } .controls { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } button { padding: 10px; background-color: #0070f3; color: white; border: none; border-radius: 4px; cursor: pointer; } </style> </head> <body> <div style="display: flex; flex-direction: column; align-items: center;"> <div class="logo-container" id="logoContainer"> <img src="/00Matmax-world-logo-_1_-svg.png" alt="Matmax Logo" class="logo-image" id="logoImage"> <div class="logo-text"> <strong>PAYLOAD CMS</strong> <span class="server-text">MCP SERVER</span> </div> </div> <canvas id="canvas" width="500" height="120"></canvas> <div class="controls"> <button id="generateBtn">Generate Logo</button> <a id="downloadLink" download="matmax-payload-mcp-logo.png" style="display: none;">Download Logo</a> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const logoContainer = document.getElementById('logoContainer'); const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const generateBtn = document.getElementById('generateBtn'); const downloadLink = document.getElementById('downloadLink'); const logoImage = document.getElementById('logoImage'); // Wait for the image to load logoImage.onload = function() { generateBtn.disabled = false; }; generateBtn.addEventListener('click', function() { // Clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw the logo container to canvas html2canvas(logoContainer, { backgroundColor: null, scale: 2 }).then(function(renderedCanvas) { // Draw the rendered canvas to our main canvas ctx.drawImage(renderedCanvas, 0, 0, canvas.width, canvas.height); // Create download link const dataURL = canvas.toDataURL('image/png'); downloadLink.href = dataURL; downloadLink.style.display = 'block'; downloadLink.textContent = 'Download Logo'; downloadLink.className = 'button'; downloadLink.style.marginTop = '10px'; downloadLink.style.padding = '10px'; downloadLink.style.backgroundColor = '#0070f3'; downloadLink.style.color = 'white'; downloadLink.style.borderRadius = '4px'; downloadLink.style.textDecoration = 'none'; downloadLink.style.textAlign = 'center'; }); }); }); </script> <!-- Include html2canvas library --> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </body> </html>