forked from kookmin-sw/cap-template
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
310 lines (275 loc) · 8.79 KB
/
index.html
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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Friend</title>
<style>
body {
font-family: Pretendard, sans-serif;
line-height: 1.6;
margin: 0;
width: 100%;
padding: 0;
background-color: #f4f4f4;
flex-direction: column;
display: flex;
}
#header {
display: flex;
align-items: center;
padding-left: 20px;
padding-top: 20px;
background-color: #FF7269;
}
#header img {
width: 185px;
height: 128px;
margin-right: 50px; /* 로고와 문자열 사이의 간격 */
}
.header-text {
text-align: left;
color: #fff;
}
#title {
font-size: 36px;
font-weight: bold;
margin: 0;
}
#subtitle {
font-size: 20px;
margin: 0;
padding-bottom: 20px;
}
#container {
padding-left: 20px;
padding-right: 20px;
background: #fff;
color: #525463; /* 텍스트 색상 변경 */
}
#githubBtn {
height: 20px;
padding: 8px;
border-radius: 20px;
border-width: 1px;
border-color: #FF7269;
background-color: #fff;
flex-direction: row;
display: flex;
}
h1, h2, h3 {
color: #333;
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
table {
width: 600px;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 8px;
border-bottom: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #FF7269;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #FF7269;
}
.highlightText {
color: #FF7269;
font-weight: bold;
}
.my-hr {
border: 0;
height: 3px;
background: #ccc;
}
.gif-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.gif-item {
display: flex;
justify-content: center;
}
.gif-row {
margin-bottom: 100px;
}
p {
font-size: 20px;
}
h1, h2, h3 {
color: #525463;
}
/* 미디어 쿼리 */
@media only screen and (max-width: 600px) {
#header img {
display: none; /* 로고 숨기기 */
}
.header-text {
padding-left: 20px; /* 로고가 없으므로 왼쪽 패딩 추가 */
}
}
</style>
</head>
<body>
<div id="header">
<img src="images/logo.png"/>
<div class="header-text">
<p id="title">capstone-2024-18</p>
<p id="subtitle">관상 기반 데이팅 앱, FaceFriend</p>
</div>
</div>
<!--<div id="header">-->
<!-- <div style="flex-direction: row; display: flex;">-->
<!-- <p id="title"> capstone-2024-18 </p>-->
<!-- <div style="flex: 1;"></div>-->
<!-- <a id="githubBtn" href="https://github.com/kookmin-sw/capstone-2024-18" class="button btnFade">-->
<!-- <p style="color: #FF7269; margin: 0; font-weight: bold;font-size: 20px; line-height: 20px; padding-left: 8px; padding-right: 5px;">Visit Github</p>-->
<!-- <img src="images/githubWhite.svg" width="30px" height="25px" style="margin: 0;"/>-->
<!-- </a>-->
<!-- </div>-->
<!-- <p id="subtitle"> 관상 기반 데이팅 앱, FaceFriend </p>-->
<!--</div>-->
<div id="container">
<h2> 프로젝트 소개 </h2>
<hr class="my-hr">
<h3> Face Friend </h3>
<p>
Face Friend 는 <span class="highlightText">관상 이미지 생성, 관상 분석, 관상 궁합 추천</span> 등의 기능을 통해 <br>
기존의 데이팅 앱이 가지고 있었던 <span class="highlightText">얼굴 노출의 부담</span>과 <span class="highlightText">얼굴 이미지에 대한 절대적인 의존성</span>을 해결하기 위한 앱 서비스입니다.<br>
Face Friend 를 통해 새로운 인연을 만나는 색다른 즐거움을 느껴보세요!
</p>
<br>
<h3> AI 관상 이미지 </h3>
<p>
<span class="highlightText">자신의 얼굴 특징과 분위기를 고스란히 담아낸</span> 관상 이미지를 생성합니다.
</p>
<br>
<h3> AI 관상 분석 </h3>
<p>
<span class="highlightText">눈썹, 눈, 코, 입, 얼굴형</span>에 대해 관상을 분석합니다. 성격, 가치관 등에 대한 관상 분석 정보를 제공합니다.
</p>
<br>
<h3> AI 관상 궁합 추천 </h3>
<p>
AI 관상 분석의 결과에 따라 사용자의 오행형(五行形)를 분류하고, <span class="highlightText">오행형(화/수/목/금/토)간의 궁합이 좋은 사용자를 추천합니다.</span>
</p>
<br>
<h3> 친밀도에 따른 관상 이미지 변경 </h3>
<p>
<span class="highlightText">상대와 친밀해질수록 실제 얼굴과 가깝게</span> 관상 이미지가 변경됩니다.
</p>
<br>
<br>
<br>
<h2> 문서 및 APK 실행파일 </h2>
<hr class="my-hr">
<br>
<a href="https://drive.google.com/drive/u/0/folders/15CNdGg8UGcZfr9XU2z3XRlWpkxXgrowY" class="button">링크로 이동하기</a>
<br><br><br><br><br>
<h2> 시연 영상 </h2>
<hr class="my-hr">
<div class="gif-grid">
<div class="gif-item">
<div class="gif-row">
<h2> 인증/인가 </h2>
<img src="images/signup2.gif" width="365" height="890">
</div>
</div>
<div class="gif-item">
<div class="gif-row">
<h2> 기본 정보 </h2>
<img src="images/basic2.gif" width="365" height="890">
</div>
</div>
<div class="gif-item">
<div class="gif-row">
<h2> AI 관상 이미지 </h2>
<img src="images/face2.gif" width="365" height="890">
</div>
</div>
<div class="gif-item">
<div class="gif-row">
<h2> AI 관상 분석 </h2>
<img src="images/analyze2.gif" width="365" height="890">
</div>
</div>
<div class="gif-item">
<div class="gif-row">
<h2> 자기소개서, AI 관상 궁합 추천</h2>
<img src="images/resume2.gif" width="365" height="890">
</div>
</div>
<div class="gif-item">
<div class="gif-row">
<h2> 채팅, 친밀도 관상 이미지 변화</h2>
<img src="images/chat2.gif" width="365" height="890">
</div>
</div>
</div>
<br>
<br>
<h2> 팀원 소개 </h2>
<table>
<tr>
<th>파트</th>
<th>이름</th>
<th>역할</th>
</tr>
<tr>
<td>AI</td>
<td>이시현</td>
<td>AI 관상 이미지 생성, AI 관상 분석(눈,입), AWS 배포</td>
</tr>
<tr>
<td>AI</td>
<td>박민희</td>
<td>Landmark 모델 통합, AI 관상 분석(얼굴형, 눈썹, 코)</td>
</tr>
<tr>
<td>FrontEnd</td>
<td>고명섭</td>
<td>인증/인가, 기본정보, 웹소켓 및 채팅</td>
</tr>
<tr>
<td>FrontEnd</td>
<td>윤민지</td>
<td>AI 관상 이미지, AI 관상 분석, 자기소개서와 유저 추천</td>
</tr>
<tr>
<td>BackEnd</td>
<td>임장혁</td>
<td>웹소켓 및 채팅, 통합 테스트 환경 구축, AWS 배포</td>
</tr>
<tr>
<td>BackEnd</td>
<td>김찬진</td>
<td>인증/인가, 기본정보, AI 관상 이미지, AI 관상 분석, 자기소개서,
<br>AI 관상 궁합 추천, 친밀도에 따른 AI 관상 이미지 변화, AWS S3</td>
</tr>
</table>
<br>
</div>
</body>
</html>