81509c8ba4
- Add pointer-events: none to chat-widget-container to prevent blocking page links - Add pointer-events: auto to chat-toggle-btn and open state for clickability - Resize chat widget to 420x580px - Update chat header text to "무엇이든 물어보세요" - Enhance Telegram section with prominent badge and blue styling Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1031 lines
42 KiB
HTML
1031 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: '#fffce8',
|
|
sketch: {
|
|
bg: '#fffce8',
|
|
line: '#1e1e1e',
|
|
blue: '#1971c2',
|
|
red: '#e03131',
|
|
green: '#2f9e44',
|
|
orange: '#e8590c',
|
|
purple: '#9c36b5',
|
|
yellow: '#ffc078',
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
background-color: #fffce8;
|
|
background-image:
|
|
linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
}
|
|
|
|
/* 손그림 테두리 스타일 */
|
|
.sketch-border {
|
|
position: relative;
|
|
background: #fff;
|
|
border: 2px solid #1e1e1e;
|
|
border-radius: 3px;
|
|
transform: rotate(-0.5deg);
|
|
box-shadow: 4px 4px 0 #1e1e1e;
|
|
}
|
|
.sketch-border:nth-child(even) {
|
|
transform: rotate(0.5deg);
|
|
}
|
|
|
|
/* 손그림 버튼 */
|
|
.sketch-btn {
|
|
position: relative;
|
|
border: 2px solid #1e1e1e;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
box-shadow: 3px 3px 0 #1e1e1e;
|
|
transition: all 0.1s ease;
|
|
transform: rotate(-0.5deg);
|
|
}
|
|
.sketch-btn:hover {
|
|
transform: translate(-2px, -2px) rotate(-0.5deg);
|
|
box-shadow: 5px 5px 0 #1e1e1e;
|
|
}
|
|
.sketch-btn:active {
|
|
transform: translate(1px, 1px) rotate(-0.5deg);
|
|
box-shadow: 2px 2px 0 #1e1e1e;
|
|
}
|
|
.sketch-btn-primary {
|
|
background: #1971c2;
|
|
color: white;
|
|
}
|
|
.sketch-btn-orange {
|
|
background: #e8590c;
|
|
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='%231971c2' 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 #e03131;
|
|
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: #2f9e44;
|
|
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='%231e1e1e' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat-x;
|
|
background-size: 200px 4px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* 스티커 노트 스타일 */
|
|
.sticky-note {
|
|
background: #ffc078;
|
|
border: 2px solid #1e1e1e;
|
|
padding: 1rem;
|
|
transform: rotate(-2deg);
|
|
box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
|
|
font-family: 'Caveat', cursive;
|
|
}
|
|
.sticky-note:nth-child(even) {
|
|
transform: rotate(1deg);
|
|
background: #a5d8ff;
|
|
}
|
|
.sticky-note:nth-child(3n) {
|
|
transform: rotate(-1deg);
|
|
background: #b2f2bb;
|
|
}
|
|
|
|
/* 낙서 스타일 배지 */
|
|
.sketch-badge {
|
|
display: inline-block;
|
|
border: 2px dashed #1e1e1e;
|
|
border-radius: 20px;
|
|
padding: 4px 12px;
|
|
font-size: 0.875rem;
|
|
transform: rotate(-1deg);
|
|
}
|
|
|
|
/* 손글씨 강조 */
|
|
.highlight-box {
|
|
background: linear-gradient(180deg, transparent 60%, #ffc078 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: white;
|
|
border: 2px solid #1e1e1e;
|
|
border-radius: 4px;
|
|
box-shadow: 6px 6px 0 rgba(0,0,0,0.2);
|
|
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: #1971c2;
|
|
color: white;
|
|
padding: 0.75rem 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 2px solid #1e1e1e;
|
|
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: #1971c2;
|
|
color: white;
|
|
border: 2px solid #1e1e1e;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 4px 4px 0 #1e1e1e;
|
|
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 #1e1e1e;
|
|
}
|
|
|
|
.chat-toggle-btn:active {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 2px 2px 0 #1e1e1e;
|
|
}
|
|
|
|
/* 모바일 대응 */
|
|
@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/90 backdrop-blur-sm z-50 border-b-2 border-dashed border-sketch-line/30">
|
|
<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/5" style="transform: rotate(0deg); border-color: #1971c2;">
|
|
<div class="sketch-badge mb-4 mx-auto w-fit" style="border-color: #1971c2; color: #1971c2;">
|
|
📢 모든 신청 및 관리는 텔레그램으로!
|
|
</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="#1971c2" 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: #e8590c; color: #e8590c;">
|
|
💬 텔레그램으로 간편하게
|
|
</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: #fff8e6;">
|
|
<div>
|
|
<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: #2f9e44; color: #2f9e44;">
|
|
🐧 윈도우 서버만 고집하셨나요?
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 font-hand">
|
|
<span class="sketch-underline" style="--underline-color: #2f9e44;">리눅스, 생각보다 쉬워요!</span>
|
|
</h2>
|
|
<p class="text-xl text-sketch-line/70">비용은 절반, 성능은 2배. 지금 바로 시작하세요.</p>
|
|
</div>
|
|
|
|
<!-- 비교 테이블 -->
|
|
<div class="sketch-border p-6 md:p-8 mb-12" style="transform: rotate(0deg);">
|
|
<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>
|
|
|
|
<!-- 접속 방법 -->
|
|
<div class="grid md:grid-cols-2 gap-8 mb-12">
|
|
<div class="sketch-border p-6">
|
|
<div class="text-3xl mb-4">🔌</div>
|
|
<h3 class="text-xl font-bold mb-3">접속이 어렵다?</h3>
|
|
<p class="text-sketch-line/70 mb-4">
|
|
원격 데스크톱 대신 <span class="highlight-box">SSH</span>를 사용합니다.<br>
|
|
한 줄 명령어면 끝!
|
|
</p>
|
|
<div class="bg-sketch-line/5 border-2 border-dashed border-sketch-line/30 rounded p-4 font-mono text-sm">
|
|
<span class="text-sketch-green">$</span> ssh user@서버주소
|
|
</div>
|
|
<p class="text-sketch-line/50 text-sm mt-3">
|
|
💡 Mac/리눅스는 터미널, 윈도우는 <a href="https://www.putty.org/" target="_blank" class="text-sketch-blue hover:underline">PuTTY</a> 또는 <a href="https://tabby.sh/" target="_blank" class="text-sketch-blue hover:underline">Tabby</a> 사용
|
|
</p>
|
|
</div>
|
|
|
|
<div class="sketch-border p-6">
|
|
<div class="text-3xl mb-4">🖥️</div>
|
|
<h3 class="text-xl font-bold mb-3">터미널이 무섭다?</h3>
|
|
<p class="text-sketch-line/70 mb-4">
|
|
웹 기반 관리 패널로 <span class="highlight-box">클릭만으로</span> 관리하세요!
|
|
</p>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sketch-green font-bold">✓</span>
|
|
<span><strong>cPanel</strong> - 가장 직관적인 호스팅 패널</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sketch-green font-bold">✓</span>
|
|
<span><strong>Webmin</strong> - 무료 서버 관리 도구</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sketch-green font-bold">✓</span>
|
|
<span><strong>Cockpit</strong> - 현대적인 웹 콘솔</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 자주 쓰는 명령어 -->
|
|
<div class="sketch-border p-6 md:p-8 mb-12" style="background: #f0fdf4;">
|
|
<h3 class="text-xl font-bold mb-6 font-hand">📝 이것만 알면 OK! 자주 쓰는 명령어 5개</h3>
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="bg-white border-2 border-sketch-line/20 rounded p-4">
|
|
<code class="text-sketch-blue font-mono">ls</code>
|
|
<p class="text-sketch-line/70 text-sm mt-1">파일 목록 보기</p>
|
|
</div>
|
|
<div class="bg-white border-2 border-sketch-line/20 rounded p-4">
|
|
<code class="text-sketch-blue font-mono">cd 폴더명</code>
|
|
<p class="text-sketch-line/70 text-sm mt-1">폴더 이동</p>
|
|
</div>
|
|
<div class="bg-white border-2 border-sketch-line/20 rounded p-4">
|
|
<code class="text-sketch-blue font-mono">cp 파일 대상</code>
|
|
<p class="text-sketch-line/70 text-sm mt-1">파일 복사</p>
|
|
</div>
|
|
<div class="bg-white border-2 border-sketch-line/20 rounded p-4">
|
|
<code class="text-sketch-blue font-mono">mv 파일 대상</code>
|
|
<p class="text-sketch-line/70 text-sm mt-1">파일 이동/이름변경</p>
|
|
</div>
|
|
<div class="bg-white border-2 border-sketch-line/20 rounded p-4">
|
|
<code class="text-sketch-blue font-mono">rm 파일</code>
|
|
<p class="text-sketch-line/70 text-sm mt-1">파일 삭제</p>
|
|
</div>
|
|
<div class="bg-white border-2 border-sketch-line/20 rounded p-4">
|
|
<code class="text-sketch-blue font-mono">sudo 명령어</code>
|
|
<p class="text-sketch-line/70 text-sm mt-1">관리자 권한 실행</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div class="text-center">
|
|
<div class="sticky-note inline-block mb-6" style="transform: rotate(-1deg);">
|
|
<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" style="transform: rotate(0deg);">
|
|
<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/5">
|
|
<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" style="transform: rotate(0deg);">
|
|
<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-sketch-line/30 rounded p-5 text-center">
|
|
<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/5">
|
|
<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-sketch-line rounded bg-white focus:outline-none focus:border-sketch-blue transition"
|
|
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-sketch-line rounded bg-white focus:outline-none focus:border-sketch-blue transition resize-none"
|
|
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="background: #fff8e6;">
|
|
<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" style="transform: rotate(1deg);">
|
|
<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/30 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>
|
|
|
|
<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>
|