kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a4e9dc2dd8823ac4f8f9bef2dab2f65748db6d67
anvil-hosting/index.html
kappa a4e9dc2dd8 feat: 개발자 터미널 스타일 UI 전면 적용 
- index.html: GitHub Dark 테마 터미널 스타일 랜딩 페이지
- terms.html, privacy.html, sla.html: 법적 페이지 터미널 UI 적용
- ASCII 아트 로고, vim 상태바, JSON 코드 블록
- Fira Code 모노스페이스 폰트, 터미널 그린 컬러 팔레트

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-30 07:30:07 +09:00

274 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="dark scroll-smooth" lang="ko">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Anvil Hosting - 개발자를 위한 컨테이너 클라우드</title>
<!-- SEO Meta Tags -->
<meta name="description" content="Incus/LXD 기반 초경량 컨테이너 호스팅. VM 오버헤드 없이 네이티브 성능을 제공하며, n8n, Ansible 자동화 파이프라인과 즉시 연동됩니다.">
<meta name="keywords" content="컨테이너 호스팅, LXD, Incus, 클라우드 서버, VPS, 도쿄 서버, 서울 서버, 개발자 호스팅">
<meta name="author" content="Anvil Hosting">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://hosting.anvil.it.com">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://hosting.anvil.it.com">
<meta property="og:title" content="Anvil Hosting - 개발자를 위한 컨테이너 클라우드">
<meta property="og:description" content="Incus/LXD 기반 초경량 컨테이너 호스팅. 네이티브 성능과 자동화 파이프라인을 경험하세요.">
<meta property="og:locale" content="ko_KR">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#3fb950",
"background-dark": "#0d1117",
"terminal-bg": "#010409",
"terminal-border": "#30363d",
"terminal-text": "#c9d1d9",
"terminal-muted": "#8b949e",
"terminal-cyan": "#58a6ff",
"terminal-amber": "#d29922",
"terminal-red": "#ff7b72",
"terminal-blue": "#79c0ff",
"terminal-purple": "#d2a8ff",
},
fontFamily: {
"display": ["Space Grotesk", "sans-serif"],
"mono": ["Fira Code", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
},
},
},
}
</script>
<style>
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #8b949e; }
.cursor-blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.syntax-key { color: #58a6ff; }
.syntax-string { color: #3fb950; }
.syntax-number { color: #79c0ff; }
.syntax-colon { color: #c9d1d9; }
.line-num { color: #484f58; user-select: none; text-align: right; padding-right: 1rem; }
.typing-effect { overflow: hidden; white-space: nowrap; animation: typing 2s steps(40, end); }
@keyframes typing { from { width: 0 } to { width: 100% } }
</style>
</head>
<body class="bg-background-dark text-terminal-text font-mono min-h-screen flex flex-col overflow-x-hidden selection:bg-terminal-cyan selection:text-background-dark">
<div class="layout-container flex h-full grow flex-col items-center justify-center p-4 md:p-8 lg:p-12">
<!-- Main Terminal Window -->
<div class="w-full max-w-[1400px] bg-background-dark border border-terminal-border rounded-lg shadow-[0_0_50px_-12px_rgba(0,0,0,0.7)] overflow-hidden flex flex-col">
<!-- Window Title Bar -->
<div class="bg-[#161b22] px-4 py-3 flex items-center justify-between border-b border-terminal-border select-none">
<div class="flex items-center 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>
</div>
<div class="flex items-center gap-2 opacity-70">
<span class="material-symbols-outlined text-[14px]">terminal</span>
<span class="text-xs md:text-sm text-terminal-muted font-display">root@anvil-cloud:~</span>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" class="text-xs text-terminal-muted hover:text-primary transition flex items-center gap-1">
<span>@AnvilForgeBot</span>
<span class="material-symbols-outlined text-sm">open_in_new</span>
</a>
</div>
<!-- Terminal Content -->
<div class="p-6 md:p-10 flex flex-col gap-12 relative bg-gradient-to-br from-background-dark to-[#0f141a]">
<!-- Background Grid -->
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(#30363d 1px, transparent 1px), linear-gradient(90deg, #30363d 1px, transparent 1px); background-size: 40px 40px;"></div>
<!-- Prompt -->
<div class="flex flex-wrap items-center gap-2 text-sm z-10 font-bold">
<span class="text-primary">anvil@hosting</span>
<span class="text-terminal-muted">:</span>
<span class="text-terminal-blue">~</span>
<span class="text-terminal-muted">$</span>
<span class="text-terminal-text">cat README.md</span>
</div>
<!-- Hero Section -->
<div class="flex flex-col gap-6 z-10">
<!-- ASCII Art Logo -->
<pre class="text-primary font-bold leading-[0.9] text-[10px] sm:text-xs md:text-sm select-none">
_ _ ___ _____ _
/ \ | \ | \ \ / /_ _| |
/ _ \ | \| |\ \ / / | || |
/ ___ \| |\ | \ V / | || |___
/_/ \_\_| \_| \_/ |___|_____|
</pre>
<!-- Main Headline -->
<div class="space-y-4 max-w-4xl mt-4">
<h1 class="text-2xl md:text-4xl lg:text-5xl font-display font-bold text-white tracking-tight leading-tight">
<span class="text-terminal-muted mr-2">&gt;</span>Incus/LXD 기반<br/>
<span class="text-terminal-muted mr-2">&gt;</span>초경량 컨테이너 호스팅<span class="text-primary cursor-blink text-3xl md:text-5xl align-middle ml-1">▋</span>
</h1>
<p class="text-terminal-muted text-base md:text-lg max-w-2xl border-l-2 border-terminal-border pl-4 mt-4">
# VM 오버헤드 없이 네이티브 성능<br/>
# 하이퍼바이저 없는 순수 Linux 컨테이너<br/>
# 도쿄 · 서울 · 싱가포르 · 홍콩 리전
</p>
</div>
<!-- Interactive Command -->
<div class="w-full max-w-2xl mt-6 group">
<div class="bg-terminal-bg border border-terminal-border rounded flex items-center p-3 md:p-4 gap-3 shadow-lg group-hover:border-primary/50 transition-colors">
<span class="text-primary font-bold select-none">$</span>
<div class="flex-1 text-sm md:text-base flex items-center gap-2 overflow-x-auto">
<span class="text-terminal-purple">incus</span>
<span class="text-terminal-text">launch</span>
<span class="text-terminal-cyan">ubuntu:24.04</span>
<span class="text-terminal-amber">tokyo-1</span>
<span class="text-terminal-muted">--vm</span>
</div>
<span class="text-xs text-terminal-muted bg-terminal-border/30 px-2 py-1 rounded hidden sm:inline-block">ENTER ↵</span>
</div>
<div class="pl-4 mt-2 text-xs text-terminal-muted flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
Instance creating... (0.4s)
</div>
</div>
</div>
<!-- Features Grid -->
<div class="grid md:grid-cols-3 gap-6 z-10 border-t border-terminal-border/50 pt-12" id="features">
<div class="bg-terminal-bg/50 border border-terminal-border rounded-lg p-6 hover:border-primary/50 transition-colors">
<div class="text-primary text-2xl mb-3">⚡</div>
<h3 class="font-display font-bold text-white mb-2">즉시 프로비저닝</h3>
<p class="text-terminal-muted text-sm">0.4초 내 인스턴스 생성. 하이퍼바이저 부팅 대기 없음.</p>
</div>
<div class="bg-terminal-bg/50 border border-terminal-border rounded-lg p-6 hover:border-terminal-cyan/50 transition-colors">
<div class="text-terminal-cyan text-2xl mb-3">🛡️</div>
<h3 class="font-display font-bold text-white mb-2">1Tbps+ DDoS 방어</h3>
<p class="text-terminal-muted text-sm">ForgeShield 통합 보호. L3/L4/L7 완전 방어.</p>
</div>
<div class="bg-terminal-bg/50 border border-terminal-border rounded-lg p-6 hover:border-terminal-amber/50 transition-colors">
<div class="text-terminal-amber text-2xl mb-3">🤖</div>
<h3 class="font-display font-bold text-white mb-2">텔레그램 봇 관리</h3>
<p class="text-terminal-muted text-sm">@AnvilForgeBot으로 서버 생성, 모니터링, 도메인 등록.</p>
</div>
</div>
<!-- Specs Section -->
<div class="grid lg:grid-cols-2 gap-12 z-10 items-start border-t border-terminal-border/50 pt-12" id="pricing">
<div class="flex flex-col gap-6">
<h2 class="text-2xl font-display font-bold text-white flex items-center gap-2">
<span class="text-terminal-amber">$</span> cat /etc/server-specs.json
</h2>
<ul class="text-terminal-muted space-y-3">
<li class="flex items-center gap-2">
<span class="text-primary">✓</span> NVMe Gen 4 스토리지
</li>
<li class="flex items-center gap-2">
<span class="text-primary">✓</span> 25Gbps 프라이빗 네트워크
</li>
<li class="flex items-center gap-2">
<span class="text-primary">✓</span> AMD EPYC / Intel Xeon
</li>
<li class="flex items-center gap-2">
<span class="text-primary">✓</span> 실시간 스냅샷 & 백업
</li>
<li class="flex items-center gap-2">
<span class="text-primary">✓</span> IPv4 + IPv6 듀얼스택
</li>
</ul>
</div>
<!-- JSON Code Block -->
<div class="w-full">
<div class="rounded-lg border border-terminal-border bg-terminal-bg overflow-hidden shadow-2xl text-sm leading-relaxed">
<div class="flex border-b border-terminal-border bg-[#161b22] px-4 py-2 text-xs text-terminal-muted justify-between">
<span>pricing.json</span>
<span class="text-terminal-amber uppercase text-[10px] font-bold tracking-widest">Global Region</span>
</div>
<div class="p-4 overflow-x-auto">
<div class="table w-full">
<div class="table-row"><div class="table-cell line-num">1</div><div class="table-cell"><span class="text-terminal-amber">{</span></div></div>
<div class="table-row"><div class="table-cell line-num">2</div><div class="table-cell pl-4"><span class="syntax-key">"plan"</span><span class="syntax-colon">:</span> <span class="syntax-string">"Starter"</span><span class="syntax-colon">,</span></div></div>
<div class="table-row"><div class="table-cell line-num">3</div><div class="table-cell pl-4"><span class="syntax-key">"cpu"</span><span class="syntax-colon">:</span> <span class="syntax-number">1</span><span class="syntax-colon">,</span></div></div>
<div class="table-row"><div class="table-cell line-num">4</div><div class="table-cell pl-4"><span class="syntax-key">"memory"</span><span class="syntax-colon">:</span> <span class="syntax-string">"1GB"</span><span class="syntax-colon">,</span></div></div>
<div class="table-row"><div class="table-cell line-num">5</div><div class="table-cell pl-4"><span class="syntax-key">"storage"</span><span class="syntax-colon">:</span> <span class="syntax-string">"25GB NVMe"</span><span class="syntax-colon">,</span></div></div>
<div class="table-row"><div class="table-cell line-num">6</div><div class="table-cell pl-4"><span class="syntax-key">"bandwidth"</span><span class="syntax-colon">:</span> <span class="syntax-string">"1TB"</span><span class="syntax-colon">,</span></div></div>
<div class="table-row"><div class="table-cell line-num">7</div><div class="table-cell pl-4"><span class="syntax-key">"price_monthly"</span><span class="syntax-colon">:</span> <span class="syntax-string">"$5"</span><span class="syntax-colon">,</span></div></div>
<div class="table-row"><div class="table-cell line-num">8</div><div class="table-cell pl-4"><span class="syntax-key">"regions"</span><span class="syntax-colon">:</span> <span class="text-terminal-amber">[</span><span class="syntax-string">"tokyo"</span>, <span class="syntax-string">"seoul"</span>, <span class="syntax-string">"singapore"</span><span class="text-terminal-amber">]</span></div></div>
<div class="table-row"><div class="table-cell line-num">9</div><div class="table-cell"><span class="text-terminal-amber">}</span></div></div>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<div class="flex flex-col items-center justify-center py-12 z-10 gap-8 border-t border-terminal-border/50">
<div class="text-center space-y-2">
<h2 class="text-3xl font-display font-bold text-white">$ ./deploy --now</h2>
<p class="text-terminal-muted">텔레그램에서 바로 서버를 생성하세요</p>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" class="group relative flex items-center justify-center">
<div class="absolute -inset-1 rounded-lg bg-gradient-to-r from-primary via-terminal-cyan to-primary opacity-75 blur transition duration-500 group-hover:opacity-100 animate-pulse"></div>
<div class="relative flex items-center bg-terminal-bg rounded-lg px-6 py-4 border border-primary">
<span class="text-primary font-bold mr-3">$</span>
<span class="text-terminal-text font-bold text-lg">curl -sSL t.me/AnvilForgeBot | start</span>
<span class="ml-4 material-symbols-outlined text-primary group-hover:translate-x-1 transition-transform">arrow_forward</span>
</div>
</a>
<div class="text-xs text-terminal-muted flex gap-6">
<a class="hover:text-primary underline decoration-primary/30 underline-offset-4" href="/terms.html">--terms</a>
<a class="hover:text-primary underline decoration-primary/30 underline-offset-4" href="/privacy.html">--privacy</a>
<a class="hover:text-primary underline decoration-primary/30 underline-offset-4" href="/sla.html">--sla</a>
</div>
</div>
</div>
<!-- Footer / Vim Status Bar -->
<div class="bg-primary text-background-dark text-xs font-bold py-1 px-4 flex justify-between items-center select-none">
<div class="flex gap-4">
<span class="bg-background-dark/20 px-2 py-0.5 rounded text-white/90">NORMAL</span>
<span>index.html</span>
</div>
<div class="flex gap-4">
<span class="hidden sm:inline">utf-8</span>
<span class="hidden sm:inline">unix</span>
<span>100%</span>
<span>Ln 1, Col 1</span>
</div>
</div>
</div>
<footer class="mt-8 text-terminal-muted text-xs text-center opacity-50">
© 2024 Anvil Hosting. All containers running. PID 1 healthy.
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink