echo-sim/index.html at main · tipcode-cpu/echo-sim · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0f1115">
<title>심초음파 교육용 시뮬레이터</title>
<style>
:root{
  --bg:#0f1115; --card:#1a1e26; --card-hover:#222834; --text:#e8eaf0; --muted:#9aa3b2;
  --primary:#7cc7ff; --accent:#77e0b6; --border:#2a313d;
}
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 18px;
}
.wrap{ width:100%; max-width:760px; }
.eyebrow{ color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.04em; margin-bottom:6px; }
h1{ font-size:28px; margin:0 0 8px; color:var(--primary); }
.lede{ color:var(--muted); margin:0 0 28px; line-height:1.55; }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
a.card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
a.card:hover{ background:var(--card-hover); border-color:var(--primary); transform:translateY(-2px); }
.card .tag{ display:inline-block; font-size:12px; color:var(--accent); border:1px solid var(--border); border-radius:999px; padding:2px 10px; margin-bottom:12px; }
.card h2{ font-size:19px; margin:0 0 8px; color:var(--text); }
.card p{ margin:0 0 14px; color:var(--muted); font-size:14px; line-height:1.5; }
.card .go{ color:var(--primary); font-weight:700; font-size:14px; }
.foot{ color:var(--muted); font-size:12px; margin-top:28px; line-height:1.6; text-align:center; }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } h1{ font-size:24px; } }
</style>
</head>
<body>
<div class="wrap">
  <div class="eyebrow">CARDIAC ULTRASOUND · 교육용 시뮬레이터</div>
  <h1>심초음파 교육용 시뮬레이터</h1>
  <p class="lede">변수를 직접 움직이며 원리를 확인하는 인터랙티브 도구 모음입니다. 아래에서 시뮬레이터를 선택하세요.</p>

  <div class="cards">
    <a class="card" href="doppler_simulator.html">
      <span class="tag">Doppler</span>
      <h2>Doppler Aliasing / Nyquist</h2>
      <p>혈류 속도·송신 주파수·측정 깊이·빔 각도·PW/CW 모드가 스펙트럼과 aliasing에 미치는 영향을 보여줍니다.</p>
      <span class="go">열기 →</span>
    </a>

    <a class="card" href="pisa_simulator.html">
      <span class="tag">PISA</span>
      <h2>PISA / 역류 정량</h2>
      <p>aliasing velocity와 반구 반경을 조절하면 EROA·역류량이 실시간 계산되고, 반경 제곱에 의한 오차 증폭을 보여줍니다.</p>
      <span class="go">열기 →</span>
    </a>

    <a class="card" href="frame_rate_simulator.html">
      <span class="tag">Frame Rate</span>
      <h2>Frame Rate 최적화 Trade-off</h2>
      <p>깊이·섹터 폭·라인 밀도·초점 수 등이 프레임률(temporal resolution)과 공간 해상도 사이의 상충 관계에 미치는 영향을 보여줍니다.</p>
      <span class="go">열기 →</span>
    </a>

    <a class="card" href="as_simulator.html">
      <span class="tag">Aortic Stenosis</span>
      <h2>AS 중증도 · Flow-Gradient 통합</h2>
      <p>실제 환자 수치를 슬라이더·직접 입력으로 넣으면 AVA·AVAi·DVI·SVI가 계산되고, high/low-gradient·정상/저유량 4개 시나리오를 분류해 불일치 시 다음 검사(DSE·CT calcium)를 제시합니다.</p>
      <span class="go">열기 →</span>
    </a>

    <a class="card" href="co_simulator.html">
      <span class="tag">Cardiac Output</span>
      <h2>심박출량(CO) · 1회 박출량(SV)</h2>
      <p>LVOT 직경으로 단면 원이, VTI로 원통 길이가 정해지고 그 부피가 곧 SV입니다. 심박수·BSA를 더해 SVI·CO·CI를 계산하고, CI로 저심박출·정상·고심박출을 판정합니다. 직경의 제곱 민감도도 직접 확인합니다.</p>
      <span class="go">열기 →</span>
    </a>

    <a class="card" href="diastolic_simulator.html">
      <span class="tag">Diastolic Function</span>
      <h2>좌심실 이완기능 · 2025 ASE</h2>
      <p>정상 LVEF·판막질환 없는 환자에서 E/A, e′, E/e′, TR velocity, LA strain을 2025 ASE 알고리즘으로 통합해 좌심방압 상승 여부를 판정하고 Grade I~III로 등급화합니다. 수치를 입력하면 파형이 재구성됩니다.</p>
      <span class="go">열기 →</span>
    </a>
  </div>

  <div class="foot">
    임상 교육 보조 도구입니다. 실제 환자 판단은 정식 검사와 임상의의 종합 평가로 결정해야 합니다.
  </div>
</div>
</body>
</html>