gap-time-rescue-squad/form.html at main · 2026-01-web-client-computing/gap-time-rescue-squad · 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
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>공강구조대 | 공강 추천</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <a href="main.html" class="logo" data-i18n="site_logo">공강구조대</a>

      <ul class="nav-menu">
        <li><a href="main.html" data-i18n="nav_home">홈</a></li>
        <li><a href="team.html" data-i18n="nav_team">팀원 소개</a></li>
        <li><a href="game.html" data-i18n="nav_game">게임</a></li>
        <li><a href="form.html" class="active" data-i18n="nav_form">공강 추천</a></li>
      </ul>

      <select id="lang-selector" class="language-selector" aria-label="Language selector">
        <option value="ko">한국어</option>
        <option value="en">English</option>
        <option value="zh">中文</option>
        <option value="ja">日本語</option>
        <option value="de">Deutsch</option>
        <option value="fr">Français</option>
        <option value="ru">Русский</option>
      </select>
    </nav>
  </header>

  <main>
    <section class="page-hero">
      <p class="eyebrow" data-i18n="form_eyebrow">FREE PERIOD RESCUE</p>
      <h1 data-i18n-html="form_hero_title">공강 시간,<br>어디서 보낼까?</h1>
      <p data-i18n="form_hero_desc">
        공강 시간, 원하는 활동, 현재 위치를 입력하면
        지금 상황에 어울리는 학교 시설을 추천해드립니다.
      </p>
    </section>

    <section class="section form-section">
      <div class="section-title">
        <p class="eyebrow" data-i18n="form_section_eyebrow">RECOMMENDATION</p>
        <h2 data-i18n="form_section_title">공강 추천 받기</h2>
        <p data-i18n="form_section_desc">아래 정보를 선택하면 맞춤 장소를 확인할 수 있습니다.</p>
      </div>

      <div class="recommend-layout">
        <form id="recommendForm" class="recommend-form">
          <div class="form-group">
            <label for="time" data-i18n="label_time">공강 시간</label>
            <select id="time" required>
              <option value="" data-i18n="option_select">선택하세요</option>
              <option value="short" data-i18n="time_short">30분 이하</option>
              <option value="middle" data-i18n="time_middle">1시간 정도</option>
              <option value="long" data-i18n="time_long">2시간 이상</option>
            </select>
          </div>

          <div class="form-group">
            <label for="activity" data-i18n="label_activity">하고 싶은 활동</label>
            <select id="activity" required>
              <option value="" data-i18n="option_select">선택하세요</option>
              <option value="rest" data-i18n="activity_rest">쉬기</option>
              <option value="study" data-i18n="activity_study">공부하기</option>
              <option value="meal" data-i18n="activity_meal">밥 먹기</option>
              <option value="cafe" data-i18n="activity_cafe">카페 가기</option>
              <option value="walk" data-i18n="activity_walk">산책하기</option>
            </select>
          </div>

          <div class="form-group">
            <label for="location" data-i18n="label_location">현재 위치</label>
            <select id="location" required>
              <option value="" data-i18n="option_select">선택하세요</option>
              <option value="종합복지관" data-i18n="building_welfare_full">종합복지관</option>
              <option value="복지관" data-i18n="building_welfare">복지관</option>
              <option value="공학관" data-i18n="building_engineering">공학관</option>
              <option value="과학관" data-i18n="building_science">과학관</option>
              <option value="법학관" data-i18n="building_law">법학관</option>
              <option value="북악관" data-i18n="building_bugak">북악관</option>
              <option value="생활관" data-i18n="building_dormitory">생활관</option>
              <option value="예술관" data-i18n="building_arts">예술관</option>
              <option value="성곡도서관" data-i18n="building_library">성곡도서관</option>
              <option value="경상관" data-i18n="building_economics">경상관</option>
              <option value="경영관" data-i18n="building_business">경영관</option>
              <option value="조형관" data-i18n="building_design">조형관</option>
              <option value="미래관" data-i18n="building_mirae">미래관</option>
              <option value="콘서트홀" data-i18n="building_concert">콘서트홀</option>
            </select>
          </div>

          <button type="submit" class="recommend-button" data-i18n="submit_button">
            추천 받기
          </button>
        </form>

        <div class="result-panel">
          <p class="result-label" data-i18n="result_label">추천 결과</p>
          <div id="resultBox" class="result-box empty" data-i18n="result_empty">
            조건을 선택하고 추천 받기 버튼을 눌러주세요.
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>© 2026 공강구조대 | 공강 시간, 어디서 보낼까?</p>
  </footer>

  <script src="assets/js/data.js"></script>
  <script src="assets/js/page-i18n.js"></script>
  <script src="assets/js/form.js"></script>
</body>
</html>