Survey Insight MCP Server
by sinjorjob
- survey-insight-mcp
- src
- survey_insight
- templates
dashboard.html•17.3 kB
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Insight Report - {{ report_title }}</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Noto+Sans+JP:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
/* ========================================
Modern Color Palette (Light Theme)
======================================== */
:root {
/* Primary */
--acn-purple: #A100FF;
--acn-deep-purple: #6B00B6;
--acn-light-purple: #C966FF;
/* Neutral - Light Theme */
--acn-white: #FFFFFF;
--acn-off-white: #F8F8F8;
--acn-light-gray: #E5E5E5;
--acn-mid-gray: #CCCCCC;
--acn-text-gray: #333333;
--acn-border-gray: #E0E0E0;
/* Effects */
--acn-gradient: linear-gradient(135deg, #A100FF 0%, #6B00B6 100%);
--acn-glow: 0 0 15px rgba(161, 0, 255, 0.2);
--acn-shadow: 0 2px 10px rgba(161, 0, 255, 0.15);
--acn-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* ========================================
Base Styles
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: var(--acn-off-white);
color: var(--acn-text-gray);
line-height: 1.6;
}
/* ========================================
Header
======================================== */
.header {
background: var(--acn-gradient);
padding: 3rem 2rem;
text-align: center;
box-shadow: var(--acn-shadow);
}
.header h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
margin-bottom: 0.5rem;
color: var(--acn-white);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.header .subtitle {
font-size: 1.2rem;
color: var(--acn-white);
opacity: 0.9;
}
.header .meta {
margin-top: 1rem;
font-size: 0.9rem;
color: var(--acn-white);
opacity: 0.8;
}
/* ========================================
Container & Grid
======================================== */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 768px) {
.col-6, .col-4, .col-3 {
grid-column: span 12;
}
}
/* ========================================
Card Component
======================================== */
.card {
background: var(--acn-white);
border: 1px solid var(--acn-border-gray);
border-radius: 12px;
padding: 2rem;
box-shadow: var(--acn-card-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--acn-shadow);
}
.card-title {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 1.8rem;
color: var(--acn-purple);
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--acn-purple);
padding-bottom: 0.5rem;
}
/* ========================================
Metrics Cards
======================================== */
.metric-card {
text-align: center;
padding: 1.5rem;
}
.metric-value {
font-family: 'Roboto Mono', monospace;
font-weight: 700;
font-size: 3rem;
color: var(--acn-purple);
display: block;
margin-bottom: 0.5rem;
}
.metric-label {
font-size: 1rem;
color: var(--acn-text-gray);
opacity: 0.7;
}
/* ========================================
WordCloud Container
======================================== */
.wordcloud-container {
text-align: center;
padding: 1rem;
}
.wordcloud-container img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
/* ========================================
Chart Container
======================================== */
.chart-container {
min-height: 400px;
padding: 1rem;
}
/* ========================================
Issue List
======================================== */
.issue-list {
list-style: none;
}
.issue-item {
background: var(--acn-off-white);
border-left: 4px solid var(--acn-purple);
padding: 1.5rem;
margin-bottom: 1rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.issue-item.priority-high {
border-left-color: #FF3366;
}
.issue-item.priority-medium {
border-left-color: #FFA500;
}
.issue-item.priority-low {
border-left-color: #00FF7F;
}
.issue-title {
font-weight: 700;
font-size: 1.2rem;
color: var(--acn-light-purple);
margin-bottom: 0.5rem;
}
.issue-detail {
margin-bottom: 0.5rem;
opacity: 0.9;
}
.issue-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.issue-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(161, 0, 255, 0.1);
border: 1px solid rgba(161, 0, 255, 0.3);
border-radius: 20px;
font-size: 0.85rem;
color: var(--acn-deep-purple);
}
/* ========================================
Warning Card
======================================== */
.warning-card {
background: rgba(255, 153, 0, 0.1);
border: 2px solid #FF9900;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.warning-card .warning-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.warning-card .warning-title {
font-weight: 700;
font-size: 1.2rem;
color: #FF9900;
margin-bottom: 0.5rem;
}
.warning-card .warning-message {
opacity: 0.9;
line-height: 1.8;
}
/* ========================================
Solution Card
======================================== */
.solution-card {
background: var(--acn-off-white);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
border: 1px solid var(--acn-border-gray);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.solution-title {
font-weight: 700;
font-size: 1.1rem;
color: var(--acn-light-purple);
margin-bottom: 1rem;
}
.action-list {
list-style: none;
margin-bottom: 1rem;
}
.action-list li {
padding-left: 1.5rem;
margin-bottom: 0.5rem;
position: relative;
}
.action-list li::before {
content: "▸";
position: absolute;
left: 0;
color: var(--acn-purple);
}
/* ========================================
Footer
======================================== */
.footer {
margin-top: 4rem;
padding: 2rem;
text-align: center;
border-top: 1px solid var(--acn-border-gray);
color: var(--acn-text-gray);
opacity: 0.7;
}
/* ========================================
Animations
======================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeInUp 0.6s ease-out;
}
/* ========================================
Smooth Scroll
======================================== */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<h1>📊 Survey Insight Report</h1>
<div class="subtitle">{{ report_title }}</div>
<div class="meta">
Generated: {{ generated_at }} | Powered by Survey Insight v{{ version }}
</div>
</header>
<!-- Main Container -->
<div class="container">
<!-- Executive Summary -->
<section class="grid animate-fade-in">
<div class="col-12">
<div class="card">
<h2 class="card-title">📈 エグゼクティブサマリー</h2>
<div class="grid">
<div class="col-3">
<div class="metric-card">
<span class="metric-value">{{ total_responses }}</span>
<span class="metric-label">総回答数</span>
</div>
</div>
<div class="col-3">
<div class="metric-card">
<span class="metric-value">{{ total_keywords }}</span>
<span class="metric-label">抽出キーワード</span>
</div>
</div>
<div class="col-3">
<div class="metric-card">
<span class="metric-value">{{ total_issues }}</span>
<span class="metric-label">検出課題</span>
</div>
</div>
<div class="col-3">
<div class="metric-card">
<span class="metric-value">{{ total_axes }}</span>
<span class="metric-label">分析軸</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- WordCloud -->
<section class="grid animate-fade-in">
<div class="col-12">
<div class="card">
<h2 class="card-title">☁️ WordCloud</h2>
<div class="wordcloud-container">
{% if wordcloud_image %}
<img src="{{ wordcloud_image }}" alt="WordCloud">
{% else %}
<p>WordCloudは生成されませんでした</p>
{% endif %}
</div>
</div>
</div>
</section>
<!-- Keyword Rankings -->
<section class="grid animate-fade-in">
<div class="col-12">
<div class="card">
<h2 class="card-title">🔑 頻出キーワードランキング</h2>
<div class="chart-container">
{{ bar_chart | safe }}
</div>
</div>
</div>
</section>
<!-- Axis Analysis -->
{% if axes_charts %}
<section class="grid animate-fade-in">
{% for axis_name, chart_html in axes_charts.items() %}
<div class="col-6">
<div class="card">
<h2 class="card-title">📊 {{ axis_name }}別分析</h2>
<div class="chart-container">
{{ chart_html | safe }}
</div>
</div>
</div>
{% endfor %}
</section>
{% endif %}
<!-- AI Analysis: Issues -->
<section class="grid animate-fade-in">
<div class="col-12">
<div class="card">
<h2 class="card-title">🔍 AI課題分析{% if ai_info %}（{{ ai_info }}）{% endif %}</h2>
<!-- AI_WARNING_START -->
{% if ai_warning %}
<div class="warning-card">
<div class="warning-icon">⚠️</div>
<div class="warning-title">AI分析が無効化されています</div>
<div class="warning-message">{{ ai_warning }}</div>
</div>
{% endif %}
<!-- AI_WARNING_END -->
<!-- AI_ISSUES_START -->
{% if issues %}
<ul class="issue-list">
{% for issue in issues %}
<li class="issue-item priority-{{ issue.priority | lower }}">
<div class="issue-title">{{ loop.index }}. {{ issue.title }}</div>
<div class="issue-detail">{{ issue.detail }}</div>
<div class="issue-meta">
<span class="issue-badge">優先度: {{ issue.priority }}</span>
{% if issue.impact %}
<span class="issue-badge">影響範囲: {{ issue.impact }}</span>
{% endif %}
</div>
</li>
{% endfor %}
</ul>
{% endif %}
<!-- AI_ISSUES_END -->
</div>
</div>
</section>
<!-- AI Analysis: Solutions -->
<!-- AI_SOLUTIONS_START -->
{% if solutions %}
<section class="grid animate-fade-in">
<div class="col-12">
<div class="card">
<h2 class="card-title">💡 改善提案アクションプラン</h2>
{% for solution in solutions %}
<div class="solution-card">
<div class="solution-title">改善提案 {{ loop.index }}</div>
{% if solution.actions %}
<div>
<strong>アクションプラン:</strong>
<ul class="action-list">
{% for action in solution.actions %}
<li>{{ action }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div class="issue-meta">
{% if solution.difficulty %}
<span class="issue-badge">難易度: {{ solution.difficulty }}</span>
{% endif %}
{% if solution.period %}
<span class="issue-badge">期間: {{ solution.period }}</span>
{% endif %}
</div>
{% if solution.expected_effect %}
<div style="margin-top: 1rem; opacity: 0.9;">
<strong>期待効果:</strong> {{ solution.expected_effect }}
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
<!-- AI_SOLUTIONS_END -->
</div>
<!-- Footer -->
<footer class="footer">
<p>🤖 Generated with Survey Insight MCP Server</p>
<p>Powered by Claude AI</p>
</footer>
</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/sinjorjob/survey-insight-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server