Feedback Collector MCP
index.html•5.61 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AI Feedback Collection</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="feedback-container">
<div class="feedback-header">
<h2>AI Feedback Collection</h2>
<!-- Timer UI -->
<div class="timer-container">
<div class="timer-display">
<span id="timer-seconds">60</span>s
</div>
<button id="timer-toggle" class="timer-toggle" title="Pause/Resume Timer">
<!-- Pause SVG Icon -->
<svg id="pause-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<rect x="6" y="4" width="4" height="16"/>
<rect x="14" y="4" width="4" height="16"/>
</svg>
<!-- Play SVG Icon (hidden by default) -->
<svg id="play-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
<polygon points="5,3 19,12 5,21"/>
</svg>
</button>
</div>
</div>
<div class="feedback-content">
<div class="prompt-container">
<div id="markdown-prompt" class="feedback-prompt markdown-content"></div>
</div>
<div class="textarea-container">
<textarea placeholder="Type your response here..."></textarea>
</div>
<!-- Image upload and preview section -->
<div class="image-section">
<div class="image-upload">
<label for="image-input" class="image-upload-label">
<span class="upload-icon">+</span>
<span class="upload-text">Add Image</span>
</label>
<input type="file" id="image-input" accept="image/*" />
<div class="image-upload-hint">You can also paste from clipboard (Ctrl+V) or drag and drop an image</div>
</div>
<div class="image-preview-container" id="image-preview-container">
<img id="image-preview" class="image-preview" />
<button id="remove-image" class="remove-image-btn">×</button>
</div>
</div>
</div>
<div class="feedback-divider"></div>
<div class="feedback-actions">
<!-- Snippet dropdown section -->
<div class="snippet-dropdown-container">
<button id="snippet-dropdown-btn" class="btn btn-snippet">
Snippets <span class="dropdown-arrow">▼</span>
</button>
<div class="snippet-dropdown" id="snippet-dropdown">
<div class="snippet-header">
<span>Snippets</span>
<button id="create-snippet-btn" class="snippet-action-btn" title="Create New Snippet">+</button>
</div>
<div class="snippet-list" id="snippet-list">
<!-- Snippets will be populated here -->
<div class="no-snippets-message">No snippets yet</div>
</div>
</div>
</div>
<div class="action-buttons">
<button class="btn btn-submit">Submit</button>
<button class="btn btn-approve">Approve</button>
<button class="btn btn-enough">Enough</button>
<button class="btn btn-cancel">Cancel</button>
</div>
</div>
</div>
<!-- Snippet modal templates -->
<div id="snippet-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modal-title">Create Snippet</h3>
<span class="close-modal">×</span>
</div>
<div class="modal-body">
<div class="form-group">
<label for="snippet-name">Name:</label>
<input type="text" id="snippet-name" placeholder="Enter snippet name">
</div>
<div class="form-group">
<label for="snippet-content">Content:</label>
<textarea id="snippet-content" placeholder="Enter snippet content"></textarea>
</div>
</div>
<div class="modal-footer">
<button id="save-snippet-btn" class="btn btn-submit">Save</button>
<button id="cancel-snippet-btn" class="btn btn-cancel">Cancel</button>
</div>
</div>
</div>
<!-- Delete confirmation modal -->
<div id="delete-confirm-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Delete Snippet</h3>
<span class="close-modal" data-modal="delete-confirm-modal">×</span>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this snippet?</p>
<p class="snippet-to-delete-name"></p>
</div>
<div class="modal-footer">
<button id="confirm-delete-btn" class="btn btn-cancel">Delete</button>
<button id="cancel-delete-btn" class="btn">Cancel</button>
</div>
</div>
</div>
<!-- Error message modal -->
<div id="error-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Error</h3>
<span class="close-modal" data-modal="error-modal">×</span>
</div>
<div class="modal-body">
<p id="error-message">Please enter feedback before submitting.</p>
</div>
<div class="modal-footer">
<button id="error-ok-btn" class="btn btn-submit">OK</button>
</div>
</div>
</div>
<script src="renderer.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/ceciliomichael/feedbackjs-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server