FE-BASE/vision.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
<!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/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Bootstrap Icons CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
    <title>PETTY | 반려동물과 함께 떠나는 완벽한 여행</title>
    <link rel="stylesheet" href="common.css" />
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="vision.css" />
  </head>
  <!-- ====== body ======= -->
  <body>
    <!-- nav bar - js -->
    <div id="navbar"></div>
    <section class="main">
      <div class="container mt-4">
        <img src="./asset/007.png" class="img-fluid" />
      </div>
      <section class="container section-body">
        <div class="container mt-5">
          <div class="row justify-content-center result">
            <div class="col-md-6">
              <div class="card shadow-lg">
                <div class="card-body" id="formContainer">
                  <h3 class="text-center mb-4">반려 동물 정보를 입력하세요</h3>

                  <form id="controller">
                    <!-- 이미지 업로드 -->

                    <div class="mb-3">
                      <label for="petName" class="form-label"
                        >반려동물 이름</label
                      >
                      <input
                        type="text"
                        class="form-control"
                        id="petName"
                        placeholder="이름을 입력하세요"
                      />
                    </div>

                    <div class="mb-3">
                      <label for="imageInput" class="form-label"
                        >반려동물 사진</label
                      >
                      <input
                        type="file"
                        class="form-control"
                        id="imageInput"
                        accept="image/*"
                      />
                    </div>

                    <!-- 제출 버튼 -->
                    <div class="d-grid">
                      <button
                        type="submit"
                        class="btn btn-primary"
                        id="submitBtn"
                      >
                        분석하기
                      </button>
                    </div>
                  </form>
                </div>
              </div>
              <!-- 스피너 -->
              <div
                id="spinnerContainer"
                class="text-center mt-3"
                style="display: none"
              >
                <div class="spinner-border text-success" role="status">
                  <span class="visually-hidden">Loading...</span>
                </div>
                <p>🔄 이미지 분석 중...</p>
              </div>
              <div id="result" style="display: none">
                <div class="mb-3 text-center">
                  <img
                    id="showImg"
                    src=""
                    alt="선택한 이미지 미리보기"
                    class="img-fluid rounded shadow"
                    style="max-width: 100%"
                  />
                </div>
                <div id="result1"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </section>

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

    <script src="./vision.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/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>