174 lines
8.8 KiB
HTML
174 lines
8.8 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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet" />
|
|
|
|
<script src="/script/navigation.js"></script>
|
|
<title>UADECK V3.1 - Union Arena Deck Builder</title>
|
|
|
|
<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="article" />
|
|
<meta property="og:title" content="유니온 아레나 덱빌더" />
|
|
<meta property="og:description" content="자신만의 덱을 만들고, 다른 플레이어들과 공유해보세요." />
|
|
<meta property="og:image" content="https://uniare.zenncloud.com/images/logo_unionarena.png" />
|
|
<meta property="og:url" content="https://uniare.zenncloud.com/" />
|
|
</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">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden">
|
|
<img src="/images/assets/apple-touch-icon.png" alt="UA Logo" class="w-6 h-6 object-contain" />
|
|
</div>
|
|
<span class="text-xl font-extrabold tracking-tight text-slate-800">
|
|
UADECK
|
|
<span class="text-blue-600">v3.1</span>
|
|
</span>
|
|
</div>
|
|
|
|
<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>
|
|
</nav>
|
|
|
|
<main class="max-w-7xl mx-auto px-6 pt-12 pb-24">
|
|
<header class="text-center mb-16">
|
|
<h2 id="display-main-title" class="text-4xl sm:text-5xl font-black text-slate-900 mb-4 tracking-tight"></h2>
|
|
<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') || '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">${error.message}</p>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
window.changeLanguage = function (lang) {
|
|
localStorage.setItem('lang', lang);
|
|
const currentUrl = new URL(window.location.href);
|
|
currentUrl.searchParams.set('lang', lang);
|
|
window.history.pushState({}, '', currentUrl.toString());
|
|
loadSeriesList();
|
|
};
|
|
|
|
window.addEventListener('popstate', () => loadSeriesList());
|
|
loadSeriesList();
|
|
</script>
|
|
</body>
|
|
</html>
|