o2o-triple-pick/frontend/public/ai-soccer-prediction.html

153 lines
5.7 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI 축구 승부예측 — GPT·Claude·Gemini의 선택은? | TriplePick</title>
<meta name="description" content="ChatGPT, Claude, Gemini 3개 AI가 2026 월드컵 경기 결과를 예측합니다. AI 예측 근거 공개, 실시간 군중 픽 비율 확인. 내 예측으로 AI를 이겨보세요." />
<meta name="keywords" content="AI 축구 예측, ChatGPT 축구, AI 승부예측, 인공지능 축구 분석, Gemini 월드컵, Claude 축구, AI 스포츠 예측, 축구 AI, GPT 월드컵 예측, 2026 월드컵 AI" />
<link rel="canonical" href="https://triplepick.o2o.kr/ai-soccer-prediction" />
<meta property="og:title" content="AI 축구 승부예측 — GPT·Claude·Gemini | TriplePick" />
<meta property="og:description" content="3개의 AI가 월드컵을 예측합니다. AI를 이기면 100만원." />
<meta property="og:url" content="https://triplepick.o2o.kr/ai-soccer-prediction" />
<meta property="og:type" content="website" />
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0a0a0f;
color: #e8e8e8;
min-height: 100vh;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 48px 20px 64px; }
.badge {
display: inline-block;
background: #00ff8822;
border: 1px solid #00ff8855;
color: #00ff88;
font-size: 13px;
font-weight: 700;
padding: 4px 14px;
border-radius: 999px;
margin-bottom: 20px;
}
h1 {
font-size: clamp(26px, 6vw, 38px);
font-weight: 900;
line-height: 1.2;
margin-bottom: 16px;
}
h1 span { color: #00ff88; }
.lead {
font-size: 16px;
line-height: 1.7;
color: #b0b0c0;
margin-bottom: 36px;
}
.ai-list { margin-bottom: 36px; display: flex; flex-direction: column; gap: 12px; }
.ai-row {
background: #13131e;
border: 1px solid #ffffff14;
border-radius: 14px;
padding: 18px 20px;
display: flex;
align-items: center;
gap: 16px;
}
.ai-name { font-size: 16px; font-weight: 800; min-width: 80px; }
.ai-name.gpt { color: #10a37f; }
.ai-name.claude { color: #cc785c; }
.ai-name.gemini { color: #4285f4; }
.ai-desc { font-size: 13px; color: #8888a0; line-height: 1.5; }
h2 { font-size: 20px; font-weight: 800; margin-bottom: 16px; }
.step-list { counter-reset: step; display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.step {
background: #13131e;
border: 1px solid #ffffff14;
border-radius: 14px;
padding: 16px 20px 16px 56px;
position: relative;
font-size: 14px;
line-height: 1.6;
color: #c0c0d0;
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
left: 18px;
top: 16px;
width: 24px;
height: 24px;
background: #00ff8820;
border: 1px solid #00ff8840;
color: #00ff88;
font-size: 12px;
font-weight: 900;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 24px;
text-align: center;
}
.step strong { color: #ffffff; }
.cta {
display: block;
text-align: center;
background: #00ff88;
color: #000;
font-size: 17px;
font-weight: 900;
padding: 16px 32px;
border-radius: 14px;
text-decoration: none;
margin-top: 40px;
transition: opacity .15s;
}
.cta:hover { opacity: .85; }
footer { margin-top: 48px; text-align: center; font-size: 12px; color: #44445a; }
footer a { color: #44445a; }
</style>
</head>
<body>
<div class="wrap">
<div class="badge">AI vs 인간 대결</div>
<h1><span>GPT · Claude · Gemini</span><br />3개의 AI가 월드컵을 예측한다면?</h1>
<p class="lead">
세계 최고 수준의 AI 3종이 2026 FIFA 월드컵 경기 결과를 예측합니다.<br />
AI들의 예측 근거까지 공개되며, 당신이 직접 AI를 이길 수 있습니다.
</p>
<div class="ai-list">
<div class="ai-row">
<div class="ai-name gpt">GPT</div>
<div class="ai-desc">OpenAI의 GPT 모델. 방대한 축구 통계와 역대 경기 데이터를 기반으로 예측.</div>
</div>
<div class="ai-row">
<div class="ai-name claude">Claude</div>
<div class="ai-desc">Anthropic의 Claude. 팀 컨디션, 전술 분석, 최근 폼을 종합해 예측.</div>
</div>
<div class="ai-row">
<div class="ai-name gemini">Gemini</div>
<div class="ai-desc">Google의 Gemini. 최신 뉴스와 실시간 정보까지 반영한 예측.</div>
</div>
</div>
<h2>어떻게 참여하나요?</h2>
<div class="step-list">
<div class="step">사이트에 접속해 <strong>이메일로 참여 등록</strong>합니다. 완전 무료.</div>
<div class="step">경기 킥오프 5일 전부터 투표 가능. <strong>홈팀 승·무·원정팀 승</strong> 중 하나를 선택.</div>
<div class="step">킥오프 직전에 <strong>AI 3개의 예측</strong>과 전체 참여자 픽 비율이 공개됩니다.</div>
<div class="step">경기 종료 후 결과 확인. AI보다 더 많이 맞히면 <strong>100만원 상금</strong> 도전!</div>
</div>
<a class="cta" href="https://triplepick.o2o.kr/">AI 예측 보러 가기 →</a>
<footer>
<p><a href="https://triplepick.o2o.kr/">TriplePick 2026</a> &nbsp;|&nbsp; AI Prediction Arena</p>
</footer>
</div>
</body>
</html>