InputMCP
by swairshah
- InputMCP
- ui
index.html•6.33 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
:root {
color-scheme: light dark;
--primary: #80b7ff;
--accent: #f28478;
--bg: #ffffff;
--bg-secondary: #f8fafb;
--text: #1a1a1a;
--text-light: #6b7280;
--border: #e5e7eb;
}
body {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
margin: 0;
padding: 12px;
background: var(--bg);
color: var(--text);
height: 100vh;
box-sizing: border-box;
overflow: hidden;
}
.container {
display: flex;
flex-direction: column;
height: calc(100vh - 24px);
min-height: 200px;
}
.message {
display: none;
}
.content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 60px;
margin-bottom: 8px;
overflow: hidden;
}
.status {
min-height: 18px;
font-size: 12px;
color: var(--accent);
margin: 0 0 6px 0;
flex-shrink: 0;
empty-cells: hide;
}
.actions {
display: flex;
justify-content: flex-end;
gap: 8px;
flex-shrink: 0;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.text-input {
appearance: none;
padding: 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 14px;
font-family: inherit;
resize: vertical;
min-height: 36px;
background: var(--bg);
color: var(--text);
transition: border-color 0.2s;
box-sizing: border-box;
width: 100%;
flex: 1;
}
.text-input:focus {
border-color: var(--primary);
outline: none;
}
.draw-canvas {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
display: block;
max-width: 100%;
max-height: 100%;
}
.pixelart-canvas {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 4px;
display: block;
max-width: 100%;
max-height: 100%;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
cursor: crosshair;
}
.canvas-container {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
overflow: auto;
padding: 8px;
}
.color-picker {
position: absolute;
bottom: 12px;
left: 12px;
width: 32px;
height: 32px;
border: 2px solid var(--border);
border-radius: 6px;
cursor: pointer;
background: #000000;
z-index: 10;
transition: border-color 0.2s;
}
.color-picker:hover {
border-color: var(--primary);
}
.color-picker input[type="color"] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
border: none;
}
.palette-container {
display: flex;
gap: 6px;
padding: 6px;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 8px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: center;
}
.palette-color {
width: 28px;
height: 28px;
border: 2px solid var(--border);
border-radius: 4px;
cursor: pointer;
transition: border-color 0.2s, transform 0.1s;
padding: 0;
}
.palette-color:hover {
border-color: var(--primary);
transform: scale(1.1);
}
.palette-color.active {
border-color: var(--primary);
border-width: 3px;
transform: scale(1.15);
}
.custom-color-picker {
position: relative;
width: 28px;
height: 28px;
border: 2px solid var(--border);
border-radius: 4px;
cursor: pointer;
transition: border-color 0.2s, transform 0.1s;
overflow: hidden;
}
.custom-color-picker:hover {
border-color: var(--primary);
transform: scale(1.1);
}
.custom-color-picker.active {
border-color: var(--primary);
border-width: 3px;
transform: scale(1.15);
}
.custom-color-picker .color-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
border: none;
}
.custom-color-picker .color-display {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: var(--text);
pointer-events: none;
mix-blend-mode: difference;
}
button {
appearance: none;
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: opacity 0.2s;
white-space: nowrap;
}
button:hover {
opacity: 0.9;
}
button.primary {
background: var(--primary);
color: #ffffff;
}
button.secondary {
background: var(--accent);
color: #ffffff;
}
/* Small window adjustments */
@media (max-height: 400px) {
body {
padding: 8px;
}
.container {
height: calc(100vh - 16px);
min-height: 150px;
}
button {
padding: 6px 12px;
font-size: 12px;
}
.content {
min-height: 40px;
}
.actions {
padding-top: 6px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--primary: #80b7ff;
--accent: #f28478;
--bg: #0a0a0a;
--bg-secondary: #141414;
--text: #f5f5f5;
--text-light: #9ca3af;
--border: #262626;
}
.draw-canvas {
background: var(--bg-secondary);
}
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="message" id="message"></div>
<div class="content" id="content"></div>
<div class="status" id="status"></div>
<div class="actions" id="actions"></div>
</div>
<script src="renderer.bundle.js"></script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/swairshah/InputMCP'
If you have feedback or need assistance with the MCP directory API, please join our Discord server