JinsCaffe/index.html at main · wafflecomm/JinsCaffe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JIN'S CAFFE | 1인 드립커피 전문점</title>
    <meta name="description" content="아메리카노에서는 느낄 수 없는 드립커피만의 깨끗한 맛과 풍부한 향. 진스카페에서 경험하세요.">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header (Desktop) & Bottom Nav (Mobile) -->
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="logo">JIN'S CAFFE</a>
            <ul class="nav-links">
                <li><a href="#brand" class="nav-item"><i class="fa-solid fa-house"></i><span>Brand</span></a></li>
                <li><a href="#coffee" class="nav-item"><i class="fa-solid fa-mug-hot"></i><span>Coffee</span></a></li>
                <li><a href="#guide" class="nav-item"><i class="fa-solid fa-book-open"></i><span>Guide</span></a></li>
                <li><a href="#shop" class="nav-item"><i class="fa-solid fa-cart-shopping"></i><span>Shop</span></a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <header class="hero" id="home">
        <div class="hero-overlay"></div>
        <div class="hero-content fade-in">
            <h1>단 한 사람을 위한,<br>온전한 기다림</h1>
            <p>18년의 노하우가 담긴 한 잔의 드립커피</p>
            <a href="#brand" class="btn btn-primary">브랜드 스토리 보기</a>
        </div>
    </header>

    <main>
        <!-- Brand Story Section -->
        <section id="brand" class="section fade-in">
            <div class="container">
                <h2 class="section-title">Our Story</h2>
                <div class="split-layout">
                    <div class="text-content">
                        <h3>아메리카노와는 다른,<br>드립커피만의 '클린 컵'</h3>
                        <p>우리는 왜 드립커피를 고집할까요? 에스프레소 머신의 강한 압력으로 뽑아낸 아메리카노와 달리, 종이 필터를 거쳐 천천히 떨어지는 드립커피는 불필요한 미분과 오일을 걸러내어 <strong>커피 본연의 깨끗한 맛(Clean Cup)</strong>과 <strong>풍부한 향</strong>만을 남깁니다.</p>
                        <p>1인 카페로 운영되는 JIN'S CAFFE는, 골든 타임 2분 30초 동안 오직 당신 한 분만을 위해 온 정성을 쏟아 붓습니다.</p>
                    </div>
                    <div class="image-content">
                        <img src="https://images.unsplash.com/photo-1497935586351-b67a49e012bf?q=80&w=1600&auto=format&fit=crop" alt="Pour over coffee brewing">
                    </div>
                </div>
            </div>
        </section>

        <!-- Coffee Guide Section -->
        <section id="guide" class="section bg-secondary fade-in">
            <div class="container">
                <h2 class="section-title">Coffee Guide</h2>
                <p class="section-subtitle">홈카페 초보자를 위한 바리스타의 시크릿 노트</p>

                <div class="guide-grid">
                    <!-- Dripper Comparison -->
                    <div class="card">
                        <div class="card-icon"><i class="fa-solid fa-filter"></i></div>
                        <h3>칼리타 vs 하리오</h3>
                        <div class="dripper-desc">
                            <p><strong>칼리타(Kalita):</strong> 물이 머무는 시간이 길어 성분이 진하게 우러나옵니다. <em>안정적이고 묵직한 바디감</em>을 위해 중/강배전 원두에 추천합니다.</p>
                            <p><strong>하리오(Hario):</strong> 물 빠짐이 빨라 깔끔한 추출이 가능합니다. 특유의 <em>화사한 산미와 향긋함</em>을 살리고 싶은 약배전 원두에 적합합니다.</p>
                        </div>
                    </div>

                    <!-- Extraction Tips -->
                    <div class="card">
                        <div class="card-icon"><i class="fa-solid fa-temperature-half"></i></div>
                        <h3>온도와 분쇄도</h3>
                        <div class="dripper-desc">
                            <p><strong>분쇄도:</strong> <em>"굵은 소금보다 작고, 설탕보다 굵게!"</em> 너무 가늘면 쓴맛이 나고 굵으면 맹맹해집니다.</p>
                            <p><strong>물 온도:</strong> 산미를 살리는 약배전은 <em>95~100도</em>, 고소함을 살리고 쓴맛을 잡는 강배전은 <em>80~90도</em>가 적당합니다.</p>
                        </div>
                    </div>

                    <!-- Pouring Tips -->
                    <div class="card">
                        <div class="card-icon"><i class="fa-solid fa-droplet"></i></div>
                        <h3>푸어링(Pouring) 팁</h3>
                        <div class="dripper-desc">
                            <p><strong>팔꿈치 밀착:</strong> 주전자를 든 팔꿈치를 옆구리에 단단히 붙여 몸 전체로 미세하게 물줄기를 컨트롤하세요.</p>
                            <p><strong>센터 푸어:</strong> 원을 넓게 그리지 말고 중앙에 500원 동전 크기로만 집중해서 물을 부어보세요. 단맛이 살아납니다.</p>
                        </div>
                    </div>
                </div>

                <!-- Interactive Quiz -->
                <div class="quiz-container mt-4">
                    <h3>나에게 맞는 드리퍼 찾기 ☕</h3>
                    <p>평소 어떤 커피의 맛을 더 선호하시나요?</p>
                    <div class="quiz-buttons">
                        <button class="btn btn-outline" onclick="showQuizResult('kalita')">묵직하고 고소한, 다크 초콜릿 같은 바디감</button>
                        <button class="btn btn-outline" onclick="showQuizResult('hario')">화사한 꽃향기, 상큼한 과일 같은 산미</button>
                    </div>
                    <div id="quiz-result" class="quiz-result hidden">
                        <!-- Result injected by JS -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Shop Section -->
        <section id="shop" class="section fade-in">
            <div class="container">
                <h2 class="section-title">Beans Shop</h2>
                <div class="shop-grid">
                    <div class="product-card">
                        <img src="https://images.unsplash.com/photo-1559525839-b184a4d698c7?q=80&w=800&auto=format&fit=crop" alt="Ethiopia Yirgacheffe">
                        <h4>에티오피아 예가체프 G1</h4>
                        <p class="tasting-note">Tasting Note: 자스민, 복숭아, 베르가못</p>
                        <p class="price">18,000원 (200g)</p>
                        <button class="btn btn-primary sm">구매하기</button>
                    </div>
                    <div class="product-card">
                        <img src="https://images.unsplash.com/photo-1587734195503-904fca47e0e9?q=80&w=800&auto=format&fit=crop" alt="Guatemala Antigua">
                        <h4>과테말라 안티구아 SHB</h4>
                        <p class="tasting-note">Tasting Note: 다크 초콜릿, 구운 아몬드, 스모키</p>
                        <p class="price">16,000원 (200g)</p>
                        <button class="btn btn-primary sm">구매하기</button>
                    </div>
                </div>
                <!-- Reservation Section -->
                <div class="reserve-banner mt-4">
                    <h3>오프라인 매장 방문 예약</h3>
                    <p>홈페이지를 통해 예약하고 방문하시면, 다음 번 홈카페에서 즐기실 수 있는 '이달의 추천 원두 샘플(20g)'과 전문가의 '테이스팅 노트 엽서'를 선물로 드립니다.</p>
                    <a href="#" class="btn btn-secondary" onclick="openReservationModal(event)">예약하기</a>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container text-center">
            <p>JIN'S CAFFE | 1인 드립커피 전문점</p>
            <p class="footer-sub">지퍼백 보관은 그만! 신선한 커피 라이프를 위해 소량 구매를 권장합니다.</p>
            <p class="copyright">© 2026 JIN'S CAFFE. All rights reserved.</p>
        </div>
    </footer>

    <!-- Reservation Modal -->
    <div id="reservation-modal" class="modal hidden">
        <div class="modal-content fade-in">
            <span class="close-btn" onclick="closeReservationModal()">&times;</span>
            <h2>매장 방문 예약</h2>
            <p class="modal-subtitle">홈카페 샘플 원두(20g)와 테이스팅 노트 혜택을 받으세요.</p>
            <form id="reservation-form" onsubmit="submitReservation(event)">
                <div class="form-group">
                    <label for="res-name">예약자 성함</label>
                    <input type="text" id="res-name" required placeholder="예: 홍길동">
                </div>
                <div class="form-group">
                    <label for="res-date">방문 일자</label>
                    <input type="date" id="res-date" required>
                </div>
                <div class="form-group">
                    <label for="res-time">방문 시간</label>
                    <select id="res-time" required>
                        <option value="">시간 선택</option>
                        <option value="10:00">10:00 AM</option>
                        <option value="12:00">12:00 PM</option>
                        <option value="14:00">02:00 PM</option>
                        <option value="16:00">04:00 PM</option>
                        <option value="18:00">06:00 PM</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="res-people">방문 인원</label>
                    <input type="number" id="res-people" min="1" max="4" required placeholder="최대 4명">
                </div>
                <button type="submit" class="btn btn-primary w-100 mt-2">예약 완료하기</button>
            </form>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>