ekeerar/Dansori_EQ
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Dansori EQ workspace

Browse Source
This commit is contained in:
eKeerar
2026-07-04 10:34:46 +09:00
commit 5369ab8525
1350 changed files with 327985 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/characters.html
+186
View File
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<title>Dansori — 캐릭터 컨셉 샘플</title>
<style>
:root{ --bg:#141418; --card:#1e1e24; --stroke:#3a3a42; --text:#f2f3f5; --dim:#a8abb4;
--cyan:#4cc2ff; --mint:#38e0c4; font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif; }
body{margin:0;background:var(--bg);color:var(--text);padding:32px}
h1{font-size:24px;margin:0 0 4px} .sub{color:var(--dim);margin:0 0 26px;font-size:14px}
h2{font-size:15px;color:var(--mint);margin:30px 0 12px}
.row{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:18px;width:280px}
.card .nm{font-weight:700;font-size:17px;margin-top:6px}
.card .rl{color:var(--dim);font-size:13px;margin-top:2px}
.chip{display:inline-block;background:#26262b;border:1px solid var(--stroke);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--dim);margin:6px 6px 0 0}
.avwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
pre{background:#0f0f13;border:1px solid var(--stroke);border-radius:12px;padding:14px;color:#cdd3da;
font-family:Consolas,monospace;font-size:12.5px;white-space:pre-wrap;line-height:1.55}
.note{color:var(--dim);font-size:13px;line-height:1.6}
</style>
</head>
<body>
<h1>Dansori — 캐릭터 컨셉 샘플</h1>
<p class="sub">손으로 그린 SVG 컨셉(발랄·친근 치비 마스코트). 이름은 미정 · 임시로 여=민트 / 남=시안.</p>
<div class="row">
<!-- ================= FEMALE (mint) ================= -->
<div class="card">
<svg viewBox="0 0 240 300" width="100%">
<!-- floating notes -->
<g fill="var(--mint)" opacity="0.9" font-size="22" font-weight="700">
<text x="24" y="70">♪</text><text x="196" y="52">♫</text>
</g>
<!-- soundwave ribbon -->
<path d="M30 150 q10 -18 20 0 t20 0" stroke="var(--mint)" stroke-width="4" fill="none" stroke-linecap="round" opacity=".7"/>
<!-- torso -->
<path d="M74 300 L74 214 Q74 182 120 182 Q166 182 166 214 L166 300 Z" fill="#EAF9F5" stroke="#14141a" stroke-width="3"/>
<!-- EQ bars on shirt -->
<g fill="var(--mint)"><rect x="104" y="228" width="7" height="34" rx="3"/><rect x="116" y="220" width="7" height="42" rx="3"/><rect x="128" y="234" width="7" height="28" rx="3"/></g>
<!-- neck -->
<rect x="106" y="158" width="28" height="26" rx="12" fill="#FFD9BC" stroke="#14141a" stroke-width="3"/>
<!-- back hair -->
<ellipse cx="120" cy="104" rx="80" ry="78" fill="var(--mint)"/>
<path d="M44 120 Q40 175 66 200 L80 176 Q60 150 62 118 Z" fill="var(--mint)"/>
<path d="M196 120 Q200 175 174 200 L160 176 Q180 150 178 118 Z" fill="var(--mint)"/>
<!-- face -->
<circle cx="120" cy="104" r="60" fill="#FFE3C8" stroke="#14141a" stroke-width="3"/>
<!-- bangs -->
<path d="M62 96 Q66 48 120 46 Q174 48 178 96 Q150 72 132 78 Q120 66 108 78 Q90 72 62 96 Z" fill="var(--mint)" stroke="#14141a" stroke-width="3"/>
<!-- headband -->
<path d="M64 78 Q120 30 176 78" stroke="#1FB89E" stroke-width="9" fill="none" stroke-linecap="round"/>
<!-- cat ears -->
<path d="M60 64 L44 26 L84 44 Z" fill="var(--mint)" stroke="#14141a" stroke-width="3" stroke-linejoin="round"/>
<path d="M180 64 L196 26 L156 44 Z" fill="var(--mint)" stroke="#14141a" stroke-width="3" stroke-linejoin="round"/>
<path d="M62 58 L54 40 L74 48 Z" fill="#FF9DB0"/><path d="M178 58 L186 40 L166 48 Z" fill="#FF9DB0"/>
<!-- earcups -->
<ellipse cx="58" cy="110" rx="14" ry="20" fill="#1FB89E" stroke="#14141a" stroke-width="3"/>
<ellipse cx="182" cy="110" rx="14" ry="20" fill="#1FB89E" stroke="#14141a" stroke-width="3"/>
<!-- eyes -->
<g><ellipse cx="99" cy="112" rx="11" ry="14" fill="#20242e"/><circle cx="103" cy="107" r="4" fill="#fff"/></g>
<g><ellipse cx="141" cy="112" rx="11" ry="14" fill="#20242e"/><circle cx="145" cy="107" r="4" fill="#fff"/></g>
<!-- blush -->
<ellipse cx="84" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/>
<ellipse cx="156" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/>
<!-- smile -->
<path d="M108 130 Q120 143 132 130" stroke="#14141a" stroke-width="3" fill="none" stroke-linecap="round"/>
</svg>
<div class="nm">여자 캐릭터 · 소리형 (임시)</div>
<div class="rl">AI 어시스턴트 · 발랄·수다·호기심</div>
<div><span class="chip">민트·틸</span><span class="chip">고양이귀 헤드폰</span><span class="chip">음파·음표</span></div>
</div>
<!-- ================= MALE (cyan) ================= -->
<div class="card">
<svg viewBox="0 0 240 300" width="100%">
<!-- torso hoodie -->
<path d="M72 300 L72 212 Q72 180 120 180 Q168 180 168 212 L168 300 Z" fill="#2A2F3A" stroke="#14141a" stroke-width="3"/>
<!-- hoodie strings + fader knobs -->
<line x1="112" y1="196" x2="112" y2="238" stroke="var(--cyan)" stroke-width="4" stroke-linecap="round"/>
<line x1="128" y1="196" x2="128" y2="238" stroke="var(--cyan)" stroke-width="4" stroke-linecap="round"/>
<circle cx="112" cy="224" r="6" fill="#fff" stroke="var(--cyan)" stroke-width="3"/>
<circle cx="128" cy="212" r="6" fill="#fff" stroke="var(--cyan)" stroke-width="3"/>
<!-- neck -->
<rect x="106" y="156" width="28" height="26" rx="12" fill="#FFD3B0" stroke="#14141a" stroke-width="3"/>
<!-- neckband headphones -->
<path d="M80 176 Q120 206 160 176" stroke="var(--cyan)" stroke-width="9" fill="none" stroke-linecap="round"/>
<ellipse cx="80" cy="176" rx="9" ry="12" fill="#2E9BD6" stroke="#14141a" stroke-width="3"/>
<ellipse cx="160" cy="176" rx="9" ry="12" fill="#2E9BD6" stroke="#14141a" stroke-width="3"/>
<!-- face -->
<circle cx="120" cy="100" r="58" fill="#FFD8BB" stroke="#14141a" stroke-width="3"/>
<!-- hair short messy dark + cyan streak -->
<path d="M64 96 Q60 46 120 44 Q180 46 176 96 Q168 74 150 72 Q156 58 138 60 Q140 46 122 52 Q108 44 104 60 Q92 56 92 72 Q74 72 64 96 Z" fill="#33343c" stroke="#14141a" stroke-width="3"/>
<path d="M104 60 Q120 50 138 60 Q128 62 122 58 Q112 64 104 60 Z" fill="var(--cyan)"/>
<!-- eyes big + friendly -->
<g><ellipse cx="100" cy="106" rx="10" ry="13" fill="#20242e"/><circle cx="104" cy="101" r="3.6" fill="#fff"/></g>
<g><ellipse cx="140" cy="106" rx="10" ry="13" fill="#20242e"/><circle cx="144" cy="101" r="3.6" fill="#fff"/></g>
<!-- big grin -->
<path d="M100 126 Q120 150 140 126 Q120 136 100 126 Z" fill="#fff" stroke="#14141a" stroke-width="3" stroke-linejoin="round"/>
<!-- blush -->
<ellipse cx="86" cy="124" rx="8" ry="4.5" fill="#FF9DB0" opacity=".6"/>
<ellipse cx="154" cy="124" rx="8" ry="4.5" fill="#FF9DB0" opacity=".6"/>
</svg>
<div class="nm">남자 캐릭터 · 단이형 (임시)</div>
<div class="rl">정밀 튜너 · 든든·유쾌한 큰웃음</div>
<div><span class="chip">시안·블루</span><span class="chip">넥밴드 헤드폰</span><span class="chip">페이더/노브</span></div>
</div>
<!-- ================= DUO ================= -->
<div class="card" style="width:280px">
<svg viewBox="0 0 260 220" width="100%">
<!-- shared cable -->
<path d="M92 150 Q130 190 168 150" stroke="#5a5f6b" stroke-width="4" fill="none"/>
<!-- mini female -->
<g transform="translate(20,20) scale(0.62)">
<circle cx="120" cy="104" r="60" fill="#FFE3C8" stroke="#14141a" stroke-width="4"/>
<path d="M62 96 Q66 48 120 46 Q174 48 178 96 Q150 72 132 78 Q120 66 108 78 Q90 72 62 96 Z" fill="#38e0c4" stroke="#14141a" stroke-width="4"/>
<path d="M60 64 L44 26 L84 44 Z" fill="#38e0c4" stroke="#14141a" stroke-width="4" stroke-linejoin="round"/>
<ellipse cx="182" cy="110" rx="14" ry="20" fill="#1FB89E" stroke="#14141a" stroke-width="4"/>
<ellipse cx="99" cy="112" rx="11" ry="14" fill="#20242e"/><ellipse cx="141" cy="112" rx="11" ry="14" fill="#20242e"/>
<path d="M108 130 Q120 143 132 130" stroke="#14141a" stroke-width="4" fill="none" stroke-linecap="round"/>
<ellipse cx="84" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/><ellipse cx="156" cy="130" rx="9" ry="5" fill="#FF9DB0" opacity=".75"/>
</g>
<!-- mini male -->
<g transform="translate(120,20) scale(0.62)">
<circle cx="120" cy="104" r="58" fill="#FFD8BB" stroke="#14141a" stroke-width="4"/>
<path d="M64 96 Q60 46 120 44 Q180 46 176 96 Q168 74 150 72 Q140 58 122 60 Q108 52 104 66 Q80 66 64 96 Z" fill="#33343c" stroke="#14141a" stroke-width="4"/>
<path d="M104 66 Q120 54 138 64 Q122 62 104 66 Z" fill="#4cc2ff"/>
<ellipse cx="80" cy="110" rx="13" ry="18" fill="#2E9BD6" stroke="#14141a" stroke-width="4"/>
<ellipse cx="100" cy="106" rx="10" ry="13" fill="#20242e"/><ellipse cx="140" cy="106" rx="10" ry="13" fill="#20242e"/>
<path d="M100 126 Q120 150 140 126 Q120 136 100 126 Z" fill="#fff" stroke="#14141a" stroke-width="4" stroke-linejoin="round"/>
</g>
<text x="130" y="205" text-anchor="middle" fill="#4cc2ff" font-size="16" font-weight="700">함께 = Dansori</text>
</svg>
<div class="nm">듀오 · "헤드폰 한 짝씩"</div>
<div class="rl">둘이 모여 브랜드 완성</div>
</div>
</div>
<h2>앱용 원형 아바타 (AI 응답창 등)</h2>
<div class="avwrap">
<svg viewBox="0 0 120 120" width="84" height="84">
<defs><clipPath id="c1"><circle cx="60" cy="60" r="58"/></clipPath></defs>
<circle cx="60" cy="60" r="58" fill="#20242e"/>
<g clip-path="url(#c1)" transform="translate(-8,6) scale(0.62)">
<circle cx="120" cy="104" r="60" fill="#FFE3C8"/>
<path d="M62 96 Q66 48 120 46 Q174 48 178 96 Q150 72 132 78 Q120 66 108 78 Q90 72 62 96 Z" fill="#38e0c4"/>
<path d="M60 64 L44 26 L84 44 Z" fill="#38e0c4"/><path d="M180 64 L196 26 L156 44 Z" fill="#38e0c4"/>
<ellipse cx="99" cy="112" rx="11" ry="14" fill="#20242e"/><ellipse cx="141" cy="112" rx="11" ry="14" fill="#20242e"/>
<path d="M108 130 Q120 143 132 130" stroke="#14141a" stroke-width="4" fill="none" stroke-linecap="round"/>
</g>
<circle cx="60" cy="60" r="58" fill="none" stroke="#38e0c4" stroke-width="3"/>
</svg>
<svg viewBox="0 0 120 120" width="84" height="84">
<defs><clipPath id="c2"><circle cx="60" cy="60" r="58"/></clipPath></defs>
<circle cx="60" cy="60" r="58" fill="#20242e"/>
<g clip-path="url(#c2)" transform="translate(-8,10) scale(0.62)">
<circle cx="120" cy="100" r="58" fill="#FFD8BB"/>
<path d="M64 96 Q60 46 120 44 Q180 46 176 96 Q168 74 150 72 Q140 58 122 60 Q108 52 104 66 Q80 66 64 96 Z" fill="#33343c"/>
<path d="M104 66 Q120 54 138 64 Q122 62 104 66 Z" fill="#4cc2ff"/>
<ellipse cx="100" cy="106" rx="10" ry="13" fill="#20242e"/><ellipse cx="140" cy="106" rx="10" ry="13" fill="#20242e"/>
<path d="M100 126 Q120 150 140 126 Q120 136 100 126 Z" fill="#fff"/>
</g>
<circle cx="60" cy="60" r="58" fill="none" stroke="#4cc2ff" stroke-width="3"/>
</svg>
<span class="note">← 이 원형 버전을 그대로 AI 응답창 아바타/알림 아이콘에 쓸 수 있어요.</span>
</div>
<h2>이미지 생성 AI용 프롬프트 (Midjourney/DALL·E 등에 붙여넣기)</h2>
<p class="note">SVG는 컨셉 스케치입니다. 아래 프롬프트로 고퀄 일러스트를 뽑아 보세요.</p>
<pre>[여자 · Sori]
cute chibi mascot girl for an audio app, 2.5 heads tall, big sparkly eyes, cheerful friendly smile, soft blush,
mint-teal bob hair with soundwave-shaped ends, wearing cat-ear headphones (mint), small music notes floating around,
white top with tiny equalizer bars, flat vector sticker style, bold clean outlines, mint (#38E0C4) accent,
dark navy background, kawaii, energetic pose — mascot design, front view</pre>
<pre>[남자 · Dan]
cute chibi mascot boy for an audio app, 2.5 heads tall, big friendly eyes, wide happy grin, slightly messy dark hair
with a cyan streak, cyan neckband headphones around neck, hoodie with mixer fader/knob details, thumbs up,
flat vector sticker style, bold clean outlines, cyan (#4CC2FF) accent, dark navy background, kawaii, cheerful —
mascot design, front view</pre>
<pre>[듀오]
two cute chibi audio mascots, a mint-haired cheerful girl with cat-ear headphones and a cyan-haired grinning boy with
neckband headphones, sharing one pair of headphones (a cable between them), happy, flat vector sticker style,
bold outlines, mint + cyan on dark navy, brand mascots for a music EQ app "Dansori", front view, friendly & bright</pre>
</body>
</html>
mockups/gallery.html
+290
View File
@@ -0,0 +1,290 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Dansori EQ — GUI 목업 갤러리</title>
<!-- Visual mockups of all pre-built screens (WPF can't render here). Open in a browser. -->
<style>
:root{
--bg:#141418; --mica1:#232733; --mica2:#1a1c22; --win:#1b1b1f;
--card:#26262b; --card2:#2d2d33; --stroke:#3a3a42;
--text:#f2f3f5; --dim:#a8abb4; --mute:#767a83;
--accent:#4cc2ff; --accent2:#38e0c4; --good:#4fd08a; --warn:#ffb454;
font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);padding:32px}
h1{font-size:24px;margin:0 0 4px}
.sub{color:var(--mute);margin:0 0 28px;font-size:15px}
h2{font-size:16px;color:var(--accent2);margin:34px 0 12px;letter-spacing:.3px}
.win{background:linear-gradient(180deg,var(--mica1),var(--mica2));border:1px solid var(--stroke);
border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden;margin-bottom:8px}
.tbar{height:38px;display:flex;align-items:center;gap:9px;padding:0 14px;border-bottom:1px solid var(--stroke);background:rgba(255,255,255,.015)}
.logo{width:18px;height:18px;border-radius:5px;background:conic-gradient(from 200deg,var(--accent),var(--accent2),var(--accent));box-shadow:0 0 12px rgba(76,194,255,.5)}
.tbar .t{font-size:14px;font-weight:600}
.tbar .t .s{color:var(--mute);font-weight:400}
.wbtns{margin-left:auto;color:var(--mute);font-size:14px;letter-spacing:6px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(360px,1fr));gap:22px;align-items:start}
.btn{display:inline-flex;align-items:center;height:30px;padding:0 11px;border-radius:8px;background:var(--card);
border:1px solid var(--stroke);color:var(--dim);font-size:14px;font-weight:600;white-space:nowrap}
.btn.acc{background:linear-gradient(180deg,#57c7ff,#2f9fe0);color:#04222f;border:0}
.btn.help{background:#243b4a;color:#4cc2ff;border:0}
.btn.ghost{background:transparent;border:0;color:var(--mute)}
.chip{display:inline-block;background:var(--card2);border:1px solid var(--stroke);border-radius:9px;padding:6px 10px;font-size:13.5px;color:var(--dim);margin:0 6px 6px 0}
.badge{font-size:13px;font-weight:700;padding:2px 8px;border-radius:20px}
.badge.iem{background:rgba(56,224,196,.14);color:var(--accent2)}
.badge.src{background:var(--card);color:var(--mute)}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:11px;padding:14px}
.lbl{color:var(--mute);font-size:13px}
.val{font-weight:600;font-size:15px}
.cap{color:var(--dim);font-weight:700;font-size:14px;letter-spacing:.3px}
.field{height:34px;border-radius:8px;border:1px solid var(--stroke);background:var(--card);display:flex;align-items:center;padding:0 12px;color:var(--mute);font-size:14.5px}
input,select{all:unset}
.row{display:flex;align-items:center;gap:8px}
/* svg */
svg .g{stroke:#33333b;stroke-width:1}
svg .ax{fill:var(--mute);font-size:12px}
/* volume */
.vslider{width:8px;height:150px;border-radius:8px;background:var(--card2);position:relative;margin:0 auto}
.vfill{position:absolute;bottom:0;left:0;right:0;height:62%;border-radius:8px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.vknob{position:absolute;left:50%;transform:translate(-50%,-50%);top:38%;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.note{color:var(--mute);font-size:13px;line-height:1.5}
.flex{display:flex;gap:16px}
</style>
</head>
<body>
<h1>Dansori EQ — GUI 목업 갤러리</h1>
<p class="sub">지금까지 선구현한 화면들의 시각 목업입니다. 실제 앱은 .NET 8 + WPF + WPF-UI(Fluent)로 이 룩을 네이티브 렌더링합니다.</p>
<!-- ===================== MAIN WINDOW ===================== -->
<h2>1. 메인 창 (그래프 · 볼륨 · AI 입력)</h2>
<div class="win">
<div class="tbar"><div class="logo"></div><div class="t">Dansori EQ <span class="s">· AI EQ for Equalizer APO</span></div><div class="wbtns">— ▢ ✕</div></div>
<div style="display:flex;min-height:520px">
<!-- sidebar -->
<div style="width:250px;border-right:1px solid var(--stroke);background:rgba(0,0,0,.12);display:flex;flex-direction:column">
<div style="padding:12px"><div class="field">🔎 이어폰 · 헤드폰 검색…</div></div>
<div style="flex:1;padding:0 10px;overflow:auto">
<div style="color:var(--mute);font-size:13px;font-weight:700;padding:10px 8px 4px">🎧 IN-EAR MONITORS</div>
<div style="background:rgba(76,194,255,.14);box-shadow:inset 0 0 0 1px rgba(76,194,255,.35);border-radius:9px;padding:8px 10px;font-size:14.5px;font-weight:600">Truthear × Crinacle Zero<div style="color:var(--mute);font-size:13px;font-weight:400">Truthear · IEM</div></div>
<div style="padding:8px 10px;font-size:14.5px;color:var(--dim)">Moondrop Blessing 2</div>
<div style="padding:8px 10px;font-size:14.5px;color:var(--dim)">7Hz Timeless</div>
<div style="color:var(--mute);font-size:13px;font-weight:700;padding:10px 8px 4px">🎧 HEADPHONES</div>
<div style="padding:8px 10px;font-size:14.5px;color:var(--dim)">Sennheiser HD 600</div>
<div style="padding:8px 10px;font-size:14.5px;color:var(--dim)">HIFIMAN Sundara</div>
</div>
<div style="border-top:1px solid var(--stroke);padding:12px">
<div class="btn" style="width:100%;justify-content:center">⟳ 프로파일 DB 업데이트</div>
<div style="color:var(--mute);font-size:13px;text-align:center;margin-top:8px">4,213 profiles · 2026-06-28</div>
</div>
</div>
<!-- main -->
<div style="flex:1;display:flex;flex-direction:column">
<div style="padding:14px 18px 4px">
<div class="row" style="flex-wrap:wrap">
<b style="font-size:19px">Truthear × Crinacle Zero</b>
<span class="badge iem">IEM</span><span class="badge src">AutoEQ · Harman IE 2019</span>
</div>
<div class="row" style="flex-wrap:wrap;margin-top:8px">
<span class="btn help">❓ 도움말</span><span class="btn">⚙ 설정</span><span class="btn">⌨ 명령</span>
<span class="btn">🎚 이펙트</span><span class="btn">📚 프리셋</span><span class="btn">↥ 내보내기</span>
<span class="btn">↧ 가져오기</span><span class="btn">↶ 되돌리기</span><span class="btn">⟲ 리셋</span>
<span class="btn ghost">활성 ●</span>
</div>
</div>
<div style="flex:1;padding:12px 18px 0">
<!-- graph + volume -->
<div class="card" style="margin-bottom:14px">
<div class="row" style="margin-bottom:8px"><span class="cap">EQUALIZATION CURVE</span>
<span style="margin-left:auto;background:rgba(255,180,84,.12);color:var(--warn);font-weight:700;font-size:13px;padding:2px 9px;border-radius:20px">Preamp −6.0 dB</span></div>
<div class="flex">
<svg viewBox="0 0 720 240" style="flex:1;height:210px">
<line class="g" x1="30" y1="50" x2="700" y2="50"/><line class="g" x1="30" y1="120" x2="700" y2="120" stroke="#44454e"/><line class="g" x1="30" y1="190" x2="700" y2="190"/>
<text class="ax" x="4" y="54">+12</text><text class="ax" x="10" y="124">0</text><text class="ax" x="4" y="194">−12</text>
<defs><linearGradient id="f" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="rgba(76,194,255,.35)"/><stop offset="1" stop-color="rgba(76,194,255,0)"/></linearGradient>
<linearGradient id="s" x1="0" x2="1"><stop offset="0" stop-color="#38e0c4"/><stop offset="1" stop-color="#4cc2ff"/></linearGradient></defs>
<path d="M30 96 C110 92 160 130 250 138 S360 140 400 120 S500 92 540 104 S640 142 700 128 L700 210 L30 210 Z" fill="url(#f)"/>
<path d="M30 96 C110 92 160 130 250 138 S360 140 400 120 S500 92 540 104 S640 142 700 128" fill="none" stroke="url(#s)" stroke-width="2.5"/>
<circle cx="80" cy="94" r="5" fill="#04222f" stroke="#38e0c4" stroke-width="2.4"/><circle cx="250" cy="138" r="5" fill="#04222f" stroke="#4cc2ff" stroke-width="2.4"/><circle cx="500" cy="96" r="5" fill="#04222f" stroke="#4cc2ff" stroke-width="2.4"/>
</svg>
<!-- volume panel -->
<div style="width:130px">
<div class="lbl" style="font-weight:700;margin-bottom:6px">출력 · 볼륨</div>
<div class="field" style="height:30px;justify-content:space-between">스피커 (Realtek) ▾</div>
<div style="height:160px;display:flex;align-items:center;justify-content:center;margin-top:8px"><div class="vslider"><div class="vfill"></div><div class="vknob"></div></div></div>
<div style="text-align:center;font-weight:600;margin:6px 0">62%</div>
<div class="btn" style="width:100%;justify-content:center">🔇 음소거</div>
</div>
</div>
</div>
<!-- filters -->
<div class="card">
<div class="row" style="margin-bottom:8px"><span class="cap">ACTIVE FILTERS · 6 / 40 bands</span>
<span class="btn" style="height:26px;margin-left:auto">＋ 밴드 추가</span><span class="btn" style="height:26px;margin-left:6px">전체 지우기</span></div>
<span class="chip">LSC 90Hz · Q0.7 <b style="color:var(--good)">+4.0</b></span>
<span class="chip">PK 180Hz · Q1.0 <b style="color:var(--warn)">−2.5</b></span>
<span class="chip">PK 3.0kHz · Q1.2 <b style="color:var(--good)">+3.0</b></span>
<span class="chip">PK 6.5kHz · Q3.0 <b style="color:var(--warn)">−2.0</b></span>
<span class="chip">HSC 10kHz · Q0.7 <b style="color:var(--warn)">−1.5</b></span>
</div>
</div>
<!-- AI dock -->
<div style="border-top:1px solid var(--stroke);padding:12px 18px;background:rgba(0,0,0,.14)">
<div style="background:var(--card);border:1px solid var(--stroke);border-radius:11px;padding:10px 13px;margin-bottom:10px;font-size:14px;color:var(--dim);max-width:640px">
보컬을 앞으로 3kHz +3dB, 저음 단단하게 180Hz −2.5dB, 무게 45Hz +2dB. 클리핑 방지 Preamp −6.0dB. <b style="color:var(--text)">적용됨 ✓</b></div>
<div class="row"><div class="field" style="flex:1;height:44px">예: 보컬을 더 가깝게, 저음은 단단하게 · 치찰음 줄여줘</div><div class="btn acc" style="width:44px;height:44px;justify-content:center;font-size:18px">➤</div></div>
</div>
</div>
</div>
</div>
<!-- ===================== SECONDARY WINDOWS ===================== -->
<h2>2. 부가 창들</h2>
<div class="grid">
<!-- Help drawer -->
<div class="win">
<div class="tbar"><div class="t">❓ 도움말 (오른쪽에서 슬라이드)</div></div>
<div style="padding:18px">
<b style="font-size:17px">도움말</b>
<p class="note" style="margin:8px 0 14px">처음 오셨나요? 아래 3단계면 나만의 소리를 만들 수 있어요.</p>
<div class="card" style="margin-bottom:8px"><b style="color:var(--accent)">① 기기 고르기</b><p class="note" style="margin:6px 0 0">왼쪽 목록에서 이어폰/헤드폰 선택. 없으면 'DB 업데이트'.</p></div>
<div class="card" style="margin-bottom:8px"><b style="color:var(--accent)">② 말로 소리 만들기</b><p class="note" style="margin:6px 0 0">"보컬을 더 가깝게", "저음은 단단하게" 처럼 입력.</p></div>
<div class="card" style="margin-bottom:12px"><b style="color:var(--accent)">③ 그래프로 다듬기</b><p class="note" style="margin:6px 0 0">드래그=주파수/음량 · 휠=Q · 더블클릭=추가 · 우클릭=삭제</p></div>
<b style="font-size:14px">AI API 키 발급</b>
<div class="btn" style="width:100%;justify-content:flex-start;margin-top:6px;color:var(--accent)">🔗 Claude (Anthropic) 키 발급</div>
<div class="btn" style="width:100%;justify-content:flex-start;margin-top:6px;color:var(--accent)">🔗 ChatGPT (OpenAI) 키 발급</div>
<div class="btn" style="width:100%;justify-content:flex-start;margin-top:6px;color:var(--accent)">🔗 Gemini (Google) 키 발급</div>
</div>
</div>
<!-- Settings -->
<div class="win">
<div class="tbar"><div class="t">⚙ 설정</div></div>
<div style="padding:18px">
<div class="card">
<div class="cap" style="margin-bottom:6px">AI · API 키</div>
<p class="note" style="margin:0 0 10px">키는 DPAPI로 암호화 저장(평문 X). 저장 후 '이미 입력됨'으로 표시.</p>
<div class="card2" style="background:var(--card2);border-radius:9px;padding:10px;margin-bottom:8px;display:flex;align-items:center">
<div style="width:150px"><div class="val">Claude API</div><div style="color:var(--accent);font-size:13px">🔗 키 발급 방법</div></div>
<div style="flex:1;color:var(--good);font-size:14px">🔒 이미 입력되어 있음 (••••••••)</div><span class="btn">삭제</span></div>
<div style="background:var(--card2);border-radius:9px;padding:10px;margin-bottom:8px;display:flex;align-items:center">
<div style="width:150px"><div class="val">ChatGPT (OpenAI)</div><div style="color:var(--accent);font-size:13px">🔗 키 발급 방법</div></div>
<div class="field" style="flex:1;height:32px">API 키 붙여넣기…</div><span class="btn acc" style="margin-left:8px">저장</span></div>
<div style="background:var(--card2);border-radius:9px;padding:10px;display:flex;align-items:center">
<div style="width:150px"><div class="val">Gemini</div><div style="color:var(--accent);font-size:13px">🔗 키 발급 방법</div></div>
<div class="field" style="flex:1;height:32px">API 키 붙여넣기…</div><span class="btn acc" style="margin-left:8px">저장</span></div>
<div class="row" style="margin-top:10px"><span class="lbl" style="width:150px">Claude 모델</span><div class="field" style="width:200px;height:32px">Claude Sonnet (기본) ▾</div></div>
</div>
<div class="card" style="margin-top:10px"><div class="cap">테마</div><p class="note" style="margin:6px 0 0">Dark / Light / System + 강조색 (M5)</p></div>
</div>
</div>
<!-- DB Manager -->
<div class="win">
<div class="tbar"><div class="t">프로파일 데이터베이스</div></div>
<div style="padding:18px">
<div class="card" style="margin-bottom:12px">
<div class="cap" style="margin-bottom:10px">현재 상태</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px">
<div><div class="lbl">전체</div><div class="val" style="font-size:21px">4,213</div></div>
<div><div class="lbl">이어폰(IEM)</div><div class="val">2,140</div></div>
<div><div class="lbl">헤드폰</div><div class="val">2,073</div></div>
<div><div class="lbl">최근 업데이트</div><div class="val">2026-06-28</div></div>
<div><div class="lbl">DB 크기</div><div class="val">7.0 MB</div></div>
<div><div class="lbl">스키마</div><div class="val">v1</div></div>
</div>
</div>
<div class="card">
<div class="cap" style="margin-bottom:10px">데이터 출처 (Sources)</div>
<div style="background:var(--card2);border-radius:9px;padding:10px;margin-bottom:8px;display:flex;align-items:center"><div style="flex:1"><b style="font-size:15px">AutoEQ</b><div style="color:var(--mute);font-size:13px">MIT / mixed · 3,600개</div></div><span class="badge src" style="margin-right:8px">배포 가능</span><span style="color:var(--dim);font-size:13px">업데이트 있음</span></div>
<div style="background:var(--card2);border-radius:9px;padding:10px;display:flex;align-items:center"><div style="flex:1"><b style="font-size:15px">oratory1990</b><div style="color:var(--mute);font-size:13px">restricted · 480개</div></div><span class="badge src" style="margin-right:8px">배포 제한</span><span style="color:var(--dim);font-size:13px">최신</span></div>
</div>
<div class="row" style="margin-top:12px"><div style="flex:1;height:8px;border-radius:8px;background:var(--card2);position:relative"><div style="position:absolute;left:0;top:0;bottom:0;width:40%;border-radius:8px;background:var(--accent)"></div></div><span class="lbl">파싱 중…</span></div>
<div class="row" style="justify-content:flex-end;margin-top:12px"><span class="btn acc">지금 업데이트</span><span class="btn" style="margin-left:8px">닫기</span></div>
</div>
</div>
<!-- Effects -->
<div class="win">
<div class="tbar"><div class="t">🎚 이펙트</div></div>
<div style="padding:18px">
<div class="card">
<div class="row"><span class="lbl" style="flex:1">크로스피드</span><b>30 %</b></div>
<div style="height:6px;border-radius:8px;background:var(--card2);margin:6px 0 14px;position:relative"><div style="position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:8px;background:var(--accent)"></div></div>
<div class="row"><span class="lbl" style="flex:1">베이스 부스트</span><b>+3.0 dB</b></div>
<div style="height:6px;border-radius:8px;background:var(--card2);margin:6px 0 14px;position:relative"><div style="position:absolute;left:0;top:0;bottom:0;width:25%;border-radius:8px;background:var(--accent)"></div></div>
<div class="row"><span class="lbl" style="flex:1">왼쪽 트림</span><b>0.0 dB</b></div>
<div style="height:6px;border-radius:8px;background:var(--card2);margin:6px 0 14px;position:relative"><div style="position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:8px;background:var(--accent)"></div></div>
<div class="row"><span class="lbl" style="flex:1">오른쪽 트림</span><b>−1.5 dB</b></div>
<div style="height:6px;border-radius:8px;background:var(--card2);margin:6px 0 0;position:relative"><div style="position:absolute;left:0;top:0;bottom:0;width:88%;border-radius:8px;background:var(--accent)"></div></div>
</div>
<p class="note" style="margin:10px 0 0">※ 크로스피드는 현재 플레이스홀더입니다(정식 구현 예정).</p>
</div>
</div>
<!-- Preset Library -->
<div class="win">
<div class="tbar"><div class="t">📚 프리셋 라이브러리</div></div>
<div style="padding:18px">
<div class="row" style="margin-bottom:12px"><div class="field" style="flex:1">프리셋 이름…</div><span class="btn acc" style="margin-left:8px">현재 상태 저장</span></div>
<div class="card" style="padding:8px">
<div style="padding:9px 10px;background:rgba(76,194,255,.12);border-radius:8px;font-size:15px">밤에 듣기 (보컬 강조)</div>
<div style="padding:9px 10px;color:var(--dim);font-size:15px">게이밍 (발소리)</div>
<div style="padding:9px 10px;color:var(--dim);font-size:15px">저음 강조</div>
<div style="padding:9px 10px;color:var(--dim);font-size:15px">레퍼런스 (플랫)</div>
</div>
<div class="row" style="justify-content:flex-end;margin-top:12px"><span class="btn">불러오기</span><span class="btn" style="margin-left:8px">삭제</span><span class="btn" style="margin-left:8px">닫기</span></div>
</div>
</div>
<!-- Import preview -->
<div class="win">
<div class="tbar"><div class="t">EQ 프리셋 가져오기</div></div>
<div style="padding:18px">
<b style="font-size:17px">이 EQ를 적용할까요?</b>
<div class="card" style="margin:12px 0">
<div class="lbl">대상 기기</div><div class="val" style="font-size:17px;margin:2px 0 6px">Moondrop Blessing 2 (iem)</div>
<div style="color:var(--dim);font-size:14px">Moondrop · AutoEQ · Harman IE 2019</div>
<div style="color:var(--dim);font-size:14px;margin-top:4px">7 bands · Preamp −6.5 dB</div>
</div>
<div class="card" style="margin-bottom:12px"><span style="color:var(--warn);font-size:14px">⚠ 이 기기 프로파일이 로컬 DB에 없습니다.</span> <span class="btn" style="margin-left:6px">DB 업데이트</span></div>
<div class="card"><div class="cap" style="margin-bottom:8px">제작 히스토리 (AI 대화)</div>
<div style="background:var(--card2);border-radius:8px;padding:8px;margin-bottom:6px"><div style="color:var(--mute);font-size:13px;font-weight:700">USER</div><div style="color:var(--dim);font-size:14px">보컬 가까이, 저음 단단히</div></div>
<div style="background:var(--card2);border-radius:8px;padding:8px"><div style="color:var(--mute);font-size:13px;font-weight:700">AI</div><div style="color:var(--dim);font-size:14px">3kHz +3dB, 180Hz −2.5dB…</div></div>
</div>
<div class="row" style="justify-content:flex-end;margin-top:12px"><span class="btn acc">적용</span><span class="btn" style="margin-left:8px">취소</span></div>
</div>
</div>
<!-- APO setup -->
<div class="win">
<div class="tbar"><div class="t">Equalizer APO 설정 (시작 시)</div></div>
<div style="padding:18px">
<b style="font-size:17px">Equalizer APO가 감지되지 않았습니다</b>
<p class="note" style="margin:8px 0 14px">이 앱은 APO로 EQ를 적용합니다. 설치하거나 config 폴더 경로를 지정하세요.</p>
<div class="card">
<div class="btn acc" style="width:100%;justify-content:flex-start;margin-bottom:8px">⬇ APO 자동 설치 (공식 설치파일 다운로드·실행)</div>
<div class="btn" style="width:100%;justify-content:flex-start;margin-bottom:8px">📁 APO config 폴더 직접 지정</div>
<div class="btn ghost" style="width:100%;justify-content:flex-start">나중에 (미리보기 모드로 계속)</div>
</div>
<div style="height:8px;border-radius:8px;background:var(--card2);margin:14px 0 6px"></div>
<p class="note" style="margin:0">APO 설치는 장치 선택과 재부팅이 필요합니다.</p>
</div>
</div>
<!-- Command window -->
<div class="win">
<div class="tbar"><div class="t">⌨ APO 명령 입력 (고급)</div></div>
<div style="padding:18px">
<b style="font-size:16px">Equalizer APO 명령 직접 입력</b>
<p class="note" style="margin:6px 0 12px">예: 'Preamp: -3 dB', 'Filter: ON PK Fc 1000 Hz Gain 2 dB Q 1'</p>
<div style="background:var(--card);border:1px solid var(--stroke);border-radius:8px;padding:12px;font-family:Consolas,monospace;font-size:14.5px;color:var(--dim);min-height:120px;line-height:1.7">
Preamp: -3 dB<br>Filter: ON PK Fc 2500 Hz Gain 2 dB Q 1.2<br>Copy: L=R R=L</div>
<div class="row" style="justify-content:flex-end;margin-top:12px"><span class="btn acc">적용</span><span class="btn" style="margin-left:8px">닫기</span></div>
</div>
</div>
</div>
</body>
</html>
mockups/main_window.html
+329
View File
@@ -0,0 +1,329 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dansori EQ — GUI Mockup</title>
<!--
VISUAL TARGET MOCKUP (not the real app).
Represents the intended look of the native app: .NET 8 + WPF + WPF-UI (Fluent) + LiveCharts2.
Open in a browser to preview the aesthetic. Dark Fluent, Mica-like background, accent cyan.
-->
<style>
:root{
--bg:#1b1b1f;
--mica-1:#232733;
--mica-2:#1a1c22;
--card:#26262b;
--card-2:#2d2d33;
--stroke:#3a3a42;
--text:#f2f3f5;
--text-dim:#a8abb4;
--text-mute:#767a83;
--accent:#4cc2ff;
--accent-2:#38e0c4;
--accent-soft:rgba(76,194,255,.14);
--good:#4fd08a;
--warn:#ffb454;
--radius:12px;
--radius-lg:16px;
font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
background:
radial-gradient(1200px 500px at 12% -8%, #2b3550 0%, transparent 55%),
radial-gradient(900px 500px at 100% 0%, #22403c 0%, transparent 50%),
var(--bg);
color:var(--text);
display:flex;align-items:center;justify-content:center;
height:100vh;overflow:hidden;
}
.window{
width:1180px;height:720px;
background:linear-gradient(180deg,var(--mica-1),var(--mica-2));
border:1px solid var(--stroke);
border-radius:var(--radius-lg);
box-shadow:0 30px 80px rgba(0,0,0,.55);
display:flex;flex-direction:column;overflow:hidden;
}
/* ---- title bar ---- */
.titlebar{
height:44px;display:flex;align-items:center;gap:10px;
padding:0 16px;border-bottom:1px solid var(--stroke);
-webkit-app-region:drag;background:rgba(255,255,255,.015);
}
.logo{width:22px;height:22px;border-radius:6px;
background:conic-gradient(from 200deg,var(--accent),var(--accent-2),var(--accent));
box-shadow:0 0 14px rgba(76,194,255,.5);}
.title{font-size:13px;font-weight:600;letter-spacing:.2px;}
.title .sub{color:var(--text-mute);font-weight:400;margin-left:8px;}
.winbtns{margin-left:auto;display:flex;gap:14px;color:var(--text-mute);}
.winbtns span{font-size:13px;}
/* ---- body ---- */
.body{flex:1;display:flex;min-height:0;}
/* ---- sidebar ---- */
.sidebar{
width:288px;border-right:1px solid var(--stroke);
display:flex;flex-direction:column;background:rgba(0,0,0,.12);
}
.search{padding:14px 14px 8px;}
.search input{
width:100%;height:38px;border-radius:9px;border:1px solid var(--stroke);
background:var(--card);color:var(--text);padding:0 12px 0 34px;font-size:13px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:11px center;outline:none;
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.list{flex:1;overflow:auto;padding:4px 8px 8px;}
.grouphdr{
display:flex;align-items:center;gap:8px;
padding:12px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.8px;
color:var(--text-mute);text-transform:uppercase;
}
.grouphdr .count{margin-left:auto;font-weight:600;color:var(--text-mute);
background:var(--card);padding:1px 8px;border-radius:20px;font-size:10px;letter-spacing:0;}
.item{
display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
cursor:pointer;margin:2px 0;
}
.item:hover{background:var(--card);}
.item.active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(76,194,255,.35);}
.item .ic{width:30px;height:30px;border-radius:8px;background:var(--card-2);
display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-dim);}
.item.active .ic{color:var(--accent);}
.item .nm{font-size:13px;font-weight:600;line-height:1.15;}
.item .br{font-size:11px;color:var(--text-mute);}
.sidefoot{border-top:1px solid var(--stroke);padding:12px;display:flex;flex-direction:column;gap:8px;}
.btn{
height:38px;border-radius:9px;border:1px solid var(--stroke);background:var(--card);
color:var(--text);font-size:13px;font-weight:600;display:flex;align-items:center;
justify-content:center;gap:8px;cursor:pointer;
}
.btn:hover{background:var(--card-2);}
.btn.accent{background:linear-gradient(180deg,#57c7ff,#2f9fe0);border-color:transparent;color:#04222f;}
.dbmeta{font-size:11px;color:var(--text-mute);text-align:center;}
/* ---- main ---- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.mainhdr{display:flex;align-items:center;gap:14px;padding:18px 22px 6px;}
.mainhdr h1{font-size:20px;margin:0;font-weight:700;letter-spacing:.2px;}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.4px;}
.badge.iem{background:rgba(56,224,196,.14);color:var(--accent-2);}
.badge.src{background:var(--card);color:var(--text-mute);font-weight:600;}
.hdr-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}
.chipbtn{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--stroke);
background:var(--card);color:var(--text-dim);font-size:12px;font-weight:600;cursor:pointer;
display:flex;align-items:center;gap:6px;}
.chipbtn:hover{background:var(--card-2);color:var(--text);}
.toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);}
.sw{width:38px;height:22px;border-radius:20px;background:linear-gradient(90deg,#3aa0d8,#38e0c4);
position:relative;}
.sw::after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;}
/* graph card */
.content{flex:1;overflow:auto;padding:12px 22px 0;}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;}
.card .caption{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.card .caption .t{font-size:13px;font-weight:700;color:var(--text-dim);letter-spacing:.3px;}
.preamp{margin-left:auto;font-size:12px;font-weight:700;color:var(--warn);
background:rgba(255,180,84,.12);padding:3px 10px;border-radius:20px;}
.legend{display:flex;gap:16px;font-size:11px;color:var(--text-mute);}
.legend i{display:inline-block;width:14px;height:0;border-top:2px solid;vertical-align:middle;margin-right:5px;}
.graphwrap{position:relative;}
svg .grid{stroke:#33333b;stroke-width:1;}
svg .axis{fill:var(--text-mute);font-size:10px;}
/* filter chips */
.filters{display:flex;flex-wrap:wrap;gap:8px;}
.fchip{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:9px;
background:var(--card-2);border:1px solid var(--stroke);font-size:12px;}
.fchip .type{font-weight:700;color:var(--accent);font-size:10px;letter-spacing:.5px;}
.fchip .val{color:var(--text-dim);}
.fchip .g.pos{color:var(--good);font-weight:600;}
.fchip .g.neg{color:var(--warn);font-weight:600;}
/* AI dock */
.aidock{border-top:1px solid var(--stroke);padding:14px 22px 18px;background:rgba(0,0,0,.14);}
.airesp{display:flex;gap:11px;margin-bottom:12px;}
.airesp .av{width:28px;height:28px;border-radius:8px;flex-shrink:0;
background:conic-gradient(from 200deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(76,194,255,.45);}
.airesp .bubble{background:var(--card);border:1px solid var(--stroke);border-radius:12px;
padding:11px 14px;font-size:12.5px;line-height:1.5;color:var(--text-dim);max-width:820px;}
.airesp .bubble b{color:var(--text);font-weight:600;}
.promptbar{display:flex;gap:10px;align-items:center;}
.promptbar .field{flex:1;height:46px;border-radius:12px;border:1px solid var(--stroke);
background:var(--card);display:flex;align-items:center;padding:0 8px 0 16px;}
.promptbar .field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.promptbar input{flex:1;border:none;background:none;color:var(--text);font-size:14px;outline:none;}
.promptbar input::placeholder{color:var(--text-mute);}
.mic{width:32px;height:32px;border-radius:8px;background:var(--card-2);display:flex;align-items:center;justify-content:center;color:var(--text-mute);}
.send{width:46px;height:46px;border-radius:12px;border:none;cursor:pointer;
background:linear-gradient(180deg,#57c7ff,#2f9fe0);color:#04222f;display:flex;align-items:center;justify-content:center;}
.hint{font-size:11px;color:var(--text-mute);margin-top:8px;}
::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-thumb{background:#3a3a42;border-radius:8px;border:3px solid transparent;background-clip:content-box;}
</style>
</head>
<body>
<div class="window">
<!-- title bar -->
<div class="titlebar">
<div class="logo"></div>
<div class="title">Dansori EQ <span class="sub">· AI EQ for Equalizer APO</span></div>
<div class="winbtns"><span>—</span><span>▢</span><span>✕</span></div>
</div>
<div class="body">
<!-- sidebar -->
<aside class="sidebar">
<div class="search"><input placeholder="이어폰 · 헤드폰 검색…" value="" /></div>
<div class="list">
<div class="grouphdr">🎧 In-Ear Monitors <span class="count">2,140</span></div>
<div class="item active">
<div class="ic">🎵</div>
<div><div class="nm">Truthear × Crinacle Zero</div><div class="br">Truthear · IEM</div></div>
</div>
<div class="item">
<div class="ic">🎵</div>
<div><div class="nm">Moondrop Blessing 2</div><div class="br">Moondrop · IEM</div></div>
</div>
<div class="item">
<div class="ic">🎵</div>
<div><div class="nm">7Hz Timeless</div><div class="br">7Hz · IEM</div></div>
</div>
<div class="item">
<div class="ic">🎵</div>
<div><div class="nm">Etymotic ER2XR</div><div class="br">Etymotic · IEM</div></div>
</div>
<div class="grouphdr">🎧 Headphones <span class="count">2,073</span></div>
<div class="item">
<div class="ic">🎧</div>
<div><div class="nm">Sennheiser HD 600</div><div class="br">Sennheiser · Over-ear</div></div>
</div>
<div class="item">
<div class="ic">🎧</div>
<div><div class="nm">HIFIMAN Sundara</div><div class="br">HIFIMAN · Over-ear</div></div>
</div>
<div class="item">
<div class="ic">🎧</div>
<div><div class="nm">Focal Clear</div><div class="br">Focal · Over-ear</div></div>
</div>
</div>
<div class="sidefoot">
<button class="btn"><span>⟳</span> 프로파일 DB 업데이트</button>
<div class="dbmeta">4,213 profiles · 최신: 2026-06-28</div>
</div>
</aside>
<!-- main -->
<section class="main">
<div class="mainhdr">
<h1>Truthear × Crinacle Zero</h1>
<span class="badge iem">IEM</span>
<span class="badge src">AutoEQ · Harman IE 2019</span>
<div class="hdr-actions">
<button class="chipbtn">↶ 되돌리기</button>
<button class="chipbtn">⟲ 베이스로 리셋</button>
<div class="toggle">활성 <div class="sw"></div></div>
</div>
</div>
<div class="content">
<!-- EQ GRAPH -->
<div class="card">
<div class="caption">
<span class="t">EQUALIZATION CURVE</span>
<div class="legend">
<span><i style="border-color:#5a5f6b;border-top-style:dashed"></i>타깃</span>
<span><i style="border-color:var(--accent)"></i>현재 EQ</span>
</div>
<span class="preamp">Preamp −6.0 dB</span>
</div>
<div class="graphwrap">
<svg viewBox="0 0 900 300" width="100%" height="300">
<defs>
<linearGradient id="fill" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="rgba(76,194,255,.35)"/>
<stop offset="100%" stop-color="rgba(76,194,255,0)"/>
</linearGradient>
<linearGradient id="stroke" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#38e0c4"/>
<stop offset="100%" stop-color="#4cc2ff"/>
</linearGradient>
</defs>
<!-- horizontal grid (dB) -->
<line class="grid" x1="40" y1="60" x2="880" y2="60"/>
<line class="grid" x1="40" y1="110" x2="880" y2="110"/>
<line class="grid" x1="40" y1="150" x2="880" y2="150" stroke="#44454e"/>
<line class="grid" x1="40" y1="190" x2="880" y2="190"/>
<line class="grid" x1="40" y1="240" x2="880" y2="240"/>
<text class="axis" x="8" y="64">+12</text>
<text class="axis" x="12" y="154">0</text>
<text class="axis" x="8" y="244">−12</text>
<!-- vertical grid (freq) -->
<line class="grid" x1="130" y1="40" x2="130" y2="260"/>
<line class="grid" x1="300" y1="40" x2="300" y2="260"/>
<line class="grid" x1="470" y1="40" x2="470" y2="260"/>
<line class="grid" x1="640" y1="40" x2="640" y2="260"/>
<line class="grid" x1="810" y1="40" x2="810" y2="260"/>
<text class="axis" x="118" y="278">50</text>
<text class="axis" x="285" y="278">200</text>
<text class="axis" x="452" y="278">1k</text>
<text class="axis" x="625" y="278">5k</text>
<text class="axis" x="792" y="278">20k</text>
<!-- target (dashed) -->
<path d="M40 150 C160 148 240 156 320 158 S470 152 560 150 S720 148 880 150"
fill="none" stroke="#5a5f6b" stroke-width="1.6" stroke-dasharray="5 5"/>
<!-- current EQ area -->
<path d="M40 120 C120 116 190 150 300 170 S430 172 470 150 S560 118 620 130
S740 176 800 164 S860 158 880 156 L880 260 L40 260 Z"
fill="url(#fill)"/>
<!-- current EQ line -->
<path d="M40 120 C120 116 190 150 300 170 S430 172 470 150 S560 118 620 130
S740 176 800 164 S860 158 880 156"
fill="none" stroke="url(#stroke)" stroke-width="3" stroke-linecap="round"/>
<!-- filter nodes -->
<circle cx="95" cy="118" r="5" fill="#04222f" stroke="#38e0c4" stroke-width="2.5"/>
<circle cx="300" cy="170" r="5" fill="#04222f" stroke="#4cc2ff" stroke-width="2.5"/>
<circle cx="560" cy="122" r="5" fill="#04222f" stroke="#4cc2ff" stroke-width="2.5"/>
<circle cx="770" cy="172" r="5" fill="#04222f" stroke="#4cc2ff" stroke-width="2.5"/>
</svg>
</div>
</div>
<!-- FILTER CHIPS -->
<div class="card">
<div class="caption"><span class="t">ACTIVE FILTERS · 6 bands</span></div>
<div class="filters">
<div class="fchip"><span class="type">LSC</span><span class="val">90 Hz · Q0.7</span><span class="g pos">+4.0 dB</span></div>
<div class="fchip"><span class="type">PK</span><span class="val">180 Hz · Q1.0</span><span class="g neg">−2.5 dB</span></div>
<div class="fchip"><span class="type">PK</span><span class="val">3.0 kHz · Q1.2</span><span class="g pos">+3.0 dB</span></div>
<div class="fchip"><span class="type">PK</span><span class="val">6.5 kHz · Q3.0</span><span class="g neg">−2.0 dB</span></div>
<div class="fchip"><span class="type">HSC</span><span class="val">10 kHz · Q0.7</span><span class="g neg">−1.5 dB</span></div>
<div class="fchip"><span class="type">PK</span><span class="val">45 Hz · Q0.9</span><span class="g pos">+2.0 dB</span></div>
</div>
</div>
</div>
<!-- AI DOCK -->
<div class="aidock">
<div class="airesp">
<div class="av"></div>
<div class="bubble">
보컬을 앞으로 당기기 위해 <b>3 kHz를 +3 dB(Q1.2)</b> 올리고, 저음을 단단하게 하려고
<b>180 Hz를 −2.5 dB</b>로 뭉침을 줄이면서 <b>45 Hz +2 dB</b>로 무게는 유지했습니다.
클리핑 방지를 위해 <b>Preamp를 −6.0 dB</b>로 설정했습니다. 적용됨 ✓
</div>
</div>
<div class="promptbar">
<div class="field">
<input placeholder="예: 보컬을 더 가깝게, 저음은 단단하게 · 치찰음 줄여줘" />
<div class="mic">🎤</div>
</div>
<button class="send">➤</button>
</div>
<div class="hint">Enter로 전송 · 변경은 Equalizer APO에 즉시 적용됩니다 · 모델: Claude Sonnet</div>
</div>
</section>
</div>
</div>
</body>
</html>