104 lines
3.7 KiB
HTML
104 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ask User</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f8fafc; padding: 20px; }
|
|
.question-block { margin-bottom: 20px; }
|
|
.question-text { font-size: 15px; font-weight: 600; color: #0f172a; margin-bottom: 10px; }
|
|
.options { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.option-btn { padding: 8px 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
|
|
cursor: pointer; font-size: 14px; color: #334155; transition: all 0.15s; }
|
|
.option-btn:hover { border-color: #3b82f6; color: #3b82f6; background: #eff6ff; }
|
|
.option-btn.selected { border-color: #3b82f6; background: #3b82f6; color: #fff; }
|
|
.submit-row { margin-top: 16px; text-align: right; }
|
|
.submit-btn { padding: 10px 24px; border: none; border-radius: 8px; background: #3b82f6;
|
|
color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
|
|
.submit-btn:hover { background: #2563eb; }
|
|
.submit-btn:disabled { background: #94a3b8; cursor: not-allowed; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script>
|
|
(function () {
|
|
var selections = {};
|
|
|
|
function esc(t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
|
|
|
|
function render(payload) {
|
|
var root = document.getElementById('root');
|
|
root.innerHTML = '';
|
|
selections = {};
|
|
|
|
var questions = payload.questions || [];
|
|
questions.forEach(function (q, qIdx) {
|
|
var block = document.createElement('div');
|
|
block.className = 'question-block';
|
|
|
|
var text = document.createElement('div');
|
|
text.className = 'question-text';
|
|
text.textContent = q.question;
|
|
block.appendChild(text);
|
|
|
|
var optionsDiv = document.createElement('div');
|
|
optionsDiv.className = 'options';
|
|
|
|
var multiSelect = !!q.multi_select;
|
|
selections[qIdx] = multiSelect ? [] : null;
|
|
|
|
(q.options || []).forEach(function (opt, oIdx) {
|
|
var btn = document.createElement('button');
|
|
btn.className = 'option-btn';
|
|
btn.textContent = opt;
|
|
btn.addEventListener('click', function () {
|
|
if (multiSelect) {
|
|
var arr = selections[qIdx];
|
|
var idx = arr.indexOf(opt);
|
|
if (idx >= 0) { arr.splice(idx, 1); btn.classList.remove('selected'); }
|
|
else { arr.push(opt); btn.classList.add('selected'); }
|
|
} else {
|
|
selections[qIdx] = opt;
|
|
optionsDiv.querySelectorAll('.option-btn').forEach(function (b) { b.classList.remove('selected'); });
|
|
btn.classList.add('selected');
|
|
}
|
|
});
|
|
optionsDiv.appendChild(btn);
|
|
});
|
|
|
|
block.appendChild(optionsDiv);
|
|
root.appendChild(block);
|
|
});
|
|
|
|
var submitRow = document.createElement('div');
|
|
submitRow.className = 'submit-row';
|
|
var submitBtn = document.createElement('button');
|
|
submitBtn.className = 'submit-btn';
|
|
submitBtn.textContent = 'Submit';
|
|
submitBtn.addEventListener('click', function () {
|
|
var answers = {};
|
|
questions.forEach(function (q, qIdx) {
|
|
answers[q.question] = selections[qIdx];
|
|
});
|
|
window.parent.postMessage({ type: 'mcp-app-response', payload: answers }, '*');
|
|
});
|
|
submitRow.appendChild(submitBtn);
|
|
root.appendChild(submitRow);
|
|
}
|
|
|
|
window.addEventListener('message', function (event) {
|
|
var msg = event.data;
|
|
if (msg && msg.type === 'mcp-app-data') {
|
|
render(msg.payload);
|
|
}
|
|
});
|
|
|
|
window.parent.postMessage({ type: 'mcp-app-ready' }, '*');
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|