211673bc6c
- 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 시뮬레이터 검증 완료
178 lines
No EOL
12 KiB
HTML
178 lines
No EOL
12 KiB
HTML
<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">
|
|
> initializing voice recording protocol...<br vid="49">
|
|
> establishing local AI link...<br vid="50">
|
|
> 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> |