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