Hugging Face's logo

Spaces:
Mineru
/
ai-busan
Running

App Files Community
Mineru commited on
Commit
1fd14f2
·
verified ·
1 Parent(s): 0bf8651

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +987 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Busan
3
- emoji: 🏆
4
- colorFrom: yellow
5
- colorTo: yellow
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: ai-busan
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,987 @@
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>AI 대회 플랫폼</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
+ /* 커스텀 스타일 */
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
13
+ }
14
+ .card-hover:hover {
15
+ transform: translateY(-5px);
16
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
17
+ }
18
+ .sidebar-item:hover {
19
+ background-color: rgba(255,255,255,0.1);
20
+ }
21
+ .leaderboard-row:hover {
22
+ background-color: rgba(0,0,0,0.03);
23
+ }
24
+ .progress-bar {
25
+ transition: width 0.5s ease-in-out;
26
+ }
27
+ .fade-in {
28
+ animation: fadeIn 0.5s ease-in;
29
+ }
30
+ @keyframes fadeIn {
31
+ from { opacity: 0; }
32
+ to { opacity: 1; }
33
+ }
34
+ .blink {
35
+ animation: blink 1s infinite;
36
+ }
37
+ @keyframes blink {
38
+ 0% { opacity: 1; }
39
+ 50% { opacity: 0.5; }
40
+ 100% { opacity: 1; }
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50 font-sans">
45
+ <!-- 상단 네비게이션 바 -->
46
+ <nav class="gradient-bg text-white shadow-lg">
47
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
48
+ <div class="flex items-center space-x-4">
49
+ <a href="#" class="flex items-center space-x-2" onclick="loadPage('home')">
50
+ <i class="fas fa-robot text-2xl"></i>
51
+ <span class="text-xl font-bold">AI 대회 플랫폼</span>
52
+ </a>
53
+ </div>
54
+ <div class="hidden md:flex items-center space-x-6">
55
+ <a href="#" class="hover:text-gray-200" onclick="loadPage('home')">홈</a>
56
+ <a href="#" class="hover:text-gray-200" onclick="loadPage('competition')">대회 소개</a>
57
+ <a href="#" class="hover:text-gray-200" onclick="loadPage('leaderboard')">리더보드</a>
58
+ <a href="#" class="hover:text-gray-200" onclick="loadPage('community')">커뮤니티</a>
59
+ <a href="#" class="hover:text-gray-200" onclick="loadPage('faq')">FAQ</a>
60
+ </div>
61
+ <div class="flex items-center space-x-4">
62
+ <div id="user-info" class="hidden">
63
+ <div class="flex items-center space-x-2">
64
+ <img id="user-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="프로필" class="w-8 h-8 rounded-full">
65
+ <span id="username" class="font-medium">홍길동</span>
66
+ </div>
67
+ </div>
68
+ <div id="auth-buttons">
69
+ <button onclick="loadPage('login')" class="px-4 py-1 bg-white text-purple-600 rounded-full font-medium hover:bg-gray-100 transition">로그인</button>
70
+ <button onclick="loadPage('register')" class="px-4 py-1 border border-white text-white rounded-full font-medium hover:bg-white hover:text-purple-600 transition">회원가입</button>
71
+ </div>
72
+ <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
73
+ <i class="fas fa-bars text-xl"></i>
74
+ </button>
75
+ </div>
76
+ </div>
77
+ <!-- 모바일 메뉴 -->
78
+ <div id="mobile-menu" class="hidden md:hidden bg-purple-700 px-4 py-2">
79
+ <a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('home')">홈</a>
80
+ <a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('competition')">대회 소개</a>
81
+ <a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('leaderboard')">리더보드</a>
82
+ <a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('community')">커뮤니티</a>
83
+ <a href="#" class="block py-2 text-white hover:bg-purple-600 rounded px-2" onclick="loadPage('faq')">FAQ</a>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- 사이드바와 메인 콘텐츠 영역 -->
88
+ <div class="container mx-auto px-4 py-6 flex flex-col md:flex-row">
89
+ <!-- 사이드바 (로그인 시에만 표시) -->
90
+ <div id="sidebar" class="hidden md:w-64 bg-white rounded-lg shadow-md p-4 mb-6 md:mb-0 md:mr-6">
91
+ <div class="mb-6">
92
+ <div class="flex items-center space-x-3 mb-4">
93
+ <img id="sidebar-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="프로필" class="w-10 h-10 rounded-full">
94
+ <div>
95
+ <div id="sidebar-username" class="font-medium">홍길동</div>
96
+ <div class="text-xs text-gray-500">참가자 (팀장)</div>
97
+ </div>
98
+ </div>
99
+ <div class="text-sm text-gray-600 mb-2">팀: <span class="font-medium">AI 마스터즈</span></div>
100
+ <div class="text-sm text-gray-600">분야: <span class="font-medium">일반부</span></div>
101
+ </div>
102
+
103
+ <div class="mb-6">
104
+ <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">대회 진행</h3>
105
+ <ul class="space-y-1">
106
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('dashboard')"><i class="fas fa-tachometer-alt mr-2"></i>대시보드</a></li>
107
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('team')"><i class="fas fa-users mr-2"></i>팀 관리</a></li>
108
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('task')"><i class="fas fa-tasks mr-2"></i>과제 브리핑</a></li>
109
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('workspace')"><i class="fas fa-laptop-code mr-2"></i>작업 환경</a></li>
110
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('submission')"><i class="fas fa-upload mr-2"></i>제출 관리</a></li>
111
+ </ul>
112
+ </div>
113
+
114
+ <div>
115
+ <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">기타</h3>
116
+ <ul class="space-y-1">
117
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('notifications')"><i class="fas fa-bell mr-2"></i>알림 <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full ml-1">3</span></a></li>
118
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="loadPage('settings')"><i class="fas fa-cog mr-2"></i>설정</a></li>
119
+ <li><a href="#" class="sidebar-item block px-3 py-2 rounded text-gray-700 hover:bg-purple-50 hover:text-purple-600" onclick="logout()"><i class="fas fa-sign-out-alt mr-2"></i>로그아웃</a></li>
120
+ </ul>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- 메인 콘텐츠 영역 -->
125
+ <div id="main-content" class="flex-1">
126
+ <!-- 기본 페이지 (홈) -->
127
+ <div id="home-page" class="fade-in">
128
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
129
+ <div class="flex flex-col md:flex-row items-center justify-between mb-6">
130
+ <div class="mb-4 md:mb-0">
131
+ <h1 class="text-2xl font-bold text-gray-800">2025 부산 AI 챌린지</h1>
132
+ <p class="text-gray-600">AI 기술을 활용한 창의적인 문제 해결 대회</p>
133
+ </div>
134
+ <div class="flex space-x-3">
135
+ <button onclick="loadPage('register-competition')" class="px-6 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">대회 등록</button>
136
+ <button onclick="loadPage('live')" class="px-6 py-2 border border-purple-600 text-purple-600 rounded-lg font-medium hover:bg-purple-50 transition">
137
+ <i class="fas fa-play mr-2"></i>실시간 중계
138
+ </button>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="bg-purple-50 rounded-lg p-4 mb-6">
143
+ <div class="flex items-center">
144
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
145
+ <i class="fas fa-info-circle text-purple-600 text-xl"></i>
146
+ </div>
147
+ <div>
148
+ <h3 class="font-medium text-gray-800">대회 진행 상황</h3>
149
+ <p class="text-sm text-gray-600">현재 예선 라운드가 진행 중입니다. (2025.10.15 ~ 2025.10.30)</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
155
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
156
+ <div class="flex items-center mb-4">
157
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
158
+ <i class="fas fa-users text-blue-600"></i>
159
+ </div>
160
+ <h3 class="font-medium text-gray-800">참가자 현황</h3>
161
+ </div>
162
+ <div class="text-3xl font-bold text-gray-800 mb-2">1,245팀</div>
163
+ <div class="flex justify-between text-sm text-gray-500">
164
+ <span>학생부: 632팀</span>
165
+ <span>일반부: 613팀</span>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
170
+ <div class="flex items-center mb-4">
171
+ <div class="bg-green-100 p-2 rounded-full mr-3">
172
+ <i class="fas fa-trophy text-green-600"></i>
173
+ </div>
174
+ <h3 class="font-medium text-gray-800">상금 풀</h3>
175
+ </div>
176
+ <div class="text-3xl font-bold text-gray-800 mb-2">₩250,000,000</div>
177
+ <div class="text-sm text-gray-500">총 상금 규모</div>
178
+ </div>
179
+
180
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
181
+ <div class="flex items-center mb-4">
182
+ <div class="bg-orange-100 p-2 rounded-full mr-3">
183
+ <i class="fas fa-clock text-orange-600"></i>
184
+ </div>
185
+ <h3 class="font-medium text-gray-800">남은 시간</h3>
186
+ </div>
187
+ <div class="text-3xl font-bold text-gray-800 mb-2" id="countdown">14일 05:32:18</div>
188
+ <div class="text-sm text-gray-500">예선 종료까지</div>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="mb-8">
193
+ <h2 class="text-xl font-bold text-gray-800 mb-4">최근 공지사항</h2>
194
+ <div class="space-y-3">
195
+ <div class="border-b border-gray-100 pb-3">
196
+ <div class="flex justify-between items-start">
197
+ <a href="#" class="font-medium text-purple-600 hover:underline" onclick="loadPage('notice-detail')">예선 라운드 과제 1 안내</a>
198
+ <span class="text-sm text-gray-500">2025.10.14</span>
199
+ </div>
200
+ <p class="text-sm text-gray-600 mt-1">예선 라운드 첫 번째 과제가 공개되었습니다. 과제 브리핑 페이지에서 확인해주세요.</p>
201
+ </div>
202
+ <div class="border-b border-gray-100 pb-3">
203
+ <div class="flex justify-between items-start">
204
+ <a href="#" class="font-medium text-purple-600 hover:underline" onclick="loadPage('notice-detail')">API 사용량 할당 안내</a>
205
+ <span class="text-sm text-gray-500">2025.10.12</span>
206
+ </div>
207
+ <p class="text-sm text-gray-600 mt-1">각 팀별 API 사용량이 할당되었습니다. 작업 환경 페이지에서 확인 가능합니다.</p>
208
+ </div>
209
+ <div class="border-b border-gray-100 pb-3">
210
+ <div class="flex justify-between items-start">
211
+ <a href="#" class="font-medium text-purple-600 hover:underline" onclick="loadPage('notice-detail')">대회 등록 마감 안내</a>
212
+ <span class="text-sm text-gray-500">2025.10.10</span>
213
+ </div>
214
+ <p class="text-sm text-gray-600 mt-1">대회 등록이 10월 15일 자정에 마감됩니다. 아직 등록하지 않은 팀은 서둘러주세요.</p>
215
+ </div>
216
+ </div>
217
+ <div class="mt-4 text-right">
218
+ <a href="#" class="text-sm text-purple-600 hover:underline font-medium" onclick="loadPage('notices')">더보기 <i class="fas fa-chevron-right ml-1"></i></a>
219
+ </div>
220
+ </div>
221
+
222
+ <div>
223
+ <h2 class="text-xl font-bold text-gray-800 mb-4">인기 커뮤니티 게시글</h2>
224
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
225
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
226
+ <div class="flex items-center mb-2">
227
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="사용자" class="w-6 h-6 rounded-full mr-2">
228
+ <span class="text-sm font-medium">김지수</span>
229
+ <span class="text-xs text-gray-500 ml-auto">2시간 전</span>
230
+ </div>
231
+ <a href="#" class="font-medium text-gray-800 hover:text-purple-600" onclick="loadPage('community-post')">LLM 모델 최적화 팁 공유합니다</a>
232
+ <div class="flex items-center mt-2 text-sm text-gray-500">
233
+ <span class="flex items-center mr-3"><i class="far fa-thumbs-up mr-1"></i> 24</span>
234
+ <span class="flex items-center"><i class="far fa-comment mr-1"></i> 5</span>
235
+ </div>
236
+ </div>
237
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
238
+ <div class="flex items-center mb-2">
239
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="사용자" class="w-6 h-6 rounded-full mr-2">
240
+ <span class="text-sm font-medium">박준호</span>
241
+ <span class="text-xs text-gray-500 ml-auto">5시간 전</span>
242
+ </div>
243
+ <a href="#" class="font-medium text-gray-800 hover:text-purple-600" onclick="loadPage('community-post')">이미지 생성 모델 비교 분석</a>
244
+ <div class="flex items-center mt-2 text-sm text-gray-500">
245
+ <span class="flex items-center mr-3"><i class="far fa-thumbs-up mr-1"></i> 18</span>
246
+ <span class="flex items-center"><i class="far fa-comment mr-1"></i> 7</span>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div class="mt-4 text-right">
251
+ <a href="#" class="text-sm text-purple-600 hover:underline font-medium" onclick="loadPage('community')">더보기 <i class="fas fa-chevron-right ml-1"></i></a>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- 로그인 페이지 -->
258
+ <div id="login-page" class="hidden fade-in">
259
+ <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-8">
260
+ <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">로그인</h2>
261
+ <form id="login-form">
262
+ <div class="mb-4">
263
+ <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
264
+ <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="이메일을 입력하세요">
265
+ </div>
266
+ <div class="mb-6">
267
+ <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
268
+ <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="비밀번호를 입력하세요">
269
+ </div>
270
+ <button type="button" onclick="performLogin()" class="w-full py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition mb-4">로그인</button>
271
+ <div class="text-center text-sm text-gray-600">
272
+ 아직 계정이 없으신가요? <a href="#" class="text-purple-600 hover:underline font-medium" onclick="loadPage('register')">회원가입</a>
273
+ </div>
274
+ </form>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- 회원가입 페이지 -->
279
+ <div id="register-page" class="hidden fade-in">
280
+ <div class="max-w-md mx-auto bg-white rounded-lg shadow-md p-8">
281
+ <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">회원가입</h2>
282
+ <form id="register-form">
283
+ <div class="mb-4">
284
+ <label for="register-name" class="block text-sm font-medium text-gray-700 mb-1">이름</label>
285
+ <input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="이름을 입력하세요">
286
+ </div>
287
+ <div class="mb-4">
288
+ <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">이메일</label>
289
+ <input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="이메일을 입력하세요">
290
+ </div>
291
+ <div class="mb-4">
292
+ <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
293
+ <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="비밀번호를 입력하세요">
294
+ </div>
295
+ <div class="mb-6">
296
+ <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">비밀번호 확인</label>
297
+ <input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="비밀번호를 다시 입력하세요">
298
+ </div>
299
+ <button type="button" onclick="performRegistration()" class="w-full py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition mb-4">회원가입</button>
300
+ <div class="text-center text-sm text-gray-600">
301
+ 이미 계정이 있으신가요? <a href="#" class="text-purple-600 hover:underline font-medium" onclick="loadPage('login')">로그인</a>
302
+ </div>
303
+ </form>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- 대회 소개 페이지 -->
308
+ <div id="competition-page" class="hidden fade-in">
309
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
310
+ <h1 class="text-2xl font-bold text-gray-800 mb-6">2025 부산 AI 챌린지 소개</h1>
311
+
312
+ <div class="mb-8">
313
+ <h2 class="text-xl font-bold text-gray-800 mb-4">대회 목적</h2>
314
+ <div class="bg-purple-50 rounded-lg p-4">
315
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
316
+ <li><span class="font-medium">AI 저변 확산:</span> 시민들의 AI 관심도를 높이고 더 쉽게 AI에 접근할 수 있도록 하는 것</li>
317
+ <li><span class="font-medium">실질적인 활용 증진:</span> 공공 데이터와 AI 기술을 접목하여 시민들에게 실용적인 가치 제공</li>
318
+ </ul>
319
+ </div>
320
+ </div>
321
+
322
+ <div class="mb-8">
323
+ <h2 class="text-xl font-bold text-gray-800 mb-4">대회 참가 대상</h2>
324
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
325
+ <div class="bg-blue-50 rounded-lg p-4">
326
+ <h3 class="font-bold text-blue-800 mb-2">학생부</h3>
327
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
328
+ <li>초/중/고등학생</li>
329
+ <li>부경대학교 컨소시엄에서 진행 중인 AI 교육 프로그램(2,500명) 연계</li>
330
+ <li>교육청과 연계하여 추가 참가자 확보</li>
331
+ <li>생활기록부에 기재 가능한 공식 시상 제공</li>
332
+ </ul>
333
+ </div>
334
+ <div class="bg-green-50 rounded-lg p-4">
335
+ <h3 class="font-bold text-green-800 mb-2">일반부</h3>
336
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
337
+ <li>성인 참가자(학생도 참가 가능)</li>
338
+ <li>현재 진행 중인 성인 대상 AI 교육 프로그램(12개) 연계</li>
339
+ <li>다양한 커뮤니티와 연계하여 참가자 확보</li>
340
+ <li>일반인 누구나 참여 가능한 포맷 구성</li>
341
+ </ul>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="mb-8">
347
+ <h2 class="text-xl font-bold text-gray-800 mb-4">대회 형식</h2>
348
+ <div class="space-y-6">
349
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
350
+ <h3 class="font-bold text-purple-800 mb-2">예선</h3>
351
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
352
+ <li>온라인으로 진행</li>
353
+ <li>리더보드 형식으로 실시간 순위 반영</li>
354
+ <li>참가자 수 제한</li>
355
+ <li>API 비용 할당하여 모든 참가자에게 동일한 조건 제공</li>
356
+ </ul>
357
+ </div>
358
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
359
+ <h3 class="font-bold text-purple-800 mb-2">본선: 16강 토너먼트 방식</h3>
360
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
361
+ <li>오프라인 경연(부산 e스포츠 경기장 활용)</li>
362
+ <li>실시간 중계 및 해설 진행</li>
363
+ <li>리더보드 시스템으로 실시간 순위 공개</li>
364
+ <li>단계별 난이도 상승 및 과제 변경</li>
365
+ <li>최종 단계에서는 리포트 제출 필요</li>
366
+ </ul>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="mb-8">
372
+ <h2 class="text-xl font-bold text-gray-800 mb-4">주요 과제 분야</h2>
373
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
374
+ <div class="bg-indigo-50 rounded-lg p-4">
375
+ <div class="flex items-center mb-2">
376
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
377
+ <i class="fas fa-comment-dots text-indigo-600"></i>
378
+ </div>
379
+ <h3 class="font-bold text-indigo-800">LLM 모델 활용</h3>
380
+ </div>
381
+ <p class="text-sm text-gray-700">프롬프트 작성 경연</p>
382
+ </div>
383
+ <div class="bg-pink-50 rounded-lg p-4">
384
+ <div class="flex items-center mb-2">
385
+ <div class="bg-pink-100 p-2 rounded-full mr-3">
386
+ <i class="fas fa-image text-pink-600"></i>
387
+ </div>
388
+ <h3 class="font-bold text-pink-800">이미지 생성 AI</h3>
389
+ </div>
390
+ <p class="text-sm text-gray-700">주제에 맞는 이미지 생성</p>
391
+ </div>
392
+ <div class="bg-teal-50 rounded-lg p-4">
393
+ <div class="flex items-center mb-2">
394
+ <div class="bg-teal-100 p-2 rounded-full mr-3">
395
+ <i class="fas fa-database text-teal-600"></i>
396
+ </div>
397
+ <h3 class="font-bold text-teal-800">공공 데이터 활용</h3>
398
+ </div>
399
+ <p class="text-sm text-gray-700">부산시 공공 데이터를 활용한 AI 에이전트 개발</p>
400
+ </div>
401
+ <div class="bg-amber-50 rounded-lg p-4">
402
+ <div class="flex items-center mb-2">
403
+ <div class="bg-amber-100 p-2 rounded-full mr-3">
404
+ <i class="fas fa-users text-amber-600"></i>
405
+ </div>
406
+ <h3 class="font-bold text-amber-800">사회적 논의가 필요한 주제</h3>
407
+ </div>
408
+ <p class="text-sm text-gray-700">찬반 논쟁을 위한 AI 활용 경연</p>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="mb-8">
414
+ <h2 class="text-xl font-bold text-gray-800 mb-4">평가 방식</h2>
415
+ <div class="bg-yellow-50 rounded-lg p-4">
416
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
417
+ <li><span class="font-medium">자동화된 평가 시스템:</span> 기본적인 정량 평가 기준 마련</li>
418
+ <li><span class="font-medium">예선 평가 방식:</span> 리더보드 방식으로 실시간으로 순위 변동 공개</li>
419
+ <li><span class="font-medium">본선 평가 방식:</span> 리더보드 방식으로 실시간으로 순위 변동 공개 + 전문가 심사 투표 (상위 10개의 팀의 결과물을 블라인드 투표 방식으로 투표 진행)</li>
420
+ <li><span class="font-medium">평가 기준의 명확화:</span> 분야별 명확한 평가 기준 사전 공개</li>
421
+ </ul>
422
+ </div>
423
+ </div>
424
+
425
+ <div>
426
+ <h2 class="text-xl font-bold text-gray-800 mb-4">특징 및 차별점</h2>
427
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
428
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
429
+ <div class="flex items-center mb-2">
430
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
431
+ <i class="fas fa-chart-line text-purple-600"></i>
432
+ </div>
433
+ <h3 class="font-bold text-purple-800">단계별 난이도 상승</h3>
434
+ </div>
435
+ <p class="text-sm text-gray-700">초기에는 쉬운 과제로 시작하여 점차 난이도 상승</p>
436
+ </div>
437
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
438
+ <div class="flex items-center mb-2">
439
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
440
+ <i class="fas fa-graduation-cap text-blue-600"></i>
441
+ </div>
442
+ <h3 class="font-bold text-blue-800">교육-대회 연계</h3>
443
+ </div>
444
+ <p class="text-sm text-gray-700">사전 교육 프로그램과 연결하여 참여도 제고</p>
445
+ </div>
446
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
447
+ <div class="flex items-center mb-2">
448
+ <div class="bg-green-100 p-2 rounded-full mr-3">
449
+ <i class="fas fa-users text-green-600"></i>
450
+ </div>
451
+ <h3 class="font-bold text-green-800">커뮤니티 대항전</h3>
452
+ </div>
453
+ <p class="text-sm text-gray-700">다양한 AI 커뮤니티 간 대결 구도 형성</p>
454
+ </div>
455
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
456
+ <div class="flex items-center mb-2">
457
+ <div class="bg-red-100 p-2 rounded-full mr-3">
458
+ <i class="fas fa-universal-access text-red-600"></i>
459
+ </div>
460
+ <h3 class="font-bold text-red-800">포용성 강화</h3>
461
+ </div>
462
+ <p class="text-sm text-gray-700">장애인 등 다양한 계층 참여 가능한 형태 고려</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- 리더보드 페이지 -->
470
+ <div id="leaderboard-page" class="hidden fade-in">
471
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
472
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
473
+ <h1 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">리더보드</h1>
474
+ <div class="flex space-x-2">
475
+ <div class="relative">
476
+ <select id="round-select" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-600">
477
+ <option>예선 라운드</option>
478
+ <option>본선 16강</option>
479
+ <option>본선 8강</option>
480
+ <option>본선 4강</option>
481
+ <option>결승</option>
482
+ </select>
483
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
484
+ <i class="fas fa-chevron-down"></i>
485
+ </div>
486
+ </div>
487
+ <div class="relative">
488
+ <select id="task-select" class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-600">
489
+ <option>과제 1: LLM 모델 활용</option>
490
+ <option>과제 2: 이미지 생성 AI</option>
491
+ <option>과제 3: 공공 데이터 활용</option>
492
+ <option>과제 4: 사회적 논의 주제</option>
493
+ </select>
494
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
495
+ <i class="fas fa-chevron-down"></i>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <div class="overflow-x-auto">
502
+ <table class="min-w-full divide-y divide-gray-200">
503
+ <thead class="bg-gray-50">
504
+ <tr>
505
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">순위</th>
506
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">팀명</th>
507
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">분야</th>
508
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">점수</th>
509
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">변동</th>
510
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">API 사용량</th>
511
+ </tr>
512
+ </thead>
513
+ <tbody class="bg-white divide-y divide-gray-200 leaderboard-rows">
514
+ <!-- 리더보드 행들 -->
515
+ <tr class="leaderboard-row hover:bg-gray-50 transition">
516
+ <td class="px-6 py-4 whitespace-nowrap">
517
+ <div class="flex items-center">
518
+ <div class="bg-yellow-100 text-yellow-800 w-8 h-8 rounded-full flex items-center justify-center font-bold">1</div>
519
+ </div>
520
+ </td>
521
+ <td class="px-6 py-4 whitespace-nowrap">
522
+ <div class="flex items-center">
523
+ <div class="flex-shrink-0 h-10 w-10">
524
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
525
+ </div>
526
+ <div class="ml-4">
527
+ <div class="text-sm font-medium text-gray-900">AI 마스터즈</div>
528
+ <div class="text-sm text-gray-500">홍길동, 김철수, 이영희</div>
529
+ </div>
530
+ </div>
531
+ </td>
532
+ <td class="px-6 py-4 whitespace-nowrap">
533
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">일반부</span>
534
+ </td>
535
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">98.7</td>
536
+ <td class="px-6 py-4 whitespace-nowrap">
537
+ <span class="text-green-500 flex items-center">
538
+ <i class="fas fa-arrow-up mr-1"></i> 2
539
+ </span>
540
+ </td>
541
+ <td class="px-6 py-4 whitespace-nowrap">
542
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
543
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 78%"></div>
544
+ </div>
545
+ <div class="text-xs text-gray-500 mt-1">78% (780/1000)</div>
546
+ </td>
547
+ </tr>
548
+
549
+ <tr class="leaderboard-row hover:bg-gray-50 transition">
550
+ <td class="px-6 py-4 whitespace-nowrap">
551
+ <div class="flex items-center">
552
+ <div class="bg-gray-100 text-gray-800 w-8 h-8 rounded-full flex items-center justify-center font-bold">2</div>
553
+ </div>
554
+ </td>
555
+ <td class="px-6 py-4 whitespace-nowrap">
556
+ <div class="flex items-center">
557
+ <div class="flex-shrink-0 h-10 w-10">
558
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
559
+ </div>
560
+ <div class="ml-4">
561
+ <div class="text-sm font-medium text-gray-900">데이터 위자드</div>
562
+ <div class="text-sm text-gray-500">박지성, 최민수, 정다영</div>
563
+ </div>
564
+ </div>
565
+ </td>
566
+ <td class="px-6 py-4 whitespace-nowrap">
567
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">학생부</span>
568
+ </td>
569
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">97.2</td>
570
+ <td class="px-6 py-4 whitespace-nowrap">
571
+ <span class="text-red-500 flex items-center">
572
+ <i class="fas fa-arrow-down mr-1"></i> 1
573
+ </span>
574
+ </td>
575
+ <td class="px-6 py-4 whitespace-nowrap">
576
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
577
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
578
+ </div>
579
+ <div class="text-xs text-gray-500 mt-1">65% (650/1000)</div>
580
+ </td>
581
+ </tr>
582
+
583
+ <tr class="leaderboard-row hover:bg-gray-50 transition">
584
+ <td class="px-6 py-4 whitespace-nowrap">
585
+ <div class="flex items-center">
586
+ <div class="bg-amber-100 text-amber-800 w-8 h-8 rounded-full flex items-center justify-center font-bold">3</div>
587
+ </div>
588
+ </td>
589
+ <td class="px-6 py-4 whitespace-nowrap">
590
+ <div class="flex items-center">
591
+ <div class="flex-shrink-0 h-10 w-10">
592
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
593
+ </div>
594
+ <div class="ml-4">
595
+ <div class="text-sm font-medium text-gray-900">프롬프트 아티스트</div>
596
+ <div class="text-sm text-gray-500">김수영, 이지훈</div>
597
+ </div>
598
+ </div>
599
+ </td>
600
+ <td class="px-6 py-4 whitespace-nowrap">
601
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">일반부</span>
602
+ </td>
603
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">96.5</td>
604
+ <td class="px-6 py-4 whitespace-nowrap">
605
+ <span class="text-green-500 flex items-center">
606
+ <i class="fas fa-arrow-up mr-1"></i> 3
607
+ </span>
608
+ </td>
609
+ <td class="px-6 py-4 whitespace-nowrap">
610
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
611
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 45%"></div>
612
+ </div>
613
+ <div class="text-xs text-gray-500 mt-1">45% (450/1000)</div>
614
+ </td>
615
+ </tr>
616
+
617
+ <tr class="leaderboard-row hover:bg-gray-50 transition">
618
+ <td class="px-6 py-4 whitespace-nowrap">
619
+ <div class="flex items-center">
620
+ <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold">4</div>
621
+ </div>
622
+ </td>
623
+ <td class="px-6 py-4 whitespace-nowrap">
624
+ <div class="flex items-center">
625
+ <div class="flex-shrink-0 h-10 w-10">
626
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
627
+ </div>
628
+ <div class="ml-4">
629
+ <div class="text-sm font-medium text-gray-900">부산 AI 연구회</div>
630
+ <div class="text-sm text-gray-500">장동건, 한가인, 송혜교</div>
631
+ </div>
632
+ </div>
633
+ </td>
634
+ <td class="px-6 py-4 whitespace-nowrap">
635
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">일반부</span>
636
+ </td>
637
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">95.8</td>
638
+ <td class="px-6 py-4 whitespace-nowrap">
639
+ <span class="text-gray-500">-</span>
640
+ </td>
641
+ <td class="px-6 py-4 whitespace-nowrap">
642
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
643
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 90%"></div>
644
+ </div>
645
+ <div class="text-xs text-gray-500 mt-1">90% (900/1000)</div>
646
+ </td>
647
+ </tr>
648
+
649
+ <tr class="leaderboard-row hover:bg-gray-50 transition">
650
+ <td class="px-6 py-4 whitespace-nowrap">
651
+ <div class="flex items-center">
652
+ <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold">5</div>
653
+ </div>
654
+ </td>
655
+ <td class="px-6 py-4 whitespace-nowrap">
656
+ <div class="flex items-center">
657
+ <div class="flex-shrink-0 h-10 w-10">
658
+ <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="">
659
+ </div>
660
+ <div class="ml-4">
661
+ <div class="text-sm font-medium text-gray-900">고등학교 AI 동아리</div>
662
+ <div class="text-sm text-gray-500">이민호, 박보영, 김우빈</div>
663
+ </div>
664
+ </div>
665
+ </td>
666
+ <td class="px-6 py-4 whitespace-nowrap">
667
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">학생부</span>
668
+ </td>
669
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">94.3</td>
670
+ <td class="px-6 py-4 whitespace-nowrap">
671
+ <span class="text-red-500 flex items-center">
672
+ <i class="fas fa-arrow-down mr-1"></i> 2
673
+ </span>
674
+ </td>
675
+ <td class="px-6 py-4 whitespace-nowrap">
676
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
677
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 60%"></div>
678
+ </div>
679
+ <div class="text-xs text-gray-500 mt-1">60% (600/1000)</div>
680
+ </td>
681
+ </tr>
682
+ </tbody>
683
+ </table>
684
+ </div>
685
+
686
+ <div class="mt-6 flex justify-between items-center">
687
+ <div class="text-sm text-gray-500">
688
+ 현재 <span class="font-medium">1,245</span>개 팀 중 상위 <span class="font-medium">5</span>개 팀 표시 중
689
+ </div>
690
+ <nav class="flex items-center space-x-2">
691
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
692
+ <i class="fas fa-angle-left"></i>
693
+ </button>
694
+ <button class="px-3 py-1 rounded bg-purple-600 text-white">1</button>
695
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">2</button>
696
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">3</button>
697
+ <span class="px-2 text-gray-500">...</span>
698
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">25</button>
699
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
700
+ <i class="fas fa-angle-right"></i>
701
+ </button>
702
+ </nav>
703
+ </div>
704
+ </div>
705
+ </div>
706
+
707
+ <!-- 커뮤니티 페이지 -->
708
+ <div id="community-page" class="hidden fade-in">
709
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
710
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
711
+ <h1 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0">커뮤니티 포럼</h1>
712
+ <div class="flex space-x-3">
713
+ <div class="relative">
714
+ <select class="appearance-none bg-white border border-gray-300 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:ring-2 focus:ring-purple-600">
715
+ <option>전체 카테고리</option>
716
+ <option>LLM 모델</option>
717
+ <option>이미지 생성</option>
718
+ <option>공공 데이터</option>
719
+ <option>사회적 논의</option>
720
+ <option>기타</option>
721
+ </select>
722
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
723
+ <i class="fas fa-chevron-down"></i>
724
+ </div>
725
+ </div>
726
+ <button onclick="loadPage('new-post')" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition flex items-center">
727
+ <i class="fas fa-plus mr-2"></i> 새 글 작성
728
+ </button>
729
+ </div>
730
+ </div>
731
+
732
+ <div class="space-y-4">
733
+ <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
734
+ <div class="flex items-start">
735
+ <div class="flex-shrink-0 mr-4">
736
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="프로필" class="w-10 h-10 rounded-full">
737
+ </div>
738
+ <div class="flex-1 min-w-0">
739
+ <div class="flex justify-between items-start mb-1">
740
+ <a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">LLM 모델 최적화 팁 공유합니다</a>
741
+ <span class="text-sm text-gray-500 ml-2">2시간 전</span>
742
+ </div>
743
+ <p class="text-sm text-gray-600 mb-2">여러가지 프롬프트 엔지니어링 기법을 통해 모델 성능을 향상시킬 수 있는 방법을 공유드립니다...</p>
744
+ <div class="flex items-center text-sm text-gray-500">
745
+ <span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 124</span>
746
+ <span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 24</span>
747
+ <span class="flex items-center"><i class="far fa-comment mr-1"></i> 5</span>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </div>
752
+
753
+ <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
754
+ <div class="flex items-start">
755
+ <div class="flex-shrink-0 mr-4">
756
+ <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="프로필" class="w-10 h-10 rounded-full">
757
+ </div>
758
+ <div class="flex-1 min-w-0">
759
+ <div class="flex justify-between items-start mb-1">
760
+ <a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">이미지 생성 모델 비교 분석</a>
761
+ <span class="text-sm text-gray-500 ml-2">5시간 전</span>
762
+ </div>
763
+ <p class="text-sm text-gray-600 mb-2">Stable Diffusion, DALL-E, Midjourney 등 주요 이미지 생성 모델의 장단점을 비교 분석해봤습니다...</p>
764
+ <div class="flex items-center text-sm text-gray-500">
765
+ <span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 98</span>
766
+ <span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 18</span>
767
+ <span class="flex items-center"><i class="far fa-comment mr-1"></i> 7</span>
768
+ </div>
769
+ </div>
770
+ </div>
771
+ </div>
772
+
773
+ <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
774
+ <div class="flex items-start">
775
+ <div class="flex-shrink-0 mr-4">
776
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="프로필" class="w-10 h-10 rounded-full">
777
+ </div>
778
+ <div class="flex-1 min-w-0">
779
+ <div class="flex justify-between items-start mb-1">
780
+ <a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">부산시 공공 데이터 활용 팁</a>
781
+ <span class="text-sm text-gray-500 ml-2">1일 전</span>
782
+ </div>
783
+ <p class="text-sm text-gray-600 mb-2">부산시에서 제공하는 공공 데이터를 효과적으로 활용하는 방법과 주의사항을 공유합니다...</p>
784
+ <div class="flex items-center text-sm text-gray-500">
785
+ <span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 76</span>
786
+ <span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 12</span>
787
+ <span class="flex items-center"><i class="far fa-comment mr-1"></i> 3</span>
788
+ </div>
789
+ </div>
790
+ </div>
791
+ </div>
792
+
793
+ <div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition">
794
+ <div class="flex items-start">
795
+ <div class="flex-shrink-0 mr-4">
796
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="프�로필" class="w-10 h-10 rounded-full">
797
+ </div>
798
+ <div class="flex-1 min-w-0">
799
+ <div class="flex justify-between items-start mb-1">
800
+ <a href="#" class="text-lg font-medium text-gray-900 hover:text-purple-600" onclick="loadPage('community-post')">사회적 논의 주제에 대한 AI 활용 사례</a>
801
+ <span class="text-sm text-gray-500 ml-2">2일 전</span>
802
+ </div>
803
+ <p class="text-sm text-gray-600 mb-2">AI를 활용하여 사회적 논의가 필요한 주제들을 분석하고 시각화한 사례들을 모아봤습니다...</p>
804
+ <div class="flex items-center text-sm text-gray-500">
805
+ <span class="flex items-center mr-4"><i class="far fa-eye mr-1"></i> 145</span>
806
+ <span class="flex items-center mr-4"><i class="far fa-thumbs-up mr-1"></i> 32</span>
807
+ <span class="flex items-center"><i class="far fa-comment mr-1"></i> 8</span>
808
+ </div>
809
+ </div>
810
+ </div>
811
+ </div>
812
+ </div>
813
+
814
+ <div class="mt-6 flex justify-center">
815
+ <nav class="flex items-center space-x-2">
816
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
817
+ <i class="fas fa-angle-left"></i>
818
+ </button>
819
+ <button class="px-3 py-1 rounded bg-purple-600 text-white">1</button>
820
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">2</button>
821
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">3</button>
822
+ <span class="px-2 text-gray-500">...</span>
823
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-700 hover:bg-gray-50">10</button>
824
+ <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
825
+ <i class="fas fa-angle-right"></i>
826
+ </button>
827
+ </nav>
828
+ </div>
829
+ </div>
830
+ </div>
831
+
832
+ <!-- FAQ 페이지 -->
833
+ <div id="faq-page" class="hidden fade-in">
834
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
835
+ <h1 class="text-2xl font-bold text-gray-800 mb-6">자주 묻는 질문 (FAQ)</h1>
836
+
837
+ <div class="mb-6">
838
+ <div class="relative">
839
+ <input type="text" placeholder="FAQ 검색..." class="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
840
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
841
+ <i class="fas fa-search text-gray-400"></i>
842
+ </div>
843
+ </div>
844
+ </div>
845
+
846
+ <div class="mb-6">
847
+ <h2 class="text-lg font-semibold text-gray-800 mb-3">대회 참가 관련</h2>
848
+ <div class="space-y-3">
849
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
850
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
851
+ <span>대회 참가 신청은 어떻게 하나요?</span>
852
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
853
+ </button>
854
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
855
+ <p class="text-gray-700">대회 홈페이지에서 회원가입 후, '대회 등록' 메뉴를 통해 참가 신청을 할 수 있습니다. 팀을 생성하거나 기존 팀에 참여할 수 있으며, 학생부와 일반부 중 선택하여 신청하시면 됩니다.</p>
856
+ </div>
857
+ </div>
858
+
859
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
860
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
861
+ <span>학생부와 일반부의 차이점은 무엇인가요?</span>
862
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
863
+ </button>
864
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
865
+ <p class="text-gray-700">학생부는 초/중/고등학생을 대상으로 하며, 생활기록부에 기재 가능한 공식 시상이 제공됩니다. 일반부는 성인을 대상으로 하며 학생도 참여 가능하지만, 학생부와는 별도의 평가 기준이 적용됩니다.</p>
866
+ </div>
867
+ </div>
868
+
869
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
870
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
871
+ <span>팀원은 몇 명까지 구성할 수 있나요?</span>
872
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
873
+ </button>
874
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
875
+ <p class="text-gray-700">최소 1명부터 최대 3명까지 팀을 구성할 수 있습니다. 팀장이 팀을 생성한 후 팀원을 초대할 수 있으며, 팀원은 초대를 수락해야 팀에 합류할 수 있습니다.</p>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ </div>
880
+
881
+ <div class="mb-6">
882
+ <h2 class="text-lg font-semibold text-gray-800 mb-3">대회 진행 관련</h2>
883
+ <div class="space-y-3">
884
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
885
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
886
+ <span>대회는 어떤 방식으로 진행되나요?</span>
887
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
888
+ </button>
889
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
890
+ <p class="text-gray-700">대회는 예선과 본선으로 나뉘어 진행됩니다. 예선은 온라인으로 진행되며 리더보드 형식으로 실시간 순위가 반영됩니다. 본선은 16강 토너먼트 방식으로 오프라인에서 진행되며, 실시간 중계가 제공됩니다.</p>
891
+ </div>
892
+ </div>
893
+
894
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
895
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
896
+ <span>과제는 어떤 유형으로 출제되나요?</span>
897
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
898
+ </button>
899
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
900
+ <p class="text-gray-700">과제는 크게 4가지 유형으로 출제됩니다: LLM 모델 활용(프롬프트 작성), 이미지 생성 AI, 공공 데이터 활용(AI 에이전트 개발), 사회적 논의가 필요한 주제(찬반 논쟁). 각 라운드마다 다른 유형의 과제가 주어질 수 있습니다.</p>
901
+ </div>
902
+ </div>
903
+
904
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
905
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
906
+ <span>API 사용량은 어떻게 관리되나요?</span>
907
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
908
+ </button>
909
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
910
+ <p class="text-gray-700">각 팀별로 API 사용량이 할당되며, 작업 환경 페이지에서 실시간으로 사용량을 확인할 수 있습니다. 모든 참가자에게 동일한 조건이 제공되며, API 비용은 대회 운영 측에서 관리합니다.</p>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+
916
+ <div class="mb-6">
917
+ <h2 class="text-lg font-semibold text-gray-800 mb-3">평가 및 시상 관련</h2>
918
+ <div class="space-y-3">
919
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
920
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
921
+ <span>대회 평가는 어떤 기준으로 이루어지나요?</span>
922
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
923
+ </button>
924
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
925
+ <p class="text-gray-700">평가는 자동화된 평가 시스템과 전문가 심사로 이루어집니다. 예선은 리더보드 방식으로 실시간 순위가 반영되며, 본선은 리더보드와 전문가 심사 투표가 결합됩니다. 각 과제 유형별로 명확한 평가 기준이 사전에 공개됩니다.</p>
926
+ </div>
927
+ </div>
928
+
929
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
930
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
931
+ <span>상금은 어떻게 지급되나요?</span>
932
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
933
+ </button>
934
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
935
+ <p class="text-gray-700">총 상금 풀은 2억 5천만 원 규모이며, 각 부문별(학생부/일반부)과 순위에 따라 상금이 배분됩니다. 상금은 대회 종료 후 공식 계좌로 이체되며, 필요한 경우 세금 관련 서류를 제출해야 할 수 있습니다.</p>
936
+ </div>
937
+ </div>
938
+
939
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
940
+ <button class="w-full px-4 py-3 text-left font-medium text-gray-800 bg-gray-50 hover:bg-gray-100 flex justify-between items-center" onclick="toggleFAQ(this)">
941
+ <span>학생부 수상자의 경우 생활기록부 기재는 어떻게 하나요?</span>
942
+ <i class="fas fa-chevron-down transition-transform duration-200"></i>
943
+ </button>
944
+ <div class="hidden px-4 py-3 bg-white border-t border-gray-200">
945
+ <p class="text-gray-700">학생부 수상자에게는 공식 수상 증명서가 발급되며, 이를 통해 학교에 생활기록부 기재를 요청할 수 있습니다. 교육청과 연계되어 공식적으로 인정되는 시상이므로 문제없이 기재 가능합니다.</p>
946
+ </div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+
951
+ <div class="border-t border-gray-200 pt-6">
952
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">문의하기</h2>
953
+ <p class="text-gray-600 mb-4">찾으시는 답변이 없으신가요? 직접 문의해주세요.</p>
954
+ <button onclick="loadPage('inquiry')" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition">
955
+ <i class="fas fa-envelope mr-2"></i> 문의하기
956
+ </button>
957
+ </div>
958
+ </div>
959
+ </div>
960
+
961
+ <!-- 대시보드 페이지 (참가자용) -->
962
+ <div id="dashboard-page" class="hidden fade-in">
963
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
964
+ <h1 class="text-2xl font-bold text-gray-800 mb-6">대시보드</h1>
965
+
966
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
967
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
968
+ <div class="flex items-center mb-4">
969
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
970
+ <i class="fas fa-trophy text-purple-600"></i>
971
+ </div>
972
+ <h3 class="font-medium text-gray-800">현재 순위</h3>
973
+ </div>
974
+ <div class="text-3xl font-bold text-gray-800 mb-2">15위</div>
975
+ <div class="text-sm text-gray-500">상위 2% (1,245팀 중)</div>
976
+ </div>
977
+
978
+ <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm card-hover transition">
979
+ <div class="flex items-center mb-4">
980
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
981
+ <i class="fas fa-tasks text-blue-600"></i>
982
+ </div>
983
+ <h3 class="font-medium text-gray-800">과제 진행률</h3>
984
+ </div>
985
+ <div class="flex items-center mb-2">
986
+ <div class
987
+ </html>
prompts.txt ADDED
File without changes