93757a183e
- Rename "해외 서버" to "글로벌 서버" - Replace Linux command tutorial with Cockpit web console showcase - Add 4 Cockpit screenshot grid (dashboard, storage, network, services) - Implement lightbox popup for full-size image viewing Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1045 lines
42 KiB
HTML
1045 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<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>
|
|
<script src="https://cdn.jsdelivr.net/npm/roughjs@4.5.2/bundled/rough.umd.min.js"></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=Caveat:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Noto Sans KR', 'sans-serif'],
|
|
hand: ['Caveat', 'cursive'],
|
|
},
|
|
colors: {
|
|
cream: '#0f172a',
|
|
sketch: {
|
|
bg: '#0f172a',
|
|
line: '#e2e8f0',
|
|
blue: '#3b82f6',
|
|
red: '#ef4444',
|
|
green: '#22c55e',
|
|
orange: '#f97316',
|
|
purple: '#a855f7',
|
|
yellow: '#fbbf24',
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
background-color: #0f172a;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* 손그림 테두리 스타일 */
|
|
.sketch-border {
|
|
position: relative;
|
|
background: #1e293b;
|
|
border: 2px solid #334155;
|
|
border-radius: 3px;
|
|
box-shadow: 4px 4px 0 #0f172a;
|
|
}
|
|
|
|
/* 손그림 버튼 */
|
|
.sketch-btn {
|
|
position: relative;
|
|
border: 2px solid #475569;
|
|
border-radius: 3px;
|
|
background: #1e293b;
|
|
color: #e2e8f0;
|
|
box-shadow: 3px 3px 0 #0f172a;
|
|
transition: all 0.1s ease;
|
|
}
|
|
.sketch-btn:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: 5px 5px 0 #0f172a;
|
|
}
|
|
.sketch-btn:active {
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 #0f172a;
|
|
}
|
|
.sketch-btn-primary {
|
|
background: #3b82f6;
|
|
border-color: #2563eb;
|
|
color: white;
|
|
}
|
|
.sketch-btn-orange {
|
|
background: #f97316;
|
|
border-color: #ea580c;
|
|
color: white;
|
|
}
|
|
|
|
/* 손그림 밑줄 */
|
|
.sketch-underline {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.sketch-underline::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: -4px;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0 8 Q 25 2, 50 8 T 100 8' stroke='%233b82f6' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/* 손그림 동그라미 강조 */
|
|
.sketch-circle {
|
|
position: relative;
|
|
}
|
|
.sketch-circle::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -15px;
|
|
right: -15px;
|
|
bottom: -10px;
|
|
border: 3px solid #ef4444;
|
|
border-radius: 50% 45% 55% 50%;
|
|
transform: rotate(-2deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 손그림 화살표 */
|
|
.sketch-arrow {
|
|
position: relative;
|
|
}
|
|
.sketch-arrow::after {
|
|
content: '→';
|
|
font-size: 1.5em;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* 체크마크 스타일 */
|
|
.sketch-check::before {
|
|
content: '✓';
|
|
color: #22c55e;
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
/* 손그림 구분선 */
|
|
.sketch-divider {
|
|
height: 2px;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'%3E%3Cpath d='M0 2 Q 50 0, 100 2 T 200 2' stroke='%23475569' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
|
|
background-size: 200px 4px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 스티커 노트 스타일 */
|
|
.sticky-note {
|
|
background: #1e293b;
|
|
border: 2px solid #3b82f6;
|
|
padding: 1rem;
|
|
box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
|
|
font-family: 'Caveat', cursive;
|
|
color: #e2e8f0;
|
|
}
|
|
.sticky-note:nth-child(even) {
|
|
border-color: #22c55e;
|
|
}
|
|
.sticky-note:nth-child(3n) {
|
|
border-color: #f97316;
|
|
}
|
|
|
|
/* 낙서 스타일 배지 */
|
|
.sketch-badge {
|
|
display: inline-block;
|
|
border: 2px dashed #475569;
|
|
border-radius: 20px;
|
|
padding: 4px 12px;
|
|
font-size: 0.875rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
/* 손글씨 강조 */
|
|
.highlight-box {
|
|
background: linear-gradient(180deg, transparent 60%, rgba(59, 130, 246, 0.3) 60%);
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* 채팅 위젯 스타일 */
|
|
.chat-widget-container {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 1rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chat-frame-wrapper {
|
|
width: 420px;
|
|
height: 580px;
|
|
background: #1e293b;
|
|
border: 2px solid #334155;
|
|
border-radius: 4px;
|
|
box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
|
|
transform: scale(0);
|
|
transform-origin: bottom right;
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chat-frame-wrapper.open {
|
|
transform: scale(1);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.chat-header {
|
|
background: #3b82f6;
|
|
color: white;
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid #2563eb;
|
|
font-family: 'Caveat', cursive;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.chat-iframe {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.chat-toggle-btn {
|
|
width: 64px;
|
|
height: 64px;
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: 2px solid #2563eb;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 4px 4px 0 #0f172a;
|
|
transition: all 0.2s ease;
|
|
font-size: 1.5rem;
|
|
position: relative;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.chat-toggle-btn:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: 6px 6px 0 #0f172a;
|
|
}
|
|
|
|
.chat-toggle-btn:active {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 2px 2px 0 #0f172a;
|
|
}
|
|
|
|
/* 모바일 대응 */
|
|
@media (max-width: 480px) {
|
|
.chat-widget-container {
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
}
|
|
.chat-frame-wrapper {
|
|
width: calc(100vw - 2rem);
|
|
height: 80vh;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans text-sketch-line">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 w-full bg-cream/95 backdrop-blur-sm z-50 border-b-2 border-dashed border-sketch-line/20">
|
|
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
|
|
<a href="#" class="flex items-center gap-2">
|
|
<!-- 손그림 스타일 모루 로고 -->
|
|
<svg class="w-10 h-10" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 모루 -->
|
|
<path d="M6 28 L6 32 L30 32 L30 28 Z" stroke="#1e1e1e" stroke-width="2" fill="#e5e7eb" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M8 24 L8 28 L28 28 L28 24 Z" stroke="#1e1e1e" stroke-width="2" fill="#d1d5db" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M10 22 L10 24 L26 24 L26 22 Z" stroke="#1e1e1e" stroke-width="2" fill="#f3f4f6" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<!-- 모루 뿔 -->
|
|
<path d="M28 25 L36 23 L36 25 L28 27" stroke="#1e1e1e" stroke-width="2" fill="#d1d5db" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<!-- 망치 -->
|
|
<rect x="6" y="4" width="3" height="12" rx="1" stroke="#1e1e1e" stroke-width="2" fill="#92400e" transform="rotate(-45 7.5 10)"/>
|
|
<rect x="12" y="2" width="12" height="5" rx="1" stroke="#1e1e1e" stroke-width="2" fill="#9ca3af" transform="rotate(-45 18 4.5)"/>
|
|
<!-- 불꽃 -->
|
|
<circle cx="18" cy="18" r="2" fill="#e8590c"/>
|
|
<circle cx="22" cy="16" r="1.5" fill="#ffc078"/>
|
|
<circle cx="15" cy="17" r="1.5" fill="#ffc078"/>
|
|
<path d="M18 15 L18 11 M15 14 L12 11 M21 14 L24 11" stroke="#e8590c" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span class="text-2xl font-bold font-hand">Anvil</span>
|
|
</a>
|
|
<div class="hidden md:flex gap-8 text-lg">
|
|
<a href="#services" class="hover:text-sketch-blue transition">서비스</a>
|
|
<a href="#domain" class="hover:text-sketch-blue transition">도메인</a>
|
|
<a href="#linux-guide" class="hover:text-sketch-green transition">리눅스</a>
|
|
<a href="#pricing" class="hover:text-sketch-blue transition">가격</a>
|
|
<a href="#contact" class="hover:text-sketch-blue transition">문의</a>
|
|
</div>
|
|
<a href="#contact" class="sketch-btn sketch-btn-primary px-4 py-2 text-lg">
|
|
시작하기
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="min-h-screen flex items-center justify-center pt-20">
|
|
<div class="max-w-6xl mx-auto px-6 text-center">
|
|
<div class="sketch-badge mb-6">
|
|
⭐ 안정적인 인프라, 합리적인 가격
|
|
</div>
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight font-hand">
|
|
당신의 서비스를 위한<br>
|
|
<span class="sketch-underline text-sketch-blue">완벽한 호스팅</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-sketch-line/70 mb-10 max-w-2xl mx-auto">
|
|
글로벌 서버, DDoS 방어, 도메인까지~<br>
|
|
원스톱으로 제공하는 프리미엄 호스팅 서비스!
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="#contact" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl">
|
|
무료 상담 받기 →
|
|
</a>
|
|
<a href="#services" class="sketch-btn px-8 py-4 text-xl">
|
|
서비스 둘러보기
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Telegram Bot Highlight -->
|
|
<div class="mt-16 sketch-border p-8 max-w-3xl mx-auto bg-sketch-blue/10" style="border-color: #3b82f6;">
|
|
<div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #3b82f6; color: #3b82f6;">
|
|
📢 모든 신청 및 관리는 텔레그램으로!
|
|
</div>
|
|
<div class="flex flex-col md:flex-row items-center gap-6">
|
|
<div class="w-16 h-16 bg-sketch-blue/20 border-2 border-sketch-blue rounded-full flex items-center justify-center flex-shrink-0">
|
|
<!-- Telegram 아이콘 (손그림 스타일) -->
|
|
<svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 5L2 12.5l7 2M21 5l-5 14-6-8.5M21 5L9 14.5M9 14.5V21l3.5-4"/>
|
|
</svg>
|
|
</div>
|
|
<div class="text-center md:text-left flex-1">
|
|
<h3 class="text-xl font-bold mb-2">텔레그램 하나로 모든 것을 관리하세요!</h3>
|
|
<p class="text-sketch-line/70">
|
|
<span class="highlight-box font-bold">별도의 대시보드 없이</span> 서비스 신청, 상태 조회,<br class="hidden md:block">
|
|
도메인 등록, 결제까지 대화만으로 모든 것이 가능합니다.
|
|
</p>
|
|
</div>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-6 py-3 text-lg flex items-center gap-2 flex-shrink-0">
|
|
봇 시작하기 →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats (스티커 노트 스타일) -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12">
|
|
<div class="sticky-note">
|
|
<div class="text-3xl font-bold">99.9%</div>
|
|
<div class="text-sm">업타임 보장</div>
|
|
</div>
|
|
<div class="sticky-note">
|
|
<div class="text-3xl font-bold">4개</div>
|
|
<div class="text-sm">아시아 리전</div>
|
|
</div>
|
|
<div class="sticky-note">
|
|
<div class="text-3xl font-bold">24/7</div>
|
|
<div class="text-sm">기술 지원</div>
|
|
</div>
|
|
<div class="sticky-note">
|
|
<div class="text-3xl font-bold">1Tbps+</div>
|
|
<div class="text-sm">DDoS 방어</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-20">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
<span class="sketch-underline">서비스</span>
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">비즈니스에 필요한 모든 인프라를 제공합니다~</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- Domain -->
|
|
<div class="sketch-border p-6">
|
|
<div class="text-4xl mb-4">🌐</div>
|
|
<h3 class="text-xl font-bold mb-2">도메인</h3>
|
|
<p class="text-sketch-line/70">
|
|
AI 작명 추천 · 3초 등록 · 실시간 가용성 확인 · 네임서버 관리
|
|
</p>
|
|
</div>
|
|
|
|
<!-- DDoS Protection -->
|
|
<div class="sketch-border p-6">
|
|
<div class="text-4xl mb-4">🛡️</div>
|
|
<h3 class="text-xl font-bold mb-2">DDoS 방어</h3>
|
|
<p class="text-sketch-line/70">
|
|
1Tbps 이상의 공격도 막아내는 엔터프라이즈급 보안 시스템
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Overseas Server -->
|
|
<div class="sketch-border p-6">
|
|
<div class="text-4xl mb-4">🌍</div>
|
|
<h3 class="text-xl font-bold mb-2">글로벌 서버</h3>
|
|
<p class="text-sketch-line/70">
|
|
🇯🇵 도쿄/오사카 · 🇸🇬 싱가포르 · 🇭🇰 홍콩에서 최적의 위치 선택
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Hosting -->
|
|
<div class="sketch-border p-6">
|
|
<div class="text-4xl mb-4">💻</div>
|
|
<h3 class="text-xl font-bold mb-2">웹 호스팅</h3>
|
|
<p class="text-sketch-line/70">
|
|
SSD 기반 고속 스토리지와 최신 서버 환경으로 빠른 웹사이트 운영
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Domain Section -->
|
|
<section id="domain" class="py-20">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<div class="sketch-badge mb-6" style="border-color: #f97316; color: #f97316;">
|
|
💬 텔레그램으로 간편하게
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
<span class="sketch-underline" style="--underline-color: #e8590c;">도메인 서비스</span>
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">대화만으로 도메인 검색부터 등록, 관리까지 한번에!</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
|
|
<!-- AI 추천 -->
|
|
<div class="sketch-border p-5 text-center">
|
|
<div class="text-3xl mb-3">💡</div>
|
|
<h4 class="font-bold mb-1">AI 도메인 추천</h4>
|
|
<p class="text-sketch-line/70 text-sm">키워드만 말하면 창의적인 도메인을 추천</p>
|
|
</div>
|
|
|
|
<!-- 가용성 확인 -->
|
|
<div class="sketch-border p-5 text-center">
|
|
<div class="text-3xl mb-3">✅</div>
|
|
<h4 class="font-bold mb-1">실시간 가용성 확인</h4>
|
|
<p class="text-sketch-line/70 text-sm">등록 가능 여부와 가격을 즉시 확인</p>
|
|
</div>
|
|
|
|
<!-- WHOIS -->
|
|
<div class="sketch-border p-5 text-center">
|
|
<div class="text-3xl mb-3">🔍</div>
|
|
<h4 class="font-bold mb-1">WHOIS 조회</h4>
|
|
<p class="text-sketch-line/70 text-sm">도메인 소유자 및 만료일 정보 확인</p>
|
|
</div>
|
|
|
|
<!-- 네임서버 -->
|
|
<div class="sketch-border p-5 text-center">
|
|
<div class="text-3xl mb-3">⚙️</div>
|
|
<h4 class="font-bold mb-1">네임서버 관리</h4>
|
|
<p class="text-sketch-line/70 text-sm">DNS 설정을 대화로 간편하게 변경</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 가격 및 CTA -->
|
|
<div class="sketch-border p-8 flex flex-col md:flex-row items-center justify-between gap-6" style="background: #1e293b; border-color: #f97316;">
|
|
<div>
|
|
<p class="text-sketch-line/70 text-sm mb-1">최저가 도메인</p>
|
|
<div class="flex items-baseline gap-2 mb-2">
|
|
<span class="text-3xl font-bold text-sketch-orange">5,000원~</span>
|
|
<span class="text-sketch-line/70">/년</span>
|
|
</div>
|
|
<p class="text-sketch-line/70">.com, .net, .io, .kr 등 500개 이상의 TLD 지원!</p>
|
|
</div>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-orange px-6 py-3 text-lg flex items-center gap-2">
|
|
🌐 도메인 등록하기 →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="py-20">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
왜 <span class="sketch-circle">Anvil</span> 인가?
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">차별화된 기술력과 서비스로 신뢰를 드립니다</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="text-center">
|
|
<div class="text-5xl mb-4">⚡</div>
|
|
<h3 class="text-xl font-bold mb-2">초고속 네트워크</h3>
|
|
<p class="text-sketch-line/70">10Gbps 업링크와 글로벌 백본으로 어디서든 빠른 응답 속도</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="text-5xl mb-4">🔒</div>
|
|
<h3 class="text-xl font-bold mb-2">강력한 보안</h3>
|
|
<p class="text-sketch-line/70">다중 레이어 보안과 실시간 모니터링으로 안전하게 보호</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="text-5xl mb-4">🎧</div>
|
|
<h3 class="text-xl font-bold mb-2">24시간 지원</h3>
|
|
<p class="text-sketch-line/70">전문 엔지니어가 연중무휴로 기술 지원을 제공합니다</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Linux Guide Section -->
|
|
<section id="linux-guide" class="py-20">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<div class="sketch-badge mb-6" style="border-color: #22c55e; color: #22c55e;">
|
|
🐧 윈도우 서버만 고집하셨나요?
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
<span class="sketch-underline" style="--underline-color: #22c55e;">리눅스, 생각보다 쉬워요!</span>
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">비용은 절반, 성능은 2배. 지금 바로 시작하세요.</p>
|
|
</div>
|
|
|
|
<!-- 비교 테이블 -->
|
|
<div class="sketch-border p-6 md:p-8 mb-12">
|
|
<h3 class="text-xl font-bold mb-6 text-center font-hand">💡 윈도우 vs 리눅스 서버</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="border-b-2 border-dashed border-sketch-line/30">
|
|
<th class="py-3 px-4"></th>
|
|
<th class="py-3 px-4 text-center">🪟 윈도우</th>
|
|
<th class="py-3 px-4 text-center text-sketch-green">🐧 리눅스</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sketch-line/80">
|
|
<tr class="border-b border-dashed border-sketch-line/20">
|
|
<td class="py-3 px-4 font-medium">월 비용</td>
|
|
<td class="py-3 px-4 text-center">₩25,000~</td>
|
|
<td class="py-3 px-4 text-center font-bold text-sketch-green">₩4,900~ ✓</td>
|
|
</tr>
|
|
<tr class="border-b border-dashed border-sketch-line/20">
|
|
<td class="py-3 px-4 font-medium">리소스 효율</td>
|
|
<td class="py-3 px-4 text-center">메모리 2GB+ 필요</td>
|
|
<td class="py-3 px-4 text-center font-bold text-sketch-green">512MB로 충분 ✓</td>
|
|
</tr>
|
|
<tr class="border-b border-dashed border-sketch-line/20">
|
|
<td class="py-3 px-4 font-medium">보안</td>
|
|
<td class="py-3 px-4 text-center">바이러스 취약</td>
|
|
<td class="py-3 px-4 text-center font-bold text-sketch-green">압도적 보안 ✓</td>
|
|
</tr>
|
|
<tr class="border-b border-dashed border-sketch-line/20">
|
|
<td class="py-3 px-4 font-medium">안정성</td>
|
|
<td class="py-3 px-4 text-center">주기적 재부팅</td>
|
|
<td class="py-3 px-4 text-center font-bold text-sketch-green">수년간 무중단 ✓</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 px-4 font-medium">웹 호스팅 점유율</td>
|
|
<td class="py-3 px-4 text-center">~20%</td>
|
|
<td class="py-3 px-4 text-center font-bold text-sketch-green">~80% ✓</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cockpit 웹 콘솔 -->
|
|
<div class="sketch-border p-6 md:p-8 mb-12" style="border-color: #22c55e;">
|
|
<div class="text-center mb-8">
|
|
<h3 class="text-2xl font-bold mb-4 font-hand">🖥️ 웹 브라우저로 간편하게!</h3>
|
|
<p class="text-sketch-line/70">
|
|
<span class="highlight-box font-bold">Cockpit</span> 웹 콘솔로 명령어 없이 클릭만으로 서버를 관리하세요.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 스크린샷 그리드 -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
|
<div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/overview.webp', '시스템 대시보드')">
|
|
<img src="https://cockpit-project.org/images/screenshot/overview.webp" alt="시스템 대시보드" class="w-full h-auto">
|
|
<p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">시스템 대시보드</p>
|
|
</div>
|
|
<div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/storage-overview.webp', '스토리지 관리')">
|
|
<img src="https://cockpit-project.org/images/screenshot/storage-overview.webp" alt="스토리지 관리" class="w-full h-auto">
|
|
<p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">스토리지 관리</p>
|
|
</div>
|
|
<div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/network-overview.webp', '네트워크 설정')">
|
|
<img src="https://cockpit-project.org/images/screenshot/network-overview.webp" alt="네트워크 설정" class="w-full h-auto">
|
|
<p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">네트워크 설정</p>
|
|
</div>
|
|
<div class="rounded-lg overflow-hidden border-2 border-slate-600 cursor-pointer hover:border-sketch-green transition" onclick="openLightbox('https://cockpit-project.org/images/screenshot/system-services-ssh.webp', '서비스 관리')">
|
|
<img src="https://cockpit-project.org/images/screenshot/system-services-ssh.webp" alt="서비스 관리" class="w-full h-auto">
|
|
<p class="text-center text-xs text-sketch-line/70 py-2 bg-slate-800">서비스 관리</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기능 목록 -->
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-center text-sm">
|
|
<div class="flex items-center justify-center gap-2">
|
|
<span class="text-sketch-green">✓</span>
|
|
<span>실시간 모니터링</span>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<span class="text-sketch-green">✓</span>
|
|
<span>서비스 관리</span>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<span class="text-sketch-green">✓</span>
|
|
<span>사용자 관리</span>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<span class="text-sketch-green">✓</span>
|
|
<span>네트워크 설정</span>
|
|
</div>
|
|
<div class="flex items-center justify-center gap-2">
|
|
<span class="text-sketch-green">✓</span>
|
|
<span>로그 분석</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="text-center">
|
|
<div class="sticky-note inline-block mb-6">
|
|
<p class="text-lg">🎁 리눅스 서버 주문 시 <span class="font-bold">초기 설정 무료 지원!</span></p>
|
|
</div>
|
|
<br>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl inline-flex items-center gap-2">
|
|
리눅스 서버 상담받기 →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="pricing" class="py-20">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
<span class="sketch-underline">요금제</span>
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">리전별 월간 요금 (VAT 별도)</p>
|
|
</div>
|
|
|
|
<!-- 가격표 테이블 -->
|
|
<div class="sketch-border p-6 md:p-8 mb-12">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-center">
|
|
<thead>
|
|
<tr class="border-b-2 border-dashed border-sketch-line/30">
|
|
<th class="py-4 px-3 text-left">사양</th>
|
|
<th class="py-4 px-3">🇯🇵 도쿄/오사카</th>
|
|
<th class="py-4 px-3">🇸🇬 싱가포르</th>
|
|
<th class="py-4 px-3">🇭🇰 홍콩</th>
|
|
<th class="py-4 px-3">🇰🇷 서울</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sketch-line/80">
|
|
<tr class="border-b border-dashed border-sketch-line/20">
|
|
<td class="py-4 px-3 text-left">
|
|
<div class="font-bold">Starter</div>
|
|
<div class="text-xs text-sketch-line/50">1vCPU · 1GB · 25GB SSD · 1TB</div>
|
|
</td>
|
|
<td class="py-4 px-3 font-bold text-sketch-green">₩8,900</td>
|
|
<td class="py-4 px-3 font-bold text-sketch-green">₩8,900</td>
|
|
<td class="py-4 px-3 font-bold">₩14,900</td>
|
|
<td class="py-4 px-3 font-bold">₩19,900</td>
|
|
</tr>
|
|
<tr class="border-b border-dashed border-sketch-line/20 bg-sketch-blue/10">
|
|
<td class="py-4 px-3 text-left">
|
|
<div class="font-bold text-sketch-blue">Pro ⭐</div>
|
|
<div class="text-xs text-sketch-line/50">1vCPU · 2GB · 50GB SSD · 2TB</div>
|
|
</td>
|
|
<td class="py-4 px-3 font-bold text-sketch-green">₩19,900</td>
|
|
<td class="py-4 px-3 font-bold text-sketch-green">₩19,900</td>
|
|
<td class="py-4 px-3 font-bold">₩28,900</td>
|
|
<td class="py-4 px-3 font-bold">₩31,900</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-4 px-3 text-left">
|
|
<div class="font-bold">Business</div>
|
|
<div class="text-xs text-sketch-line/50">2vCPU · 4GB · 80GB SSD · 4TB</div>
|
|
</td>
|
|
<td class="py-4 px-3 font-bold text-sketch-green">₩39,900</td>
|
|
<td class="py-4 px-3 font-bold text-sketch-green">₩39,900</td>
|
|
<td class="py-4 px-3 font-bold">₩57,900</td>
|
|
<td class="py-4 px-3 font-bold">₩63,900</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="text-sketch-line/50 text-sm mt-4 text-center">
|
|
💡 도쿄/오사카, 싱가포르가 가장 저렴합니다!
|
|
</p>
|
|
</div>
|
|
|
|
<!-- DDoS 방어 옵션 -->
|
|
<div class="sketch-border p-6 md:p-8 mb-8">
|
|
<h3 class="text-xl font-bold mb-6 text-center font-hand">🛡️ DDoS 방어 옵션</h3>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="border-2 border-dashed border-slate-600 rounded p-5 text-center bg-slate-800">
|
|
<div class="text-2xl font-bold mb-2">기본 방어</div>
|
|
<div class="text-3xl font-bold text-sketch-green mb-3">무료</div>
|
|
<p class="text-sketch-line/70 text-sm">L3/L4 기본 보호<br>일반적인 공격 대응</p>
|
|
</div>
|
|
<div class="border-2 border-sketch-blue rounded p-5 text-center bg-sketch-blue/10">
|
|
<div class="text-2xl font-bold mb-2 text-sketch-blue">프리미엄 방어</div>
|
|
<div class="text-3xl font-bold mb-3">₩99,000<span class="text-base font-normal text-sketch-line/70">/월</span></div>
|
|
<p class="text-sketch-line/70 text-sm">L3/L4/L7 다중 레이어 방어<br>1Tbps+ 대규모 공격 차단</p>
|
|
<p class="text-xs text-sketch-line/50 mt-2">VAT 포함</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 공통 포함 사항 -->
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="sketch-border p-6 text-center">
|
|
<div class="text-3xl mb-3">🔒</div>
|
|
<h4 class="font-bold mb-2">무료 SSL</h4>
|
|
<p class="text-sketch-line/70 text-sm">Let's Encrypt 자동 발급</p>
|
|
</div>
|
|
<div class="sketch-border p-6 text-center">
|
|
<div class="text-3xl mb-3">🎧</div>
|
|
<h4 class="font-bold mb-2">24시간 지원</h4>
|
|
<p class="text-sketch-line/70 text-sm">텔레그램 실시간 상담</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="text-center mt-12">
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary px-8 py-4 text-xl inline-flex items-center gap-2">
|
|
서버 신청하기 →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-20">
|
|
<div class="max-w-4xl mx-auto px-6">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
시작할 준비가 되셨나요? 🚀
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">지금 바로 문의하시면 전문 상담원이 안내해 드립니다!</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- 문의 폼 -->
|
|
<div class="sketch-border p-6 md:p-8">
|
|
<h3 class="text-xl font-bold mb-6 font-hand">✉️ 문의하기</h3>
|
|
<form id="contactForm" class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium mb-1">이메일</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
class="w-full px-4 py-3 border-2 border-slate-600 rounded bg-slate-800 focus:outline-none focus:border-sketch-blue transition text-sketch-line"
|
|
placeholder="example@email.com"
|
|
>
|
|
<p id="emailError" class="text-sketch-red text-sm mt-1 hidden">올바른 이메일 형식이 아닙니다.</p>
|
|
</div>
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium mb-1">문의 내용</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
required
|
|
rows="5"
|
|
class="w-full px-4 py-3 border-2 border-slate-600 rounded bg-slate-800 focus:outline-none focus:border-sketch-blue transition resize-none text-sketch-line"
|
|
placeholder="문의 내용을 입력해주세요..."
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
id="submitBtn"
|
|
class="sketch-btn sketch-btn-primary w-full py-3 text-lg disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
보내기 →
|
|
</button>
|
|
<p id="formMessage" class="text-center text-sm hidden"></p>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- 빠른 연락 -->
|
|
<div class="space-y-6">
|
|
<div class="sketch-border p-6">
|
|
<h3 class="text-xl font-bold mb-4 font-hand">💬 빠른 상담</h3>
|
|
<p class="text-sketch-line/70 mb-4">텔레그램으로 실시간 상담을 받아보세요!</p>
|
|
<a href="https://t.me/AnvilForgeBot" target="_blank" class="sketch-btn sketch-btn-primary w-full py-3 text-lg flex items-center justify-center gap-2">
|
|
텔레그램 시작하기
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sketch-border p-6" style="border-color: #f97316;">
|
|
<h3 class="text-xl font-bold mb-4 font-hand">📞 연락처</h3>
|
|
<div class="space-y-3 text-sketch-line/70">
|
|
<p>✉️ <a href="mailto:info@anvil.it.com" class="hover:text-sketch-blue">info@anvil.it.com</a></p>
|
|
<p>💬 <a href="https://t.me/AnvilForgeBot" class="hover:text-sketch-blue">@AnvilForgeBot</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sticky-note">
|
|
<p class="font-bold">💡 Tip!</p>
|
|
<p class="text-sm">텔레그램 봇으로 도메인 검색, 가격 확인, 등록까지 바로 가능해요!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form Script -->
|
|
<script>
|
|
const CONTACT_API = 'https://telegram-summary-bot.kappa-d8e.workers.dev/api/contact';
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
|
|
const emailInput = document.getElementById('email');
|
|
const emailError = document.getElementById('emailError');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
// 이메일 실시간 검증
|
|
emailInput.addEventListener('input', () => {
|
|
const email = emailInput.value.trim();
|
|
if (email && !emailRegex.test(email)) {
|
|
emailError.classList.remove('hidden');
|
|
emailInput.classList.add('border-sketch-red');
|
|
emailInput.classList.remove('border-sketch-line');
|
|
submitBtn.disabled = true;
|
|
} else {
|
|
emailError.classList.add('hidden');
|
|
emailInput.classList.remove('border-sketch-red');
|
|
emailInput.classList.add('border-sketch-line');
|
|
submitBtn.disabled = false;
|
|
}
|
|
});
|
|
|
|
// 포커스 아웃 시에도 검증
|
|
emailInput.addEventListener('blur', () => {
|
|
const email = emailInput.value.trim();
|
|
if (email && !emailRegex.test(email)) {
|
|
emailError.classList.remove('hidden');
|
|
emailInput.classList.add('border-sketch-red');
|
|
}
|
|
});
|
|
|
|
document.getElementById('contactForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const form = e.target;
|
|
const formMessage = document.getElementById('formMessage');
|
|
|
|
const email = form.email.value.trim();
|
|
const message = form.message.value.trim();
|
|
|
|
// 이메일 최종 검증
|
|
if (!emailRegex.test(email)) {
|
|
emailError.classList.remove('hidden');
|
|
emailInput.focus();
|
|
return;
|
|
}
|
|
|
|
// 버튼 비활성화
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = '전송 중...';
|
|
formMessage.classList.add('hidden');
|
|
|
|
try {
|
|
const response = await fetch(CONTACT_API, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, message }),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
formMessage.textContent = '✅ ' + result.message;
|
|
formMessage.className = 'text-center text-sm text-sketch-green';
|
|
form.reset();
|
|
emailInput.classList.remove('border-sketch-red');
|
|
emailInput.classList.add('border-sketch-line');
|
|
} else {
|
|
formMessage.textContent = '❌ ' + (result.error || '전송 실패');
|
|
formMessage.className = 'text-center text-sm text-sketch-red';
|
|
}
|
|
} catch (error) {
|
|
formMessage.textContent = '❌ 네트워크 오류가 발생했습니다.';
|
|
formMessage.className = 'text-center text-sm text-sketch-red';
|
|
}
|
|
|
|
formMessage.classList.remove('hidden');
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = '보내기 →';
|
|
});
|
|
</script>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t-2 border-dashed border-sketch-line/20 py-12">
|
|
<div class="max-w-6xl mx-auto px-6">
|
|
<div class="grid md:grid-cols-3 gap-8 mb-8">
|
|
<!-- Company Info -->
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="text-2xl">🔨</span>
|
|
<span class="text-xl font-bold font-hand">Anvil</span>
|
|
</div>
|
|
<p class="text-sketch-line/70">
|
|
안정적인 인프라, 합리적인 가격.<br>
|
|
당신의 서비스를 위한 완벽한 호스팅.
|
|
</p>
|
|
</div>
|
|
<!-- Contact -->
|
|
<div>
|
|
<h4 class="font-bold mb-4 text-lg">문의</h4>
|
|
<div class="text-sketch-line/70 space-y-2">
|
|
<p>✉️ info@anvil.it.com</p>
|
|
<p>💬 @AnvilForgeBot</p>
|
|
</div>
|
|
</div>
|
|
<!-- Links -->
|
|
<div>
|
|
<h4 class="font-bold mb-4 text-lg">바로가기</h4>
|
|
<div class="text-sketch-line/70 space-y-2">
|
|
<a href="#services" class="block hover:text-sketch-blue transition">→ 서비스</a>
|
|
<a href="#domain" class="block hover:text-sketch-blue transition">→ 도메인</a>
|
|
<a href="#pricing" class="block hover:text-sketch-blue transition">→ 가격</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Info -->
|
|
<div class="sketch-divider mb-8"></div>
|
|
<div class="text-sketch-line/50 text-sm space-y-1 mb-4">
|
|
<p>LIBEHAIM Inc. | Taro Tanaka</p>
|
|
<p>#202 K-Flat, 3-1-13 Higashioi, Shinagawa-ku, Tokyo 140-0011, Japan</p>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<div class="text-sketch-line/50 text-sm">
|
|
© 2026 LIBEHAIM Inc. All rights reserved.
|
|
</div>
|
|
<div class="flex gap-6">
|
|
<a href="#" class="text-sketch-line/50 hover:text-sketch-blue text-sm transition">이용약관</a>
|
|
<a href="#" class="text-sketch-line/50 hover:text-sketch-blue text-sm transition">개인정보처리방침</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Chat Widget -->
|
|
<div class="chat-widget-container">
|
|
<!-- Chat Frame (Hidden by default) -->
|
|
<div id="chatFrame" class="chat-frame-wrapper">
|
|
<div class="chat-header">
|
|
<div class="flex items-center gap-2">
|
|
<span>🔨 무엇이든 물어보세요</span>
|
|
</div>
|
|
<button onclick="toggleChat()" class="hover:text-cream transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<iframe src="https://bd46a903.chat-frontend-4wf.pages.dev" class="chat-iframe" allow="microphone;"></iframe>
|
|
</div>
|
|
|
|
<!-- Toggle Button -->
|
|
<button id="chatBtn" onclick="toggleChat()" class="chat-toggle-btn group">
|
|
<!-- Chat Icon -->
|
|
<svg class="group-[.open]:hidden transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
<!-- Close Icon (Hidden initially) -->
|
|
<svg class="hidden group-[.open]:block transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
</svg>
|
|
|
|
<!-- New Message Badge (Optional) -->
|
|
<span class="absolute -top-1 -right-1 flex h-4 w-4">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sketch-red opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-4 w-4 bg-sketch-red"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Lightbox Modal -->
|
|
<div id="lightbox" class="fixed inset-0 z-[200] hidden items-center justify-center bg-black/90 p-4" onclick="closeLightbox()">
|
|
<button class="absolute top-4 right-4 text-white text-4xl hover:text-sketch-line/70 transition">×</button>
|
|
<div class="max-w-5xl max-h-[90vh] relative" onclick="event.stopPropagation()">
|
|
<img id="lightboxImg" src="" alt="" class="max-w-full max-h-[85vh] rounded-lg shadow-2xl">
|
|
<p id="lightboxCaption" class="text-center text-white mt-4 text-lg"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openLightbox(src, caption) {
|
|
const lightbox = document.getElementById('lightbox');
|
|
const img = document.getElementById('lightboxImg');
|
|
const captionEl = document.getElementById('lightboxCaption');
|
|
img.src = src;
|
|
img.alt = caption;
|
|
captionEl.textContent = caption;
|
|
lightbox.classList.remove('hidden');
|
|
lightbox.classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeLightbox() {
|
|
const lightbox = document.getElementById('lightbox');
|
|
lightbox.classList.add('hidden');
|
|
lightbox.classList.remove('flex');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') closeLightbox();
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
function toggleChat() {
|
|
const frame = document.getElementById('chatFrame');
|
|
const btn = document.getElementById('chatBtn');
|
|
|
|
frame.classList.toggle('open');
|
|
btn.classList.toggle('open');
|
|
|
|
// Update ARIA
|
|
const isOpen = frame.classList.contains('open');
|
|
btn.setAttribute('aria-expanded', isOpen);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|