eKeerar
330 lines
17 KiB
HTML
330 lines
17 KiB
HTML
<!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>
|