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 시뮬레이터 검증 완료
93 lines
No EOL
8.5 KiB
HTML
93 lines
No EOL
8.5 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 - 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> |