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/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>