-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjoin.html
More file actions
136 lines (116 loc) · 6.75 KB
/
Copy pathjoin.html
File metadata and controls
136 lines (116 loc) · 6.75 KB
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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="join.title">참여하기 - KPN</title>
<meta name="description" content="Korea Preppers Network에 참여하여 생존 커뮤니티의 일원이 되세요.">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<!-- 언어 전환 버튼 -->
<div id="lang-switcher">
<button id="lang-btn" aria-label="Language Switcher">
<span class="lang-icon">🌐</span>
<span class="lang-code">KO</span>
</button>
</div>
<!-- 네비게이션 -->
<nav>
<div class="container">
<div class="logo" data-i18n="common.logo">KPN</div>
<ul>
<li><a href="index.html" data-i18n="nav.home">Home</a></li>
<li><a href="knowledge.html" data-i18n="nav.knowledge">Knowledge</a></li>
<li><a href="scenario.html" data-i18n="nav.scenarios">Scenarios</a></li>
<li><a href="simulation.html" data-i18n="nav.simulation">Simulation</a></li>
<li><a href="community.html" data-i18n="nav.community">Community</a></li>
<li><a href="join.html" data-i18n="nav.join">Join</a></li>
<li><a href="about.html" data-i18n="nav.about">About</a></li>
</ul>
</div>
</nav>
<!-- 환영 메시지 -->
<div id="welcome" class="container welcome" style="display: none;"></div>
<!-- 메인 컨텐츠 -->
<main>
<section class="hero">
<div class="container">
<h1 data-i18n="join.hero_title">함께 준비합시다</h1>
<p><span data-i18n="join.hero_subtitle">Korea Preppers Network에 참여하여 생존 지식을 공유하고,</span><br><span data-i18n="join.hero_subtitle2">위기에 대비하는 공동체를 만들어가세요.</span></p>
</div>
</section>
<!-- 참여 안내 -->
<section>
<div class="container" style="max-width: 640px; margin: 0 auto;">
<h2 style="text-align: center;" data-i18n="join.why_title">왜 참여해야 하나요?</h2>
<div class="card" style="margin-bottom: 1.5rem;">
<h3 data-i18n="join.benefit1_title">📚 체계적인 지식 공유</h3>
<p data-i18n="join.benefit1_content">생존에 필요한 모든 지식을 카테고리별로 정리하여 제공합니다.</p>
</div>
<div class="card" style="margin-bottom: 1.5rem;">
<h3 data-i18n="join.benefit2_title">🤝 신뢰할 수 있는 커뮤니티</h3>
<p data-i18n="join.benefit2_content">같은 목표를 가진 사람들과 경험과 인사이트를 나눌 수 있습니다.</p>
</div>
<div class="card" style="margin-bottom: 1.5rem;">
<h3 data-i18n="join.benefit3_title">🔔 중요 업데이트 알림</h3>
<p data-i18n="join.benefit3_content">재난 대비 관련 중요 정보와 커뮤니티 소식을 이메일로 받아보세요.</p>
</div>
<div class="card" style="margin-bottom: 1.5rem;">
<h3 data-i18n="join.benefit4_title">🌍 함께 만드는 안전망</h3>
<p data-i18n="join.benefit4_content">개인의 준비를 넘어, 공동체 차원의 생존 네트워크를 구축합니다.</p>
</div>
<div class="card" style="background: var(--line); border: 1px solid var(--accent);">
<h3 data-i18n="join.benefit_slack_title">💬 Slack 커뮤니티</h3>
<p data-i18n="join.benefit_slack_content">참여 신청 후 이메일로 Slack 초대장을 받게 됩니다. Slack은 KPN의 주요 소통 채널로, 실시간 토론과 정보 공유가 이루어집니다.</p>
</div>
</div>
</section>
<!-- 참여 신청 폼 -->
<section>
<div class="container">
<h2 style="text-align: center;" data-i18n="join.form_title">참여 신청하기</h2>
<p style="text-align: center; margin-bottom: 2rem; color: var(--subtle);" data-i18n="join.form_subtitle">
간단한 정보만 입력하시면 됩니다. 개인정보는 안전하게 보호됩니다.
</p>
<form id="join-form">
<label for="nickname" data-i18n="join.form_nickname_label">닉네임 *</label>
<input type="text" id="nickname" name="nickname" data-i18n-placeholder="join.form_nickname_placeholder" placeholder="커뮤니티에서 사용할 닉네임" required>
<label for="email" data-i18n="join.form_email_label">이메일 *</label>
<input type="email" id="email" name="email" data-i18n-placeholder="join.form_email_placeholder" placeholder="your@email.com" required>
<label for="region" data-i18n="join.form_region_label">지역 (선택)</label>
<input type="text" id="region" name="region" data-i18n-placeholder="join.form_region_placeholder" placeholder="예: 서울, 부산, 대구 등">
<label for="interests" data-i18n="join.form_interests_label">관심 분야 (선택)</label>
<textarea id="interests" name="interests" data-i18n-placeholder="join.form_interests_placeholder" placeholder="어떤 생존 분야에 관심이 있으신가요? (예: 식량 비축, 의료, 에너지 등)"></textarea>
<button type="submit" data-i18n="join.form_submit_button">참여하기</button>
</form>
<div id="form-message" style="text-align: center; margin-top: 1rem; font-weight: 500;"></div>
</div>
</section>
<!-- 개인정보 안내 -->
<section>
<div class="container" style="max-width: 640px; margin: 0 auto;">
<div class="card" style="background: var(--line); border: none;">
<h4 style="color: var(--accent); margin-bottom: 0.5rem;" data-i18n="join.privacy_title">개인정보 처리 방침</h4>
<small style="display: block; line-height: 1.8;">
- <span data-i18n="join.privacy_item1">수집된 정보는 커뮤니티 운영 및 소식 전달 목적으로만 사용됩니다.</span><br>
- <span data-i18n="join.privacy_item2">제3자에게 제공되지 않으며, 본인 요청 시 언제든 삭제 가능합니다.</span><br>
- <span data-i18n="join.privacy_item3">Google Sheets를 통해 안전하게 관리됩니다.</span><br>
- <span data-i18n="join.privacy_item4">이메일 수신을 원치 않으시면 언제든 구독 취소 가능합니다.</span>
</small>
</div>
</div>
</section>
</main>
<!-- 푸터 -->
<footer>
<div class="container">
<p><span data-i18n="common.footer_copyright">© 2025 Korea Preppers Network.</span> <span data-i18n="common.footer_text">질서 속의 긴장, 단순함 속의 지성.</span></p>
</div>
</footer>
<script src="assets/script.js"></script>
<script src="data/submit.js"></script>
<script src="assets/i18n.js"></script>
</body>
</html>