Skip to content

Instantly share code, notes, and snippets.

@azalio

azalio/form-20260130-214108.html

Created January 30, 2026 21:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save azalio/2d00ebb42847d0cf1557474026ed32a5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save azalio/2d00ebb42847d0cf1557474026ed32a5 to your computer and use it in GitHub Desktop.
Download ZIP
确认表单 form-20260130-214108
Raw
form-20260130-214108.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>确认表单 - 小庄</title>
<style>
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
line-height: 1.6;
}
h1 { color: #333; border-bottom: 2px solid #007AFF; padding-bottom: 10px; }
.meta { color: #666; font-size: 14px; margin-bottom: 20px; }
.question {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.question-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.question-number {
background: #007AFF;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
flex-shrink: 0;
}
.question-title { margin: 0; color: #333; font-size: 18px; }
.section {
background: #f8f9fa;
border-left: 3px solid #dee2e6;
padding: 12px 16px;
margin: 12px 0;
border-radius: 0 8px 8px 0;
}
.section.context { border-left-color: #6c757d; }
.section.uncertainty { border-left-color: #ffc107; background: #fff9e6; }
.section.findings { border-left-color: #17a2b8; background: #e8f7fa; }
.section.judgment { border-left-color: #28a745; background: #e8f5e9; }
.section-label {
font-size: 12px;
font-weight: 600;
color: #666;
text-transform: uppercase;
margin-bottom: 6px;
}
.section p { margin: 0; color: #333; }
.findings-list { margin: 8px 0 0 0; padding-left: 20px; }
.findings-list li { margin: 6px 0; color: #333; }
.findings-list .source { color: #666; font-size: 13px; }
.options { margin-top: 16px; border-top: 1px solid #eee; padding-top: 16px; }
.options-label { font-weight: 600; color: #333; margin-bottom: 12px; }
.option-item {
display: block;
padding: 14px 16px;
margin: 8px 0;
background: #f8f8f8;
border: 2px solid transparent;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.option-item:hover { background: #e8f4ff; border-color: #007AFF; }
.option-item.selected { background: #e8f4ff; border-color: #007AFF; }
.option-item input[type="radio"] { margin-right: 12px; transform: scale(1.2); }
.option-label { font-weight: 500; color: #333; }
.option-basis { display: block; margin-top: 6px; margin-left: 28px; font-size: 13px; color: #666; }
.custom-section { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #ddd; }
.custom-input {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
resize: vertical;
}
.custom-input:focus { outline: none; border-color: #007AFF; box-shadow: 0 0 0 3px rgba(0,122,255,0.1); }
.global-section {
background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
border: 1px solid #ffc107;
}
.global-section h3 { color: #856404; margin-top: 0; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.btn-group button {
padding: 12px 20px;
border: 2px solid #ddd;
border-radius: 10px;
background: white;
cursor: pointer;
transition: all 0.2s;
font-size: 14px;
}
.btn-group button:hover { background: #007AFF; color: white; border-color: #007AFF; }
.btn-group button.active { background: #007AFF; color: white; border-color: #007AFF; }
#submitBtn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 12px rgba(0,122,255,0.3);
}
#submitBtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,122,255,0.4); }
#result {
display: none;
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
border-radius: 12px;
padding: 24px;
margin-top: 24px;
border: 1px solid #28a745;
}
#result h3 { color: #155724; margin-top: 0; }
#resultText {
background: white;
padding: 16px;
border-radius: 8px;
font-family: 'SF Mono', Monaco, monospace;
font-size: 12px;
white-space: pre-wrap;
word-break: break-all;
max-height: 300px;
overflow-y: auto;
}
.copy-btn {
margin-bottom: 12px;
padding: 12px 24px;
background: #28a745;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
}
.copy-btn:hover { background: #218838; }
</style>
</head>
<body>
<h1>📋 小庄的确认表单</h1>
<p class="meta">生成时间：2026/1/31 05:41:08 | 共 2 个问题</p>
<p style="color:#666;">我整理了以下问题需要主人确认。每个问题我都附上了背景、分析和建议选项。</p>
<div id="questions"></div>
<div class="global-section">
<h3>💬 整体反馈</h3>
<div class="btn-group">
<button type="button" onclick="setGlobalFeedback(this, 'all_ok')">✅ 全部同意我的判断</button>
<button type="button" onclick="setGlobalFeedback(this, 'need_more_info')">📄 需要补充材料</button>
<button type="button" onclick="setGlobalFeedback(this, 'discuss')">💭 需要讨论</button>
</div>
<textarea id="globalComment" class="custom-input" rows="3" placeholder="整体意见或补充说明（可选）"></textarea>
</div>
<button id="submitBtn" onclick="submitForm()">📤 提交确认</button>
<div id="result">
<h3>✅ 提交成功！</h3>
<p>点下面按钮复制，然后粘贴给小庄就行～</p>
<button class="copy-btn" onclick="copyResult()">📋 复制结果</button>
<details style="margin-top:15px">
<summary style="cursor:pointer;color:#666">查看详细内容</summary>
<div id="resultText"></div>
</details>
</div>
<script>
const QUESTIONS = [
{
"title": "防治面积数据确认",
"context": "在整理申报材料「项目成效」部分时，需要填写累计防治面积。我在不同位置发现了不一致的数字。",
"uncertainty": "三处数据来源给出了不同的数字，我无法判断哪个是最终准确值，需要主人确认或提供权威来源。",
"findings": [
{
"content": "「本项目累计完成薇甘菊防治面积约10万公顷，覆盖珠三角9个地级市。」",
"source": "摘要第1段（第1页）"
},
{
"content": "「截至2024年底，项目已在广东省范围内完成防治面积50.3万公顷，其中生物防治32.1万公顷，化学防治18.2万公顷。」",
"source": "正文「成果统计」章节（第7页第2段）"
},
{
"content": "分年统计表合计：2020年8.5万、2021年12.3万、2022年15.7万、2023年18.2万、2024年11.8万，总计66.5万公顷",
"source": "附件Excel表「防治面积统计.xlsx」Sheet1"
}
],
"judgment": "三个数字差异很大（10万 vs 50万 vs 66万）。我怀疑：摘要的「10万」可能是早期数据或笔误；正文的「50万」和Excel的「66万」可能统计口径不同。建议主人确认哪个是官方认可的数据，或者指出正确的数据来源。",
"options": [
{
"label": "用10万公顷（摘要）",
"basis": "最保守，但可能是过时数据"
},
{
"label": "用50.3万公顷（正文）",
"basis": "正文表述较完整，区分了生物/化学防治"
},
{
"label": "用66.5万公顷（Excel）",
"basis": "有详细分年数据，但与正文不符"
},
{
"label": "需要核实原始数据",
"basis": "以上数据可能都有问题，需要查原始报告或问项目负责人"
}
]
},
{
"title": "是否单独设立「经济效益」章节",
"context": "当前申报材料没有独立的「经济效益」章节，相关内容分散在「应用推广」和「社会效益」中。",
"uncertainty": "评审标准提到「经济效益」是评分项，但不确定是否必须单独成章，还是可以并入其他章节。",
"findings": [
{
"content": "「评分标准第4项：项目产生的经济效益和社会效益（15分），其中经济效益包括直接经济收益、成本节约、产业带动等。」",
"source": "《南粤奖评审细则》第8页"
},
{
"content": "2023年获奖项目「红树林修复技术」材料中有独立的「五、经济与社会效益」章节，约800字，包含具体数据。",
"source": "我对比的往年获奖案例A"
},
{
"content": "2022年获奖项目「水土保持技术」将经济效益写在「六、应用推广成效」中，未单独成章，但有专门小节。",
"source": "我对比的往年获奖案例B"
},
{
"content": "当前材料第12页「应用推广」章节提到：「项目技术推广后，每年可为农户节约防治成本约2000万元」，但没有展开论述。",
"source": "现有材料"
}
],
"judgment": "往年案例处理方式不统一，但都有专门内容论述经济效益。当前材料只有一句话带过，内容偏弱。建议至少扩充为一个小节（300-500字），补充具体数据。是否单独成章可以根据篇幅决定。",
"options": [
{
"label": "单独设立「经济效益」章节",
"basis": "更醒目，评审专家容易找到，参考案例A【我的推荐】"
},
{
"label": "在「应用推广」中增加小节",
"basis": "改动较小，参考案例B"
},
{
"label": "与「社会效益」合并为一章",
"basis": "评审标准把两者放一起，可以合并论述"
},
{
"label": "保持现状",
"basis": "当前一句话足够，不需要扩展"
}
]
}
];
let globalFeedback = null;
function initQuestions() {
const container = document.getElementById('questions');
QUESTIONS.forEach((q, idx) => {
const div = document.createElement('div');
div.className = 'question';
let findingsHtml = '';
if (q.findings && q.findings.length) {
findingsHtml = `
<div class="section findings">
<div class="section-label">🔍 我发现的信息</div>
<ul class="findings-list">
${q.findings.map(f => `
<li>
<strong>${f.content}</strong>
<span class="source">— ${f.source}</span>
</li>
`).join('')}
</ul>
</div>
`;
}
div.innerHTML = `
<div class="question-header">
<div class="question-number">${idx + 1}</div>
<h3 class="question-title">${q.title}</h3>
</div>
${q.context ? `<div class="section context"><div class="section-label">📖 背景</div><p>${q.context}</p></div>` : ''}
${q.uncertainty ? `<div class="section uncertainty"><div class="section-label">❓ 我不确定的点</div><p>${q.uncertainty}</p></div>` : ''}
${findingsHtml}
${q.judgment ? `<div class="section judgment"><div class="section-label">💭 我的判断</div><p>${q.judgment}</p></div>` : ''}
<div class="options">
<div class="options-label">📋 请选择：</div>
${q.options.map((opt, optIdx) => `
<label class="option-item" onclick="selectOption(this, ${idx})">
<input type="radio" name="q${idx}" value="${optIdx}">
<span class="option-label">${opt.label}</span>
${opt.basis ? `<span class="option-basis">${opt.basis}</span>` : ''}
</label>
`).join('')}
<div class="custom-section">
<input type="text" class="custom-input" id="custom${idx}"
placeholder="或输入其他意见...">
</div>
</div>
`;
container.appendChild(div);
});
}
function selectOption(label, qIdx) {
document.querySelectorAll(`input[name="q${qIdx}"]`).forEach(input => {
input.closest('.option-item').classList.remove('selected');
});
label.classList.add('selected');
}
function setGlobalFeedback(btn, type) {
globalFeedback = type;
document.querySelectorAll('.global-section .btn-group button').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
}
function submitForm() {
const answers = QUESTIONS.map((q, idx) => {
const selected = document.querySelector(`input[name="q${idx}"]:checked`);
const custom = document.getElementById(`custom${idx}`).value.trim();
return {
question: q.title,
myJudgment: q.judgment || null,
selectedOption: selected ? parseInt(selected.value) : null,
selectedLabel: selected ? q.options[parseInt(selected.value)].label : null,
customAnswer: custom || null,
agreedWithMyJudgment: selected && q.options[parseInt(selected.value)].basis?.includes('我的推荐')
};
});
const result = {
formId: "form-20260130-214108",
timestamp: new Date().toISOString(),
globalFeedback: globalFeedback,
globalComment: document.getElementById('globalComment').value.trim() || null,
summary: {
total: answers.length,
answered: answers.filter(a => a.selectedOption !== null || a.customAnswer).length,
agreedWithAI: answers.filter(a => a.agreedWithMyJudgment).length
},
answers: answers
};
document.getElementById('result').style.display = 'block';
document.getElementById('resultText').textContent = JSON.stringify(result, null, 2);
document.getElementById('submitBtn').textContent = '✅ 已生成';
document.getElementById('submitBtn').style.background = '#28a745';
document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
}
function copyResult() {
const text = document.getElementById('resultText').textContent;
const btn = document.querySelector('.copy-btn');
navigator.clipboard.writeText(text).then(() => {
btn.textContent = '✅ 已复制！去粘贴给小庄吧';
btn.style.background = '#155724';
}).catch(() => {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
btn.textContent = '✅ 已复制！';
btn.style.background = '#155724';
});
}
initQuestions();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment