yunchan/d3ro-voice
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions
d3ro-voice/docs/v3/designs/dashboard.html
윤찬 211673bc6c feat(mobile): Phase M-1 모바일 프로젝트 기반 + V3 마스터 플랜 
- 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 시뮬레이터 검증 완료
2026-04-13 03:22:15 +09:00

274 lines
No EOL
17 KiB
HTML
Raw Blame History

<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>
Reference in a new issue View git blame Copy permalink