FE-BASE/reco.html at main · 23MinL/FE-BASE · 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./script.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
    <!-- favicon -->
    <link rel="icon" type="image/png" href="./asset/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="./asset/favicon/favicon.svg" />
    <link rel="shortcut icon" href="./asset/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="./asset/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="./asset/favicon/site.webmanifest" />
    <!-- og tag -->
    <meta property="og:title" content="PETTY - 반려동물과 함께 떠나는 완벽한 여행" />
    <meta property="og:description" content="우리 아이(🐶🐱)와 여행을 떠나고 싶다면? PETTY가 최적의 숙소, 관광지, 음식점을 추천해 줄게요! 🐾" />
    <meta property="og:image" content="https://github.com/user-attachments/assets/42edc0f5-5e02-4709-97c5-3009ed6cdeb2" />
    <!-- <link rel="stylesheet" href="./style.css" /> -->

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Bootstrap Icons CSS -->

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=865dae18d063c5a6964dc558dec6e8a1&libraries=services"></script>

    <title>PETTY | 반려동물과 함께 떠나는 완벽한 여행</title>

    <link rel="stylesheet" href="./common.css" />
    <link rel="stylesheet" href="./reco.css" />
  </head>
  <!-- ====== body ======= -->
  <body>
    <!-- nav bar - js -->
    <section>
      <div id="navbar"></div>
    </section>

    <section class="container mt-4">
      <img src="./asset/008.png" class="img-fluid" />
    </section>
    <section class="container mt-4 sect-body" id="sect-bd">
      <!-- <div id="chat-messages"> -->
      <div class="form-wrapper">
        <h2 class="mb-4">반려동물 정보 입력</h2>

        <form id="petForm">
          <!-- 🟢 1, 2. 이름 & 종 (가로 정렬) -->
          <div class="input-group">
            <div class="mb-3">
              <label class="form-label">이름</label>
              <input type="text" class="form-control" id="petName" required />
            </div>
            <div class="mb-3">
              <label class="form-label">종</label>
              <input type="text" class="form-control" id="petSpecies" required />
            </div>
          </div>

          <!-- 🟢 3. 동물 크기 (드롭다운 버튼) -->
          <div class="mb-3">
            <label class="form-label">동물 크기</label>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle w-100" type="button" id="petSizeBtn" data-bs-toggle="dropdown">선택</button>
              <ul class="dropdown-menu w-100" id="petSizeMenu">
                <li>
                  <label><input type="radio" name="petSize" value="4kg 이하" /> 4kg 이하</label>
                </li>
                <li>
                  <label><input type="radio" name="petSize" value="4~8kg 이하" /> 4~8kg 이하</label>
                </li>
                <li>
                  <label><input type="radio" name="petSize" value="8~12kg 이하" /> 8~12kg 이하</label>
                </li>
                <li>
                  <label><input type="radio" name="petSize" value="12~20kg 이하" /> 12~20kg 이하</label>
                </li>
                <li>
                  <label><input type="radio" name="petSize" value="20kg 이상" /> 20kg 이상</label>
                </li>
              </ul>
            </div>
          </div>

          <!-- 🟢 4. 맹수 여부 (드롭다운 버튼) -->
          <div class="mb-3">
            <label class="form-label">맹수 여부</label>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle w-100" type="button" id="isPredatorBtn" data-bs-toggle="dropdown">선택</button>
              <ul class="dropdown-menu w-100" id="isPredatorMenu">
                <li>
                  <label><input type="radio" name="isPredator" value="예" /> 예</label>
                </li>
                <li>
                  <label><input type="radio" name="isPredator" value="아니오" /> 아니오</label>
                </li>
              </ul>
            </div>
          </div>

          <!-- <div class="mb-3">
            <label class="form-label">위치</label>
            <div class="d-flex">
              <input
                type="text"
                class="form-control me-2"
                id="locationInput"
                placeholder="위치 선택"
                readonly
              />
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-toggle="modal"
                data-bs-target="#mapModal"
              >
                선택
              </button>
            </div>
          </div> -->

          <!-- 🟢 제출 버튼 -->
          <!-- <button type="submit" class="btn btn-primary mt-3">정보 찾기</button> -->

          <!-- 🟢 5. 공공장소 동행 가능 여부 (드롭다운 버튼) -->
          <div class="mb-3">
            <label class="form-label">공공장소 동행 가능 여부</label>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle w-100" type="button" id="publicAccessBtn" data-bs-toggle="dropdown">선택</button>
              <ul class="dropdown-menu w-100" id="publicAccessMenu">
                <li>
                  <label><input type="radio" name="publicAccess" value="가능" /> 가능</label>
                </li>
                <li>
                  <label><input type="radio" name="publicAccess" value="입마개 후 가능" /> 입마개 후 가능</label>
                </li>
                <li>
                  <label><input type="radio" name="publicAccess" value="불가능" /> 불가능</label>
                </li>
              </ul>
            </div>
          </div>

          <!-- 🟢 6. 숙소 / 관광 타입 선택 (드롭다운 버튼) -->
          <div class="mb-3">
            <label class="form-label">숙소 / 관광 타입</label>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle w-100" type="button" id="tourTypeBtn" data-bs-toggle="dropdown">선택</button>
              <ul class="dropdown-menu w-100" id="tourTypeMenu">
                <li>
                  <label><input type="radio" name="tourType" value="12" /> 관광지</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="14" /> 문화시설</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="15" /> 축제공연행사</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="25" /> 여행코스</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="28" /> 레포츠</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="32" /> 숙박</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="38" /> 쇼핑</label>
                </li>
                <li>
                  <label><input type="radio" name="tourType" value="39" /> 음식점</label>
                </li>
              </ul>
            </div>
          </div>

          <div class="mb-3">
            <label class="form-label">위치</label>
            <div class="d-flex">
              <input type="text" class="form-control me-2" id="locationInput" placeholder="위치 정보" readonly />
              <button type="button" class="btn btn-secondary text-nowrap" data-bs-toggle="modal" data-bs-target="#mapModal">위치 선택</button>
            </div>
          </div>

          <!-- 🟢 제출 버튼 -->
          <button type="submit" class="btn btn-primary mt-3" id="fetchButton">정보 찾기</button>
        </form>
      </div>
    </section>
    <!-- 🟢 카카오맵 모달 -->
    <div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="mapModalLabel">위치 선택</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="d-flex">
              <input type="text" class="form-control me-2" id="keywordInput" placeholder="위치 정보 입력" />
              <button type="button" class="btn btn-secondary text-nowrap" id="searchButton">위치 검색</button>
            </div>
            <div id="map" class="map-container"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="confirmLocation">선택 완료</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 결과 상자 -->
    <div class="resultbox">
      <!-- 스피너 상자 -->
      <div id="spinner"></div>
      <!-- 결과 상자 -->
      <div id="result"></div>
    </div>

    <!-- nav bar - js -->
    <div id="footer"></div>

    <script type="module" src="app.js"></script>
    <script src="./script.js"></script>
    <script src="./reco.js"></script>
    <script src="./main.js"></script>
    <script src="./post.js"></script>

    <!-- Bootstrap JS (Optional, for features like dropdowns) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>