SearXNG MCP Server
by tisDDM
Verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SearXNG MCP Logo Generator</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
canvas {
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: white;
}
.controls {
margin-top: 20px;
display: flex;
gap: 10px;
}
button {
padding: 8px 16px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
button:hover {
background-color: #3367d6;
}
p {
margin-top: 20px;
color: #666;
max-width: 600px;
text-align: center;
}
</style>
</head>
<body>
<canvas id="logoCanvas" width="400" height="400"></canvas>
<div class="controls">
<button id="downloadBtn">Download Logo (PNG)</button>
<button id="regenerateBtn">Regenerate Logo</button>
</div>
<p>Right-click on the image and select "Save Image As..." to save it, or use the Download button above.</p>
<script>
const canvas = document.getElementById('logoCanvas');
const ctx = canvas.getContext('2d');
const downloadBtn = document.getElementById('downloadBtn');
const regenerateBtn = document.getElementById('regenerateBtn');
// Colors
const colors = {
primary: '#4285f4', // Google Blue
secondary: '#34a853', // Google Green
accent1: '#fbbc05', // Google Yellow
accent2: '#ea4335', // Google Red
dark: '#202124', // Dark Gray
light: '#ffffff' // White
};
function drawLogo() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Background
ctx.fillStyle = colors.light;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw circular background
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 160;
// Main circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = colors.primary;
ctx.fill();
// Inner circle (white)
ctx.beginPath();
ctx.arc(centerX, centerY, radius - 20, 0, 2 * Math.PI);
ctx.fillStyle = colors.light;
ctx.fill();
// Draw magnifying glass
const glassRadius = 70;
const glassX = centerX - 20;
const glassY = centerY - 20;
const handleLength = 100;
const handleWidth = 25;
const handleAngle = Math.PI / 4; // 45 degrees
// Glass circle
ctx.beginPath();
ctx.arc(glassX, glassY, glassRadius, 0, 2 * Math.PI);
ctx.strokeStyle = colors.primary;
ctx.lineWidth = 15;
ctx.stroke();
// Glass handle
const handleStartX = glassX + glassRadius * Math.cos(handleAngle);
const handleStartY = glassY + glassRadius * Math.sin(handleAngle);
const handleEndX = handleStartX + handleLength * Math.cos(handleAngle);
const handleEndY = handleStartY + handleLength * Math.sin(handleAngle);
ctx.beginPath();
ctx.moveTo(handleStartX, handleStartY);
ctx.lineTo(handleEndX, handleEndY);
ctx.lineCap = 'round';
ctx.strokeStyle = colors.primary;
ctx.lineWidth = handleWidth;
ctx.stroke();
// Draw MCP connection nodes
const nodeRadius = 12;
const nodeDistance = 110;
// Draw 3 nodes around the magnifying glass
for (let i = 0; i < 3; i++) {
const angle = (i * 2 * Math.PI / 3) + Math.PI / 6;
const nodeX = centerX + nodeDistance * Math.cos(angle);
const nodeY = centerY + nodeDistance * Math.sin(angle);
// Node circle
ctx.beginPath();
ctx.arc(nodeX, nodeY, nodeRadius, 0, 2 * Math.PI);
ctx.fillStyle = i === 0 ? colors.accent2 : (i === 1 ? colors.accent1 : colors.secondary);
ctx.fill();
// Connection line to center
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(nodeX, nodeY);
ctx.strokeStyle = i === 0 ? colors.accent2 : (i === 1 ? colors.accent1 : colors.secondary);
ctx.lineWidth = 3;
ctx.stroke();
}
// Add text
ctx.font = 'bold 40px Arial';
ctx.fillStyle = colors.dark;
ctx.textAlign = 'center';
ctx.fillText('SearXNG', centerX, centerY + radius + 50);
ctx.font = 'bold 24px Arial';
ctx.fillStyle = colors.primary;
ctx.fillText('MCP', centerX, centerY + radius + 80);
}
// Initial draw
drawLogo();
// Download functionality
downloadBtn.addEventListener('click', function() {
const link = document.createElement('a');
link.download = 'searxng-mcp-logo.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
// Regenerate functionality (just redraws the same logo for this example)
regenerateBtn.addEventListener('click', drawLogo);
</script>
</body>
</html>