KDN/index.html at main · Aliasss/KDN · 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
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-i18n="home.title">KPN - Korea Preppers Network</title>
  <meta name="description" content="생존은 지식과 공동체에서 시작됩니다. 재난과 위기에 대비하는 지성형 생존 네트워크.">
  <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><span data-i18n="home.hero_title">생존은 지식과 공동체에서</span><br><span data-i18n="home.hero_title_br">시작된다</span></h1>
        <p data-i18n="home.hero_subtitle">재난·위기·사회 붕괴 상황에서 살아남기 위한 지성형 생존 네트워크</p>
        <a href="join.html" class="btn" data-i18n="home.hero_cta">지금 참여하기</a>
      </div>
    </section>

    <!-- 소개 섹션 -->
    <section>
      <div class="container">
        <h2 data-i18n="home.why_title">왜 준비해야 하는가</h2>
        <p data-i18n="home.why_content">재난은 예고 없이 찾아옵니다. 지진, 팬데믹, 정전, 경제 붕괴—이 모든 상황에서 우리는 혼자가 아닙니다.
        Korea Preppers Network는 생존 지식을 공유하고, 현실적인 대비 전략을 함께 만들어가는 공간입니다.</p>
      </div>
    </section>

    <!-- 주요 섹션 링크 -->
    <section>
      <div class="container">
        <h2 data-i18n="home.sections_title">주요 섹션</h2>
        <div class="grid grid-2">
          <div class="card">
            <h3 data-i18n="home.knowledge_card_title">생존 지식 아카이브</h3>
            <p data-i18n="home.knowledge_card_content">식량, 물, 에너지, 의료, 통신—생존에 필요한 모든 지식을 체계적으로 정리했습니다.</p>
            <a href="knowledge.html" class="btn" data-i18n="home.knowledge_card_cta">지식 탐색하기</a>
          </div>

          <div class="card">
            <h3 data-i18n="home.scenarios_card_title">재난별 시나리오</h3>
            <p data-i18n="home.scenarios_card_content">구체적인 재난 상황별 대응 시나리오와 행동 지침을 제공합니다.</p>
            <a href="scenario.html" class="btn" data-i18n="home.scenarios_card_cta">시나리오 보기</a>
          </div>

          <div class="card">
            <h3 data-i18n="home.community_card_title">커뮤니티</h3>
            <p data-i18n="home.community_card_content">생존에 대한 인사이트를 공유하고, 다른 준비자들과 소통하세요.</p>
            <a href="community.html" class="btn" data-i18n="home.community_card_cta">참여하기</a>
          </div>

          <div class="card">
            <h3 data-i18n="home.about_card_title">비전과 철학</h3>
            <p data-i18n="home.about_card_content">KPN이 추구하는 가치와 우리가 함께 만들어갈 미래에 대해 알아보세요.</p>
            <a href="about.html" class="btn" data-i18n="home.about_card_cta">더 알아보기</a>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA 섹션 -->
    <section>
      <div class="container" style="text-align: center;">
        <h2 data-i18n="home.cta_title">함께 준비하시겠습니까?</h2>
        <p><span data-i18n="home.cta_content">Korea Preppers Network에 참여하여 생존 지식을 공유하고,</span><br><span data-i18n="home.cta_content_br">위기에 대비하는 공동체를 함께 만들어가세요.</span></p>
        <a href="join.html" class="btn" data-i18n="home.cta_button">참여 신청하기</a>
      </div>
    </section>
  </main>

  <!-- 푸터 -->
  <footer>
    <div class="container">
      <p><span data-i18n="common.footer_copyright">&copy; 2025 Korea Preppers Network.</span> <span data-i18n="common.footer_text">질서 속의 긴장, 단순함 속의 지성.</span></p>
    </div>
  </footer>

  <script src="assets/script.js"></script>
  <script src="assets/i18n.js"></script>
</body>
</html>