<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="SUOU FieldSense v1.0 Prototype — Field Intelligence Dashboard" />
<title>SUOU FieldSense™ v1.0 Prototype</title>
<style>
:root{
--bg:#07111f;
--panel:rgba(16,31,52,.78);
--panel-strong:rgba(20,39,64,.92);
--line:rgba(151,186,220,.18);
--text:#eef7ff;
--muted:#92a9bf;
--accent:#42e8c7;
--accent2:#65a8ff;
--warning:#ffd36d;
--danger:#ff8d98;
--shadow:0 20px 50px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
min-height:100vh;
color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif;
background:
radial-gradient(circle at 15% 20%,rgba(45,99,255,.16),transparent 28%),
radial-gradient(circle at 85% 10%,rgba(66,232,199,.12),transparent 25%),
linear-gradient(135deg,#050b14,#0a1728 45%,#07111f);
}
button,input,textarea{font:inherit}
button{touch-action:manipulation}
.shell{max-width:1180px;margin:auto;padding:28px 18px 56px}
.topbar{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:18px 20px;border:1px solid var(--line);
background:rgba(7,17,31,.68);backdrop-filter:blur(16px);
border-radius:20px;position:sticky;top:12px;z-index:20;box-shadow:var(--shadow)
}
.brand{display:flex;gap:13px;align-items:center}
.logo{
width:42px;height:42px;border-radius:14px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
color:#06121d;display:grid;place-items:center;font-weight:900
}
.brand h1{font-size:18px;margin:0}
.brand p{font-size:12px;color:var(--muted);margin:3px 0 0}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge{
border:1px solid rgba(66,232,199,.3);
background:rgba(66,232,199,.09);color:var(--accent);
border-radius:999px;padding:7px 11px;font-size:12px
}
.hero{
margin-top:22px;padding:34px;border-radius:28px;border:1px solid var(--line);
background:linear-gradient(135deg,rgba(20,39,64,.85),rgba(11,25,43,.78));
box-shadow:var(--shadow);position:relative;overflow:hidden
}
.hero:after{
content:"";position:absolute;width:320px;height:320px;border-radius:50%;
right:-80px;top:-100px;background:radial-gradient(circle,rgba(66,232,199,.2),transparent 65%)
}
.eyebrow{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero h2{font-size:36px;margin:8px 0 10px;max-width:760px}
.hero p{max-width:690px;color:var(--muted);line-height:1.8}
.context-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:24px}
.context-btn{
background:rgba(255,255,255,.045);color:var(--text);
border:1px solid var(--line);border-radius:14px;padding:12px 10px;
cursor:pointer;transition:.2s
}
.context-btn.active{
background:rgba(66,232,199,.12);border-color:rgba(66,232,199,.45);color:var(--accent)
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{
border:none;border-radius:14px;padding:13px 18px;font-weight:800;
cursor:pointer;transition:.2s transform,.2s opacity
}
.btn:hover{transform:translateY(-2px)}
.primary{background:linear-gradient(135deg,var(--accent),#7cf0db);color:#06131e}
.secondary{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
border:1px solid var(--line);background:var(--panel);
border-radius:22px;padding:22px;box-shadow:var(--shadow);backdrop-filter:blur(14px)
}
.card h3{margin:0 0 6px;font-size:16px}
.section-title{margin:28px 0 12px;font-size:21px}
.sub{color:var(--muted);font-size:13px;line-height:1.7}
.slider-row{margin:18px 0}
.slider-label{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px}
.slider-label span:first-child{font-weight:700}
.slider-label small{color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--accent)}
.score{color:var(--accent);font-weight:800}
.metric-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.metric{
padding:16px;border-radius:18px;background:rgba(255,255,255,.045);
border:1px solid var(--line)
}
.metric .label{font-size:12px;color:var(--muted)}
.metric .value{font-size:29px;font-weight:800;margin:6px 0}
.metric .hint{font-size:11px;color:var(--accent)}
.radar-wrap{display:grid;place-items:center;padding:10px}
svg{max-width:100%;height:auto}
.pattern{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:15px 0;border-bottom:1px solid var(--line)
}
.pattern:last-child{border-bottom:0}
.pattern-title{display:flex;gap:12px;align-items:center;min-width:0}
.hex{
width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:rgba(101,168,255,.1);
border:1px solid rgba(101,168,255,.2);display:grid;place-items:center;font-weight:800
}
.bar{height:8px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin-top:6px}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:99px}
.trajectory{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.node{padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.arrow{color:var(--accent);font-size:22px}
.brief-card{
padding:20px;border-radius:20px;background:linear-gradient(135deg,rgba(66,232,199,.09),rgba(101,168,255,.08));
border:1px solid rgba(66,232,199,.2)
}
.brief-card h4{margin:0 0 10px;color:var(--accent);font-size:14px}
.brief-card p{margin:0;line-height:1.8}
.insight-list{display:grid;gap:12px;margin-top:14px}
.insight{
display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
padding:15px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--line)
}
.insight .num{
width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
background:rgba(101,168,255,.12);color:var(--accent2);font-weight:900
}
.practice-card{
padding:18px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--line)
}
.practice-card h4{margin:0 0 8px}
.practice-step{
display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;
padding:11px 0;border-bottom:1px solid var(--line)
}
.practice-step:last-child{border-bottom:0}
.practice-step b{color:var(--accent)}
.focus-list{display:grid;gap:10px;margin-top:14px}
.focus-item{
display:flex;gap:10px;align-items:flex-start;
padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.reflection textarea{
width:100%;min-height:92px;margin-top:8px;padding:12px 13px;
border-radius:14px;border:1px solid var(--line);
background:rgba(7,17,31,.58);color:var(--text);resize:vertical
}
.reflection label{display:block;margin:14px 0 0;font-size:13px;color:var(--muted)}
.rating{display:flex;gap:8px;margin-top:10px}
.star{
background:transparent;border:none;color:#64798e;font-size:24px;padding:0;cursor:pointer
}
.star.active{color:var(--warning)}
.report-meta{
display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px
}
.meta-item{
padding:12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)
}
.meta-item span{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.hidden{display:none}
.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:25px}
@media(max-width:900px){
.grid,.grid-2{grid-template-columns:1fr}
.metric-grid{grid-template-columns:repeat(2,1fr)}
.context-row{grid-template-columns:repeat(3,1fr)}
.grid-3{grid-template-columns:1fr}
.report-meta{grid-template-columns:repeat(2,1fr)}
.hero h2{font-size:29px}
}
@media(max-width:520px){
.shell{padding:14px 12px 32px}
.topbar{padding:14px;align-items:flex-start}
.toolbar{flex-direction:column;align-items:flex-end}
.hero{padding:24px}
.metric-grid{grid-template-columns:1fr 1fr}
.context-row{grid-template-columns:repeat(2,1fr)}
}
@media print{
body{background:#fff;color:#111}
.shell{max-width:none;padding:0}
.topbar,.hero,#analysisSection,.footer,.no-print{display:none!important}
.card,.brief-card,.practice-card,.insight,.focus-item,.meta-item{
background:#fff!important;color:#111!important;box-shadow:none!important;border:1px solid #ddd!important
}
.sub,.metric .label,.metric .hint,.meta-item span{color:#555!important}
.section-title{page-break-after:avoid}
#reportSection{display:block!important}
}
</style>
</head>
<body>
<div class="shell">
<header class="topbar">
<div class="brand">
<div class="logo">S</div>
<div>
<h1>SUOU FieldSense™</h1>
<p>Measure the Field, Not the Fate.</p>
</div>
</div>
<div class="toolbar">
<span class="badge">v1.0 Prototype</span>
<button class="btn secondary no-print" id="printBtn">列印／匯出 PDF</button>
</div>
</header>
<section class="hero">
<div class="eyebrow">Field Intelligence Platform</div>
<h2>看見你當下的場，而不是預言命運。</h2>
<p>以七維狀態、結構模式與貝葉斯信心度，整理你目前的工作、投資、關係或人生決策情境。</p>
<div class="context-row" id="contextRow">
<button class="context-btn active" data-context="工作">工作</button>
<button class="context-btn" data-context="投資">投資</button>
<button class="context-btn" data-context="感情">感情</button>
<button class="context-btn" data-context="家庭">家庭</button>
<button class="context-btn" data-context="人際">人際</button>
<button class="context-btn" data-context="自我成長">自我成長</button>
</div>
<div class="actions">
<button class="btn primary" id="startBtn">開始分析</button>
<button class="btn secondary" id="demoBtn">載入示範數據</button>
</div>
</section>
<section class="grid" id="analysisSection">
<div class="card">
<h3>七維場態量測</h3>
<div class="sub">請依照你此刻的真實感受調整。0 代表很低，10 代表很高。</div>
<div id="sliders"></div>
<button class="btn primary" id="analyzeBtn">產生完整 Field Report</button>
</div>
<div class="card">
<h3>Field Radar</h3>
<div class="sub">七個維度共同構成你此刻的場態。</div>
<div class="radar-wrap">
<svg viewBox="0 0 320 300" aria-label="七維場態雷達圖">
<g transform="translate(160 145)">
<g fill="none" stroke="rgba(151,186,220,.18)">
<polygon points="0,-110 86,-69 107,24 48,99 -48,99 -107,24 -86,-69"/>
<polygon points="0,-78 61,-49 76,17 34,70 -34,70 -76,17 -61,-49"/>
<polygon points="0,-46 36,-29 45,10 20,41 -20,41 -45,10 -36,-29"/>
</g>
<polygon id="radarShape" points="0,-70 58,-46 70,16 30,62 -26,54 -55,12 -50,-40"
fill="rgba(66,232,199,.18)" stroke="#42e8c7" stroke-width="2"/>
<g fill="#92a9bf" font-size="11" text-anchor="middle">
<text x="0" y="-125">主動力</text>
<text x="104" y="-76">資源量</text>
<text x="126" y="29">穩定度</text>
<text x="58" y="120">開放度</text>
<text x="-58" y="120">適應力</text>
<text x="-126" y="29">衝突張力</text>
<text x="-104" y="-76">轉型壓力</text>
</g>
</g>
</svg>
</div>
</div>
</section>
<section class="hidden" id="reportSection">
<h2 class="section-title">SUOU Field Dashboard</h2>
<div class="card">
<div class="sub">這是一份決策支援與自我覺察報告，不是命運判定。</div>
<div class="metric-grid" style="margin-top:16px">
<div class="metric"><div class="label">FRI 共振</div><div class="value" id="fri">82</div><div class="hint">Field Resonance</div></div>
<div class="metric"><div class="label">FSI 穩定</div><div class="value" id="fsi">67</div><div class="hint">Field Stability</div></div>
<div class="metric"><div class="label">FTI 轉型</div><div class="value" id="fti">74</div><div class="hint">Field Transition</div></div>
<div class="metric"><div class="label">FAI 適應</div><div class="value" id="fai">91</div><div class="hint">Field Adaptability</div></div>
<div class="metric"><div class="label">Confidence</div><div class="value" id="confidence">87%</div><div class="hint">Bayesian Confidence</div></div>
</div>
<div class="grid">
<div>
<h3 style="margin-top:24px">Most Resonant Patterns</h3>
<div class="pattern">
<div class="pattern-title"><div class="hex" id="hex1">53</div><div><b id="name1">漸</b><div class="sub" id="desc1" style="margin:2px 0">Gradual Structural Growth</div><div class="bar"><i id="bar1" style="width:82%"></i></div></div></div>
<b id="p1">82%</b>
</div>
<div class="pattern">
<div class="pattern-title"><div class="hex" id="hex2">61</div><div><b id="name2">中孚</b><div class="sub" id="desc2" style="margin:2px 0">Trust Alignment</div><div class="bar"><i id="bar2" style="width:74%"></i></div></div></div>
<b id="p2">74%</b>
</div>
<div class="pattern">
<div class="pattern-title"><div class="hex" id="hex3">46</div><div><b id="name3">升</b><div class="sub" id="desc3" style="margin:2px 0">Steady Ascending</div><div class="bar"><i id="bar3" style="width:69%"></i></div></div></div>
<b id="p3">69%</b>
</div>
</div>
<div>
<h3 style="margin-top:24px">Trajectory</h3>
<div class="trajectory">
<div class="node"><span id="traj1">53 漸</span><br><small>Current</small></div>
<div class="arrow">→</div>
<div class="node"><span id="traj2">42 益</span><br><small>Possible</small></div>
<div class="arrow">→</div>
<div class="node"><span id="traj3">46 升</span><br><small>Long term</small></div>
</div>
</div>
</div>
</div>
<h2 class="section-title">AI 教練簡報</h2>
<div class="grid-2">
<div class="brief-card">
<h4>Executive Summary</h4>
<p id="executiveSummary">你的場目前屬於穩定累積型。這不是高速爆發的階段，而是建立長期優勢的時機。</p>
</div>
<div class="brief-card">
<h4>AI Observation</h4>
<p id="observationText">主動力與適應力偏高，穩定度中等，代表你已有前進動能，但仍需要把資源集中在最重要的方向。</p>
</div>
</div>
<div class="card" style="margin-top:18px">
<h3>Key Insights</h3>
<div class="insight-list">
<div class="insight"><div class="num">1</div><div id="insight1">目前真正限制你的，不是能力，而是資源配置。</div></div>
<div class="insight"><div class="num">2</div><div id="insight2">最好的策略不是增加更多事情，而是減少干擾。</div></div>
<div class="insight"><div class="num">3</div><div id="insight3">先完成一個可驗證成果，能比大幅改變方向帶來更高共振。</div></div>
</div>
</div>
<h2 class="section-title">個人修煉建議</h2>
<div class="grid-3">
<div class="practice-card">
<h4>今日主題</h4>
<div class="sub" id="practiceTheme">穩定累積</div>
</div>
<div class="practice-card">
<h4>核心提醒</h4>
<div class="sub" id="practiceReminder">不要追求一次改變全部，只需要推進最重要的一步。</div>
</div>
<div class="practice-card">
<h4>修煉關鍵字</h4>
<div class="sub" id="practiceKeyword">專注・信任・節奏</div>
</div>
</div>
<div class="card" style="margin-top:18px">
<h3>Today's Practice</h3>
<div class="practice-step"><b>①</b><div id="practice1">完成一件一直拖延、但其實很重要的小事。</div></div>
<div class="practice-step"><b>②</b><div id="practice2">和一位值得信任的人進行一次真誠交流。</div></div>
<div class="practice-step"><b>③</b><div id="practice3">睡前寫下今天最大的收穫，以及明天最重要的一步。</div></div>
</div>
<h2 class="section-title">明日觀察</h2>
<div class="card">
<div class="sub">這不是預言，而是提供你明天可以留意的訊號。</div>
<div class="focus-list">
<div class="focus-item"><input type="checkbox" id="focus1"><label for="focus1" id="focusText1">是否出現新的合作或溝通機會。</label></div>
<div class="focus-item"><input type="checkbox" id="focus2"><label for="focus2" id="focusText2">是否收到影響目前決策的重要訊息。</label></div>
<div class="focus-item"><input type="checkbox" id="focus3"><label for="focus3" id="focusText3">是否因焦慮而想突然放棄原本計畫。</label></div>
</div>
<div class="brief-card" style="margin-top:16px">
<h4>Tomorrow Reflection</h4>
<p>若上述訊號出現，建議重新進行一次量測，讓新的資訊更新你的場態判斷。</p>
</div>
</div>
<h2 class="section-title">每日反思</h2>
<div class="card reflection">
<h3>這份分析對你有多符合？</h3>
<div class="rating" id="rating">
<button class="star" data-rating="1">★</button>
<button class="star" data-rating="2">★</button>
<button class="star" data-rating="3">★</button>
<button class="star" data-rating="4">★</button>
<button class="star" data-rating="5">★</button>
</div>
<label for="gain">今天最大的收穫</label>
<textarea id="gain" placeholder="寫下今天最有價值的發現……"></textarea>
<label for="resistance">今天最大的阻力</label>
<textarea id="resistance" placeholder="寫下目前最卡住你的地方……"></textarea>
<label for="improve">明天最想改善的事情</label>
<textarea id="improve" placeholder="寫下一個明天可以完成的小步驟……"></textarea>
</div>
<div class="report-meta">
<div class="meta-item"><span>Report ID</span><b id="reportId">SF-20260729-0001</b></div>
<div class="meta-item"><span>Context</span><b id="reportContext">工作</b></div>
<div class="meta-item"><span>Tester</span><b>BETA-001</b></div>
<div class="meta-item"><span>Version</span><b>1.0 Prototype</b></div>
</div>
</section>
<div class="footer">Copyright © 2026 周易先 · SUOU FieldSense™</div>
</div>
<script>
const dimensions = [
["主動力","我現在有多想採取行動？",7],
["資源量","我手上有多少可運用資源？",6],
["穩定度","我現在是否站得穩？",6],
["開放度","我是否願意接受新可能？",8],
["適應力","情勢改變時我能否調整？",8],
["衝突張力","內外衝突目前有多強？",4],
["轉型壓力","我有多強烈的改變需要？",7]
];
const patternLibrary = {
gradual: {
patterns:[["53","漸","Gradual Structural Growth"],["61","中孚","Trust Alignment"],["46","升","Steady Ascending"]],
trajectory:["53 漸","42 益","46 升"],
summary:"你的場目前屬於「穩定累積型」。這不是高速爆發的階段，而是建立長期優勢的時機。若此刻急著改變方向，反而容易降低整體場共振。",
observation:"主動力與適應力偏高，穩定度中等。你的能量正在收斂到長期目標，但仍需要把資源集中在最重要的方向。",
insights:[
"目前真正限制你的，不是能力，而是資源配置。",
"最好的策略不是增加更多事情，而是減少干擾。",
"先完成一個可驗證成果，能比大幅改變方向帶來更高共振。"
],
theme:"穩定累積",
reminder:"不要追求一次改變全部，只需要推進最重要的一步。",
keyword:"專注・信任・節奏",
practices:[
"完成一件一直拖延、但其實很重要的小事。",
"和一位值得信任的人進行一次真誠交流。",
"睡前寫下今天最大的收穫，以及明天最重要的一步。"
],
focus:[
"是否出現新的合作或溝通機會。",
"是否收到影響目前決策的重要訊息。",
"是否因焦慮而想突然放棄原本計畫。"
]
},
transition: {
patterns:[["49","革","Structured Transformation"],["29","坎","Risk Passage"],["40","解","Release and Reframing"]],
trajectory:["49 革","40 解","53 漸"],
summary:"你的場目前處於「轉型型態」。改變的需要已經很明確，但真正重要的不是速度，而是避免在基礎不足時一次承擔過多風險。",
observation:"轉型壓力與行動動能同時偏高，但穩定度不足。這代表你已經不適合維持原狀，卻也不適合毫無準備地全面翻轉。",
insights:[
"你現在最需要的不是更多勇氣，而是清楚的風險邊界。",
"將重大改變拆成兩到三個可逆步驟，可以降低失控感。",
"真正有效的轉型，應該先釋放舊負擔，再建立新結構。"
],
theme:"有序轉型",
reminder:"改變可以進行，但每一步都必須保留退路與驗證點。",
keyword:"界線・試驗・釋放",
practices:[
"寫下你最想改變的一件事，以及最壞情況。",
"設計一個七天內可以完成的小型試驗。",
"停止一件已經消耗你、但不再產生價值的事情。"
],
focus:[
"是否出現明確要求你做選擇的事件。",
"是否有人提醒你目前忽略的風險。",
"是否產生想一次解決所有問題的衝動。"
]
},
strong: {
patterns:[["14","大有","Resource Abundance"],["34","大壯","Strong Momentum"],["42","益","Productive Expansion"]],
trajectory:["14 大有","42 益","46 升"],
summary:"你的場目前屬於「高動能擴張型」。資源、行動力與適應力都在高檔，適合推進，但需要避免因自信過高而忽略節奏與他人承載能力。",
observation:"主動力、資源量與適應力相互支持，表示你具備推進條件。此刻最重要的是選對方向，而不是證明自己可以做很多事情。",
insights:[
"目前最大的優勢是動能，最大的風險是分散。",
"應把資源集中在一個最具槓桿效果的項目。",
"擴張前先確認合作關係與執行節奏，能讓成果更穩定。"
],
theme:"聚焦擴張",
reminder:"你可以前進，但要把力量集中在最值得的方向。",
keyword:"選擇・槓桿・節制",
practices:[
"從所有任務中選出一件最能放大成果的事情。",
"主動拒絕一件低價值、但會消耗注意力的邀請。",
"確認一位關鍵合作夥伴的期待與資源。"
],
focus:[
"是否出現值得快速回應的高價值機會。",
"是否因選項太多而開始分心。",
"是否有人跟不上你的速度。"
]
},
recovery: {
patterns:[["29","坎","Risk Passage"],["24","復","Return to Center"],["52","艮","Stillness and Boundary"]],
trajectory:["29 坎","24 復","53 漸"],
summary:"你的場目前屬於「低穩定恢復型」。此刻不宜用更高壓力逼迫自己突破，真正有效的策略是先恢復安全感、秩序與基本節奏。",
observation:"衝突張力較高，穩定度與資源量偏低。這通常不是能力不足，而是系統已經承受過多負荷，需要先降低噪音。",
insights:[
"目前最優先的任務是止損，而不是追求成長。",
"恢復睡眠、秩序與可預測性，會比增加新計畫更有價值。",
"先回到可控制的小範圍，再逐步恢復決策能力。"
],
theme:"恢復中心",
reminder:"今天不要追求速度，先讓自己重新站穩。",
keyword:"止損・休息・界線",
practices:[
"取消或延後一件非必要任務。",
"整理一個最容易失控的小空間或工作區。",
"把明天要做的事情縮減到三件以內。"
],
focus:[
"是否因疲憊而做出過度悲觀的判斷。",
"是否有人或事件持續越過你的界線。",
"是否出現需要你暫停，而不是繼續硬撐的訊號。"
]
}
};
let selectedContext = "工作";
const sliders = document.getElementById("sliders");
function renderSliders(){
sliders.innerHTML = "";
dimensions.forEach((d, i) => {
const row = document.createElement("div");
row.className = "slider-row";
row.innerHTML = `
<div class="slider-label">
<div><span>${d[0]}</span><br><small>${d[1]}</small></div>
<span class="score" id="score-${i}">${d[2]}</span>
</div>
<input type="range" min="0" max="10" value="${d[2]}" data-index="${i}">
`;
sliders.appendChild(row);
});
document.querySelectorAll('input[type="range"]').forEach(input => {
input.addEventListener("input", e => {
const i = Number(e.target.dataset.index);
dimensions[i][2] = Number(e.target.value);
document.getElementById(`score-${i}`).textContent = e.target.value;
updateRadar();
});
});
updateRadar();
}
function updateRadar(){
const max = 110;
const angles = [-90,-38.57,12.86,64.29,115.71,167.14,218.57];
const points = dimensions.map((d,i)=>{
const r = max * d[2] / 10;
const a = angles[i] * Math.PI / 180;
return `${(Math.cos(a)*r).toFixed(1)},${(Math.sin(a)*r).toFixed(1)}`;
}).join(" ");
document.getElementById("radarShape").setAttribute("points",points);
}
function chooseMode(v, stability, transition, adaptability){
if(stability < 52 || v[5] >= 7) return "recovery";
if(transition >= 75 && stability < 68) return "transition";
if(v[0] >= 8 && v[1] >= 7 && adaptability >= 78) return "strong";
return "gradual";
}
function setText(id, text){ document.getElementById(id).textContent = text; }
function applyPattern(mode, scores){
const cfg = patternLibrary[mode];
cfg.patterns.forEach((p, i) => {
setText(`hex${i+1}`,p[0]);
setText(`name${i+1}`,p[1]);
setText(`desc${i+1}`,p[2]);
setText(`p${i+1}`,scores[i] + "%");
document.getElementById(`bar${i+1}`).style.width = scores[i] + "%";
});
setText("traj1",cfg.trajectory[0]);
setText("traj2",cfg.trajectory[1]);
setText("traj3",cfg.trajectory[2]);
setText("executiveSummary",cfg.summary);
setText("observationText",cfg.observation);
cfg.insights.forEach((x,i)=>setText(`insight${i+1}`,x));
setText("practiceTheme",cfg.theme);
setText("practiceReminder",cfg.reminder);
setText("practiceKeyword",cfg.keyword);
cfg.practices.forEach((x,i)=>setText(`practice${i+1}`,x));
cfg.focus.forEach((x,i)=>setText(`focusText${i+1}`,x));
}
function analyze(){
const v = dimensions.map(d=>d[2]);
const avg = v.reduce((a,b)=>a+b,0)/v.length;
const stability = Math.round((v[2]*0.6 + (10-v[5])*0.4)*10);
const transition = Math.round((v[6]*0.65 + v[0]*0.35)*10);
const adaptability = Math.round((v[3]*0.4 + v[4]*0.6)*10);
const fri = Math.min(96, Math.max(30, Math.round((avg*8.5)+(Math.max(...v)-Math.min(...v)))));
const confidence = Math.min(95,Math.round(72+avg*2));
setText("fri",fri);
setText("fsi",stability);
setText("fti",transition);
setText("fai",adaptability);
setText("confidence",confidence+"%");
const scores = [
Math.min(94,Math.round(fri)),
Math.min(91,Math.round((stability+adaptability)/2)),
Math.min(89,Math.round((transition+adaptability)/2))
];
const mode = chooseMode(v, stability, transition, adaptability);
applyPattern(mode, scores);
setText("reportContext", selectedContext);
const now = new Date();
const y = now.getFullYear();
const m = String(now.getMonth()+1).padStart(2,"0");
const d = String(now.getDate()).padStart(2,"0");
const serial = String(Math.floor(Math.random()*9000)+1000);
setText("reportId",`SF-${y}${m}${d}-${serial}`);
document.getElementById("reportSection").classList.remove("hidden");
document.getElementById("reportSection").scrollIntoView({behavior:"smooth"});
}
document.querySelectorAll(".context-btn").forEach(btn=>{
btn.addEventListener("click",()=>{
document.querySelectorAll(".context-btn").forEach(b=>b.classList.remove("active"));
btn.classList.add("active");
selectedContext = btn.dataset.context;
});
});
document.getElementById("analyzeBtn").addEventListener("click", analyze);
document.getElementById("startBtn").addEventListener("click", ()=>{
document.getElementById("analysisSection").scrollIntoView({behavior:"smooth"});
});
document.getElementById("demoBtn").addEventListener("click", ()=>{
const demo=[8,7,6,8,9,3,7];
demo.forEach((v,i)=>dimensions[i][2]=v);
renderSliders();
analyze();
});
document.getElementById("printBtn").addEventListener("click",()=>{
if(document.getElementById("reportSection").classList.contains("hidden")) analyze();
setTimeout(()=>window.print(),250);
});
document.querySelectorAll(".star").forEach(star=>{
star.addEventListener("click",()=>{
const r = Number(star.dataset.rating);
document.querySelectorAll(".star").forEach(s=>{
s.classList.toggle("active",Number(s.dataset.rating)<=r);
});
});
});
renderSliders();
</script>
</body>
</html>
コメント