Hugging Face's logo

Spaces:
nkjoy
/
social
Running

App Files Community
nkjoy commited on
Commit
cd601ff
·
verified ·
1 Parent(s): c00e5e6

디자인을 좀 이쁘게 해줘요 ~ 여성분들이 좋아 하게 ! - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +677 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Social
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: social
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,677 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Social Circle - 친구 찾기 & 모임 만들기</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans KR', sans-serif;
14
+ background-color: #faf6f9;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #e0bbe4 0%, #957dad 100%);
19
+ box-shadow: 0 4px 20px rgba(149, 125, 173, 0.2);
20
+ }
21
+
22
+ .card-hover {
23
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
24
+ border-radius: 16px;
25
+ }
26
+
27
+ .card-hover:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 15px 30px rgba(149, 125, 173, 0.15);
30
+ }
31
+
32
+ .transition-all {
33
+ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
34
+ }
35
+
36
+ .friend-card:hover .friend-actions {
37
+ opacity: 1;
38
+ transform: translateX(0);
39
+ }
40
+
41
+ .friend-actions {
42
+ opacity: 0;
43
+ transform: translateX(10px);
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ @keyframes float {
48
+ 0% { transform: translateY(0px); }
49
+ 50% { transform: translateY(-8px); }
50
+ 100% { transform: translateY(0px); }
51
+ }
52
+
53
+ .floating {
54
+ animation: float 5s ease-in-out infinite;
55
+ }
56
+
57
+ .glow-on-hover:hover {
58
+ box-shadow: 0 0 20px rgba(224, 187, 228, 0.4);
59
+ }
60
+
61
+ .soft-shadow {
62
+ box-shadow: 0 5px 15px rgba(149, 125, 173, 0.1);
63
+ }
64
+
65
+ .pastel-purple {
66
+ background-color: #f3e5f5;
67
+ }
68
+
69
+ .rounded-xl {
70
+ border-radius: 16px;
71
+ }
72
+
73
+ .btn-pastel {
74
+ background: linear-gradient(135deg, #e0bbe4 0%, #d291bc 100%);
75
+ color: white;
76
+ border: none;
77
+ }
78
+
79
+ .btn-pastel:hover {
80
+ background: linear-gradient(135deg, #d291bc 0%, #e0bbe4 100%);
81
+ }
82
+ </style>
83
+ </head>
84
+ <body class="bg-gray-50 font-sans">
85
+ <!-- Navigation -->
86
+ <nav class="gradient-bg text-white shadow-lg">
87
+ <div class="container mx-auto px-4 py-3">
88
+ <div class="flex justify-between items-center">
89
+ <div class="flex items-center space-x-4">
90
+ <i class="fas fa-users text-2xl"></i>
91
+ <h1 class="text-xl font-bold">Social Circle</h1>
92
+ </div>
93
+ <div class="hidden md:flex space-x-6">
94
+ <a href="#" class="hover:text-gray-200 transition-all">홈</a>
95
+ <a href="#" class="hover:text-gray-200 transition-all">프로필</a>
96
+ <a href="#" class="hover:text-gray-200 transition-all">메시지</a>
97
+ <a href="#" class="hover:text-gray-200 transition-all">알림</a>
98
+ </div>
99
+ <div class="flex items-center space-x-4">
100
+ <div class="relative">
101
+ <input type="text" placeholder="검색..." class="rounded-full py-1 px-4 text-gray-800 focus:outline-none focus:ring-2 focus:ring-purple-300">
102
+ <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
103
+ </div>
104
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center">
105
+ <i class="fas fa-user text-purple-600"></i>
106
+ </div>
107
+ </div>
108
+ <button class="md:hidden">
109
+ <i class="fas fa-bars text-xl"></i>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </nav>
114
+
115
+ <!-- Main Content -->
116
+ <div class="container mx-auto px-4 py-6">
117
+ <div class="flex flex-col md:flex-row gap-6">
118
+ <!-- Left Sidebar -->
119
+ <div class="w-full md:w-1/4 space-y-4">
120
+ <!-- User Profile Card -->
121
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
122
+ <div class="relative h-24 bg-gradient-to-r from-pink-200 to-purple-200"></div>
123
+ <div class="flex flex-col items-center px-4 pb-4 -mt-12">
124
+ <div class="w-24 h-24 rounded-full border-4 border-white bg-pink-100 flex items-center justify-center mb-3 shadow-md">
125
+ <i class="fas fa-user-circle text-pink-400 text-4xl"></i>
126
+ </div>
127
+ <h3 class="font-bold text-xl">김민수</h3>
128
+ <p class="text-gray-500 text-sm mb-1">@minsoo_kim</p>
129
+ <p class="text-sm text-gray-600 text-center mb-3">디지털 마케터 | 사진 촬영과 여행을 좋아합니다</p>
130
+ <div class="flex space-x-6 mt-2 text-sm w-full justify-center">
131
+ <div class="text-center">
132
+ <p class="font-bold text-lg">245</p>
133
+ <p class="text-gray-500 text-xs">친구</p>
134
+ </div>
135
+ <div class="text-center">
136
+ <p class="font-bold text-lg">12</p>
137
+ <p class="text-gray-500 text-xs">모임</p>
138
+ </div>
139
+ <div class="text-center">
140
+ <p class="font-bold text-lg">56</p>
141
+ <p class="text-gray-500 text-xs">게시물</p>
142
+ </div>
143
+ </div>
144
+ <button class="w-full mt-4 btn-pastel hover:shadow-md text-white py-2 rounded-full transition-all">
145
+ 프로필 편집
146
+ </button>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Quick Actions -->
151
+ <div class="bg-white rounded-xl soft-shadow p-4">
152
+ <h3 class="font-bold mb-3">빠른 메뉴</h3>
153
+ <ul class="space-y-2">
154
+ <li>
155
+ <a href="#" class="flex items-center space-x-2 text-purple-600 hover:text-purple-800 transition-all">
156
+ <i class="fas fa-user-plus"></i>
157
+ <span>친구 찾기</span>
158
+ </a>
159
+ </li>
160
+ <li>
161
+ <a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-all">
162
+ <i class="fas fa-users"></i>
163
+ <span>모임 만들기</span>
164
+ </a>
165
+ </li>
166
+ <li>
167
+ <a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-all">
168
+ <i class="fas fa-calendar-alt"></i>
169
+ <span>이벤트</span>
170
+ </a>
171
+ </li>
172
+ <li>
173
+ <a href="#" class="flex items-center space-x-2 text-gray-700 hover:text-purple-600 transition-all">
174
+ <i class="fas fa-cog"></i>
175
+ <span>설정</span>
176
+ </a>
177
+ </li>
178
+ </ul>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Main Feed -->
183
+ <div class="w-full md:w-2/4 space-y-4">
184
+ <!-- Profile Header -->
185
+ <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
186
+ <div class="relative h-48 bg-gradient-to-r from-pink-200 to-purple-200">
187
+ <div class="absolute bottom-4 left-4 flex items-end space-x-4">
188
+ <div class="w-32 h-32 rounded-full border-4 border-white bg-pink-100 flex items-center justify-center shadow-lg">
189
+ <i class="fas fa-user-circle text-pink-400 text-5xl"></i>
190
+ </div>
191
+ <div class="pb-4 text-white">
192
+ <h2 class="text-2xl font-bold">김민수</h2>
193
+ <p class="text-sm opacity-90">@minsoo_kim</p>
194
+ <div class="flex space-x-4 mt-2">
195
+ <button class="bg-white text-purple-600 px-4 py-1 rounded-full text-sm font-medium hover:bg-purple-50 transition-all">
196
+ 친구 요청
197
+ </button>
198
+ <button class="bg-white bg-opacity-20 text-white px-4 py-1 rounded-full text-sm font-medium hover:bg-opacity-30 transition-all">
199
+ 메시지
200
+ </button>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="p-6 pt-20">
206
+ <div class="flex justify-between border-b pb-4">
207
+ <div>
208
+ <h3 class="font-bold text-lg">소개</h3>
209
+ <p class="text-gray-600 mt-1">디지털 마케터 | 사진 촬영과 여행을 좋아합니다</p>
210
+ <div class="flex space-x-4 mt-3 text-sm">
211
+ <span class="flex items-center text-gray-500">
212
+ <i class="fas fa-map-marker-alt mr-1"></i> 서울, 대한민국
213
+ </span>
214
+ <span class="flex items-center text-gray-500">
215
+ <i class="fas fa-briefcase mr-1"></i> ABC Company
216
+ </span>
217
+ </div>
218
+ </div>
219
+ <div class="text-right">
220
+ <p class="text-sm text-gray-500">가입일: 2022년 3월</p>
221
+ <div class="flex space-x-2 mt-2 justify-end">
222
+ <button class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-all">
223
+ <i class="fas fa-share-alt text-gray-600"></i>
224
+ </button>
225
+ <button class="w-8 h-8 rounded-full bg-gray-100 hover:bg-gray-200 flex items-center justify-center transition-all">
226
+ <i class="fas fa-ellipsis-h text-gray-600"></i>
227
+ </button>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="grid grid-cols-3 gap-4 mt-4 text-center">
232
+ <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-all cursor-pointer">
233
+ <p class="font-bold text-lg">245</p>
234
+ <p class="text-xs text-gray-500">친구</p>
235
+ </div>
236
+ <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-all cursor-pointer">
237
+ <p class="font-bold text-lg">12</p>
238
+ <p class="text-xs text-gray-500">모임</p>
239
+ </div>
240
+ <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-all cursor-pointer">
241
+ <p class="font-bold text-lg">56</p>
242
+ <p class="text-xs text-gray-500">게시물</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ <!-- Create Post -->
248
+ <div class="bg-white rounded-xl soft-shadow p-4">
249
+ <div class="flex space-x-3">
250
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
251
+ <i class="fas fa-user text-purple-600"></i>
252
+ </div>
253
+ <input type="text" placeholder="무슨 생각을 하고 계신가요?" class="flex-1 bg-gray-100 rounded-full px-4 focus:outline-none focus:ring-2 focus:ring-purple-300">
254
+ </div>
255
+ <div class="flex justify-between mt-3 pt-3 border-t">
256
+ <button class="flex items-center space-x-1 text-gray-500 hover:text-pink-500 transition-all">
257
+ <i class="fas fa-image text-pink-400"></i>
258
+ <span>사진</span>
259
+ </button>
260
+ <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600 transition-all">
261
+ <i class="fas fa-users text-purple-600"></i>
262
+ <span>모임</span>
263
+ </button>
264
+ <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600 transition-all">
265
+ <i class="fas fa-map-marker-alt text-purple-600"></i>
266
+ <span>위치</span>
267
+ </button>
268
+ <button class="flex items-center space-x-1 text-gray-500 hover:text-purple-600 transition-all">
269
+ <i class="fas fa-smile text-purple-600"></i>
270
+ <span>기분</span>
271
+ </button>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Friend Search Section -->
276
+ <div class="bg-white rounded-2xl shadow-xl p-6 border border-gray-100 overflow-hidden relative pastel-purple">
277
+ <div class="absolute -right-20 -top-20 w-40 h-40 bg-purple-200 rounded-full opacity-20"></div>
278
+ <div class="absolute -left-20 -bottom-20 w-40 h-40 bg-blue-200 rounded-full opacity-20"></div>
279
+ <div class="flex justify-between items-center mb-4">
280
+ <h2 class="font-bold text-lg">친구 찾기</h2>
281
+ <button class="text-purple-600 hover:text-purple-800 transition-all">모두 보기</button>
282
+ </div>
283
+
284
+ <div class="relative mb-4">
285
+ <input type="text" placeholder="이름, 관심사, 지역으로 친구 찾기" class="w-full bg-gray-100 rounded-full px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-purple-300">
286
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
287
+ </div>
288
+
289
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
290
+ <!-- Friend Card 1 -->
291
+ <div class="bg-gray-50 rounded-lg p-3 transition-all card-hover relative friend-card">
292
+ <div class="flex items-center space-x-3">
293
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
294
+ <i class="fas fa-user text-blue-600"></i>
295
+ </div>
296
+ <div>
297
+ <h4 class="font-bold">이지은</h4>
298
+ <p class="text-xs text-gray-500">서울 · 음악</p>
299
+ </div>
300
+ </div>
301
+ <div class="friend-actions absolute right-3 top-3 flex space-x-1">
302
+ <button class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center hover:bg-purple-200 transition-all">
303
+ <i class="fas fa-user-plus text-xs"></i>
304
+ </button>
305
+ <button class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center hover:bg-gray-300 transition-all">
306
+ <i class="fas fa-times text-xs"></i>
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Friend Card 2 -->
312
+ <div class="bg-gray-50 rounded-lg p-3 transition-all card-hover relative friend-card">
313
+ <div class="flex items-center space-x-3">
314
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
315
+ <i class="fas fa-user text-green-600"></i>
316
+ </div>
317
+ <div>
318
+ <h4 class="font-bold">박준호</h4>
319
+ <p class="text-xs text-gray-500">부산 · 스포츠</p>
320
+ </div>
321
+ </div>
322
+ <div class="friend-actions absolute right-3 top-3 flex space-x-1">
323
+ <button class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center hover:bg-purple-200 transition-all">
324
+ <i class="fas fa-user-plus text-xs"></i>
325
+ </button>
326
+ <button class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center hover:bg-gray-300 transition-all">
327
+ <i class="fas fa-times text-xs"></i>
328
+ </button>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Friend Card 3 -->
333
+ <div class="bg-gray-50 rounded-lg p-3 transition-all card-hover relative friend-card">
334
+ <div class="flex items-center space-x-3">
335
+ <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
336
+ <i class="fas fa-user text-yellow-600"></i>
337
+ </div>
338
+ <div>
339
+ <h4 class="font-bold">최수민</h4>
340
+ <p class="text-xs text-gray-500">대구 · 여행</p>
341
+ </div>
342
+ </div>
343
+ <div class="friend-actions absolute right-3 top-3 flex space-x-1">
344
+ <button class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center hover:bg-purple-200 transition-all">
345
+ <i class="fas fa-user-plus text-xs"></i>
346
+ </button>
347
+ <button class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center hover:bg-gray-300 transition-all">
348
+ <i class="fas fa-times text-xs"></i>
349
+ </button>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Friend Card 4 -->
354
+ <div class="bg-gray-50 rounded-lg p-3 transition-all card-hover relative friend-card">
355
+ <div class="flex items-center space-x-3">
356
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
357
+ <i class="fas fa-user text-red-600"></i>
358
+ </div>
359
+ <div>
360
+ <h4 class="font-bold">정다영</h4>
361
+ <p class="text-xs text-gray-500">인천 · 독서</p>
362
+ </div>
363
+ </div>
364
+ <div class="friend-actions absolute right-3 top-3 flex space-x-1">
365
+ <button class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center hover:bg-purple-200 transition-all">
366
+ <i class="fas fa-user-plus text-xs"></i>
367
+ </button>
368
+ <button class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center hover:bg-gray-300 transition-all">
369
+ <i class="fas fa-times text-xs"></i>
370
+ </button>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+
376
+ <!-- Group Creation Section -->
377
+ <div class="bg-white rounded-2xl shadow-xl p-6 border border-gray-100 overflow-hidden relative pastel-purple">
378
+ <div class="absolute -right-20 -top-20 w-40 h-40 bg-purple-100 rounded-full opacity-20"></div>
379
+ <div class="absolute -left-20 -bottom-20 w-40 h-40 bg-indigo-100 rounded-full opacity-20"></div>
380
+ <div class="flex justify-between items-center mb-4">
381
+ <h2 class="font-bold text-lg">모임 만들기</h2>
382
+ <button class="text-purple-600 hover:text-purple-800 transition-all">내 모임 보기</button>
383
+ </div>
384
+
385
+ <div class="bg-gradient-to-r from-pink-50 to-purple-50 rounded-xl p-6 mb-6 glow-on-hover transition-all">
386
+ <h3 class="font-bold text-purple-800 mb-2">새 모임 만들기</h3>
387
+ <div class="space-y-3">
388
+ <div>
389
+ <label class="block text-sm font-medium text-gray-700 mb-1">모임 이름</label>
390
+ <input type="text" class="w-full rounded border-gray-300 focus:border-purple-500 focus:ring-purple-500">
391
+ </div>
392
+ <div>
393
+ <label class="block text-sm font-medium text-gray-700 mb-1">모임 설명</label>
394
+ <textarea class="w-full rounded border-gray-300 focus:border-purple-500 focus:ring-purple-500" rows="2"></textarea>
395
+ </div>
396
+ <div>
397
+ <label class="block text-sm font-medium text-gray-700 mb-1">카테고리</label>
398
+ <select class="w-full rounded border-gray-300 focus:border-purple-500 focus:ring-purple-500">
399
+ <option>취미</option>
400
+ <option>스포츠</option>
401
+ <option>게임</option>
402
+ <option>음악</option>
403
+ <option>여행</option>
404
+ <option>기타</option>
405
+ </select>
406
+ </div>
407
+ <div>
408
+ <label class="block text-sm font-medium text-gray-700 mb-1">모임 사진</label>
409
+ <div class="flex items-center justify-center w-full">
410
+ <label class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
411
+ <div class="flex flex-col items-center justify-center pt-5 pb-6">
412
+ <i class="fas fa-cloud-upload-alt text-gray-400 text-xl mb-2"></i>
413
+ <p class="text-sm text-gray-500">사진 업로드</p>
414
+ </div>
415
+ <input type="file" class="hidden" />
416
+ </label>
417
+ </div>
418
+ </div>
419
+ <button class="w-full btn-pastel text-white py-3 rounded-xl hover:shadow-lg transition-all mt-4">모임 생성</button>
420
+ </div>
421
+ </div>
422
+
423
+ <h3 class="font-bold mb-3">추천 모임</h3>
424
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
425
+ <!-- Group Card 1 -->
426
+ <div class="bg-gray-50 rounded-lg p-3 transition-all card-hover">
427
+ <div class="flex items-center space-x-3 mb-2">
428
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center floating">
429
+ <i class="fas fa-users text-blue-600 text-lg"></i>
430
+ </div>
431
+ <div>
432
+ <h4 class="font-bold">서울 등산 모임</h4>
433
+ <p class="text-xs text-gray-500">멤버 124명</p>
434
+ </div>
435
+ </div>
436
+ <p class="text-sm text-gray-600 mb-3">주말마다 함께 등산하는 모임입니다. 초보자도 환영!</p>
437
+ <button class="w-full bg-white border border-purple-600 text-purple-600 py-1 rounded-lg text-sm hover:bg-purple-50 transition-all">가입하기</button>
438
+ </div>
439
+
440
+ <!-- Group Card 2 -->
441
+ <div class="bg-gray-50 rounded-lg p-3 transition-all card-hover">
442
+ <div class="flex items-center space-x-3 mb-2">
443
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center floating">
444
+ <i class="fas fa-users text-green-600 text-lg"></i>
445
+ </div>
446
+ <div>
447
+ <h4 class="font-bold">책 읽는 사람들</h4>
448
+ <p class="text-xs text-gray-500">멤버 89명</p>
449
+ </div>
450
+ </div>
451
+ <p class="text-sm text-gray-600 mb-3">월 1권 책을 읽고 독후감을 공유하는 모임입니다.</p>
452
+ <button class="w-full bg-white border border-purple-600 text-purple-600 py-1 rounded-lg text-sm hover:bg-purple-50 transition-all">가입하기</button>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Right Sidebar -->
459
+ <div class="w-full md:w-1/4 space-y-4">
460
+ <!-- Events -->
461
+ <div class="bg-white rounded-lg shadow p-4">
462
+ <div class="flex justify-between items-center mb-3">
463
+ <h3 class="font-bold">다가오는 이벤트</h3>
464
+ <button class="text-purple-600 hover:text-purple-800 transition-all">더 보기</button>
465
+ </div>
466
+ <div class="space-y-3">
467
+ <div class="flex items-start space-x-2">
468
+ <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center">
469
+ <i class="fas fa-calendar-day text-purple-600"></i>
470
+ </div>
471
+ <div>
472
+ <h4 class="font-medium text-sm">주말 등산</h4>
473
+ <p class="text-xs text-gray-500">6월 10일 · 서울 북한산</p>
474
+ </div>
475
+ </div>
476
+ <div class="flex items-start space-x-2">
477
+ <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center">
478
+ <i class="fas fa-music text-blue-600"></i>
479
+ </div>
480
+ <div>
481
+ <h4 class="font-medium text-sm">콘서트</h4>
482
+ <p class="text-xs text-gray-500">6월 15일 · 올림픽공원</p>
483
+ </div>
484
+ </div>
485
+ <div class="flex items-start space-x-2">
486
+ <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center">
487
+ <i class="fas fa-utensils text-green-600"></i>
488
+ </div>
489
+ <div>
490
+ <h4 class="font-medium text-sm">맛집 탐방</h4>
491
+ <p class="text-xs text-gray-500">6월 20일 · 홍대</p>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- Friend Suggestions -->
498
+ <div class="bg-white rounded-lg shadow p-4">
499
+ <div class="flex justify-between items-center mb-3">
500
+ <h3 class="font-bold">추천 친구</h3>
501
+ <button class="text-purple-600 hover:text-purple-800 transition-all">새로고침</button>
502
+ </div>
503
+ <div class="space-y-3">
504
+ <div class="flex items-center justify-between">
505
+ <div class="flex items-center space-x-2">
506
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
507
+ <i class="fas fa-user text-purple-600"></i>
508
+ </div>
509
+ <div>
510
+ <h4 class="font-medium text-sm">김태영</h4>
511
+ <p class="text-xs text-gray-500">공통 친구 3명</p>
512
+ </div>
513
+ </div>
514
+ <button class="text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition-all">친구 추가</button>
515
+ </div>
516
+ <div class="flex items-center justify-between">
517
+ <div class="flex items-center space-x-2">
518
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
519
+ <i class="fas fa-user text-blue-600"></i>
520
+ </div>
521
+ <div>
522
+ <h4 class="font-medium text-sm">박지현</h4>
523
+ <p class="text-xs text-gray-500">공통 관심사: 음악</p>
524
+ </div>
525
+ </div>
526
+ <button class="text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition-all">친구 추가</button>
527
+ </div>
528
+ <div class="flex items-center justify-between">
529
+ <div class="flex items-center space-x-2">
530
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
531
+ <i class="fas fa-user text-green-600"></i>
532
+ </div>
533
+ <div>
534
+ <h4 class="font-medium text-sm">이준호</h4>
535
+ <p class="text-xs text-gray-500">같은 지역</p>
536
+ </div>
537
+ </div>
538
+ <button class="text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition-all">친구 추가</button>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Group Suggestions -->
544
+ <div class="bg-white rounded-lg shadow p-4">
545
+ <div class="flex justify-between items-center mb-3">
546
+ <h3 class="font-bold">추천 모임</h3>
547
+ <button class="text-purple-600 hover:text-purple-800 transition-all">더 보기</button>
548
+ </div>
549
+ <div class="space-y-3">
550
+ <div class="flex items-center space-x-2">
551
+ <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center">
552
+ <i class="fas fa-users text-yellow-600"></i>
553
+ </div>
554
+ <div>
555
+ <h4 class="font-medium text-sm">사진 동호회</h4>
556
+ <p class="text-xs text-gray-500">멤버 56명</p>
557
+ </div>
558
+ </div>
559
+ <div class="flex items-center space-x-2">
560
+ <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
561
+ <i class="fas fa-users text-red-600"></i>
562
+ </div>
563
+ <div>
564
+ <h4 class="font-medium text-sm">요리 클래스</h4>
565
+ <p class="text-xs text-gray-500">멤버 42명</p>
566
+ </div>
567
+ </div>
568
+ <div class="flex items-center space-x-2">
569
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
570
+ <i class="fas fa-users text-indigo-600"></i>
571
+ </div>
572
+ <div>
573
+ <h4 class="font-medium text-sm">코딩 스터디</h4>
574
+ <p class="text-xs text-gray-500">멤버 78���</p>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <!-- Mobile Bottom Navigation -->
584
+ <div class="md:hidden fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t">
585
+ <div class="flex justify-around py-3">
586
+ <a href="#" class="flex flex-col items-center text-purple-600">
587
+ <i class="fas fa-home text-xl"></i>
588
+ <span class="text-xs mt-1">홈</span>
589
+ </a>
590
+ <a href="#" class="flex flex-col items-center text-gray-600">
591
+ <i class="fas fa-user-friends text-xl"></i>
592
+ <span class="text-xs mt-1">친구</span>
593
+ </a>
594
+ <a href="#" class="flex flex-col items-center text-gray-600">
595
+ <i class="fas fa-users text-xl"></i>
596
+ <span class="text-xs mt-1">모임</span>
597
+ </a>
598
+ <a href="#" class="flex flex-col items-center text-gray-600">
599
+ <i class="fas fa-bell text-xl"></i>
600
+ <span class="text-xs mt-1">알림</span>
601
+ </a>
602
+ <a href="#" class="flex flex-col items-center text-gray-600">
603
+ <i class="fas fa-user text-xl"></i>
604
+ <span class="text-xs mt-1">프로필</span>
605
+ </a>
606
+ </div>
607
+ </div>
608
+
609
+ <script>
610
+ // Profile photo upload functionality
611
+ const profilePhotoInput = document.createElement('input');
612
+ profilePhotoInput.type = 'file';
613
+ profilePhotoInput.accept = 'image/*';
614
+ profilePhotoInput.style.display = 'none';
615
+
616
+ document.querySelector('.bg-purple-100.rounded-full').addEventListener('click', function() {
617
+ profilePhotoInput.click();
618
+ });
619
+
620
+ profilePhotoInput.addEventListener('change', function(e) {
621
+ if(e.target.files.length > 0) {
622
+ const file = e.target.files[0];
623
+ const reader = new FileReader();
624
+ reader.onload = function(event) {
625
+ const profilePhoto = document.querySelector('.bg-purple-100.rounded-full');
626
+ profilePhoto.innerHTML = `<img src="${event.target.result}" class="w-full h-full rounded-full object-cover">`;
627
+ }
628
+ reader.readAsDataURL(file);
629
+ alert('프로필 사진이 업데이트되었습니다!');
630
+ }
631
+ });
632
+
633
+ // Friend request functionality
634
+ document.querySelectorAll('.friend-actions button:first-child').forEach(button => {
635
+ button.addEventListener('click', function() {
636
+ const card = this.closest('.friend-card');
637
+ const name = card.querySelector('h4').textContent;
638
+ alert(`${name}님에게 친구 요청을 보냈습니다!`);
639
+
640
+ // Change button state
641
+ this.innerHTML = '<i class="fas fa-check text-xs"></i>';
642
+ this.classList.remove('bg-purple-100', 'text-purple-600', 'hover:bg-purple-200');
643
+ this.classList.add('bg-green-100', 'text-green-600', 'hover:bg-green-200');
644
+ });
645
+ });
646
+
647
+ // Group join functionality
648
+ document.querySelectorAll('.bg-white.border-purple-600').forEach(button => {
649
+ button.addEventListener('click', function() {
650
+ const groupCard = this.closest('.card-hover');
651
+ const groupName = groupCard.querySelector('h4').textContent;
652
+ alert(`${groupName}에 가입 신청을 했습니다!`);
653
+
654
+ // Change button state
655
+ this.textContent = '가입 요청됨';
656
+ this.classList.remove('border-purple-600', 'text-purple-600', 'hover:bg-purple-50');
657
+ this.classList.add('bg-gray-200', 'text-gray-600', 'border-transparent');
658
+ this.disabled = true;
659
+ });
660
+ });
661
+
662
+ // Create group form submission
663
+ const createGroupBtn = document.querySelector('.bg-purple-600.w-full');
664
+ if(createGroupBtn) {
665
+ createGroupBtn.addEventListener('click', function() {
666
+ const groupName = document.querySelector('.bg-purple-50 input[type="text"]').value;
667
+ if(groupName) {
668
+ alert(`"${groupName}" 모임이 성공적으로 생성되었습니다!`);
669
+ // Here you would typically submit the form via AJAX
670
+ } else {
671
+ alert('모임 이름을 입력해주세요.');
672
+ }
673
+ });
674
+ }
675
+ </script>
676
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=nkjoy/social" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
677
+ </html>