openfree commited on
Commit
f0c6f56
·
verified ·
1 Parent(s): dbd5c92

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +803 -0
index.html CHANGED
@@ -0,0 +1,803 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>K-AI 커뮤니티 허브</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
16
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
17
+ min-height: 100vh;
18
+ position: relative;
19
+ overflow-x: hidden;
20
+ }
21
+
22
+ /* Navigation */
23
+ .nav-container {
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ background: rgba(0, 0, 0, 0.3);
29
+ backdrop-filter: blur(10px);
30
+ z-index: 1000;
31
+ padding: 20px 40px;
32
+ display: flex;
33
+ justify-content: space-between;
34
+ align-items: center;
35
+ }
36
+
37
+ .nav-left {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: 40px;
41
+ }
42
+
43
+ .home-btn {
44
+ color: white;
45
+ text-decoration: none;
46
+ font-size: 18px;
47
+ font-weight: 600;
48
+ transition: opacity 0.3s;
49
+ }
50
+
51
+ .home-btn:hover {
52
+ opacity: 0.8;
53
+ }
54
+
55
+ .tabs {
56
+ display: flex;
57
+ gap: 30px;
58
+ }
59
+
60
+ .tab {
61
+ color: rgba(255, 255, 255, 0.8);
62
+ text-decoration: none;
63
+ font-size: 16px;
64
+ font-weight: 500;
65
+ padding: 8px 16px;
66
+ border-radius: 20px;
67
+ transition: all 0.3s;
68
+ cursor: pointer;
69
+ }
70
+
71
+ .tab:hover {
72
+ background: rgba(255, 255, 255, 0.1);
73
+ color: white;
74
+ }
75
+
76
+ .tab.active {
77
+ background: rgba(255, 255, 255, 0.2);
78
+ color: white;
79
+ }
80
+
81
+ .powered-by {
82
+ color: rgba(255, 255, 255, 0.7);
83
+ font-size: 13px;
84
+ }
85
+
86
+ /* Animated background particles */
87
+ .particles {
88
+ position: fixed;
89
+ top: 0;
90
+ left: 0;
91
+ width: 100%;
92
+ height: 100%;
93
+ overflow: hidden;
94
+ z-index: 1;
95
+ }
96
+
97
+ .particle {
98
+ position: absolute;
99
+ background: rgba(255, 255, 255, 0.1);
100
+ border-radius: 50%;
101
+ animation: float 20s infinite ease-in-out;
102
+ }
103
+
104
+ @keyframes float {
105
+ 0%, 100% {
106
+ transform: translateY(0) translateX(0) scale(1);
107
+ opacity: 0;
108
+ }
109
+ 10% {
110
+ opacity: 0.4;
111
+ }
112
+ 90% {
113
+ opacity: 0.4;
114
+ }
115
+ 100% {
116
+ transform: translateY(-100vh) translateX(100px) scale(0.5);
117
+ opacity: 0;
118
+ }
119
+ }
120
+
121
+ /* Main container */
122
+ .container {
123
+ position: relative;
124
+ z-index: 10;
125
+ max-width: 1200px;
126
+ margin: 0 auto;
127
+ padding: 120px 20px 60px;
128
+ min-height: 100vh;
129
+ display: flex;
130
+ flex-direction: column;
131
+ }
132
+
133
+ /* Tab content */
134
+ .tab-content {
135
+ display: none;
136
+ animation: fadeIn 0.5s ease-out;
137
+ }
138
+
139
+ .tab-content.active {
140
+ display: block;
141
+ }
142
+
143
+ @keyframes fadeIn {
144
+ from {
145
+ opacity: 0;
146
+ }
147
+ to {
148
+ opacity: 1;
149
+ }
150
+ }
151
+
152
+ /* Home tab styles */
153
+ .header {
154
+ text-align: center;
155
+ margin-bottom: 50px;
156
+ animation: fadeInDown 1s ease-out;
157
+ }
158
+
159
+ .header h1 {
160
+ color: white;
161
+ font-size: 48px;
162
+ font-weight: 700;
163
+ margin-bottom: 10px;
164
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
165
+ }
166
+
167
+ .header p {
168
+ color: rgba(255, 255, 255, 0.9);
169
+ font-size: 20px;
170
+ font-weight: 300;
171
+ }
172
+
173
+ .content {
174
+ flex: 1;
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ margin-bottom: 80px;
179
+ }
180
+
181
+ .poster-container {
182
+ background: rgba(255, 255, 255, 0.95);
183
+ border-radius: 20px;
184
+ padding: 40px;
185
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
186
+ text-align: center;
187
+ animation: fadeInUp 1s ease-out 0.5s both;
188
+ backdrop-filter: blur(10px);
189
+ position: relative;
190
+ overflow: hidden;
191
+ }
192
+
193
+ .poster-container::before {
194
+ content: '';
195
+ position: absolute;
196
+ top: -50%;
197
+ left: -50%;
198
+ width: 200%;
199
+ height: 200%;
200
+ background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
201
+ transform: rotate(45deg);
202
+ animation: shine 3s infinite;
203
+ }
204
+
205
+ @keyframes shine {
206
+ 0% {
207
+ transform: translateX(-100%) translateY(-100%) rotate(45deg);
208
+ }
209
+ 100% {
210
+ transform: translateX(100%) translateY(100%) rotate(45deg);
211
+ }
212
+ }
213
+
214
+ .poster {
215
+ max-width: 100%;
216
+ height: auto;
217
+ border-radius: 12px;
218
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
219
+ margin-bottom: 30px;
220
+ position: relative;
221
+ z-index: 1;
222
+ }
223
+
224
+ .cta-section {
225
+ margin-top: 20px;
226
+ }
227
+
228
+ .apply-btn {
229
+ display: inline-block;
230
+ text-decoration: none;
231
+ color: #ffffff;
232
+ background: linear-gradient(135deg, #1976D2 0%, #135ba1 100%);
233
+ padding: 18px 40px;
234
+ border-radius: 50px;
235
+ font-size: 20px;
236
+ font-weight: 600;
237
+ transition: all 0.3s ease;
238
+ box-shadow: 0 5px 20px rgba(25, 118, 210, 0.4);
239
+ position: relative;
240
+ overflow: hidden;
241
+ }
242
+
243
+ .apply-btn::before {
244
+ content: '';
245
+ position: absolute;
246
+ top: 0;
247
+ left: -100%;
248
+ width: 100%;
249
+ height: 100%;
250
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
251
+ transition: left 0.6s ease;
252
+ }
253
+
254
+ .apply-btn:hover {
255
+ transform: translateY(-3px);
256
+ box-shadow: 0 8px 30px rgba(25, 118, 210, 0.6);
257
+ }
258
+
259
+ .apply-btn:hover::before {
260
+ left: 100%;
261
+ }
262
+
263
+ /* External link container */
264
+ .external-container {
265
+ background: rgba(255, 255, 255, 0.95);
266
+ border-radius: 20px;
267
+ padding: 40px;
268
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
269
+ backdrop-filter: blur(10px);
270
+ text-align: center;
271
+ }
272
+
273
+ .external-container h2 {
274
+ color: #333;
275
+ font-size: 28px;
276
+ margin-bottom: 20px;
277
+ }
278
+
279
+ .external-container p {
280
+ color: #666;
281
+ font-size: 16px;
282
+ margin-bottom: 30px;
283
+ line-height: 1.6;
284
+ }
285
+
286
+ .external-link {
287
+ display: inline-block;
288
+ color: #1976D2;
289
+ background: white;
290
+ padding: 14px 30px;
291
+ border-radius: 30px;
292
+ text-decoration: none;
293
+ font-weight: 600;
294
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
295
+ transition: all 0.3s;
296
+ }
297
+
298
+ .external-link:hover {
299
+ transform: translateY(-2px);
300
+ box-shadow: 0 6px 20px rgba(0,0,0,0.15);
301
+ }
302
+
303
+ /* News section styles */
304
+ .news-container {
305
+ display: grid;
306
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
307
+ gap: 30px;
308
+ margin-top: 40px;
309
+ }
310
+
311
+ .news-card {
312
+ background: rgba(255, 255, 255, 0.95);
313
+ border-radius: 16px;
314
+ overflow: hidden;
315
+ box-shadow: 0 10px 30px rgba(0,0,0,0.2);
316
+ transition: all 0.3s;
317
+ cursor: pointer;
318
+ }
319
+
320
+ .news-card:hover {
321
+ transform: translateY(-5px);
322
+ box-shadow: 0 15px 40px rgba(0,0,0,0.25);
323
+ }
324
+
325
+ .news-thumbnail {
326
+ width: 100%;
327
+ height: 200px;
328
+ background-size: cover;
329
+ background-position: center;
330
+ position: relative;
331
+ overflow: hidden;
332
+ }
333
+
334
+ .news-thumbnail::after {
335
+ content: '';
336
+ position: absolute;
337
+ top: 0;
338
+ left: 0;
339
+ right: 0;
340
+ bottom: 0;
341
+ background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.5) 100%);
342
+ }
343
+
344
+ .news-content {
345
+ padding: 25px;
346
+ }
347
+
348
+ .news-title {
349
+ font-size: 20px;
350
+ font-weight: 700;
351
+ color: #333;
352
+ margin-bottom: 10px;
353
+ line-height: 1.4;
354
+ }
355
+
356
+ .news-description {
357
+ font-size: 14px;
358
+ color: #666;
359
+ line-height: 1.6;
360
+ margin-bottom: 15px;
361
+ }
362
+
363
+ .news-source {
364
+ font-size: 12px;
365
+ color: #999;
366
+ display: flex;
367
+ align-items: center;
368
+ gap: 5px;
369
+ }
370
+
371
+ .news-link {
372
+ text-decoration: none;
373
+ color: inherit;
374
+ display: block;
375
+ }
376
+
377
+ /* Footer */
378
+ .footer {
379
+ background: rgba(0, 0, 0, 0.3);
380
+ backdrop-filter: blur(10px);
381
+ padding: 20px;
382
+ text-align: center;
383
+ color: rgba(255, 255, 255, 0.8);
384
+ font-size: 13px;
385
+ margin-top: auto;
386
+ }
387
+
388
+ /* Animations */
389
+ @keyframes fadeInDown {
390
+ from {
391
+ opacity: 0;
392
+ transform: translateY(-30px);
393
+ }
394
+ to {
395
+ opacity: 1;
396
+ transform: translateY(0);
397
+ }
398
+ }
399
+
400
+ @keyframes fadeInUp {
401
+ from {
402
+ opacity: 0;
403
+ transform: translateY(30px);
404
+ }
405
+ to {
406
+ opacity: 1;
407
+ transform: translateY(0);
408
+ }
409
+ }
410
+
411
+ /* Responsive */
412
+ @media (max-width: 768px) {
413
+ .nav-container {
414
+ padding: 15px 20px;
415
+ flex-direction: column;
416
+ gap: 15px;
417
+ }
418
+
419
+ .nav-left {
420
+ flex-direction: column;
421
+ gap: 15px;
422
+ width: 100%;
423
+ }
424
+
425
+ .tabs {
426
+ width: 100%;
427
+ justify-content: center;
428
+ flex-wrap: wrap;
429
+ gap: 10px;
430
+ }
431
+
432
+ .tab {
433
+ font-size: 14px;
434
+ padding: 6px 12px;
435
+ }
436
+
437
+ .powered-by {
438
+ font-size: 11px;
439
+ }
440
+
441
+ .header h1 {
442
+ font-size: 36px;
443
+ }
444
+
445
+ .header p {
446
+ font-size: 18px;
447
+ }
448
+
449
+ .poster-container {
450
+ padding: 20px;
451
+ }
452
+
453
+ .apply-btn {
454
+ font-size: 18px;
455
+ padding: 16px 32px;
456
+ }
457
+
458
+ .container {
459
+ padding-top: 180px;
460
+ }
461
+
462
+ .news-container {
463
+ grid-template-columns: 1fr;
464
+ }
465
+ }
466
+ </style>
467
+ </head>
468
+ <body>
469
+ <!-- Navigation -->
470
+ <nav class="nav-container">
471
+ <div class="nav-left">
472
+ <a href="#" class="home-btn">HOME</a>
473
+ <div class="tabs">
474
+ <a href="#home" class="tab active" data-tab="home">K-AI 커뮤니티 서밋 2025</a>
475
+ <a href="#news" class="tab" data-tab="news">News</a>
476
+ <a href="#heatmap" class="tab" data-tab="heatmap">히트맵 리더보드</a>
477
+ <a href="#korean" class="tab" data-tab="korean">코리안 리더보드</a>
478
+ <a href="#best" class="tab" data-tab="best">베스트 AI</a>
479
+ </div>
480
+ </div>
481
+ <div class="powered-by">Powered by 비드래프트</div>
482
+ </nav>
483
+
484
+ <!-- Animated particles background -->
485
+ <div class="particles">
486
+ <div class="particle" style="width: 80px; height: 80px; left: 10%; animation-delay: 0s;"></div>
487
+ <div class="particle" style="width: 60px; height: 60px; left: 20%; animation-delay: 2s;"></div>
488
+ <div class="particle" style="width: 100px; height: 100px; left: 35%; animation-delay: 4s;"></div>
489
+ <div class="particle" style="width: 40px; height: 40px; left: 50%; animation-delay: 1s;"></div>
490
+ <div class="particle" style="width: 70px; height: 70px; left: 65%; animation-delay: 3s;"></div>
491
+ <div class="particle" style="width: 50px; height: 50px; left: 80%; animation-delay: 5s;"></div>
492
+ <div class="particle" style="width: 90px; height: 90px; left: 90%; animation-delay: 2.5s;"></div>
493
+ </div>
494
+
495
+ <div class="container">
496
+ <!-- Home Tab -->
497
+ <div id="home" class="tab-content active">
498
+ <header class="header">
499
+ <h1>K-AI 커뮤니티 허브</h1>
500
+ <p>한국 AI의 미래를 함께 만들어갑니다</p>
501
+ </header>
502
+
503
+ <main class="content">
504
+ <div class="poster-container">
505
+ <img src="image.png" alt="K-AI 커뮤니티 서밋 2025 포스터" class="poster">
506
+ <div class="cta-section">
507
+ <a href="https://onoffmix.com/event/325919" target="_blank" class="apply-btn">
508
+ 📌 행사 참가 신청하기
509
+ </a>
510
+ </div>
511
+ </div>
512
+ </main>
513
+ </div>
514
+
515
+ <!-- Heatmap Leaderboard Tab -->
516
+ <div id="heatmap" class="tab-content">
517
+ <div class="external-container">
518
+ <h2>🔥 히트맵 리더보드</h2>
519
+ <p>AI 모델들의 성능을 히트맵으로 시각화하여 비교할 수 있는 리더보드입니다.<br>
520
+ 다양한 벤치마크��서의 성능을 한눈에 확인해보세요.</p>
521
+ <a href="https://huggingface.co/spaces/aiqtech/Heatmap-Leaderboard" target="_blank" class="external-link">
522
+ 히트맵 리더보드 바로가기 →
523
+ </a>
524
+ </div>
525
+ </div>
526
+
527
+ <!-- Korean Leaderboard Tab -->
528
+ <div id="korean" class="tab-content">
529
+ <div class="external-container">
530
+ <h2>🇰🇷 코리안 리더보드</h2>
531
+ <p>한국어 AI 모델들의 성능을 평가하고 비교하는 리더보드입니다.<br>
532
+ 한국어 처리 능력에 특화된 모델들의 순위를 확인해보세요.</p>
533
+ <a href="https://huggingface.co/spaces/openfree/Korean-Leaderboard" target="_blank" class="external-link">
534
+ 코리안 리더보드 바로가기 →
535
+ </a>
536
+ </div>
537
+ </div>
538
+
539
+ <!-- Best AI Tab -->
540
+ <div id="best" class="tab-content">
541
+ <div class="external-container">
542
+ <h2>🏆 베스트 AI</h2>
543
+ <p>다양한 카테고리별 최고의 AI 모델들을 소개합니다.<br>
544
+ 각 분야에서 뛰어난 성능을 보이는 AI들을 만나보세요.</p>
545
+ <a href="https://huggingface.co/spaces/openfree/Best-AI" target="_blank" class="external-link">
546
+ 베스트 AI 바로가기 →
547
+ </a>
548
+ </div>
549
+ </div>
550
+
551
+ <!-- News Tab -->
552
+ <div id="news" class="tab-content">
553
+ <header class="header">
554
+ <h1>📰 AI News</h1>
555
+ <p>한국 AI 커뮤니티의 최신 소식과 인사이트</p>
556
+ </header>
557
+
558
+ <div class="news-container">
559
+ <!-- News Card 1 -->
560
+ <div class="news-card">
561
+ <a href="https://zdnet.co.kr/view/?no=20241130181300" target="_blank" class="news-link">
562
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
563
+ </div>
564
+ <div class="news-content">
565
+ <h3 class="news-title">AI 기술의 최신 동향과 미래 전망</h3>
566
+ <p class="news-description">인공지능 기술이 빠르게 발전하면서 산업 전반에 걸친 혁신이 가속화되고 있습니다. 최신 AI 트렌드와 기술 발전 현황을 살펴봅니다.</p>
567
+ <div class="news-source">
568
+ <span>📍</span>
569
+ <span>ZDNet Korea</span>
570
+ </div>
571
+ </div>
572
+ </a>
573
+ </div>
574
+
575
+ <!-- News Card 2 -->
576
+ <div class="news-card">
577
+ <a href="https://brunch.co.kr/@seawolf/33" target="_blank" class="news-link">
578
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
579
+ </div>
580
+ <div class="news-content">
581
+ <h3 class="news-title">AGI 필수 '자기 지휘형 다중화 지능 구현' 발표</h3>
582
+ <p class="news-description">AGI 구현을 위한 핵심 기술인 자기 지휘형 다중화 지능 시스템의 혁신적인 접근법을 소개합니다.</p>
583
+ <div class="news-source">
584
+ <span>📍</span>
585
+ <span>Brunch</span>
586
+ </div>
587
+ </div>
588
+ </a>
589
+ </div>
590
+
591
+ <!-- News Card 3 -->
592
+ <div class="news-card">
593
+ <a href="https://brunch.co.kr/@seawolf/30" target="_blank" class="news-link">
594
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
595
+ </div>
596
+ <div class="news-content">
597
+ <h3 class="news-title">의료 AI의 '거짓말 탐지기'가 등장했다!</h3>
598
+ <p class="news-description">의료 분야에서 AI의 정확성과 신뢰성을 검증하는 혁신적인 시스템이 개발되었습니다.</p>
599
+ <div class="news-source">
600
+ <span>📍</span>
601
+ <span>Brunch</span>
602
+ </div>
603
+ </div>
604
+ </a>
605
+ </div>
606
+
607
+ <!-- News Card 4 -->
608
+ <div class="news-card">
609
+ <a href="https://brunch.co.kr/@seawolf/32" target="_blank" class="news-link">
610
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
611
+ </div>
612
+ <div class="news-content">
613
+ <h3 class="news-title">K-AI 커뮤니티 서밋 2025</h3>
614
+ <p class="news-description">한국 AI 커뮤니티의 대표 행사인 K-AI 서밋 2025의 주요 아젠다와 참여 방법을 안내합니다.</p>
615
+ <div class="news-source">
616
+ <span>📍</span>
617
+ <span>Brunch</span>
618
+ </div>
619
+ </div>
620
+ </a>
621
+ </div>
622
+
623
+ <!-- News Card 5 -->
624
+ <div class="news-card">
625
+ <a href="https://brunch.co.kr/@seawolf/31" target="_blank" class="news-link">
626
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
627
+ </div>
628
+ <div class="news-content">
629
+ <h3 class="news-title">AI가 프리미엄 PPT 생성, 무료 Open Gamma</h3>
630
+ <p class="news-description">누구나 쉽게 전문적인 프레젠테이션을 만들 수 있는 AI 기반 PPT 생성 도구를 소개합니다.</p>
631
+ <div class="news-source">
632
+ <span>📍</span>
633
+ <span>Brunch</span>
634
+ </div>
635
+ </div>
636
+ </a>
637
+ </div>
638
+
639
+ <!-- News Card 6 -->
640
+ <div class="news-card">
641
+ <a href="https://brunch.co.kr/@seawolf/31" target="_blank" class="news-link">
642
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
643
+ </div>
644
+ <div class="news-content">
645
+ <h3 class="news-title">누구나 5분만에 전문 팟캐스트를 만들 수 있는 AI</h3>
646
+ <p class="news-description">AI 기술을 활용하여 전문적인 팟캐스트 콘텐츠를 빠르고 쉽게 제작하는 방법을 알아봅니다.</p>
647
+ <div class="news-source">
648
+ <span>📍</span>
649
+ <span>Brunch</span>
650
+ </div>
651
+ </div>
652
+ </a>
653
+ </div>
654
+
655
+ <!-- News Card 7 -->
656
+ <div class="news-card">
657
+ <a href="https://brunch.co.kr/@seawolf/28" target="_blank" class="news-link">
658
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);">
659
+ </div>
660
+ <div class="news-content">
661
+ <h3 class="news-title">한국 농수산물 도매가격 예측 고급 AI 시스템 연구</h3>
662
+ <p class="news-description">AI를 활용한 농수산물 가격 예측 시스템의 개발과 실제 적용 사례를 살펴봅니다.</p>
663
+ <div class="news-source">
664
+ <span>📍</span>
665
+ <span>Brunch</span>
666
+ </div>
667
+ </div>
668
+ </a>
669
+ </div>
670
+
671
+ <!-- News Card 8 -->
672
+ <div class="news-card">
673
+ <a href="https://brunch.co.kr/@seawolf/27" target="_blank" class="news-link">
674
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);">
675
+ </div>
676
+ <div class="news-content">
677
+ <h3 class="news-title">AI가 인간의 삶과 경제, 미래를 예측하고 시각화</h3>
678
+ <p class="news-description">빅데이터와 AI를 활용한 미래 예측 기술의 현재와 발전 가능성을 탐구합니다.</p>
679
+ <div class="news-source">
680
+ <span>📍</span>
681
+ <span>Brunch</span>
682
+ </div>
683
+ </div>
684
+ </a>
685
+ </div>
686
+
687
+ <!-- News Card 9 -->
688
+ <div class="news-card">
689
+ <a href="https://brunch.co.kr/@seawolf/26" target="_blank" class="news-link">
690
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);">
691
+ </div>
692
+ <div class="news-content">
693
+ <h3 class="news-title">Agentic AI 시대: MCP vs MCO 분석</h3>
694
+ <p class="news-description">자율적으로 작동하는 AI 에이전트 시스템의 두 가지 주요 접근법을 비교 분석합니다.</p>
695
+ <div class="news-source">
696
+ <span>📍</span>
697
+ <span>Brunch</span>
698
+ </div>
699
+ </div>
700
+ </a>
701
+ </div>
702
+
703
+ <!-- News Card 10 -->
704
+ <div class="news-card">
705
+ <a href="https://brunch.co.kr/@seawolf/24" target="_blank" class="news-link">
706
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);">
707
+ </div>
708
+ <div class="news-content">
709
+ <h3 class="news-title">생명의 코드를 다시 쓰다: Protein Genesis</h3>
710
+ <p class="news-description">AI를 활용한 단백질 구조 예측과 생성 기술의 혁명적인 발전을 소개합니다.</p>
711
+ <div class="news-source">
712
+ <span>📍</span>
713
+ <span>Brunch</span>
714
+ </div>
715
+ </div>
716
+ </a>
717
+ </div>
718
+
719
+ <!-- News Card 11 -->
720
+ <div class="news-card">
721
+ <a href="https://brunch.co.kr/@seawolf/23" target="_blank" class="news-link">
722
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);">
723
+ </div>
724
+ <div class="news-content">
725
+ <h3 class="news-title">허깅페이스가 선정한 2024년 글로벌 AI 스타 12선</h3>
726
+ <p class="news-description">2024년 AI 분야에서 주목받은 혁신적인 프로젝트와 연구자들을 만나봅니다.</p>
727
+ <div class="news-source">
728
+ <span>📍</span>
729
+ <span>Brunch</span>
730
+ </div>
731
+ </div>
732
+ </a>
733
+ </div>
734
+
735
+ <!-- News Card 12 -->
736
+ <div class="news-card">
737
+ <a href="https://brunch.co.kr/@seawolf/21" target="_blank" class="news-link">
738
+ <div class="news-thumbnail" style="background-image: linear-gradient(135deg, #9890e3 0%, #b1f4cf 100%);">
739
+ </div>
740
+ <div class="news-content">
741
+ <h3 class="news-title">고양이도 발로 코딩한다는 'MOUSE' AI 서비스</h3>
742
+ <p class="news-description">누구나 쉽게 코딩할 수 있도록 돕는 혁신적인 AI 코딩 어시스턴트를 소개합니다.</p>
743
+ <div class="news-source">
744
+ <span>📍</span>
745
+ <span>Brunch</span>
746
+ </div>
747
+ </div>
748
+ </a>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ </div>
753
+
754
+ <!-- Footer -->
755
+ <footer class="footer">
756
+ <div class="footer-info">
757
+ (주) 비드래프트 | 대표 김민식 | 주소: 서울특별시 강남구 학동로 165 | 사업자 등록번호: 879-87-03063
758
+ </div>
759
+ </footer>
760
+
761
+ <script>
762
+ // Tab switching functionality
763
+ document.querySelectorAll('.tab').forEach(tab => {
764
+ tab.addEventListener('click', (e) => {
765
+ e.preventDefault();
766
+ const targetTab = tab.getAttribute('data-tab');
767
+
768
+ // Update active tab
769
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
770
+ tab.classList.add('active');
771
+
772
+ // Show corresponding content
773
+ document.querySelectorAll('.tab-content').forEach(content => {
774
+ content.classList.remove('active');
775
+ });
776
+ document.getElementById(targetTab).classList.add('active');
777
+ });
778
+ });
779
+
780
+ // Home button functionality
781
+ document.querySelector('.home-btn').addEventListener('click', (e) => {
782
+ e.preventDefault();
783
+ document.querySelector('.tab[data-tab="home"]').click();
784
+ });
785
+
786
+ // Add dynamic particles on mouse move
787
+ document.addEventListener('mousemove', (e) => {
788
+ if (Math.random() > 0.95) {
789
+ const particle = document.createElement('div');
790
+ particle.className = 'particle';
791
+ particle.style.width = Math.random() * 20 + 10 + 'px';
792
+ particle.style.height = particle.style.width;
793
+ particle.style.left = e.clientX + 'px';
794
+ particle.style.top = e.clientY + 'px';
795
+ particle.style.animationDuration = Math.random() * 3 + 2 + 's';
796
+ document.querySelector('.particles').appendChild(particle);
797
+
798
+ setTimeout(() => particle.remove(), 5000);
799
+ }
800
+ });
801
+ </script>
802
+ </body>
803
+ </html>