refactor: 가격표 섹션 히어로 아래로 이동 및 탭 스타일 통일
- 가격표 섹션을 페이지 하단에서 히어로 바로 아래로 이동 - 상단 패딩 축소 (py-24 → pt-12 pb-24) - 서브탭(서울/글로벌 타입) 스타일을 메인탭과 동일하게 통일 - Pages Functions API 프록시 추가 (functions/) - wrangler.toml 및 TypeScript 설정 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
528
index.html
528
index.html
@@ -243,6 +243,268 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" class="pt-12 pb-24 relative overflow-hidden">
|
||||
<!-- Background Effects -->
|
||||
<div class="absolute inset-0 gradient-bg opacity-50"></div>
|
||||
<div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div class="text-center mb-8 animate-on-scroll">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-sm text-slate-300 mb-6">
|
||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
||||
투명한 가격 정책
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
|
||||
<p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
|
||||
<p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
|
||||
</div>
|
||||
|
||||
<!-- Real-time Cloud Pricing -->
|
||||
<div x-data="pricingTable()" x-init="init()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg font-bold text-white">🔥 Forge Instances</span>
|
||||
<span x-show="fromCache" class="text-xs text-slate-500 glass-panel px-2 py-1 rounded">캐시됨</span>
|
||||
</div>
|
||||
<button @click="forceRefresh()" :disabled="loading" class="p-2 glass-panel rounded-lg hover:bg-slate-700 transition disabled:opacity-50" title="새로고침">
|
||||
<svg class="w-5 h-5 text-slate-400" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- City Tabs -->
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<template x-for="city in cities" :key="city.id">
|
||||
<button
|
||||
@click="selectedCity = city.id; onFilterChange()"
|
||||
:class="selectedCity === city.id
|
||||
? 'bg-brand-500 text-white border-brand-500'
|
||||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
|
||||
:title="city.desc || ''">
|
||||
<span x-text="city.flag"></span>
|
||||
<span x-text="city.name"></span>
|
||||
<span x-show="city.desc" class="text-[10px] opacity-60 hidden md:inline" x-text="city.desc"></span>
|
||||
<span class="text-xs opacity-70" x-text="'(' + getInstanceCountByCity(city.id) + ')'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Seoul Subtabs (서울 선택 시 인스턴스 타입 필터) -->
|
||||
<div x-show="selectedCity === 'seoul'" x-transition class="mb-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template x-for="type in seoulTypes" :key="type.id">
|
||||
<button
|
||||
@click="selectedSeoulType = type.id; onFilterChange()"
|
||||
:class="selectedSeoulType === type.id
|
||||
? 'bg-brand-500 text-white border-brand-500'
|
||||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
|
||||
:title="type.desc">
|
||||
<span x-text="type.name"></span>
|
||||
<span class="text-xs opacity-70" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
|
||||
<div x-show="selectedCity === 'global'" x-transition class="mb-4">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template x-for="type in globalTypes" :key="type.id">
|
||||
<button
|
||||
@click="selectedGlobalType = type.id; onFilterChange()"
|
||||
:class="selectedGlobalType === type.id
|
||||
? 'bg-brand-500 text-white border-brand-500'
|
||||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
|
||||
:title="type.desc">
|
||||
<span x-text="type.name"></span>
|
||||
<span class="text-xs opacity-70" x-text="'(' + getGlobalTypeCount(type.id) + ')'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GPU 탭에서 간격 맞추기 -->
|
||||
<div x-show="selectedCity.startsWith('gpu-')" class="mb-4"></div>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div class="flex justify-between items-center mb-4 text-xs text-slate-500">
|
||||
<span x-show="!loading && !error">
|
||||
<span x-text="filteredInstances.length"></span>개 인스턴스
|
||||
<span x-show="selectedCity !== 'all'"> · <span x-text="cities.find(c => c.id === selectedCity)?.name"></span></span>
|
||||
<span x-show="selectedCity === 'seoul'"> · <span x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span></span>
|
||||
<span x-show="selectedCity === 'global'"> · <span x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span></span>
|
||||
</span>
|
||||
<span x-show="loading" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
불러오는 중...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div x-show="error" class="mb-4 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
|
||||
<span x-text="error"></span>
|
||||
<button @click="refresh()" class="ml-2 underline hover:no-underline">다시 시도</button>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Table -->
|
||||
<div x-show="!error" x-transition class="overflow-x-auto">
|
||||
<table class="w-full text-left font-sans" aria-label="클라우드 인스턴스 가격 비교표">
|
||||
<caption class="sr-only">실시간 클라우드 인스턴스 가격입니다.</caption>
|
||||
<thead>
|
||||
<tr class="text-slate-500 text-sm border-b border-slate-700">
|
||||
<!-- GPU 컬럼 (GPU 탭에서만 표시) -->
|
||||
<th x-show="selectedCity.startsWith('gpu-')" class="pb-4 font-medium pl-4 text-left">GPU 모델</th>
|
||||
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" :class="!selectedCity.startsWith('gpu-') && 'pl-4'" @click="toggleSort('vcpu')">
|
||||
vCPU <span x-show="sortBy === 'vcpu'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||||
</th>
|
||||
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" @click="toggleSort('memory')">
|
||||
RAM <span x-show="sortBy === 'memory'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||||
</th>
|
||||
<th class="pb-4 font-medium text-center">Storage</th>
|
||||
<th class="pb-4 font-medium text-center">Transfer</th>
|
||||
<th class="pb-4 font-medium text-right">시간요금</th>
|
||||
<th class="pb-4 font-medium text-right pr-4 cursor-pointer hover:text-white transition" @click="toggleSort('price')">
|
||||
월요금 <span x-show="sortBy === 'price'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-slate-300 text-sm">
|
||||
<!-- Loading Skeleton -->
|
||||
<template x-if="loading && filteredInstances.length === 0">
|
||||
<template x-for="i in 5" :key="i">
|
||||
<tr class="border-b border-slate-700/50 animate-pulse">
|
||||
<td class="py-4 pl-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-10 mx-auto"></div></td>
|
||||
<td class="py-4 text-right"><div class="h-4 bg-slate-700 rounded w-16 ml-auto"></div></td>
|
||||
<td class="py-4 pr-4 text-right"><div class="h-4 bg-slate-700 rounded w-20 ml-auto"></div></td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Instance Rows -->
|
||||
<template x-for="(inst, idx) in filteredInstances" :key="inst.id + '-' + (inst.region?.region_code || idx)">
|
||||
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition" :class="idx === 0 && 'bg-brand-500/5 border-l-4 border-l-brand-500'">
|
||||
<!-- GPU (GPU 탭에서만 표시) -->
|
||||
<td x-show="selectedCity.startsWith('gpu-')" class="py-4 pl-4 text-left">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-green-400 font-bold text-sm" x-text="inst.instance_name || inst.gpu_type"></span>
|
||||
<span class="text-[10px] text-slate-500" x-text="inst.gpu_count > 1 ? inst.gpu_count + '× GPU' : ''"></span>
|
||||
</div>
|
||||
</td>
|
||||
<!-- vCPU -->
|
||||
<td class="py-4 text-center" :class="!selectedCity.startsWith('gpu-') && 'pl-4'">
|
||||
<span class="text-brand-400 font-bold" x-text="inst.vcpu + ' Core' + (inst.vcpu > 1 ? 's' : '')"></span>
|
||||
<span x-show="inst.id && inst.id.endsWith('-v6')" class="ml-1 text-[10px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-medium">IPv6 only</span>
|
||||
</td>
|
||||
<!-- RAM -->
|
||||
<td class="py-4 text-center" x-text="formatMemory(inst.memory_mb)"></td>
|
||||
<!-- Storage -->
|
||||
<td class="py-4 text-center">
|
||||
<span x-text="formatStorage(inst.storage_gb)"></span>
|
||||
<span x-show="inst.storage_gb && inst.storage_gb <= 1" class="ml-1 text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded font-medium">블록 스토리지 전용</span>
|
||||
</td>
|
||||
<!-- Transfer -->
|
||||
<td class="py-4 text-center" x-text="formatTransfer(inst.transfer_tb)"></td>
|
||||
<!-- 시간당 요금 (DB에서 가져온 한화 금액) -->
|
||||
<td class="py-4 text-right">
|
||||
<div class="text-sm text-slate-400" x-text="formatKrwHourly(inst.pricing?.hourly_price_krw)"></div>
|
||||
</td>
|
||||
<!-- 월 요금 (DB에서 가져온 한화 금액) -->
|
||||
<td class="py-4 pr-4 text-right">
|
||||
<div class="font-bold text-lg" :class="idx === 0 ? 'text-brand-400' : 'text-white'" x-text="formatKrw(inst.pricing?.monthly_price_krw)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<template x-if="!loading && filteredInstances.length === 0 && !error">
|
||||
<tr>
|
||||
<td :colspan="selectedCity.startsWith('gpu-') ? 7 : 6" class="py-12 text-center text-slate-500">
|
||||
선택한 조건에 맞는 인스턴스가 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer Note -->
|
||||
<div class="mt-6 text-xs text-slate-500">
|
||||
<p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Highlight -->
|
||||
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
|
||||
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bare Metal Section -->
|
||||
<div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
|
||||
<!-- Background Glow Effects -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
|
||||
<div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
|
||||
EXTREME PERFORMANCE
|
||||
</div>
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
|
||||
<p class="text-slate-400 max-w-xl leading-relaxed">
|
||||
가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
|
||||
<span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
|
||||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
|
||||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
|
||||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center md:items-end gap-4">
|
||||
<div class="text-center md:text-right glass-panel p-6 rounded-2xl">
|
||||
<span class="text-sm text-slate-400">Live Inventory Pricing</span>
|
||||
<div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
|
||||
<p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
|
||||
<p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
|
||||
</div>
|
||||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl hover:shadow-lg hover:shadow-brand-500/30 transition-all flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
||||
실시간 재고/가격 조회 (Bot)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technical Features -->
|
||||
<section id="features" class="py-24 bg-dark-800 relative overflow-hidden">
|
||||
<!-- Background accent -->
|
||||
@@ -576,272 +838,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing -->
|
||||
<section id="pricing" class="py-24 relative overflow-hidden">
|
||||
<!-- Background Effects -->
|
||||
<div class="absolute inset-0 gradient-bg opacity-50"></div>
|
||||
<div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute bottom-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div class="text-center mb-8 animate-on-scroll">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-sm text-slate-300 mb-6">
|
||||
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
||||
투명한 가격 정책
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
|
||||
<p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
|
||||
<p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
|
||||
</div>
|
||||
|
||||
<!-- Real-time Cloud Pricing -->
|
||||
<div x-data="pricingTable()" x-init="init()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-lg font-bold text-white">🔥 Forge Instances</span>
|
||||
<span x-show="fromCache" class="text-xs text-slate-500 glass-panel px-2 py-1 rounded">캐시됨</span>
|
||||
</div>
|
||||
<button @click="forceRefresh()" :disabled="loading" class="p-2 glass-panel rounded-lg hover:bg-slate-700 transition disabled:opacity-50" title="새로고침">
|
||||
<svg class="w-5 h-5 text-slate-400" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- City Tabs -->
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<template x-for="city in cities" :key="city.id">
|
||||
<button
|
||||
@click="selectedCity = city.id; onFilterChange()"
|
||||
:class="selectedCity === city.id
|
||||
? 'bg-brand-500 text-white border-brand-500'
|
||||
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
|
||||
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
|
||||
:title="city.desc || ''">
|
||||
<span x-text="city.flag"></span>
|
||||
<span x-text="city.name"></span>
|
||||
<span x-show="city.desc" class="text-[10px] opacity-60 hidden md:inline" x-text="city.desc"></span>
|
||||
<span class="text-xs opacity-70" x-text="'(' + getInstanceCountByCity(city.id) + ')'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Seoul Subtabs (서울 선택 시 인스턴스 타입 필터) -->
|
||||
<div x-show="selectedCity === 'seoul'" x-transition class="mb-4">
|
||||
<div class="glass-panel rounded-xl p-1 inline-flex gap-1">
|
||||
<template x-for="type in seoulTypes" :key="type.id">
|
||||
<button
|
||||
@click="selectedSeoulType = type.id; onFilterChange()"
|
||||
:class="selectedSeoulType === type.id
|
||||
? 'bg-brand-500/20 text-brand-400 shadow-lg shadow-brand-500/10'
|
||||
: 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
|
||||
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5"
|
||||
:title="type.desc">
|
||||
<span x-text="type.name"></span>
|
||||
<span class="text-[10px] opacity-60" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
|
||||
<div x-show="selectedCity === 'global'" x-transition class="mb-4">
|
||||
<div class="glass-panel rounded-xl p-1 inline-flex gap-1">
|
||||
<template x-for="type in globalTypes" :key="type.id">
|
||||
<button
|
||||
@click="selectedGlobalType = type.id; onFilterChange()"
|
||||
:class="selectedGlobalType === type.id
|
||||
? 'bg-brand-500/20 text-brand-400 shadow-lg shadow-brand-500/10'
|
||||
: 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
|
||||
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5"
|
||||
:title="type.desc">
|
||||
<span x-text="type.name"></span>
|
||||
<span class="text-[10px] opacity-60" x-text="'(' + getGlobalTypeCount(type.id) + ')'"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GPU 탭에서 간격 맞추기 -->
|
||||
<div x-show="selectedCity.startsWith('gpu-')" class="mb-4"></div>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div class="flex justify-between items-center mb-4 text-xs text-slate-500">
|
||||
<span x-show="!loading && !error">
|
||||
<span x-text="filteredInstances.length"></span>개 인스턴스
|
||||
<span x-show="selectedCity !== 'all'"> · <span x-text="cities.find(c => c.id === selectedCity)?.name"></span></span>
|
||||
<span x-show="selectedCity === 'seoul'"> · <span x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span></span>
|
||||
<span x-show="selectedCity === 'global'"> · <span x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span></span>
|
||||
</span>
|
||||
<span x-show="loading" class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
불러오는 중...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div x-show="error" class="mb-4 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
|
||||
<span x-text="error"></span>
|
||||
<button @click="refresh()" class="ml-2 underline hover:no-underline">다시 시도</button>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Table -->
|
||||
<div x-show="!error" x-transition class="overflow-x-auto">
|
||||
<table class="w-full text-left font-sans" aria-label="클라우드 인스턴스 가격 비교표">
|
||||
<caption class="sr-only">실시간 클라우드 인스턴스 가격입니다.</caption>
|
||||
<thead>
|
||||
<tr class="text-slate-500 text-sm border-b border-slate-700">
|
||||
<!-- GPU 컬럼 (GPU 탭에서만 표시) -->
|
||||
<th x-show="selectedCity.startsWith('gpu-')" class="pb-4 font-medium pl-4 text-left">GPU 모델</th>
|
||||
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" :class="!selectedCity.startsWith('gpu-') && 'pl-4'" @click="toggleSort('vcpu')">
|
||||
vCPU <span x-show="sortBy === 'vcpu'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||||
</th>
|
||||
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" @click="toggleSort('memory')">
|
||||
RAM <span x-show="sortBy === 'memory'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||||
</th>
|
||||
<th class="pb-4 font-medium text-center">Storage</th>
|
||||
<th class="pb-4 font-medium text-center">Transfer</th>
|
||||
<th class="pb-4 font-medium text-right">시간요금</th>
|
||||
<th class="pb-4 font-medium text-right pr-4 cursor-pointer hover:text-white transition" @click="toggleSort('price')">
|
||||
월요금 <span x-show="sortBy === 'price'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-slate-300 text-sm">
|
||||
<!-- Loading Skeleton -->
|
||||
<template x-if="loading && filteredInstances.length === 0">
|
||||
<template x-for="i in 5" :key="i">
|
||||
<tr class="border-b border-slate-700/50 animate-pulse">
|
||||
<td class="py-4 pl-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
|
||||
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-10 mx-auto"></div></td>
|
||||
<td class="py-4 text-right"><div class="h-4 bg-slate-700 rounded w-16 ml-auto"></div></td>
|
||||
<td class="py-4 pr-4 text-right"><div class="h-4 bg-slate-700 rounded w-20 ml-auto"></div></td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Instance Rows -->
|
||||
<template x-for="(inst, idx) in filteredInstances" :key="inst.id + '-' + (inst.region?.region_code || idx)">
|
||||
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition" :class="idx === 0 && 'bg-brand-500/5 border-l-4 border-l-brand-500'">
|
||||
<!-- GPU (GPU 탭에서만 표시) -->
|
||||
<td x-show="selectedCity.startsWith('gpu-')" class="py-4 pl-4 text-left">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-green-400 font-bold text-sm" x-text="inst.instance_name || inst.gpu_type"></span>
|
||||
<span class="text-[10px] text-slate-500" x-text="inst.gpu_count > 1 ? inst.gpu_count + '× GPU' : ''"></span>
|
||||
</div>
|
||||
</td>
|
||||
<!-- vCPU -->
|
||||
<td class="py-4 text-center" :class="!selectedCity.startsWith('gpu-') && 'pl-4'">
|
||||
<span class="text-brand-400 font-bold" x-text="inst.vcpu + ' Core' + (inst.vcpu > 1 ? 's' : '')"></span>
|
||||
<span x-show="inst.id && inst.id.endsWith('-v6')" class="ml-1 text-[10px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-medium">IPv6 only</span>
|
||||
</td>
|
||||
<!-- RAM -->
|
||||
<td class="py-4 text-center" x-text="formatMemory(inst.memory_mb)"></td>
|
||||
<!-- Storage -->
|
||||
<td class="py-4 text-center">
|
||||
<span x-text="formatStorage(inst.storage_gb)"></span>
|
||||
<span x-show="inst.storage_gb && inst.storage_gb <= 1" class="ml-1 text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded font-medium">블록 스토리지 전용</span>
|
||||
</td>
|
||||
<!-- Transfer -->
|
||||
<td class="py-4 text-center" x-text="formatTransfer(inst.transfer_tb)"></td>
|
||||
<!-- 시간당 요금 (DB에서 가져온 한화 금액) -->
|
||||
<td class="py-4 text-right">
|
||||
<div class="text-sm text-slate-400" x-text="formatKrwHourly(inst.pricing?.hourly_price_krw)"></div>
|
||||
</td>
|
||||
<!-- 월 요금 (DB에서 가져온 한화 금액) -->
|
||||
<td class="py-4 pr-4 text-right">
|
||||
<div class="font-bold text-lg" :class="idx === 0 ? 'text-brand-400' : 'text-white'" x-text="formatKrw(inst.pricing?.monthly_price_krw)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<!-- Empty State -->
|
||||
<template x-if="!loading && filteredInstances.length === 0 && !error">
|
||||
<tr>
|
||||
<td :colspan="selectedCity.startsWith('gpu-') ? 7 : 6" class="py-12 text-center text-slate-500">
|
||||
선택한 조건에 맞는 인스턴스가 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer Note -->
|
||||
<div class="mt-6 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500">
|
||||
<p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
|
||||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded transition flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
||||
봇으로 서버 생성하기
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Feature Highlight -->
|
||||
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
|
||||
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bare Metal Section -->
|
||||
<div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
|
||||
<!-- Background Glow Effects -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
|
||||
<div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
|
||||
<div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
|
||||
EXTREME PERFORMANCE
|
||||
</div>
|
||||
<h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
|
||||
<p class="text-slate-400 max-w-xl leading-relaxed">
|
||||
가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
|
||||
<span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
|
||||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
|
||||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
|
||||
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center md:items-end gap-4">
|
||||
<div class="text-center md:text-right glass-panel p-6 rounded-2xl">
|
||||
<span class="text-sm text-slate-400">Live Inventory Pricing</span>
|
||||
<div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
|
||||
<p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
|
||||
<p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
|
||||
</div>
|
||||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl hover:shadow-lg hover:shadow-brand-500/30 transition-all flex items-center gap-3">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
||||
실시간 재고/가격 조회 (Bot)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!-- End Main Content -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user