rupy1014
e9b0c00be7
- Remove old commands: spec, customer, sales, merge, design - Add new commands: ui, policy, visualize - Update mvp to include landing page generation - Add templates for mockup, policy, and UI documents - Simplify output path (remove [project] subfolder) - Rewrite README focused on usage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
194 lines
6.4 KiB
HTML
194 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>[화면명] - [서비스명]</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Header -->
|
|
<!-- ============================================ -->
|
|
<header class="header" id="[screen]-header">
|
|
<div class="header-left">
|
|
<!-- 로고 또는 뒤로가기 -->
|
|
<span class="logo">[서비스명]</span>
|
|
<!-- <button class="btn-back" onclick="history.back()">←</button> -->
|
|
</div>
|
|
<div class="header-center">
|
|
<!-- 타이틀 (선택적) -->
|
|
</div>
|
|
<div class="header-right">
|
|
<!-- [MN-001] 상태 표시 -->
|
|
<div class="status-badge">
|
|
<span>💬</span>
|
|
<span id="token-count">127</span>
|
|
</div>
|
|
<button class="btn-icon" onclick="location.href='settings.html'">⚙️</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Main Content -->
|
|
<!-- ============================================ -->
|
|
<main class="content" id="[screen]-content">
|
|
|
|
<!-- 섹션 예시 -->
|
|
<section class="section">
|
|
<h2 class="section-title">[섹션 제목]</h2>
|
|
|
|
<!-- 카드 예시 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span class="card-title">[카드 제목]</span>
|
|
<span class="card-badge">[뱃지]</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>[카드 내용]</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="btn btn-secondary">[버튼1]</button>
|
|
<button class="btn btn-primary">[버튼2]</button>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<!-- 리스트 예시 -->
|
|
<section class="section">
|
|
<div class="list">
|
|
<div class="list-item" onclick="location.href='[상세].html'">
|
|
<div class="list-item-avatar">
|
|
<img src="https://via.placeholder.com/48" alt="">
|
|
</div>
|
|
<div class="list-item-content">
|
|
<div class="list-item-title">[아이템 제목]</div>
|
|
<div class="list-item-subtitle">[부제목/설명]</div>
|
|
</div>
|
|
<div class="list-item-meta">
|
|
<span class="time">2분 전</span>
|
|
<span class="badge">3</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 메인 액션 버튼 (센터 탭용) -->
|
|
<!--
|
|
<div class="main-action">
|
|
<button class="btn btn-large btn-primary pulse" onclick="showModal('modal-action')">
|
|
▶ [메인 액션]
|
|
</button>
|
|
</div>
|
|
-->
|
|
|
|
</main>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Tab Bar -->
|
|
<!-- ============================================ -->
|
|
<nav class="tab-bar">
|
|
<a href="[tab1].html" class="tab-item">
|
|
<span class="tab-icon">[아이콘1]</span>
|
|
<span class="tab-label">[탭1]</span>
|
|
<span class="tab-badge" style="display:none;">0</span>
|
|
</a>
|
|
<a href="[tab2].html" class="tab-item">
|
|
<span class="tab-icon">[아이콘2]</span>
|
|
<span class="tab-label">[탭2]</span>
|
|
<span class="tab-badge">3</span>
|
|
</a>
|
|
<a href="[tab3].html" class="tab-item center active">
|
|
<span class="tab-icon">[센터아이콘]</span>
|
|
<span class="tab-label">[탭3]</span>
|
|
</a>
|
|
<a href="[tab4].html" class="tab-item">
|
|
<span class="tab-icon">[아이콘4]</span>
|
|
<span class="tab-label">[탭4]</span>
|
|
</a>
|
|
<a href="[tab5].html" class="tab-item">
|
|
<span class="tab-icon">[아이콘5]</span>
|
|
<span class="tab-label">[탭5]</span>
|
|
</a>
|
|
</nav>
|
|
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Overlay (for modals/sheets) -->
|
|
<!-- ============================================ -->
|
|
<div class="overlay" id="overlay" onclick="closeAll()"></div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Modal Example -->
|
|
<!-- ============================================ -->
|
|
<div class="modal" id="modal-example">
|
|
<div class="modal-icon">🎉</div>
|
|
<h3 class="modal-title">[모달 제목]</h3>
|
|
<p class="modal-message">[모달 메시지]</p>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary" onclick="closeAll()">취소</button>
|
|
<button class="btn btn-primary" onclick="handleConfirm()">확인</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Bottom Sheet Example -->
|
|
<!-- ============================================ -->
|
|
<div class="bottom-sheet" id="bs-example">
|
|
<div class="bs-handle"></div>
|
|
<div class="bs-header">
|
|
<h3>[바텀시트 제목]</h3>
|
|
<button class="btn-close" onclick="closeAll()">✕</button>
|
|
</div>
|
|
<div class="bs-content">
|
|
<div class="bs-option" onclick="selectOption(1)">
|
|
<span class="bs-option-icon">📝</span>
|
|
<span class="bs-option-label">[옵션 1]</span>
|
|
</div>
|
|
<div class="bs-option" onclick="selectOption(2)">
|
|
<span class="bs-option-icon">🗑️</span>
|
|
<span class="bs-option-label">[옵션 2]</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Toast -->
|
|
<!-- ============================================ -->
|
|
<div class="toast" id="toast">[토스트 메시지]</div>
|
|
|
|
<!-- ============================================ -->
|
|
<!-- Scripts -->
|
|
<!-- ============================================ -->
|
|
<script src="scripts.js"></script>
|
|
<script>
|
|
// ============================================
|
|
// Page-specific Scripts
|
|
// ============================================
|
|
|
|
function handleConfirm() {
|
|
// 확인 버튼 처리
|
|
closeAll();
|
|
showToast('완료되었습니다!');
|
|
}
|
|
|
|
function selectOption(option) {
|
|
// 옵션 선택 처리
|
|
closeAll();
|
|
showToast(`옵션 ${option} 선택됨`);
|
|
}
|
|
|
|
// 페이지 로드 시 실행
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 초기화 코드
|
|
console.log('[screen] loaded');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|