yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

feat(mobile): Phase M-1 모바일 프로젝트 기반 + V3 마스터 플랜

Browse source 
- V3 모바일 마스터 플랜 작성 (docs/v3/00-mobile-master-plan.md)
  11개 Phase, 5주 로드맵, 전략 결정사항 확정
- 7개 디자인 HTML 레퍼런스 저장 (docs/v3/designs/)
- app.json → app.config.ts 전환 + 환경변수 체계
- 5탭 네비게이션 (DASH/HIST/REC FAB/TALK/SET)
- metro.config.js monorepo 격리 (root RN 0.84 충돌 해결)
- ui-native 테마 디자인 목업 색상 동기화
- SafeArea 적용 (useSafeAreaInsets)
- DEV 로그인 우회 (__DEV__ 전용)
- Supabase .env 연동
- iOS 시뮬레이터 검증 완료
This commit is contained in:
윤찬 2026-04-13 03:22:15 +09:00
parent ffca07d120
commit 211673bc6c
30 changed files with 15010 additions and 525 deletions
Download patch file Download diff file Expand all files Collapse all files

274
docs/v3/designs/dashboard.html Normal file
View file

@ -0,0 +1,274 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10" vid="24">
<div class="flex items-center gap-2" vid="25">
<div class="w-2 h-2 rounded-full bg-brandOrange shadow-[0_0_8px_#ff5c35]" vid="26"></div>
<span class="text-[10px] tracking-[0.2em] font-mono text-textMuted" vid="27">D3RO-VOICE</span>
</div>
<div class="flex items-center gap-3" vid="28">
<span class="text-[10px] font-mono text-textMuted" vid="29">v1.0.0</span>
<div class="flex gap-1.5" vid="30">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="31"></div>
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange shadow-[0_0_5px_#ff5c35]" vid="32"></div>
</div>
</div>
</header>
<main class="flex-1 overflow-y-auto no-scrollbar px-5 pb-24" vid="33">
<div class="bg-insetBg rounded-2xl p-5 border border-[#1a1a1c] shadow-[inset_0_4px_20px_rgba(0,0,0,0.5)] relative overflow-hidden mt-2" vid="34">
<div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 16px 16px;" vid="35"></div>
<div class="relative z-10 flex justify-between items-start mb-6" vid="36">
<span class="text-xs text-textMuted font-medium" vid="37">세션 개요</span>
<span class="text-xs font-mono text-brandOrange opacity-80" vid="38">MON</span>
</div>
<div class="relative z-10 flex flex-col mb-8" vid="39">
<div class="flex items-baseline gap-3" vid="40">
<span class="text-6xl font-light font-mono text-brandOrange tracking-tighter" vid="41">0</span>
<span class="text-sm text-textMuted" vid="42">오늘 세션</span>
</div>
<div class="flex items-center gap-1.5 mt-2 text-[10px] text-textMuted font-mono" vid="43">
<svg class="w-3 h-3 text-brandOrange" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="44"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7l4-4m0 0l4 4m-4-4v18" vid="45"></path></svg>
<span vid="46">⌘1을 눌러 녹음 시작</span>
</div>
</div>
<div class="relative z-10 flex justify-between items-end border-t border-[#1a1a1c] pt-4" vid="47">
<div vid="48">
<div class="text-[10px] text-textMuted mb-1" vid="49">단어</div>
<div class="flex items-baseline gap-1.5" vid="50">
<span class="text-xl font-mono text-brandOrange" vid="51">168</span>
<span class="text-[10px] text-textMuted" vid="52">전체</span>
</div>
</div>
<div class="text-right" vid="53">
<div class="text-[10px] text-textMuted mb-1" vid="54">연속</div>
<div class="flex items-baseline gap-1.5 justify-end" vid="55">
<span class="text-xl font-mono text-brandOrange" vid="56">0</span>
<span class="text-[10px] text-textMuted" vid="57">일</span>
</div>
</div>
</div>
<div class="absolute bottom-2 left-0 right-0 text-center z-0" vid="58">
<span class="text-[8px] font-mono text-white/5 tracking-[0.3em]" vid="59">LOCAL AI VOICE ASSISTANT</span>
</div>
</div>
<div class="flex gap-3 mt-4" vid="60">
<button class="flex-1 bg-panelBg border border-borderColor rounded-xl py-3.5 flex items-center justify-center text-sm font-medium hover:bg-[#2a2a2e] transition-colors shadow-sm" vid="61">
<span class="text-brandOrange" vid="62">통계</span>
</button>
<button class="flex-1 bg-panelBg border border-borderColor rounded-xl py-3.5 flex items-center justify-center text-sm font-medium hover:bg-[#2a2a2e] transition-colors shadow-sm" vid="63">
<span class="text-textMuted" vid="64">시스템</span>
</button>
</div>
<div class="grid grid-cols-2 gap-3 mt-4" vid="65">
<div class="bg-panelBg border border-borderColor rounded-xl p-4 flex flex-col items-center justify-center gap-2" vid="66">
<span class="text-[11px] text-textMuted font-medium" vid="67">녹음</span>
<div class="flex items-baseline gap-1" vid="68">
<span class="text-2xl font-mono text-brandOrange" vid="69">6</span>
<span class="text-[10px] text-textMuted font-mono" vid="70">MIN</span>
</div>
</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 flex flex-col items-center justify-center gap-2" vid="71">
<span class="text-[11px] text-textMuted font-medium" vid="72">단어</span>
<div class="flex items-baseline gap-1" vid="73">
<span class="text-2xl font-mono text-brandOrange" vid="74">168</span>
<span class="text-[10px] text-textMuted" vid="75">전체</span>
</div>
</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 flex flex-col items-center justify-center gap-2" vid="76">
<span class="text-[11px] text-textMuted font-medium" vid="77">오늘</span>
<div class="flex items-baseline gap-1" vid="78">
<span class="text-2xl font-mono text-brandOrange" vid="79">0</span>
<span class="text-[10px] text-textMuted" vid="80">세션</span>
</div>
</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 flex flex-col items-center justify-center gap-2" vid="81">
<span class="text-[11px] text-textMuted font-medium" vid="82">연속</span>
<div class="flex items-baseline gap-1" vid="83">
<span class="text-2xl font-mono text-brandOrange" vid="84">0</span>
<span class="text-[10px] text-textMuted" vid="85">일</span>
</div>
</div>
</div>
<div class="flex flex-col gap-3 mt-4" vid="86">
<div class="bg-panelBg border border-borderColor rounded-xl p-4 flex justify-between items-center" vid="87">
<span class="text-xs text-textMuted font-medium" vid="88">현재 백엔드</span>
<div class="flex items-center gap-2" vid="89">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="90"></div>
<span class="text-sm text-brandOrange font-mono tracking-tight" vid="91">프리미엄 (CLAUDE)</span>
</div>
</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 flex justify-between items-center" vid="92">
<span class="text-xs text-textMuted font-medium" vid="93">현재 등급</span>
<div class="flex items-center gap-2" vid="94">
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange shadow-[0_0_5px_#ff5c35]" vid="95"></div>
<span class="text-sm text-brandOrange font-mono tracking-tight" vid="96">FREE</span>
</div>
</div>
</div>
<div class="bg-panelBg border border-borderColor rounded-xl mt-4 overflow-hidden" vid="97">
<div class="px-5 py-4 border-b border-borderColor/50" vid="98">
<span class="text-xs text-brandOrange font-medium" vid="99">오늘 사용량</span>
</div>
<div class="flex flex-col" vid="100">
<div class="px-5 py-3.5 flex justify-between items-center border-b border-borderColor/50" vid="101">
<span class="text-sm text-textMain" vid="102">받아쓰기</span>
<span class="text-sm text-brandOrange font-mono" vid="103">무제한</span>
</div>
<div class="px-5 py-3.5 flex justify-between items-center border-b border-borderColor/50" vid="104">
<span class="text-sm text-textMain" vid="105">LLM 처리</span>
<span class="text-sm text-brandOrange font-mono" vid="106">무제한</span>
</div>
<div class="px-5 py-3.5 flex flex-col gap-1.5" vid="107">
<span class="text-[11px] text-brandGreen font-medium" vid="108">프리미엄 쿼터</span>
<div class="flex justify-between items-center" vid="109">
<span class="text-sm text-textMain font-mono" vid="110">Haiku</span>
<span class="text-sm text-brandOrange font-mono" vid="111">250/주간</span>
</div>
</div>
</div>
</div>
</main>
<div class="absolute bottom-[80px] left-0 w-full px-5 py-2 flex justify-between items-center bg-gradient-to-t from-appBg to-transparent z-20 pointer-events-none" vid="112">
<div class="flex items-center gap-1.5" vid="113">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="114"></div>
<span class="text-[8px] font-mono text-textMuted tracking-wider" vid="115">OLLAMA GEMMA4:E4B</span>
</div>
<span class="text-[8px] font-mono text-textMuted tracking-widest opacity-50" vid="116">PRECISION DATA LINK</span>
</div>
<nav class="absolute bottom-0 left-0 w-full h-[80px] bg-appBg/95 backdrop-blur-md border-t border-borderColor flex justify-around items-center px-2 pb-5 z-30" vid="117">
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="118">
<div class="relative" vid="119">
<svg class="w-6 h-6 text-brandOrange" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="120">
<rect x="3" y="3" width="7" height="7" rx="1" vid="121"></rect>
<rect x="14" y="3" width="7" height="7" rx="1" vid="122"></rect>
<rect x="14" y="14" width="7" height="7" rx="1" vid="123"></rect>
<rect x="3" y="14" width="7" height="7" rx="1" vid="124"></rect>
</svg>
<div class="absolute inset-0 bg-brandOrange blur-[10px] opacity-20 rounded-full" vid="125"></div>
</div>
<span class="text-[9px] font-mono text-brandOrange font-medium" vid="126">DASH</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="127">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="128">
<circle cx="12" cy="12" r="9" vid="129"></circle>
<path d="M12 7v5l3 3" vid="130"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="131">HIST</span>
</button>
<div class="relative -top-5" vid="132">
<button class="w-14 h-14 rounded-full bg-brandOrange flex items-center justify-center shadow-[0_0_20px_rgba(255,92,53,0.4)] border-4 border-appBg group" vid="133">
<svg class="w-6 h-6 text-appBg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" vid="134">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" vid="135"></path>
</svg>
</button>
</div>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="136">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="137">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" vid="138"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="139">TALK</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="140">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="141">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="142"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="143"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="144">SET</span>
</button>
</nav>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="145"></div>
</div>
</body></html>

208
docs/v3/designs/history.html Normal file
View file

@ -0,0 +1,208 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - History</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10" vid="24">
<div class="flex items-center gap-2" vid="25">
<div class="w-2 h-2 rounded-full bg-brandOrange shadow-[0_0_8px_#ff5c35]" vid="26"></div>
<span class="text-[10px] tracking-[0.2em] font-mono text-textMuted" vid="27">HISTORY</span>
</div>
<div class="flex items-center gap-3" vid="28">
<div class="flex gap-1.5" vid="29">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="30"></div>
</div>
</div>
</header>
<div class="px-5 pb-3 flex gap-3 z-10 border-b border-borderColor/50" vid="31">
<button class="bg-brandOrange text-appBg rounded-full px-4 py-1.5 text-xs font-medium" vid="32">전체</button>
<button class="bg-panelBg border border-borderColor rounded-full px-4 py-1.5 text-xs font-medium text-textMuted hover:text-textMain" vid="33">즐겨찾기</button>
<button class="bg-panelBg border border-borderColor rounded-full px-4 py-1.5 text-xs font-medium text-textMuted hover:text-textMain" vid="34">처리중</button>
</div>
<main class="flex-1 overflow-y-auto no-scrollbar px-5 py-4 pb-24 flex flex-col gap-3" vid="35">
<div class="text-xs font-mono text-textMuted mb-1 mt-2" vid="36">TODAY</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 relative group" vid="37">
<div class="flex justify-between items-start mb-2" vid="38">
<div class="flex items-center gap-2" vid="39">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="40"></div>
<span class="text-xs font-mono text-textMain" vid="41">14:32</span>
</div>
<span class="text-[10px] font-mono text-brandOrange bg-brandOrange/10 px-2 py-0.5 rounded" vid="42">42 W</span>
</div>
<p class="text-sm text-textMain leading-relaxed mb-3 line-clamp-2" vid="43">
네, 지금 보고 있는 색상은 바다색입니다. 약간 푸른 빛이 도는 에메랄드 그린에 가깝네요. 이걸 디자인 시스템에 추가해 주세요.
</p>
<div class="flex items-center gap-3 text-textMuted" vid="44">
<div class="flex items-center gap-1" vid="45">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="46"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" vid="47"></path></svg>
<span class="text-[10px] font-mono" vid="48">0:45</span>
</div>
<div class="flex items-center gap-1" vid="49">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="50"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" vid="51"></path></svg>
<span class="text-[10px] font-mono" vid="52">CLAUDE</span>
</div>
</div>
</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 relative group" vid="53">
<div class="flex justify-between items-start mb-2" vid="54">
<div class="flex items-center gap-2" vid="55">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="56"></div>
<span class="text-xs font-mono text-textMain" vid="57">09:15</span>
</div>
<span class="text-[10px] font-mono text-brandOrange bg-brandOrange/10 px-2 py-0.5 rounded" vid="58">18 W</span>
</div>
<p class="text-sm text-textMain leading-relaxed mb-3 line-clamp-2" vid="59">
테스트중입니다. 마이크 입력 레벨 확인하고 있어요. 하나 둘 셋.
</p>
<div class="flex items-center gap-3 text-textMuted" vid="60">
<div class="flex items-center gap-1" vid="61">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="62"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" vid="63"></path></svg>
<span class="text-[10px] font-mono" vid="64">0:12</span>
</div>
<div class="flex items-center gap-1" vid="65">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="66"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" vid="67"></path></svg>
<span class="text-[10px] font-mono" vid="68">LOCAL</span>
</div>
</div>
</div>
<div class="text-xs font-mono text-textMuted mb-1 mt-4" vid="69">YESTERDAY</div>
<div class="bg-panelBg border border-borderColor rounded-xl p-4 relative group opacity-70" vid="70">
<div class="flex justify-between items-start mb-2" vid="71">
<div class="flex items-center gap-2" vid="72">
<div class="w-1.5 h-1.5 rounded-full bg-textMuted" vid="73"></div>
<span class="text-xs font-mono text-textMain" vid="74">18:45</span>
</div>
<span class="text-[10px] font-mono text-textMuted bg-[#2a2a2e] px-2 py-0.5 rounded" vid="75">128 W</span>
</div>
<p class="text-sm text-textMuted leading-relaxed mb-3 line-clamp-2" vid="76">
내일 회의 안건 정리해줘. 첫째로 새로운 UI 디자인 리뷰, 둘째로 프론트엔드 아키텍처 개선 방안, 셋째로 다음 스프린트 일정 산정이야.
</p>
<div class="flex items-center gap-3 text-textMuted" vid="77">
<div class="flex items-center gap-1" vid="78">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="79"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" vid="80"></path></svg>
<span class="text-[10px] font-mono" vid="81">2:30</span>
</div>
<div class="flex items-center gap-1" vid="82">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="83"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" vid="84"></path></svg>
</div>
</div>
</div>
</main>
<div class="absolute bottom-[80px] left-0 w-full px-5 py-2 flex justify-between items-center bg-gradient-to-t from-appBg to-transparent z-20 pointer-events-none" vid="85">
<div class="flex items-center gap-1.5" vid="86">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="87"></div>
<span class="text-[8px] font-mono text-textMuted tracking-wider" vid="88">OLLAMA GEMMA4:E4B</span>
</div>
<span class="text-[8px] font-mono text-textMuted tracking-widest opacity-50" vid="89">PRECISION DATA LINK</span>
</div>
<nav class="absolute bottom-0 left-0 w-full h-[80px] bg-appBg/95 backdrop-blur-md border-t border-borderColor flex justify-around items-center px-2 pb-5 z-30" vid="90">
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="91">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="92">
<rect x="3" y="3" width="7" height="7" rx="1" vid="93"></rect>
<rect x="14" y="3" width="7" height="7" rx="1" vid="94"></rect>
<rect x="14" y="14" width="7" height="7" rx="1" vid="95"></rect>
<rect x="3" y="14" width="7" height="7" rx="1" vid="96"></rect>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="97">DASH</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="98">
<div class="relative" vid="99">
<svg class="w-6 h-6 text-brandOrange" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="100">
<circle cx="12" cy="12" r="9" vid="101"></circle>
<path d="M12 7v5l3 3" vid="102"></path>
</svg>
<div class="absolute inset-0 bg-brandOrange blur-[10px] opacity-20 rounded-full" vid="103"></div>
</div>
<span class="text-[9px] font-mono text-brandOrange font-medium" vid="104">HIST</span>
</button>
<div class="relative -top-5" vid="105">
<button class="w-14 h-14 rounded-full bg-panelBg flex items-center justify-center border-4 border-appBg group hover:bg-[#2a2a2e] transition-colors" vid="106">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" vid="107">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" vid="108"></path>
</svg>
</button>
</div>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="109">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="110">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" vid="111"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="112">TALK</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="113">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="114">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="115"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="116"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="117">SET</span>
</button>
</nav>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="118"></div>
</div>
</body></html>

93
docs/v3/designs/login.html Normal file
View file

@ -0,0 +1,93 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - Login</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20 shrink-0" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<main class="flex-1 overflow-y-auto no-scrollbar px-6 pb-12 pt-6 flex flex-col" vid="24">
<div class="flex-1 flex flex-col justify-center" vid="25">
<div class="flex flex-col items-center mb-10" vid="26">
<div class="flex items-center gap-2.5 mb-5" vid="27">
<div class="w-2.5 h-2.5 rounded-full bg-brandOrange shadow-[0_0_10px_#ff5c35] animate-pulse" vid="28"></div>
<div class="w-2.5 h-2.5 rounded-full bg-brandGreen shadow-[0_0_10px_#4ade80]" vid="29"></div>
</div>
<h1 class="text-[22px] tracking-[0.25em] font-mono text-textMain ml-1" vid="30">D3RO-VOICE</h1>
<p class="text-[9px] font-mono text-textMuted tracking-[0.15em] mt-2 uppercase" vid="31">Precision Voice Intelligence</p>
</div>
<div class="flex flex-col gap-3 mb-8" vid="32">
<button class="w-full bg-panelBg border border-borderColor rounded-xl py-3.5 flex items-center justify-center gap-3 text-sm font-medium text-textMain hover:bg-[#2a2a2e] hover:border-textMuted/40 transition-all" vid="33">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="34"><path d="M12.545,10.239v3.821h5.445c-0.712,2.315-2.647,3.972-5.445,3.972c-3.332,0-6.033-2.701-6.033-6.032s2.701-6.032,6.033-6.032c1.498,0,2.866,0.549,3.921,1.453l2.814-2.814C17.503,2.988,15.139,2,12.545,2C7.021,2,2.543,6.477,2.543,12s4.478,10,10.002,10c8.396,0,10.249-7.85,9.426-11.748L12.545,10.239z" vid="35"></path></svg>
Google로 로그인
</button>
<button class="w-full bg-panelBg border border-borderColor rounded-xl py-3.5 flex items-center justify-center gap-3 text-sm font-medium text-textMain hover:bg-[#2a2a2e] hover:border-textMuted/40 transition-all" vid="36">
<svg class="w-5 h-5 mb-0.5" viewBox="0 0 24 24" fill="currentColor" vid="37"><path d="M15.4,8.3c-0.4-2.2,1.3-4.1,3.2-4.5c-0.5-2.2-2.3-3.6-4.5-3.6c-1.8-0.2-3.8,1.2-4.8,1.2c-1,0-2.6-1.1-4.1-1.1c-2,0-4,1.1-5,2.9C-1.8,7.2,0.6,13,2.6,15.9c1,1.4,2.2,3.1,3.8,3c1.5-0.1,2.1-1,3.9-1c1.8,0,2.3,1,3.9,1c1.6,0,2.6-1.5,3.6-2.9C18.9,14.4,19.3,13,19.3,12.9C19.2,12.8,15.9,11.5,15.4,8.3z M12.8,3.2c0.8-1,1.4-2.5,1.2-3.9C12.8,0.1,11.3,0.8,10.5,1.8C9.8,2.7,9.2,4.2,9.4,5.6C10.8,5.7,12,4.5,12.8,3.2z" vid="38"></path></svg>
Apple로 로그인
</button>
<button class="w-full bg-panelBg border border-borderColor rounded-xl py-3.5 flex items-center justify-center gap-3 text-sm font-medium text-textMain hover:bg-[#2a2a2e] hover:border-textMuted/40 transition-all" vid="39">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="40"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" vid="41"></path></svg>
GitHub로 로그인
</button>
</div>
<div class="flex items-center gap-4 mb-8" vid="42">
<div class="flex-1 h-px bg-borderColor" vid="43"></div>
<span class="text-[10px] font-mono text-textMuted tracking-wider" vid="44">또는</span>
<div class="flex-1 h-px bg-borderColor" vid="45"></div>
</div>
<div class="flex flex-col gap-4 mb-6" vid="46">
<div vid="47">
<label class="block text-[10px] font-mono text-textMuted tracking-widest mb-1.5 pl-1" vid="48">EMAIL</label>
<input type="email" placeholder="user@studio.com" class="w-full bg-insetBg border border-borderColor rounded-xl py-3.5 px-4 text-sm text-textMain outline-none focus:border-brandOrange/50 focus:ring-1 focus:ring-brandOrange/50 transition-all placeholder:text-textMuted/30 font-sans" vid="49">
</div>
<div vid="50">
<label class="block text-[10px] font-mono text-textMuted tracking-widest mb-1.5 pl-1" vid="51">PASSWORD</label>
<input type="password" placeholder="••••••••" class="w-full bg-insetBg border border-borderColor rounded-xl py-3.5 px-4 text-sm text-textMain outline-none focus:border-brandOrange/50 focus:ring-1 focus:ring-brandOrange/50 transition-all placeholder:text-textMuted/30 font-sans" vid="52">
</div>
</div>
<button class="w-full bg-brandOrange text-appBg rounded-xl py-3.5 text-sm font-semibold tracking-wide hover:bg-opacity-90 transition-all shadow-[0_0_20px_rgba(255,92,53,0.3)]" vid="53">
로그인
</button>
</div>
<div class="flex justify-center items-center gap-1.5 mt-8 pb-4" vid="54">
<span class="text-[11px] text-textMuted font-sans" vid="55">계정이 없으신가요?</span>
<a href="#" class="text-[11px] text-brandOrange font-medium hover:underline" vid="56">회원가입</a>
</div>
</main>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="57"></div>
</div>
</body></html>

178
docs/v3/designs/recording.html Normal file
View file

@ -0,0 +1,178 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - Recording</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
},
animation: {
'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'wave-1': 'wave 1.2s ease-in-out infinite',
'wave-2': 'wave 1s ease-in-out infinite',
'wave-3': 'wave 1.5s ease-in-out infinite',
'wave-4': 'wave 0.8s ease-in-out infinite',
'wave-5': 'wave 1.3s ease-in-out infinite',
},
keyframes: {
wave: {
'0%, 100%': { height: '8px' },
'50%': { height: '32px' },
}
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10 border-b border-borderColor/50" vid="24">
<div class="flex items-center gap-2" vid="25">
<div class="w-2 h-2 rounded-full bg-brandOrange animate-pulse shadow-[0_0_8px_#ff5c35]" vid="26"></div>
<span class="text-[10px] tracking-[0.2em] font-mono text-brandOrange" vid="27">REC_SESSION</span>
</div>
<div class="flex items-center gap-3" vid="28">
<span class="text-[10px] font-mono text-brandOrange" vid="29">03:24</span>
<div class="flex gap-1.5" vid="30">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="31"></div>
</div>
</div>
</header>
<main class="flex-1 flex flex-col overflow-hidden relative" vid="32">
<div class="h-32 bg-insetBg flex items-center justify-center border-b border-[#1a1a1c] relative" vid="33">
<div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 16px 16px;" vid="34"></div>
<div class="flex items-center gap-1.5 z-10 h-16" vid="35">
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-1" vid="36"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-2" vid="37"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-3" vid="38"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-4" vid="39"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-5" vid="40"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-2" vid="41"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-1" vid="42"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-3" vid="43"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-5" vid="44"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-4" vid="45"></div>
<div class="w-1.5 bg-brandOrange rounded-full animate-wave-2" vid="46"></div>
</div>
</div>
<div class="flex-1 overflow-y-auto no-scrollbar p-5 flex flex-col gap-4 bg-appBg" vid="47">
<div class="text-sm leading-relaxed text-textMuted font-mono" vid="48">
&gt; initializing voice recording protocol...<br vid="49">
&gt; establishing local AI link...<br vid="50">
&gt; connection secure.
</div>
<div class="text-lg leading-relaxed text-textMain" vid="51">
오늘 회의에서는 다음 분기 마케팅 전략에 대해 논의했습니다. 주요 목표는 기존 고객 유지율을 15% 높이는 것입니다.
</div>
<div class="text-lg leading-relaxed text-textMain" vid="52">
이를 위해 이메일 캠페인을 개편하고, 로열티 프로그램을 도입할 예정입니다. 각 팀은 다음 주 수요일까지 세부 실행 계획을 제출해 주시기 바랍니다.
</div>
<div class="text-lg leading-relaxed text-textMain flex items-baseline gap-2" vid="53">
<span class="text-brandOrange" vid="54">그리고 예산 관련해서는</span>
<span class="w-2 h-4 bg-brandOrange animate-pulse-fast inline-block" vid="55"></span>
</div>
</div>
</main>
<div class="absolute bottom-[80px] left-0 w-full px-5 py-2 flex justify-between items-center bg-gradient-to-t from-appBg via-appBg to-transparent z-20" vid="56">
<div class="flex items-center gap-1.5" vid="57">
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange animate-pulse shadow-[0_0_5px_#ff5c35]" vid="58"></div>
<span class="text-[8px] font-mono text-brandOrange tracking-wider" vid="59">LISTENING_</span>
</div>
<span class="text-[8px] font-mono text-textMuted tracking-widest opacity-50" vid="60">REAL-TIME TRANSCRIPT</span>
</div>
<nav class="absolute bottom-0 left-0 w-full h-[80px] bg-appBg/95 backdrop-blur-md border-t border-borderColor flex justify-around items-center px-2 pb-5 z-30" vid="61">
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group opacity-50 cursor-not-allowed" vid="62">
<svg class="w-6 h-6 text-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="63">
<rect x="3" y="3" width="7" height="7" rx="1" vid="64"></rect>
<rect x="14" y="3" width="7" height="7" rx="1" vid="65"></rect>
<rect x="14" y="14" width="7" height="7" rx="1" vid="66"></rect>
<rect x="3" y="14" width="7" height="7" rx="1" vid="67"></rect>
</svg>
<span class="text-[9px] font-mono text-textMuted" vid="68">DASH</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group opacity-50 cursor-not-allowed" vid="69">
<svg class="w-6 h-6 text-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="70">
<circle cx="12" cy="12" r="9" vid="71"></circle>
<path d="M12 7v5l3 3" vid="72"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted" vid="73">HIST</span>
</button>
<div class="relative -top-5" vid="74">
<button class="w-14 h-14 rounded-full bg-panelBg flex items-center justify-center border-4 border-appBg group border-brandOrange" vid="75">
<svg class="w-5 h-5 text-brandOrange" fill="currentColor" viewBox="0 0 24 24" vid="76">
<rect x="6" y="6" width="12" height="12" rx="2" vid="77"></rect>
</svg>
<div class="absolute inset-0 border-2 border-brandOrange rounded-full animate-ping opacity-20" vid="78"></div>
</button>
</div>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group opacity-50 cursor-not-allowed" vid="79">
<svg class="w-6 h-6 text-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="80">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" vid="81"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted" vid="82">TALK</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group opacity-50 cursor-not-allowed" vid="83">
<svg class="w-6 h-6 text-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="84">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="85"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="86"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted" vid="87">SET</span>
</button>
</nav>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="88"></div>
</div>
</body></html>

202
docs/v3/designs/settings.html Normal file
View file

@ -0,0 +1,202 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - Settings</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10 border-b border-borderColor/50 mb-2" vid="24">
<h1 class="text-xl font-medium tracking-tight text-white" vid="25">설정</h1>
</header>
<main class="flex-1 overflow-y-auto no-scrollbar px-5 pb-32" vid="26">
<div class="mb-6" vid="27">
<h2 class="text-[11px] font-mono text-textMuted tracking-widest mb-3 pl-1" vid="28">ACCOUNT &amp; PLAN</h2>
<div class="bg-panelBg border border-borderColor rounded-xl overflow-hidden flex flex-col" vid="29">
<div class="px-4 py-4 flex justify-between items-center border-b border-borderColor/50" vid="30">
<div class="flex items-center gap-3" vid="31">
<div class="w-10 h-10 rounded-full bg-insetBg border border-borderColor flex items-center justify-center" vid="32">
<span class="font-mono text-brandOrange" vid="33">US</span>
</div>
<div class="flex flex-col" vid="34">
<span class="text-sm font-medium text-white" vid="35">User Studio</span>
<span class="text-[10px] text-textMuted font-mono" vid="36">user@studio.com</span>
</div>
</div>
<button class="text-[10px] font-mono text-textMuted hover:text-brandOrange transition-colors" vid="37">EDIT</button>
</div>
<div class="px-4 py-4 flex justify-between items-center bg-insetBg" vid="38">
<span class="text-xs text-textMuted font-medium" vid="39">현재 등급</span>
<div class="flex items-center gap-2" vid="40">
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange shadow-[0_0_5px_#ff5c35]" vid="41"></div>
<span class="text-sm text-brandOrange font-mono tracking-tight" vid="42">FREE</span>
</div>
</div>
</div>
</div>
<div class="mb-6" vid="43">
<h2 class="text-[11px] font-mono text-textMuted tracking-widest mb-3 pl-1" vid="44">BACKEND CONFIG</h2>
<div class="bg-panelBg border border-borderColor rounded-xl overflow-hidden flex flex-col" vid="45">
<div class="px-4 py-4 flex justify-between items-center border-b border-borderColor/50" vid="46">
<div class="flex flex-col gap-1" vid="47">
<span class="text-sm font-medium text-white" vid="48">LLM 모델 선택</span>
<span class="text-[10px] text-textMuted" vid="49">음성 인식 후 처리할 백엔드 모델</span>
</div>
<div class="flex items-center gap-2" vid="50">
<span class="text-sm text-brandOrange font-mono tracking-tight" vid="51">CLAUDE</span>
<svg class="w-4 h-4 text-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="52"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" vid="53"></path></svg>
</div>
</div>
<div class="px-4 py-4 flex justify-between items-center" vid="54">
<div class="flex flex-col gap-1" vid="55">
<span class="text-sm font-medium text-white" vid="56">로컬 STT 엔진</span>
<span class="text-[10px] text-textMuted" vid="57">오프라인 음성 인식 (Ollama)</span>
</div>
<div class="relative inline-flex items-center cursor-pointer" vid="58">
<input type="checkbox" value="" class="sr-only peer" checked="" vid="59">
<div class="w-9 h-5 bg-insetBg peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-brandOrange" vid="60"></div>
</div>
</div>
</div>
</div>
<div class="mb-6" vid="61">
<h2 class="text-[11px] font-mono text-textMuted tracking-widest mb-3 pl-1" vid="62">PREFERENCES</h2>
<div class="bg-panelBg border border-borderColor rounded-xl overflow-hidden flex flex-col" vid="63">
<div class="px-4 py-4 flex justify-between items-center border-b border-borderColor/50" vid="64">
<span class="text-sm font-medium text-white" vid="65">주 언어</span>
<div class="flex items-center gap-2" vid="66">
<span class="text-sm text-textMuted" vid="67">한국어</span>
<svg class="w-4 h-4 text-textMuted" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="68"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" vid="69"></path></svg>
</div>
</div>
<div class="px-4 py-4 flex justify-between items-center border-b border-borderColor/50" vid="70">
<span class="text-sm font-medium text-white" vid="71">자동 교정</span>
<div class="relative inline-flex items-center cursor-pointer" vid="72">
<input type="checkbox" value="" class="sr-only peer" checked="" vid="73">
<div class="w-9 h-5 bg-insetBg peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-brandOrange" vid="74"></div>
</div>
</div>
<div class="px-4 py-4 flex justify-between items-center" vid="75">
<span class="text-sm font-medium text-white" vid="76">햅틱 피드백</span>
<div class="relative inline-flex items-center cursor-pointer" vid="77">
<input type="checkbox" value="" class="sr-only peer" checked="" vid="78">
<div class="w-9 h-5 bg-insetBg peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-brandOrange" vid="79"></div>
</div>
</div>
</div>
</div>
<div class="mb-4" vid="80">
<button class="w-full bg-panelBg border border-borderColor rounded-xl py-3.5 flex items-center justify-center text-sm font-medium text-brandOrange hover:bg-[#2a2a2e] transition-colors shadow-sm" vid="81">
로그아웃
</button>
</div>
<div class="flex justify-center mt-6 opacity-50" vid="82">
<div class="flex items-center gap-1.5" vid="83">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="84"></div>
<span class="text-[8px] font-mono text-textMuted tracking-wider" vid="85">OLLAMA GEMMA4:E4B</span>
</div>
</div>
</main>
<nav class="absolute bottom-0 left-0 w-full h-[80px] bg-appBg/95 backdrop-blur-md border-t border-borderColor flex justify-around items-center px-2 pb-5 z-30" vid="86">
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="87">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="88">
<rect x="3" y="3" width="7" height="7" rx="1" vid="89"></rect>
<rect x="14" y="3" width="7" height="7" rx="1" vid="90"></rect>
<rect x="14" y="14" width="7" height="7" rx="1" vid="91"></rect>
<rect x="3" y="14" width="7" height="7" rx="1" vid="92"></rect>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="93">DASH</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="94">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="95">
<circle cx="12" cy="12" r="9" vid="96"></circle>
<path d="M12 7v5l3 3" vid="97"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="98">HIST</span>
</button>
<div class="relative -top-5" vid="99">
<button class="w-14 h-14 rounded-full bg-panelBg flex items-center justify-center shadow-[0_0_20px_rgba(0,0,0,0.4)] border-4 border-appBg group border-borderColor" vid="100">
<svg class="w-6 h-6 text-brandOrange" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" vid="101">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" vid="102"></path>
</svg>
</button>
</div>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="103">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="104">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" vid="105"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="106">TALK</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="107">
<div class="relative" vid="108">
<svg class="w-6 h-6 text-brandOrange" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="109">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="110"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="111"></path>
</svg>
<div class="absolute inset-0 bg-brandOrange blur-[10px] opacity-20 rounded-full" vid="112"></div>
</div>
<span class="text-[9px] font-mono text-brandOrange font-medium" vid="113">SET</span>
</button>
</nav>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="114"></div>
</div>
</body></html>

184
docs/v3/designs/talk.html Normal file
View file

@ -0,0 +1,184 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - Talk</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10 border-b border-borderColor" vid="24">
<div class="flex items-center gap-2" vid="25">
<div class="w-2 h-2 rounded-full bg-brandOrange shadow-[0_0_8px_#ff5c35]" vid="26"></div>
<span class="text-[10px] tracking-[0.2em] font-mono text-textMuted" vid="27">TALK</span>
</div>
<div class="flex items-center gap-3" vid="28">
<span class="text-[10px] font-mono text-brandOrange" vid="29">LIVE</span>
<div class="flex gap-1.5" vid="30">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80] animate-pulse" vid="31"></div>
</div>
</div>
</header>
<main class="flex-1 overflow-y-auto no-scrollbar px-5 py-4 pb-32 flex flex-col gap-4" vid="32">
<div class="flex flex-col gap-1 items-center mb-4" vid="33">
<span class="text-[10px] font-mono text-textMuted bg-panelBg px-3 py-1 rounded-full border border-borderColor" vid="34">TODAY, 9:30 AM</span>
</div>
<div class="flex justify-start" vid="35">
<div class="bg-panelBg border border-borderColor rounded-2xl rounded-tl-sm p-4 max-w-[85%] shadow-sm relative" vid="36">
<p class="text-sm text-textMain leading-relaxed" vid="37">안녕하세요! 오늘 하루는 어떠신가요? 도움이 필요하신 작업이 있다면 말씀해주세요.</p>
<span class="text-[9px] font-mono text-textMuted absolute -bottom-5 left-1" vid="38">CLAUDE</span>
</div>
</div>
<div class="flex justify-end mt-2" vid="39">
<div class="bg-brandOrange/10 border border-brandOrange/30 rounded-2xl rounded-tr-sm p-4 max-w-[85%] shadow-sm relative" vid="40">
<p class="text-sm text-brandOrange leading-relaxed" vid="41">이번 주에 진행해야 할 프로젝트 기획안 초안을 작성해야 해. 어떤 구조로 짜는 게 좋을까?</p>
<span class="text-[9px] font-mono text-textMuted absolute -bottom-5 right-1" vid="42">YOU</span>
</div>
</div>
<div class="flex justify-start mt-2" vid="43">
<div class="bg-panelBg border border-borderColor rounded-2xl rounded-tl-sm p-4 max-w-[85%] shadow-sm relative" vid="44">
<p class="text-sm text-textMain leading-relaxed mb-3" vid="45">프로젝트 기획안 초안 구조를 제안해 드릴게요.</p>
<ul class="text-sm text-textMain/80 list-disc pl-4 space-y-1.5 font-light" vid="46">
<li vid="47">프로젝트 개요 (배경 및 목적)</li>
<li vid="48">목표 설정 및 핵심 지표 (KPI)</li>
<li vid="49">타겟 오디언스 분석</li>
<li vid="50">주요 기능 및 요구사항</li>
<li vid="51">일정 및 마일스톤</li>
</ul>
<p class="text-sm text-textMain leading-relaxed mt-3" vid="52">이 중에서 어떤 부분부터 구체화해 볼까요?</p>
<span class="text-[9px] font-mono text-textMuted absolute -bottom-5 left-1" vid="53">CLAUDE</span>
</div>
</div>
<div class="flex justify-end mt-2" vid="54">
<div class="bg-brandOrange/5 border border-brandOrange/20 rounded-2xl rounded-tr-sm p-4 max-w-[85%] shadow-sm relative flex items-center gap-2" vid="55">
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange animate-bounce" style="animation-delay: 0ms;" vid="56"></div>
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange animate-bounce" style="animation-delay: 150ms;" vid="57"></div>
<div class="w-1.5 h-1.5 rounded-full bg-brandOrange animate-bounce" style="animation-delay: 300ms;" vid="58"></div>
<span class="text-[9px] font-mono text-textMuted absolute -bottom-5 right-1" vid="59">LISTENING...</span>
</div>
</div>
</main>
<div class="absolute bottom-[80px] left-0 w-full bg-appBg/95 backdrop-blur-md border-t border-borderColor z-20" vid="60">
<div class="px-4 py-3" vid="61">
<div class="bg-insetBg rounded-xl border border-borderColor flex items-center p-2 relative overflow-hidden" vid="62">
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#ff5c35 1px, transparent 1px); background-size: 8px 8px;" vid="63"></div>
<button class="w-8 h-8 rounded-full bg-panelBg border border-borderColor flex items-center justify-center text-textMuted hover:text-brandOrange transition-colors z-10" vid="64">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="65"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" vid="66"></path></svg>
</button>
<input type="text" placeholder="메시지를 입력하거나 말하세요..." class="flex-1 bg-transparent border-none text-sm text-textMain px-3 outline-none placeholder:text-textMuted/50 z-10 font-sans" vid="67">
<button class="w-8 h-8 rounded-full bg-brandOrange/20 border border-brandOrange/30 flex items-center justify-center text-brandOrange z-10" vid="68">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="69"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" vid="70"></path></svg>
</button>
</div>
</div>
<div class="px-5 pb-2 flex justify-between items-center" vid="71">
<div class="flex items-center gap-1.5" vid="72">
<div class="w-1.5 h-1.5 rounded-full bg-brandGreen shadow-[0_0_5px_#4ade80]" vid="73"></div>
<span class="text-[8px] font-mono text-textMuted tracking-wider" vid="74">OLLAMA GEMMA4:E4B</span>
</div>
<span class="text-[8px] font-mono text-textMuted tracking-widest opacity-50" vid="75">PRECISION DATA LINK</span>
</div>
</div>
<nav class="absolute bottom-0 left-0 w-full h-[80px] bg-appBg/95 backdrop-blur-md border-t border-borderColor flex justify-around items-center px-2 pb-5 z-30" vid="76">
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="77">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="78">
<rect x="3" y="3" width="7" height="7" rx="1" vid="79"></rect>
<rect x="14" y="3" width="7" height="7" rx="1" vid="80"></rect>
<rect x="14" y="14" width="7" height="7" rx="1" vid="81"></rect>
<rect x="3" y="14" width="7" height="7" rx="1" vid="82"></rect>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="83">DASH</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="84">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="85">
<circle cx="12" cy="12" r="9" vid="86"></circle>
<path d="M12 7v5l3 3" vid="87"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="88">HIST</span>
</button>
<div class="relative -top-5" vid="89">
<button class="w-14 h-14 rounded-full bg-brandOrange flex items-center justify-center shadow-[0_0_20px_rgba(255,92,53,0.4)] border-4 border-appBg group" vid="90">
<svg class="w-6 h-6 text-appBg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" vid="91">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" vid="92"></path>
</svg>
</button>
</div>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="93">
<div class="relative" vid="94">
<svg class="w-6 h-6 text-brandOrange" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="95">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" vid="96"></path>
</svg>
<div class="absolute inset-0 bg-brandOrange blur-[10px] opacity-20 rounded-full" vid="97"></div>
</div>
<span class="text-[9px] font-mono text-brandOrange font-medium" vid="98">TALK</span>
</button>
<button class="flex flex-col items-center justify-center w-14 gap-1.5 group" vid="99">
<svg class="w-6 h-6 text-textMuted group-hover:text-textMain transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" vid="100">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" vid="101"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" vid="102"></path>
</svg>
<span class="text-[9px] font-mono text-textMuted group-hover:text-textMain transition-colors" vid="103">SET</span>
</button>
</nav>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="104"></div>
</div>
</body></html>

150
docs/v3/designs/upgrade.html Normal file
View file

@ -0,0 +1,150 @@
<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">D3RO-VOICE Mobile - Upgrade</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script vid="6">
tailwind.config = {
theme: {
extend: {
colors: {
appBg: '#19191b',
panelBg: '#242427',
insetBg: '#0f0f11',
brandOrange: '#ff5c35',
brandGreen: '#4ade80',
textMuted: '#71717a',
textMain: '#d4d4d8',
borderColor: '#2e2e32'
},
fontFamily: {
sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', "Liberation Mono", "Courier New", 'monospace'],
}
}
}
}
</script>
<style vid="7">
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
</head>
<body class="bg-black min-h-screen flex items-center justify-center p-4" vid="8">
<div class="relative w-[375px] h-[812px] bg-appBg rounded-[40px] shadow-[0_0_50px_rgba(0,0,0,0.5)] overflow-hidden border-[8px] border-[#222] flex flex-col font-sans text-textMain" vid="9">
<div class="h-12 w-full flex justify-between items-end px-6 pb-2 text-[11px] font-medium text-white/90 z-20" vid="10">
<span vid="11">9:41</span>
<div class="flex items-center gap-1.5" vid="12">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="13"><path d="M12 20V10" vid="14"></path><path d="M18 20V4" vid="15"></path><path d="M6 20v-4" vid="16"></path></svg>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" vid="17"><path d="M5 12.55a11 11 0 0 1 14.08 0" vid="18"></path><path d="M1.42 9a16 16 0 0 1 21.16 0" vid="19"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0" vid="20"></path><line x1="12" y1="20" x2="12.01" y2="20" vid="21"></line></svg>
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" vid="22"><path d="M2 12C2 7.02944 6.02944 3 11 3H13C17.9706 3 22 7.02944 22 12C22 16.9706 17.9706 21 13 21H11C6.02944 21 2 16.9706 2 12Z" vid="23"></path></svg>
</div>
</div>
<header class="px-5 py-3 flex justify-between items-center z-10" vid="24">
<div class="flex items-center gap-2" vid="25">
<div class="w-2 h-2 rounded-full bg-brandOrange shadow-[0_0_8px_#ff5c35]" vid="26"></div>
<span class="text-[10px] tracking-[0.2em] font-mono text-textMuted" vid="27">SUBSCRIPTION</span>
</div>
<button class="w-8 h-8 flex items-center justify-center bg-panelBg border border-borderColor rounded-full text-textMuted hover:text-textMain transition-colors" vid="28">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="29"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" vid="30"></path></svg>
</button>
</header>
<main class="flex-1 overflow-y-auto no-scrollbar px-5 pb-24" vid="31">
<div class="text-center mt-4 mb-8" vid="32">
<h1 class="text-2xl font-semibold text-white mb-2 tracking-tight" vid="33">Unlock Full Potential</h1>
<p class="text-xs text-textMuted" vid="34">업그레이드하고 프리미엄 AI 모델을 무제한으로 사용하세요.</p>
</div>
<div class="bg-panelBg border border-borderColor rounded-2xl p-5 mb-4 relative overflow-hidden" vid="35">
<div class="flex justify-between items-start mb-4" vid="36">
<div vid="37">
<span class="text-[10px] font-mono text-textMuted mb-1 block" vid="38">CURRENT PLAN</span>
<h2 class="text-xl font-bold text-white tracking-tight" vid="39">FREE</h2>
</div>
<span class="text-xs font-mono text-textMuted" vid="40">$0 / mo</span>
</div>
<div class="space-y-4" vid="41">
<div class="flex flex-col gap-1.5" vid="42">
<div class="flex justify-between items-center text-xs" vid="43">
<span class="text-textMuted" vid="44">기본 음성 인식</span>
<span class="text-brandOrange font-mono" vid="45">무제한</span>
</div>
</div>
<div class="flex flex-col gap-1.5" vid="46">
<div class="flex justify-between items-center text-xs" vid="47">
<span class="text-textMuted" vid="48">로컬 AI (Gemma)</span>
<span class="text-brandOrange font-mono" vid="49">무제한</span>
</div>
</div>
<div class="flex flex-col gap-1.5 pt-2 border-t border-borderColor" vid="50">
<div class="flex justify-between items-center text-[11px] mb-1" vid="51">
<span class="text-brandGreen font-medium" vid="52">프리미엄 쿼터 (Haiku)</span>
<span class="text-white font-mono" vid="53">250 / 500</span>
</div>
<div class="h-1.5 w-full bg-insetBg rounded-full overflow-hidden" vid="54">
<div class="h-full bg-brandGreen rounded-full" style="width: 50%" vid="55"></div>
</div>
</div>
</div>
</div>
<div class="bg-insetBg border border-brandOrange/30 rounded-2xl p-5 relative overflow-hidden shadow-[inset_0_0_30px_rgba(255,92,53,0.05)]" vid="56">
<div class="absolute top-0 right-0 w-32 h-32 bg-brandOrange/10 blur-[40px] rounded-full -translate-y-1/2 translate-x-1/4" vid="57"></div>
<div class="relative z-10 flex justify-between items-start mb-4" vid="58">
<div vid="59">
<span class="text-[10px] font-mono text-brandOrange mb-1 block" vid="60">UPGRADE PLAN</span>
<h2 class="text-xl font-bold text-white tracking-tight" vid="61">PREMIUM</h2>
</div>
<div class="text-right" vid="62">
<span class="text-lg font-mono text-white" vid="63">$15</span>
<span class="text-[10px] font-mono text-textMuted" vid="64"> / mo</span>
</div>
</div>
<ul class="space-y-3 relative z-10 mb-6" vid="65">
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="66">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="67"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="68"></path></svg>
<span vid="69">Claude 3.5 Sonnet / Opus 무제한 사용</span>
</li>
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="70">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="71"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="72"></path></svg>
<span vid="73">GPT-4o 및 외부 API 연동 완벽 지원</span>
</li>
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="74">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="75"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="76"></path></svg>
<span vid="77">클라우드 세션 동기화 및 무제한 히스토리</span>
</li>
<li class="flex items-start gap-2.5 text-xs text-textMain" vid="78">
<svg class="w-4 h-4 text-brandOrange shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" vid="79"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" vid="80"></path></svg>
<span vid="81">초정밀 오디오 향상 필터 적용</span>
</li>
</ul>
<button class="relative z-10 w-full bg-brandOrange hover:bg-[#ff7554] text-appBg font-bold py-3.5 rounded-xl transition-colors shadow-[0_0_15px_rgba(255,92,53,0.3)]" vid="82">
UPGRADE NOW
</button>
</div>
<div class="mt-6 text-center" vid="83">
<a href="#" class="text-[10px] text-textMuted underline underline-offset-2 hover:text-textMain transition-colors" vid="84">이용 약관 및 환불 정책 보기</a>
</div>
</main>
<div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-[120px] h-1 bg-white/30 rounded-full z-40" vid="85"></div>
</div>
</body></html>