780 lines
45 KiB
HTML
780 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anvil Hosting - 개발자를 위한 컨테이너 클라우드</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Pretendard:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Pretendard', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'monospace'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
400: '#38bdf8', // Sky blue
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
900: '#0c4a6e',
|
|
},
|
|
dark: {
|
|
900: '#0b1120', // Almost black
|
|
800: '#1e293b',
|
|
700: '#334155',
|
|
}
|
|
},
|
|
animation: {
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'typewriter': 'typewriter 2s steps(40) 1s 1 normal both',
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-20px)' },
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { background-color: #0b1120; color: #e2e8f0; }
|
|
.glass-panel {
|
|
background: rgba(30, 41, 59, 0.4);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
.grid-bg {
|
|
background-image: linear-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(56, 189, 248, 0.05) 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
}
|
|
|
|
/* Chat Animation */
|
|
.chat-bubble {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
animation: chat-enter 0.5s forwards;
|
|
}
|
|
@keyframes chat-enter {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.delay-1 { animation-delay: 0.5s; }
|
|
.delay-2 { animation-delay: 1.5s; }
|
|
.delay-3 { animation-delay: 2.5s; }
|
|
.delay-4 { animation-delay: 3.5s; }
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased selection:bg-brand-500/30">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="fixed w-full z-50 top-0 border-b border-white/5 bg-dark-900/80 backdrop-blur-md">
|
|
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<div class="flex items-center gap-8">
|
|
<a href="#" class="flex items-center gap-2 group">
|
|
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold font-mono text-xl shadow-lg shadow-brand-500/20">A</div>
|
|
<span class="font-bold text-lg tracking-tight">Anvil<span class="text-brand-400">.Hosting</span></span>
|
|
</a>
|
|
<div class="hidden md:flex gap-6 text-sm font-medium text-slate-400">
|
|
<a href="#features" class="hover:text-white transition">기능</a>
|
|
<a href="#pricing" class="hover:text-white transition">요금제</a>
|
|
<a href="#automation" class="hover:text-white transition">자동화</a>
|
|
</div>
|
|
</div>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white text-sm font-bold rounded-lg transition shadow-lg shadow-brand-500/20 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>
|
|
Console 시작
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-32 pb-20 overflow-hidden grid-bg">
|
|
<!-- Glow Effect -->
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-500/10 rounded-full blur-[120px] -z-10"></div>
|
|
|
|
<div class="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">
|
|
<!-- Left: Text -->
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800 border border-slate-700 text-xs font-mono text-brand-400 mb-6">
|
|
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
|
|
System Operational: v2.4.0 Live
|
|
</div>
|
|
<h1 class="text-5xl md:text-6xl font-bold leading-tight mb-6">
|
|
<span class="text-brand-400">Incus/LXD</span> 기반<br>
|
|
초경량 컨테이너 호스팅
|
|
</h1>
|
|
<p class="text-lg text-slate-400 mb-8 leading-relaxed">
|
|
VM의 오버헤드는 버리세요. OS 수준의 완벽한 격리와 네이티브 성능을 제공합니다.
|
|
<span class="text-white font-medium">n8n, Ansible</span> 자동화 파이프라인과 즉시 연동됩니다.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="relative group">
|
|
<div class="absolute -inset-0.5 bg-gradient-to-r from-brand-400 to-purple-600 rounded-lg blur opacity-50 group-hover:opacity-100 transition duration-200"></div>
|
|
<a href="#pricing" class="relative w-full sm:w-auto px-8 py-4 bg-white text-dark-900 font-bold rounded-lg flex items-center justify-center gap-3 transition-transform group-hover:-translate-y-0.5">
|
|
<span class="text-xl">🚀</span>
|
|
<span>인스턴스 즉시 배포</span>
|
|
<svg class="w-4 h-4 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
|
</a>
|
|
</div>
|
|
<div id="ping-widget" class="flex flex-col gap-1.5 text-xs font-mono text-slate-400 bg-slate-900/50 p-3 rounded-lg border border-slate-700/50 backdrop-blur-sm mt-8 sm:mt-0 sm:ml-4 max-w-sm">
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-24 whitespace-nowrap">🇰🇷 Seoul</span>
|
|
<div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-green-400 w-[95%]"></div></div>
|
|
<span class="text-green-400 w-12 text-right"><span id="ping-kr">2</span>ms</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-24 whitespace-nowrap">🇯🇵 Tokyo</span>
|
|
<div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-brand-400 w-[80%]"></div></div>
|
|
<span class="text-brand-400 w-12 text-right"><span id="ping-jp">35</span>ms</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-24 whitespace-nowrap">🇭🇰 HongKong</span>
|
|
<div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-yellow-400 w-[70%]"></div></div>
|
|
<span class="text-yellow-400 w-12 text-right"><span id="ping-hk">45</span>ms</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-24 whitespace-nowrap">🇸🇬 Singapore</span>
|
|
<div class="flex-1 h-1 bg-slate-700 rounded-full overflow-hidden"><div class="h-full bg-yellow-400 w-[60%]"></div></div>
|
|
<span class="text-yellow-400 w-12 text-right"><span id="ping-sg">65</span>ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Telegram Chat Demo (CSS Animation) -->
|
|
<div class="relative max-w-md mx-auto w-full">
|
|
<!-- Phone Frame -->
|
|
<div class="bg-slate-900 rounded-[2.5rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden h-[500px] relative">
|
|
<!-- Chat Header -->
|
|
<div class="bg-slate-800 p-4 flex items-center gap-3 border-b border-slate-700 z-10 relative">
|
|
<div class="w-8 h-8 rounded-full bg-brand-500 flex items-center justify-center text-white text-xs">🔨</div>
|
|
<div>
|
|
<div class="font-bold text-sm">Anvil Forge Bot</div>
|
|
<div class="text-xs text-brand-400">bot</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Messages -->
|
|
<div class="p-4 space-y-4 font-sans text-sm h-full bg-slate-900/50">
|
|
<!-- User Message -->
|
|
<div class="flex justify-end chat-bubble delay-1">
|
|
<div class="bg-brand-600 text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%] leading-relaxed">
|
|
도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bot Response -->
|
|
<div class="flex justify-start chat-bubble delay-2">
|
|
<div class="bg-slate-700 text-slate-200 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[85%]">
|
|
🤖 <b>AI가 요청을 분석했습니다.</b><br>
|
|
<br>
|
|
다음 구성으로 서버를 준비할까요?<br>
|
|
<br>
|
|
• <b>위치:</b> 🇯🇵 도쿄 (Tokyo)<br>
|
|
• <b>OS:</b> Debian 12 (Bookworm)<br>
|
|
• <b>사양:</b> Pro (2 vCPU / 4GB)<br>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Message -->
|
|
<div class="flex justify-end chat-bubble delay-3">
|
|
<div class="bg-brand-600 text-white px-4 py-2 rounded-2xl rounded-tr-sm max-w-[80%]">
|
|
응 바로 생성해줘
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bot Response (Success) -->
|
|
<div class="flex justify-start chat-bubble delay-4">
|
|
<div class="bg-slate-700 text-slate-200 px-4 py-2 rounded-2xl rounded-tl-sm max-w-[90%] border-l-4 border-green-500">
|
|
✅ <b>서버 생성이 완료되었습니다!</b><br>
|
|
<br>
|
|
<b>IP:</b> 45.12.89.121<br>
|
|
<b>Root PW:</b> (보안 전송됨)<br>
|
|
<br>
|
|
<i>지금 바로 SSH 접속이 가능합니다.</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decoration Behind Phone -->
|
|
<div class="absolute -right-12 -bottom-12 w-64 h-64 bg-brand-500/20 rounded-full blur-3xl -z-10 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Features -->
|
|
<section id="features" class="py-24 bg-dark-800">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold mb-4">엔지니어를 위한 기술 스택</h2>
|
|
<p class="text-slate-400">단순한 호스팅을 넘어, 제어가 가능한 인프라를 제공합니다.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- Tech Card 1 -->
|
|
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-brand-500">
|
|
<div class="text-brand-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform"><Incus/LXD></div>
|
|
<h3 class="text-xl font-bold mb-3">Native Performance</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">
|
|
KVM 오버헤드 없이 커널을 직접 공유하는 컨테이너 기술로 베어메탈에 가까운 성능을 냅니다. Docker in Docker도 완벽하게 지원합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tech Card 2 -->
|
|
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-purple-500">
|
|
<div class="text-purple-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform"><Automation></div>
|
|
<h3 class="text-xl font-bold mb-3">API & Webhooks</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">
|
|
n8n, Ansible, Terraform으로 인프라를 코드로 관리하세요. 서버 생성, 삭제, 리소스 조정을 자동화된 워크플로우로 제어할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tech Card 3 -->
|
|
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-green-500">
|
|
<div class="text-green-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform"><Security></div>
|
|
<h3 class="text-xl font-bold mb-3">Isolated & Safe</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">
|
|
CrowdSec이 기본 통합된 방화벽과 네임스페이스 격리 기술로 이웃한 컨테이너의 영향 없이 안전하게 데이터를 보호합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tech Card 4 (DDoS) -->
|
|
<div class="glass-panel p-8 rounded-xl hover:bg-slate-800/80 transition group border-t-2 border-red-500">
|
|
<div class="text-red-400 font-mono mb-4 text-xl group-hover:translate-x-2 transition-transform"><Anti-DDoS></div>
|
|
<h3 class="text-xl font-bold mb-3">1Tbps+ Mitigation</h3>
|
|
<p class="text-slate-400 text-sm leading-relaxed">
|
|
L3/L4는 물론 복잡한 L7 애플리케이션 공격까지 완벽 방어합니다. 전 세계 엣지 노드에서 공격을 즉시 정화하여 무중단 서비스를 보장합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Automation Section -->
|
|
<section id="automation" class="py-24 bg-dark-900 border-t border-slate-800">
|
|
<div class="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row items-center gap-16">
|
|
<div class="lg:w-1/2">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-xs font-mono text-purple-400 mb-6">
|
|
Infrastructure as Code
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
|
반복적인 작업은<br>
|
|
<span class="text-purple-400">자동화에 맡기세요</span>
|
|
</h2>
|
|
<p class="text-slate-400 mb-8 leading-relaxed text-lg">
|
|
웹 콘솔에 접속할 필요도 없습니다. <span class="text-white font-mono">Terraform</span>으로 인프라를 정의하고, <span class="text-white font-mono">Ansible</span>로 설정을 배포하세요. Anvil은 개발자 친화적인 API를 제공합니다.
|
|
</p>
|
|
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-purple-400 border border-slate-700">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-white">Webhook Integration</div>
|
|
<div class="text-sm text-slate-500">Github Actions, GitLab CI/CD 연동</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded bg-slate-800 flex items-center justify-center text-purple-400 border border-slate-700">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-white">Full API Access</div>
|
|
<div class="text-sm text-slate-500">서버 생성, 제어, 모니터링 100% API 지원</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="lg:w-1/2 w-full" x-data="{ tab: 'n8n' }">
|
|
<!-- Tab Buttons -->
|
|
<div class="flex gap-2 mb-4">
|
|
<button onclick="switchTab('n8n')" id="btn-n8n" class="px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition">n8n Workflow</button>
|
|
<button onclick="switchTab('tf')" id="btn-tf" class="px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition">Terraform</button>
|
|
</div>
|
|
|
|
<!-- n8n Window -->
|
|
<div id="panel-n8n" class="bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-slate-700 h-[320px] relative p-6 select-none">
|
|
<!-- Background Grid -->
|
|
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(#666 1px, transparent 1px); background-size: 20px 20px;"></div>
|
|
|
|
<!-- Nodes -->
|
|
<div class="relative z-10 h-full flex items-center justify-between px-2">
|
|
<!-- Node 1: Webhook -->
|
|
<div class="flex flex-col items-center gap-2 group cursor-pointer">
|
|
<div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-slate-600 flex items-center justify-center shadow-lg group-hover:border-purple-500 transition relative">
|
|
<span class="text-2xl">⚡</span>
|
|
<div class="absolute -right-6 top-1/2 w-6 h-0.5 bg-slate-600"></div>
|
|
</div>
|
|
<span class="text-xs font-bold text-slate-300 bg-slate-900/80 px-2 py-0.5 rounded">Webhook</span>
|
|
</div>
|
|
|
|
<!-- Node 2: Anvil API -->
|
|
<div class="flex flex-col items-center gap-2 group cursor-pointer">
|
|
<div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-brand-500 flex items-center justify-center shadow-lg shadow-brand-500/20 relative">
|
|
<span class="font-bold text-brand-400">API</span>
|
|
<div class="absolute -right-6 top-1/2 w-6 h-0.5 bg-slate-600"></div>
|
|
</div>
|
|
<span class="text-xs font-bold text-brand-400 bg-slate-900/80 px-2 py-0.5 rounded">Restart Server</span>
|
|
</div>
|
|
|
|
<!-- Node 3: Telegram -->
|
|
<div class="flex flex-col items-center gap-2 group cursor-pointer">
|
|
<div class="w-16 h-16 rounded-xl bg-slate-800 border-2 border-blue-400 flex items-center justify-center shadow-lg relative">
|
|
<svg class="w-8 h-8 text-blue-400" 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>
|
|
</div>
|
|
<span class="text-xs font-bold text-blue-400 bg-slate-900/80 px-2 py-0.5 rounded">Notify User</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection Lines (Animated) -->
|
|
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
|
|
<path d="M100 160 H 250" stroke="#475569" stroke-width="2" stroke-dasharray="5,5" class="animate-pulse"/>
|
|
<path d="M350 160 H 500" stroke="#475569" stroke-width="2" stroke-dasharray="5,5" class="animate-pulse"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Terraform Window (Hidden by default) -->
|
|
<div id="panel-tf" class="hidden bg-[#1e1e1e] rounded-xl overflow-hidden shadow-2xl border border-slate-700 h-[320px] font-mono text-sm">
|
|
<div class="flex items-center px-4 py-2 bg-[#252526] border-b border-[#3e3e42] gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
|
|
<span class="ml-2 text-slate-400 text-xs">main.tf</span>
|
|
</div>
|
|
<div class="p-6 text-slate-300 leading-relaxed overflow-x-auto h-full overflow-y-auto custom-scrollbar">
|
|
<div><span class="text-[#569cd6]">resource</span> <span class="text-[#ce9178]">"anvil_instance"</span> <span class="text-[#ce9178]">"web"</span> {</div>
|
|
<div class="pl-4"><span class="text-[#9cdcfe]">name</span> = <span class="text-[#ce9178]">"production-web-01"</span></div>
|
|
<div class="pl-4"><span class="text-[#9cdcfe]">image</span> = <span class="text-[#ce9178]">"debian-12"</span></div>
|
|
<div class="pl-4"><span class="text-[#9cdcfe]">region</span> = <span class="text-[#ce9178]">"jp-east-1"</span></div>
|
|
<div class="pl-4"><span class="text-[#9cdcfe]">plan</span> = <span class="text-[#ce9178]">"pro-v2"</span></div>
|
|
<br>
|
|
<div class="pl-4"><span class="text-[#6a9955]">// 자동 백업 설정</span></div>
|
|
<div class="pl-4"><span class="text-[#9cdcfe]">backup_schedule</span> {</div>
|
|
<div class="pl-8"><span class="text-[#9cdcfe]">enabled</span> = <span class="text-[#569cd6]">true</span></div>
|
|
<div class="pl-8"><span class="text-[#9cdcfe]">retain</span> = <span class="text-[#b5cea8]">7</span></div>
|
|
<div class="pl-4">}</div>
|
|
<div>}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(tab) {
|
|
const btnN8n = document.getElementById('btn-n8n');
|
|
const btnTf = document.getElementById('btn-tf');
|
|
const panelN8n = document.getElementById('panel-n8n');
|
|
const panelTf = document.getElementById('panel-tf');
|
|
|
|
if (tab === 'n8n') {
|
|
btnN8n.className = 'px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition shadow-lg shadow-purple-500/20';
|
|
btnTf.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
|
|
panelN8n.classList.remove('hidden');
|
|
panelTf.classList.add('hidden');
|
|
} else {
|
|
btnN8n.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
|
|
btnTf.className = 'px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-bold transition shadow-lg shadow-blue-500/20';
|
|
panelN8n.classList.add('hidden');
|
|
panelTf.classList.remove('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Infrastructure Details -->
|
|
<section class="py-24 border-t border-slate-800">
|
|
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
|
|
<div>
|
|
<h3 class="text-2xl font-bold mb-6">High-Spec Infrastructure</h3>
|
|
<ul class="space-y-6">
|
|
<li class="flex gap-4">
|
|
<div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
|
|
<span class="text-2xl">⚡</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-lg">NVMe Storage</h4>
|
|
<p class="text-slate-400 text-sm">모든 플랜에 Enterprise급 NVMe SSD 제공. IOPS 병목 없는 데이터베이스 성능 보장.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-4">
|
|
<div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
|
|
<span class="text-2xl">🌐</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-lg">Premium Network</h4>
|
|
<p class="text-slate-400 text-sm">CN2/BGP 최적화 경로. 서울-도쿄 35ms, 서울-홍콩 45ms의 낮은 레이턴시.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex gap-4">
|
|
<div class="w-12 h-12 rounded bg-slate-800 flex items-center justify-center flex-shrink-0 border border-slate-700">
|
|
<span class="text-2xl">💾</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-bold text-lg">ZFS Snapshots</h4>
|
|
<p class="text-slate-400 text-sm">CoW(Copy-on-Write) 기반의 즉각적인 스냅샷과 롤백 지원. 데이터 손실 걱정 끝.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="glass-panel rounded-2xl p-1 border border-slate-700">
|
|
<!-- Terminal UI Mockup -->
|
|
<div class="bg-dark-900 rounded-xl h-full p-4 font-mono text-xs md:text-sm text-slate-300 overflow-hidden">
|
|
<div class="flex gap-2 mb-4">
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div>
|
|
</div>
|
|
<p><span class="text-brand-400">root@anvil:~#</span> neofetch</p>
|
|
<div class="mt-2 text-slate-400">
|
|
.<br>
|
|
/ \<br>
|
|
( )<br>
|
|
\ / <span class="text-white">OS:</span> Debian GNU/Linux 12 (bookworm)<br>
|
|
| <span class="text-white">Kernel:</span> 6.1.0-18-cloud-amd64<br>
|
|
| <span class="text-white">Uptime:</span> 142 days, 4 hours<br>
|
|
| <span class="text-white">Virtualization:</span> lxc (Incus)<br>
|
|
| <span class="text-white">CPU:</span> AMD EPYC 7763 (4) @ 2.45GHz<br>
|
|
| <span class="text-white">Memory:</span> 512MiB / 64GiB<br>
|
|
</div>
|
|
<p class="mt-4"><span class="text-brand-400">root@anvil:~#</span> docker ps</p>
|
|
<p class="text-green-400">CONTAINER ID IMAGE STATUS PORTS</p>
|
|
<p>a1b2c3d4e5f6 nginx Up 24h 0.0.0.0:80->80/tcp</p>
|
|
<p class="mt-4 animate-pulse">_</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Domain Section -->
|
|
<section id="domain" class="py-24 border-t border-slate-800 bg-dark-900/50">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="flex flex-col lg:flex-row items-center gap-16">
|
|
<div class="lg:w-1/2">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 text-xs font-mono text-brand-400 mb-6">
|
|
NEW: AI Domain Generator
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">대화로 끝내는<br><span class="text-brand-400">도메인 등록과 관리</span></h2>
|
|
<p class="text-slate-400 mb-8 leading-relaxed text-lg">
|
|
원하는 아이디어만 말씀하세요. AI가 창의적인 도메인을 추천하고, 텔레그램 대화창에서 3초 만에 등록까지 완료합니다. 복잡한 설정 없이 네임서버까지 즉시 연결됩니다.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div class="glass-panel p-4 rounded-lg">
|
|
<div class="text-brand-400 font-bold mb-1">AI 추천</div>
|
|
<p class="text-xs text-slate-500">키워드 분석 기반 도메인 작명</p>
|
|
</div>
|
|
<div class="glass-panel p-4 rounded-lg">
|
|
<div class="text-brand-400 font-bold mb-1">실시간 조회</div>
|
|
<p class="text-xs text-slate-500">전 세계 TLD 실시간 가용 확인</p>
|
|
</div>
|
|
<div class="glass-panel p-4 rounded-lg">
|
|
<div class="text-brand-400 font-bold mb-1">간편 DNS</div>
|
|
<p class="text-xs text-slate-500">대화형 A/CNAME/MX 레코드 설정</p>
|
|
</div>
|
|
<div class="glass-panel p-4 rounded-lg">
|
|
<div class="text-brand-400 font-bold mb-1">Whois 보안</div>
|
|
<p class="text-xs text-slate-500">개인정보 보호 설정 기본 제공</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:w-1/2 w-full">
|
|
<div class="glass-panel p-8 rounded-2xl border border-slate-700 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 p-4 opacity-10">
|
|
<svg class="w-32 h-32 text-brand-400" 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 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-brand-500"></span>
|
|
주요 도메인 가격 (연간)
|
|
</h3>
|
|
<div class="space-y-4 font-mono text-sm">
|
|
<div class="flex justify-between items-center p-3 border-b border-white/5">
|
|
<span class="text-white">.com / .net</span>
|
|
<span class="text-brand-400 font-bold">₩20,000 / ₩22,600</span>
|
|
</div>
|
|
<div class="flex justify-between items-center p-3 border-b border-white/5">
|
|
<span class="text-white">.it.com / .dev</span>
|
|
<div class="text-right">
|
|
<span class="text-brand-400 font-bold">₩8,700 / ₩27,800</span>
|
|
<div class="text-[10px] text-slate-500 mt-0.5">(.it.com 갱신 ₩67,900)</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center p-3 border-b border-white/5">
|
|
<span class="text-white">.io / .ai</span>
|
|
<span class="text-brand-400 font-bold">₩114,800 / ₩139,200</span>
|
|
</div>
|
|
<div class="flex justify-between items-center p-3">
|
|
<span class="text-white">.xyz / .me</span>
|
|
<span class="text-brand-400 font-bold">₩27,800 / ₩31,300</span>
|
|
</div>
|
|
</div>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="mt-8 w-full py-3 bg-brand-600 hover:bg-brand-500 text-white font-bold rounded-lg transition text-center block">
|
|
🌐 도메인 검색 시작하기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing -->
|
|
<section id="pricing" class="py-24 bg-dark-800">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold mb-4">합리적인 요금제</h2>
|
|
<p class="text-slate-400">전 세계 4개 리전에서 제공되는 최적의 인프라 요금 (월간 기준, VAT 포함)</p>
|
|
</div>
|
|
|
|
<!-- Pricing Tabs -->
|
|
<div x-data="{ region: 'global' }" class="glass-panel p-8 rounded-2xl border border-slate-700 mb-12">
|
|
<!-- Tab Buttons -->
|
|
<div class="flex justify-center mb-8">
|
|
<div class="bg-slate-900/80 p-1 rounded-xl inline-flex border border-slate-700">
|
|
<button @click="region = 'global'" :class="region === 'global' ? 'bg-brand-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'" class="px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
|
|
<span>🌏 Global</span>
|
|
<span class="text-[10px] font-normal opacity-80">(Tokyo/SG/HK)</span>
|
|
</button>
|
|
<button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-brand-600 text-white shadow-lg' : 'text-slate-400 hover:text-white'" class="px-6 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2">
|
|
<span>🇰🇷 Seoul</span>
|
|
<span class="text-[10px] font-normal opacity-80">(Premium)</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global Pricing Table -->
|
|
<div x-show="region === 'global'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left font-sans">
|
|
<thead>
|
|
<tr class="text-slate-500 text-sm border-b border-slate-700">
|
|
<th class="pb-4 font-medium pl-4">Plan</th>
|
|
<th class="pb-4 font-medium text-center">vCPU</th>
|
|
<th class="pb-4 font-medium text-center">RAM</th>
|
|
<th class="pb-4 font-medium text-center">SSD</th>
|
|
<th class="pb-4 font-medium text-center">Transfer</th>
|
|
<th class="pb-4 font-medium text-right pr-4">Price / Month</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-slate-300 text-sm">
|
|
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Micro</td>
|
|
<td class="text-center text-brand-400">1 Core</td>
|
|
<td class="text-center">1 GB</td>
|
|
<td class="text-center">25 GB</td>
|
|
<td class="text-center">1 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩8,500</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Starter</td>
|
|
<td class="text-center text-brand-400">1 Core</td>
|
|
<td class="text-center">2 GB</td>
|
|
<td class="text-center">50 GB</td>
|
|
<td class="text-center">2 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩20,400</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700/50 bg-brand-500/5 hover:bg-brand-500/10 transition border-l-4 border-l-brand-500">
|
|
<td class="py-4 pl-3 font-bold text-brand-400">Pro ⭐</td>
|
|
<td class="text-center text-brand-400 font-bold">2 Cores</td>
|
|
<td class="text-center font-bold">4 GB</td>
|
|
<td class="text-center">80 GB</td>
|
|
<td class="text-center">4 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg text-brand-400">₩40,700</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Business</td>
|
|
<td class="text-center text-brand-400 font-bold">4 Cores</td>
|
|
<td class="text-center">8 GB</td>
|
|
<td class="text-center">160 GB</td>
|
|
<td class="text-center">5 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩67,800</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="mt-4 text-center text-xs text-slate-500">
|
|
* 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Seoul Pricing Table -->
|
|
<div x-show="region === 'seoul'" style="display: none;" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left font-sans">
|
|
<thead>
|
|
<tr class="text-slate-500 text-sm border-b border-slate-700">
|
|
<th class="pb-4 font-medium pl-4">Plan</th>
|
|
<th class="pb-4 font-medium text-center">vCPU</th>
|
|
<th class="pb-4 font-medium text-center">RAM</th>
|
|
<th class="pb-4 font-medium text-center text-green-400">SSD (High)</th>
|
|
<th class="pb-4 font-medium text-center">Transfer</th>
|
|
<th class="pb-4 font-medium text-right pr-4">Price / Month</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-slate-300 text-sm">
|
|
<!-- Nano Plan -->
|
|
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Nano</td>
|
|
<td class="text-center text-brand-400">1 Core</td>
|
|
<td class="text-center">512 MB</td>
|
|
<td class="text-center text-green-400 font-bold">20 GB</td>
|
|
<td class="text-center">1 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩6,000</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Micro</td>
|
|
<td class="text-center text-brand-400">1 Core</td>
|
|
<td class="text-center">1 GB</td>
|
|
<td class="text-center text-green-400 font-bold">40 GB</td>
|
|
<td class="text-center">2 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩8,500</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Starter</td>
|
|
<td class="text-center text-brand-400">1 Core</td>
|
|
<td class="text-center">2 GB</td>
|
|
<td class="text-center text-green-400 font-bold">60 GB</td>
|
|
<td class="text-center">3 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩17,000</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-700/50 bg-brand-500/5 hover:bg-brand-500/10 transition border-l-4 border-l-brand-500">
|
|
<td class="py-4 pl-3 font-bold text-brand-400">Pro ⭐</td>
|
|
<td class="text-center text-brand-400 font-bold">2 Cores</td>
|
|
<td class="text-center font-bold">4 GB</td>
|
|
<td class="text-center text-green-400 font-bold">80 GB</td>
|
|
<td class="text-center">4 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg text-brand-400">₩33,900</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-800/50 transition">
|
|
<td class="py-4 pl-4 font-bold text-white">Business</td>
|
|
<td class="text-center text-brand-400">2 Cores</td>
|
|
<td class="text-center">8 GB</td>
|
|
<td class="text-center text-green-400 font-bold">160 GB</td>
|
|
<td class="text-center">5 TB</td>
|
|
<td class="text-right pr-4 font-bold text-lg">₩67,800</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-6 p-4 bg-slate-800/50 rounded-lg border border-slate-700 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<div class="text-xs text-slate-400">
|
|
<span class="text-white font-bold block mb-1">더 강력한 성능이 필요하신가요?</span>
|
|
AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원)
|
|
</div>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs font-bold rounded transition">
|
|
Enterprise 문의 →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Highlight -->
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
|
<div class="glass-panel p-6 rounded-xl flex items-start gap-4">
|
|
<div class="text-2xl mt-1">🌍</div>
|
|
<div>
|
|
<h4 class="font-bold text-white mb-1">글로벌 4개 리전 운영</h4>
|
|
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
|
|
</div>
|
|
</div>
|
|
<div class="glass-panel p-6 rounded-xl flex items-start gap-4 border-brand-500/30">
|
|
<div class="text-2xl mt-1">🛡️</div>
|
|
<div>
|
|
<h4 class="font-bold text-white mb-1">프리미엄 DDoS 방어</h4>
|
|
<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-panel p-8 rounded-2xl border border-slate-600 relative overflow-hidden group">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-slate-800 to-slate-900 z-0"></div>
|
|
<div class="absolute right-0 top-0 h-full w-1/2 bg-[url('images/server-tech.jpg')] bg-cover bg-center opacity-10 mix-blend-overlay"></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-3 py-1 rounded bg-red-500/10 border border-red-500/20 text-xs font-bold text-red-400 mb-4">
|
|
EXTREME PERFORMANCE
|
|
</div>
|
|
<h3 class="text-3xl font-bold text-white mb-2">Bare Metal Dedicated</h3>
|
|
<p class="text-slate-400 max-w-xl">
|
|
가상화가 없는 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 gap-6 mt-6 text-sm font-mono text-slate-300">
|
|
<span class="flex items-center gap-2"><span class="text-brand-400">✓</span> Full IPMI Access</span>
|
|
<span class="flex items-center gap-2"><span class="text-brand-400">✓</span> Custom Hardware</span>
|
|
<span class="flex items-center gap-2"><span class="text-brand-400">✓</span> 40Gbps Private Network</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-end gap-2">
|
|
<div class="text-right">
|
|
<span class="text-sm text-slate-500">Live Inventory Pricing</span>
|
|
<div class="text-4xl font-bold text-white">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
|
|
<p class="text-[10px] text-brand-400 mt-1">🇸🇬 싱가포르 최저가 재고 보유 중</p>
|
|
<p class="text-[10px] text-slate-500">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
|
|
</div>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="px-8 py-3 bg-brand-600 text-white font-bold rounded hover:bg-brand-500 transition shadow-lg shadow-brand-500/20 flex items-center gap-2">
|
|
<svg class="w-5 h-5" 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>
|
|
실시간 재고/가격 조회 (Bot)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="py-12 border-t border-slate-800 text-sm text-slate-500">
|
|
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<div>
|
|
<span class="font-bold text-slate-300">Anvil Hosting</span> | Global Cloud Infrastructure
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<a href="#" class="hover:text-slate-300">이용약관</a>
|
|
<a href="#" class="hover:text-slate-300">개인정보처리방침</a>
|
|
<a href="#" class="hover:text-slate-300">SLA</a>
|
|
</div>
|
|
<div class="text-right">
|
|
<div>© 2026 LIBEHAIM Inc. | Taro Tanaka</div>
|
|
<div class="text-xs text-slate-600 mt-1">#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Real-time Ping Simulation
|
|
function updatePing() {
|
|
const regions = [
|
|
{ id: 'ping-kr', base: 2, variance: 2 },
|
|
{ id: 'ping-jp', base: 35, variance: 5 },
|
|
{ id: 'ping-hk', base: 45, variance: 8 },
|
|
{ id: 'ping-sg', base: 65, variance: 10 }
|
|
];
|
|
|
|
regions.forEach(region => {
|
|
const el = document.getElementById(region.id);
|
|
if (el) {
|
|
const jitter = Math.floor(Math.random() * region.variance) - (region.variance / 2);
|
|
let val = Math.floor(region.base + jitter);
|
|
if (val < 1) val = 1;
|
|
el.innerText = val;
|
|
}
|
|
});
|
|
}
|
|
setInterval(updatePing, 2000);
|
|
</script>
|
|
</body>
|
|
</html> |