218 lines
12 KiB
HTML
218 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4516420168710424" crossorigin="anonymous"></script>
|
|
<link rel="stylesheet" href="./style/output.css" />
|
|
<link rel="stylesheet" href="./style/brand.css" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet" />
|
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/images/assets/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/images/assets/favicon-16x16.png" />
|
|
<link rel="canonical" href="https://uniare.sori.studio/" />
|
|
|
|
<script src="/script/navigation.js"></script>
|
|
<script src="/script/api.js"></script>
|
|
<link rel="stylesheet" href="./style/auth-header.css" />
|
|
<title>UNIARE | 유니온 아레나 덱 빌더</title>
|
|
<meta name="description" content="UNIARE에서 유니온 아레나 카드를 검색하고 나만의 덱을 만들어 저장·공유해 보세요. 공개 덱을 둘러보고 즐겨찾기로 관리할 수 있습니다." />
|
|
<meta name="application-name" content="UNIARE" />
|
|
<meta name="robots" content="index, follow" />
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', 'Noto Sans KR', sans-serif;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.series-card {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.series-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.lang-btn-active {
|
|
background-color: #1e293b !important;
|
|
color: white !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
</style>
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="UNIARE" />
|
|
<meta property="og:locale" content="ko_KR" />
|
|
<meta property="og:title" content="UNIARE | 유니온 아레나 덱 빌더" />
|
|
<meta property="og:description" content="유니온 아레나 카드를 검색하고 나만의 덱을 만들어 저장·공유하세요." />
|
|
<meta property="og:image" content="https://uniare.sori.studio/images/assets/uniare-h48.png" />
|
|
<meta property="og:image:alt" content="UNIARE" />
|
|
<meta property="og:url" content="https://uniare.sori.studio/" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:title" content="UNIARE | 유니온 아레나 덱 빌더" />
|
|
<meta name="twitter:description" content="유니온 아레나 카드를 검색하고 나만의 덱을 만들어 저장·공유하세요." />
|
|
<meta name="twitter:image" content="https://uniare.sori.studio/images/assets/uniare-h48.png" />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@graph": [
|
|
{
|
|
"@type": "WebSite",
|
|
"name": "UNIARE",
|
|
"alternateName": "유니온 아레나 덱 빌더",
|
|
"url": "https://uniare.sori.studio/"
|
|
},
|
|
{
|
|
"@type": "WebApplication",
|
|
"name": "UNIARE",
|
|
"url": "https://uniare.sori.studio/",
|
|
"description": "유니온 아레나 카드를 검색하고 덱을 만들어 저장·공유할 수 있는 웹 서비스",
|
|
"applicationCategory": "GameApplication",
|
|
"operatingSystem": "Web"
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class="text-slate-900">
|
|
<nav class="sticky top-0 z-50 bg-white/70 backdrop-blur-lg border-b border-slate-200">
|
|
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<a href="/" class="app-brand">
|
|
<img src="/images/assets/uniare-h48.png" alt="UNIARE" class="app-brand-logo" width="120" height="32" />
|
|
</a>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<div class="language-selector flex gap-1 p-1 bg-slate-100 rounded-xl">
|
|
<button type="button" onclick="changeLanguage('ko')" id="lang-ko" class="rounded-lg px-4 py-1.5 text-xs font-bold transition-all cursor-pointer text-slate-500 hover:text-slate-800">KO</button>
|
|
<button type="button" onclick="changeLanguage('ja')" id="lang-ja" class="rounded-lg px-4 py-1.5 text-xs font-bold transition-all cursor-pointer text-slate-500 hover:text-slate-800">JA</button>
|
|
<button type="button" onclick="changeLanguage('en')" id="lang-en" class="rounded-lg px-4 py-1.5 text-xs font-bold transition-all cursor-pointer text-slate-500 hover:text-slate-800">EN</button>
|
|
</div>
|
|
<div id="auth-header-slot"></div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-7xl mx-auto px-6 pt-12 pb-24">
|
|
<header class="text-center mb-16">
|
|
<h1 id="display-main-title" class="text-4xl sm:text-5xl font-black text-slate-900 mb-4 tracking-tight">Master Your Strategy</h1>
|
|
<p id="display-main-desc" class="text-slate-500 text-lg max-w-2xl mx-auto leading-relaxed">유니온 아레나 카드를 검색하고 나만의 덱을 만들어 저장·공유해 보세요.</p>
|
|
</header>
|
|
|
|
<div id="app">
|
|
<div id="series-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
|
|
<div class="h-32 bg-slate-200 rounded-2xl animate-pulse-slow"></div>
|
|
<div class="h-32 bg-slate-200 rounded-2xl animate-pulse-slow"></div>
|
|
<div class="h-32 bg-slate-200 rounded-2xl animate-pulse-slow"></div>
|
|
<div class="h-32 bg-slate-200 rounded-2xl animate-pulse-slow"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script type="module">
|
|
async function loadSeriesList() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const lang = urlParams.get('lang') || localStorage.getItem('lang') || 'ko';
|
|
|
|
try {
|
|
const response = await fetch(`./i18n/translations.${lang}.json`);
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
|
|
const translations = await response.json();
|
|
if (!translations) throw new Error(`No translation data found`);
|
|
|
|
// 상단 헤더 텍스트 업데이트
|
|
const titleEl = document.getElementById('display-main-title');
|
|
const descEl = document.getElementById('display-main-desc');
|
|
|
|
if (titleEl && translations.mainTitle) titleEl.textContent = translations.mainTitle;
|
|
if (descEl && translations.mainDesc) descEl.innerHTML = translations.mainDesc;
|
|
|
|
if (!translations.series) throw new Error(`No series data found`);
|
|
|
|
const seriesTitles = translations.series;
|
|
const container = document.getElementById('series-container');
|
|
container.innerHTML = '';
|
|
|
|
Object.entries(seriesTitles).forEach(([key, name]) => {
|
|
const button = document.createElement('button');
|
|
button.type = 'button';
|
|
button.className = 'series-card group relative flex flex-col items-center justify-center min-h-[120px] p-6 text-center bg-white border border-slate-200 rounded-2xl shadow-sm hover:shadow-xl hover:border-blue-500 cursor-pointer overflow-hidden';
|
|
|
|
button.innerHTML = `
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
|
<span class="text-base font-bold text-slate-700 group-hover:text-blue-600 transition-colors break-words text-balance">${name}</span>
|
|
<div class="absolute flex items-center gap-1 bottom-4 right-4 opacity-0 group-hover:opacity-100 transform translate-x-[-8px] group-hover:translate-x-0 transition-all duration-300">
|
|
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest group-hover:text-blue-500">
|
|
${key}
|
|
</span>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" class="text-blue-600">
|
|
<path d="M4.5 3L7.5 6L4.5 9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
`;
|
|
|
|
button.addEventListener('click', () => {
|
|
const encodedSeriesKey = encodeURIComponent(key);
|
|
const encodedSeriesName = encodeURIComponent(name);
|
|
window.location.href = `cardList.html?series=${encodedSeriesKey}&seriesName=${encodedSeriesName}&lang=${lang}`;
|
|
});
|
|
container.appendChild(button);
|
|
});
|
|
|
|
// 언어 버튼 활성화 스타일 업데이트
|
|
document.querySelectorAll('.language-selector button').forEach((btn) => {
|
|
btn.classList.remove('lang-btn-active');
|
|
});
|
|
const activeBtn = document.getElementById(`lang-${lang}`);
|
|
if (activeBtn) activeBtn.classList.add('lang-btn-active');
|
|
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
document.getElementById('series-container').innerHTML = `
|
|
<div class="col-span-full py-20 text-center">
|
|
<p class="text-red-500 font-bold">시리즈 정보를 불러오지 못했습니다.</p>
|
|
<p class="mt-2 text-sm text-slate-500">잠시 후 페이지를 새로고침해 주세요.</p>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
window.changeLanguage = async function (lang) {
|
|
localStorage.setItem('lang', lang);
|
|
const currentUrl = new URL(window.location.href);
|
|
currentUrl.searchParams.set('lang', lang);
|
|
window.history.pushState({}, '', currentUrl.toString());
|
|
await loadSeriesList();
|
|
if (window.UaPageI18n?.applyPageI18n) {
|
|
await window.UaPageI18n.applyPageI18n();
|
|
}
|
|
if (window.UaDeckAuth?.refresh) {
|
|
await window.UaDeckAuth.refresh();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('popstate', () => loadSeriesList());
|
|
loadSeriesList();
|
|
</script>
|
|
<script src="/script/page-i18n.js"></script>
|
|
<script src="/script/auth-header.js"></script>
|
|
</body>
|
|
</html>
|